@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,580..800;1,9..144,580..800&display=swap');

/* =================================================================
   GVPH SHARED STYLESHEET  -  gvph-shared.css
   Granville Vance Public Health
   =================================================================

   HOW TO USE ON A NEW PAGE:
   ──────────────────────────
   1. Link Google Fonts in <head>:
      <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet" />

   2. Link this file next:
      <link rel="stylesheet" href="gvph-shared.css" />

   3. Add a <style> block AFTER for page-specific styles only.

   4. Wrap your page content in:
      <main class="page-main"> ... </main>
      This gives the fade-in on every page load.

   5. Copy the standard <header>, alert bar, <footer>, and
      initNav() <script> from any existing page.

   UPDATING BRAND COLORS:
   ──────────────────────
   Edit the :root variables - changes apply everywhere instantly.

================================================================= */

/* =================================================================
   DESIGN TOKENS
================================================================= */
:root {
  --teal-deep:   #0a3d4a;
  --teal-mid:    #0d5c73;   /* unchanged: pages hardcode it in hero gradients */
  --teal-bright: #0e7fa8;   /* unchanged: white .btn-teal text = 4.55:1 (AA) at this value */
  --green-vivid: #7ab929;
  --green-lime:  #a8d429;
  --green-light: #dff0b8;
  --blue-accent: #1587d4;
  --purple-alt:  #4a4ea6;
  --white:  #ffffff;
  --bg:     #f7f6f1;        /* warm gallery paper (was mint); ink = 15.36:1 */
  --bg-alt: #eef0e6;        /* companion paper; muted = 5.83:1 (AA) */
  --ink:    #0b2129;        /* printed density */
  --muted:  #44606b;        /* 6.20:1 on paper, 6.71:1 on white (AA) */
  --line:   rgba(11,33,41,.14);  /* crisper editorial hairlines */
  /* Layered contact/ambient/cast shadows */
  --shadow-sm: 0 1px 2px rgba(11,33,41,.05), 0 3px 8px rgba(11,33,41,.04), 0 8px 20px rgba(11,33,41,.05);
  --shadow-md: 0 2px 4px rgba(11,33,41,.06), 0 8px 18px rgba(11,33,41,.06), 0 18px 38px rgba(11,33,41,.09);
  --shadow-lg: 0 3px 6px rgba(11,33,41,.07), 0 14px 30px rgba(11,33,41,.09), 0 28px 60px rgba(11,33,41,.12);
  --r-sm: 10px;
  --r-md: 14px;             /* printed page, not app */
  --r-lg: 18px;
  --r-xl: 22px;
  --container: 1240px;
  --nav-h: 72px;
  --t: 240ms cubic-bezier(.33,1,.68,1);  /* ease-out-cubic */
  /* Two-layer focus ring: white inner separates on dark surfaces, teal outer
     passes the 3:1 non-text minimum on light surfaces */
  --ring: 0 0 0 2px var(--white), 0 0 0 4px var(--teal-bright);
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  /* Signature gesture: the logo's green-to-teal run (hero rule, footer bar, kickers) */
  --grad-signature: linear-gradient(90deg, var(--green-vivid), var(--green-lime) 42%, var(--teal-bright));
}

/* =================================================================
   RESET
================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
}
body {
  margin: 0;
  font-family: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  letter-spacing: .002em;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
/* 2026-07-24: author display rules (like the img one above) override the
   browser's built-in [hidden] handling, so "hidden" images were showing -
   e.g. the Composer's framed hero photo stacking above the scrolling
   campaigns. Restore the attribute's meaning site-wide. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

.container {
  width: min(calc(100% - 2.5rem), var(--container));
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   SOCIAL FEED (2026-07-25)

   Replaces the Facebook Page Plugin the WordPress site used. Posts are
   collected by the dashboard and baked into data/social.json, so this is
   ordinary site markup - no Meta SDK, no third-party script, no cookies
   dropped on a visitor, and it styles like the rest of the site instead
   of like an embed someone pasted in.

   Built from the same tokens as every other card here (--r-md, --line,
   --shadow-sm, --muted) so it reads as part of the page. Deliberately
   restrained: no Facebook blue, no logos wider than a word, because a
   health department's own updates should not look like an advert for a
   social network.
   ═══════════════════════════════════════════════════════════════════ */
.gvph-social { padding: 0; }
.gvph-social-head {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 1.1rem;
}
.gvph-social-head h2 {
  margin: 0; color: var(--teal-deep);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.015em;
}
.gvph-social-head .gvph-social-sub {
  margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6;
}
.gvph-social-head .gvph-social-follow {
  margin-left: auto; font-weight: 700; font-size: .85rem;
  color: var(--teal-mid); text-decoration: none; white-space: nowrap;
}
.gvph-social-head .gvph-social-follow:hover,
.gvph-social-head .gvph-social-follow:focus-visible { text-decoration: underline; }

/* Caps at three across on purpose. auto-fill was giving four on a wide
   screen, which left the six-post news grid as 4 + 2 - a stranded row that
   reads as a mistake. Three lands as 3, or 3+3, every time. */
.gvph-social-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
@media (min-width: 1100px) {
  .gvph-social-grid { grid-template-columns: repeat(3, 1fr); }
}

.gvph-social-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.gvph-social-card:hover,
.gvph-social-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(11,33,41,.22);
  box-shadow: 0 2px 4px rgba(11,33,41,.06), 0 10px 24px rgba(11,33,41,.10), 0 20px 44px rgba(11,33,41,.07);
}

/* Fixed ratio so a mixed bag of portrait and landscape photos still lines
   up in a tidy grid - the thing that makes most embedded feeds look untidy. */
.gvph-social-media {
  position: relative; display: block;
  aspect-ratio: 4 / 3; background: var(--bg-alt, #eef1ea);
  overflow: hidden;
}
.gvph-social-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.gvph-social-card:hover .gvph-social-media img { transform: scale(1.035); }

/* Small, quiet source mark. A word, not a logo. */
.gvph-social-tag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(10,61,74,.86); color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: .26rem .55rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.gvph-social-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.gvph-social-play span {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(10,61,74,.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.gvph-social-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }

.gvph-social-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.gvph-social-date { font-size: .74rem; color: var(--muted); letter-spacing: .02em; }
.gvph-social-text {
  margin: 0; color: var(--ink); font-size: .91rem; line-height: 1.62;
  /* Keeps every card the same height without cutting a word in half. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.gvph-social-more {
  margin-top: auto; padding-top: .35rem;
  font-size: .82rem; font-weight: 700; color: var(--teal-mid);
}

/* No posts, or the file never loaded: show nothing rather than an empty
   frame. The section only appears when it has something to say. */
.gvph-social:empty, .gvph-social[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gvph-social-card, .gvph-social-media img { transition: none; }
  .gvph-social-card:hover { transform: none; }
  .gvph-social-card:hover .gvph-social-media img { transform: none; }
}

/* Office-closure strip (2026-07-25). Written by gvph-shared.js from
   data/closures.json. Amber while a closure is coming up, red on the day
   itself - a visitor about to drive to Oxford should not have to read
   carefully to find out the doors are shut. Both carry an icon-free text
   label as well as colour, so it does not rely on colour alone. */
.gvph-closure {
  background: #8a5a00;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.gvph-closure.is-today { background: #9c2a1c; }
.gvph-closure-inner {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  padding: 9px 0;
  font-size: .88rem;
  line-height: 1.5;
}
.gvph-closure strong {
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .72rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: .22rem .6rem;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .gvph-closure-inner { padding: 8px 0; font-size: .84rem; }
}

/* Keep in-page anchor jumps aligned beneath the sticky header.
   2026-07-25: this used to be calc(var(--nav-h) + 10px), which the browser
   ADDS to html{scroll-padding-top} above - roughly a whole nav height of
   overshoot on every jump. Only one of the two may carry the offset, and
   scroll-padding-top is the one that also covers keyboard and
   scrollIntoView paths, so this drops to 0.

   gvph-shared.js then does the precise placement: it measures whatever is
   actually stuck to the top at this breakpoint and lands the section's
   first heading just under it, which CSS cannot do because each section
   has a different amount of its own top padding. These declarations are
   the no-JS fallback. */
[id] {
  scroll-margin-top: 0;
}

::selection { background: rgba(122,185,41,.35); color: var(--teal-deep); }

/* Quiet ambient washes - the paper canvas should stay calm so type leads */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 48% at 8% 2%, rgba(122,185,41,.05), transparent 62%),
    radial-gradient(ellipse 50% 45% at 95% 10%, rgba(14,127,168,.04), transparent 58%);
}

/* =================================================================
   PAGE FADE-IN
================================================================= */
@keyframes gvph-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-main {
  animation: gvph-fade-in 0.4s ease forwards;
}

/* =================================================================
   TYPOGRAPHY
================================================================= */
h1, h2, h3, h4 {
  margin: 0 0 .75rem;
  line-height: 1.15;
  letter-spacing: -.018em;
  font-family: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}
h1, h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto; /* display sizes auto-select the sharp optical cut */
  font-weight: 640;
  letter-spacing: -.024em;
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; }
h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
p  { margin: 0 0 1rem; }
.lead { font-size: 1.04rem; color: var(--muted); max-width: 60ch; line-height: 1.75; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem; border-radius: 999px;
  background: rgba(47,158,115,.16); color: var(--teal-deep);
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-vivid), var(--blue-accent));
  flex-shrink: 0;
}
.eyebrow-light {
  background: rgba(93,193,155,.2) !important;
  border: 1px solid rgba(93,193,155,.36) !important;
  color: var(--green-lime) !important;
}

