/* ═══════════════════════════════════════════════════════════════════════════
   GRADUS BLUE — municipal theme stylesheet
   ═══════════════════════════════════════════════════════════════════════════

   Design system adapted from the Gradus client portal: deep navy, brass, a
   serif display face against a plain sans body, generous measure, photographic
   heroes, colour-blocked action tiles.

   CONTRAST IS A CONSTRAINT HERE, NOT A PREFERENCE. Each pair that carries text:
     ink #1B2433 on white ......... 15.1:1
     ink-soft #4A5465 on white ...... 7.6:1
     white on navy #12284B ......... 12.0:1
     navy on gold #C9A227 .......... 5.1:1
     gold #C9A227 on navy .......... 5.6:1
     gold #C9A227 on white ......... 2.4:1  ← FAILS, so gold is never body text
                                              on white: rules, underlines, and
                                              filled buttons only.

   Everything reads from the tokens below, so a rebrand is one block.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --navy: #12284b;
  --navy-mid: #1d3a66;
  --navy-deep: #0b1b34;
  --gold: #c9a227;
  --gold-bright: #e0b43a;
  --gold-soft: #faf3dd;

  --blue: #12284b;
  --blue-hover: #0b1b34;
  --blue-light: #e8eef7;
  --teal: #12284b;
  --teal-hover: #0b1b34;
  --teal-light: #e6ecf5;

  --slate: #4a5465;
  --slate-light: #8a93a3;
  --paper: #f4f5f7;
  --border: #dde1e7;
  --border-light: #e8ebef;

  --text: #1b2433;
  --text-soft: #4a5465;
  --text-muted: #5f6875;
  --focus: #e0b43a;
  --link: #1a4c8b;
  --alert: #a4161a;
  --ok: #13512f;

  --font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --max-w: 1160px;
  --space: clamp(1rem, 3vw, 2rem);
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.65;
  color: var(--text); background: #fff; -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--link); }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
/* Never remove the ring; only reinforce it on dark surfaces where gold is dim. */
.gb-hero :focus-visible, .gb-footer :focus-visible, .gradus-footer :focus-visible { outline-color: #fff; }

h1, h2, h3, h4, .gradus-page-title, .gradus-section-title h2, .gradus-hero h1, .gb-wordmark {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
}
h1, .gradus-page-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.15; }
h2 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .35rem; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.gradus-skip-link {
  position: absolute; top: -9999px; left: 50%; transform: translateX(-50%);
  background: var(--navy-deep); color: #fff; padding: 10px 22px; font-weight: 700;
  text-decoration: none; z-index: 10000; border-radius: 0 0 6px 6px;
}
.gradus-skip-link:focus { top: 0; color: #fff; }

.gradus-container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space); }
.gradus-main { display: block; min-height: 40vh; }

.gb-lede, .lede { font-size: 1.1rem; line-height: 1.62; color: var(--text-soft); max-width: 66ch; margin: 0 0 1.9rem; }
.gb-eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 .4rem;
}

/* The audit plugin injects a grey "Compliance Pending" strip above every page.
   On a site being sold as conformant it reads as our own admission, and it is a
   developer artefact rather than public content. The footer badge still shows
   the real widget. */
.gradus-banner-thin { display: none !important; }

