/* ==========================================================================
   Font Families
   No custom @font-face declarations yet — the theme currently relies on
   the system font stack below. Add @font-face rules here if/when custom
   webfonts are introduced.
   ========================================================================== */

:root {
	--font-family-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-family-heading: var(--font-family-body);
	--font-family-technical: "Arial Narrow", Arial, sans-serif;
}

/* ==========================================================================
   Primitive Colors
   ========================================================================== */

:root {
	--color-white: #ffffff;
	--color-gray-50: #fafafa;
	--color-gray-100: #f5f5f5;
	--color-gray-200: #e5e5e5;
	--color-gray-300: #d4d4d4;
	--color-gray-400: #a3a3a3;
	--color-gray-500: #737373;
	--color-gray-600: #525252;
	--color-gray-700: #404040;
	--color-gray-800: #262626;
	--color-gray-900: #171717;
	--color-gray-950: #0a0a0a;
	--color-black: #000000;
}

/* ==========================================================================
   Layout Primitives
   ========================================================================== */

:root {
	--container-width: 1200px;
	--space-page: clamp(1rem, 4vw, 2rem);
	--radius: 6px;
}

/* ==========================================================================
   XO Layout Widths
   Container max-widths for the Section / Content Container / Inner
   Container system (see .xo-section / .xo-container in layout.css). All
   XO layout rules should consume these tokens rather than repeating the
   literal values.
   ========================================================================== */

:root {
	--xo-layout-xxl: 90rem;
	--xo-layout-xl: 75rem;
	--xo-layout-l: 64rem;
	--xo-layout-ml: 50rem;
	--xo-layout-m: 48rem;

	/* Reuses --space-page so the XO container system and the legacy
	   .container class share one gutter value instead of two. */
	--xo-page-gutter: var(--space-page);
	--xo-header-gutter: var( --xo-page-gutter );
	--xo-header-gutter-mobile: 0.5rem;
}

/* ==========================================================================
   XO Mobile Menu
   Neutral defaults for the mobile menu overlay's semantic custom properties
   (assets/css/src/mobile-menu.css). Child themes override these directly —
   no structural CSS needs to change to restyle color or width. The parent
   theme ships no open/close transition at all (opacity/visibility switch
   instantly) — a fade looked technically correct but read as "jumpy" on
   real devices, since the overlay's background fades in/out together with
   its content, letting the outgoing/incoming page bleed through mid-fade.
   A child theme that wants a transition can add one directly, e.g.
   `.xo-mobile-menu { transition: opacity 0.2s ease; }` — no JavaScript
   changes required, see _docs/mobile-menu-system.md §4/§8.
   The 782px breakpoint itself is not a custom property: CSS has no way to
   use one inside a @media condition without a PostCSS build step this
   project doesn't include, so it's repeated as a literal in every file that
   needs it (mobile-menu.css, mobile-nav-accordion.css, layout.css,
   base.css), all sourced from xo_dna_mobile_menu_breakpoint() in
   includes/mobile-menu.php — change the breakpoint there and in each CSS
   file together.
   ========================================================================== */

:root {
	--xo-mobile-menu-width: 100%;
	--xo-mobile-menu-background: var(--color-mobile-menu-background);
	--xo-mobile-menu-color: var(--color-mobile-menu-text);
	--xo-mobile-menu-submenu-color: var(--color-mobile-menu-submenu-text);
	--xo-mobile-menu-backdrop: rgb(0 0 0 / 50%);
	--xo-mobile-menu-z-index: 1000;
}

/* ==========================================================================
   XO Sticky Header
   The WordPress admin bar is 32px tall on desktop and 46px on mobile/tablet
   (core's own 782px breakpoint — the same one base.css already keys its
   admin-bar height offset off of). Sticky-header positioning (layout.css)
   and assets/js/sticky-header.js both read this token so the sticky header
   never renders underneath the admin bar at either size.
   ========================================================================== */

:root {
	--xo-admin-bar-height: 32px;
}

@media (max-width: 782px) {
	:root {
		--xo-admin-bar-height: 46px;
	}
}

/* ==========================================================================
   Brand Variables
   ========================================================================== */