/* =================================================================
   BUTTONS
================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .72rem 1.3rem; border: none; border-radius: 999px;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .86rem;
  letter-spacing: .015em;
  cursor: pointer; transition: transform var(--t), box-shadow var(--t), filter var(--t);
  white-space: nowrap; text-decoration: none;
}
.btn:hover { transform: translateY(-1px); filter: saturate(1.03); }
.btn:active { transform: translateY(0); }
/* Dark ink on the brand-green gradient: 4.95–6.81:1 (AA at any size).
   The previous white-on-green failed AA at 2.4–3.3:1. */
.btn-primary {
  background: linear-gradient(135deg, var(--green-vivid), var(--green-lime));
  color: var(--teal-deep);
  box-shadow: 0 1px 2px rgba(11,33,41,.12), 0 10px 24px rgba(95,159,34,.20);
}
.btn-primary:hover {
  color: #062830;
  box-shadow: 0 2px 4px rgba(11,33,41,.12), 0 14px 30px rgba(95,159,34,.28);
}
.btn-secondary { background: var(--white); color: var(--teal-deep); box-shadow: var(--shadow-sm); }
.btn-teal { background: linear-gradient(135deg, var(--teal-mid), var(--teal-bright)); color: #fff; box-shadow: 0 1px 2px rgba(11,33,41,.12), 0 10px 24px rgba(13,92,115,.20); }
.btn-teal:hover { box-shadow: 0 2px 4px rgba(11,33,41,.12), 0 14px 30px rgba(13,92,115,.28); }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); }
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* Outline button for LIGHT surfaces (2026-07-25).
   .btn-outline above is white-on-transparent - it only works on a dark hero
   or a photo. Dropped onto a pale section it is invisible, which is exactly
   what happened to "View Benefits Summary" on the careers block. Use this
   one anywhere the background is paper-coloured.
   Contrast: #0a3d4a on #f7f5ef is about 9.4:1, comfortably past WCAG AA. */
.btn-outline-ink {
  background: transparent;
  color: var(--teal-deep);
  border: 2px solid var(--teal-deep);
}
.btn-outline-ink:hover,
.btn-outline-ink:focus-visible {
  background: var(--teal-deep);
  color: #fff;
  border-color: var(--teal-deep);
}
.btn-sm { padding: .48rem .95rem; font-size: .8rem; }

/* Outlined button treatment on green feature bands */
.cta-band .btn,
.info-band .btn,
.appt-band .btn,
.triage-band .btn {
  background: rgba(255,255,255,.04) !important;
  color: var(--teal-deep) !important;
  border: 2px solid rgba(10,61,74,.78) !important;
  box-shadow: none !important;
}
.cta-band .btn:hover,
.info-band .btn:hover,
.appt-band .btn:hover,
.triage-band .btn:hover {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(10,61,74,.9) !important;
  color: #062830 !important;
}

/* =================================================================
   ALERT BAR
================================================================= */
.alert-bar {
  background: linear-gradient(90deg, #0f2740, var(--teal-mid));
  color: rgba(255,255,255,.88); font-size: .85rem; font-weight: 500;
  padding: .65rem 0; text-align: center; border-bottom: 2px solid var(--green-vivid);
}
.alert-bar strong { color: var(--green-lime); }
.alert-bar a { color: var(--green-lime); text-decoration: underline; }

/* =================================================================
   NAVIGATION
================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 5000;
  background: linear-gradient(180deg, rgba(16,42,67,.96), rgba(16,42,67,.90));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(16,42,67,.22);
}
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--nav-h);
}
.brand { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.brand img { width: 50px; height: 50px; border-radius: 50%; object-fit: contain; }
.brand-name { font-weight: 800; color: #fff; font-size: .95rem; line-height: 1.2; }
.brand-sub { display: block; font-size: .76rem; color: rgba(255,255,255,.60); font-weight: 500; }
.primary-nav { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
/* Bridge hover gap between nav trigger and dropdown */
.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}
.nav-link {
  display: flex; align-items: center; gap: .3rem;
  color: rgba(255,255,255,.88); font-weight: 600; font-size: .88rem;
  padding: .65rem .92rem; border-radius: 10px;
  transition: background var(--t), color var(--t), transform var(--t);
  cursor: pointer; white-space: nowrap; user-select: none;
}
.nav-link:hover, .nav-item.open > .nav-link { background: rgba(255,255,255,.13); color: #fff; }
.nav-link:hover { transform: translateY(-1px); }
.nav-link .chevron {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t); flex-shrink: 0;
}
.nav-item.open > .nav-link .chevron { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 238px; background: var(--white); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  padding: .5rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t), transform var(--t), visibility var(--t); z-index: 6000;
}
.nav-item.open > .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown-label { padding: .48rem .85rem .28rem; font-size: .71rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.dropdown a { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; border-radius: 9px; color: var(--ink); font-size: .88rem; font-weight: 500; transition: background var(--t), color var(--t); }
.dropdown a:hover { background: var(--bg-alt); color: var(--teal-deep); font-weight: 600; }
.dropdown a.current { background: rgba(10,61,74,.06); color: var(--teal-deep); font-weight: 700; }
.dropdown .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-vivid); flex-shrink: 0; }
.dropdown-divider { height: 1px; background: var(--line); margin: .32rem 0; }
.nav-cta {
  background: linear-gradient(135deg, var(--green-vivid), var(--green-lime)) !important;
  color: var(--teal-deep) !important; font-weight: 800 !important;
  border-radius: 999px !important; padding: .6rem 1.2rem !important;
}
.nav-cta:hover {
  color: #0b2238 !important;
  filter: saturate(1.02) brightness(1.03);
}

