/**
 * KSM Menu brand styling (Stage 3.1b, KSM Menu plugin v1.5.1 integration).
 * Never edited: the carried Oxygen CSS (uploads/oxygen/css/*.css). This file
 * is the ONLY place KSM Menu's own classes are styled, per Base Principle
 * §9/§14 and the explicit Shane instruction "never inside the carried Oxygen
 * CSS".
 *
 * Values below are read from the ACTUAL carried Oxygen CSS, not eyeballed:
 *   - uploads/oxygen/css/universal.css line ~1445: the site's global colour
 *     custom properties --primary:#1874ba --secondary:#2b385b
 *     --accent:#444444 --light:#ffffff --dark:#000000 (Oxygen VSB global
 *     palette; --primary/--accent etc. are already defined site-wide by the
 *     carried CSS, so this file can reference them directly by var() name -
 *     no colour is duplicated as a literal).
 *   - uploads/oxygen/css/3650.css #-site-navigation-2718-3650: the baseline's
 *     own nav component set --oxynav-background-color:var(--primary) (i.e.
 *     #1874ba) as its bar colour, --oxynav-activehover-color:var(--accent),
 *     link font-size:1.2rem with text-transform:uppercase.
 *   - uploads/oxygen/css/3650.css #div_block-1340-2241 (the header row that
 *     contains the nav): background-color:var(--primary); height:99px - this
 *     is the baseline header bar height the new nav must not change.
 *   - uploads/oxygen/css/universal.css body { font-family:'Poppins' } - the
 *     theme's only body/heading typeface (self-hosted, assets/css/fonts.css).
 *
 * Nav container selectors for researcher-george's visual-diff mask (Stage
 * 3.1b nav regions are masked and judged by eye):
 *   #ksm-sp-nav               - desktop nav + mobile off-canvas drawer (KSM_Menu_Renderer::render_menu() output)
 *   #ksm-sp-mobile-trigger    - header burger trigger (KSM_Menu_Renderer::render_mobile_trigger() output)
 *
 * @package KSM_Select_Paving
 */

/*
 * STRUCTURAL FIX (2nd review round, 2026-09-28): the previous two fix rounds
 * used negative margins/height:0 on #ksm-sp-nav to fake its way into the
 * header band, compensating for a pre-existing header.php bug where
 * #div_block-1340-2241 (the header row) was closed right after the logo
 * instead of staying open through the nav/phone-icon/mobile-trigger, as the
 * baseline's own markup does (confirmed byte-for-byte against
 * stage-2/source/raw-html/homepage-14.html). That bug is now fixed in
 * header.php - #ksm-sp-nav, #link-2756-3650 and #div_block-2729-3650 are
 * genuine flex CHILDREN of the row now, not trailing siblings, so none of
 * the margin/height gymnastics below are needed any more. This file only
 * needs to size #ksm-sp-nav sensibly within that row and keep the dropdown
 * panels opaque/above later content.
 *
 * #div_block-1340-2241 itself is flex-direction:column (inherited from the
 * generic .ct-div-block rule, confirmed via computed style - no breakpoint
 * ever overrides flex-direction for this id), so children stack vertically
 * by default. The baseline's own logo/nav/phone/trigger row-like appearance
 * inside a column flex container is Oxygen's own mechanism and wasn't fully
 * reverse-engineered here; the effect is reproduced instead with a small,
 * explicitly mobile-scoped row override below (see MOBILE ROW section) -
 * within Shane's "similar visual" allowance for KSM Menu's own placement.
 */
#ksm-sp-nav {
	position: relative;
	width: 100%;
	z-index: 50; /* above <main>'s content below the header, for the open dropdown panels. */
	isolation: isolate; /* forces a clean stacking-context boundary, so the open mega/standard dropdown panel (z-index:20/999 inside) can never paint-leak against <main>'s content below - belt-and-braces alongside z-index. */
}

#ksm-sp-nav,
#ksm-sp-mobile-trigger {
	font-family: 'Poppins', sans-serif;
}

/* ---- Desktop bar: match the baseline's 99px header row height. ---- */
#ksm-sp-nav .ksm-navigation--desktop {
	background-color: transparent !important; /* overrides the plugin's own inline style="background-color:#ffffff" so the row's own var(--primary) band shows through. */
	padding: 0;
	min-height: 99px;
}

