/* Interaction layer. Visibility is only taken over once JS is confirmed
   running (html.cbb-js), so a no-JS visitor sees every panel expanded
   rather than a page of dead buttons. */
html.cbb-js .cbb-acc { display: none; }
html.cbb-js .cbb-acc.is-open { display: block; }
html.cbb-js [data-cbb="drawer"] { display: none; }
html.cbb-js [data-cbb="drawer"].is-open { display: block; }
html.cbb-js .cbb-step { display: none; }
html.cbb-js .cbb-step.is-active { display: block; }

[data-cbb="acc-btn"] { cursor: pointer; }
[data-cbb="acc-btn"]:focus-visible,
[data-cbb="menu-btn"]:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
button[disabled] { opacity: .6; cursor: progress; }

/* The fixed mobile call bar sits over the end of the page. */
@media (max-width: 900px) { body { padding-bottom: 64px; } }

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

/* ---------------------------------------------------------------- polish */

/* iOS Safari zooms the page when a focused field is under 16px. People fill
   these in at 3am on a phone; the zoom-and-pan is the last thing they need. */
@media (max-width: 900px) {
  .input, input, select, textarea, .field input, .field select, .field textarea {
    font-size: 16px !important;
  }
}

/* In-page anchors (#calculator, the FAQ groups) landed flush against the
   viewport top with no breathing room. */
[id] { scroll-margin-top: 24px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Keyboard users need a way past the 12-link nav on every page. */
.cbb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-text); color: var(--color-bg);
  padding: 12px 18px; font-family: var(--font-heading);
  font-weight: var(--font-heading-weight); text-decoration: none;
}
.cbb-skip:focus { left: 0; }

/* Touch feedback - the design is otherwise entirely flat. */
.btn { transition: background-color .12s ease-out, color .12s ease-out, border-color .12s ease-out; }
.btn:active { transform: translateY(1px); }
a, button { -webkit-tap-highlight-color: color-mix(in srgb, var(--color-accent) 22%, transparent); }

[data-cbb="acc-btn"] { transition: color .12s ease-out; }
[data-cbb="acc-btn"]:hover { color: var(--color-accent-700); }
[data-cbb="acc-btn"] > span:last-child { transition: transform .16s ease-out; }

::selection { background: var(--color-accent); color: var(--color-bg); }

/* The drawer is a panel, not a jump - give it the same quick motion as the
   rest of the page rather than snapping open. */
html.cbb-js [data-cbb="drawer"].is-open { animation: cbbDrawer .18s ease-out; }
@keyframes cbbDrawer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.cbb-js [data-cbb="drawer"].is-open { animation: none; }
}

/* The accent square before a section kicker was only defined on the home
   page's own stylesheet, so the other 72 pages lost the brand mark. */
.cbb-kicker::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--color-accent);
  margin-right: 10px;
  vertical-align: 0.04em;
}

/* Stat captions broke into three ragged lines; balance evens them out. */
.cbb-statlabel { text-wrap: balance; }

/* The duty strip wrapped onto two lines on a phone, pushing the headline
   further below the fold on the one page view that matters most. */
@media (max-width: 460px) {
  .cbb-duty > div { gap: 4px 14px !important; padding-block: 11px !important; }
  .cbb-duty [data-cbb="clock"] { font-size: 14px !important; }
}

/* Ghost buttons are deliberately quiet in this system, but 4px of horizontal
   padding makes a poor thumb target. Meet 44px on touch widths without
   changing how they read. */
@media (max-width: 900px) {
  .btn { min-height: 44px; padding-block: 10px; }
  .btn-ghost { padding-inline: 10px; }
}

/* ------------------------------------------------------------- editorial */

/* Most two-column sections pair a short left rail (kicker, heading, one
   paragraph) with a long right column, leaving 200-500px of dead space that
   read as unfinished rather than as deliberate white space. Letting the rail
   travel with its content turns that void into structure. The hero is
   excluded - it is not .cbb-wrap - and short sections simply never engage. */
