/*!
 * Component: Header / Site nav — brand-aware (Topic 23 REDESIGN-WP2)
 *
 * Styles for the classic-theme three-zone header rendered by
 * inc/components/header.php — brand mark · primary navigation · accent CTA.
 *
 * Brand chrome:
 *   Three variants — Studio, K-World, Kaeros — scoped via
 *   `body.is-brand-{studio,kworld,kaeros}`. The body class is added by the
 *   `body_class` filter in functions.php; the resolver in `inc/brand.php`
 *   decides which class is emitted per request. Base styles below define
 *   layout + motion; the bottom of the file overrides palette per variant.
 *
 * Mobile drawer: under 768px the right-side nav + CTA collapse into a
 * hamburger that toggles `.toggled` on the parent `.main-navigation` via
 * site-header.js. The unordered list animates in from the right edge.
 *
 * No-cover-up-fixes rule: per-brand overrides are written as direct scoped
 * selectors below — NOT as wrapper overrides or `_header-overrides.css`.
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 17 RENDER-WP1 (rewritten Topic 23 REDESIGN-WP2 for brand chrome)
 */

/* --- Sticky shell ---------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	color: var(--mw-color-text-light, #FAF8FF);
	transition: background-color 220ms ease-out,
		-webkit-backdrop-filter 220ms ease-out,
		backdrop-filter 220ms ease-out,
		padding 220ms ease-out;
}

.site-header.is-scrolled {
	background: color-mix(in srgb, var(--mw-color-bg-dark, #0E0841) 88%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* Topic 33 FIX-WP17 — explicit ring-surface declaration. The shared
 * `:where(a:focus-visible)` rule (style.css:466) keys off --mw-btn-focus-ring,
 * which .site-header never declared — it fell through to the var() fallback
 * chain invisibly. FIX-WP16 hit the identical trap on the site-wide default;
 * this is the same defect class here. Declaring it explicitly, even at a
 * value IDENTICAL to today's fallback (--mw-color-primary-glow #A8A7FF, see
 * style.css:467 / _button.css:112), costs zero pixels but makes the surface
 * greppable and auditable instead of invisible — the next brand author is
 * forced to re-measure rather than inherit silently. See the K-World override
 * below for the surface that actually needed the ink to change. */
.site-header {
	--mw-btn-focus-ring: var(--mw-color-primary-glow, #A8A7FF);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	max-width: var(--mw-wide-size, 1280px);
	margin-inline: auto;
	padding: clamp(0.875rem, 2vw, 1.25rem) clamp(1rem, 3vw, 2rem);
}

.site-header.is-scrolled .site-header__inner {
	padding-block: 0.5rem;
}

/* --- Brand mark ------------------------------------------------------ */
.site-branding {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.site-branding .site-logo,
.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-branding .site-logo img,
.site-branding .custom-logo {
	display: block;
	height: clamp(2.25rem, 4vw, 3rem);
	width: auto;
	max-width: 220px;
	transition: height 220ms ease-out;
}

.site-header.is-scrolled .site-branding .site-logo img,
.site-header.is-scrolled .site-branding .custom-logo {
	height: 2rem;
}

.site-branding .site-title {
	margin: 0;
	font-family: var(--mw-font-display, "Ice Cream Man", system-ui, sans-serif);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: inherit;
}

.site-branding .site-title a {
	color: inherit;
	text-decoration: none;
}

/* --- Primary navigation ---------------------------------------------- */
.main-navigation {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

.main-navigation .primary-menu,
.main-navigation #primary-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(0.5rem, 1.2vw, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--mw-font-display, "Ice Cream Man", system-ui, sans-serif);
}

.main-navigation .primary-menu li,
.main-navigation #primary-menu li {
	margin: 0;
	list-style: none;
}

.main-navigation .primary-menu a,
.main-navigation #primary-menu a {
	display: inline-block;
	padding: 0.4rem 0.25rem;
	color: inherit;
	font-size: clamp(0.875rem, 0.95vw, 1rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	transition: color 0.15s ease, transform 0.15s ease;
}

.main-navigation .primary-menu a:hover,
.main-navigation .primary-menu a:focus-visible,
.main-navigation #primary-menu a:hover,
.main-navigation #primary-menu a:focus-visible {
	color: var(--mw-color-primary-glow, #A8A7FF);
}

/* Active-page indicator — downward-pointing triangle from above the link
 * (the "menu pointer" from the Figma redesign). Uses CSS borders for a
 * sharp apex; positioned with `top` so the triangle hangs from the
 * header's underside, pointing at the active nav item. The triangle
 * colour follows the brand variant's accent (see brand blocks at bottom). */
.main-navigation .primary-menu .current-menu-item > a::before,
.main-navigation .primary-menu .current_page_item > a::before,
.main-navigation #primary-menu .current-menu-item > a::before,
.main-navigation #primary-menu .current_page_item > a::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -10px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 9px solid var(--mw-color-primary, #6765E8);
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mw-color-primary, #6765E8) 55%, transparent));
	pointer-events: none;
}