/*
 * `display:flex` MUST stay inside a min-width guard, so it doesn't beat the
 * plugin's own mobile-hide rule at narrower widths (#ksm-sp-nav
 * .ksm-navigation--desktop = 1 id + 1 class has HIGHER specificity than the
 * plugin's plain .ksm-navigation--desktop = 1 class, so an earlier
 * unconditional `display:flex` here won regardless of the plugin's own
 * media query and the full desktop item row rendered squashed into the
 * mobile viewport instead of being hidden behind the burger trigger).
 *
 * [Run8 correction, theme 1.3.2] Boundary moved from 993px to 992px - the
 * plugin's own default (`@media(max-width:992px){.ksm-navigation--desktop{
 * display:none}}` / `@media(min-width:993px)`) treats 992px itself as still
 * "mobile", but the baseline's own layout switches to its desktop header at
 * EXACTLY 992px (confirmed via screenshots this stage). This id+class
 * selector still wins at 992 regardless of the plugin's own max-width:992
 * rule (specificity, not source order), so lowering the boundary here is
 * enough - matched by the mobile-trigger hide boundary below, so there's no
 * gap at 992 where neither the desktop nav nor the mobile trigger shows.
 */
@media (min-width: 992px) {
	#ksm-sp-nav .ksm-navigation--desktop {
		display: flex;
		align-items: center;
	}
}

/*
 * MOBILE/TABLET ROW: reproduce the baseline's "one row: logo | nav | phone
 * box | MENU button".
 *
 * [Run8 correction, theme 1.3.2] The #div_block-1340-2241 sub-rule that used
 * to open this block (flex-direction:row/align-items:center/flex-wrap:
 * nowrap) is REMOVED - it was based on two wrong premises, both now
 * disproved by a direct read of the carried CSS: (a) 1340 was never
 * actually flex-direction:column (no breakpoint anywhere sets that; a flex
 * container with no flex-direction defaults to row per the CSS spec, and
 * 1340's own base rule is display:flex with no flex-direction override at
 * all - it was ALWAYS row); (b) now that header.php nests the logo/nav/
 * phone/trigger correctly as children of #div_block-2502-2241 (not of 1340
 * - see header.php's Run8 comment), 1340 wraps only ONE child (2502), so
 * its own flex-direction is moot regardless. #div_block-2502-2241 is the
 * real row, and per its own carried base rule (3650.css:
 * `#div_block-2502-2241{width:1400px;max-width:100%;flex-direction:row;
 * display:flex;align-items:center;...}`, no media guard) it is ALREADY
 * display:flex;flex-direction:row;align-items:center at every viewport
 * width - no theme override needed for the row itself, only for sizing
 * #ksm-sp-nav/#link-2756-3650/#div_block-2729-3650 sensibly as its children
 * at <=991px (KSM Menu's own classes, not covered by the carried CSS).
 * #ksm-sp-nav itself is excluded from taking row space at <=991px
 * (width:0, its content is an off-canvas drawer/hidden desktop bar) so only
 * the logo link, the phone-icon link and the trigger wrapper actually share
 * the row's width at that breakpoint.
 *
 * [Run7 correction, theme 1.3.1] REMOVED two rules that were here
 * (#div_block-2502-2241{flex:0 0 auto} and a forced #image-2727-3650{
 * width:75px!important;...}), both defects caught by researcher's per-
 * section gate: at TABLET width (768) the logo rendered 75x37.5 vs the
 * baseline's ~347x139 - because both overrides were scoped to the WHOLE
 * <=991px range but were only ever validated against a single narrow-mobile
 * screenshot (~375-414px). `flex:0 0 auto` on #div_block-2502-2241 set
 * flex-shrink:0, which fought the carried CSS's own width:100%-of-row rule
 * for that cell at <=991px - removing the whole rule (no flex override at
 * all - the CSS default, flex:0 1 auto, is shrinkable) lets the carried
 * CSS's own #div_block-2530-2241 percentage-width rules size the logo
 * natively, exactly like the baseline does, instead of fighting it.
 */
