/* cdob-nav.css v0.11.0 | 2026-08-07 | Generated by Claude, session CDOB-S26
   v0.11.0 (CDOB-S26, owner-directed): the header row stops wrapping. Two
   declarations changed and one rule added, all on the header row; no colour,
   no token, no other component. The CUT-S2 logo swap put a 5.5042:1 mark in
   a slot fitted to a 4.6875:1 one, so the 80px height rendered 440.36px
   against a 396.30px budget and the row wrapped at every width (measured
   live BEFORE: 132px row at 1280, 96px at 900, 96px at 320). The row is now
   nowrap with the nav pinned at flex 0 0 auto, so the LOGO absorbs any
   deficit and the menu can no longer be pushed to a second line. Rationale
   and the after-measurements are at the rule.
   (v0.10.0 2026-08-06 CDOB-CUT-S1; v0.9.0 2026-08-05 CDOB-S24; v0.8.0 2026-08-05 CDOB-S24; v0.7.0 2026-08-04 CDOB-S23; v0.6.0 2026-08-01 CDOB-M11; v0.5.0 2026-07-09 CDOB-S14; v0.4.0 2026-07-03 CDOB-S10; v0.3.1 2026-07-03 CDOB-S9; v0.3.0 2026-07-03 CDOB-S8; v0.2.0 2026-07-01 CDOB-S5)
   v0.10.0 (CDOB-CUT-S1, owner-directed button pass):
   - .cdob-utility gains 4px top padding (the owner's slight gap between
     the button line and the top edge of the page; bar 44 -> 48px).
   - The ACTION cluster's gaps tighten to 8px and centre their items via
     .cdob-utility__list.cdob-utility__account (compounded: a bare
     .cdob-utility__account would TIE the base list rule at (0,1,0) and
     leave the winner to print order; lesson 272 shape). align-items:
     center is load-bearing: the 32px buttons share the row with the 44px
     cart and links, and the default stretch would top-bias them (php
     review CUT-S1 c1; verified in-DOM, centre offset 0). Standing links
     keep the bar's 20px rhythm.
   - The action buttons drop to a 32px min-height on fine pointers (the
     bar's 44px LINK floor is untouched; the override lives inside the
     button rule itself; 32px clears the WCAG 2.5.8 AA 24px floor, the
     .cdob-social__link compact precedent) and restore var(--cdob-tap-min)
     on coarse pointers.
   - Be a Supporter takes the FLAME fill again, as
     .cdob-utility-btn.cdob-utility-btn--flame (COMPOUNDED with the base
     button class: a bare modifier selector would tie the outline rules
     and win only by source order; lesson 272). Pair: flame fill on ink
     4.69:1 UI, ink text on flame 4.69:1, both in the verified set below.
     NEW Donate button beside it keeps the OUTLINE body so the two
     /support/ doors read as primary + secondary; no new colour pair.
     v0.9.0's one-flame-treatment rule is RETIRED by owner direction: the
     chrome now carries the flame on both the nav store button and this
     CTA. Republishing drafted nav item 1351 now renders an OUTLINE nav
     button against a flame bar CTA (three support doors total); the
     republish trap below still applies and got one door worse.
   - Drawer: the supporter CTA flips to the same flame pair (fill on paper
     3.51:1 UI-only, ink text 4.69:1, the drawer store-button precedent);
     NEW .cdob-nav__donate carries the outline body the supporter CTA had.
   - WIDTH, measured live in-DOM at 1280 logged out (lesson 273 harness,
     not estimated): cluster 948.53px before, 998.98px with the pass
     applied (+50.45px: Donate ~78px minus 28px recovered from the three
     pre-existing gaps at 20 -> 8; the fourth 8px gap is Donate's own).
     One row at 1280 with ~41px slack; content is 1040 down to ~1080px
     viewport, so the one-row floor sits near ~1039px and the
     owner-accepted two-row wrap band widens to roughly 900-1039px.
   v0.9.0 (CDOB-S24 tweak round, owner-directed): button colours FLIPPED and
   the cart RETURNS to the top bar.
   - The nav's Cascadia Store button takes the FLAME treatment (fill
     --cdob-flame, ink text, the exact rule body the --support item carried
     before v0.8.0); the top bar's Be a Supporter CTA takes the OUTLINE
     treatment shared with Log in / Sign up. The .cdob-utility-btn--flame
     rules are REMOVED with their only consumer; the drafted --support nav
     item's rules become the outline body, so a republish now renders it
     consistent with the top-bar CTA (the width + duplicate-CTA republish
     trap below still applies).
   - The v0.8.0 main-nav cart block is REMOVED (functions.php v0.30.0
     removes the menu filter); the cart renders on the utility bar again
     (WOO-S16 position, right of Be a Supporter) AND in the drawer's action
     list, so the S23 mobile-cart fix survives the move. Cart internals are
     now one context-free block near the bottom of this file.
   - Freed nav width spent owner-directed: 24px separation before Cascadia
     Store and the logo 66 -> 80px (css/cdob-core.css v0.5.5). NEW WIDTH
     BUDGET, measured live at 1280: nav end-state 627.70px, logo 375px,
     gap 8, content 1032 => 21.3px slack; the nav no longer carries
     variable-width content (the cart left), so font fallback is the only
     stress and 21.3px covers it. Top bar with the cart: right cluster
     959.03px vs 1040 content, one row at 1280 and down to ~1000px
     viewport; in the 900-999px band the account cluster wraps to a second
     right-aligned row (flex-wrap, graceful), flagged for owner eyeball.
   - CORRECTION to v0.8.0's ledger: its "nav list gap 2 -> 0" lever was
     INERT. cdob-core's `.cdob-nav ul` (0,1,1) owns the desktop nav gap at
     8px and beat this file's (0,1,0) declaration in both its 2px and 0
     states, so every measured figure (v0.8.0's and this round's) already
     includes the real 8px gaps. The dead declaration is now REMOVED at the
     rule, with the mechanism named there. Lesson 272's shape, caught by
     review inside the session that wrote the lesson.
   - Contrast: NO new pair anywhere; every combination below was in this
     file's verified set before this bump (flame/ink 4.69 both ways, paper
     on ink 16.48, ghost border 5.86, navy on paper 10.40, flame fill vs
     paper 3.51 UI-only).
   v0.8.0 (CDOB-S24, owner-directed): the utility bar goes RIGHT-clustered and
   the cart moves into the MAIN NAV.
   - NEW .cdob-utility__right groups the three standing links, a vertical
     divider, and the action cluster on the bar's right edge (header.php
     v0.10.0); the left side now holds only the (drafted, therefore empty)
     network menu location.
   - NEW .cdob-utility-btn outline treatment for Log in / Sign up (paper text
     16.48:1 and ghost border 5.86:1 on ink, both existing verified pairs) and
     .cdob-utility-btn--flame for the Be a Supporter CTA relocated from the
     main nav (flame fill vs ink bar 4.69:1 UI; ink text on flame 4.69:1).
     All four pairs re-derived by sRGB linearization this session, not
     carried from comments.
   - WIDTH BUDGET, measured live at 1280 (not estimated): the S24 menu set
     (About / Cascadia / Bioregionalism / Get Involved / Cascadia Store /
     cart) is 697.48px at a 2-digit cart count against 714.63px available,
     17.14px slack, one row; the 3-digit stress case holds at 6.64px. Paid
     for by: header-row gap 16 -> 8 (see the header-row rule), nav list gap
     2 -> 0, store button padding/margin -2px each, cart flush right. The
     supporter button's removal reclaimed ~150px; "Cascadia Store" and the
     cart together added ~170px.
   - The li.cdob-nav-btn--support rules are KEPT with zero live consumers:
     menu item 1351 is DRAFTED, not deleted, and republishing it restores the
     old nav button with no code change (M11 drafted-data precedent).
   - The utility-bar cart block is REMOVED and replaced by the main-nav cart
     block at the bottom of this file: the cart <li> is appended to the
     cdob-main menu by cdob_starter_nav_cart_item() (functions.php v0.29.0),
     so it renders right of the Cascadia Store button on desktop AND inside
     the mobile drawer list, which closes the mobile-cart gap CDOB-S23
     escalated (the utility bar is hidden below 900px).
   - Mobile: NEW .cdob-nav__supporter flame CTA in the drawer's action list,
     because the utility bar carrying the desktop CTA does not render there.
   v0.7.0 (CDOB-S23): NO rule bodies changed. This bump is a COMMENT TRUTH
   pass plus one dead-rule removal, because header.php v0.9.0 restructured the
   utility bar and left several statements in this file describing a layout
   that no longer exists (lesson 213). What is true now: the bar carries the
   three standing links on the LEFT (Use the Flag, Find an Approved Reseller,
   Get 501(c)(3) Sponsorship) and Log in / Sign up plus the cart on the RIGHT.
   The four social icons are gone from this bar; the account menu moved to the
   steward bar. The .cdob-social rules stay here and are still load-bearing,
   for the mobile drawer and for the general right rail (css/cdob-rail.css).
   .cdob-utility__list:empty is likewise still load-bearing: the utility MENU
   location is still assigned with both items drafted.
   v0.6.0 (CDOB-M11): the <=899px utility-bar rule now hides the WHOLE
   .cdob-utility bar instead of just its social + account halves. The network
   links that were the bar's only remaining mobile content moved to the footer
   network bar (footer.php v0.4.0 .cdob-netbar), so an empty strip would have
   rendered otherwise. Also NEW: .cdob-utility__list:empty is display:none,
   because the utility MENU location stays assigned while its two items are
   drafted, and wp_nav_menu then emits an empty <ul> that would contribute a
   stray flex gap. No color or token changes.
   Utility bar + main navigation for cdob-starter-theme.
   All colors reference the cdob token layer (cdob-core.css). Verified pairs
   (sRGB-linearized): paper on ink 16.48 | on-dark-soft on ink 10.26 |
   navy on paper 10.40 | ink on flame 4.69 | flame on ink 4.69 |
   flame on paper 3.51 (UI/graphic 3:1 only, never normal text) |
   ghost border 0.55 on ink 5.86.
   Focus outlines come from cdob-core (:focus-visible; flame on dark contexts,
   navy on light contexts).

   v0.5.0 (CDOB-S14, full mobile-menu pass): below 900px the primary nav is an
   off-canvas drawer on a PAPER surface (RC pattern, rebranded to CDOB tokens).
   - .cdob-nav-toggle is a CSS-drawn hamburger (3 bars -> X; flame bars when open).
   - .cdob-nav becomes position:fixed, slides in via transform, paper bg, flame
     top accent, scrim (.cdob-nav-backdrop). Because the drawer is a light
     surface, every dark-context nav color (paper links, paper store border,
     paper chevron) is flipped to navy/ink inside the mobile block.
   - Submenus are collapsed by default on mobile and open via the injected
     .cdob-subnav-toggle accordion (single-open, JS-driven); the hover/
     :focus-within reveal is scoped to >=900px so touch has no phantom reveal.
   - .cdob-nav__head (close button) + .cdob-nav__extra (account links + social
     row) render inside the drawer; the top utility bar slims to the network
     link on mobile (socials + account move into the drawer).
   - Admin-bar top offset for the fixed drawer; prefers-reduced-motion honored.
   - Drawer focus rings re-asserted to navy (10.40:1 on paper); the drawer is
     inside .cdob-header, whose cdob-core flame :focus-visible override is only
     3.51:1 on the paper surface. Scoped to the mobile block so the desktop
     ink-header nav keeps flame.
   v0.4.0 (CDOB-S10): utility bar left cluster + square single-color social row.
   v0.3.0/0.3.1 (CDOB-S8/S9): 44px tap floors; desktop submenu disclosure
     buttons; single-line header compaction. */

