/* cdob-chrome.css v0.2.0 | 2026-07-09 | Generated by Claude, session CDOB-S13
   Site-wide bottom chrome: the "join" capstone band + the rich footer +
   subfooter + the custom newsletter form. Enqueued on every view (functions.php),
   loaded after cdob-core so it supersedes the interim cdob-core footer rules.

   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;
}
.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); }

/* ═══════════ 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: 480px) {
  .cdob-footer-cols { grid-template-columns: 1fr; }
}