/*
 Theme Name:   The Ferrantino's
 Theme URI:    https://www.ferrantinos.com/
 Description:  GeneratePress child theme for The Ferrantino's — a family recipe collection. Coastal teal chassis (#5596A2, carried over from the original site) on a warm cream canvas, with a gold action color and a Fraunces editorial voice.
 Author:       The Ferrantino's
 Template:     generatepress
 Version:      1.0.0
*/

/* ==========================================================================
   1. DESIGN TOKENS  (--fp-*)
   Single source of truth: every color, space, radius, shadow lives here.
   ========================================================================== */

:root {
	/* Chassis — teal header/footer (original brand color) */
	--fp-teal: #5596A2;        /* signature — original site header */
	--fp-teal-deep: #3E7480;   /* gradient bottom / hover */
	--fp-teal-link: #3E7480;   /* teal links on cream (readable) */
	--fp-teal-hi: #7FB6C0;     /* light accent */

	/* Warm action color */
	--fp-gold: #E0A33E;
	--fp-gold-hi: #E9B85C;
	--fp-gold-deep: #B97F22;   /* gold text on cream (readable) */

	/* Canvas + surfaces (warm) */
	--fp-cream: #FBF6EC;       /* page background */
	--fp-surface: #F3ECDC;     /* alt sections */
	--fp-card: #FFFFFF;        /* cards */
	--fp-tint: #ECF3F4;        /* faint teal wash */

	/* Ink */
	--fp-ink: #2C2A24;         /* warm near-black body text */
	--fp-muted: #6B6557;       /* muted warm gray */
	--fp-line: #E7DEC9;        /* warm hairline */
	--fp-line-strong: #D8CCB1;

	/* On-teal ink (header/footer) */
	--fp-on-teal: #FFFFFF;
	--fp-on-teal-muted: rgba(255, 255, 255, 0.84);
	--fp-on-teal-line: rgba(255, 255, 255, 0.18);

	/* Type */
	--fp-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fp-font-display: "Fraunces", Georgia, "Times New Roman", serif;

	/* Spacing (8px base) */
	--fp-space-1: 0.25rem;
	--fp-space-2: 0.5rem;
	--fp-space-3: 0.75rem;
	--fp-space-4: 1rem;
	--fp-space-5: 1.5rem;
	--fp-space-6: 2rem;
	--fp-space-7: 3rem;
	--fp-space-8: 4rem;

	/* Radius */
	--fp-radius-sm: 5px;
	--fp-radius: 10px;
	--fp-radius-lg: 16px;

	/* Shadow */
	--fp-shadow: 0 2px 10px rgba(44, 42, 36, 0.05);
	--fp-shadow-lg: 0 22px 44px -22px rgba(44, 42, 36, 0.30);

	/* Motion */
	--fp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--fp-dur: 0.2s;
}

/* ==========================================================================
   2. CANVAS + BASE TYPOGRAPHY
   Warm cream page; Fraunces for display, Archivo for text.
   ========================================================================== */

body {
	background: var(--fp-cream);
	color: var(--fp-ink);
	font-family: var(--fp-font);
}

.entry-content a,
.entry-content a:visited {
	color: var(--fp-teal-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content a:hover {
	color: var(--fp-gold-deep);
}

/* ==========================================================================
   3. HEADER + PRIMARY NAVIGATION
   Teal bar, white wordmark, "underline-on-hover" nav (gold active marker).
   Both .site-header and .main-navigation are teal so the bar reads as one
   band whether the menu sits inline or on its own row.

   Verified against this project's GeneratePress 3.6.1 (inc/structure/
   navigation.php): container is .main-nav, the dropdown chevron is
   span.dropdown-menu-toggle inside the parent <a>, mobile toggles via
   .main-navigation.toggled.
   ========================================================================== */

.site-header {
	background: linear-gradient(180deg, var(--fp-teal) 0%, var(--fp-teal-deep) 100%);
	border-bottom: 0;
}

/* When the nav renders as its own row, keep the band teal too */
.main-navigation {
	background: linear-gradient(180deg, var(--fp-teal) 0%, var(--fp-teal-deep) 100%);
}

.main-navigation .inside-navigation {
	background-color: transparent;
}

/* Nav already on the teal header bar (inline layout) */
.site-header .main-navigation {
	background: transparent;
}

/* GP colors nav hover/current with var(--accent) — a blue — via rules whose
   :not([class*="current-menu-"]) gives them high specificity. Rather than fight
   it, re-scope --accent inside the nav so GP's own rules resolve to our palette:
   white on the teal bar, teal inside the (white) dropdown. */
.main-navigation {
	--accent: var(--fp-on-teal);
}

.main-navigation .main-nav ul ul {
	--accent: var(--fp-teal-link);
}

/* Wordmark (placeholder until a transparent logo is added) */
.main-title a,
.site-title a {
	font-family: var(--fp-font-display);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--fp-on-teal);
}

.main-title a:hover {
	color: var(--fp-on-teal);
}

/* Transparent white logo will sit on the teal bar (like Gameday) */
.site-logo img,
.site-header .header-image {
	max-height: 48px;
	width: auto;
}

/* --- Top-level links --- */
.main-navigation .main-nav > ul > li > a {
	position: relative;
	color: var(--fp-on-teal-muted);
	font-family: var(--fp-font);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 12px 16px;
	transition: color var(--fp-dur) ease;
}

.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 6px;
	height: 3px;
	border-radius: 2px;
	background: var(--fp-on-teal);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--fp-dur) var(--fp-ease);
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus {
	color: var(--fp-on-teal);
}