.cdob-utility {
  background: var(--cdob-ink);
  font-size: var(--fs-400);
  padding-top: 4px; /* owner: slight gap between the button line and the top edge (CUT-S1) */
}
.cdob-utility__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 20px;
}
.cdob-utility__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}
.cdob-utility__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cdob-tap-min); /* tap floor; bar height comes from links */
  color: var(--cdob-on-dark-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cdob-utility__list a:hover {
  color: var(--cdob-paper);
}

/* Utility bar (header.php v0.10.0): the LEFT side holds only the (drafted,
   therefore empty) network menu location, kept so republishing an item
   restores it in place; everything visible lives in the RIGHT cluster. */
/* An assigned menu location with zero published items emits an empty <ul>;
   without this it still occupies a flex slot and adds a stray gap (M11). */
.cdob-utility__list:empty { display: none; }

.cdob-utility__left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Right cluster: standing links | divider | Log in / Sign up / Be a
   Supporter / Donate / cart. margin-left:auto keeps the cluster pinned
   right even if the left div ever renders empty of flex content. */
.cdob-utility__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Tighter spacing between the action buttons only (owner, CUT-S1); the
   standing links keep the bar's 20px rhythm. Compounded so it beats the
   base .cdob-utility__list gap instead of tying it (lesson 272 shape).
   align-items centres the 32px buttons against the 44px cart + link row
   (default stretch top-biases them; php review CUT-S1 c1, verified
   in-DOM centre offset 0). */
.cdob-utility__list.cdob-utility__account {
  gap: 8px;
  align-items: center;
}

/* The owner's "|" between the standing links and the action buttons.
   Decorative (aria-hidden in markup), so no text floor applies; the ghost
   border value still measures 5.86:1 on ink. */
.cdob-utility__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: var(--cdob-ui-border-dark-strong);
}

