/* Menu Header block — frontend styles
 *
 * Default to Tailwind utilities in render.php/edit.js.
 * This file only covers what utilities cannot: the mobile nav open/closed
 * transition and the ::before overlay for sticky/active states.
 */

/* Mobile nav slide-down transition */
.cf-menu-header__mobile-nav {
	position: relative;
	overflow: hidden;
	grid-template-rows: 0fr;
	transition: grid-template-rows 450ms var(--ease-out-expo);
}

.cf-menu-header__mobile-nav > nav {
	min-height: 0;
	max-height: calc(100dvh - 5rem); /* viewport below the 80px header bar */
	overflow: hidden;
	opacity: 0;
	translate: 0 -0.5rem;
	transition: opacity 300ms ease, translate 450ms var(--ease-out-expo);
}

/* JS adds .is-open on toggle, .is-settled once the slide has finished */
.cf-menu-header__mobile-nav.is-open {
	grid-template-rows: 1fr;
}

.cf-menu-header__mobile-nav.is-open > nav {
	opacity: 1;
	translate: 0 0;
}

.cf-menu-header__mobile-nav.is-settled > nav {
	overflow-y: auto;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {

	.cf-menu-header__mobile-nav,
	.cf-menu-header__mobile-nav > nav {
		transition: none;
	}
}

/* Hamburger bar transition */
.cf-menu-header__hamburger-bar {
	transition: transform 250ms ease, opacity 150ms ease;
	transform-origin: center;
}

.cf-menu-header__hamburger.is-open .cf-menu-header__hamburger-bar:nth-child(1) {
	/* 6.75px = half a bar (0.875) + gap (5) + half a bar (0.875) → meets at centre */
	transform: translateY(6.75px) rotate(45deg);
}

.cf-menu-header__hamburger.is-open .cf-menu-header__hamburger-bar:nth-child(2) {
	opacity: 0;
}

.cf-menu-header__hamburger.is-open .cf-menu-header__hamburger-bar:nth-child(3) {
	transform: translateY(-6.75px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {

	.cf-menu-header__hamburger-bar {
		transition: none;
	}
}

/* ── Scroll hide/show (all fixed and sticky headers) ───────────────────────
 * JS adds .is-hidden when scrolling down past threshold; removes on scroll-up.
 */
.cf-menu-header {
	transition: transform 300ms ease-in-out;
}


/* ── Scroll background image (solid sticky headers only) ────────────────────
 * When scrollBgImageUrl is set, render.php outputs --cf-nav-scroll-bg as an
 * inline CSS variable. The ::before pseudo-element holds the image and fades
 * in slowly when JS adds .is-scrolled (at 40 px scroll).
 *
 * z-index: -1 inside the header's stacking context (position:sticky +
 * z-index:50) places the pseudo-element above the background-color but below
 * all child content — no z-index changes needed on children.
 */
.cf-menu-header:not(.cf-menu-header--transparent)::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--cf-nav-scroll-bg, none);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 700ms ease-in-out;
	pointer-events: none;
}

.cf-menu-header:not(.cf-menu-header--transparent).is-scrolled::before {
	opacity: 1;
}

.cf-menu-header.is-hidden {
	transform: translateY(-105%);
}

/* ── Transparent overlay mode ───────────────────────────────────────────────
 *
 * Behaviour:
 *   1. Fixed at top of viewport; initially transparent.
 *   2. On scroll past threshold → solid bg fades in (is-scrolled).
 *   3. On scroll down → slides up out of view (is-hidden, handled above).
 *   4. On scroll up  → slides back into view.
 */

/* 1 ── Fixed position + transitions */
.cf-menu-header--transparent {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: transparent;
	transition:
		background-color 300ms ease-in-out,
		box-shadow 300ms ease-in-out,
		transform 300ms ease-in-out;
}

/* ── WordPress admin bar offset ─────────────────────────────────────────────
 * When logged in, WP adds .admin-bar to <html> and fixes a 32 px bar at top.
 * Push the header down so it doesn't hide behind the admin bar.
 * WP's own breakpoint for the collapsed (46 px) bar is max-width 782 px.
 */
.admin-bar .cf-menu-header--transparent {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .cf-menu-header--transparent {
		top: 46px;
	}
}

/* 2 ── Scrolled: solid bg fades in.
 * Two-class specificity (0,2,0) beats the one-class base rule (0,1,0) above,
 * so no !important needed — and no fight with inline styles. */
.cf-menu-header--transparent.is-scrolled {
	background-color: var(--cf-header-bg, var(--color-linen));
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* ── Nav link colours ───────────────────────────────────────────────────────*/

/* Base: transitions + sliding underline available in both scroll states */
.cf-menu-header--transparent .cf-menu-header__nav-link {
	position: relative;
	transition: color 300ms ease-in-out, opacity 150ms ease;
}

.cf-menu-header--transparent .cf-menu-header__nav-link::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--cf-header-accent, var(--color-gold));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 200ms ease;
}