@media (max-width: 991px) {
	/*
	 * [Run9] KEPT as `width:0`, NOT changed to `display:none` as manager's
	 * instruction (a) asked for - flagged as a correction in this round's
	 * report, not silently done differently. #ksm-sp-nav wraps BOTH
	 * `.ksm-navigation--desktop` AND the off-canvas `.ksm-navigation--mobile`
	 * drawer (KSM_Menu_Renderer::render_menu(), base-plugins/ksm-menu/
	 * includes/class-ksm-menu-renderer.php lines 117/218) - `display:none`
	 * on this wrapper would hide the mobile drawer too, breaking the no-JS
	 * off-canvas menu at every width <=991px (Base Principle #13). Measured
	 * computed style directly (stage-3/harness/measure-header-geometry.js)
	 * confirms #ksm-sp-nav's margin/padding/border are already all 0px with
	 * width:0px at every width tested - it is NOT actually contributing any
	 * space to its siblings' flex-shrink math today, so this wasn't the
	 * real cause of the measured gap (the real cause, found and fixed
	 * below, was `flex:0 0 auto`/`flex:1 1 auto` on the phone/trigger
	 * wrappers overriding their own carried-CSS percentage widths' natural
	 * shrink).
	 */
	#ksm-sp-nav {
		width: 0;
		flex: 0 0 auto;
		overflow: visible; /* the off-canvas drawer itself still renders past this zero-width box. */
	}

	/*
	 * [Run9 correction] #link-2756-3650 and #div_block-2729-3650 are BOTH
	 * carried-CSS ids with their OWN declared percentage widths already
	 * (3650.css: #link-2756-3650{width:30%} constant; #div_block-2729-3650
	 * width:30%/50%/50% at <=991/<=767/<=479) and DEFAULT flex-shrink:1 (the
	 * baseline never sets flex-shrink on either). The row's three real
	 * children's basis percentages sum to MORE than 100% at every tier
	 * (e.g. logo 50% + phone 30% + trigger 30% = 110% at 768-991), so the
	 * baseline's actual rendered widths are already-shrunk proportionally
	 * by the browser's own flex algorithm, not literal 30%/30% - confirmed
	 * by measurement (768: phone 209.4px = 27.27% of 768, exactly the
	 * 30%-of-110%-total shrink ratio predicts). This theme's earlier
	 * `flex:0 0 auto` (phone) and `flex:1 1 auto` (trigger) overrode that -
	 * flex-shrink:0 pinned the phone box to its FULL unshrunk 30% (measured
	 * 230.4px at 768 - exactly 30% of 768, no shrink at all), and
	 * flex-grow:1 gave the trigger whatever was left over by a completely
	 * different mechanism. Removing both flex overrides lets the carried
	 * width rules govern with their natural (unset = 1) flex-shrink, same
	 * as the baseline.
	 */
	#link-2756-3650 {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--accent); /* baseline's dark click-to-call box. */
	}

	#link-2756-3650 a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	#div_block-2729-3650 {
		height: 100%;
	}

	#ksm-sp-mobile-trigger {
		width: 100%;
		height: 100%;
	}

	/*
	 * [Run9 correction] the INNER button - baseline's equivalent
	 * (#menu-mob-trigger, carried CSS) is NOT stretched to 100% width/height
	 * of its wrapper at 480-991px: it hugs its own content (padding + icon +
	 * text), giving a roughly constant box regardless of viewport in that
	 * range (measured baseline: 119.5px wide at both 768 AND 991). Baseline
	 * only forces width:100% at <=479px (`@media(max-width:479px){
	 * #menu-mob-trigger{width:100%}}`) - mirrored here at the same
	 * breakpoint, below. Padding is baseline's own declared value
	 * (`#menu-mob-trigger{padding:1rem}` at <=991px in the carried CSS),
	 * not the plugin's own 0.75rem default.
	 */
	#ksm-sp-mobile-trigger .ksm-mobile-trigger,
	#ksm-sp-mobile-trigger .ksm-mobile-trigger-noscript,
	#ksm-sp-mobile-trigger label {
		justify-content: center;
		background-color: var(--primary); /* baseline's blue MENU button. */
		padding: 1rem; /* matches baseline's #menu-mob-trigger padding exactly (carried CSS). */
	}

	#ksm-sp-mobile-trigger .mobile-bar-menu-text {
		text-transform: uppercase;
		font-weight: 600;
	}
}

