/* cdob-chrome.css v0.4.0 | 2026-08-02 | Generated by Claude, session CDOB-S19
   v0.4.0 (CDOB-S19, owner-directed): NEW .cdob-footer-flag, the Cascadia flag
   stacked above the footer wordmark inside that wordmark's own link. Additive
   only; no existing footer rule is touched. Image is blog-4 attachment 4307,
   operator-set through the cdob_footer_flag_img_id option.
   Prior header: v0.3.0 | 2026-08-01 | session CDOB-M11
   (v0.2.0 2026-07-09 CDOB-S13; v0.1.0 2026-07-09 CDOB-S13)
   Site-wide bottom chrome: the "join" capstone band + the rich footer +
   subfooter + the custom newsletter form + the network bar. Enqueued on every
   view (functions.php), loaded after cdob-core so it supersedes the interim
   cdob-core footer rules.

   v0.3.0 (CDOB-M11, owner-directed): NEW .cdob-netbar block, the network bar
   rendered by footer.php v0.4.0 as the site's final band (DOB / RC links +
   the "Visit other Cascadia pages" <details> disclosure, which opens UPWARD).
   Ink surface extending the subfooter language. New pairs, sRGB-linearized:
     on-dark-soft on ink   10.26  (netbar label, links, summary; same pair as
                                   the subfooter rows above)
     paper on ink          16.48  (link + summary hover)
     navy on paper         10.40  (disclosure panel links; panel border)
     navy on 8% navy tint   9.08  (panel link hover fill)
     flame focus ring: inherited from cdob-core's .cdob-footer dark-context
     group (the netbar sits inside <footer class="cdob-footer">). With the
     2px positive offset the ring STRADDLES surfaces on panel links: the
     side portions composite over the ink behind the panel (4.69) and the
     top/bottom portions over the paper interior (3.51); both clear UI 3:1,
     and on the bar itself the ring sits wholly on ink (4.69).
   The panel border is solid var(--cdob-navy): 10.40 against the PAPER
   interior; against the outer ink the navy line alone is 1.59, and the
   panel's perceivable boundary there is carried by the paper-vs-ink fill
   contrast (16.48), not by the border color. The bar's top hairline reuses
   the subfooter's decorative rgba(paper,0.10) and carries no state. At <=640px the panel drops absolute positioning and flows in-bar
   (reflow-safe, WCAG 1.4.10; steward-bar precedent).

   v0.2.0: rebrand off the RC forest palette to CDOB's actual chrome roles
   (BRAND GUIDELINES section 6): ink + paper are the workhorses, navy is the
   institutional accent, flame is the signal/CTA accent, fir is a small growth
   accent (NOT a surface). So the capstone band is NAVY (institutional CTA,
   matching the existing .cdob-cta-band) and the footer + subfooter are INK
   (matching the header). The fir/deep-fir surfaces are gone.

   Contrast (sRGB-linearized; values from BRAND GUIDELINES section 6):
     paper on navy          10.40  (capstone heading, focus ring on navy)
     on-dark-soft on navy    6.47  (capstone eyebrow + lede)
     navy on paper          10.40  (paper-filled capstone button label)
     paper on ink           16.48  (footer headings)
     on-dark-soft on ink    10.26  (footer body, links, copyright, icons)
     ink on flame            4.69  (footer button labels; flame is CDOB's CTA)
     flame on ink            4.69  (so a flame button clears 3:1 against the ink footer, no hairline needed)
     ghost border (paper 0.55) on ink 5.86 / on navy >3:1 (UI)
   flame on navy is 2.96 (BANNED): the navy capstone uses a paper-filled
   primary + a paper-outline ghost, never flame. Focus on the navy band uses
   paper (cdob-core's default navy focus would be navy-on-navy = invisible). */

/* ═══════════ Join capstone band (navy institutional CTA) ═══════════ */
.cdob-comehome {
  background: var(--cdob-navy);
  padding: 72px 24px;
}
.cdob-comehome__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.cdob-comehome__eyebrow {
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cdob-on-dark-soft); /* 6.47 on navy */
  margin: 0 0 18px;
}
.cdob-comehome__heading {
  font-family: var(--cdob-ff-serif);
  font-size: var(--fs-900);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cdob-paper); /* 10.40 on navy */
  margin: 0 0 16px;
}
.cdob-comehome__text {
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-600);
  color: var(--cdob-on-dark-soft); /* 6.47 on navy */
  max-width: 36rem;
  margin: 0 auto 28px;
  line-height: 1.6;
}
.cdob-comehome__buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Paper-filled primary (flame is banned on navy). navy label on paper = 10.40. */
.cdob-comehome__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cdob-tap-min);
  padding: 14px 26px;
  background: var(--cdob-paper);
  color: var(--cdob-navy);
  font-weight: 700;
  font-size: var(--fs-500);
  text-decoration: none;
  border: 2px solid var(--cdob-paper);
  border-radius: 4px;
}
.cdob-comehome__cta:hover { background: transparent; color: var(--cdob-paper); }
.cdob-comehome :focus-visible {
  outline-color: var(--cdob-paper); /* 10.40 on navy */
}