/* Public Website editor quick preset, 2026-06-16. */
body.gv-theme-civic {
  --gv-theme-navy: #0b2a4a;
  --gv-theme-navy-2: #123c63;
  --gv-theme-teal: #0f7f8f;
  --gv-theme-aqua: #d7eef2;
  --gv-theme-gold: #f4ae11;
  --gv-theme-ink: #10243e;
}
body.gv-theme-civic::before {
  background:
    radial-gradient(ellipse 60% 50% at 8% 2%, rgba(215,238,242,.14), transparent 62%),
    radial-gradient(ellipse 46% 42% at 95% 8%, rgba(15,127,143,.12), transparent 58%);
}
body.gv-theme-civic .site-header {
  background: var(--white);
  border-bottom: 1px solid rgba(11,42,74,.12);
  box-shadow: 0 8px 24px rgba(11,42,74,.10);
}
body.gv-theme-civic .brand img {
  border-radius: 9px;
}
body.gv-theme-civic .brand-name {
  color: var(--gv-theme-ink);
}
body.gv-theme-civic .brand-sub {
  color: #5c6f82;
}
body.gv-theme-civic .nav-link {
  color: var(--gv-theme-ink);
  font-weight: 700;
  border-radius: 10px;
}
body.gv-theme-civic .nav-link:hover,
body.gv-theme-civic .nav-item.open > .nav-link,
body.gv-theme-civic .nav-item:hover > .nav-link {
  background: var(--gv-theme-aqua);
  color: var(--gv-theme-ink);
}
body.gv-theme-civic .primary-nav:hover .nav-item.open > .nav-link {
  color: var(--gv-theme-ink);
}
body.gv-theme-civic .dropdown {
  min-width: 280px;
  padding: .82rem;
  border-radius: 14px;
  border: 1px solid rgba(11,42,74,.12);
  box-shadow: 0 18px 42px rgba(11,42,74,.20);
}
body.gv-theme-civic .dropdown-label {
  color: var(--gv-theme-teal);
  letter-spacing: .12em;
}
body.gv-theme-civic .dropdown a {
  gap: .75rem;
  padding: .7rem .72rem;
  color: var(--gv-theme-ink);
  font-size: .94rem;
  font-weight: 700;
}
body.gv-theme-civic .dropdown a:hover,
body.gv-theme-civic .dropdown a.current {
  background: rgba(215,238,242,.62);
  color: var(--gv-theme-ink);
}
body.gv-theme-civic .dropdown .dot {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--gv-theme-aqua);
  flex-shrink: 0;
}
body.gv-theme-civic .dropdown .dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.8px solid var(--gv-theme-teal);
  border-radius: 50%;
}
body.gv-theme-civic .nav-cta {
  background: var(--gv-theme-navy) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: .72rem 1.12rem !important;
}
body.gv-theme-civic .alert-bar {
  background: var(--gv-theme-aqua);
  color: #0c6572;
  border-bottom: 0;
}
body.gv-theme-civic .alert-bar strong,
body.gv-theme-civic .alert-bar a {
  color: var(--gv-theme-teal);
}
body.gv-theme-civic .hero,
body.gv-theme-civic .page-hero,
body.gv-theme-civic .resource-hero {
  background: linear-gradient(135deg, var(--gv-theme-navy), #126579);
  border-bottom: 0;
}
body.gv-theme-civic .hero-eyebrow,
body.gv-theme-civic .eyebrow-light {
  background: rgba(215,238,242,.13) !important;
  border: 1px solid rgba(215,238,242,.32) !important;
  color: #dff6fa !important;
}
body.gv-theme-civic .hero-stat strong {
  color: var(--gv-theme-gold);
}
body.gv-theme-civic .btn,
body.gv-theme-civic .gvz .gvz-btn,
body.gv-theme-civic .hero-call-btn {
  border-radius: 10px;
  letter-spacing: 0;
}
body.gv-theme-civic .btn-primary,
body.gv-theme-civic .gvz .gvz-btn,
body.gv-theme-civic .hero-call-btn {
  background: var(--gv-theme-gold);
  color: #071526;
  box-shadow: 0 10px 22px rgba(244,174,17,.24);
}
body.gv-theme-civic .btn-primary:hover,
body.gv-theme-civic .gvz .gvz-btn:hover,
body.gv-theme-civic .hero-call-btn:hover {
  background: #f8bb2c;
  color: #071526;
  box-shadow: 0 12px 28px rgba(244,174,17,.28);
}
body.gv-theme-civic .btn-secondary {
  background: var(--gv-theme-navy);
  color: #fff;
  box-shadow: 0 10px 22px rgba(11,42,74,.18);
}
body.gv-theme-civic .btn-outline {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
}
body.gv-theme-civic .btn-outline:hover {
  background: rgba(255,255,255,.14);
}
body.gv-theme-civic .cta-band .btn,
body.gv-theme-civic .info-band .btn,
body.gv-theme-civic .appt-band .btn,
body.gv-theme-civic .triage-band .btn {
  border-radius: 10px !important;
}

/* Desktop fallback: dropdowns open on hover even if page JS differs */
@media (hover: hover) and (pointer: fine) {
  /* Prevent click-open states from sticking while using hover navigation */
  .primary-nav:hover .nav-item.open > .dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
  }
  .primary-nav:hover .nav-item.open > .nav-link {
    background: transparent;
    color: rgba(255,255,255,.88);
  }
  .nav-item:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .primary-nav:hover .nav-item.open:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-item:hover > .nav-link {
    background: rgba(255,255,255,.13);
    color: #fff;
  }
}

/* =================================================================
   BREADCRUMB
================================================================= */
.breadcrumb { background: var(--white); border-bottom: 1px solid var(--line); padding: .72rem 0; }
.breadcrumb-inner { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--muted); }
.breadcrumb-inner a { color: var(--teal-mid); font-weight: 600; }
.breadcrumb-inner a:hover { color: var(--teal-deep); text-decoration: underline; }
.breadcrumb-inner .sep { opacity: .45; }

/* =================================================================
   PAGE SUBNAV (about-style)
================================================================= */
.page-subnav {
  background: var(--white);
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: var(--nav-h);
  z-index: 900;
}
.page-subnav-inner {
  display: flex;
  align-items: center;
  gap: .25rem;
  overflow-x: auto;
  padding: 0 .5rem;
  scrollbar-width: none;
}
.page-subnav-inner::-webkit-scrollbar { display: none; }
.page-subnav-link {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .85rem 1rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--t), border-color var(--t);
  text-decoration: none;
}
.page-subnav-link:hover { color: var(--teal-deep); }
.page-subnav-link.active {
  color: var(--teal-deep);
  border-bottom-color: var(--green-vivid);
}

/* =================================================================
   SECTION UTILITIES
================================================================= */
.section { padding: 48px 0; }
.section-alt { background: var(--white); }
.section-head { margin-bottom: 24px; }
.section-head .lead { margin-top: .5rem; }
.text-center { text-align: center; }
.text-center .lead { margin-inline: auto; text-align: center; }

/* Retire legacy secondary quick-link bars sitewide. */
.quick-links-bar,
.qlbar {
  display: none !important;
}

/* Glass surface utility for premium cards/panels */
.glass-panel {
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 16px 44px rgba(10,61,74,.12);
  backdrop-filter: blur(12px);
}

