/* =========================================================================
 * Fitz Cafe — layout & chrome CSS
 * Header/footer chrome, responsive behaviour and the few decorative escapes.
 * Page section layout is inline (imported from the approved design); this file
 * adds only what inline styles can't express (states + media queries).
 * ===================================================================== */

/* ---- Link underline (nav + inline) ---------------------------------- */
.fz-link { position: relative; }
.fz-link::after {
	content: ""; position: absolute; left: 0; bottom: -4px;
	height: 1.5px; width: 0; background: #3f5230; transition: width .3s ease;
}
.fz-link:hover::after { width: 100%; }

@keyframes fzfade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================================
 * HEADER — one template, two states.
 * Inner pages: solid cream, sticky (in flow). Front page: transparent, fixed
 * over the hero, turning solid on scroll (JS toggles .solid).
 * ===================================================================== */
.fitz-header {
	position: sticky; top: 0; z-index: 50;
	background: #f6f4ec; box-shadow: 0 2px 18px rgba(46, 58, 33, .08);
	transition: background .35s ease, box-shadow .35s ease;
}
.fitz-header__bar {
	max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 72px;
	display: flex; align-items: center; justify-content: space-between;
	transition: height .35s ease;
}
.fitz-header__logo { display: flex; align-items: center; text-decoration: none; }
.fitz-logo { height: 50px; width: auto; display: block; }
.fitz-logo--light { display: none; }

.fitz-nav { display: flex; align-items: center; gap: 34px; }
.fitz-navlink {
	text-decoration: none; color: #3f5230; font-size: 14.5px;
	font-weight: 600; letter-spacing: .3px;
}
.fitz-navlink.is-active { font-weight: 800; }
.fitz-book {
	text-decoration: none; background: #3f5230; color: #fff; font-weight: 700;
	font-size: 13.5px; letter-spacing: .4px; padding: 12px 22px;
	border-radius: 30px; white-space: nowrap; transition: background .25s ease;
}
.fitz-book:hover { background: #344626; color: #fff; }
.fitz-burger {
	display: none; background: none; border: none; cursor: pointer; padding: 6px;
	color: #3f5230; line-height: 0;
}
.fitz-drawer { background: #f6f4ec; border-top: 1px solid #e3e0d4; padding: 14px 28px 22px; }
.fitz-drawer[hidden] { display: none; }
.fitz-drawer a {
	display: block; text-decoration: none; color: #3f5230; font-size: 16px;
	font-weight: 600; padding: 11px 0; border-bottom: 1px solid #e8e5d8;
}
.fitz-drawer a:last-child { border-bottom: 0; }

/* Front-page transparent-over-hero state */
body.fitz-front .fitz-header { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; }
body.fitz-front .fitz-header__bar { height: 92px; }
body.fitz-front .fitz-logo--dark { display: none; }
body.fitz-front .fitz-logo--light { display: block; }
body.fitz-front .fitz-navlink { color: #fff; }
body.fitz-front .fitz-burger { color: #fff; }

body.fitz-front .fitz-header.solid { background: #f6f4ec; box-shadow: 0 2px 18px rgba(46, 58, 33, .10); }
body.fitz-front .fitz-header.solid .fitz-header__bar { height: 72px; }
body.fitz-front .fitz-header.solid .fitz-logo--dark { display: block; }
body.fitz-front .fitz-header.solid .fitz-logo--light { display: none; }
body.fitz-front .fitz-header.solid .fitz-navlink { color: #3f5230; }
body.fitz-front .fitz-header.solid .fitz-burger { color: #3f5230; }

/* =========================================================================
 * SCROLL REVEAL (motion-safe) — matches the prototype's fade-up.
 * ===================================================================== */
.fitz-reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.22,.7,.2,1), transform .8s cubic-bezier(.22,.7,.2,1); }
.fitz-reveal.in { opacity: 1; transform: none; }

/* =========================================================================
 * RESPONSIVE — the design flips its whole layout at 880px (matches the
 * prototype's isMobile < 880). Inline grids carry no classes, so we override
 * them by matching their inline value with attribute selectors.
 * ===================================================================== */

/* Tablet: thin the very wide grids */
@media (max-width: 1024px) {
	[style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(4, 1fr) !important; }
	[style*="column-count: 3"] { column-count: 2 !important; }
}

/* Mobile flip */
@media (max-width: 880px) {
	/* Header → burger */
	.fitz-nav .fitz-navlink,
	.fitz-nav .fitz-book { display: none; }
	.fitz-burger { display: inline-flex; align-items: center; }

	/* Multi-column section grids collapse */
	[style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(3, 1fr) !important; }
	[style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
	[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
	[style*="grid-template-columns: 1.05fr 1fr"],
	[style*="grid-template-columns: 1fr 1.05fr"],
	[style*="grid-template-columns: 1.1fr 1fr"],
	[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
	[style*="grid-template-columns: 2fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }

	/* Drop mosaic row-spans so tiles tile evenly */
	[style*="grid-row: span 2"] { grid-row: auto !important; }

	/* Menu / category two-column item flow → single column */
	.fitz-cols,
	[style*="column-count: 2"],
	[style*="column-count: 3"] { column-count: 1 !important; }

	/* Featured + related card grids (classed) */
	.fz-feat { grid-template-columns: 1fr !important; }
	.fz-grid3 { grid-template-columns: 1fr !important; }
}

/* =========================================================================
 * ACCESSIBILITY
 * ===================================================================== */
.fitz-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: #3f5230; color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
	font-weight: 700; text-decoration: none;
}
.fitz-skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid #3f5230; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.fitz-reveal { opacity: 1 !important; transform: none !important; }
}

/* Footer responsive */
@media (max-width: 880px) {
	.fitz-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
	.fitz-foot-compact { justify-content: center !important; }
}
@media (max-width: 540px) {
	.fitz-foot-grid { grid-template-columns: 1fr !important; }
}