/* ═══════════ Footer (ink workhorse surface) ═══════════ */
.cdob-footer {
  background: var(--cdob-ink);
  color: var(--cdob-on-dark-soft); /* 10.26 on ink */
  font-family: var(--cdob-ff-sans);
  padding: 0;
}
.cdob-footer a { color: var(--cdob-paper); text-decoration: none; }
.cdob-footer a:hover { color: var(--cdob-on-dark-soft); }
/* Focus ring on the ink footer comes from cdob-core (.cdob-footer -> flame,
   4.69 on ink, a valid dark-surface accent), so no override here. */

/* Top: brand + newsletter */
.cdob-footer-top {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  border-bottom: 1px solid rgba(var(--cdob-paper-rgb), 0.10);
}
.cdob-footer-wordmark {
  font-family: var(--cdob-ff-serif);
  font-size: var(--fs-700);
  font-weight: 700;
  color: var(--cdob-paper);
  text-decoration: none;
  display: inline-block;
}
/* Cascadia flag above the footer wordmark (CDOB-S19, owner-directed).
   The image sits INSIDE the existing .cdob-footer-wordmark link rather than
   beside it, so the footer gains no second link to the same destination; the
   link keeps its accessible name from the "Cascadia Movement" text, and the
   image carries alt="" for exactly that reason. That placement is also why
   this needs no rule of its own for colour or focus: it inherits the link's.
   display:block is what stacks it above the text inside that inline-block
   link. Width comes from the measured wordmark text run (234.7px at --fs-700
   Source Serif 4 700 on desktop) taken about 11% wider per the owner.
   height:auto keeps the source 1024x614 (1.67:1) ratio, so the flag stands
   roughly 156px tall at this width; it is a much squarer mark than the header
   logo, so width and height do not trade off the way they do up there.
   max-width guards the brand column when it narrows. */
.cdob-footer-flag {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  margin: 0 0 12px;
}
@media (max-width: 899px) {
  .cdob-footer-flag { width: 220px; }
}
.cdob-footer-tagline {
  font-family: var(--cdob-ff-serif);
  font-size: var(--fs-500);
  color: var(--cdob-on-dark-soft);
  margin: 12px 0 18px;
  line-height: 1.5;
  max-width: 28rem;
}
.cdob-footer-org {
  font-size: var(--fs-400);
  letter-spacing: 0.04em;
  color: var(--cdob-on-dark-soft);
  line-height: 1.6;
}

/* Newsletter form (custom; inc/cdob-newsletter.php) */
.cdob-footer-nl-label {
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cdob-on-dark-soft);
  margin: 0 0 10px;
}
.cdob-footer-nl-heading {
  font-family: var(--cdob-ff-serif);
  font-size: var(--fs-700);
  font-weight: 700;
  color: var(--cdob-paper);
  margin: 0 0 8px;
}
.cdob-footer-nl-text {
  font-size: var(--fs-400);
  color: var(--cdob-on-dark-soft);
  margin: 0 0 16px;
  line-height: 1.6;
}
.cdob-nl-form { display: flex; flex-direction: column; gap: 10px; max-width: 26rem; }
.cdob-nl-field { display: block; }
.cdob-nl-form input[type="text"],
.cdob-nl-form input[type="email"],
.cdob-nl-form select {
  width: 100%;
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-400);
  min-height: var(--cdob-tap-min);
  padding: 10px 14px;
  background: rgba(var(--cdob-paper-rgb), 0.06);
  border: 1px solid var(--cdob-ui-border-dark-strong); /* 5.86 on ink, UI 3:1 */
  border-radius: 4px;
  color: var(--cdob-paper);
}
.cdob-nl-form input::placeholder { color: var(--cdob-on-dark-soft); opacity: 1; }
.cdob-nl-form input:focus,
.cdob-nl-form select:focus { border-color: var(--cdob-paper); }
.cdob-nl-form select option {
  background: var(--cdob-ink);
  color: var(--cdob-paper);
}
/* Offscreen honeypot (not display:none, so bots still fill it). */
.cdob-nl-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
/* Flame submit on ink: flame-on-ink is 4.69, clears the UI 3:1 boundary. */
.cdob-footer .cdob-nl-submit { align-self: flex-start; }
.cdob-nl-msg {
  font-size: var(--fs-400);
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 4px;
  border: 1px solid var(--cdob-ui-border-dark-strong);
  color: var(--cdob-paper);
}

/* Link columns */
.cdob-footer-cols {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-bottom: 1px solid rgba(var(--cdob-paper-rgb), 0.10);
}
.cdob-footer-col-label {
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cdob-on-dark-soft);
  margin: 0 0 14px;
}
.cdob-footer-col ul { list-style: none; margin: 0; padding: 0; }
.cdob-footer-col li { margin: 0; }
.cdob-footer-col a {
  display: inline-block;
  font-size: var(--fs-400);
  color: var(--cdob-on-dark-soft);
  padding: 7px 0;
}
.cdob-footer-col a:hover { color: var(--cdob-paper); }