/* Hover — gold colour + underline slides in.
 *
 * Two cascade problems require the selectors below:
 *
 * 1. Source-order: the per-scroll-state rules that follow have the same
 *    specificity (0,3,0) as a single-state hover selector, and later rules
 *    win on equal specificity. Scoping hover inside each state raises it to
 *    (0,4,0), beating both state rules.
 *
 * 2. Inline opacity: render.php writes opacity:0.8 as an inline
 *    style on non-current links. Inline styles beat any stylesheet rule, so
 *    opacity needs !important here to override it on hover.
 */
.cf-menu-header--transparent:not(.is-scrolled) .cf-menu-header__nav-link:hover,
.cf-menu-header--transparent.is-scrolled .cf-menu-header__nav-link:hover {
	opacity: 1 !important;
	color: var(--cf-header-accent, var(--color-gold));
}

.cf-menu-header--transparent .cf-menu-header__nav-link:hover::after {
	transform: scaleX(1);
}

/* Transparent state */
.cf-menu-header--transparent:not(.is-scrolled) .cf-menu-header__nav-link {
	opacity: 1;
	color: var(--color-linen);
}

.cf-menu-header--transparent:not(.is-scrolled) .cf-menu-header__nav-link[aria-current="page"] {
	opacity: 1;
	color: var(--color-linen);
}

.cf-menu-header--transparent:not(.is-scrolled) .cf-menu-header__nav-link[aria-current="page"]::after {
	transform: scaleX(1);
}

/* Scrolled state */
.cf-menu-header--transparent.is-scrolled .cf-menu-header__nav-link {
	color: var(--cf-header-text-solid, var(--color-forest));
	opacity: 0.8;
}

.cf-menu-header--transparent.is-scrolled .cf-menu-header__nav-link[aria-current="page"] {
	opacity: 1;
}

.cf-menu-header--transparent.is-scrolled .cf-menu-header__nav-link[aria-current="page"]::after {
	transform: scaleX(1);
}

/* ── Integrated CTA bar ─────────────────────────────────────────────────────
 * The CTA bar lives inside the header element, above or below the nav row.
 * Layout/colour are set inline; opacity fade matches the nav link hover.
 */
.cf-menu-header__cta-bar a {
	position: relative;
	opacity: 0.8;
	transition: opacity 150ms ease;
}

.cf-menu-header__cta-bar a::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--cf-header-accent, var(--color-gold));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 200ms ease;
}

.cf-menu-header__cta-bar a:hover {
	opacity: 1;
}

.cf-menu-header__cta-bar a:hover::after {
	transform: scaleX(1);
}

.cf-menu-header__cta-bar a:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Hamburger colour ───────────────────────────────────────────────────────
 * Cream in transparent state; switches to solid text colour once bg fades in.
 * Colour transition matches the 300 ms background fade.
 */
.cf-menu-header--transparent .cf-menu-header__hamburger {
	transition: color 300ms ease-in-out;
}

.cf-menu-header--transparent:not(.is-scrolled) .cf-menu-header__hamburger {
	color: var(--color-linen);
}

.cf-menu-header--transparent.is-scrolled .cf-menu-header__hamburger {
	color: var(--cf-header-text-solid, var(--color-forest));
}

/* ── Social icons colour ─────────────────────────────────────────────────────
 * Match the nav links / hamburger: cream in the transparent state, switching
 * to the solid text colour once the background fades in on scroll. Without
 * this the icons keep the static cream colour and vanish on the solid bg.
 */
.cf-menu-header--transparent .cf-menu-header__social a {
	transition: color 300ms ease-in-out;
}

.cf-menu-header--transparent:not(.is-scrolled) .cf-menu-header__social a {
	color: var(--color-linen);
}

.cf-menu-header--transparent.is-scrolled .cf-menu-header__social a {
	color: var(--cf-header-text-solid, var(--color-forest));
}

/* ── Mobile drawer ──────────────────────────────────────────────────────────*/
.cf-menu-header--transparent .cf-menu-header__mobile-nav {
	background-color: var(--color-forest) !important;
}

/* ── Logo image height cap ───────────────────────────────────────────────────
 * max-height: 100% (max-h-full) cannot resolve inside inline-flex when the
 * container height is derived from flex layout rather than an explicit
 * declaration. Use a concrete value: header h-20 (5rem) minus py-1 (0.25rem)
 * top and bottom = 4.5rem (72 px).
 * No standard Tailwind utility covers 4.5 rem, so CSS is required here.
 */
.cf-menu-header__logo img,
.cf-menu-header__logo-img {
	max-height: 4.5rem; /* 72px = 80px header − 4px top − 4px bottom */
	width: auto;
}

/* Tablet: smaller logo so the split nav clears it */
@media (min-width: 57.25rem) and (max-width: 63.999rem) {
	.cf-menu-header__logo img,
	.cf-menu-header__logo-img {
		max-height: 3.5rem;
	}
}