/* --- Dropdown submenus (desktop floating, mobile inline-expand) ------
 *
 * Parent items with children get a `▾` chevron via ::after and a floating
 * submenu anchored beneath them. Triggered by hover, :focus-within, or
 * the `data-submenu-open="true"` attribute that site-header.js toggles
 * on click. The parent <a> stays a regular link so SEO + tap-to-navigate
 * semantics are preserved; first tap on mobile opens the dropdown via JS
 * preventDefault, and the first child item inside each dropdown duplicates
 * the parent destination so mobile users can still reach the hub page.
 *
 * `.menu-item-has-children` is added by WordPress automatically to <li>s
 * that have a nested <ul.sub-menu>. We anchor everything off that class
 * rather than inventing our own. */

.main-navigation .primary-menu .menu-item-has-children,
.main-navigation #primary-menu .menu-item-has-children {
	position: relative;
}

/* Chevron indicator on parent items. Pure CSS triangle so it inherits
 * `currentColor` and flips with a transform when the dropdown is open. */
.main-navigation .primary-menu .menu-item-has-children > a::after,
.main-navigation #primary-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-inline-start: 0.45em;
	vertical-align: 0.15em;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 180ms ease-out;
}

.main-navigation .primary-menu .menu-item-has-children:hover > a::after,
.main-navigation .primary-menu .menu-item-has-children:focus-within > a::after,
.main-navigation .primary-menu .menu-item-has-children[data-submenu-open="true"] > a::after,
.main-navigation #primary-menu .menu-item-has-children:hover > a::after,
.main-navigation #primary-menu .menu-item-has-children:focus-within > a::after,
.main-navigation #primary-menu .menu-item-has-children[data-submenu-open="true"] > a::after {
	transform: rotate(180deg);
}

/* The dropdown panel itself. Frosted dark card matching the .is-scrolled
 * header backdrop so it reads as part of the same surface. */