/* Shared card tokens and safe hover behavior */
:root {
  --card-radius: var(--r-md);
  --card-border: 1.5px solid var(--line);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
}
.resource-card,
.service-card,
.program-card,
.team-card,
.bf-card,
.appt-step,
.appt-type,
.eligibility-card,
.provide-item,
.reason-card,
.doc-card,
.info-card,
.form-card,
.location-card,
.dept-card,
.urgent-card,
.mailing-card,
.office-card,
.tile,
[class*="tile"] {
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.resource-card:hover,
.service-card:hover,
.program-card:hover,
.team-card:hover,
.bf-card:hover,
.appt-step:hover,
.appt-type:hover,
.eligibility-card:hover,
.provide-item:hover,
.reason-card:hover,
.doc-card:hover,
.info-card:hover,
.form-card:hover,
.location-card:hover,
.dept-card:hover,
.urgent-card:hover,
.mailing-card:hover,
.office-card:hover,
.tile:hover,
[class*="tile"]:hover {
  box-shadow: var(--card-shadow-hover);
}

/* Icon blobs */
.icon-blob { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-blob-teal   { background: linear-gradient(135deg, var(--teal-mid), var(--teal-bright)); }
.icon-blob-green  { background: linear-gradient(135deg, var(--green-vivid), var(--green-lime)); }
.icon-blob-blue   { background: linear-gradient(135deg, var(--blue-accent), #0da8d4); }
.icon-blob-purple { background: linear-gradient(135deg, var(--purple-alt), var(--blue-accent)); }

/* Color accent bars */
.accent-green  { background: linear-gradient(90deg, var(--green-vivid), var(--green-lime)); }
.accent-teal   { background: linear-gradient(90deg, var(--teal-mid), var(--teal-bright)); }
.accent-blue   { background: linear-gradient(90deg, var(--blue-accent), var(--teal-bright)); }
.accent-purple { background: linear-gradient(90deg, var(--purple-alt), var(--blue-accent)); }

/* =================================================================
   IMAGE DEPTH
================================================================= */
/* Add a subtle border + shadow so photo blocks do not feel flat. */
.mosaic-img,
.photo-slot,
.about-img-block,
.cimg,
.wic-img-block,
[class*="img-block"] {
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 14px 34px rgba(10,61,74,.14);
}

/* =================================================================
   FOOTER
================================================================= */
.footer-green-bar { height: 6px; background: var(--grad-signature); }
.site-footer { background: var(--teal-deep); color: rgba(255,255,255,.80); padding-top: 50px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding-bottom: 22px; align-items: start; }
.footer-brand img { width: 52px; height: 52px; border-radius: 50%; margin-bottom: .85rem; }
.footer-brand p { font-size: .88rem; max-width: 30ch; color: rgba(255,255,255,.58); }
/* Contact block under the brand (2026-07-24) - editable in Pages & Menu. */
.footer-contact { display: flex; flex-direction: column; gap: .3rem; margin-top: .8rem; font-size: .84rem; }
.footer-contact a, .footer-contact span { color: rgba(255,255,255,.75); }
.footer-contact a:hover { color: var(--green-lime); text-decoration: underline; }
.footer-brand h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 620;
  letter-spacing: -.018em;
  line-height: 1.12;
  max-width: 14ch;
  color: #fff;
  margin-bottom: .4rem;
}
.footer-col h4 { color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .85rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .32rem; }
.footer-links a { font-size: .87rem; color: rgba(255,255,255,.62); transition: color var(--t); }
.footer-links a:hover { color: var(--green-lime); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.10); padding: 10px 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .83rem; color: rgba(255,255,255,.52); flex-wrap: wrap; }
.footer-bottom a { color: var(--green-lime); }
.footer-bottom a:hover { text-decoration: underline; }

/* Better keyboard accessibility also looks polished */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 10px;
}

/* =================================================================
   RESPONSIVE
================================================================= */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-bar { flex-wrap: wrap; align-items: center; }
  .brand-sub { display: none; }
  .primary-nav {
    display: flex;
    width: 100%;
    overflow-x: auto;
    gap: .1rem;
    padding-bottom: .2rem;
    scrollbar-width: thin;
  }
  .nav-link { padding: .55rem .74rem; font-size: .82rem; }
  .nav-cta { padding: .52rem .9rem !important; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Search 2026-07-25: the icon-tile and category-pill rules that used to live
   here are gone. Results are now a typographic index (section heading + title
   + description), so there is nothing left to normalise. */

/* =================================================================
   POLISH LAYER
   Sitewide refinements: mobile navigation, events, reveal motion,
   back-to-top, skip link, print. Loaded after the base styles so
   every rule here intentionally wins.
================================================================= */

/* Balanced headline rag */
h1, h2 { text-wrap: balance; }

/* Neutralize UA button styles on the nav search trigger (some pages
   relied on page-level CSS for this; make it universal). */
.nav-search-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: .88rem;
  cursor: pointer;
}

/* Consistent focus treatment on form fields */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ---- Skip link (keyboard users) ---- */
.skip-link {
  position: fixed;
  top: -80px;
  left: 14px;
  z-index: 9500;
  background: var(--teal-deep);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  padding: .68rem 1.1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  transition: top var(--t);
}
.skip-link:focus-visible { top: 12px; }

/* ---- Mobile navigation ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t), border-color var(--t);
}
.nav-toggle:hover { background: rgba(255,255,255,.18); }
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #102a43, #0d3344);
  border-bottom: 3px solid var(--green-vivid);
  box-shadow: 0 28px 50px rgba(7,30,45,.45);
  max-height: calc(100dvh - var(--nav-h) - 8px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index: 5500;
}
.mobile-drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
html.gvph-nav-open { overflow: hidden; }
.mobile-drawer-inner { padding: .9rem 1.1rem 1.2rem; }
.mobile-group { border-bottom: 1px solid rgba(255,255,255,.10); }
.mobile-group:last-of-type { border-bottom: none; }
.mobile-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  padding: .85rem .25rem;
  cursor: pointer;
}
.mobile-group-label svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: rgba(255,255,255,.7);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t);
  flex-shrink: 0;
}
.mobile-group-label[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-group-links {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.mobile-group-links > div { overflow: hidden; }
.mobile-group-label[aria-expanded="true"] + .mobile-group-links { grid-template-rows: 1fr; }
.mobile-group-links a {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  font-weight: 500;
  padding: .55rem .45rem;
  border-radius: 9px;
  transition: background var(--t), color var(--t);
}
.mobile-group-links a:hover { background: rgba(255,255,255,.10); color: #fff; }
.mobile-group-links a .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-vivid);
  flex-shrink: 0;
}
.mobile-group-links .mobile-sub-label {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  padding: .65rem .45rem .25rem;
}
.mobile-drawer-ctas {
  display: flex;
  gap: .6rem;
  padding-top: 1rem;
}
.mobile-drawer-ctas > * {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
}
.mobile-drawer-search {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
}
.mobile-drawer-portal {
  background: linear-gradient(135deg, var(--green-vivid), var(--green-lime));
  border: none;
  color: var(--teal-deep);
}

@media (max-width: 920px) {
  .nav-bar { flex-wrap: nowrap; }
  .primary-nav { display: none !important; }
  .nav-toggle { display: inline-flex; }
  .site-header { position: sticky; }
  /* Compact brand in hamburger mode. body-prefixed so it also beats pages
     that re-declare header CSS in their own style blocks (e.g. env-health). */
  body .brand-sub { display: none; }
  body .brand { min-width: 0; }
}

