/* Global header: glass pill, desktop nav + dropdown, theme toggle, mobile menu.
   Spec: vault 12 BPOAI Clone Spec/global-layout.md §2, §5 and global-motion.md §2, §4. Agent G. */

.c-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding: 12px 16px 0;
	pointer-events: none; /* only the pill takes clicks; content scrolls under the gutters */
}
.c-header__pill {
	pointer-events: auto;
	max-width: var(--container);
	margin-inline: auto;
	border-radius: 16px;
	border: 1px solid var(--nav-border-color);
	background: var(--nav-bg-default);
	box-shadow: var(--nav-shadow-default);
	-webkit-backdrop-filter: blur(40px) saturate(180%);
	backdrop-filter: blur(40px) saturate(180%);
	transition: all .5s var(--ease);
}
.c-header__pill.is-scrolled {
	background: var(--nav-bg-scrolled);
	box-shadow: var(--nav-shadow-scrolled);
}
.c-header__in { padding: 0 16px; }
@media (min-width: 640px) { .c-header__in { padding: 0 24px; } }

.c-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
}
.c-header__logo {
	display: block;
	flex-shrink: 0;
	border-radius: 8px;
	transition: opacity .15s;
}
.c-logo-img, .c-header__logo .custom-logo { width: auto; max-width: none; height: 40px; }
/* POEA logo is 193px wide at 40px (bpoai 140); below ~345px it would collide with toggle + burger. */
@media (max-width: 359.98px) { .c-header__logo .c-logo-img, .c-header__logo .custom-logo { height: 32px; } }
@media (hover: hover) { .c-header__logo:hover { opacity: .8; } }

/* ---------- Desktop nav (>= 1280) ---------- */
.c-nav { display: none; }
@media (min-width: 1280px) {
	.c-nav { display: flex; flex: 1; min-width: 0; align-items: center; }
}
.c-nav__links {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-evenly;
	min-width: 0;
}
@media (min-width: 1536px) { .c-nav__links { padding-inline: 8px; } }

.nav-link {
	display: inline-block;
	color: var(--text-secondary);
	white-space: nowrap;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.25rem;
	transition: color .2s, background-color .2s;
}
.nav-link.active { color: var(--primary-light); background-color: var(--primary-50); }
@media (min-width: 1280px) { .nav-link { padding: 8px 6px; font-size: .8125rem; } }
@media (min-width: 1280px) and (max-width: 1535.98px) { .nav-link { padding: 8px 4px; } }
@media (hover: hover) {
	.nav-link:hover { color: var(--text-primary); background-color: var(--gray-100); }
	.nav-link.active:hover { color: var(--primary-light); background-color: var(--primary-50); }
}

/* Dropdown: CSS-only on hover / focus-within (GL §2.4). */
.c-nav__group { position: relative; }
.c-nav__trigger { display: inline-flex; align-items: center; gap: 4px; }
.c-nav__chev {
	width: 14px; height: 14px;
	fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
	transition: transform .2s var(--ease);
}
.c-nav__pop {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	padding-top: 8px; /* hover bridge */
	visibility: hidden;
	opacity: 0;
	transition: all .15s var(--ease);
	z-index: 10;
}
.c-nav__panel {
	min-width: 190px;
	padding: 6px;
	border-radius: 24px;
	background: var(--background-secondary);
	border: 1px solid var(--border-subtle);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}
.c-nav__item {
	display: block;
	padding: 8px 12px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--text-secondary);
	white-space: nowrap;
	transition: color .15s var(--ease), background-color .15s var(--ease);
}
.c-nav__group:focus-within .c-nav__pop { visibility: visible; opacity: 1; }
.c-nav__group:focus-within .c-nav__chev { transform: rotate(180deg); }
.c-nav__group:focus-within .c-nav__trigger:not(.active) { color: var(--text-primary); background-color: var(--gray-100); }
@media (hover: hover) {
	.c-nav__group:hover .c-nav__pop { visibility: visible; opacity: 1; }
	.c-nav__group:hover .c-nav__chev { transform: rotate(180deg); }
	.c-nav__group:hover .c-nav__trigger:not(.active) { color: var(--text-primary); background-color: var(--gray-100); }
	.c-nav__item:hover { background: var(--input-bg); }
}
/* Esc closes even while the pointer is still over the group (global.js sets it). */
.c-nav__group.is-dismissed .c-nav__pop { visibility: hidden; opacity: 0; }
.c-nav__group.is-dismissed .c-nav__chev { transform: none; }

