/* cdob-core.css v0.6.1 | 2026-08-11 | Generated by Claude, session CDOB-S27
   v0.6.1 (CDOB-S27): ONE token ADDED, --cdob-tap-min-aa (24px), the WCAG 2.5.8
   AA sibling of --cdob-tap-min (44px, the 2.5.5 AAA floor). No rule changes and
   no existing value moves. It exists because CDOB_A11Y_TOKEN_HYGIENE.md v0.2
   records untokenized compact tap values as an open item whose real cost is
   that a THIRD instance would be invisible, and css/cdob-rail.css v0.6.0 needed
   exactly such a value for the section-nav heading link. This one has a
   standard name and a standard number, so it is tokenized on arrival rather
   than becoming that third instance. The 28px social link and the 32px
   fine-pointer button remain open in that doc: those are arbitrary compact
   values and are a different question from a named WCAG floor.
   v0.6.0 (CDOB-S26, owner-directed): the header logo stops breaking the menu
   v0.6.0 (CDOB-S26, owner-directed): the header logo stops breaking the menu
   width. TWO declarations ADDED (min-width:0 on the logo title and on the
   mark) so the logo can shrink below its content width when the row is over
   budget; css/cdob-nav.css v0.11.0 holds the row at nowrap and pins the nav
   at flex 0 0 auto. No colour, no token, no other rule, and the 80px/44px/40px
   steps are unchanged in value. What DID change is their meaning: they are
   now a ceiling the row may under-spend, not a fitted number that has to
   match the menu. The comment at the desktop step is rewritten accordingly,
   and records why that was the fourth re-derivation of the same arithmetic.
   v0.5.5 (CDOB-S24 tweak round): ONE declaration changed, the header logo's
   desktop height, 66px -> 80px, plus the ceiling comment beside it rewritten
   from a fresh live measurement (the cart left the main nav and the store
   button gained a 24px separation, freeing the width; arithmetic at the
   rule). This bump also RESYNCS this identity line, which had sat at v0.5.3
   while the v0.5.4 entry below existed (S23 drift, lesson 256 shape,
   carried in the S24 handoff queue and discharged here).
   v0.5.4 (CDOB-S23): ONE declaration changed, the header logo's desktop
   height, 60px -> 66px, plus the measurement comment beside it rewritten
   from a fresh live measurement. The main menu lost its Events dropdown that
   session, which shrank the nav's intrinsic width from 731.08px to 689.26px
   and raised the logo's ceiling from 61.1px to 69.70px. No colour, no token,
   no other rule; the logo is a logotype and is exempt from 1.4.3 regardless.
   v0.5.3 (CDOB-S19): desktop logo 44px -> 60px at the measured layout ceiling
   (286px of width available beside the 730px nav), per the owner's request to
   go larger. A new <=1119px step holds the previous 44px where the column is
   too narrow for 60px, so the wrapping zone is not widened.
   v0.5.2 (CDOB-S19): the <=380px logo step removed; mobile is one 40px step.
   v0.5.1 (CDOB-S19): logo height 60px -> 44px (and 44 -> 40 on mobile) so the
   mark occupies about the width of the text title it replaced, per the
   owner's live review. Sizing rationale is in the block comment below.
   (v0.4.2 2026-07-09 CDOB-S15; v0.4.1 2026-07-03 CDOB-S10; v0.4.0 2026-07-03 CDOB-S8; v0.3.0 2026-07-02 CDOB-S7; v0.2.0 2026-07-01 CDOB-S5; v0.1.0 2026-06-12 CDOB-S2)
   v0.5.0 (CDOB-S19): .cdob-site-title--logo sizing for the header custom
   logo. Additive only, scoped entirely under the new modifier class; the
   text-title rules above are untouched and still apply whenever no logo is
   set. No token values changed and no colour pair introduced.
   v0.4.2 (CDOB-S15): .cdob-membership (ink front-page callout) added to the
   dark-context flame focus group; the dead .cdob-cta-band :focus-visible rule
   removed (the support band was retired from front-page.php this session); the
   .cdob-card title style now also matches h3 (card titles nested under a
   section h2 use h3 for a correct outline); the dead .cdob-sections wrapper
   (only the retired S7 intro-cards row used it) removed.
   Interim token layer for the CDOB subsite. Contrast ratios below are
   sRGB-linearized per RC_A11Y_TOKEN_HYGIENE.md:
     paper on ink 16.48 | paper on navy 10.40 | ink on flame 4.69
     navy on paper 10.40 | fir on paper 9.76 | on-light-meta on paper 7.46
     on-dark-soft on ink 10.26 | flame on ink 4.69
     flame focus outline on ink 4.69 (UI 3:1) | ghost border 0.55 alpha on ink 5.86 (UI 3:1)
     ui-border 0.18 alpha on paper 1.44 (DECORATIVE ONLY; fails UI 3:1)
     ui-border-dark 0.25 alpha on ink 2.28 (DECORATIVE ONLY; fails UI 3:1)
   White on flame is 3.51 and is NOT permitted for normal text (UI/large only).
   The two decorative-only border tokens must never carry state (focus,
   error, selected); use ui-border-dark-strong or a full-strength token.
   v0.3.0 (CDOB-S7): type-family + tap-target tokens; body font-family tokenized;
   Source Serif 4 on display headings; .cdob-btn tap-target floor; focus outlines
   for the new dark contexts .cdob-home-hero (flame 4.69) and .cdob-cta-band
   (paper 10.40, since flame-on-navy 2.96 and navy-on-navy 1.0 are banned).
   v0.4.0 (CDOB-S8): .cdob-btn--ghost-dk moved in from cdob-home.css (light-surface
   ghost button, navy border + navy text 10.40, now used site-wide);
   .screen-reader-text utility (the_posts_pagination outputs it); .cdob-ph added
   to the dark-context flame focus-outline list (interior hero, cdob-content-page.css). */