/* ---- Upcoming events ---- */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 18px;
}
.event-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--card-shadow);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.event-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(122,185,41,.45);
}
.event-date {
  width: 56px;
  flex-shrink: 0;
  text-align: center;
  border-radius: 13px;
  background: linear-gradient(160deg, var(--teal-mid), var(--teal-bright));
  color: #fff;
  padding: .5rem 0 .6rem;
  box-shadow: 0 6px 16px rgba(13,92,115,.28);
}
.event-date .ev-mon {
  display: block;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-lime);
}
.event-date .ev-day {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}
.event-info { min-width: 0; }
.event-info h3 { margin: .1rem 0 .35rem; font-size: .98rem; line-height: 1.3; }
.event-meta {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  font-size: .8rem;
  color: var(--muted);
}
.event-meta span {
  display: flex;
  align-items: center;
  gap: .42rem;
  min-width: 0;
}
.event-meta svg { flex-shrink: 0; opacity: .75; }
.event-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .5rem;
  color: var(--teal-mid);
  font-size: .82rem;
  font-weight: 700;
}
.event-link:hover { color: var(--teal-deep); text-decoration: underline; }
.events-empty {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  background: var(--white);
  border: 1.5px dashed rgba(10,61,74,.18);
  border-radius: var(--r-md);
  padding: 1.4rem 1.5rem;
  color: var(--muted);
}
.events-empty .icon-blob { border-radius: 50%; }
.events-empty p { margin: 0; font-size: .92rem; max-width: 52ch; }
.events-empty .btn { margin-left: auto; }
@media (max-width: 700px) {
  .events-empty .btn { margin-left: 0; }
}

/* ---- Reveal on scroll (class added by JS only, so no-JS stays visible) ---- */
.gvph-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.gvph-reveal.gvph-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .gvph-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Back to top ---- */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 4500;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--teal-mid), var(--teal-bright));
  color: #fff;
  box-shadow: 0 10px 26px rgba(10,61,74,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t), visibility var(--t), transform var(--t), filter var(--t);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* ---- Broken remote images fail silently ---- */
img.gvph-img-broken { display: none !important; }

/* ---- Site search overlay (shared chrome) ----
   2026-07-24: the overlay MARKUP ships on every page - including homepage
   layout variants - but its styles used to live only in each interior
   page's inline style block. Variant homepages therefore rendered the
   overlay unstyled and in-flow below the footer (the "navigate open
   close" text leak). The recipe now lives here so every current and
   future variant is covered; interior pages still carry an identical
   inline copy that loads later and wins harmlessly. */
.search-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,61,74,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(60px, 12vh, 120px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.search-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
/* Search panel, reworked 2026-07-25. David: "the search looks old and
   doesn't match the site."

   Three things were actually wrong, not just dated:
     - every result carried the SAME generic square icon, which read as a
       broken image (now one icon per kind of thing, in the renderer);
     - title and description sat on one line, so they ran together into a
       sentence rather than a heading with a subtitle;
     - the keyboard hints had lost their key glyphs, leaving the bare words
       "navigate open close" - now proper <kbd> badges.

   Styling now uses the site's own tokens - paper background, teal accent,
   --r-md radius, the standard hairline - so it belongs to this site
   instead of looking like a component borrowed from somewhere else. */
.search-box {
  width: min(620px, calc(100% - 2rem));
  background: var(--white);
  border: 1px solid var(--line);
  /* --r-md, the site's own card radius. The 20px pill-modal look was part
     of what made this read as a floating app widget rather than a page. */
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(10,61,74,.28), 0 4px 14px rgba(10,61,74,.14);
  overflow: hidden;
  transform: translateY(-10px) scale(.985);
  transition: transform .24s cubic-bezier(.2,.7,.3,1);
}
.search-overlay.open .search-box { transform: translateY(0) scale(1); }

.search-header {
  display: flex; align-items: center; gap: .8rem;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);          /* paper, so the input reads as a field */
}
.search-logo { color: var(--teal-mid); flex-shrink: 0; display: flex; }
.search-input {
  flex: 1; border: none; outline: none;
  font-family: inherit; font-size: 1.02rem; font-weight: 500;
  color: var(--ink); background: transparent;
}
.search-input::placeholder { color: var(--muted); opacity: .72; }
.search-close {
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--muted); padding: .32rem; border-radius: 8px; display: flex;
  transition: background .15s, color .15s, border-color .15s;
}
.search-close:hover, .search-close:focus-visible {
  background: var(--white); border-color: var(--line); color: var(--ink);
}

/* overscroll-behavior: contain (2026-07-25, David) - without it, wheeling
   past the first or last result chains the scroll through to the page
   underneath, so the whole site lurches while you are trying to read the
   list. `contain` stops the chain at the panel. */
.search-results {
  max-height: 60vh; overflow-y: auto; padding: 0;
  overscroll-behavior: contain;
}
.search-results:empty { display: none; }

/* An index, not a list of app rows. Each category appears ONCE as a
   heading; the rows beneath it are pure type. */
.sr-group { padding: 0 0 .35rem; }
.sr-group + .sr-group { border-top: 1px solid var(--line); }
.sr-section {
  padding: 1rem 1.4rem .3rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .82rem; font-style: italic; font-weight: 700;
  letter-spacing: .01em; text-transform: none;
  color: var(--teal-mid);
}

/* Rows are set like index entries: a strong term, a light gloss beneath,
   separated by a hairline. The accent is a rule on the left edge on the
   active row - the same device the site uses on its quote and note
   blocks - rather than a filled tile. */
.sr-item {
  display: block; position: relative;
  padding: .62rem 1.4rem .68rem;
  cursor: pointer; text-decoration: none; color: var(--ink);
  border-left: 3px solid transparent;
  transition: background .13s ease, border-left-color .13s ease;
}
.sr-item::after {
  content: ''; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0;
  border-bottom: 1px solid var(--line);
}
.sr-item:last-child::after { border-bottom: 0; }
/* One highlight at a time (2026-07-25, David). These two used to be a single
   `.sr-item:hover, .sr-item.focused` rule, which lit the mouse row and the
   keyboard row simultaneously. Now the panel carries data-input and only the
   device in use paints. Keep them as separate rules — merging them back is
   the bug. See the matching note in gvph-shared.js. */
.search-results[data-input="mouse"] .sr-item:hover,
.search-results[data-input="key"] .sr-item.focused {
  background: var(--bg);
  border-left-color: var(--green-vivid);
}
/* Touch has no hover; without this a tap leaves nothing lit at all. */
@media (hover: none) {
  .search-results .sr-item.focused { background: var(--bg); border-left-color: var(--green-vivid); }
}

.sr-title {
  display: block;
  font-weight: 700; font-size: .95rem; line-height: 1.4; color: var(--teal-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-desc {
  display: block;
  font-size: .82rem; line-height: 1.5; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Underline the match rather than highlighting it - a printed index would
   not put a coloured block behind a word. */
.sr-mark {
  background: none; color: inherit; font-weight: 800;
  box-shadow: inset 0 -.42em 0 rgba(202,220,100,.55);
  border-radius: 0; padding: 0;
}

.sr-empty {
  padding: 2.2rem 1.25rem; text-align: center;
  color: var(--muted); font-size: .92rem; line-height: 1.6;
}

.search-footer {
  display: flex; gap: 1.1rem; align-items: center;
  padding: .6rem 1.1rem;
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-size: .74rem; color: var(--muted);
}
.search-footer span { display: inline-flex; align-items: center; gap: .35rem; }
.search-footer kbd {
  font-family: inherit; font-size: .68rem; font-weight: 700;
  line-height: 1; color: var(--ink);
  background: var(--white); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px;
  padding: .2rem .38rem; min-width: 1.15rem; text-align: center;
}
@media (max-width: 560px) {
  .search-footer { display: none; }   /* no physical keyboard to hint at */
}
@media (prefers-reduced-motion: reduce) {
  .search-box, .sr-item { transition: none; }
  .search-overlay.open .search-box { transform: none; }
}

/* ---- Print ---- */
@media print {
  .alert-bar,
  .site-header,
  .breadcrumb,
  .page-subnav,
  .site-footer,
  .back-to-top,
  .skip-link,
  .search-overlay,
  .mobile-drawer,
  .nav-toggle {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .section { padding: 16px 0; }
  a { text-decoration: underline; }
}

/* =================================================================
   BROADSHEET LAYER  -  editorial art direction
   Typography-led pop: oversized Fraunces display, de-pilled kickers,
   the signature green→teal rule, and printed-page restraint.
   Body-prefixed selectors intentionally outrank page <style> blocks.
================================================================= */

/* ---- De-pilled eyebrows → tracked editorial kickers ---- */
body .eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--teal-mid);
  font-size: .78rem;
  letter-spacing: .16em;
  gap: .7rem;
}
body .eyebrow::before {
  width: 28px;
  height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--green-vivid), var(--green-lime));
}
body .eyebrow-light {
  background: transparent !important;
  border: 0 !important;
  color: var(--green-lime) !important;
}