@media (min-width: 941px) {
  section.cbb-wrap[data-two-col] > div:first-child {
    position: sticky;
    top: 28px;
  }
}

/* Full-width tint for a .cbb-wrap section, which is otherwise capped at
   1200px and would tint as a floating block between full-bleed rules. */
.cbb-band {
  background: var(--color-neutral-100);
  box-shadow: 0 0 0 100vw var(--color-neutral-100);
  clip-path: inset(0 -100vw);
}

/* ------------------------------------------------------------- mastheads */

/* Interior pages all opened as black text on the same flat ground as the body
   beneath them, so the top of the page had no defined zone. A light tinted
   band (neutral-200, per the system's "light steps for tinted fills") gives
   every page a masthead without borrowing the dark hero's punch. Full-bleed
   via clip-path because .cbb-wrap is capped at 1200px. */
section.cbb-masthead {
  /* Full-bleed the way the hero does it: drop the container cap and push the
     content back onto the 1200px grid with padding. No clip-path, so the
     ground meets the duty strip above it with no seam. */
  max-width: none;
  margin-inline: 0;
  padding-inline: max(clamp(20px, 5vw, 64px), calc((100% - 1200px) / 2 + clamp(20px, 5vw, 64px)));
  background: var(--color-text);
  color: var(--color-bg);
}
section.cbb-masthead .cbb-kicker { color: var(--color-bg); }
section.cbb-masthead a:not(.btn) { color: var(--color-bg); }
section.cbb-masthead .btn-ghost { color: var(--color-bg); }
/* Where the second column held only buttons it has been folded into the
   first, so the grid must stop reserving a track for it. */
section.cbb-masthead-solo { grid-template-columns: minmax(0, 1fr) !important; }
.cbb-masthead-solo > div > div:last-child { margin-top: 28px; }

/* Panels that carry their own light fill sit inside the dark masthead and
   must keep the light-ground palette. */
section.cbb-masthead .cbb-onlight,
section.cbb-masthead .cbb-onlight p,
section.cbb-masthead .cbb-onlight a:not(.btn) { color: var(--color-text); }
section.cbb-masthead .cbb-onlight .cbb-kicker { color: var(--color-accent-700); }

/* ------------------------------------------------------------------ links */

/* Every anchor inherits the accent colour, which is right for the occasional
   link in prose but turns the footer, the town grids and the site index into
   a wall of red with no hierarchy left. Dense lists take the text colour and
   earn the accent on hover; inline prose links keep it. */
.cbb-foot a:not(.btn),
section:not(.cbb-masthead) [data-four-col] a:not(.btn),
section:not(.cbb-masthead) [data-three-col] a:not(.btn) {
  color: var(--color-text);
  text-decoration-color: transparent;
  transition: color .12s ease-out;
}
.cbb-foot a:not(.btn):hover,
section:not(.cbb-masthead) [data-four-col] a:not(.btn):hover,
section:not(.cbb-masthead) [data-three-col] a:not(.btn):hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ photography */

/* Full-bleed editorial figure. The system asks for photographs in pure black
   and white, so these always sit inside .grayscale. */
.cbb-bleed img {
  display: block;
  width: 100%;
  height: clamp(260px, 44vw, 560px);
  object-fit: cover;
  object-position: center 22%;
}
.cbb-bleed--arch img { object-position: center 45%; height: clamp(220px, 34vw, 420px); }

/* --------------------------------------------------------- restored prose */

/* Archived body copy re-injected into the hand-designed artboards. The
   generated pages carry these rules in their own <style>; hand artboards do
   not, so they live here and cover both. */
