/* ========================================
   Header — transparent overlay + animated wheel logo
   ========================================
   Ported verbatim from waterwheel-old/assets/css/home2.css §2 (lines 96–229)
   with `body.home2` scoping removed (v3 home is the only page that exists).
   Class names preserved 1:1 so JS hooks attach unchanged.
*/

/* The first template-part on the page (header) sits as a transparent overlay */
.wp-site-blocks > .wp-block-template-part:first-child {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
	top: 32px;
}

/* ---------- Site header ---------- */
.site-header,
.site-header--home2 {
	background: transparent !important;
	color: #ffffff;
	padding: clamp(1rem, 2.5vw, 1.75rem) clamp(0.75rem, 4vw, 3rem);
}

/* Tighten nav-wrap gap on narrow viewports so the three icons (hamburger,
   search, login) don't push past the right edge. Desktop keeps 1.5rem. */
@media (max-width: 600px) {
	.site-header__nav-wrap {
		gap: 0.5rem !important;
	}
}

.site-header__brand {
	opacity: 1;
	transform: translateX(0);
	transition: opacity 0.4s cubic-bezier(.2,.8,.2,1), transform 0.4s cubic-bezier(.2,.8,.2,1);
}

/* Body class home2-on-hero (added by JS when hero dominant) hides brand */
.home2-on-hero .site-header__brand {
	opacity: 0;
	transform: translateX(-8px);
	pointer-events: none;
}

/* Default (over dark hero) ink — top-level header chrome only.
   Dropdown column links opt out so they use the plugin's dropdown
   colour token (#1A1613 on cream). */
.site-header__brand a,
.site-header .wp-block-site-title a,
.site-header .wwh-mega-nav__link {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.35s cubic-bezier(.2,.8,.2,1);
}

.site-header__wheel {
	color: rgba(197, 139, 92, 0.95);
	transition: color 0.35s cubic-bezier(.2,.8,.2,1);
	display: inline-flex;
}

.site-header .site-header__wheel svg {
	transition: transform 18s linear;
}

.site-header__wheel-link:hover .site-header__wheel svg,
.site-header__wheel-link:focus-visible .site-header__wheel svg {
	transform: rotate(360deg);
}

.site-header__wheel-link:hover .site-header__wheel,
.site-header__wheel-link:focus-visible .site-header__wheel {
	color: rgba(218, 165, 115, 1);
}

/* ---------- Light-section inversion (toggled via JS body class) ----------
   Only inverts the top-level header chrome (brand + site title + nav buttons).
   Dropdown column links keep their own cream-bg dark colour from the plugin. */
body.home2-nav-on-light .site-header__brand a,
body.home2-nav-on-light .site-header .wp-block-site-title a,
body.home2-nav-on-light .site-header .wwh-mega-nav__link {
	color: #1a1613 !important;
}

.home2-nav-on-light .site-header__wheel {
	color: rgba(140, 90, 45, 0.95);
}

@media (prefers-reduced-motion: reduce) {
	.site-header__brand,
	.site-header a,
	.site-header .wp-block-site-title a,
	.site-header__wheel,
	.site-header .site-header__wheel svg {
		transition: none;
	}
}