/* ---- Oversized heroes + signature gradient rule (all 15 inner pages) ---- */
body .page-hero, body .resource-hero, body .privacy-hero {
  /* One navy block (2026-07-25, concept 2). Eight pages each declared their
     own teal hero gradient, which left the navy masthead handing off to a
     teal that belonged to a different palette. Set centrally here because
     `body .page-hero` (0,1,1) out-specifies the per-page `.page-hero`
     (0,1,0) - so one rule re-skins every inner page and the page files stay
     untouched. Ramps navy into the brand teal instead of colliding with it. */
  background: linear-gradient(145deg, #142E4A 0%, #1B4C6B 55%, #1E5878 100%);
  padding: 64px 0 60px;
  border-bottom: 6px solid var(--green-vivid); /* paint fallback */
  border-image: var(--grad-signature) 1;
  box-shadow: inset 0 -44px 80px -44px rgba(3,22,29,.5); /* quiet cinematic keel */
}
/* Two pages roll their own hero class and were left behind on the old teal
   when the rest went navy. Background only - their padding and borders are
   deliberately different from the standard hero and should stay that way. */
body .news-hero, body .jobs-hero {
  background: linear-gradient(145deg, #142E4A 0%, #1B4C6B 55%, #1E5878 100%);
}
body .page-hero h1, body .resource-hero h1, body .privacy-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.03;
  letter-spacing: -.027em;
  max-width: 16ch; /* protects right-hand stat columns at 900–1100px */
  text-shadow: 0 2px 24px rgba(3,22,29,.35);
}
body .page-hero-content p, body .page-hero .lead,
body .resource-hero .container p, body .privacy-hero p { font-size: 1.05rem; }
@media (max-width: 760px) {
  body .page-hero, body .resource-hero, body .privacy-hero { padding: 46px 0 44px; }
}

/* ---- Editorial section openers: hairline above the kicker ---- */
body .section-head {
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
body .section-head h2 { margin-top: .35rem; margin-bottom: .4rem; }
body .section-head.text-center { border-top: 0; padding-top: 0; }

/* ---- Hairline-first card hovers (shadow bloom rides --card-shadow-hover) ---- */
body .resource-card:hover, body .service-card:hover, body .program-card:hover,
body .team-card:hover, body .bf-card:hover, body .appt-step:hover,
body .appt-type:hover, body .eligibility-card:hover, body .provide-item:hover,
body .reason-card:hover, body .doc-card:hover, body .info-card:hover,
body .form-card:hover, body .location-card:hover, body .dept-card:hover,
body .urgent-card:hover, body .mailing-card:hover, body .office-card:hover,
body .tile:hover {
  border-color: rgba(11,33,41,.26);
  transform: translateY(-2px);
}

/* ---- Gradient-ink utility: one italic signature word on light surfaces.
   Stops measure 4.62 / 4.92 / 6.94 on paper - AA for normal text.
   <span class="ink-grad">word</span> ---- */
.ink-grad {
  font-style: italic;
  color: var(--teal-mid); /* solid fallback: 6.94:1 on paper */
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ink-grad {
    background: linear-gradient(94deg, #467d12, #177a52 50%, var(--teal-mid));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ---- Link underline sweep: an animated editorial rule ---- */
.footer-links a, .event-link, .breadcrumb-inner a {
  background-image: linear-gradient(90deg, var(--green-vivid), var(--green-lime));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size .28s cubic-bezier(.33,1,.68,1), color var(--t);
  padding-bottom: 1px;
}
.footer-links a:hover, .event-link:hover, .breadcrumb-inner a:hover {
  background-size: 100% 2px;
  text-decoration: none;
}

/* privacy.html hardcodes Playfair on its body h2s - follow the display swap */
body .privacy-body h2 { font-family: var(--font-display); }

/* ---- Mobile overflow guards ---- */
/* Email addresses are unbreakable strings that can blow out narrow columns */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Long-label buttons must wrap rather than widen the page on phones */
@media (max-width: 760px) {
  .btn { white-space: normal; text-align: center; }
}

/* Resource heroes (5 pages) keep a fixed-width stat column beside the title;
   stack them on small screens instead of overflowing the viewport. */
@media (max-width: 760px) {
  body .resource-hero .container {
    flex-direction: column;
    align-items: flex-start;
  }
  body .resource-hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
  }
  body .resource-hero-stats .hero-stat { flex: 1 1 110px; }
}

/* ── Fillable EH applications (2026-07-25, David) ─────────────────────
   Styled from the site's own tokens so the form reads as part of the page
   rather than an embedded app. Print rules at the bottom turn the filled
   form into the completed copy a visitor brings in. */

.gvf-open {
  flex: none;
  margin-left: .75rem;
  font-family: inherit; font-size: .74rem; font-weight: 700;
  letter-spacing: .02em;
  color: var(--teal-deep);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
  padding: .3rem .6rem;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.gvf-open:hover, .gvf-open:focus-visible {
  border-color: var(--teal-mid);
  background: var(--bg);
  color: var(--teal-deep);
  outline: none;
}

/* ── Form callout (2026-07-26) ───────────────────────────────────────────
   A standalone host for a fill-in-online form on a page that has no
   Environmental Health document rows - built for the PD-107 state employment
   application on the careers page. The "Fill it in online" button is injected
   by the form script into .gvf-callout-actions, so it is styled here as the
   PRIMARY action, unlike on an EH document row where it is a small secondary
   control sitting beside a filename.
   ─────────────────────────────────────────────────────────────────────── */
.gvf-callout {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
  padding: 1.15rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal-mid);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11, 33, 41, .06), 0 8px 20px rgba(11, 33, 41, .05);
}

.gvf-callout-body { flex: 1 1 22rem; min-width: 0; }
.gvf-callout-body h3 {
  margin: 0 0 .3rem;
  color: var(--teal-deep);
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.gvf-callout-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: .93rem;
}

.gvf-callout-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  flex: none;
}

/* order:-1 because the script APPENDS the button, so without it the secondary
   Download action would read as the primary one. */
.gvf-callout-actions .gvf-open {
  order: -1;
  margin-left: 0;
  /* Matches .btn exactly (padding, size, weight) so the injected button and the
     Download link are the SAME height. Measured at 375px: the .gvf-open default
     rendered 38px against the .btn's 48px, which both looked wrong and fell
     under the 44px tap target. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .72rem 1.3rem;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .015em;
  min-height: 48px;        /* 48px = the .btn's own natural height, measured */
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal-mid), var(--teal-bright));
  box-shadow: 0 1px 2px rgba(11, 33, 41, .12), 0 10px 24px rgba(13, 92, 115, .20);
}
.gvf-callout-actions .gvf-open:hover,
.gvf-callout-actions .gvf-open:focus-visible {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-mid));
}

.gvf-callout-actions .btn-secondary { border: 1px solid var(--line); }