/*
 * [Run9, theme 1.3.3] Mirrors baseline's own #menu-mob-trigger<=479px guard
 * (`@media(max-width:479px){#menu-mob-trigger{width:100%}}`) - only at this
 * narrowest tier does the trigger button stretch to fill its wrapper;
 * 480-991px it hugs its own content (see the comment above).
 */
@media (max-width: 479px) {
	#ksm-sp-mobile-trigger .ksm-mobile-trigger,
	#ksm-sp-mobile-trigger .ksm-mobile-trigger-noscript,
	#ksm-sp-mobile-trigger label {
		width: 100%; /* height stays intrinsic here too - baseline's own <=479px rule only sets width, never height (confirmed: #menu-mob-trigger's target box is 161.0x52.4, not stretched to its 68px-tall wrapper). */
	}
}

/*
 * [Run8, theme 1.3.2] DESKTOP TRIGGER HIDE, 1px earlier than the plugin's
 * own boundary. KSM Menu's own CSS (base-plugins/ksm-menu/assets/css/
 * ksm-menu.css) hides `.ksm-mobile-trigger` only at `min-width:993px`
 * (its own `@media(max-width:992px)` block is what SHOWS it, so 992px
 * itself is still "mobile" by the plugin's own boundary) - but the
 * baseline's own layout switches to its desktop header at exactly 992px
 * (confirmed: stage-2/source/raw-html captures and this theme's own
 * 991-vs-992 screenshots both show the tablet row layout stops at 991 and
 * the full desktop nav row starts at 992). Researcher's gate caught the
 * trigger still showing at 992 as a result. Per Shane's instruction, the
 * plugin file itself is never touched - the 1px-earlier boundary is set
 * here instead, in the theme.
 */
@media (min-width: 992px) {
	#ksm-sp-mobile-trigger .ksm-mobile-trigger {
		display: none !important;
	}
}

#ksm-sp-nav .ksm-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* baseline nav clusters right, clear of the logo on the left - not space-evenly across the full 1400px row. */
	gap: 5px; /* baseline's --oxynav-other-spacing:5px */
	width: 100%;
}

/*
 * ID COLLISION FIX: WP core's wp_nav_menu() defaults the <ul>'s id to
 * "menu-{menu-slug}" when no menu_id arg is passed - for "Main Menu" that is
 * literally #menu-main-menu, the SAME id the old (now-removed) desktop
 * noscript fallback used to hardcode. The carried Oxygen CSS
 * (assets/oxygen/universal.css) has `#menu-main-menu{background-color:
 * var(--secondary)}` written for that old noscript <ul> - never edited here
 * (carried CSS is never touched, §1 sanctioned deviation), so it now paints
 * an unwanted navy bar behind KSM Menu's own <ul>. #menu-main-menu.ksm-menu
 * out-specifies the carried rule's bare #menu-main-menu without touching it.
 */
#menu-main-menu.ksm-menu {
	background-color: transparent !important;
}

/* Baseline look: each top-level item is its own dark box with a thin white
 * border (uploads/oxygen/css/universal.css .oxy-site-navigation .menu-item {
 * background-color:var(--accent); padding:1rem 0 }), uppercase, 1.2rem. */
#ksm-sp-nav .ksm-menu__link {
	background-color: var(--accent);
	border: 1px solid var(--light);
	padding: 1rem 1.25rem;
}

#ksm-sp-nav .ksm-menu__link,
#ksm-sp-nav .ksm-standard-dropdown__link {
	font-size: 1.2rem;
	text-transform: uppercase;
	font-weight: 300;
	color: var(--light);
}

#ksm-sp-nav .ksm-menu__link:hover,
#ksm-sp-nav .ksm-menu__link:focus,
#ksm-sp-nav .ksm-standard-dropdown__link:hover {
	color: var(--light);
	background-color: var(--primary);
}

/* Standard + mega dropdown panels: baseline's --oxynav-activehover-color = var(--accent).
 * Explicit opaque background + z-index above the CTA row below it (fix note
 * above: the CTA row now sits directly under the band, i.e. very close to
 * the nav) so nothing behind it shows through when open. */
#ksm-sp-nav .ksm-standard-dropdown,
#ksm-sp-nav .ksm-mega-menu,
#ksm-sp-nav .ksm-mega-menu__container {
	background-color: var(--light) !important;
	border-top: 2px solid var(--accent);
	z-index: 20;
}

