/* ==========================================================================
   Header — Site header, navigation, and search overlay
   --------------------------------------------------------------------------
   Fixed header with teal-to-white scroll transition.  Navigation collapses
   to a hamburger menu on mobile (see responsive.css for breakpoint overrides).
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Fixed Header Bar
   ---------------------------------------------------------------- */

body {
	padding-top: var(--header-height);
}

/* Admin bar offset — WP admin bar is 32px on desktop, 46px on mobile. */
body.admin-bar .site-header {
	top: 32px;
}

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

/* Below 600px the WP admin bar may scroll away.
   A pseudo-element covers the gap above the header so no content shows through. */
@media screen and (max-width: 600px) {
	body.admin-bar .site-header::before {
		content: '';
		position: absolute;
		top: -46px;
		left: 0;
		right: 0;
		height: 46px;
		background: inherit;
	}
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	background-color: var(--color-teal);
	z-index: 1000;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Color stripe across the top (Customizer → Header → Show Color Stripe).
   The padding keeps the logo and nav centered below the stripe. */
.site-header.has-color-stripe {
	padding-top: var(--header-stripe-height, 10px);
}

/* One run of the six colors is a tile 57% of the width (each block ~9.5%),
   centered so the bar starts and ends with a partial block. */
.site-header.has-color-stripe::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-stripe-height, 10px);
	background-image: var(--header-stripe);
	background-size: 57% 100%;
	background-repeat: repeat-x;
	background-position: center top;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   2. Header Container — flex layout
   ---------------------------------------------------------------- */

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	/* Logo and nav line up with the homepage category photos. */
	max-width: calc(var(--hero-grid-width) + 2 * var(--space-md));
}

/* ------------------------------------------------------------------
   3. Site Branding (logo / site title)
   ---------------------------------------------------------------- */

.site-branding {
	flex-shrink: 0;
	min-width: 0;
}

.site-branding a {
	display: flex;
	align-items: center;
}

.site-branding img {
	max-height: 70px;
	max-width: var(--logo-max-width, 320px);
	width: auto;
	filter: brightness(0) invert(1);
	transition: filter 0.3s ease;
}

.site-branding .site-title-link {
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: 1.5rem;
	color: var(--color-black);
	text-decoration: none;
}

.site-branding .site-title-link:hover {
	color: var(--color-teal);
}

/* ------------------------------------------------------------------
   4. Main Navigation
   ---------------------------------------------------------------- */

.menu-container {
	display: block;
}

.main-navigation {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	overflow: visible;
}

.main-navigation .menu {
	display: flex;
	list-style: none;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
}

.main-navigation .menu a {
	font-family: var(--font-nav, var(--font-primary));
	font-weight: var(--fw-medium);
	font-size: var(--nav-font-size, 0.95rem);
	text-transform: var(--nav-text-transform, uppercase);
	letter-spacing: 0.05em;
	color: var(--color-white);
	text-decoration: none;
	transition: color var(--transition-fast);
	padding: var(--space-xs) 0;
}

/* Teal-state hover: subtle white when header is teal */
.site-header:not(.header-scrolled) .main-navigation .menu a:hover,
.site-header:not(.header-scrolled) .main-navigation .menu a:focus-visible {
	color: var(--nav-hover, rgba(255, 255, 255, 0.7));
}

/* Scrolled-state hover: teal when header is white */
.site-header.header-scrolled .main-navigation .menu a:hover,
.site-header.header-scrolled .main-navigation .menu a:focus-visible {
	color: var(--nav-hover, var(--color-teal));
}

/* Active / current page highlight */
.site-header:not(.header-scrolled) .main-navigation .menu .current-menu-item > a,
.site-header:not(.header-scrolled) .main-navigation .menu .current_page_item > a {
	color: var(--nav-hover, rgba(255, 255, 255, 0.7));
}

.site-header.header-scrolled .main-navigation .menu .current-menu-item > a,
.site-header.header-scrolled .main-navigation .menu .current_page_item > a {
	color: var(--color-teal);
}

/* ------------------------------------------------------------------
   5. Hamburger Toggle (hidden on desktop, shown on mobile)
   ---------------------------------------------------------------- */

.menu-toggle {
	display: none; /* Shown via responsive.css */
	background: none;
	border: none;
	cursor: pointer;
	padding: 14px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

.menu-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background-color: var(--color-white);
	margin: 3px 0;
	transition: all 0.3s ease;
	border-radius: 1px;
	transform-origin: center center;
}

/* Animated X state when menu is open */
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* Text-based × replaces rotated spans to avoid overflow clipping */
.menu-toggle[aria-expanded="true"] span {
	display: none;
}

@keyframes menu-close-spin {
	from {
		opacity: 0;
		transform: rotate(-90deg) scale(0.5);
	}
	to {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}
}

.menu-toggle[aria-expanded="true"]::after {
	content: '\00d7';
	font-size: 2rem;
	font-weight: var(--fw-bold, 700);
	line-height: 1;
	color: var(--color-white);
	animation: menu-close-spin 0.3s ease forwards;
}

