/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://www.lekkiparrot.com
 Description:  Child theme for GeneratePress, built for the Lekki Parrot news and press blog.
 Author:       Lekki Parrot
 Author URI:   https://www.lekkiparrot.com
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-child
*/

/* =====================================================
   1. TYPOGRAPHY SCALE
   Fluid, readable heading + body scale using clamp()
   so sizes flex between mobile and desktop without
   separate media-query breakpoints.
   ===================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	line-height: 1.7rem;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, iframe, video, embed, object {
	max-width: 100%;
	height: auto;
}

table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

h1, .entry-title {
	font-size: clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.4rem);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
	line-height: 1.3;
	font-weight: 600;
}

/* Body copy: 1.6-1.8rem line height for legibility, per article content only
   (kept scoped so it doesn't stretch tight UI elements like buttons/menus). */
.entry-content p,
.entry-content li {
	line-height: 1.8rem;
	font-size: 1.05rem;
}

@media (max-width: 600px) {
	.entry-content p,
	.entry-content li {
		line-height: 1.6rem;
		font-size: 1rem;
	}
}

/* =====================================================
   2. ARTICLE CARD GRID
   Wraps the archive/index/search loop (see generatepress_child_open_article_grid()
   in functions.php). Cards use GeneratePress's real markup:
   article.article-card > .inside-article > (.post-image, .entry-header, .entry-summary)
   auto-fit + minmax(min(...)) keeps cards from overflowing on narrow phones
   without needing extra breakpoints for the grid itself.
   ===================================================== */

.press-article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

article.article-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

article.article-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* .inside-article is GeneratePress's own content wrapper -- using it as the
   card body avoids needing a template override just to add a wrapper div. */
article.article-card .inside-article {
	display: flex;
	flex-direction: column;
	height: 100%;
}

article.article-card .post-image {
	margin: 0;
	line-height: 0;
}

article.article-card .post-image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Cards are image + title only (see generatepress_child_strip_card_meta()
   in functions.php for the post-meta/footer-meta removal). The excerpt
   block still renders in the markup -- GeneratePress's content.php doesn't
   expose a hook to skip it outright without a template override -- so it's
   hidden here rather than shipped visibly. */
article.article-card .entry-summary {
	display: none;
}

article.article-card .entry-header {
	padding: 0.85rem 1.1rem 1.1rem;
}

article.article-card .entry-header .entry-title,
article.article-card .entry-header h2,
article.article-card .entry-header h3 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.1rem;
	line-height: 1.4;
	letter-spacing: normal;
}

article.article-card .entry-meta {
	display: inline-block;
}

/* Read Article link, output by the excerpt_more filter in functions.php */
.read-more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: auto;
	padding-top: 0.75rem;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	color: var(--generate-link-color, #1a56db);
	transition: gap 0.2s ease, color 0.2s ease;
}

.read-more-link:hover {
	gap: 0.65em;
	color: var(--generate-link-color-hover, #0f3fa8);
}


/* =====================================================
   3. GLASS NAVIGATION
   Subtle frosted-glass backdrop for the primary menu.
   Falls back gracefully where backdrop-filter isn't
   supported (older browsers just get the solid fallback).
   ===================================================== */

.main-navigation {
	background-color: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.main-navigation {
		background-color: rgba(255, 255, 255, 0.95);
	}
}

/* =====================================================
   4. PRESS SIDEBAR WIDGET AREA
   Basic spacing/legibility for the custom "Press Sidebar"
   registered in functions.php.
   ===================================================== */

#press-sidebar .widget {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#press-sidebar .widget-title {
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 1rem;
}

/* =====================================================
   5. READING TIME BADGE
   Small meta badge printed alongside post meta wherever
   generatepress_reading_time() is echoed in templates.
   ===================================================== */

.reading-time {
	display: inline-flex;
	align-items: center;
	font-size: 0.85rem;
	color: #6b7280;
	margin-top: 0.35rem;
}

.entry-meta + .reading-time::before {
	content: "\2022";
	margin: 0 0.5em;
	color: #d1d5db;
}

/* =====================================================
   6. FOOTER SOCIAL ICONS
   Printed via generate_before_copyright, above the copyright bar.
   ===================================================== */

.footer-social-icons {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.5rem 0 0.5rem;
}

.footer-social-icons .social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(27, 75, 74, 0.08);
	color: #1b4b4a;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer-social-icons .social-icon:hover {
	background: #1b4b4a;
	color: #fff;
	transform: translateY(-2px);
}