.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li > a:focus::after,
.main-navigation .main-nav > ul > li.sfHover > a::after {
	transform: scaleX(1);
}

/* Active page — gold marker */
.main-navigation .main-nav > ul > li[class*="current-menu"] > a {
	color: var(--fp-on-teal);
}

.main-navigation .main-nav > ul > li[class*="current-menu"] > a::after {
	background: var(--fp-gold);
	transform: scaleX(1);
}

/* Dropdown chevron */
.main-navigation .main-nav .dropdown-menu-toggle {
	color: var(--fp-on-teal-muted);
}

/* --- Dropdown: floating card --- */
.main-navigation .main-nav ul ul {
	background: var(--fp-card);
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius-lg);
	box-shadow: var(--fp-shadow-lg);
	width: auto;
	min-width: 240px;
	padding: 8px;
}

/* The menu sits on the right, so open top-level dropdowns leftward (align their
   right edge to the parent) — otherwise they run off the right of the screen. */
.main-navigation .main-nav > ul > li > ul {
	left: auto;
	right: 0;
}

.main-navigation .main-nav ul ul::before {
	content: "";
	position: absolute;
	top: 0;
	left: 18px;
	right: 18px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--fp-teal), var(--fp-gold));
}

.main-navigation .main-nav ul ul li a {
	color: var(--fp-ink);
	font-family: var(--fp-font);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: normal;
	padding: 11px 14px;
	border-radius: var(--fp-radius);
	transition: background 0.18s ease, color 0.18s ease;
}

.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li a:focus,
.main-navigation .main-nav ul ul li[class*="current-menu"] > a {
	color: var(--fp-teal-link);
	background: var(--fp-tint);
}

/* --- Mobile --- */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle .mobile-menu {
	color: var(--fp-on-teal);
}

.main-navigation.toggled .main-nav ul ul {
	position: static;
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: rgba(255, 255, 255, 0.06);
}

.main-navigation.toggled .main-nav ul ul::before {
	display: none;
}

.main-navigation.toggled .main-nav > ul > li > a::after {
	display: none;
}

/* ==========================================================================
   4. SITE FOOTER
   Rendered by partials/site-footer.php (wired in inc/footer.php, which removes
   GP's default footer + widgets). Teal — bookends the header.
   ========================================================================== */

.fp-footer {
	position: relative;
	background: linear-gradient(180deg, var(--fp-teal) 0%, var(--fp-teal-deep) 100%);
	color: var(--fp-on-teal-muted);
}

.fp-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--fp-teal-hi), var(--fp-gold));
}

.fp-footer__inner {
	padding: var(--fp-space-8) 40px var(--fp-space-6);
	text-align: center;
}

.fp-footer__mark {
	font-family: var(--fp-font-display);
	font-weight: 600;
	font-size: 1.75rem;
	color: var(--fp-on-teal);
	margin: 0;
}

.fp-footer__blurb {
	max-width: 46ch;
	margin: var(--fp-space-3) auto 0;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--fp-on-teal-muted);
}

.fp-footer__nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--fp-space-5);
	margin: var(--fp-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.fp-footer__nav a {
	color: var(--fp-on-teal);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.18s ease;
}

.fp-footer__nav a:hover {
	color: var(--fp-gold-hi);
}

.fp-footer__bottom {
	margin-top: var(--fp-space-6);
	padding-top: var(--fp-space-5);
	border-top: 1px solid var(--fp-on-teal-line);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   5. FRONT PAGE  (front-page.php)
   Cream hero + recipe grid.
   ========================================================================== */

/* Fill GP's flex content row (#content.site-content) — without this, the
   wrapper shrinks to content width and pins left, leaving a right-side gap. */
.fp-page {
	width: 100%;
}

.fp-hero {
	background: radial-gradient(900px 460px at 80% -20%, var(--fp-tint), transparent 60%), var(--fp-cream);
	text-align: center;
	padding: var(--fp-space-8) var(--fp-space-5) var(--fp-space-7);
}

.fp-eyebrow {
	font-family: var(--fp-font);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--fp-teal-link);
}

.fp-hero h1 {
	font-family: var(--fp-font-display);
	font-weight: 600;
	font-size: clamp(2.4rem, 6vw, 4rem);
	line-height: 1.04;
	color: var(--fp-ink);
	margin: var(--fp-space-3) auto 0;
	max-width: 16ch;
}

.fp-hero p {
	max-width: 52ch;
	margin: var(--fp-space-4) auto 0;
	font-size: 1.075rem;
	line-height: 1.6;
	color: var(--fp-muted);
}

.fp-hero__rule {
	width: 64px;
	height: 3px;
	margin: var(--fp-space-5) auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--fp-teal), var(--fp-gold));
}