@media (max-width: 720px) {
  .gvf-callout { padding: 1rem; gap: .9rem; }
  .gvf-callout-actions { width: 100%; }
  .gvf-callout-actions .btn,
  .gvf-callout-actions .gvf-open {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
}

.gvf-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(10, 61, 74, .72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(12px, 4vh, 48px) 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 2026-07-26 - cap the box to the viewport and scroll the BODY, not the
   whole overlay. The 71-question pre-opening checklist rendered a 5498px
   tall modal on an 812px phone, so reaching Cancel/Download meant scrolling
   ~4750px past every question. Header and footer are pinned now; only the
   questions move. Same shape .gvd-box already uses. The print block below
   resets all three, or a printed copy would be clipped to one screenful. */
.gvf-box {
  max-height: 100%;
  width: min(760px, 100%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 32px 80px rgba(10, 61, 74, .35);
  display: flex; flex-direction: column;
}

.gvf-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.4rem 1rem;
  border-bottom: 1px solid var(--line);
}
.gvf-head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem; line-height: 1.25; margin: 0;
  color: var(--teal-deep);
}
.gvf-head p { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.gvf-close {
  flex: none; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 1rem; line-height: 1;
  padding: .35rem; border-radius: 6px;
}
.gvf-close:hover { color: var(--ink); background: var(--bg); }

.gvf-body { padding: 1.1rem 1.4rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.gvf-section + .gvf-section { margin-top: 1.5rem; }
.gvf-section h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem; font-style: italic; font-weight: 700;
  color: var(--teal-mid); margin: 0 0 .1rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
.gvf-note { margin: .5rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }

.gvf-grid { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .8rem; }
.gvf-field { display: flex; flex-direction: column; gap: .25rem; }
.gvf-full { flex: 1 1 100%; }
.gvf-half { flex: 1 1 calc(50% - .5rem); min-width: 190px; }
/* .gvf-third was MISSING until 2026-07-26. Every form before the PD-107 used
   only full and half, so a "third" field fell through to .gvf-field's default
   `flex: 0 1 auto` and shrink-wrapped to its content - rows came out ragged,
   narrow radio groups collapsed to ~147px, and the grid overflowed its own
   scroll box by a few px. The PD-107 uses 49 of them.
   Basis is 33.333% minus .6rem: three items plus two .85rem gaps need at least
   .567rem taken off each, and the extra tenth keeps sub-pixel rounding from
   re-introducing the overflow. */
.gvf-third { flex: 1 1 calc(33.333% - .6rem); min-width: 170px; }
.gvf-field > label, .gvf-field legend {
  font-size: .8rem; font-weight: 700; color: var(--ink); letter-spacing: .01em;
}
.gvf-req { color: #a33; }
.gvf-help { font-size: .74rem; color: var(--muted); }

/* number added 2026-07-26 - the PD-107 is the first form to use it (7 fields:
   units completed, hours per week, employees supervised). Without it those
   inputs rendered completely unstyled next to their styled neighbours. */
.gvf-field input[type="text"], .gvf-field input[type="tel"],
.gvf-field input[type="date"], .gvf-field input[type="email"],
.gvf-field input[type="number"],
.gvf-field textarea {
  width: 100%; font-family: 'DM Sans', sans-serif; font-size: .92rem;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm, 6px);
  padding: .5rem .65rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.gvf-field input:focus, .gvf-field textarea:focus {
  outline: none; background: var(--white);
  border-color: var(--teal-bright);
  box-shadow: 0 0 0 3px rgba(14, 127, 168, .12);
}
.gvf-field input:user-invalid, .gvf-field textarea:user-invalid { border-color: #a33; }

/* Unsigned-but-required signature (2026-07-26). A canvas cannot show the
   browser's own validation bubble, so the state is drawn instead. */
.gvf-canvas-invalid { border-color: #a33 !important; box-shadow: 0 0 0 3px rgba(170, 51, 51, .12); }
.gvf-sig-err { display: block; margin-top: .3rem; font-size: .78rem; font-weight: 700; color: #a33; }

.gvf-field fieldset { border: 0; padding: 0; margin: 0; }
/* flex-wrap added 2026-07-26. Every form before the PD-107 had Yes/No or
   Yes/No/Maybe here, so a single row always fitted. The PD-107 brings a
   6-option ethnicity list, a 7-option age range and three long disability
   statements, which overflowed the row without wrapping. */
.gvf-radios { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .3rem; align-items: center; }

/* Clear a non-required radio group. The state form repeatedly says to leave a
   question blank when it does not apply, and a native radio cannot be
   un-checked once chosen. */
.gvf-radioclear {
  font-family: inherit; font-size: .74rem; font-weight: 700;
  color: var(--muted); background: none; border: 0;
  padding: .1rem .3rem; border-radius: 4px;
  cursor: pointer; text-decoration: underline;
}
.gvf-radioclear:hover, .gvf-radioclear:focus-visible { color: var(--teal-deep); outline: none; }
.gvf-radioclear[hidden] { display: none; }
.gvf-radio, .gvf-check label {
  display: inline-flex; align-items: flex-start; gap: .4rem;
  font-size: .86rem; font-weight: 400; color: var(--ink); line-height: 1.5;
  cursor: pointer;
}
.gvf-check label { align-items: flex-start; }
.gvf-check input { margin-top: .22rem; flex: none; }

.gvf-after {
  margin: 1.4rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--muted); line-height: 1.55;
}

.gvf-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.4rem 1.1rem;
  border-top: 1px solid var(--line);
}
.gvf-privacy { font-size: .76rem; color: var(--muted); line-height: 1.45; }
.gvf-actions { display: flex; gap: .5rem; }

@media (max-width: 560px) {
  .gvf-half, .gvf-third { flex: 1 1 100%; }
  .gvf-foot { flex-direction: column; align-items: stretch; }
  .gvf-actions { justify-content: flex-end; }
}

/* ── Printing the completed form ──────────────────────────────────────
   Everything except the dialog is hidden, the dialog becomes the page, and
   inputs render as ruled lines with the typed value on them — so it reads
   like a filled application rather than a screenshot of a web form. */
@media print {
  html.gvf-printing body > *:not(.gvf-overlay) { display: none !important; }
  html.gvf-printing .gvf-overlay {
    position: static; background: none; padding: 0; display: block; overflow: visible;
  }
  html.gvf-printing .gvf-box {
    width: auto; border: 0; box-shadow: none; border-radius: 0;
    max-height: none; height: auto; display: block;
  }
  html.gvf-printing .gvf-close,
  html.gvf-printing .gvf-foot,
  html.gvf-printing .gvf-help { display: none !important; }
  html.gvf-printing .gvf-head { padding: 0 0 .6rem; }
  html.gvf-printing .gvf-body { padding: 0; overflow: visible; max-height: none; height: auto; }
  html.gvf-printing .gvf-section { break-inside: avoid; }
  html.gvf-printing .gvf-field input[type="text"],
  html.gvf-printing .gvf-field input[type="tel"],
  html.gvf-printing .gvf-field input[type="date"],
  html.gvf-printing .gvf-field textarea {
    background: none; border: 0; border-bottom: 1px solid #444;
    border-radius: 0; padding: .1rem 0; color: #000;
  }
  html.gvf-printing .gvf-req { display: none; }
}

/* Drawn signature (2026-07-25, David) */
.gvf-sigwrap { position: relative; }
.gvf-canvas {
  display: block; width: 100%; height: 130px;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm, 6px);
  touch-action: none;            /* or a finger scrolls the page instead of drawing */
  cursor: crosshair;
}
.gvf-sigclear {
  position: absolute; top: 6px; right: 6px;
  font-family: inherit; font-size: .72rem; font-weight: 700;
  color: var(--muted); background: var(--white);
  border: 1px solid var(--line); border-radius: 5px;
  padding: .2rem .5rem; cursor: pointer;
}
.gvf-sigclear:hover { color: var(--ink); border-color: var(--teal-mid); }
.gvf-done { text-align: center; padding: 2rem 1rem; }
.gvf-done h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem; color: var(--teal-deep); margin: 0 0 .5rem;
}
.gvf-done p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 44ch; margin-inline: auto; }
@media print {
  html.gvf-printing .gvf-sigclear { display: none !important; }
  html.gvf-printing .gvf-canvas { border: 0; border-bottom: 1px solid #444; border-radius: 0; height: 90px; }
}

/* ── Document reader modal (2026-07-26) ─────────────────────────────────
   Information sheets open here instead of navigating away. Mirrors the
   fill-in-online modal's geometry so the two read as one family; the only
   real difference is that the body is a single tall PDF frame rather than
   a form, so it gets the full height it can take.
   ─────────────────────────────────────────────────────────────────────── */

.gvd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(14, 22, 28, .58);
  backdrop-filter: blur(2px);
  animation: gvd-fade .16s ease-out;
}

@keyframes gvd-fade { from { opacity: 0; } to { opacity: 1; } }

.gvd-box {
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  height: min(88vh, 100%);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(14, 22, 28, .32);
  overflow: hidden;
}

.gvd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(14, 22, 28, .12);
}

.gvd-head h2 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.3;
  font-weight: 700;
}