:root {
  --cdob-ink: #1f1f1f;
  --cdob-ink-rgb: 31, 31, 31;
  --cdob-paper: #ffffff;
  --cdob-paper-rgb: 255, 255, 255;
  --cdob-navy: #2c3c77;
  --cdob-navy-rgb: 44, 60, 119;
  --cdob-flame: #f0523d;
  --cdob-flame-rgb: 240, 82, 61;
  --cdob-fir: #1e4d2b;
  --cdob-fir-rgb: 30, 77, 43;
  --cdob-on-light-meta: #555555;
  --cdob-on-dark-soft: #cccccc;
  --cdob-ui-border: rgba(var(--cdob-ink-rgb), 0.18);
  --cdob-ui-border-dark: rgba(var(--cdob-paper-rgb), 0.25);
  --cdob-ui-border-dark-strong: rgba(var(--cdob-paper-rgb), 0.55); /* 5.86:1 blended on ink; clears UI 3:1 */

  /* Type families + tap target (CDOB-S7). Public Sans body/UI, Source Serif 4 display. */
  --cdob-ff-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cdob-ff-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --cdob-tap-min: 44px; /* WCAG 2.5.5 target floor (AAA) */
  --cdob-tap-min-aa: 24px; /* WCAG 2.5.8 minimum (AA); use only where 44 is not warranted */

  /* Interim rem type scale; reconcile with RC token values in the brand phase. */
  --fs-300: 0.75rem;
  --fs-400: 0.9375rem;
  --fs-500: 1.0625rem;
  --fs-600: 1.25rem;
  --fs-700: 1.625rem;
  --fs-800: 2.125rem;
  --fs-900: 2.875rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-500);
  line-height: 1.6;
  color: var(--cdob-ink);
  background: var(--cdob-paper);
}

img { max-width: 100%; height: auto; }

a { color: var(--cdob-navy); }
a:hover { color: var(--cdob-flame); }

