/* ==========================================================================
   Header & Navigation — native block header (wp:site-title + wp:navigation),
   branded for Kuvaria.

   - Transparent bar over the page at the top; solid soft-pink (secondary) once
     scrolled (.is-stuck, toggled by the IntersectionObserver sentinel in
     assets/js/navigation.js).
   - Brand = a Mechta wordmark (client dropped the camera logo). Non-italic —
     the theme's h1 is italic site-wide, but a site-title is not an h1.
   - Flat menu (no submenus). Mobile = core's overlay (overlayMenu:"mobile"),
     painted pink via overlayBackgroundColor:"secondary" on the block.
   - Nav-link colours sit OUTSIDE @layer and out-specify core (core ships the
     Navigation block's CSS UNLAYERED). No hand-written !important — backgrounds
     borrow core's own !important via the colour attribute. See
     feedback_wp_native_nav_branding.md.
   ========================================================================== */

@layer header {
	/* ----- Fixed full-width bar (background lives here) ----- */
	.wp-block-template-part:has(.site-header) {
		position: fixed;
		inset-block-start: 0;
		inline-size: 100%;
		z-index: 100;
		background: transparent;
		transition:
			background 0.3s ease,
			box-shadow 0.3s ease;
	}

	.wp-block-template-part:has(.site-header.is-stuck) {
		background: var(--wp--preset--color--secondary);
		box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
	}

	/* Keep the bar clear of the admin bar when logged in. */
	.admin-bar .wp-block-template-part:has(.site-header) {
		inset-block-start: 32px;

		@media (max-width: 782px) {
			inset-block-start: 46px;
		}
	}

	/* ----- Inner content: centre + pad (follows the theme.json wide size) ----- */
	.site-header {
		max-inline-size: var(--wp--style--global--wide-size, 1200px);
		margin-inline: auto;
		padding-block: 0.5rem;
		padding-inline: clamp(20px, 4vw, 40px);
		gap: clamp(1rem, 3vw, 2.5rem);
	}

	/* Wordmark typography lives entirely in @layer overrides (below): the global
	   `.wp-site-blocks p` rule sets font-family/weight/size/line-height in
	   @layer components, which is ordered after @layer header — so any of those
	   set here would lose. Keep them together in the one layer that wins. */

	/* ----- Nav layout + link-colour state value (consumed unlayered below) -- */
	.site-header .wp-block-navigation {
		--nav-link-color: var(--wp--preset--color--contrast);
		gap: clamp(1rem, 2vw, 2rem);
	}
}

/* ==========================================================================
   UNLAYERED — must beat core's unlayered Navigation CSS (no !important).
   ========================================================================== */

/* Hamburger + close icons inherit the link colour (dark on the cream/pink bar
   and on the pink overlay). */
.site-header .wp-block-navigation,
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--nav-link-color);
}

/* Top-level links: uppercase, body font, accent underline on hover/focus. */
.site-header .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--nav-link-color);
	padding-block-end: 4px;
	border-block-end: 1px solid transparent;
	transition:
		border-color 200ms ease,
		color 200ms ease;
}

.site-header .wp-block-navigation-item__content:where(:hover, :focus) {
	border-block-end-color: var(--wp--preset--color--accent);
}

/* Wordmark font + colour. This fights THEME rules in @layer components
   (`.wp-site-blocks p` → body font; the content-link rule → green + underline),
   which are ordered AFTER @layer header — so the proportionate lever is a later
   LAYER, not unlayered. @layer overrides is the last layer in the stack and
   beats components cleanly. (Contrast with the nav rules below, which fight
   CORE's UNLAYERED Navigation CSS — no layer can beat that, so those must stay
   unlayered.) The site-title <a> inherits font + colour from its <p>. */
@layer overrides {
	.site-header .wp-block-site-title {
		margin: 0;
		font-family: var(--wp--preset--font-family--heading);
		font-style: normal;
		font-weight: 400;
		font-size: var(--wp--preset--font-size--x-large);
		line-height: 1;
		letter-spacing: 0.01em;
		color: var(--wp--preset--color--contrast);
	}

	.site-header .wp-block-site-title a {
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}
}

/* ----- Mobile overlay (< 600px) -----
   Paint the overlay soft-pink here, NOT via the block's overlayBackgroundColor
   attribute: WP 7.0's white fallback
   (.wp-block-navigation:not(.has-background) …is-menu-open, 0,4,0, NOT
   !important) out-specifies the colour utility, so the attribute no longer
   wins. Replicate at (0,5,0) — beats the fallback without !important. */
.site-header .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--secondary);
}

/* Left-align the stacked items (the desktop justifyContent:right otherwise
   carries in as flex-end) and pad them off the edges + clear of the close X. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-block-start: clamp(3rem, 12vh, 5rem);
	padding-inline: clamp(20px, 6vw, 40px);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0.75rem;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1rem;
	padding-block-end: 0;
	border-block-end: 0;
}

/* Honour reduced-motion: kill the scroll-state + hover transitions. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-template-part:has(.site-header),
	.site-header .wp-block-navigation-item__content {
		transition: none;
	}
}