/**
 * wp-base header — logo · nav · action buttons (icon over label).
 *
 * Brand-neutral: every colour/size/space comes from theme.json presets
 * (--wp--preset--*) and a few header-local custom props, so a child theme
 * reskins it for free. Action buttons share one class (.wpbase-header__action)
 * whether rendered as <a> (link) or <button> (search) — PHP links and the React
 * search trigger look identical.
 *
 * Step 1 (light polish): symmetry & rhythm, larger logo + nav, animated active
 * underline, action-button hover, soft elevation + a divider from page content.
 */

.wpbase-header {
	--wpbase-header-fg: var(--wp--preset--color--contrast, #1a1a1a);
	--wpbase-header-accent: var(--wp--preset--color--accent-1, #2563eb);
	--wpbase-header-accent-strong: var(--wp--preset--color--accent-2, var(--wpbase-header-accent));
	--wpbase-header-hairline: var(--wp--preset--color--neutral-2, rgba(0, 0, 0, .08));
	--wpbase-header-hover: var(--wp--preset--color--neutral-1, rgba(0, 0, 0, .04));
	--wpbase-header-radius: var(--wp--custom--border-radius--medium, 10px);

	color: var(--wpbase-header-fg);
	/* Separate the header from page content: hairline + soft drop shadow. */
	border-bottom: 1px solid var(--wpbase-header-hairline);
	box-shadow: 0 6px 22px -16px rgba(0, 0, 0, .45);
	/* Step 2 (cool): sticky + frosted backdrop — nav stays reachable as you scroll.
	   Sits below the WP admin bar when logged in. Falls back to the opaque base
	   background where color-mix / backdrop-filter aren't supported. */
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}
/* Frosted translucency — compound selector beats the preset .has-base-background-color
   (one class). Invalid color-mix is ignored, leaving the opaque base as the fallback. */
.wpbase-header.has-base-background-color {
	background-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 82%, transparent);
	transition: background-color .25s ease, box-shadow .25s ease;
}
/* Elevation-on-scroll: once scrolled (JS adds .is-stuck) the header lifts — a
   touch more opacity for legibility over content + a deeper, layered shadow. */
.wpbase-header.is-stuck.has-base-background-color {
	background-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 92%, transparent);
}
.wpbase-header.is-stuck {
	box-shadow: 0 1px 0 var(--wpbase-header-hairline), 0 10px 30px -18px rgba(0, 0, 0, .55);
}

.wp-site-blocks > .wp-block-template-part + main.wp-block-group {
	margin-block-start: 0;
}

.wpbase-header__bar {
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 80px;
}

/* ── Logo (recipe image or core site logo/title) ─────────────────────── */
.wpbase-header__brand {
	flex: 0 0 auto;
}
.wpbase-header__logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.wpbase-header__logo img,
.wpbase-header .wp-block-site-logo img {
	height: auto;
	width: auto;
	max-height: clamp(52px, 6vw, 68px);
	object-fit: contain;
	transition: transform .25s ease;
}
.wpbase-header__logo:hover img {
	transform: scale(1.03);
}

/* ── Primary navigation (center) ─────────────────────────────────────── */
.wpbase-header__nav {
	flex: 1 1 auto;
	font-size: var(--wp--preset--font-size--medium, 1.0625rem);
}
.wpbase-header__nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.4rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wpbase-header-fg);
	transition: color .18s ease;
}
.wpbase-header__nav .wp-block-navigation-item__content:hover,
.wpbase-header__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wpbase-header-accent);
}
/* Animated underline: grows from center on hover, full + bold for the current page. */
.wpbase-header__nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	border-radius: 3px;
	background: var(--wpbase-header-accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .24s ease;
}
.wpbase-header__nav .wp-block-navigation-item__content:hover::after,
.wpbase-header__nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(.55);
}
/* Current page — marked deterministically by URL via JS (.is-current), because
   the core Navigation block's own current classes are unreliable with a static
   front page (it stamps the Home item as current on every page). See frontend.js. */
.wpbase-header__nav .wp-block-navigation-item__content.is-current {
	font-weight: 800;
	color: var(--wpbase-header-accent-strong);
}
.wpbase-header__nav .wp-block-navigation-item__content.is-current::after {
	transform: scaleX(1);
}

.wpbase-header__nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:not(.is-current) {
	font-weight: 600;
	color: var(--wpbase-header-fg);
}

.wpbase-header__nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:not(.is-current)::after {
	transform: scaleX(0);
}

.wpbase-header__nav .wp-block-navigation-item.current-menu-item.menu-item-home > .wp-block-navigation-item__content:not(.is-current) {
	font-weight: 600;
	color: var(--wpbase-header-fg);
}

.wpbase-header__nav .wp-block-navigation-item.current-menu-item.menu-item-home > .wp-block-navigation-item__content:not(.is-current)::after {
	transform: scaleX(0);
}

.wpbase-header__nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content[aria-current="page"] {
	font-weight: 800;
	color: var(--wpbase-header-accent-strong);
}

.wpbase-header__nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

/* ── Action cluster (right) ──────────────────────────────────────────── */
.wpbase-header__actions {
	display: flex;
	align-items: stretch;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	flex: 0 0 auto;
}

/* One action: icon over a small label — link or button, identical look. */
.wpbase-header__action {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.32rem;
	padding: 0.45rem 0.7rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	color: var(--wpbase-header-fg);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.01em;
	border-radius: var(--wpbase-header-radius);
	transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.wpbase-header__action:hover,
.wpbase-header__action:focus-visible {
	color: var(--wpbase-header-accent);
	background: var(--wpbase-header-hover);
	transform: translateY(-1px);
}
.wpbase-header__action:active {
	transform: translateY(0);
}
.wpbase-header__action-icon {
	display: inline-flex;
}
.wpbase-header__action-icon .wpbase-icon {
	display: block;
	transition: transform .18s ease;
}
.wpbase-header__action:hover .wpbase-icon {
	transform: scale(1.08);
}
.wpbase-header__action-label {
	white-space: nowrap;
}

/* ── Shared focus ring (a11y) ────────────────────────────────────────── */
.wpbase-header__action:focus-visible,
.wpbase-header__nav .wp-block-navigation-item__content:focus-visible,
.wpbase-header__logo:focus-visible {
	outline: 2px solid var(--wpbase-header-accent);
	outline-offset: 3px;
	border-radius: var(--wpbase-header-radius);
}

/* ── Responsive: phone — icons only, tighter cluster ─────────────────── */
@media (max-width: 600px) {
	.wpbase-header__bar {
		min-height: 60px;
	}
	.wpbase-header__action-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.wpbase-header__actions {
		gap: 0.5rem;
	}
}

/* ── Respect reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.wpbase-header__logo img,
	.wpbase-header__action,
	.wpbase-header__action .wpbase-icon,
	.wpbase-header__nav .wp-block-navigation-item__content,
	.wpbase-header__nav .wp-block-navigation-item__content::after {
		transition: none;
	}
	.wpbase-header__logo:hover img,
	.wpbase-header__action:hover,
	.wpbase-header__action:hover .wpbase-icon {
		transform: none;
	}
}