:focus-visible {
  outline: 3px solid var(--cdob-navy);
  outline-offset: 2px;
}

.cdob-dark :focus-visible,
.cdob-hero :focus-visible,
.cdob-home-hero :focus-visible,
.cdob-membership :focus-visible, /* CDOB-S15: ink membership callout; flame 4.69:1 on ink (UI 3:1) */
.cdob-ph :focus-visible,
.cdob-header :focus-visible,
.cdob-footer :focus-visible,
.cdob-utility :focus-visible { /* CDOB-S10: utility bar is dark chrome; flame 4.69:1 on ink (UI 3:1) */
  outline-color: var(--cdob-flame);
}

.cdob-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cdob-paper);
  color: var(--cdob-navy);
  padding: 12px 20px;
  z-index: 100;
}
.cdob-skip-link:focus { left: 0; }

/* Visually-hidden text (WP core class; the_posts_pagination emits it). */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal;
}

.cdob-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.cdob-header {
  background: var(--cdob-ink);
  color: var(--cdob-paper);
  padding: 18px 0;
}
.cdob-header .cdob-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cdob-site-title {
  font-size: var(--fs-600);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
}
.cdob-site-title a { color: var(--cdob-paper); text-decoration: none; }
.cdob-site-title a:hover { color: var(--cdob-on-dark-soft); }

/* Custom-logo variant (CDOB-S19; header.php v0.8.0 adds --logo when
   has_custom_logo()). The owner's mark is a transparent PNG authored FOR a
   dark ground, so it sits DIRECTLY on the ink band: no plate behind it, no
   filter on it, and --cdob-ink is unchanged. Nothing in the header's colour
   system moves.
   Sized by HEIGHT with width:auto so the mark keeps its own ratio; both flex
   axes are true in the theme support, so a future logo of different
   proportions needs no rule change here. object-fit guards the one case
   max-width can distort: a container narrower than the natural width would
   otherwise hold height fixed while squeezing width.
   display:block on the img removes the inline-baseline gap that would
   otherwise add ~4px to the header. The wrapper keeps a real font-size
   (the --logo modifier only neutralises the display letter-spacing) so the
   alt text stays legible if the image ever fails to load.
   HEIGHT IS BOUNDED BY THE NAV, which shares this flex row, but since
   CDOB-S26 that bound is enforced by the layout rather than by a hand-fitted
   number: the row is nowrap, the nav is rigid, and the LOGO gives way. The
   first pass sized the mark to the 198.5 x 32 px text title it replaced (44px
   height = 206px wide) and the owner then asked for it larger. The rule below
   records how the ceiling behaves and why it is no longer a fitted value.
   Tap target is held on the LINK, not the image: min-height keeps the 44px
   floor this codebase holds for header controls (WCAG 2.5.8) even at the
   smallest logo height below.
   No new contrast pair: a logo is exempt from 1.4.3, and this link's
   :focus-visible ring is the existing .cdob-header rule above (flame on ink,
   4.69:1, clearing the 3:1 UI floor). */