/* ── Header: utility bar ──────────────────────────────────────────────────── */
.gb-utility { background: var(--navy-deep); color: #dce3ee; font-size: .82rem; }
.gb-utility .gradus-container {
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: center;
  padding-top: .5rem; padding-bottom: .5rem;
}
.gb-utility a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.gb-utility a:hover { border-bottom-color: var(--gold); }
.gb-utility-alert { margin-left: auto; color: var(--gold-bright); font-weight: 600; }

/* ── Header: emergency notice ─────────────────────────────────────────────── */
.gb-alert { background: var(--gold-soft); border-bottom: 1px solid #e6d9a8; }
.gb-alert-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .6rem 0; }
.gb-alert p { margin: 0; font-size: .9rem; color: #4a3806; }
.gb-alert a { color: #4a3806; }
.gb-alert-dismiss {
  margin-left: auto; background: #fff; border: 1px solid #a08a3f; color: #4a3806;
  font: inherit; font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 4px; cursor: pointer;
}
.gb-alert-dismiss:hover { background: #4a3806; color: #fff; border-color: #4a3806; }

/* ── Header: masthead ─────────────────────────────────────────────────────── */
.gradus-header { background: #fff; border-bottom: 1px solid var(--border); position: relative; z-index: 100; }
.gradus-header-inner {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  max-width: var(--max-w); margin: 0 auto; padding: 1rem var(--space);
  height: auto; min-height: 66px;
}
.gb-brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; flex: 0 0 auto; }
.gb-brand img { width: 58px; height: auto; display: block; flex: none; }
.gb-wordmark { font-size: 1.32rem; line-height: 1.12; color: var(--navy); margin: 0; white-space: nowrap; }
.gb-wordmark span {
  display: block; font-family: var(--font); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-top: .22rem;
}

.gradus-navigation { margin-left: auto; }
.gradus-navigation ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.gradus-navigation li { margin: 0; }
.gradus-navigation a {
  display: block; color: var(--text); font-weight: 600; font-size: .88rem;
  padding: .5rem; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.gradus-navigation a:hover, .gradus-navigation .current-menu-item a {
  color: var(--navy); border-bottom-color: var(--gold);
}
.gradus-menu-toggle {
  display: none; background: var(--navy); color: #fff; border: 0; border-radius: 6px;
  font-size: 1.3rem; padding: .35rem .6rem; cursor: pointer;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.gb-hero, .gradus-hero {
  position: relative; color: #fff; background: var(--navy-deep);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.75rem, 6vw, 4.5rem);
  background-image:
    linear-gradient(180deg, rgba(11,27,52,.86) 0%, rgba(11,27,52,.72) 55%, rgba(11,27,52,.88) 100%),
    var(--gb-hero-image, none);
  background-size: cover; background-position: center 35%;
}
.gb-hero-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space); }
.gb-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 .6rem; }
.gb-hero h1, .gradus-hero h1 { color: #fff; margin: 0 0 .6rem; font-size: clamp(2.1rem, 5vw, 3.3rem); }
.gb-hero-sub { color: #dce3ee; max-width: 52ch; font-size: 1.08rem; margin: 0 0 1.6rem; }
.gb-hero-rule { width: 64px; height: 3px; background: var(--gold); margin: 0 0 1.4rem; }

.gb-search, .gradus-site-search { display: flex; gap: .5rem; max-width: 40rem; }
.gb-search input {
  flex: 1; min-width: 0; min-height: 50px; padding: .7rem 1rem; font: inherit; font-size: 1rem;
  /* A white field on a dark hero needs no border; a white field on white does.
     This border is 4:1 against white AND visible against the navy hero, so the
     field is a control in both places rather than an invisible rectangle. */
  border: 1px solid #767f8f; border-radius: 6px; background: #fff; color: var(--text);
}
.gb-search button {
  min-height: 50px; padding: 0 1.5rem; font: inherit; font-size: .95rem; font-weight: 700;
  background: var(--gold); color: var(--navy); border: 0; border-radius: 6px; cursor: pointer;
}
.gb-search button:hover { background: #d8b132; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.gb-button, .gradus-btn {
  display: inline-block; font: inherit; font-size: .92rem; font-weight: 700;
  padding: .62rem 1.2rem; border-radius: 6px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: var(--navy); color: #fff;
}
.gb-button:hover, .gradus-btn-primary:hover, .gradus-btn:hover { background: var(--navy-deep); color: #fff; }
.gradus-btn-primary { background: var(--navy); color: #fff; }
.gradus-btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.gradus-btn-outline:hover { background: var(--navy); color: #fff; }
.gb-btn-secondary {
  font: inherit; font-size: .92rem; font-weight: 600; padding: .62rem 1.2rem; border-radius: 6px;
  border: 1px solid var(--slate-light); background: #fff; color: var(--text); cursor: pointer;
}
.gb-btn-secondary:hover { border-color: var(--navy); color: var(--navy); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.gradus-section { padding: clamp(2.5rem, 5vw, 3.75rem) 0; }
.gradus-section-alt { background: var(--paper); }
.gradus-section-title { margin-bottom: 2rem; }
.gradus-section-title h2 { margin: 0; }
.gb-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.gb-section-head h2 { margin: 0; }
.gb-section-head a { font-size: .88rem; font-weight: 700; color: var(--link); text-decoration: none; }
.gb-section-head a:hover { text-decoration: underline; }

/* ── Task tiles ───────────────────────────────────────────────────────────── */
.gradus-task-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gradus-task-card {
  display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.15rem;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none; color: var(--text);
}
.gradus-task-card:hover, .gradus-task-card:focus-visible {
  border-color: var(--navy); box-shadow: 0 6px 18px -10px rgba(18,40,75,.5);
}
.gradus-task-icon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--navy); color: #fff; font-size: 1.1rem;
}
.gradus-task-label { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--navy); line-height: 1.25; }
.gradus-task-count { font-size: .84rem; color: var(--text-soft); margin-top: .15rem; }

/* ── Content templates ────────────────────────────────────────────────────── */
.gradus-page, .gradus-article-header { padding: 2.25rem 0 0; }
.gradus-page-title, .gradus-article-title { margin: 0 0 1.25rem; }
.gradus-page-content, .gradus-article-content { padding-bottom: 3rem; max-width: 72ch; }
.gradus-page-content h2, .gradus-page-content h3 { margin-top: 2.2rem; }
.gradus-article-meta { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }
.gradus-archive-title { margin: 2.25rem 0 1.5rem; }
.gradus-archive-list { list-style: none; padding: 0; }
.gradus-archive-item { border-bottom: 1px solid var(--border-light); padding: 1rem 0; }
.gradus-excerpt { font-size: .93rem; color: var(--text-soft); margin: .3rem 0 0; }
.gradus-no-results, .gradus-error-404 { padding: 3rem 0 4rem; }
.gradus-error-404 h1 { margin-top: 0; }

/* ── Tables (content) ─────────────────────────────────────────────────────── */
.gb-table, .demo-table {
  width: 100%; border-collapse: collapse; margin: 1rem 0 1.9rem; font-size: .94rem;
}
.gb-table caption, .demo-table caption { text-align: left; font-size: .84rem; color: var(--text-soft); padding-bottom: .5rem; }
.gb-table th, .gb-table td, .demo-table th, .demo-table td {
  text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--border-light); vertical-align: top;
}
.gb-table thead th, .demo-table thead th {
  background: var(--paper); border-bottom: 2px solid var(--border);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft);
}
.gb-table tbody th, .demo-table tbody th { font-weight: 600; color: var(--text); }
.gb-table tbody tr:hover, .demo-table tbody tr:hover { background: #fafbfc; }
/* The wrapper the content filter puts around every table. The PAGE must reflow
   at 320px; a wide data table may scroll inside its own box instead (WCAG 1.4.10
   exempts the table, not the page around it). tabindex/role come from the filter,
   because a scroll container that cannot be focused cannot be scrolled by keyboard. */
.gb-table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.gb-table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.gb-table-scroll > table { margin-left: 0; margin-right: 0; }

/* A phone number is ONE token. Broken as "(318) 628-" / "5824" on three lines it
   is unreadable and undialable, which is the opposite of the point of linking it. */
.gb-tel, a[href^="tel:"] { white-space: nowrap; }
/* Running-text phone links carry their own underline: colour alone is not a link
   (WCAG 1.4.1), and these are exactly the links people need to recognise. */
.gb-tel { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* Inside a table, an unbreakable phone token is what makes the column stretch to
   fit it (auto layout sizes to min-content). That is the fix for the Water
   Systems table, where the number used to wrap onto three lines; the Elected
   Officials table already behaved because its numbers sat in a wider column. */
.gb-table td a[href^="tel:"], .gb-table td .gb-tel { white-space: nowrap; }

/* ── Chips / callouts ─────────────────────────────────────────────────────── */
.gb-chip, .demo-chip {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 3px;
  background: var(--paper); color: var(--text-soft); text-decoration: none;
}
.gb-chip-row, .demo-chip-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.gb-chip-alert, .demo-chip-alert { background: #fbe4e3; color: #8a1c14; }
.gb-chip-road, .demo-chip-road { background: #e3eaf6; color: var(--navy); }
.gb-chip-community, .demo-chip-community { background: #eceee6; color: #44502f; }

.gb-callout, .demo-callout {
  border-left: 4px solid var(--gold); background: var(--gold-soft);
  padding: 1rem 1.25rem; margin: 1.9rem 0; border-radius: 0 6px 6px 0;
}
.gb-callout p, .demo-callout p { margin: 0; }

/* ── Galleries ────────────────────────────────────────────────────────────── */
.gb-gallery, .demo-gallery {
  list-style: none; margin: 0 0 1.9rem; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.gb-gallery figure, .demo-gallery figure { margin: 0; }
.gb-gallery img, .demo-gallery img {
  display: block; width: 100%; height: 190px; object-fit: cover; object-position: center 22%; border-radius: 8px;
}
/* Seals and crests are small and carry meaning in their outline: never crop them. */
.gb-gallery .crest, .demo-gallery .crest { background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.gb-gallery .crest img, .demo-gallery .crest img { object-fit: contain; padding: 1.1rem; }
.gb-gallery figcaption, .demo-gallery figcaption { font-size: .85rem; color: var(--text-soft); margin-top: .45rem; }

/* ── Home: meeting / news / photo band / jurors ───────────────────────────── */
.gb-split { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .gb-split { grid-template-columns: 1fr 1fr; } }
.gb-meeting { background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--navy); border-radius: 8px; padding: 1.25rem 1.35rem; }
.gb-meeting-date { margin: 0 0 .25rem; font-family: var(--serif); font-size: 1.22rem; font-weight: 700; color: var(--navy); }
.gb-meeting-time { display: inline-block; background: var(--gold-soft); color: #6b5310; font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 3px; margin-bottom: .5rem; }
.gb-meeting-place { font-size: .88rem; color: var(--text-soft); margin: 0 0 .8rem; }
.gb-meeting-docs { margin: 0; padding-left: 1.1rem; font-size: .92rem; }

.gb-news-list { list-style: none; margin: 0; padding: 0; }
.gb-news-list li { padding: .85rem 0; border-bottom: 1px solid var(--border-light); }
.gb-news-list li:last-child { border-bottom: 0; }
.gb-news-list a.headline { display: block; font-weight: 600; color: var(--text); text-decoration: none; margin-top: .3rem; }
.gb-news-list a.headline:hover { color: var(--link); text-decoration: underline; }
.gb-news-date { font-size: .8rem; color: var(--text-muted); }

.gb-photo-band { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.gb-photo-band figure { margin: 0; position: relative; border-radius: 8px; overflow: hidden; background: var(--navy-deep); }
.gb-photo-band img { display: block; width: 100%; height: 210px; object-fit: cover; }
.gb-photo-band figcaption {
  position: absolute; inset: auto 0 0 0; padding: .6rem .8rem; font-size: .82rem; color: #fff;
  background: linear-gradient(180deg, rgba(11,27,52,0), rgba(11,27,52,.88) 45%);
}

.gb-jurors { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.gb-juror { text-align: center; }
.gb-juror img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); }
.gb-juror-name { font-family: var(--serif); font-weight: 700; color: var(--navy); margin: .5rem 0 0; font-size: 1rem; }
.gb-juror-role { font-size: .8rem; color: var(--text-soft); }

/* ── Content forms ────────────────────────────────────────────────────────── */
.gb-form fieldset, .demo-form fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; margin: 0 0 1.25rem; }
.gb-form legend, .demo-form legend { font-weight: 700; font-size: .95rem; padding: 0 .4rem; }
.gb-form label, .demo-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.gb-form input, .gb-form select, .gb-form textarea,
.demo-form input, .demo-form select, .demo-form textarea {
  width: 100%; max-width: 34rem; font: inherit; font-size: .95rem; padding: .55rem .65rem;
  border: 1px solid var(--slate-light); border-radius: 6px; background: #fff; color: var(--text);
}
.gb-form [aria-describedby], .demo-form [aria-describedby] { display: block; font-size: .82rem; color: var(--text-soft); margin-top: .25rem; }
.gb-form span[aria-hidden], .demo-form span[aria-hidden] { color: var(--alert); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.gradus-footer { background: var(--navy-deep); color: #cfd8e6; padding-top: 3rem; }
.gradus-footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space); }
.gradus-footer-grid {
  display: grid; gap: 2rem; padding-bottom: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gradus-footer a { color: #cfd8e6; text-decoration: none; }
.gradus-footer a:hover { color: #fff; text-decoration: underline; }
.gb-footer-heading {
  font-family: var(--serif); color: #fff; font-size: 1rem; margin: 0 0 .8rem;
  padding-bottom: .5rem; border-bottom: 1px solid rgba(201,162,39,.45);
}
.gradus-footer-col ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.gradus-footer-col li { margin-bottom: .45rem; line-height: 1.5; }
.gradus-footer-bottom { color: #93a2b8; font-size: .82rem; padding: 1.5rem 0 2rem; }
.gradus-footer-compliance { margin-top: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY PAGE — statement + complaint form
   ═══════════════════════════════════════════════════════════════════════════ */
.gb-a11y-page { max-width: 860px; }
.gb-page-head { margin: 2rem 0; }
.gb-page-head h1 { margin: 0 0 .8rem; }

.gb-quick-actions { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0 0 2.5rem; }
.gb-quick {
  display: block; padding: 1rem 1.1rem; border: 1px solid var(--border);
  border-top: 4px solid var(--navy); border-radius: 8px; text-decoration: none; color: var(--text); background: #fff;
}
.gb-quick:hover, .gb-quick:focus-visible { border-color: var(--navy); border-top-color: var(--gold); background: var(--paper); }
.gb-quick > span:first-child { display: block; font-size: 1.3rem; margin-bottom: .35rem; }
.gb-quick strong { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--navy); }
.gb-quick > span:last-child { display: block; font-size: .84rem; color: var(--text-soft); margin-top: .2rem; }

.gb-a11y-page section { margin-bottom: 2.75rem; }
.gb-a11y-page h2 { margin: 0 0 .9rem; }
.gb-a11y-page h3 { margin: 1.4rem 0 .4rem; font-size: 1.05rem; }

.gb-facts { display: grid; gap: .6rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.2rem 0 0; }
.gb-facts > div { border-left: 3px solid var(--gold); padding: .1rem 0 .1rem .75rem; }
.gb-facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.gb-facts dd { margin: .15rem 0 0; font-size: .95rem; }

.gb-limitation { border-left: 4px solid var(--alert); background: #fdf7f7; padding: .9rem 1.1rem; border-radius: 0 6px 6px 0; margin-bottom: .9rem; }
.gb-limitation h3 { margin: 0 0 .35rem; font-size: 1rem; }
.gb-limitation p { margin: 0 0 .4rem; font-size: .93rem; }
.gb-limitation p:last-child { margin-bottom: 0; }

.gb-list { padding-left: 1.2rem; }
.gb-list li { margin-bottom: .45rem; }

.gb-card { border: 1px solid var(--border); border-radius: 8px; padding: 1.15rem 1.3rem; background: #fff; }
.gb-card-title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 1.08rem; margin: 0 0 .5rem; }
.gb-contact-list { list-style: none; margin: .6rem 0; padding: 0; font-size: .93rem; }
.gb-contact-list li { margin-bottom: .3rem; }
.gb-note { font-size: .88rem; color: var(--text-soft); margin: .6rem 0 0; }

.gb-steps { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0; }
.gb-steps li { counter-increment: step; position: relative; padding-left: 2.6rem; margin-bottom: .9rem; }
.gb-steps li::before {
  content: counter(step); position: absolute; left: 0; top: .1rem; width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff;
  font-weight: 700; font-size: .85rem;
}

.gb-alt-route { border-left: 4px solid var(--gold); background: var(--gold-soft); padding: .9rem 1.1rem; border-radius: 0 6px 6px 0; margin: 0 0 1.5rem; }
.gb-alt-route p { margin: 0; font-size: .93rem; }

.gb-ways { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gb-way { border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1rem; }
.gb-way h3 { margin: 0 0 .4rem; font-size: .98rem; }
.gb-way p { margin: 0; font-size: .9rem; }

.gb-a11y-page details { border-bottom: 1px solid var(--border-light); padding: .8rem 0; }
.gb-a11y-page summary { font-weight: 600; cursor: pointer; }
.gb-a11y-page details p { margin: .6rem 0 0; font-size: .93rem; }
.gb-statement-meta { font-size: .84rem; color: var(--text-soft); border-top: 1px solid var(--border-light); padding-top: 1rem; }

/* ── Complaint form ───────────────────────────────────────────────────────── */
#ada-complaint-form { margin-top: 1rem; }
.gb-form-status { font-size: .84rem; color: var(--text-soft); margin: 0 0 .6rem; min-height: 1.2em; }

.gb-progress { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.75rem; }
.gb-progress li {
  display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600;
  color: var(--text-soft); background: var(--paper); border: 1px solid var(--border);
  border-radius: 999px; padding: .3rem .8rem;
}
.gb-progress li.is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.gb-progress li.is-done { border-color: var(--navy); color: var(--navy); }
.gb-progress-num { font-weight: 700; }

.gb-step { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.gb-step[hidden] { display: none; }
.gb-step > legend {
  font-family: var(--serif); font-weight: 700; font-size: 1.22rem; color: var(--navy);
  padding: 0; margin: 0 0 1.1rem; float: left; width: 100%;
}
.gb-step > legend + * { clear: both; }

.gb-field { margin: 0 0 1.2rem; }
.gb-field label, .gb-field > legend { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .35rem; }
.gb-field input[type="text"], .gb-field input[type="tel"], .gb-field input[type="email"],
.gb-field input[type="date"], .gb-field input[type="file"], .gb-field select, .gb-field textarea {
  width: 100%; max-width: 32rem; font: inherit; font-size: .95rem; padding: .55rem .65rem;
  border: 1px solid var(--slate-light); border-radius: 6px; background: #fff; color: var(--text);
}
.gb-field textarea { max-width: 40rem; }
.gb-field-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gb-req { color: var(--alert); font-weight: 700; }
.gb-optional { font-weight: 400; color: var(--text-soft); font-size: .85rem; }
.gb-help { display: block; font-size: .82rem; color: var(--text-soft); margin-top: .3rem; max-width: 46ch; }

.gb-choice { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .95rem; margin-bottom: .45rem; cursor: pointer; }
.gb-choice input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; flex: none; accent-color: var(--navy); }

/* Errors carry an icon and words, never colour alone (WCAG 1.4.1). */
.gb-field-error { display: block; color: var(--alert); font-size: .85rem; font-weight: 600; margin-top: .3rem; }
.gb-field-error::before { content: "⚠ "; }
[aria-invalid="true"] { border-color: var(--alert) !important; border-left-width: 4px !important; }

.gb-error-summary { border: 2px solid var(--alert); border-radius: 8px; background: #fdf7f7; padding: 1rem 1.2rem; margin: 0 0 1.4rem; }
.gb-error-summary h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--alert); }
.gb-error-summary h3::before { content: "⚠ "; }
.gb-error-summary ul { margin: 0; padding-left: 1.1rem; }
.gb-error-summary li { margin-bottom: .3rem; font-size: .92rem; }
.gb-error-summary a { color: var(--alert); }

.gb-form-nav { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.gb-certify { border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1.1rem; background: var(--paper); }
.gb-certify .gb-choice { margin-bottom: 0; }
.gb-review { border-left: 4px solid var(--navy); background: var(--paper); padding: .9rem 1.1rem; border-radius: 0 6px 6px 0; margin-bottom: 1.4rem; }
.gb-review h3 { margin: 0 0 .5rem; font-size: 1rem; }

.gb-confirm { border: 2px solid #1c6b45; background: #f2f9f4; border-radius: 8px; padding: 1.25rem 1.4rem; margin: 0 0 2.5rem; }
.gb-confirm h2 { margin: 0 0 .6rem; color: var(--ok); }
.gb-confirm-error { border-color: var(--alert); background: #fdf7f7; }
.gb-confirm-error h2 { color: var(--alert); }
.gb-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; padding: 2px 6px; border-radius: 4px; border: 1px solid #bcd9c7; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .gradus-header-inner { flex-wrap: wrap; position: relative; }
  .gb-brand img { width: 46px; }
  .gb-wordmark { font-size: 1.12rem; }
  .gb-wordmark span { font-size: .62rem; letter-spacing: .1em; }

  .gradus-navigation { margin-left: auto; }
  .gradus-navigation ul {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: var(--navy); padding: .3rem 0;
    box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); z-index: 200;
  }
  .gradus-navigation ul.open { display: flex; }
  .gradus-navigation a { color: #fff; padding: .7rem var(--space); font-size: .95rem; white-space: normal; border-bottom: 0; }
  .gradus-navigation a:hover, .gradus-navigation .current-menu-item a { background: rgba(255,255,255,.08); border-bottom: 0; }
  .gradus-menu-toggle { display: block; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── "What we changed" notes bar ─────────────────────────────────────────────
   Sits at the top of the content on any page that carries notes (see
   inc/content-fixes.php, which injects it and numbers the callouts). It is a
   bar, not a floating widget: it must be readable, in the tab order, and gone
   from the flow when the page has nothing to point at. */
.gb-notes-bar {
  display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap;
  margin: 0 0 1.9rem; padding: .7rem .9rem .7rem 1rem;
  background: #fffdf5; border: 1px solid #e3d5a4; border-left: 4px solid var(--gold);
  border-radius: 0 6px 6px 0;
}
.gb-notes-bar-t { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: #4a3806; }
.gb-notes-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(201,162,39,.22);
}
.gb-notes-bar-a {
  margin-left: auto; flex: 0 0 auto; font-size: .88rem; font-weight: 700;
  color: var(--navy); background: #fff; border: 1px solid #a08a3f; border-radius: 6px;
  padding: .4rem .9rem; text-decoration: none; white-space: nowrap;
}
.gb-notes-bar-a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.gb-notes-bar-a:focus-visible, .gb-note:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The bar follows the reader down the page without covering content: sticky to
   the top of the viewport, then released once the article ends. */
@supports (position: sticky) {
  .gb-notes-bar { position: sticky; top: 0; z-index: 20; box-shadow: 0 6px 14px -12px rgba(0,0,0,.5); }
  .admin-bar .gb-notes-bar { top: 32px; }
  @media (max-width: 782px) { .admin-bar .gb-notes-bar { top: 46px; } }
}
/* A note lands mid-viewport when the stepper jumps to it, so it needs air and a
   visible focus ring that is not the browser default on a div. */
.gb-callout[data-gb-note] { scroll-margin-top: 5rem; }
.gb-callout[data-gb-note]:focus { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 0 6px 6px 0; }
/* Screen-reader-only live region for the stepper ("Note 2 of 4"). */
.gb-notes-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 480px) {
  .gb-notes-bar-a { margin-left: 0; width: 100%; text-align: center; }
  /* Search: at 320px the input and button cannot share a row without the button
     being pushed past the viewport edge (measured: 365px wide in a 320px
     viewport). Stack them instead of shrinking the tap target. */
  .gb-search, .gradus-site-search { flex-direction: column; align-items: stretch; }
  .gb-search button, .gradus-site-search button { width: 100%; }
}


/* ── "what we fixed on this page" toast ───────────────────────────────────── */
/*
   The one-line proof that has to land before the page is judged: four real forms
   where the old site had four dead PDFs. Coloured on purpose — a reviewer clicking
   through eight pages must be able to tell "this is the demonstration" from
   running content without reading it first. Gold is the theme's accent, but the
   message also carries an icon, a heading and a close button, so colour is never
   the only signal (WCAG 1.4.1). Contrast: --text #1b2433 on #faf3dd is 12.9:1,
   --navy #12284b on #faf3dd is 11.6:1.
*/
.gb-toast {
  display: flex; gap: .9rem; align-items: flex-start;
  margin: 0 0 1.5rem; padding: 1rem 1.1rem;
  border: 1px solid var(--border); border-left: 6px solid var(--gold);
  border-radius: 10px; background: var(--gold-soft); color: var(--text);
  box-shadow: 0 10px 26px -22px rgba(11, 27, 52, .85);
  /* A page-load animation, not a scripted one: it must survive a blocked script,
     and reduced-motion users get the notice already in place (see below). */
  animation: gb-toast-in .5s cubic-bezier(.16, .84, .44, 1) both;
}
/* Class-level display:flex outranks the UA rule for [hidden], so state it here or
   a dismissed toast stays on screen. */
.gb-toast[hidden] { display: none; }
.gb-toast--green { border-left-color: var(--ok); background: #f1f8f3; }
.gb-toast--blue { border-left-color: var(--link); background: var(--blue-light); }
.gb-toast-ic { flex: 0 0 auto; margin-top: .12rem; color: var(--navy); }
.gb-toast--green .gb-toast-ic { color: var(--ok); }
.gb-toast--blue .gb-toast-ic { color: var(--link); }
.gb-toast-b { flex: 1 1 auto; min-width: 0; }
.gb-toast-h { margin: 0 0 .25rem; font-family: var(--serif); font-size: 1rem; font-weight: 700;
  color: var(--navy); letter-spacing: .005em; }
.gb-toast-t { font-size: .97rem; line-height: 1.55; }
.gb-toast-t > :last-child { margin-bottom: 0; }
.gb-toast-t p { margin: 0; }
.gb-toast-x { flex: 0 0 auto; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  padding: 0; border: 1px solid rgba(18, 40, 75, .25); border-radius: 999px;
  background: #fff; color: var(--navy); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.gb-toast-x:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.gb-toast-x:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gb-toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; }

@keyframes gb-toast-in {
  0%   { opacity: 0; transform: translateY(-10px) scale(.985); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* Motion is a preference, not a default. The notice is still there, in colour. */
@media (prefers-reduced-motion: reduce) {
  .gb-toast { animation: none; }
  .gb-toast.is-leaving { transition: none; }
}

@media (max-width: 480px) {
  .gb-toast { gap: .7rem; padding: .85rem .9rem; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .gradus-header, .gradus-footer, .gb-utility, .gb-alert, .gradus-navigation, .gb-quick-actions, .gb-form-nav { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .gb-a11y-page { max-width: none; }
}