.cbb-prose h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(21px, 2.5vw, 28px);
  line-height: 1.15; letter-spacing: -0.015em;
  margin: 34px 0 12px;
}
.cbb-prose > div > :first-child { margin-top: 0; }
.cbb-prose p {
  font-size: 15.5px; line-height: 27px; max-width: 64ch;
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.cbb-prose ul { margin: 0 0 16px; padding: 0; list-style: none; max-width: 64ch; }
.cbb-prose ul li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 15.5px; line-height: 26px;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.cbb-prose ul li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 8px; background: var(--color-accent);
}

/* ------------------------------------------------------------- contrast */

/* --color-accent (#ec3013) carries light text at only 3.76:1, short of the
   4.5:1 WCAG AA needs for text this size. The ramp already holds the answer,
   and prose links on this site use accent-700 already, so this is consistent
   with existing usage rather than a new colour decision.
       accent      on bg   3.76:1  FAIL
       accent-700  on bg   6.41:1  PASS
       accent-500  on ink  5.26:1  PASS
   Accent stays exactly where it is on large type - the stat figures, the
   display headings and the accordion markers all clear 3:1 as large text. */
.btn-primary { background: var(--color-accent-700); }
.btn-primary:hover { background: var(--color-accent-800); }

/* Two more accent-as-small-text cases the first pass missed: the ghost button
   label at 14px and the trust chips at 11px, both 3.76:1 on the light ground.
   Dark-ground overrides already set their own colour, so they are unaffected. */
.btn-ghost { color: var(--color-accent-700); }
.tag-outline { border-color: var(--color-accent-700); color: var(--color-accent-700); }

/* ---------------------------------------------------------------- print */

/* People print from this site: directions to the detention center, a
   reference number, the terms they just agreed to. Without these rules the
   dark masthead prints as a solid black block, the fixed call bar lands on
   top of the content, and every nav link prints as an unresolvable word. */
@media print {
  .cbb-top, .cbb-nav, .cbb-duty, .cbb-drawer,
  [data-cbb="menu-btn"], [data-cbb="drawer"], [data-mobilebar],
  .cbb-skip, .cbb-bleed, .cbb-foot [data-four-col] { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  body { padding-bottom: 0 !important; font-size: 11.5pt; }

  /* the dark bands invert rather than flooding the page with toner */
  section.cbb-masthead, .cbb-hero, [style*="background: rgb(32, 30, 29)"] {
    background: #fff !important;
    color: #000 !important;
    padding-block: 0 0 !important;
    border-bottom: 1.5pt solid #000;
  }
  section.cbb-masthead *, .cbb-hero * { color: #000 !important; }
  .cbb-kicker, .cbb-kicker::before { color: #000 !important; }
  .cbb-kicker::before { background: #000 !important; }

  /* sticky rails and grids collapse to a single readable column */
  section.cbb-wrap[data-two-col] > div:first-child { position: static !important; }
  [data-two-col], [data-three-col], [data-four-col] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  a { color: #000 !important; text-decoration: underline; }
  /* a printed link is useless without its destination */
  main a[href^="http"]::after,
  .cbb-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  a[href^="tel:"]::after, a[href^="#"]::after { content: ""; }

  .btn { border: 1pt solid #000 !important; background: none !important; color: #000 !important; }

  h1, h2, h3 { break-after: avoid-page; page-break-after: avoid; }
  p, li, figure, tr { break-inside: avoid; page-break-inside: avoid; }
  hr.cbb-rule { border-top: 1pt solid #000; background: none; height: 0; }

  /* the two things a printed page must always carry */
  .cbb-foot { border-top: 1.5pt solid #000; padding-top: 12pt; }
}

/* Print: force the ground white. The page ground and the tinted panels are
   near-white on screen but still lay down toner. */
@media print {
  .cbb-wrap, section, .cbb-directions,
  [style*="background: rgb(243, 242, 242)"],
  [style*="background: rgb(234, 231, 231)"] { background: #fff !important; }
  .cbb-directions { border: 1pt solid #000 !important; }
}