.cdob-site-title--logo {
  font-size: var(--fs-400);
  letter-spacing: normal;
  /* CDOB-S26. A flex item defaults to min-width:auto, which means it refuses
     to shrink below its own content width. That default is precisely what
     turned an over-budget logo into a wrapped header row: the mark could not
     give, so the row broke instead. Allowing the shrink here is what lets
     cdob-nav.css hold the row at nowrap safely. */
  min-width: 0;
}
.cdob-site-title--logo .custom-logo-link {
  display: flex;
  align-items: center;
  min-height: var(--cdob-tap-min);
  max-width: 100%;
}
.cdob-site-title--logo .custom-logo {
  display: block;
  height: 80px;
  width: auto;
  max-width: 100%;
  /* CDOB-S26: same reason as the title above, one level down. This img is a
     flex item of .custom-logo-link, so it carries its own min-width:auto and
     would otherwise refuse the shrink the parent just granted. */
  min-width: 0;
  object-fit: contain;
}
/* DESKTOP CEILING, AND IT IS NOW A CEILING RATHER THAN A FIT (CDOB-S26).
   READ THIS BEFORE CHANGING THE HEIGHT, THE LOGO ASSET, OR THE MAIN MENU.
   What this used to be. The header row is logo + 8px gap (cdob-nav.css owns
   that value since v0.8.0) + nav inside a 1032px content column (.cdob-wrap's
   1080px less 2 x 24px padding). S24 measured the nav at 627.70px, which left
   1032 - 627.70 - 8 = 396.30px for the logo, and picked 80px because the mark
   of the day was 4.6875:1 and therefore 375px wide, leaving 21.3px of slack.
   Why that shape kept failing. A fitted height is a function of two things
   this file does not own: the menu's contents and the LOGO ASSET's aspect
   ratio. S19, S23 and S24 each re-derived it after a menu change, and the
   fourth failure came from the other input, which no comment here had ever
   named as a lever: CDOB-CUT-S2 swapped in attachment 4342 at 5.5042:1. At an
   unchanged 80px that renders 440.36px against a 396.30px budget, 44.06px
   over, and the header wrapped to two rows at EVERY width (measured live
   before the fix: 132px row at 1280, 96px at 900, 96px at 320).
   What it is now. Self-limiting. min-width:0 above lets this flex item shrink
   below its content width, max-width:100% passes the shrink to the image, and
   object-fit:contain spends it on scale instead of distortion; cdob-nav.css
   v0.11.0 holds the row at nowrap and pins the nav at flex 0 0 auto. So the
   mark takes 80px when the row can afford it and less when it cannot, and
   NEITHER a new logo NOR a new menu item can wrap this row again.
   Measured live after the deploy, on a FRESH LOAD at each viewport rather
   than by resizing one page (resizing keeps the already-downloaded
   derivative and its density, which reports a false intrinsic ratio): at
   1280 the box is 396.30 x 80 holding a 396.30 x 71.05 mark, so 4.47px of
   transparent letterbox top and bottom, one 80px row; at 900 the box is
   201.11 x 44 holding 201.11 x 35.73; at 320 the box is 220 x 40 in a 44px
   row. Nav 627.70px and one line at every one of them, and the 44px tap
   floor on the logo LINK holds at all three.
   Do NOT re-derive a fitted height here. If the mark must render taller than
   the row can afford, the levers are a narrower asset or fewer menu items.
   The height MUST stay explicit. functions.php's `sizes` hint is only a
   download hint for as long as it is, and a CDOB-S26 candidate that used
   height:auto was rejected on exactly this: it promoted that string into a
   layout determinant and the browser sized the logo from its stale value.
   Below 1120px the step drops to 44px, and below a 1080px viewport the
   content column narrows too, which is where the 900px clamp above comes
   from. In the 1080-1119px band the clamp is not reached, so that step now
   renders the mark smaller than the row could afford; harmless, and left
   alone deliberately rather than widening this session's scope. */
@media (max-width: 1119px) {
  .cdob-site-title--logo .custom-logo { height: 44px; }
}
/* One mobile step, deliberately. An extra <=380px step was tried at 34px and
   removed: measured at 375px it left 124px of unused gap between the mark and
   the 44px nav toggle, so it was shrinking the logo on the commonest phone
   width for no reason. 40px gives a 187px mark; even at a 320px viewport that
   is 187 + 44 = 231px inside a 272px content box, so one step covers the
   range. max-width + object-fit above remain the backstop if it ever doesn't. */
@media (max-width: 899px) {
  .cdob-site-title--logo .custom-logo { height: 40px; }
}
.cdob-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cdob-nav a {
  display: inline-block;
  color: var(--cdob-paper);
  text-decoration: none;
  font-size: var(--fs-400);
  font-weight: 600;
  padding: 10px 12px; /* tap target */
}
.cdob-nav a:hover { color: var(--cdob-on-dark-soft); text-decoration: underline; }