:root {
	--color-brand-primary: var(--xo-brand-primary, #3768af);
	--color-brand-secondary: var(--xo-brand-secondary, #17181e);
	--color-brand-accent: var(--xo-brand-accent, #f7b500);
}

/* ==========================================================================
   Semantic Variables — Light (default)
   ========================================================================== */

:root,
html[data-xo-theme="light"] {
	/* Page */
	--color-background: var(--xo-light-background, #ffffff);
	--color-surface: var(--xo-light-surface, #f7f7f9);

	/* Text */
	--color-text: var(--xo-light-text, #17181e);
	--color-heading: var(--xo-light-heading, #000000);
	--color-text-muted: var(--color-gray-600);

	/* Header */
	--color-header-background: var(--xo-light-header-background, #ffffff);

	/* Navigation */
	--color-nav-background: var(--xo-light-nav-background, #3768af);
	--color-nav-text: var(--xo-light-nav-text, #ffffff);
	--color-nav-submenu-background: var(--xo-light-nav-submenu-background, #ffffff);
	--color-nav-submenu-text: var(--xo-light-nav-submenu-text, #17181e);

	/* Mobile Menu */
	--color-mobile-menu-background: var(--xo-light-mobile-menu-background, #ffffff);
	--color-mobile-menu-text: var(--xo-light-mobile-menu-text, #17181e);
	--color-mobile-menu-submenu-text: var(--xo-light-mobile-menu-submenu-text, #17181e);

	/* Links */
	--color-link: var(--xo-light-link, #3768af);
	--color-link-hover: var(--color-gray-900);

	/* Borders */
	--color-border: var(--xo-light-border, #dddddd);
	--color-border-strong: var(--color-gray-400);

	/* Buttons */
	--color-button-background: var(--xo-light-button-background, #3768af);
	--color-button-text: var(--xo-light-button-text, #ffffff);
	--color-button-background-hover: var(--color-gray-900);

	/* Footer */
	--color-footer-background: var(--xo-light-footer-background, #171717);
	--color-footer-text: var(--xo-light-footer-text, #d4d4d4);
	--color-footer-link: var(--xo-light-footer-link, #ffffff);

	/* Focus */
	--color-focus: var(--color-gray-700);
}

/* ==========================================================================
   Semantic Variables — Dark
   ========================================================================== */

html[data-xo-theme="dark"] {
	/* Page */
	--color-background: var(--xo-dark-background, #000000);
	--color-surface: var(--xo-dark-surface, #171929);

	/* Text */
	--color-text: var(--xo-dark-text, #cbcde6);
	--color-heading: var(--xo-dark-heading, #ffffff);
	--color-text-muted: var(--color-gray-400);

	/* Header */
	--color-header-background: var(--xo-dark-header-background, #0c0d17);

	/* Navigation */
	--color-nav-background: var(--xo-dark-nav-background, #0c0d17);
	--color-nav-text: var(--xo-dark-nav-text, #ffffff);
	--color-nav-submenu-background: var(--xo-dark-nav-submenu-background, #171929);
	--color-nav-submenu-text: var(--xo-dark-nav-submenu-text, #cbcde6);

	/* Mobile Menu */
	--color-mobile-menu-background: var(--xo-dark-mobile-menu-background, #0c0d17);
	--color-mobile-menu-text: var(--xo-dark-mobile-menu-text, #cbcde6);
	--color-mobile-menu-submenu-text: var(--xo-dark-mobile-menu-submenu-text, #cbcde6);

	/* Links */
	--color-link: var(--xo-dark-link, #b5c2dd);
	--color-link-hover: var(--color-gray-100);

	/* Borders */
	--color-border: var(--xo-dark-border, #2c3856);
	--color-border-strong: var(--color-gray-600);

	/* Buttons */
	--color-button-background: var(--xo-dark-button-background, #16478e);
	--color-button-text: var(--xo-dark-button-text, #ffffff);
	--color-button-background-hover: var(--color-gray-100);

	/* Footer */
	--color-footer-background: var(--xo-dark-footer-background, #0a0a0a);
	--color-footer-text: var(--xo-dark-footer-text, #a3a3a3);
	--color-footer-link: var(--xo-dark-footer-link, #f5f5f5);

	/* Focus */
	--color-focus: var(--color-gray-300);
}

/* Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-background);
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

button,
input,
textarea,
select {
	font: inherit;
}

button {
	cursor: pointer;
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-heading);
	line-height: 1.2;
	margin: 0 0 0.75em;
	color: var(--color-heading);
}

h1 {
	font-size: clamp(2rem, 5vw, 4rem);
}

h2 {
	font-size: clamp(1.6rem, 3vw, 2.5rem);
}

h3 {
	font-size: clamp(1.25rem, 2vw, 1.75rem);
}

p {
	margin: 0 0 1.25rem;
}

ul,
ol {
	margin: 0 0 1.25rem 1.25rem;
	padding: 0;
}

/* Buttons */

/*
 * ".wp-block-button__link.wp-element-button" (rather than just
 * ".wp-block-button__link") matches WordPress core's own default button
 * rule in specificity-breaking order: both classes are always present on
 * rendered button blocks, so this compound selector outscores core's
 * single-class rule regardless of stylesheet load order. Without it, core's
 * default background wins in the block editor iframe while ours wins on
 * the front end, since the two contexts print core and theme styles in a
 * different order.
 */
.button,
.wp-block-button__link,
.wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.15rem;
	border-radius: var(--radius);
	background: var(--color-button-background);
	color: var(--color-button-text);
	text-decoration: none;
	font-weight: 700;
	border: 1px solid var(--color-button-background);
}

.button:hover,
.button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus {
	background: var(--color-button-background-hover);
	color: var(--color-button-text);
	border-color: var(--color-button-background-hover);
}


.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1;
}

body.admin-bar .wp-site-blocks {
	min-height: calc(100vh - 32px);
}

@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks {
		min-height: calc(100vh - 46px);
	}
}

/* ==========================================================================
   XO Section / Container Layout System
   Canonical page-layout primitives, reusable by all XO child themes.

   Hierarchy:
     .xo-section
       .xo-container
         .xo-container__inner (optional, width modifiers below)

   The Section owns background/border/spacing and is always full-width.
   The Content Container centers page content at --xo-layout-xxl (90rem)
   and provides the standard responsive gutter. The Inner Container is an
   optional narrower measure inside the Content Container.
   ========================================================================== */

.xo-section {
	width: 100%;
}

/*
 * Guarantee the alignfull breakout regardless of how deeply an XO Section
 * ends up nested inside "has global padding" ancestors (e.g. a template
 * that wraps Post Content in its own padded Group). Core's own alignfull
 * margin rule is a :where()-based zero-specificity rule, and its
 * nested-padding safety net (which zeroes alignfull margins to avoid a
 * double bleed) ties with — and in the block editor iframe, wins over —
 * this theme's .entry-content > .alignfull rule, leaving the section at
 * full width but pinned at its narrow parent's position instead of
 * shifted to the viewport edge. This is editor-only: the front end never
 * loads that core module, so it was never affected. Scoped to .xo-section
 * specifically so it doesn't touch unrelated alignfull blocks (Cover,
 * core Group, etc.) that may rely on core's nested-padding behavior.
 */
.xo-section.alignfull {
	max-width: none;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.xo-container {
	width: 100%;
	max-width: var(--xo-layout-xxl);
	margin-inline: auto;
	padding-inline: var(--xo-page-gutter);
}

.xo-container__inner {
	width: 100%;
	margin-inline: auto;
}

.xo-container__inner--xl {
	max-width: var(--xo-layout-xl);
}

.xo-container__inner--l {
	max-width: var(--xo-layout-l);
}

.xo-container__inner--ml {
	max-width: var(--xo-layout-ml);
}

.xo-container__inner--m {
	max-width: var(--xo-layout-m);
}

/* Layout */

.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
}

.container {
	width: min(100% - (var(--space-page) * 2), var(--container-width));
	margin-inline: auto;
}

.section {
	padding-block: clamp(3rem, 7vw, 6rem);
}

/* Header */

.xo-site-header {
	background: var(--color-header-background);
}

.xo-site-header__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 1rem;
}

.xo-site-header__top-row,
.xo-site-header__navigation-row {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* Content */

.entry-header {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	background: var(--color-surface);
}

.entry-title {
	margin-bottom: 0;
}

.entry-content > .alignwide {
	max-width: var(--container-width);
}

.entry-content > .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Footer */

.xo-site-footer {
	margin-top: auto;
	padding-block: 2rem;
	background-color: var(--color-footer-background);
	color: var(--color-footer-text);
}

.xo-site-footer a {
	color: var(--color-footer-link);
}

/* Responsive */

@media (max-width: 768px) {
	.site-header__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.primary-menu {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.75rem;
	}
}

/* --------------------------------------------------------------------------
   Site Header (Block Template Part)
   -------------------------------------------------------------------------- */

.xo-site-header {
	position: relative;
	width: 100%;
}

.xo-site-header__inner {
	padding-block: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   Sticky Header
   Enabled via XO DNA → Appearance → Layout → Header → Sticky Header (see
   xo_dna_add_sticky_header_body_classes() in includes/header.php). Emits
   only the functional positioning and a minimal transition — the condensed
   ("xo-condensed-sticky-header") and stuck-state ("xo-header-is-stuck")
   presentation are documented class hooks for child themes to style, not
   implemented here. See _docs/updates/2026-09-04-build-01.md.
   -------------------------------------------------------------------------- */

body.xo-sticky-header .xo-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

/*
 * .xo-site-header sits one DOM level inside WordPress's own generated
 * wrapper for the header template part — <header class="wp-block-template-part">,
 * present in any block theme rendering an "area":"header" template part
 * (see theme.json templateParts, patterns/header.php). That wrapper holds
 * nothing else, so it always sizes to exactly its child's height — and
 * position: sticky can only hold an element in place within the bounds of
 * its own containing block (here, that wrapper), so a wrapper with zero
 * spare height leaves .xo-site-header nowhere to stick to; it just scrolls
 * away with the page. Making the wrapper sticky too gives it room to move
 * within *its own* containing block (.wp-site-blocks, which spans the full
 * page) — .xo-site-header still carries position: sticky itself per the
 * class contract above, riding along inside its now-pinned parent.
 *
 * z-index: 100 here (matching .xo-site-header's own) matters for the same
 * reason — this wrapper, not the inner element, is what actually competes
 * in the page's top-level stacking order once page content scrolls beneath
 * it. Left at the default z-index: auto, any later-in-the-document element
 * that happens to be positioned (e.g. a badge or icon overlay inside main
 * with position: relative, however deeply nested — non-positioned ancestors
 * don't shield it) gets promoted to that same top-level stacking order too,
 * and wins on document order alone, painting over the sticky header.
 */
body.xo-sticky-header header.wp-block-template-part:has(.xo-site-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Keep the sticky header from rendering underneath the WordPress admin bar. */
body.admin-bar.xo-sticky-header .xo-site-header,
body.admin-bar.xo-sticky-header header.wp-block-template-part:has(.xo-site-header) {
	top: var(--xo-admin-bar-height);
}

@media (prefers-reduced-motion: reduce) {
	body.xo-sticky-header .xo-site-header {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Site Logo — dark-mode visibility
   Authoritative rules. main.css is always enqueued; these rules guarantee
   the correct logo is visible even if the block stylesheet is not loaded.
   -------------------------------------------------------------------------- */

.xo-dna-site-logo__image.xo-dna-site-logo__image--dark {
	display: none;
}

[data-xo-theme="dark"] .xo-dna-site-logo__image--light {
	display: none;
}

[data-xo-theme="dark"] .xo-dna-site-logo__image--dark {
	display: block;
}

.xo-site-header__identity .wp-block-site-logo {
	margin: 0;
}

.xo-site-header__identity img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

.xo-site-header__utility-placeholder:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Header Phone (xo-dna/contact-phone block wrapper)
   Used by header variants that include a phone slot, e.g. header-center-logo.
   -------------------------------------------------------------------------- */

.xo-site-header__phone p {
	margin: 0;
}

.xo-site-header__phone a {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.xo-site-header__navigation-row {
	margin-block-start: var(--wp--preset--spacing--20);
}

nav.xo-site-header__navigation {
	width: 100%;
	background: var(--color-nav-background);
	color: var(--color-nav-text);
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--30);
}

nav.xo-site-header__navigation a.wp-block-navigation-item__content,
nav.xo-site-header__navigation button.wp-block-navigation-item__content {
	color: var(--color-nav-text);
}

nav.xo-site-header__navigation .wp-block-navigation-item__content:hover,
nav.xo-site-header__navigation .wp-block-navigation-item__content:focus-visible {
	opacity: 0.8;
}

/*
 * Centered variant — opt-in modifier, not part of the base navigation style.
 * Add "xo-site-header__navigation--centered" alongside
 * "xo-site-header__navigation" on the wp:navigation block to center the
 * menu items within the (still square, full-width) bar, e.g. header-center-logo.
 * The default header keeps its own justifyContent (right-aligned).
 */
nav.xo-site-header__navigation.xo-site-header__navigation--centered .wp-block-navigation__container {
	justify-content: center;
}

nav.xo-site-header__navigation .wp-block-navigation__submenu-container {
	background: var(--color-nav-submenu-background) !important;
	color: var(--color-nav-submenu-text) !important;
}

nav.xo-site-header__navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content,
nav.xo-site-header__navigation .wp-block-navigation__submenu-container button.wp-block-navigation-item__content {
	color: var(--color-nav-submenu-text) !important;
}

/* --------------------------------------------------------------------------
   Mobile Navigation Toggle (Hamburger)
   Replaced by the XO DNA mobile menu system's own .xo-mobile-menu__toggle
   button (assets/css/src/mobile-menu.css) now that both Navigation block
   instances run with "overlayMenu":"never" and core never renders its own
   responsive-container open/close buttons. See _docs/mobile-menu-system.md.
   -------------------------------------------------------------------------- */

/* Branding row: CSS grid with named areas */

.xo-site-header__branding-row {
	display: grid;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.xo-site-header__identity {
	grid-area: identity;
}

.xo-site-header__utility {
	grid-area: utility;
}

/* Left-aligned logo (default) */

.xo-header-logo-left .xo-site-header__branding-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "identity utility";
}

.xo-header-logo-left .xo-site-header__identity {
	justify-self: start;
}

.xo-header-logo-left .xo-site-header__utility {
	justify-self: end;
}

.xo-header-logo-left .xo-site-header__navigation-row {
	justify-content: flex-end;
}

.xo-header-logo-left .xo-site-header__navigation {
	justify-content: flex-end;
}

/* Center-aligned logo */

.xo-header-logo-center .xo-site-header__branding-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas: ". identity utility";
}

.xo-header-logo-center .xo-site-header__identity {
	justify-self: center;
}

.xo-header-logo-center .xo-site-header__utility {
	justify-self: end;
}

.xo-header-logo-center .xo-site-header__navigation-row {
	justify-content: center;
}

.xo-header-logo-center .xo-site-header__navigation {
	justify-content: center;
}

/* Right-aligned logo */

.xo-header-logo-right .xo-site-header__branding-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "utility identity";
}

.xo-header-logo-right .xo-site-header__identity {
	justify-self: end;
}

.xo-header-logo-right .xo-site-header__utility {
	justify-self: start;
}

.xo-header-logo-right .xo-site-header__navigation-row {
	justify-content: flex-end;
}

.xo-header-logo-right .xo-site-header__navigation {
	justify-content: flex-end;
}

/* Mobile */

@media (max-width: 782px) {

	.xo-site-header__inner {
		display: flex;
		align-items: center;
		padding-block: var(--wp--preset--spacing--20);
		padding-inline: var(--space-page);
	}

	/*
	 * Force the branding row to a full-width, space-between flex row so the
	 * logo pins to the left edge and the nav/menu toggle pins to the right
	 * edge, instead of the pair collapsing to their content width and
	 * appearing centered (the "alignwide" auto margins otherwise center
	 * the row itself within the header).
	 */
	.xo-site-header__branding-row,
	.xo-site-header__top-row--mobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	.xo-site-header__identity {
		flex: 0 0 auto;
	}

	.xo-site-header__utility {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
	}

	.xo-site-header__navigation {
		width: auto;
	}
}

/* ==========================================================================
   XO Mobile Menu System
   Structural baseline for the XO-owned mobile header, hamburger toggle,
   and overlay that replace the WordPress Navigation block's built-in
   responsive overlay on mobile. See _docs/mobile-menu-system.md.

   Everything in this file is gated behind "body.xo-mobile-menu-enabled",
   added by includes/mobile-menu.php only when the "xo_dna_mobile_menu_enabled"
   filter returns true (the default) — the same disable contract used by
   mobile-nav-accordion.css. A child theme disabling that filter removes the
   class, so every rule below fails to match and has no effect on the page,
   without needing any CSS undone or assets dequeued.

   Colors and width live in custom properties (tokens.css, "XO Mobile
   Menu" section) with neutral defaults — a child theme restyles the system
   by overriding those properties, not by rewriting these rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Responsive visibility
   One shared breakpoint (documented in xo_dna_mobile_menu_breakpoint(),
   includes/mobile-menu.php — currently 782px, matching the WordPress-aligned
   breakpoint XO DNA's header layout already used before this system, see
   base.css / mobile-nav-accordion.css). Repeated as a literal here because
   this project's PostCSS pipeline (gulpfile.js) does not include
   postcss-custom-media, so a custom property cannot be referenced inside a
   @media condition.

   The Desktop Header / Mobile Header groups also carry native WordPress
   block-visibility metadata (metadata.blockVisibility, see
   patterns/header.php) for editor List View / responsive-preview behavior.
   These rules are an independent, always-present frontend backstop for the
   same breakpoint, not a replacement for it.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	body.xo-mobile-menu-enabled .xo-site-header__desktop {
		display: none;
	}
}

@media (min-width: 1024px) {
	body.xo-mobile-menu-enabled .xo-site-header__mobile,
	body.xo-mobile-menu-enabled .xo-mobile-menu {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Mobile header row
   -------------------------------------------------------------------------- */

body.xo-mobile-menu-enabled .xo-site-header__mobile {
	align-items: center;
}

/*
 * Groups the theme mode toggle and hamburger button together on the right
 * edge of the mobile header row, keeping the logo pinned left via the
 * row's own justify-content: space-between.
 */
body.xo-mobile-menu-enabled .xo-site-header__mobile-controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10, 0.25rem);
}

/* --------------------------------------------------------------------------
   Overlay: fixed positioning, layering, open/closed state

   Scoped under "html.xo-mobile-menu-js" — added to <html> by a tiny
   *inline, non-deferred* script in <head> (xo_dna_inline_mobile_menu_init(),
   includes/mobile-menu.php), not by assets/js/mobile-menu.js itself.
   assets/js/mobile-menu.js is deferred, so it only runs after the DOM has
   parsed — gating this CSS on something it sets would mean every fresh
   page load briefly paints the overlay in its no-JS fallback state
   (in-flow, visible) before flipping to fixed/hidden a moment later, a
   visible flash most noticeable against other fixed-position page chrome
   (an admin toolbar, a sticky notice). The inline script runs and
   completes before <body> is even parsed, so this rule is already active
   for the very first paint — this is the same technique already used
   for dark mode (see xo_dna_inline_theme_init() in includes/assets.php).

   Without JavaScript at all, <html> never gets the class, so the overlay
   never becomes position:fixed or hidden — its content (backdrop button,
   panel, close button, navigation) simply flows in place, visible and
   reachable (see "Progressive Enhancement and Failure Behavior" in the
   spec this system was built from). Also scoped under
   "body:not(.editor-styles-wrapper)": inside the Site Editor iframe, the
   editor CSS scope wrapper is present, so the fixed/hidden runtime
   treatment is likewise never applied — the overlay renders as normal
   in-canvas content instead of covering or trapping the editor.
   -------------------------------------------------------------------------- */

html.xo-mobile-menu-js body.xo-mobile-menu-enabled:not(.editor-styles-wrapper) .xo-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--xo-mobile-menu-z-index);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	background: var(--xo-mobile-menu-background);
	color: var(--xo-mobile-menu-color);
}

html.xo-mobile-menu-js body.xo-mobile-menu-enabled:not(.editor-styles-wrapper) .xo-mobile-menu.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Backdrop
   Absolutely positioned only once the overlay itself is fixed (see above);
   in the no-JS/editor fallback it stays a plain, unstyled-position button
   ahead of the panel content instead of covering the page.
   -------------------------------------------------------------------------- */

.xo-mobile-menu__backdrop {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--xo-mobile-menu-backdrop);
	cursor: pointer;
}

html.xo-mobile-menu-js body.xo-mobile-menu-enabled:not(.editor-styles-wrapper) .xo-mobile-menu .xo-mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   Panel + content
   Full-screen by default (width: 100%). An off-canvas layout is a child-
   theme opt-in: set --xo-mobile-menu-width and add width/translate rules
   for .xo-mobile-menu__panel — no JavaScript changes required.
   -------------------------------------------------------------------------- */

.xo-mobile-menu__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--xo-mobile-menu-width);
	height: 100%;
	margin-inline: auto;
	background: var(--xo-mobile-menu-background);
	color: var(--xo-mobile-menu-color);
}

.xo-mobile-menu__close {
	align-self: flex-end;
	flex: 0 0 auto;
	margin: 0;
	padding: 0.5rem;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
}

.xo-mobile-menu__content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 1rem;
	padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.xo-mobile-menu__content,
.xo-mobile-menu__content a,
.xo-mobile-menu__content .wp-block-navigation-item__content {
	color: var(--xo-mobile-menu-color);
}

.xo-mobile-menu__content .wp-block-navigation__submenu-container a,
.xo-mobile-menu__content .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--xo-mobile-menu-submenu-color);
}

/* --------------------------------------------------------------------------
   Toggle button (in the mobile header, opens the overlay)
   -------------------------------------------------------------------------- */

.xo-mobile-menu__toggle {
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0.5rem;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Icons
   Lines and the X use stroke, not fill — the button's "color" supplies the
   default inherited icon color. No circle is drawn by default; a child
   theme wanting a circular treatment should style the button itself
   (background + border + border-radius) rather than the icon, and can
   still target .xo-mobile-menu__icon-circle if it replaces the SVG markup
   with one.
   -------------------------------------------------------------------------- */

.xo-mobile-menu__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
}

.xo-mobile-menu__icon-lines,
.xo-mobile-menu__icon-x {
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* --------------------------------------------------------------------------
   Focus visibility
   -------------------------------------------------------------------------- */

.xo-mobile-menu__toggle:focus-visible,
.xo-mobile-menu__close:focus-visible {
	outline: none;
}

/* --------------------------------------------------------------------------
   Body scroll lock support
   assets/js/mobile-menu.js sets body.style.position/top/width directly
   (see spec); this class only exists as a documented hook for anything a
   child theme wants to key off "the menu is currently open" elsewhere on
   the page (e.g. dimming other fixed UI).
   -------------------------------------------------------------------------- */

body.xo-mobile-menu-open {
	overflow: hidden;
}


/* Desktop by default */
.xo-site-header__mobile {
	display: none;
}

/* Mobile/tablet */
@media (max-width: 1023px) {

	.xo-site-header__desktop {
		display: none !important;
	}

	.xo-site-header__mobile {
		display: block;
	}

	/*
	 * WordPress Block Visibility considers desktop to begin
	 * above its 782px breakpoint. XO DNA extends the mobile
	 * navigation layout through 1023px.
	 */
	.wp-block-hidden-desktop {
		display: revert !important;
	}

}
/* ==========================================================================
   Mobile Navigation Accordion
   Presents nested Navigation block submenus, inside the XO DNA mobile menu
   overlay, as collapsed accordion sections instead of core's default
   hover/click dropdown flyout treatment, disclosed via a plus/minus
   ("[+]" / "[−]") text toggle rather than a chevron or arrow icon.

   Scope: gated behind "body.xo-mobile-nav-accordion", added by
   includes/mobile-nav-accordion.php only when the "xo_dna_mobile_nav_accordion"
   filter returns true (the default). Disabling that filter removes the
   class and skips the PHP markup rewrite that adds ".xo-mobile-submenu__toggle"
   and the symbol spans in the first place, so every rule below fails to
   match — nothing here needs undoing.

   Targets the independently-selected mobile Navigation block placed inside
   "Mobile Menu Content" (patterns/header.php), configured with
   "overlayMenu":"never" — the overlay itself is XO's own .xo-mobile-menu
   component, not core's, see assets/css/src/mobile-menu.css and
   _docs/mobile-menu-system.md — and "openSubmenusOnClick":true, so core
   never wires hover-triggered submenu visibility for this instance in the
   first place. State is still driven entirely by WordPress's own
   aria-expanded attribute on the core-rendered
   ".wp-block-navigation-submenu__toggle" button (XO DNA only adds a class
   and the two symbol spans to that same button server-side — see
   xo_dna_rewrite_mobile_submenu_toggle_tag() — no XO DNA JavaScript is
   involved in the toggling itself; assets/js/mobile-nav-accordion.js only
   keeps the accessible label's Expand/Collapse wording in sync).

   Scoped under "#xo-mobile-menu" (an ID, not ".xo-mobile-menu") — core's
   own non-overlay submenu positioning rule also carries "!important" at a
   specificity this project's !important-vs-!important rules couldn't
   otherwise beat without an ever-deeper selector chain; the overlay's own
   id (see patterns/header.php's "anchor" attribute) already exists for
   exactly this element, so reusing it here is simpler than one.

   Parent-theme styling stops at structure, resets, and the symbol itself:
   no borders, backgrounds, shadows, dividers, indentation, typography, or
   spacing beyond what's required for the collapse mechanism to work.
   Child themes own all visual submenu styling — see
   ".xo-mobile-submenu__toggle" / ".xo-mobile-submenu__symbol" below, which
   deliberately carry no !important so a later-loaded child stylesheet can
   restyle or replace them outright.
   ========================================================================== */

@media (max-width: 782px) {

	/* Label and toggle side-by-side; submenu spans the full row beneath. */
	body.xo-mobile-nav-accordion
		#xo-mobile-menu
		.wp-block-navigation-item.has-child {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	body.xo-mobile-nav-accordion
		#xo-mobile-menu
		.wp-block-navigation-item.has-child
		> .wp-block-navigation__submenu-container {
		grid-column: 1 / -1;
		width: 100%;
	}

	/*
	 * Collapsed by default, in-flow rather than an absolutely-positioned
	 * flyout — this overrides core's own non-overlay submenu presentation
	 * (built for desktop hover/click dropdowns) with a mobile accordion.
	 * border/background/box-shadow are explicit resets of whatever core's
	 * positioned-dropdown treatment would otherwise apply, not added
	 * decoration — the parent theme still draws none of its own.
	 */
	body.xo-mobile-nav-accordion
		#xo-mobile-menu
		.has-child
		.wp-block-navigation__submenu-container {
		position: static !important;
		opacity: 0 !important;
		visibility: hidden !important;
		height: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		background: none !important;
		box-shadow: none !important;
		min-width: 0 !important;
	}

	/* Expanded state: read directly off WordPress's own toggle state. */
	body.xo-mobile-nav-accordion
		#xo-mobile-menu
		.has-child
		.wp-block-navigation-submenu__toggle[aria-expanded="true"]
		~ .wp-block-navigation__submenu-container {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: auto !important;
		overflow: visible !important;
	}

	/*
	 * Core's own submenu-disclosure icon (a chevron/arrow SVG, rendered as
	 * a sibling of the toggle button — see includes/mobile-nav-accordion.php)
	 * is replaced by the [+]/[−] text symbols below, not merely restyled.
	 */
	body.xo-mobile-nav-accordion
		#xo-mobile-menu
		.wp-block-navigation__submenu-icon {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Plus/minus symbol toggle
   Stable, low-specificity, !important-free selectors — a child theme can
   restyle, hide, or visually replace the symbols with later-loaded CSS
   alone. State is read directly off aria-expanded; no XO DNA JavaScript
   inserts, removes, or rewrites the symbol text (see
   assets/js/mobile-nav-accordion.js, which only manages the accessible
   label).
   -------------------------------------------------------------------------- */

.xo-mobile-submenu__symbol--expanded {
	display: none;
}

.xo-mobile-submenu__toggle[aria-expanded="true"]
	.xo-mobile-submenu__symbol--collapsed {
	display: none;
}

.xo-mobile-submenu__toggle[aria-expanded="true"]
	.xo-mobile-submenu__symbol--expanded {
	display: inline;
}

/* Accessibility */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	background: var(--color-white);
	color: var(--color-black);
	clip: auto;
}

/**
 * Deprecated compatibility aliases.
 *
 * Older markup and patterns may still reference these variable names.
 * New work should use the semantic tokens in tokens.css directly.
 * Remove these aliases once no remaining usage is found.
 */

:root,
html[data-xo-theme="light"] {
	--color-primary: var(--color-brand-primary);
	--color-primary-dark: var(--color-brand-primary);
	--color-muted: var(--color-text-muted);
	--color-background-light: var(--color-surface);
}

html[data-xo-theme="dark"] {
	--color-primary: var(--color-link);
	--color-primary-dark: var(--color-link);
	--color-muted: var(--color-text-muted);
	--color-background-light: var(--color-surface);
}

/**
 * XO DNA front page structure.
 *
 * No front-page-specific styles yet — add component styling here as the
 * front-page template grows.
 */

/*# sourceMappingURL=main.css.map */