/* Content sections (one per category — Recipes, Family News, …) */
.fp-section {
	padding: var(--fp-space-8) var(--fp-space-5);
}

.fp-section--surface {
	background: var(--fp-surface);
}

.fp-section__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.fp-shead {
	text-align: center;
	margin-bottom: var(--fp-space-6);
}

.fp-shead__title {
	font-family: var(--fp-font-display);
	font-weight: 600;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.05;
	color: var(--fp-ink);
	margin: var(--fp-space-2) 0 0;
}

.fp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fp-space-5);
}

/* ==========================================================================
   6. RECIPE CARD  (template-parts/recipe-card.php)
   Image optional — text-forward warm card.
   ========================================================================== */

.fp-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--fp-card);
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-teal);
	border-radius: var(--fp-radius-lg);
	box-shadow: var(--fp-shadow);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-card:hover {
	transform: translateY(-4px);
	border-color: var(--fp-teal-hi);
	border-top-color: var(--fp-gold);
	box-shadow: var(--fp-shadow-lg);
}

.fp-card__media {
	aspect-ratio: 3 / 2;
	background: var(--fp-tint);
	overflow: hidden;
}

.fp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fp-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--fp-space-2);
	padding: var(--fp-space-5);
}

.fp-card__kicker {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fp-teal-link);
}

.fp-card__title {
	font-family: var(--fp-font-display);
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.15;
	color: var(--fp-ink);
	margin: 0;
}

.fp-card__excerpt {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--fp-muted);
	flex: 1;
}

.fp-card__go {
	margin-top: var(--fp-space-2);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fp-gold-deep);
}

.fp-card:hover .fp-card__go {
	color: var(--fp-teal-link);
}

/* ==========================================================================
   7. SINGLE RECIPE  (single.php)
   Centered editorial column on cream.
   ========================================================================== */

.fp-single {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--fp-space-7) var(--fp-space-5) var(--fp-space-8);
}

.fp-single__back {
	display: inline-block;
	margin-bottom: var(--fp-space-5);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fp-teal-link);
	text-decoration: none;
}

.fp-single__back:hover {
	color: var(--fp-gold-deep);
}

.fp-single__eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--fp-teal-link);
}

.fp-single__title {
	font-family: var(--fp-font-display);
	font-weight: 600;
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1.06;
	color: var(--fp-ink);
	margin: var(--fp-space-2) 0 0;
}

.fp-single__rule {
	width: 56px;
	height: 3px;
	margin: var(--fp-space-4) 0 var(--fp-space-6);
	border-radius: 2px;
	background: linear-gradient(90deg, var(--fp-teal), var(--fp-gold));
}

.fp-single .entry-content {
	font-size: 1.075rem;
	line-height: 1.75;
	color: var(--fp-ink);
}

.fp-single .entry-content p {
	margin: 0 0 var(--fp-space-4);
}

.fp-single .entry-content strong {
	color: var(--fp-ink);
}

/* Galleries (e.g. Welcome Baby Gio) */
.fp-single .wp-block-gallery,
.fp-single .blocks-gallery-grid {
	margin: var(--fp-space-5) 0;
}

.fp-single .entry-content img {
	border-radius: var(--fp-radius);
}

/* ==========================================================================
   8. GALLERY LIGHTBOX  (assets/js/lightbox.js)
   Full-size overlay with prev/next; teal/gold controls on a dark scrim.
   ========================================================================== */

.fp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 5vh 6vw;
	background: rgba(20, 30, 32, 0.93);
}

.fp-lightbox.is-open {
	display: flex;
}

.fp-lightbox__stage {
	margin: 0;
	display: flex;
}

.fp-lightbox__img {
	max-width: 88vw;
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--fp-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.fp-lightbox__close,
.fp-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.fp-lightbox__close:hover,
.fp-lightbox__nav:hover {
	background: var(--fp-gold);
	color: var(--fp-ink);
}

.fp-lightbox__close {
	top: 20px;
	right: 24px;
	font-size: 26px;
}

.fp-lightbox__prev {
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.fp-lightbox__next {
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.fp-lightbox__nav[hidden] {
	display: none;
}

@media (max-width: 560px) {
	.fp-lightbox__prev {
		left: 10px;
	}

	.fp-lightbox__next {
		right: 10px;
	}
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

@media (max-width: 880px) {
	.fp-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.fp-grid {
		grid-template-columns: 1fr;
	}

	.fp-footer__inner {
		padding-inline: var(--fp-space-5);
	}
}