/* Log in / Sign up / Donate as OUTLINE buttons; Be a Supporter as the
   FLAME fill (compounded rules below): TWO deliberate treatments since the
   CUT-S1 button pass (v0.9.0's one-treatment rule retired, owner-directed).
   They ride the bar's anchor rule for display and font size (--fs-400);
   the bar's 44px LINK floor is overridden to 32px on fine pointers INSIDE
   this rule and restored for coarse pointers below. Outline buttons drop
   the bar's standing underline (the 2px border carries the affordance,
   matching the sitewide .cdob-btn pattern) and restore it on hover and
   keyboard focus. Colours: paper on ink 16.48:1 text, ghost border 5.86:1
   UI, both from this file's verified set. */
.cdob-utility__list a.cdob-utility-btn {
  border: 2px solid var(--cdob-ui-border-dark-strong);
  border-radius: 4px;
  padding: 0 12px;
  color: var(--cdob-paper);
  font-weight: 600;
  text-decoration: none;
  /* Shorter than the bar's 44px link floor (owner, CUT-S1). Fine-pointer
     compact, clears the WCAG 2.5.8 AA 24px floor (.cdob-social__link
     precedent); coarse pointers restore the full floor below. Wins the
     inherited floor at (0,2,1) over the bar anchor's (0,1,1). */
  min-height: 32px;
}
.cdob-utility__list a.cdob-utility-btn:hover,
.cdob-utility__list a.cdob-utility-btn:focus-visible {
  color: var(--cdob-paper);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (pointer: coarse) {
  .cdob-utility__list a.cdob-utility-btn {
    min-height: var(--cdob-tap-min);
  }
}

/* Be a Supporter's flame fill (owner, CUT-S1): the nav store button's exact
   pair, flame fill on the ink bar 4.69:1 UI, ink text on flame 4.69:1, both
   in this file's verified set. The Donate button beside it deliberately
   keeps the outline body: two doors to /support/, primary + secondary.
   COMPOUNDED with the base button class: a bare --flame selector would TIE
   the outline rules at (0,2,1)/(0,3,1) and hold ink text only by source
   order, and a reorder would silently regress this donation-flow button to
   paper-on-flame 3.51:1 (both reviews, CUT-S1; lesson 272). As written the
   base is (0,3,1) and the hover (0,4,1), true wins. */
.cdob-utility__list a.cdob-utility-btn.cdob-utility-btn--flame {
  background: var(--cdob-flame);
  border-color: var(--cdob-flame);
  color: var(--cdob-ink);
}
.cdob-utility__list a.cdob-utility-btn.cdob-utility-btn--flame:hover,
.cdob-utility__list a.cdob-utility-btn.cdob-utility-btn--flame:focus-visible {
  color: var(--cdob-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Square, single-color social icons (shared partial template-parts/social-links.php).
   The base on-dark-soft colour was written for the ink utility bar, which no
   longer renders this row (CDOB-S23). It is KEPT as the dark-context default
   because the partial is context-agnostic by design and the next dark caller
   should inherit a correct colour; both live callers override it for their
   own light surface: the mobile drawer at .cdob-nav__social in the mobile
   block below, and the general right rail at .cdob-rail__connect in
   css/cdob-rail.css. */
.cdob-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.cdob-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px; /* fine-pointer compact; > WCAG 2.5.8 AA 24px. Coarse -> 44px below. */
  min-height: var(--cdob-tap-min); /* matches the bar height set by text links */
  color: var(--cdob-on-dark-soft);
}
.cdob-social__link:hover {
  color: var(--cdob-paper);
}
.cdob-social__icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Touch pointers get the full 44px square hit area (WCAG 2.5.5). */
@media (pointer: coarse) {
  .cdob-social__link {
    min-width: var(--cdob-tap-min);
  }
}

/* Header row (CDOB-S24). The selector carries THREE parts deliberately:
   cdob-core's `.cdob-header .cdob-wrap` (0,2,0) sets gap:16px on this same
   element and had been silently beating this rule's previous (0,1,0)
   selector and its gap:24px since S19; (0,3,0) wins by true specificity,
   not load order. gap is 8px because it is the logo-to-nav MINIMUM
   separation (space-between distributes the rest).
   CDOB-S26 MADE THIS ROW SELF-LIMITING. Through S24 it was balanced by hand:
   nav 627.70px + 8px gap + a 375px logo inside a 1032px content column, 21.3px
   of slack. That made the row depend on two things it does not own, the menu's
   contents and the logo asset's aspect ratio, and it broke the first time one
   moved. CUT-S2 swapped in attachment 4342 at 5.5042:1, which is 440.36px at
   the same 80px height, 44.06px over budget, and the row wrapped at 1280, at
   900 and at 320. The fix is structural rather than another fitted number: the
   row is NOWRAP, the nav is rigid (rule below), and the logo yields through
   min-width:0 + max-width + object-fit in css/cdob-core.css. A wider mark or a
   longer menu now costs logo width, never a second row.
   Measured live AFTER (lesson 273 in-DOM harness, not estimated; fresh load
   at each viewport): 80px row at 1280 with the logo box at 396.30, 44px row
   at 900 with the box at 201.11, 44px row at 320 with the box at 220.
   Nav 627.70px and one line at every one of them. */
.cdob-header .cdob-wrap.cdob-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

/* The MENU is the rigid item in that row (CDOB-S26). Without this the nav
   keeps the default flex-shrink:1, and because .cdob-nav__list is itself
   flex-wrap:wrap it would absorb the squeeze by silently breaking the menu
   onto two lines, which is the exact failure being prevented. Below 900px
   .cdob-nav is position:fixed (the off-canvas drawer) and is not a flex item
   at all, so this declaration is desktop-only in effect. */
.cdob-header__inner > .cdob-nav {
  flex: 0 0 auto;
}

/* Hamburger toggle (hidden until <=899px). CSS-drawn 3-bar icon that morphs
   to an X when aria-expanded="true" (bars turn flame as an "open" cue). */
.cdob-nav-toggle {
  display: none;
  background: transparent;
  border: 2px solid var(--cdob-ui-border-dark-strong);
  min-height: var(--cdob-tap-min);
  min-width: var(--cdob-tap-min);
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
}
.cdob-nav-toggle__bars {
  display: block;
  position: relative;
  width: 22px;
  height: 16px;
  margin: 0 auto;
}
.cdob-nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--cdob-paper); /* on the ink header */
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease, background 0.3s ease;
}
.cdob-nav-toggle__bars span:nth-child(1) { top: 0; }
.cdob-nav-toggle__bars span:nth-child(2) { top: 7px; }
.cdob-nav-toggle__bars span:nth-child(3) { top: 14px; }
.cdob-nav-toggle[aria-expanded="true"] .cdob-nav-toggle__bars span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.cdob-nav-toggle[aria-expanded="true"] .cdob-nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.cdob-nav-toggle[aria-expanded="true"] .cdob-nav-toggle__bars span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}
.cdob-nav-toggle[aria-expanded="true"] .cdob-nav-toggle__bars span {
  background: var(--cdob-flame); /* 4.69:1 on ink */
}

