/* DOB Starter Theme | css/04-header.css | v0.1.5 | 2026-04-30 | Generated by Claude, DOB-S8 (mobile menu) */
/* Site header, brand lockup, primary navigation, depth-3 dropdown, CTA item.
   Plus the DOB-S8 mobile menu: hamburger button (visible <=900px), slide-in
   panel with accordion sub-menus, backdrop. Pattern modeled on RC's
   parts/nav.php mechanism, simplified for DOB's wp_nav_menu output. */

.site-header {
	border-bottom: 1px solid color-mix(in srgb, var(--c-stone) 14%, transparent);
	background: var(--c-cream);
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 4.5rem;
	gap: var(--s-4);
}

.brand {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1.4375rem;
	text-decoration: none;
	color: var(--c-ink);
	letter-spacing: -0.02em;
	display: inline-flex;
	align-items: center;
	min-height: var(--tt-min);
}

.brand .brand-mark {
	color: var(--c-brick);
	font-style: italic;
	margin-left: 0.25em;
}

.primary-nav__list {
	display: flex;
	gap: var(--s-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav__list a {
	text-decoration: none;
	color: var(--c-ink);
	font-size: var(--fs-ui);
	font-weight: 500;
	padding: var(--s-2) 0;
	display: inline-flex;
	align-items: center;
	min-height: var(--tt-min);
	letter-spacing: -0.005em;
}

.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current-menu-ancestor > a {
	color: var(--c-brick);
}

@media (max-width: 900px) {
	.primary-nav { display: none; }
}

/* === Dropdown menu, depth 3 (desktop only) === */
.primary-nav__list li {
	position: relative;
}

.primary-nav__list .sub-menu {
	display: none;
	position: absolute;
	background: var(--c-cream);
	border: 1px solid color-mix(in srgb, var(--c-stone) 14%, transparent);
	box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--c-ink) 18%, transparent);
	min-width: 16rem;
	margin: 0;
	padding: var(--s-2) 0;
	list-style: none;
	z-index: 60;
	border-radius: 4px;
}

.primary-nav__list > li > .sub-menu {
	top: 100%;
	left: 0;
}

.primary-nav__list .sub-menu .sub-menu {
	top: 0;
	right: 100%;
	left: auto;
	margin-right: var(--s-1);
	z-index: 70;
}

.primary-nav__list li:hover > .sub-menu,
.primary-nav__list li:focus-within > .sub-menu {
	display: block;
}

.primary-nav__list .sub-menu a {
	display: block;
	padding: var(--s-2) var(--s-4);
	min-height: var(--tt-min);
	font-size: var(--fs-ui);
	color: var(--c-ink);
}

.primary-nav__list .sub-menu a:hover,
.primary-nav__list .sub-menu a:focus {
	background: var(--c-cream-warm);
	color: var(--c-brick);
}

.primary-nav__list .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.6;
}

.primary-nav__list .sub-menu .menu-item-has-children > a::after {
	transform: translateY(0) rotate(135deg);
	margin-left: 0.5em;
}

/* === Nav CTA item (Get Sponsored) === */
.primary-nav__list > li.menu-item-cta > a {
	border: 1.5px solid var(--c-brick);
	color: var(--c-brick);
	padding: var(--s-2) var(--s-4);
	border-radius: 99px;
	min-height: 2.25rem;
	transition: background 0.15s, color 0.15s;
}

.primary-nav__list > li.menu-item-cta > a:hover,
.primary-nav__list > li.menu-item-cta > a:focus,
.primary-nav__list > li.menu-item-cta.current-menu-item > a,
.primary-nav__list > li.menu-item-cta.current-menu-ancestor > a {
	background: var(--c-brick);
	color: var(--c-cream);
}

.primary-nav__list > li.menu-item-cta > a::after {
	display: none;
}

/* ============================================================
 * MOBILE MENU (DOB-S8)
 * Hamburger button visible <=900px; slide-in panel from left;
 * accordion sub-menus toggled by chevron buttons injected in JS.
 * Backdrop covers the rest of the viewport, dismisses on click.
 * Pattern modeled on RC parts/nav.php; CSS is independent.
 * ============================================================ */

/* Hamburger: hidden on desktop, shown on mobile. */
.dob-hamburger {
	display: none;
	background: transparent;
	border: 0;
	padding: var(--s-2);
	width: var(--tt-min);
	height: var(--tt-min);
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
	-webkit-appearance: none;
	appearance: none;
}

.dob-hamburger:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

.dob-hamburger span {
	display: block;
	position: absolute;
	left: 50%;
	width: 1.25rem;
	height: 2px;
	background: var(--c-ink);
	border-radius: 2px;
	transform-origin: center;
	transition: transform 0.2s, top 0.2s, opacity 0.2s;
	margin-left: -0.625rem;
}

.dob-hamburger span:nth-child(1) { top: calc(50% - 0.4rem); }
.dob-hamburger span:nth-child(2) { top: 50%; }
.dob-hamburger span:nth-child(3) { top: calc(50% + 0.4rem); }

.dob-hamburger[aria-expanded="true"] span:nth-child(1) {
	top: 50%;
	transform: rotate(45deg);
}
.dob-hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.dob-hamburger[aria-expanded="true"] span:nth-child(3) {
	top: 50%;
	transform: rotate(-45deg);
}

@media (max-width: 900px) {
	.dob-hamburger { display: inline-flex; align-items: center; justify-content: center; }
}

/* Mobile panel: fixed left edge, slides in. */
.dob-mobile-panel {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(20rem, 85vw);
	background: var(--c-cream);
	border-right: 1px solid color-mix(in srgb, var(--c-stone) 14%, transparent);
	box-shadow: 4px 0 32px color-mix(in srgb, var(--c-ink) 14%, transparent);
	z-index: 1002;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
}