/* Social icons */
.cdob-footer-social { display: flex; gap: 8px; margin-top: 14px; }
/* Scoped to out-specify .cdob-footer-col a (the social ul nests in the Connect
   column); a bare .cdob-footer-social__link loses the cascade (lesson 60). */
.cdob-footer-social .cdob-footer-social__link {
  width: var(--cdob-tap-min);
  height: var(--cdob-tap-min);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cdob-footer-social__icon { width: 20px; height: 20px; fill: var(--cdob-on-dark-soft); }
.cdob-footer-social .cdob-footer-social__link:hover .cdob-footer-social__icon { fill: var(--cdob-paper); }

/* Account buttons (Sign in / Join / Log out): flame on ink = 4.69. */
.cdob-footer-account { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.cdob-footer-account .cdob-footer-btn {
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cdob-ink);
  background: var(--cdob-flame);
  border-radius: 4px;
  min-height: var(--cdob-tap-min);
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
}
.cdob-footer-account .cdob-footer-btn:hover { background: var(--cdob-paper); color: var(--cdob-navy); }

/* Subfooter (ink, separated from the footer by the cols border above) */
.cdob-footer-bottom {
  background: var(--cdob-ink);
  border-top: 1px solid rgba(var(--cdob-paper-rgb), 0.10);
}
.cdob-footer-bottom__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.cdob-footer-copyright { font-size: var(--fs-300); letter-spacing: 0.04em; color: var(--cdob-on-dark-soft); }
.cdob-footer-bottom-links { display: flex; gap: 20px; }
.cdob-footer-bottom-links a { font-size: var(--fs-300); letter-spacing: 0.04em; color: var(--cdob-on-dark-soft); padding: 8px 0; }
.cdob-footer-bottom-links a:hover { color: var(--cdob-paper); }

/* ═══════════ Network bar (M11): DOB / RC / other Cascadia sites ═══════════ */
.cdob-netbar {
  background: var(--cdob-ink);
  border-top: 1px solid rgba(var(--cdob-paper-rgb), 0.10); /* decorative hairline, matches .cdob-footer-bottom; carries no state */
}
.cdob-netbar__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.cdob-netbar__label {
  margin: 0;
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cdob-on-dark-soft); /* 10.26 on ink */
}
.cdob-netbar__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cdob-netbar__list > li { position: relative; } /* anchor for the upward panel */
.cdob-netbar__list > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--fs-300);
  letter-spacing: 0.04em;
  color: var(--cdob-on-dark-soft); /* 10.26 on ink */
  text-decoration: none;
}
.cdob-netbar__list > li > a:hover { color: var(--cdob-paper); text-decoration: underline; } /* 16.48 */
.cdob-netbar__more summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  font-size: var(--fs-300);
  letter-spacing: 0.04em;
  color: var(--cdob-on-dark-soft); /* 10.26 on ink */
  cursor: pointer;
  list-style: none; /* suppress the default disclosure triangle; ::after draws ours */
}
.cdob-netbar__more summary::-webkit-details-marker { display: none; }
.cdob-netbar__more summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor; /* points up: the panel opens upward */
}
.cdob-netbar__more[open] summary::after {
  border-bottom: none;
  border-top: 5px solid currentColor;
}
.cdob-netbar__more summary:hover { color: var(--cdob-paper); } /* 16.48 */
.cdob-netbar__menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--cdob-paper);
  border: 1px solid var(--cdob-navy); /* 10.40 on the paper INTERIOR; the outward boundary over ink is carried by the paper-vs-ink fill (16.48), see header */
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(var(--cdob-ink-rgb), 0.25); /* decorative */
  z-index: 40;
}
.cdob-netbar__menu a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 16px;
  font-size: var(--fs-400);
  color: var(--cdob-navy); /* 10.40 on paper */
  text-decoration: none;
}
.cdob-netbar__menu a:hover {
  background: rgba(var(--cdob-navy-rgb), 0.08);
  color: var(--cdob-navy); /* 9.08 on the 8% navy tint */
}

/* ═══════════ Responsive ═══════════ */
@media (max-width: 900px) {
  .cdob-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .cdob-comehome { padding: 56px 24px; }
  .cdob-comehome__heading { font-size: var(--fs-800); }
  .cdob-footer-top { grid-template-columns: 1fr; gap: 36px; padding: 40px 24px 32px; }
  .cdob-footer-bottom__inner { flex-direction: column; text-align: center; }
}
@media (max-width: 640px) {
  /* The disclosure panel flows in-bar instead of floating, so it can never
     overflow the viewport at narrow widths (WCAG 1.4.10; steward-bar H1
     precedent). Colors are unchanged: paper panel, navy links. */
  .cdob-netbar__inner { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cdob-netbar__list { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cdob-netbar__menu {
    position: static;
    min-width: 0;
    margin: 4px 0 8px;
    box-shadow: none;
  }
}
@media (max-width: 480px) {
  .cdob-footer-cols { grid-template-columns: 1fr; }
}