/* Drawer-only chrome: hidden on desktop, shown inside the mobile block. */
.cdob-nav__head,
.cdob-nav__extra {
  display: none;
}

.cdob-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* NO gap declared here, deliberately (tweak-round review): cdob-core's
     `.cdob-nav ul` (0,1,1) sets gap:8px and outweighs this (0,1,0)
     selector, so the 2px this rule carried for versions, and the 0 that
     v0.8.0 "reclaimed", were BOTH dead declarations; 8px is what the
     desktop row has always run and what every measured width figure in
     this file already includes. The drawer override below wins its own
     fight explicitly (`.cdob-nav .cdob-nav__list`, 0,2,0). Lesson 272. */
  align-items: center;
}
.cdob-nav__list > li {
  position: relative;
}
.cdob-nav__list > li.menu-item-has-children {
  display: flex;
  align-items: center;
}
.cdob-nav__list a {
  display: flex;
  align-items: center;
  min-height: var(--cdob-tap-min); /* WCAG 2.5.5 tap floor */
  color: var(--cdob-paper);
  text-decoration: none;
  font-size: var(--fs-400);
  font-weight: 600;
  padding: 10px 10px;
}
.cdob-nav__list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--cdob-paper);
}

/* Submenu disclosure button (injected by cdob-nav.js). Caret triangle uses
   paper on the ink header (decorative); state is exposed via aria-expanded. */