/* Right cluster */
.c-nav__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 6px;
	margin-left: 4px;
	padding-left: 8px;
	border-left: 1px solid var(--border-light);
}
@media (min-width: 1536px) { .c-nav__actions { gap: 8px; margin-left: 8px; padding-left: 12px; } }
.c-nav__signin { display: flex; justify-content: center; width: 72px; }
@media (min-width: 1536px) { .c-nav__signin { width: 88px; } }
.c-nav__cta { padding: 8px 20px; border-radius: 12px; box-shadow: 0 0 15px var(--primary-glow); }
@media (hover: hover) {
	/* bpoai's inline 15px glow wins over the hover glow (GM §2.1). */
	.c-nav__cta.btn-primary:hover { box-shadow: 0 0 15px var(--primary-glow); }
}

/* ---------- Theme toggle (GL §5) ---------- */
.c-theme {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 16px;
	color: var(--text-secondary);
	background: transparent;
	transition: all .15s var(--ease);
}
@media (hover: hover) { .c-theme:hover { background: var(--gray-100); } }
.c-theme__icon {
	position: absolute;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: all .3s var(--ease);
}
.c-theme__moon { opacity: 1; rotate: 0deg; scale: 1; }
.c-theme__sun { opacity: 0; rotate: 90deg; scale: 0; }
[data-theme="dark"] .c-theme__moon { opacity: 0; rotate: -90deg; scale: 0; }
[data-theme="dark"] .c-theme__sun { opacity: 1; rotate: 0deg; scale: 1; }

/* ---------- Mobile (< 1280) ---------- */
.c-header__mobile { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1280px) { .c-header__mobile { display: none; } }
.c-burger {
	min-width: 44px; min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border-radius: 16px;
	color: var(--text-secondary);
	transition: color .15s var(--ease), background-color .15s var(--ease);
}
.c-burger__icon {
	width: 20px; height: 20px;
	fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.c-mnav {
	padding-bottom: 16px;
	animation: fadeIn .4s ease-out forwards;
	/* POEA: 12 rows (bpoai 8); the pill is fixed, so let the menu scroll on short screens. */
	max-height: calc(100vh - 82px);
	max-height: calc(100dvh - 82px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
@media (min-width: 1280px) { .c-mnav { display: none !important; } }
.c-mnav__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 8px;
	border-top: 1px solid var(--border-subtle);
}
.c-mnav__link {
	display: block;
	padding: 10px 12px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--text-secondary);
	transition: all .15s var(--ease);
}
.c-mnav__link.active { color: var(--primary-light); background: var(--primary-50); }
.c-mnav__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border-subtle);
}
.c-mnav__ghost { width: 100%; padding: 10px 20px; border-radius: 24px; }
.c-mnav__cta { width: 100%; padding: 10px 20px; border-radius: 12px; }

/* Without JS (< 1280 only): the header leaves fixed positioning and the menu is shown expanded in the
   document flow, so the nav stays reachable without covering the page. >= 1280 uses the CSS-only
   desktop nav, and .c-mnav stays hidden there. The theme toggles need JS, so they are hidden. */
html:not(.js) .c-theme,
html:not(.js) .c-burger { display: none; }
@media (max-width: 1279.98px) {
	html:not(.js) .c-header { position: relative; }
	html:not(.js) .c-mnav[hidden] { display: block !important; animation: none; max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
	.c-mnav { animation: none; }
	.c-header__pill, .c-theme__icon, .c-nav__pop, .c-nav__chev { transition: none; }
}

/* QA R4 r5: an open mobile menu sits on a solid surface (the glass pill let page content bleed through: 3.16:1 light, 1.09:1 dark). */
.c-header__pill:has(.c-mnav:not([hidden])) { background: var(--background-secondary); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Logged-in staff: the WP admin bar (32px, 46px <= 782px) sits above the fixed header. */
body.admin-bar .c-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .c-header { top: 46px; } }

/* Round 21: legacy --color-surface stays white in dark, so a translucent pill sat on a white page header (nav 1.09:1). Make the pill opaque enough and theme that header. */
[data-theme="dark"] .c-header__pill { background: rgb(10 7 26 / .92); }
[data-theme="dark"] :is(.c-page-header, .c-detail-hero) { background: var(--background-secondary); border-color: var(--border-subtle); }
[data-theme="dark"] :is(.c-page-header, .c-detail-hero) :is(h1, .c-page-header__title) { color: var(--text-primary); }
[data-theme="dark"] :is(.c-page-header, .c-detail-hero) :is(.c-breadcrumbs, .c-breadcrumbs a, nav, nav a, [aria-current]) { color: var(--text-secondary); }
[data-theme="dark"] .c-page-header :is(span, li, ol) { color: var(--text-secondary); }