/* Hero */
.cdob-hero {
  background: var(--cdob-ink);
  color: var(--cdob-paper);
  padding: 88px 0 96px;
}
.cdob-hero-kicker {
  font-size: var(--fs-400);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cdob-flame); /* 4.69:1 on ink */
  margin: 0 0 16px;
}
.cdob-hero h1 {
  font-size: var(--fs-900);
  line-height: 1.12;
  margin: 0 0 20px;
  max-width: 17ch;
}
.cdob-hero-lede {
  font-size: var(--fs-600);
  color: var(--cdob-on-dark-soft); /* 10.26:1 on ink */
  max-width: 56ch;
  margin: 0 0 32px;
}

/* Buttons: flame bg takes INK text (4.69:1); never white text on flame. */
.cdob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cdob-tap-min); /* WCAG 2.5.5 tap floor */
  background: var(--cdob-flame);
  color: var(--cdob-ink);
  font-weight: 700;
  font-size: var(--fs-500);
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 4px;
}
.cdob-btn:hover { background: var(--cdob-paper); color: var(--cdob-navy); }
.cdob-btn--ghost {
  background: transparent;
  color: var(--cdob-paper);
  border: 2px solid var(--cdob-ui-border-dark-strong);
}
.cdob-btn--ghost:hover { background: transparent; border-color: var(--cdob-paper); color: var(--cdob-paper); }
/* Dark-text ghost button for LIGHT surfaces (moved from cdob-home.css v0.1.0).
   Solid navy border + navy text both clear UI/text contrast on paper at 10.40. */
.cdob-btn--ghost-dk {
  background: transparent;
  color: var(--cdob-navy);
  border: 2px solid var(--cdob-navy);
}
.cdob-btn--ghost-dk:hover {
  background: var(--cdob-navy);
  color: var(--cdob-paper);
  border-color: var(--cdob-navy);
}
.cdob-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Notice band */
.cdob-notice {
  background: var(--cdob-navy);
  color: var(--cdob-paper); /* 10.40:1 */
  padding: 18px 0;
  font-size: var(--fs-400);
}
.cdob-notice a { color: var(--cdob-paper); font-weight: 700; }
.cdob-notice a:hover { color: var(--cdob-on-dark-soft); }

/* Sections */
.cdob-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
}
.cdob-card h2,
.cdob-card h3 { /* h3 = card title nested under a section h2 (correct outline); same style */
  font-size: var(--fs-700);
  margin: 0 0 12px;
  color: var(--cdob-navy); /* 10.40:1 on paper */
}
.cdob-card p { margin: 0 0 12px; }
.cdob-card-meta { font-size: var(--fs-400); color: var(--cdob-on-light-meta); /* 7.46:1 */ }
.cdob-card a { font-weight: 600; }

/* Content pages */
.cdob-content { padding: 64px 0; }
.cdob-content h1 { font-size: var(--fs-800); color: var(--cdob-navy); margin: 0 0 24px; }
.cdob-content .cdob-prose { max-width: 70ch; }

/* Brand display type: Source Serif 4 on headings (brand v1.0 sec 7). Body stays Public Sans. */
.cdob-hero h1,
.cdob-card h2,
.cdob-card h3,
.cdob-content h1,
.cdob-prose h2,
.cdob-prose h3 { font-family: var(--cdob-ff-serif); }

/* Footer */
.cdob-footer {
  background: var(--cdob-ink);
  color: var(--cdob-on-dark-soft); /* 10.26:1 */
  padding: 48px 0;
  font-size: var(--fs-400);
}
.cdob-footer a { color: var(--cdob-paper); }
.cdob-footer a:hover { color: var(--cdob-on-dark-soft); }
.cdob-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.cdob-footer-fineprint { margin: 0; font-size: var(--fs-300); }

@media (max-width: 640px) {
  .cdob-hero { padding: 56px 0 64px; }
  .cdob-hero h1 { font-size: var(--fs-800); }
}