.cdob-subnav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px; /* fine-pointer compact; WCAG 2.5.8 AA >=24px. Coarse override below. */
  min-height: var(--cdob-tap-min);
  margin-left: -10px; /* overlaps the parent link's right padding; link target stays >=47px wide */
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.cdob-subnav-toggle::before {
  content: "";
  display: block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--cdob-paper);
  transition: transform 0.15s ease;
}
.cdob-subnav-toggle[aria-expanded="true"]::before {
  transform: rotate(180deg);
}

@media (pointer: coarse) {
  .cdob-subnav-toggle {
    min-width: var(--cdob-tap-min);
    margin-left: -14px;
  }
}

/* Second level: light dropdown panel (desktop). */
.cdob-nav__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--cdob-paper);
  border: 1px solid var(--cdob-ui-border);
  border-top: 3px solid var(--cdob-navy);
  z-index: 40;
}
/* Desktop reveal: hover or keyboard focus. On mobile only the disclosure
   button (.is-sub-open) opens a submenu, so touch has no phantom reveal. */
@media (min-width: 900px) {
  .cdob-nav__list > li:hover > .sub-menu,
  .cdob-nav__list > li:focus-within > .sub-menu {
    display: block;
  }
}
.cdob-nav__list > li.is-sub-open > .sub-menu {
  display: block;
}
.cdob-nav__list .sub-menu a {
  display: flex;
  align-items: center;
  min-height: var(--cdob-tap-min); /* tap floor */
  color: var(--cdob-navy);
  font-weight: 400;
  padding: 8px 16px;
}
.cdob-nav__list .sub-menu a:hover {
  color: var(--cdob-navy);
  background: rgba(var(--cdob-navy-rgb), 0.08);
}