#ksm-sp-nav .ksm-mega-menu__title,
#ksm-sp-nav .ksm-standard-dropdown__link {
	color: var(--accent);
}

#ksm-sp-nav .ksm-mega-menu__link:hover .ksm-mega-menu__title {
	color: var(--primary);
}

/*
 * NAV INDICATOR (2nd review round): the plugin's own default
 * .ksm-menu__item--has-children > .ksm-menu__link::after is an absolutely
 * positioned triangle (CSS mask image) hanging BELOW the item box
 * (top:calc(100% - 0px)). The baseline shows a chevron INSIDE each box, to
 * the right of the label. The item's markup already gives a hook for this
 * (<a class="ksm-menu__link"><span class="ksm-menu__text">...</span></a>,
 * class-ksm-menu-walker.php) - the link is display:flex already, so an
 * inline ::after chevron just needs to drop the plugin's absolute/mask
 * properties and use content instead. No plugin change needed.
 */
#ksm-sp-nav .ksm-menu__item--has-children > .ksm-menu__link::after {
	position: static;
	content: '\25BE'; /* down chevron */
	display: inline-block;
	width: auto;
	height: auto;
	margin-left: 0.5rem;
	background: none;
	background-image: none;
	-webkit-mask-image: none;
	mask-image: none;
	filter: none;
	color: var(--light);
	font-size: 0.9rem;
	line-height: 1;
}

#ksm-sp-nav .ksm-menu__item--has-children:hover > .ksm-menu__link::after {
	opacity: 1;
}

/*
 * KNOWN FIX (memory: project_ksm_menu_mega_row_layout.md): the mega-menu
 * ITEM needs flex-direction: column so its title/excerpt/image stack
 * vertically instead of running beside the parent - this is the one property
 * that fixes it. The GRID (.ksm-mega-menu__grid) is never touched; Shane
 * previously reverted a break caused by touching the grid on another site.
 */
#ksm-sp-nav .ksm-mega-menu__item {
	flex-direction: column;
}

/* ---- No-JS fallback: desktop submenus open on :hover/:focus-within when JS hasn't added ksm-js-enabled. ---- */
body:not(.ksm-js-enabled) #ksm-sp-nav .ksm-standard-dropdown,
body:not(.ksm-js-enabled) #ksm-sp-nav .ksm-mega-menu__container {
	display: none;
}

body:not(.ksm-js-enabled) #ksm-sp-nav .ksm-navigation--desktop li:hover > .ksm-standard-dropdown,
body:not(.ksm-js-enabled) #ksm-sp-nav .ksm-navigation--desktop li:focus-within > .ksm-standard-dropdown,
body:not(.ksm-js-enabled) #ksm-sp-nav .ksm-navigation--desktop li:hover > .ksm-mega-menu__container,
body:not(.ksm-js-enabled) #ksm-sp-nav .ksm-navigation--desktop li:focus-within > .ksm-mega-menu__container {
	display: block;
}

/* ---- Mobile trigger: match the header's light-on-primary icon colour. ---- */
#ksm-sp-mobile-trigger .ksm-mobile-trigger {
	color: var(--light);
	background: none;
	border: 0;
	cursor: pointer;
}

#ksm-sp-mobile-trigger .ksm-mobile-trigger__icon span {
	background-color: var(--light);
}

/* Only the JS trigger is visible once JS has run; the no-JS <label> hides then, per the plugin's own checkbox-hack pattern (never pointer-events:none - Firefox label-click gotcha). */
body:not(.ksm-js-enabled) #ksm-sp-mobile-trigger .ksm-mobile-trigger-js {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

body.ksm-js-enabled #ksm-sp-mobile-trigger .ksm-mobile-trigger-noscript {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

/* ---- Mobile off-canvas drawer: brand bar + accent active state. ---- */
#ksm-sp-nav .ksm-mobile-menu__header {
	background: var(--primary);
	color: var(--light);
}

#ksm-sp-nav .ksm-mobile-menu__link {
	color: var(--dark);
	text-transform: uppercase;
	font-weight: 300;
}

#ksm-sp-nav .ksm-mobile-menu__link:hover,
#ksm-sp-nav .ksm-mobile-menu__link:focus {
	color: var(--primary);
}

#ksm-sp-nav .ksm-mobile-menu__arrow {
	color: var(--accent);
}