.main-navigation ul ul,
.main-navigation .primary-menu .sub-menu,
.main-navigation #primary-menu .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 15rem;
	padding: 0.5rem;
	margin: 0;
	list-style: none;
	background: color-mix(in srgb, var(--mw-color-bg-dark, #0E0841) 96%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--mw-radius-soft, 8px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out,
		visibility 180ms;
	z-index: 110;
}

/* Hover bridge — a 6px invisible band above the panel so the cursor
 * traveling from the parent <a> to the submenu doesn't trigger close. */
.main-navigation .primary-menu .menu-item-has-children > .sub-menu::before,
.main-navigation #primary-menu .menu-item-has-children > .sub-menu::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

/* Show on hover, focus-within (keyboard), or click-toggled state. */
.main-navigation .primary-menu .menu-item-has-children:hover > .sub-menu,
.main-navigation .primary-menu .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .primary-menu .menu-item-has-children[data-submenu-open="true"] > .sub-menu,
.main-navigation #primary-menu .menu-item-has-children:hover > .sub-menu,
.main-navigation #primary-menu .menu-item-has-children:focus-within > .sub-menu,
.main-navigation #primary-menu .menu-item-has-children[data-submenu-open="true"] > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* Submenu items. Reset the uppercase letter-spacing inherited from the
 * top-level nav — dropdown labels read better in mixed-case. */
.main-navigation .sub-menu li {
	margin: 0;
	list-style: none;
}

/* #primary-menu-scoped so these BEAT the top-level `#primary-menu a`
 * (specificity 1,1,1) that otherwise forces submenu items to inline-block +
 * cramped padding — the reason the hover highlight could not spread. block +
 * the panel's .5rem padding + 6px radius give Claude Design's inset rounded
 * highlight that fills the full item width (DS .mw-nav__submenu a). */
.main-navigation #primary-menu .sub-menu a,
.main-navigation .primary-menu .sub-menu a {
	display: block;
	box-sizing: border-box;
	/* Dropdown labels read in the body face (Poppins), not the bouncy display
	 * font — matches the Claude Design .mw-nav__submenu a (font: --mw-font-body). */
	font-family: var(--mw-font-body, "Poppins", system-ui, sans-serif);
	padding: 0.6rem 0.85rem;
	border-radius: 6px;
	color: color-mix(in srgb, var(--mw-color-text-light, #FAF8FF) 88%, transparent);
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	transition: background 120ms ease, color 120ms ease;
}

.main-navigation #primary-menu .sub-menu a:hover,
.main-navigation #primary-menu .sub-menu a:focus-visible,
.main-navigation .primary-menu .sub-menu a:hover,
.main-navigation .primary-menu .sub-menu a:focus-visible {
	background: color-mix(in srgb, var(--mw-color-primary, #6765E8) 22%, transparent);
	color: #ffffff;
}

/* Active-page indicator in submenus — a filled violet pill (matches the
 * rounded hover shape) instead of a left bar that would clash with the radius. */
.main-navigation #primary-menu .sub-menu .current-menu-item > a,
.main-navigation #primary-menu .sub-menu .current_page_item > a,
.main-navigation .primary-menu .sub-menu .current-menu-item > a,
.main-navigation .primary-menu .sub-menu .current_page_item > a {
	color: #ffffff;
	background: color-mix(in srgb, var(--mw-color-primary, #6765E8) 30%, transparent);
}

/* --- Accent CTA (right of nav) --------------------------------------- */
.site-header__cta-wrap {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.site-header__cta {
	flex: 0 0 auto;
	white-space: nowrap;
	/* Override the .mw-btn--primary paint-blob clip-path — the header Shop
	 * pill follows the Figma "leaf" border-radius pattern (node 265:1007:
	 * rounded-tl 10px / tr 4px / br 10px / bl 4px) instead of the
	 * hand-drawn polygon used for in-page Primary CTAs. */
	clip-path: none;
	border-radius: 10px 4px 10px 4px;
	filter: none;
}

/* Disabled state — when the shop isn't live yet the CTA renders as a
 * <span data-disabled="true"> instead of <a>. Strongly desaturated +
 * dimmed so the affordance reads clearly as "not yet" at a glance —
 * the previous treatment (opacity 0.55, grayscale 0.35) still read as
 * an active violet pill at a distance. */
.site-header__cta[data-disabled="true"] {
	background: var(--mw-color-text-secondary, #b8b4da);
	color: rgba(11, 10, 46, 0.65);
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
	filter: grayscale(0.85);
	box-shadow: none;
}

/* --- Hamburger toggle (≤768px) --------------------------------------- */
.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0.5rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: inherit;
	margin-inline-start: auto;
}

.menu-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	margin-block: 4px 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle__bar:first-child { margin-block-start: 0; }

.main-navigation.toggled .menu-toggle__bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.main-navigation.toggled .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.main-navigation.toggled .menu-toggle__bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* --- Mobile breakpoint -----------------------------------------------
 *
 * Selectors below are intentionally prefixed with `.site-header` (specificity
 * 0,0,2,0) so they out-specify shared button base rules in _button.css —
 * notably `.mw-btn { display: inline-flex }` which loads later in the cascade
 * and would otherwise tie-break against bare `.site-header__cta` (0,0,1,0).
 * This is a direct specificity fix, NOT an `!important` override.
 */
@media (max-width: 767.98px) {
	.site-header .menu-toggle {
		display: block;
	}

	.site-header .main-navigation {
		flex: 0 0 auto;
		justify-content: flex-end;
		position: relative;
	}

	.site-header .main-navigation .primary-menu,
	.site-header .main-navigation #primary-menu {
		display: none;
		position: absolute;
		top: calc(100% + 0.5rem);
		right: 0;
		min-width: min(80vw, 18rem);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.75rem 0;
		background: color-mix(in srgb, var(--mw-color-bg-dark, #0E0841) 96%, transparent);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-radius: var(--mw-radius-soft, 8px);
		box-shadow: var(--mw-shadow-elevation-2, 0 8px 24px rgba(0, 0, 0, 0.16));
	}

	.site-header .main-navigation.toggled .primary-menu,
	.site-header .main-navigation.toggled #primary-menu {
		display: flex;
	}

	.site-header .main-navigation .primary-menu a,
	.site-header .main-navigation #primary-menu a {
		display: block;
		padding: 0.625rem 1rem;
	}

	/* Mobile submenus: stack inline beneath their parent, no floating
	 * card. Tap on parent (handled by JS) opens; second tap navigates.
	 *
	 * Selectors include `.menu-item-has-children` so the specificity
	 * matches the desktop show-state rule (0,1,4,0). Source order then
	 * lets the mobile media query win the tie. */
	.site-header .main-navigation #primary-menu .menu-item-has-children > .sub-menu,
	.site-header .main-navigation .primary-menu .menu-item-has-children > .sub-menu,
	.site-header .main-navigation ul ul {
		position: static;
		transform: none;
		left: auto;
		top: auto;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		display: none;
		min-width: 0;
		padding: 0;
		margin: 0;
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transition: none;
	}

	.site-header .main-navigation #primary-menu .menu-item-has-children > .sub-menu::before,
	.site-header .main-navigation .primary-menu .menu-item-has-children > .sub-menu::before {
		display: none;
	}

	/* Override the desktop hover/focus open rule on mobile — we don't
	 * want bare focus-within to expand the dropdown; only the explicit
	 * data-submenu-open attribute set by site-header.js does so. */
	.site-header .main-navigation #primary-menu .menu-item-has-children:hover > .sub-menu,
	.site-header .main-navigation #primary-menu .menu-item-has-children:focus-within > .sub-menu,
	.site-header .main-navigation .primary-menu .menu-item-has-children:hover > .sub-menu,
	.site-header .main-navigation .primary-menu .menu-item-has-children:focus-within > .sub-menu {
		display: none;
		transform: none;
	}

	.site-header .main-navigation #primary-menu .menu-item-has-children[data-submenu-open="true"] > .sub-menu,
	.site-header .main-navigation .primary-menu .menu-item-has-children[data-submenu-open="true"] > .sub-menu {
		display: block;
		transform: none;
	}

	.site-header .main-navigation #primary-menu .sub-menu a,
	.site-header .main-navigation .primary-menu .sub-menu a {
		padding: 0.55rem 1.5rem;
		font-size: 0.85rem;
		color: color-mix(in srgb, var(--mw-color-text-light, #FAF8FF) 78%, transparent);
		white-space: normal;
	}

	/* Shop pill: hidden on mobile regardless of drawer state. Showing it
	 * when the hamburger is open pushed the nav inward and forced the
	 * 288px-wide submenu drawer off-screen to the left. Since the pill
	 * is currently disabled (data-disabled="true") there is no value in
	 * re-revealing it from the drawer either — keep it desktop-only. */
	.site-header .site-header__cta-wrap,
	.site-header .site-header__cta {
		display: none;
	}
}

/* --- _s underscores legacy nav (kept for non-primary contexts) ------ */
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
}

/* ============================================================================
 * Brand variants — Studio · K-World · Kaeros (Topic 23 REDESIGN-WP2)
 *
 * Scoped via `body.is-brand-{studio,kworld,kaeros}` body classes emitted by
 * `mystwood_studios_ab_body_class_brand()` in functions.php. The resolver
 * lives in inc/brand.php. Per the no-cover-up rule, these are direct scoped
 * selectors — not overrides injected via a separate file or wrapper.
 *
 * Each variant overrides:
 *   - .site-header colour (sets the inherited base for link text)
 *   - .site-header.is-scrolled background (frosted backdrop tint)
 *   - Hover / focus link colour
 *   - Active-item triangle colour
 *   - Submenu surface tint + active-item indicator colour
 *
 * Mobile drawer surface (.toggled .primary-menu) inherits the same backdrop
 * via color-mix on --mw-color-bg-dark unless overridden per brand.
 * ============================================================================ */

/* --- Studio (lavender / violet — default chrome) --------------------- */
body.is-brand-studio .site-header {
	color: var(--mw-color-text-light, #FAF8FF);
}

body.is-brand-studio .site-header.is-scrolled {
	background: color-mix(in srgb, var(--mw-color-bg-dark, #0E0841) 88%, transparent);
}

body.is-brand-studio .main-navigation .primary-menu a:hover,
body.is-brand-studio .main-navigation .primary-menu a:focus-visible,
body.is-brand-studio .main-navigation #primary-menu a:hover,
body.is-brand-studio .main-navigation #primary-menu a:focus-visible {
	color: var(--mw-color-primary-glow, #A8A7FF);
}

body.is-brand-studio .main-navigation .primary-menu .current-menu-item > a::before,
body.is-brand-studio .main-navigation .primary-menu .current_page_item > a::before,
body.is-brand-studio .main-navigation #primary-menu .current-menu-item > a::before,
body.is-brand-studio .main-navigation #primary-menu .current_page_item > a::before {
	border-top-color: var(--mw-color-primary, #6765E8);
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mw-color-primary, #6765E8) 55%, transparent));
}

body.is-brand-studio .main-navigation .sub-menu .current-menu-item > a,
body.is-brand-studio .main-navigation .sub-menu .current_page_item > a {
	color: var(--mw-color-primary-glow, #A8A7FF);
	box-shadow: inset 3px 0 0 0 var(--mw-color-primary, #6765E8);
}

/* --- K-World (sky / castle-stone — daytime adventure chrome) --------
 *
 * K-World identity reads warmer and brighter than Studio. The scrolled
 * backdrop swaps to a castle-stone-tinted dark instead of the violet bg,
 * hover state pulls toward kw-sky, and the active-page triangle paints
 * kw-gold for the storybook-banner feel. */
body.is-brand-kworld .site-header {
	color: var(--mw-color-text-light, #FAF8FF);
}

/* Topic 33 FIX-WP17 — K-World's scrolled backdrop is castle-stone, not the
 * violet bg-dark every other brand uses, so the site-wide glow ring
 * (--mw-color-primary-glow #A8A7FF) measures 2.29:1 here — below the WCAG
 * 1.4.11 3:1 floor. Forced to light ink, not merely preferred: this same
 * scope also reaches the desktop dropdown panel (:227) and the mobile
 * drawer (:416) through `.main-navigation` being a header descendant, and
 * both panels are bg-dark at 96% opacity — dark ink would measure 1.08:1
 * there, a worse failure than the one being fixed, across all of mobile
 * nav. Light clears every backdrop in scope: 4.73:1 on pure castle-stone,
 * and a closed worst-case bound of 3.73:1 (88% castle-stone composited over
 * #FFFFFF — the lightest possible backdrop under this sticky header; blur
 * cannot lower it further, since a weighted average cannot exceed its max
 * input channel), and 17.65:1 on the dropdown/drawer. Scoped to
 * body.is-brand-kworld rather than unscoped so Studio's already-passing
 * 8.53:1 glow ring is left untouched (G15 — do not move what was not
 * asked). See contrast_audit.py's RING rows for the reproduced numbers. */
body.is-brand-kworld .site-header {
	--mw-btn-focus-ring: var(--mw-color-text-light, #FAF8FF);
}

body.is-brand-kworld .site-header.is-scrolled {
	background: color-mix(in srgb, var(--kw-castle-stone, #7A6E5C) 88%, transparent);
}

body.is-brand-kworld .main-navigation .primary-menu a:hover,
body.is-brand-kworld .main-navigation .primary-menu a:focus-visible,
body.is-brand-kworld .main-navigation #primary-menu a:hover,
body.is-brand-kworld .main-navigation #primary-menu a:focus-visible {
	color: var(--kw-sky, #3FA7D6);
}

body.is-brand-kworld .main-navigation .primary-menu .current-menu-item > a::before,
body.is-brand-kworld .main-navigation .primary-menu .current_page_item > a::before,
body.is-brand-kworld .main-navigation #primary-menu .current-menu-item > a::before,
body.is-brand-kworld .main-navigation #primary-menu .current_page_item > a::before {
	border-top-color: var(--kw-gold, #F4C430);
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--kw-gold, #F4C430) 55%, transparent));
}

/* K-World submenus + mobile drawer are intentionally NOT brand-tinted — Claude
 * Design keeps every dropdown/drawer one uniform dark panel (.mw-nav__submenu,
 * site.css) and tints only the top-level nav accents above (hover kw-sky, active
 * triangle kw-gold, scrolled backdrop castle-stone — all kept, all CD-matching).
 * The old castle-stone/gold submenu + mobile-drawer overrides were removed
 * (Topic 27 CD parity) so K-World dropdowns read dark like the rest of the site
 * and the nav stops carrying two conflicting submenu color systems. */

/* -----------------------------------------------------------------------
 * Kaeros header chrome — DORMANT — Topic 24 WP-4
 *
 * Parked per user direction ("no special theme for now"). The Topic 14
 * lore identity (parchment / ink / manuscript chrome) is preserved
 * verbatim in the commented-out rules below so a future re-enable does
 * not redesign from scratch. To re-enable:
 *
 *   1. Un-comment the rule block below (remove the surrounding slash-star
 *      / star-slash markers, leave the rules intact)
 *   2. Restore the kaeros branch in inc/brand.php's resolver
 *      (mystwood_studios_ab_current_brand) — see the commented re-enable
 *      reference in that file
 *   3. Restore lore-* tokens in lore/kaeros-hub.php's section args
 *      (hero, dividers, card-grid, faq, cta-band) — currently flipped to
 *      studio-dark / studio
 *   4. Restore the matching DORMANT block in assets/css/components/_footer.css
 *
 * Original Topic 14 design notes (preserved for context): the lore tier
 * inverts the colour model — light parchment surface with dark ink text,
 * scrolled state paints parchment-on-parchment with a subtle hairline
 * shadow, and the active-page triangle/links reach for the lore-ink
 * palette. Active item indicator on submenus uses ink for the bar so the
 * rune-tag motif from the Figma frames carries through.
 * -----------------------------------------------------------------------
 */
/*
body.is-brand-kaeros .site-header {
	color: var(--lore-ink, #1B1410);
}

body.is-brand-kaeros .site-header.is-scrolled {
	background: color-mix(in srgb, var(--lore-parchment, #F2E6CB) 94%, transparent);
	box-shadow: 0 4px 24px rgba(27, 20, 16, 0.18);
}

body.is-brand-kaeros .site-branding .site-title {
	color: var(--lore-ink, #1B1410);
}

body.is-brand-kaeros .main-navigation .primary-menu a:hover,
body.is-brand-kaeros .main-navigation .primary-menu a:focus-visible,
body.is-brand-kaeros .main-navigation #primary-menu a:hover,
body.is-brand-kaeros .main-navigation #primary-menu a:focus-visible {
	color: color-mix(in srgb, var(--lore-ink, #1B1410) 70%, var(--mw-color-primary, #6765E8));
}

body.is-brand-kaeros .main-navigation .primary-menu .current-menu-item > a::before,
body.is-brand-kaeros .main-navigation .primary-menu .current_page_item > a::before,
body.is-brand-kaeros .main-navigation #primary-menu .current-menu-item > a::before,
body.is-brand-kaeros .main-navigation #primary-menu .current_page_item > a::before {
	border-top-color: var(--lore-ink, #1B1410);
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--lore-ink, #1B1410) 40%, transparent));
}

body.is-brand-kaeros .main-navigation ul ul,
body.is-brand-kaeros .main-navigation .primary-menu .sub-menu,
body.is-brand-kaeros .main-navigation #primary-menu .sub-menu {
	background: color-mix(in srgb, var(--lore-parchment, #F2E6CB) 96%, transparent);
	border-color: color-mix(in srgb, var(--lore-ink, #1B1410) 16%, transparent);
	box-shadow: 0 12px 32px rgba(27, 20, 16, 0.22);
}

body.is-brand-kaeros .main-navigation .sub-menu a {
	color: color-mix(in srgb, var(--lore-ink, #1B1410) 88%, transparent);
}

body.is-brand-kaeros .main-navigation .sub-menu a:hover,
body.is-brand-kaeros .main-navigation .sub-menu a:focus-visible {
	background: color-mix(in srgb, var(--lore-ink, #1B1410) 8%, transparent);
	color: var(--lore-ink, #1B1410);
}

body.is-brand-kaeros .main-navigation .sub-menu .current-menu-item > a,
body.is-brand-kaeros .main-navigation .sub-menu .current_page_item > a {
	color: var(--lore-ink, #1B1410);
	box-shadow: inset 3px 0 0 0 var(--lore-ink, #1B1410);
}

@media (max-width: 767.98px) {
	body.is-brand-kaeros .site-header .main-navigation .primary-menu,
	body.is-brand-kaeros .site-header .main-navigation #primary-menu {
		background: color-mix(in srgb, var(--lore-parchment, #F2E6CB) 96%, transparent);
	}

	body.is-brand-kaeros .site-header .main-navigation #primary-menu .sub-menu a,
	body.is-brand-kaeros .site-header .main-navigation .primary-menu .sub-menu a {
		color: color-mix(in srgb, var(--lore-ink, #1B1410) 78%, transparent);
	}
}
*/