/* STORE and SUPPORT nav buttons (menu items carry these classes). Tweak
   round: the treatments SWAPPED. --store (live, "Cascadia Store") is now
   the FLAME button: fill + ink text 4.69:1, with a 24px owner-directed
   separation from Get Involved, and its own (0,3,2) hover keeping ink text
   because the nav's base (0,2,1) hover would put paper on the flame fill
   (3.51:1, a normal-text fail).
   --support (menu item 1351, DRAFTED since S24) is now the OUTLINE body,
   kept with zero live consumers so a republish restores a button
   consistent with the top bar's outline CTA.
   KNOW BEFORE REPUBLISHING 1351: (1) a Save from Appearance > Menus
   republishes drafted items, so the site would carry TWO supporter CTAs
   (nav + utility bar, and both in the drawer) until one is removed;
   (2) the restored item spends ~140px of the 21.3px tweak-round slack, so
   the header wraps at 1280 until the logo or the menu gives it back. */
.cdob-nav__list li.cdob-nav-btn--store > a {
  background: var(--cdob-flame);
  color: var(--cdob-ink);
  padding: 10px 14px;
  margin-left: 24px; /* owner-directed separation from Get Involved */
}
.cdob-nav__list li.cdob-nav-btn--store > a:hover {
  color: var(--cdob-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cdob-nav__list li.cdob-nav-btn--support > a {
  border: 2px solid var(--cdob-ui-border-dark-strong);
  color: var(--cdob-paper);
  padding: 8px 10px;
  margin-left: 2px;
}

.cdob-nav__member {
  border-top: 1px solid var(--cdob-ui-border-dark);
  margin-top: 6px;
  padding-top: 6px;
}

/* ==========================================================================
   Mobile off-canvas drawer (<=899px)
   ========================================================================== */
@media (max-width: 899px) {
  .cdob-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The panel: fixed, slides in from the left, paper surface. */
  .cdob-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--cdob-paper);
    border-top: 4px solid var(--cdob-flame); /* brand accent */
    box-shadow: 4px 0 32px rgba(var(--cdob-ink-rgb), 0.24);
    z-index: 10002;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 24px;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .cdob-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease;
  }

  /* Focus rings inside the PAPER drawer must be navy (10.40:1). The drawer is
     a DOM descendant of .cdob-header, whose cdob-core :focus-visible override
     is flame (correct for the ink header, but only 3.51:1 on paper). Re-assert
     navy here; the media scope keeps the desktop ink-header nav on flame
     (navy would be 1.59:1 there). The hamburger toggle sits outside .cdob-nav
     on the ink header, so it keeps the flame ring. */
  .cdob-nav :focus-visible {
    outline-color: var(--cdob-navy);
  }

  /* Drawer head: title + close (X) button. */
  .cdob-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px 10px 20px;
    border-bottom: 1px solid var(--cdob-ui-border);
  }
  .cdob-nav__head-title {
    font-family: var(--cdob-ff-serif);
    font-size: var(--fs-500);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cdob-navy);
  }
  .cdob-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cdob-tap-min);
    min-height: var(--cdob-tap-min);
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--fs-600);
    line-height: 1;
    color: var(--cdob-navy);
    cursor: pointer;
  }
  .cdob-nav-close:hover {
    color: var(--cdob-flame);
  }

  /* List stacks full-width. Higher-specificity selector to beat cdob-core's
     .cdob-nav ul (0,1,1) so the column layout + zero gap actually apply. */
  .cdob-nav .cdob-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0;
  }
  .cdob-nav__list > li {
    position: static;
    border-bottom: 1px solid rgba(var(--cdob-ink-rgb), 0.06);
  }
  .cdob-nav__list > li.menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .cdob-nav__list > li > a {
    flex: 1 1 auto;
    color: var(--cdob-navy);
    font-size: var(--fs-500);
    padding: 12px 20px;
  }
  .cdob-nav__list a:hover {
    text-decoration: none;
    color: var(--cdob-navy);
    background: rgba(var(--cdob-navy-rgb), 0.06);
  }

  /* Disclosure button: full-height chevron pinned to the row's right edge. */
  .cdob-subnav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: var(--cdob-tap-min);
    height: var(--cdob-tap-min);
    margin-left: 0;
  }
  .cdob-subnav-toggle::before {
    border-top-color: var(--cdob-navy); /* dark chevron on paper */
  }
  .cdob-subnav-toggle[aria-expanded="true"]::before {
    border-top-color: var(--cdob-flame); /* flame active marker */
  }

  /* Submenu: collapsed by default (base .sub-menu display:none), shown as a
     static accordion panel via .is-sub-open. */
  .cdob-nav__list .sub-menu {
    flex-basis: 100%;
    position: static;
    border: 0;
    border-left: 3px solid var(--cdob-navy);
    background: rgba(var(--cdob-navy-rgb), 0.04);
    margin: 0 0 6px 20px;
    padding: 2px 0;
  }
  .cdob-nav__list > li.is-sub-open {
    background: rgba(var(--cdob-flame-rgb), 0.05); /* subtle flame on the open row */
  }
  .cdob-nav__list > li.is-sub-open > .sub-menu {
    border-left-color: var(--cdob-flame); /* flame accent on the open panel */
  }
  .cdob-nav__list .sub-menu a {
    padding: 10px 16px;
  }

  /* Store (and the drafted Support item, kept per the note above):
     full-width, centered. The flame store button needs no flip on paper
     (fill vs paper 3.51:1 UI, ink text 4.69:1, the exact pair the old
     mobile support button shipped with); the outline --support body flips
     border/text to navy for the paper surface, as the outline store button
     did before the swap. (The cart no longer rides this list; it lives in
     the action list below.) */
  .cdob-nav__list li.cdob-nav-btn--support,
  .cdob-nav__list li.cdob-nav-btn--store {
    border-bottom: 0;
  }
  .cdob-nav__list li.cdob-nav-btn--support > a,
  .cdob-nav__list li.cdob-nav-btn--store > a {
    margin: 10px 20px 0;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
  }
  .cdob-nav__list li.cdob-nav-btn--support > a {
    border-color: var(--cdob-navy);
    color: var(--cdob-navy);
  }

  /* Folded extras: account links + social row. */
  .cdob-nav__extra {
    display: block;
    margin-top: 14px;
    padding: 16px 20px 0;
    border-top: 1px solid var(--cdob-ui-border);
  }
  .cdob-nav__actions {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cdob-nav__actions a {
    display: flex;
    align-items: center;
    min-height: var(--cdob-tap-min);
    color: var(--cdob-navy);
    font-weight: 600;
    text-decoration: none;
  }
  .cdob-nav__actions a:hover {
    color: var(--cdob-flame);
  }

  /* Be a Supporter CTA in the drawer's action list: the utility bar that
     carries this button on desktop is hidden below 900px, so the drawer
     keeps the CTA reachable. CUT-S1 (owner-directed): FLAME fill on the
     paper drawer, the drawer store-button precedent (fill vs paper 3.51:1
     UI-only, ink text 4.69:1); the (0,3,1) hover keeps ink and beats the
     action list's (0,2,1) flame-text hover, whose 3.51:1 would fail
     normal text. Donate below carries the outline body this CTA had. */
  .cdob-nav__actions a.cdob-nav__supporter {
    justify-content: center;
    text-align: center;
    background: var(--cdob-flame);
    border: 2px solid var(--cdob-flame);
    color: var(--cdob-ink);
    border-radius: 4px;
    padding: 8px 14px;
    margin-top: 4px;
  }
  .cdob-nav__actions a.cdob-nav__supporter:hover {
    color: var(--cdob-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Donate in the drawer (CUT-S1): the outline-on-paper body the supporter
     CTA carried before this pass (navy border + text 10.40:1); same
     (0,3,1) hover protection against the action list's flame hover. */
  .cdob-nav__actions a.cdob-nav__donate {
    justify-content: center;
    text-align: center;
    border: 2px solid var(--cdob-navy);
    color: var(--cdob-navy);
    border-radius: 4px;
    padding: 8px 14px;
    margin-top: 4px;
  }
  .cdob-nav__actions a.cdob-nav__donate:hover {
    color: var(--cdob-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* The drawer cart (tweak round) gets the same protection: the action
     list's (0,2,1) flame-text hover is 3.51:1 on paper, a normal-text
     fail, so the cart's visible label + count hold navy on hover exactly
     as the supporter CTA above does. The OTHER action links' flame hover
     is S14-era, pre-existing, and flagged to the A11Y track rather than
     changed here. */
  .cdob-nav__actions a.cdob-cart:hover {
    color: var(--cdob-navy);
  }
  .cdob-nav__social .cdob-social {
    gap: 6px;
  }
  .cdob-nav__social .cdob-social__link {
    color: var(--cdob-navy); /* 10.40:1 on paper */
  }
  .cdob-nav__social .cdob-social__link:hover {
    color: var(--cdob-flame); /* UI/graphic 3.51:1 on paper */
  }

  /* The top utility bar goes fully dormant on mobile (M11, still correct
     after the CDOB-S24 tweak round): the network links live in the footer
     network bar, and the drawer carries all three standing links, Log in /
     Sign up / Log out, the Be a Supporter CTA, Donate, AND the cart (header.php
     v0.11.0 renders the cart in the drawer's action list precisely because
     this bar, its desktop home again, is hidden here), so nothing on this
     strip is unreachable and the S23 mobile-cart escalation stays closed. */
  .cdob-utility {
    display: none;
  }

  /* Backdrop scrim (toggled via the [hidden] attribute + .is-visible by JS). */
  .cdob-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(var(--cdob-ink-rgb), 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 10001;
  }
  .cdob-nav-backdrop.is-visible {
    opacity: 1;
  }
}

/* Admin-bar top offset for the fixed drawer (logged-in users). WP admin bar
   is 46px at <=782px and 32px at 783px+. */
@media (max-width: 782px) {
  body.admin-bar .cdob-nav {
    top: 46px;
  }
}
@media (min-width: 783px) and (max-width: 899px) {
  body.admin-bar .cdob-nav {
    top: 32px;
  }
}

/* Reduced motion: no slide/fade. */
@media (prefers-reduced-motion: reduce) {
  .cdob-nav,
  .cdob-nav.is-open,
  .cdob-nav-backdrop,
  .cdob-nav-toggle__bars span {
    transition: none;
  }
}

/* ---------- Cart control (introduced CDOB-WOO-S16; back on the utility bar
   as of the CDOB-S24 tweak round, plus a second copy in the mobile drawer's
   action list, header.php v0.11.0) ----------
   Context-free internals: each surface's own list rule carries colour,
   weight, tap floor and hover (on-dark-soft on the ink bar; navy in the
   paper drawer; the icon strokes currentColor so it follows the text),
   introducing NO new colour pair; everything below is layout only. Both
   call sites emit the same anchor, and the WooCommerce fragment filter
   (`a.cdob-cart`, functions.php) refreshes every match, so the two counts
   cannot disagree.

   The count is a NUMBER rendered as text, never a colour-only dot, and the
   link additionally carries a screen-reader sentence naming the count, so
   the state is never carried by the badge alone (WCAG 1.4.1). The control
   rides each list's existing tap treatment; it is not a new tap surface
   with its own floor to re-derive.

   "Context-free" means colour-free, not layout-free: display comes from
   each HOST list's anchor rule (inline-flex on the utility bar, flex in
   the drawer). Do not add display here to make a third surface work; at
   (0,1,1) late in the file it would override the drawer's full-width flex.
   A new call site needs a host list rule of its own. */
a.cdob-cart {
  gap: 6px;
}
a.cdob-cart .cdob-cart__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
a.cdob-cart .cdob-cart__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
a.cdob-cart .cdob-cart__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}