.dob-mobile-panel.dob-panel-open {
	transform: translateX(0);
}

.dob-mobile-panel[hidden] {
	display: block; /* keep displayed during the open/close animation; JS toggles visibility */
}

/* When fully closed (no aria-hidden=false), browsers honour the hidden attribute. */
.dob-mobile-panel[hidden]:not(.dob-panel-open) {
	display: none;
}

.dob-mp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-4) var(--s-5);
	border-bottom: 1px solid color-mix(in srgb, var(--c-stone) 12%, transparent);
	gap: var(--s-3);
}

/* In the panel, the brand sits in a tight header alongside the close
   button. The desktop .brand uses inline-flex which causes the text
   "Department of" to baseline-shift against the italic "Bioregion"
   span when the container is narrow. Override to plain inline with
   a snug line-height so the two words sit on one rhythmic baseline,
   and the brand-mark margin is replaced by a clean space character. */
.dob-mp-header .brand {
	display: inline;
	min-height: 0;
	line-height: 1.15;
	font-size: 1.25rem;
}

.dob-mp-header .brand .brand-mark {
	margin-left: 0;
}

.dob-mp-close {
	background: transparent;
	border: 0;
	cursor: pointer;
	width: var(--tt-min);
	height: var(--tt-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-ink);
	font-size: 1.25rem;
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
}

.dob-mp-close:hover,
.dob-mp-close:focus {
	color: var(--c-brick);
}

.dob-mp-close:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* Mobile nav list. */
.dob-mobile-nav {
	padding: var(--s-3) 0 var(--s-6);
}

.dob-mobile-nav__list,
.dob-mobile-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dob-mobile-nav__list > li {
	border-bottom: 1px solid color-mix(in srgb, var(--c-stone) 8%, transparent);
}

.dob-mobile-nav__list a {
	display: flex;
	align-items: center;
	min-height: var(--tt-min);
	padding: var(--s-3) var(--s-5);
	font-family: var(--f-body);
	font-size: var(--fs-ui);
	font-weight: 500;
	color: var(--c-ink);
	text-decoration: none;
	letter-spacing: -0.005em;
}

.dob-mobile-nav__list a:hover,
.dob-mobile-nav__list a:focus {
	background: var(--c-cream-warm);
	color: var(--c-brick);
}

.dob-mobile-nav__list .current-menu-item > a,
.dob-mobile-nav__list .current-menu-ancestor > a {
	color: var(--c-brick);
}

/* Top-level item with children: link + chevron toggle on the same row. */
.dob-mobile-nav__list li.menu-item-has-children {
	position: relative;
}

.dob-mobile-nav__list li.menu-item-has-children > a {
	padding-right: calc(var(--tt-min) + var(--s-3));
}

.dob-mm-toggle {
	position: absolute;
	top: 0;
	right: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	width: var(--tt-min);
	height: var(--tt-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-stone);
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
}

.dob-mm-toggle:hover,
.dob-mm-toggle:focus {
	color: var(--c-brick);
}

.dob-mm-toggle:focus-visible {
	outline: var(--focus-ring);
	outline-offset: -2px;
}

.dob-mm-chevron {
	display: inline-block;
	transition: transform 0.2s;
	font-size: 0.875rem;
}

.dob-mm-toggle[aria-expanded="true"] .dob-mm-chevron {
	transform: rotate(180deg);
}

/* Sub-menu accordion body: indent and quieter. */
.dob-mobile-nav .sub-menu {
	background: var(--c-cream-warm);
}

.dob-mobile-nav .sub-menu li {
	border-top: 1px solid color-mix(in srgb, var(--c-stone) 6%, transparent);
}

.dob-mobile-nav .sub-menu a {
	padding-left: var(--s-7);
	font-weight: 400;
	color: var(--c-stone);
}

/* Depth-3 sub-sub-menu indents further. */
.dob-mobile-nav .sub-menu .sub-menu a {
	padding-left: calc(var(--s-7) + var(--s-4));
	font-size: var(--fs-body);
}

/* CTA item in the mobile list looks like an outlined pill, like desktop. */
.dob-mobile-nav__list > li.menu-item-cta > a {
	margin: var(--s-3) var(--s-5);
	padding: var(--s-2) var(--s-4);
	border: 1.5px solid var(--c-brick);
	color: var(--c-brick);
	border-radius: 99px;
	justify-content: center;
}

.dob-mobile-nav__list > li.menu-item-cta > a:hover,
.dob-mobile-nav__list > li.menu-item-cta > a:focus {
	background: var(--c-brick);
	color: var(--c-cream);
}

.dob-mobile-nav__list > li.menu-item-cta {
	border-bottom: 0;
}

/* Backdrop. */
.dob-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: color-mix(in srgb, var(--c-ink) 32%, transparent);
	z-index: 1001;
	opacity: 0;
	transition: opacity 0.25s;
}

.dob-backdrop.dob-backdrop-visible {
	opacity: 1;
}

.dob-backdrop[hidden] {
	display: none;
}

/* Reduced motion: kill transitions. */
@media (prefers-reduced-motion: reduce) {
	.dob-mobile-panel,
	.dob-backdrop,
	.dob-hamburger span,
	.dob-mm-chevron {
		transition: none;
	}
}

/* When the WP admin bar is rendered, push the panel below it. */
body.admin-bar .dob-mobile-panel {
	top: 32px;
	bottom: 0;
}

@media (max-width: 782px) {
	body.admin-bar .dob-mobile-panel {
		top: 46px;
	}
}