.site-header.header-scrolled .menu-toggle[aria-expanded="true"]::after {
	color: var(--header-link-color, var(--color-black));
}

/* ------------------------------------------------------------------
   6. Search Toggle Button (in header nav)
   ---------------------------------------------------------------- */

.search-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.search-toggle svg {
	width: 20px;
	height: 20px;
	stroke: var(--color-white);
	fill: none;
	stroke-width: 2;
	transition: stroke var(--transition-fast);
}

/* ------------------------------------------------------------------
   6b. Subscribe Button (in header nav)
   ---------------------------------------------------------------- */

.subscribe-btn {
	font-family: var(--font-nav, var(--font-primary));
	font-weight: var(--fw-medium);
	font-size: 0.95rem;
	text-transform: var(--nav-text-transform, uppercase);
	letter-spacing: 0.05em;
	color: var(--color-white);
	text-decoration: none;
	transition: color var(--transition-fast);
	padding: var(--space-xs) 0;
	white-space: nowrap;
}

/* Teal-state: subscribe & search hover */
.site-header:not(.header-scrolled) .subscribe-btn:hover,
.site-header:not(.header-scrolled) .subscribe-btn:focus-visible {
	color: var(--nav-hover, rgba(255, 255, 255, 0.7));
}

.site-header:not(.header-scrolled) .search-toggle:hover svg,
.site-header:not(.header-scrolled) .search-toggle:focus-visible svg {
	stroke: var(--nav-hover, rgba(255, 255, 255, 0.7));
}

/* Scrolled-state: subscribe & search hover */
.site-header.header-scrolled .subscribe-btn:hover,
.site-header.header-scrolled .subscribe-btn:focus-visible {
	color: var(--nav-hover, var(--color-teal));
}

.site-header.header-scrolled .search-toggle:hover svg,
.site-header.header-scrolled .search-toggle:focus-visible svg {
	stroke: var(--nav-hover, var(--color-teal));
}

/* ------------------------------------------------------------------
   6c. Scrolled Header — white background with dark text
   ---------------------------------------------------------------- */

.site-header.header-scrolled {
    background-color: var(--header-bg, var(--color-body-bg));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* A solid header sits flush on the banner below it, with no shadow. */
.site-header.header-solid {
    box-shadow: none;
}

.site-header.header-scrolled .main-navigation .menu a {
    color: var(--header-link-color, var(--color-black));
}

.site-header.header-scrolled .subscribe-btn {
    color: var(--header-link-color, var(--color-black));
}

.site-header.header-scrolled .search-toggle svg {
    stroke: var(--header-link-color, var(--color-black));
}

.site-header.header-scrolled .menu-toggle span {
    background-color: var(--header-link-color, var(--color-black));
}

.site-header.header-scrolled .site-branding img {
    filter: none;
}

/* ------------------------------------------------------------------
   7. Search Overlay
   ---------------------------------------------------------------- */

.search-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.98);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), visibility var(--transition-base);
}

.search-overlay.active {
	opacity: 1;
	visibility: visible;
}

.search-overlay .close-search {
	position: absolute;
	top: var(--space-lg);
	right: var(--space-lg);
	background: none;
	border: none;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-black);
	padding: var(--space-xs);
	transition: color var(--transition-fast);
}

.search-overlay .close-search:hover,
.search-overlay .close-search:focus-visible {
	color: var(--color-teal);
}

.search-overlay .search-form {
	width: 100%;
	max-width: 600px;
	padding: 0 var(--space-md);
}

.search-overlay .search-input-wrapper {
	position: relative;
	display: flex;
}

.search-overlay .search-form input[type="search"] {
	width: 100%;
	font-size: 1.5rem;
	padding: var(--space-sm) var(--space-md);
	border: 2px solid var(--color-teal);
	border-radius: 0;
	font-family: var(--font-primary);
	outline: none;
	background-color: var(--color-white);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--transition-fast);
}

.search-overlay .search-form input[type="search"]:focus {
	border-color: var(--color-pink);
}

.search-overlay .search-form .search-form__submit {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	padding: 0 var(--space-md);
	background: var(--color-teal);
	border: 2px solid var(--color-teal);
	color: var(--color-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--transition-fast);
}

.search-overlay .search-form .search-form__submit:hover,
.search-overlay .search-form .search-form__submit:focus-visible {
	background-color: var(--color-pink);
	border-color: var(--color-pink);
}

.search-overlay .search-form .search-form__submit svg {
	stroke: var(--color-white);
}

/* ------------------------------------------------------------------
   8. Skip Link (visible on focus)
   ---------------------------------------------------------------- */

.skip-link:focus {
	position: fixed;
	top: var(--space-xs);
	left: var(--space-xs);
	z-index: 100000;
	background-color: var(--color-teal);
	color: var(--color-white);
	padding: var(--space-xs) var(--space-sm);
	font-size: 0.9rem;
}