/* ── Dual logo cross-fade (light ↔ dark) ────────────────────────────────────
 * Both logos occupy the same CSS grid cell so layout never shifts.
 * Light logo is visible in the transparent state; dark logo fades in once
 * JS adds .is-scrolled (solid background active).
 */
.cf-menu-header__logo-images {
	display: grid;
	justify-items: center;
}

.cf-menu-header__logo-images > .cf-menu-header__logo-img {
	grid-area: 1 / 1;
	transition: opacity 300ms ease-in-out;
}

.cf-menu-header--transparent .cf-menu-header__logo-img--light { opacity: 1; }
.cf-menu-header--transparent.is-scrolled .cf-menu-header__logo-img--light { opacity: 0; }
.cf-menu-header--transparent .cf-menu-header__logo-img--dark { opacity: 0; }
.cf-menu-header--transparent.is-scrolled .cf-menu-header__logo-img--dark { opacity: 1; }

/* ── Logo scale on scroll ───────────────────────────────────────────────────
 * Uses the CSS individual `scale` property so it composes with Tailwind's
 * translateX(-50%) centring without overriding the transform property.
 */
.cf-menu-header--transparent .cf-menu-header__logo {
	transition: scale 300ms ease-in-out;
}

.cf-menu-header--transparent.is-scrolled .cf-menu-header__logo {
	scale: 0.7;
}

/* ── Logo text smooth transition on scroll ──────────────────────────────────*/
.cf-menu-header--transparent .cf-menu-header__logo-text {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	transition: font-size 350ms ease-in-out;
}

.cf-menu-header--transparent.is-scrolled .cf-menu-header__logo-text {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Solid sticky header: start slightly larger, settle to compact on scroll */
.cf-menu-header:not(.cf-menu-header--transparent) .cf-menu-header__logo-text {
	font-size: clamp(1.4rem, 2.8vw, 2rem);
	transition: font-size 350ms ease-in-out;
}

.cf-menu-header:not(.cf-menu-header--transparent).is-scrolled .cf-menu-header__logo-text {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ── Desktop: breathing room above/below the logo ───────────────────────────
 * The logo box spans the full 80px bar; cap the image height so it clears the
 * top/bottom edges instead of filling the bar.
 */
@media (min-width: 57.25rem) {
	.cf-menu-header__logo-img,
	.cf-menu-header__logo > img {
		max-height: 3.5rem;
	}
}

/* ── Mobile layout (< nav breakpoint) ─────────────────────────────────────────
 * The centred logo is a desktop layout; on small screens keep the logo
 * hard-left and drop the 1px scroll shadow for a flatter mobile header.
 */
@media (max-width: 57.2499rem) {
	.cf-menu-header .cf-menu-header__logo {
		position: static;
		margin-left: 0;
		margin-right: auto;
		/* Shrink-on-scroll (scale: 0.7) anchors to the left edge so the logo
		 * stays left-aligned instead of drifting toward centre. */
		transform-origin: left center;
	}

	/* The light (full lockup) and dark (monogram) logo images share one grid
	 * cell sized to the wider image; left-align them so the narrow scrolled
	 * monogram doesn't sit centred in that cell. */
	.cf-menu-header__logo-images {
		justify-items: start;
	}

	.cf-menu-header--transparent.is-scrolled {
		box-shadow: none;
	}
}

/* ── Compact mode (links do not fit beside the logo) ─────────────────────── */
.cf-menu-header.is-compact .cf-menu-header__nav,
.cf-menu-header.is-compact .cf-menu-header__nav-right,
.cf-menu-header.is-compact .cf-menu-header__social {
	display: none;
}

.cf-menu-header.is-compact .cf-menu-header__hamburger {
	display: flex;
}

.cf-menu-header.is-compact .cf-menu-header__mobile-nav {
	display: grid;
}

.cf-menu-header.is-compact .cf-menu-header__inner {
	gap: 1rem;
}

.cf-menu-header.is-compact .cf-menu-header__actions {
	flex: none;
	margin-left: auto;
}

.cf-menu-header.is-compact .cf-menu-header__logo {
	position: static;
	translate: none;
	margin-left: 0;
	margin-right: auto;
	transform-origin: left center;
}

.cf-menu-header.is-compact .cf-menu-header__logo-images {
	justify-items: start;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {

	.cf-menu-header,
	.cf-menu-header:not(.cf-menu-header--transparent)::before,
	.cf-menu-header--transparent .cf-menu-header__logo,
	.cf-menu-header--transparent .cf-menu-header__logo-text,
	.cf-menu-header:not(.cf-menu-header--transparent) .cf-menu-header__logo-text,
	.cf-menu-header--transparent .cf-menu-header__nav-link::after,
	.cf-menu-header--transparent .cf-menu-header__hamburger,
	.cf-menu-header__logo-images > .cf-menu-header__logo-img {
		transition: none;
	}
}