.gvd-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(14, 22, 28, .16);
  border-radius: 8px;
  background: #fff;
  color: inherit;          /* a <button> does not inherit colour on its own */
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}

.gvd-close:hover { background: rgba(14, 22, 28, .06); }

/* The frame carries the page; give it every pixel that is left. */
.gvd-body { flex: 1 1 auto; min-height: 0; background: #f2f4f5; }
.gvd-frame { display: block; width: 100%; height: 100%; border: 0; }

.gvd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 20px 14px;
  border-top: 1px solid rgba(14, 22, 28, .12);
}

.gvd-hint { font-size: .76rem; color: #5c6b73; line-height: 1.45; }
.gvd-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* The View button on an information card, matched to "Fill in online". */
.gvd-open {
  flex: 0 0 auto;
  margin-left: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(14, 22, 28, .18);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}

.gvd-open:hover { border-color: currentColor; background: rgba(14, 22, 28, .05); }

@media (max-width: 640px) {
  .gvd-overlay { padding: 0; }
  .gvd-box { width: 100%; height: 100%; border-radius: 0; }
  .gvd-foot { justify-content: stretch; }
  .gvd-actions { width: 100%; }
  .gvd-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* Printing the page should never print the reader chrome. */
@media print { .gvd-overlay { display: none !important; } }

/* ── Utility rail + dismissible notice (2026-07-26) ─────────────────────
   The notice bar carried a recruitment message AND the Nurse Triage number,
   and could not be dismissed. Split: the triage number is now a permanent,
   deliberately quiet rail; the notice above it can be closed.

   The rail is quieter than the notice on purpose. It is reference
   information someone goes looking for, not something to shout - and once
   the notice is dismissed it becomes the top element, sitting directly on
   the header like a utility strip should.
   ─────────────────────────────────────────────────────────────────────── */

.util-bar {
  background: #04222a;                 /* a shade under the header, so it reads as a base rail */
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  font-size: .78rem;
  line-height: 1.4;
  padding: .38rem 0;
  color: rgba(255, 255, 255, .82);
}

.util-bar-inner { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.util-bar a { color: #dceb94; text-decoration: none; border-bottom: 1px solid rgba(220, 235, 148, .4); }
.util-bar a:hover { border-bottom-color: #dceb94; }
.util-bar strong { font-weight: 700; }

/* Room for the close button so long notices never run under it.
   2026-07-26: 2.6rem was 4px too narrow - the button is 30px wide sitting
   .55rem from the edge, so the reserved strip has to be at least
   30 + 8.8 + a gap. Contact and WIC have alerts long enough to wrap to a
   line that ran under it. Expressed as a calc off the same numbers the
   button uses, so changing the button size cannot silently re-break it. */
.alert-bar.is-dismissible { position: relative; padding-right: calc(30px + .55rem + .6rem); }

.alert-dismiss {
  position: absolute;
  top: 50%;
  right: .55rem;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .85);     /* a button does not inherit colour */
  font-size: .74rem;
  line-height: 1;
  cursor: pointer;
}

.alert-dismiss:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.alert-dismiss:focus-visible { outline: 2px solid #dceb94; outline-offset: 2px; }

@media (max-width: 640px) {
  .util-bar { font-size: .74rem; padding: .34rem 0; }
  .alert-bar.is-dismissible { padding-right: calc(34px + .55rem + .6rem); }
  .alert-dismiss { width: 34px; height: 34px; }   /* thumb-sized on a phone */
}

@media print { .util-bar, .alert-dismiss { display: none !important; } }

/* ── Job posting accordion (2026-07-26) ─────────────────────────────────
   "View details" used to be a link to a PDF that opened a new tab. It now
   expands the posting in place and shows the announcement inline. Sized
   generously because a job announcement is a page someone actually reads,
   not a thumbnail to glance at.
   ─────────────────────────────────────────────────────────────────────── */

.gvz-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;          /* a <button> does not inherit colour on its own */
}

/* SPECIFICITY (fixed 2026-07-26) — the pill rule is injected by the builder as
   `.gvz .gvz-job .gvz-apply { display: inline-block }`, THREE classes, so it
   beat the one-class rule above and the flex context never existed:
   align-items and gap were inert and the empty bordered span floated to the
   pill's top-right corner, reading as a stray mark rather than a caret. Match
   the specificity instead of reaching for !important (per CLAUDE.md —
   !important loses to a more specific selector anyway).

   LAYOUT ONLY. Do NOT restate colour here: at four classes this rule also
   outranks the pill's own `color:#fff`, so carrying `color:inherit` across
   turned the white label AND caret dark against the teal pill. Measured, not
   assumed — the first attempt at this fix did exactly that. */
.gvz .gvz-job .gvz-apply.gvz-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* CSS caret - no icon dependency, no emoji.
   display:block so the box is real: as an INLINE box, width/height are ignored
   and the triangle hangs off the text baseline (that was the visible bug). In
   the flex row it is a flex item and align-items centres it; vertical-align is
   the fallback if the flex context is ever lost again. */
.gvz-caret {
  display: block;
  flex: 0 0 auto;
  vertical-align: middle;
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .16s ease;
}

.gvz-toggle.is-open .gvz-caret { transform: rotate(180deg); }

.gvz-job-doc {
  margin: -2px 0 1.4rem;
  border: 1px solid rgba(14, 22, 28, .14);
  border-radius: 12px;
  background: #f4f6f7;
  overflow: hidden;
  animation: gvz-open .18s ease-out;
}

@keyframes gvz-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.gvz-job-frame { display: block; width: 100%; height: min(72vh, 760px); border: 0; background: #fff; }

.gvz-job-doc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(14, 22, 28, .12);
}

.gvz-job-doc-hint { font-size: .76rem; color: #5c6b73; line-height: 1.45; }

@media (max-width: 640px) {
  .gvz-job-frame { height: min(64vh, 560px); }
  .gvz-job-doc-foot { justify-content: stretch; }
  .gvz-job-doc-foot .btn { flex: 1 1 auto; text-align: center; }
}

/* The inline document is chrome, not content - never print it. */
@media print { .gvz-job-doc { display: none !important; } }
