/* ==========================================================================
   AUTO-GENERATED FILE — DO NOT EDIT BY HAND.
   Compiled from css/src/ by _source/build_css.py (run build-css.bat).
   Edit the partials in css/src/ and recompile; changes here are overwritten.
   ========================================================================== */

/* ==========================================================================
   style.css — BUILD ENTRY (source of truth for the site's CSS)
   --------------------------------------------------------------------------
   The partials below are compiled, in this order, into ../style.css by
   _source/build_css.py (run build-css.bat). ORDER MATTERS — the CSS cascade
   depends on it. Edit these partials, never the compiled ../style.css.

   These @import lines are resolved at BUILD time (inlined into one file),
   not by the browser — so the site still ships a single CSS request.
   ========================================================================== */
/* ============================================================
   Hampton County Sheriff's Office — Design System
   ------------------------------------------------------------
   Colors: dark olive-ink / gold / cream / stone
   Type:   Poppins (headings) + Inter (body), self-hosted (see css/fonts.css)

   ARCHITECTURE
   All theme values (color, spacing, radius, shadow, motion) are CSS custom
   properties on :root below, so the whole palette is themeable from one
   place. Sections are grouped with banner comments (Header, Hero, Cards,
   Footer, Motion, Responsive, …) in the order the page uses them.

   SECURITY NOTE
   The site's Content-Security-Policy allows inline styles
   ("style-src 'self' 'unsafe-inline'") because a handful of one-off layout
   tweaks use the style="" attribute. Inline *styles* cannot execute code,
   so this is a low-risk, deliberate tradeoff; scripts remain locked to
   'self' with no inline JS allowed. See SECURITY.md.
   ============================================================ */

:root {
  --ink: #1d231b;
  --ink-2: #262e24;
  --ink-3: #313a2e;
  --gold: #c29a4b;
  --gold-dark: #a9823a;
  --gold-text: #8a672a; /* AA contrast on white for small text */
  --gold-pale: #ecdfc4;
  --cream: #f7f5ef;
  --stone: #edeae1;
  --line: #e0dccf;
  --paper: #ffffff;
  --text: #33362f;
  --muted: #6d6f66;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(29, 35, 27, 0.1);
  --shadow-sm: 0 4px 14px rgba(29, 35, 27, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
}

h1, h2, h3, h4, h5 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

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

a { color: var(--gold-text); }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 10px 18px;
  font-weight: 600;
  z-index: 200;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 12px 26px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.btn-outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-outline-ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline-ink:hover { background: var(--ink); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--gold);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 10px 0;
}
.brand-badge { width: 48px; height: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-top {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
}
.brand-bottom {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}

.main-nav { display: flex; align-items: center; gap: 18px; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-list > li { position: relative; }
.nav-list a, .drop-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #e9e7df;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 10px 12px;
  cursor: pointer;
}
.nav-list a:hover, .drop-toggle:hover { color: var(--gold); }
.nav-list a[aria-current="page"] { color: var(--gold); }
.drop-toggle .caret { transition: transform 0.2s; }
.drop-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--ink-2);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 8px 8px;
  list-style: none;
  padding: 8px 0;
  display: none;
  box-shadow: var(--shadow);
}
.has-drop.open .dropdown { display: block; }
.dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0.03em;
}
.dropdown a:hover { background: var(--ink-3); }

.nav-cta { padding: 10px 20px; font-size: 0.76rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1100px 620px at 82% 18%, var(--ink-3) 0%, var(--ink) 62%);
  color: #fff;
  padding: 110px 0 150px;
}
.hero::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  width: 440px;
  height: 440px;
  background: url("../images/badge.png") center / contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
  opacity: 0.6;
}
.hero .container { position: relative; z-index: 1; }
.hero-inner { max-width: 640px; }
.hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.hero h1 .gold { color: var(--gold); }
.hero p {
  font-size: 1.05rem;
  color: #d9d7cd;
  margin-bottom: 30px;
  max-width: 520px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Quick actions ---------- */
.quick-actions { margin-top: -70px; position: relative; z-index: 5; padding-bottom: 20px; }
.qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.qa-card {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 30px 20px 26px;
  border-right: 1px solid var(--line);
  transition: background 0.2s;
}
.qa-card:last-child { border-right: 0; }
.qa-card:hover { background: var(--cream); }
.qa-icon { color: var(--gold-dark); margin-bottom: 12px; }
.qa-card h3 {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.qa-card p { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

/* ---------- Sections ---------- */
.section { padding: 80px 0; }
.section-cream { background: var(--cream); }

.kicker {
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 10px;
}
.section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 18px; }
.section-intro { max-width: 720px; color: var(--muted); margin-bottom: 42px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.frame {
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow-sm);
}
.frame img { border-radius: 6px; }
.frame figcaption { padding: 12px 6px 2px; }
.split p + p { margin-top: 14px; }
.split .btn { margin-top: 26px; }

/* ---------- Info band / stats band ---------- */
.info-band { background: var(--ink); color: #fff; padding: 44px 0; }
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.info-item { display: flex; gap: 14px; align-items: flex-start; }
.info-item .qa-icon { color: var(--gold); margin: 2px 0 0; }
.info-item h3 {
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.info-item p { font-size: 0.95rem; color: #e9e7df; line-height: 1.5; }
.info-item a { color: #fff; text-decoration: none; }
.info-item a:hover { color: var(--gold); }

.stats-band { background: var(--ink); border-radius: var(--radius); color: #fff; padding: 40px 30px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stat .num {
  font-family: "Poppins", sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.1;
}
.stat .label { font-size: 0.9rem; color: #d9d7cd; margin-top: 4px; }

/* ---------- Card grids ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.card .qa-icon { margin-bottom: 16px; }
.card h3 { font-size: 1.02rem; margin-bottom: 10px; }
.card p { font-size: 0.9rem; color: var(--muted); }
.card .card-link {
  display: inline-block;
  margin-top: 14px;
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  text-decoration: none;
}
.card .card-link:hover { text-decoration: underline; }
.card-center { text-align: center; }
.card-center .qa-icon { display: flex; justify-content: center; }

/* ---------- Page header (interior) ---------- */
.page-header {
  position: relative;
  overflow: hidden;
  background: radial-gradient(900px 420px at 85% 30%, var(--ink-3) 0%, var(--ink) 65%);
  color: #fff;
  padding: 70px 0 56px;
  border-bottom: 3px solid var(--gold);
}
.page-header::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  width: 260px;
  height: 260px;
  background: url("../images/badge.png") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.page-header .container { position: relative; z-index: 1; }
.page-header .kicker { color: var(--gold); }
.page-header h1 {
  color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  max-width: 700px;
}
.breadcrumb { margin-top: 16px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.82rem; }
.breadcrumb a { color: var(--gold); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li + li::before { content: "›"; color: #8b8e83; margin-right: 6px; }
.breadcrumb [aria-current="page"] { color: #d9d7cd; }

/* ---------- Values / philosophy cards ---------- */
.value-card { text-align: center; border-top: 3px solid var(--gold); }

/* ---------- Accreditation seals ---------- */
.seal-row { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; }
.seal {
  width: 132px;
  text-align: center;
}
.seal .ring {
  width: 108px;
  height: 108px;
  margin: 0 auto 12px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--cream);
}
.seal p { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

/* ---------- Sheriff page ---------- */
.sheriff-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start;
}
.sheriff-grid h2 { font-size: 1.6rem; }
.sheriff-grid .title-line {
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 6px;
}
.quote-panel {
  background: var(--cream);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 32px 36px;
  max-width: 760px;
  margin: 0 auto;
}
.quote-panel blockquote {
  font-family: "Poppins", sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.55;
}
.quote-panel cite { display: block; margin-top: 14px; font-style: normal; color: var(--gold-dark); font-weight: 600; font-size: 0.9rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    linear-gradient(100deg, rgba(24, 29, 22, 0.95) 0%, rgba(24, 29, 22, 0.8) 100%),
    url("../images/office-2.jpg") center / cover no-repeat;
  border-radius: var(--radius);
  color: #fff;
  padding: 54px 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-band h2 { color: #fff; margin: 0; font-size: 1.45rem; max-width: 560px; }
.cta-band .phone {
  font-family: "Poppins", sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
}

/* ---------- Tabs ---------- */
.tabs { border-bottom: 2px solid var(--line); display: flex; gap: 4px; margin-bottom: 36px; flex-wrap: wrap; }
.tab-btn {
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  padding: 12px 22px;
  margin-bottom: -2px;
  cursor: pointer;
}
.tab-btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.tab-panel[hidden] { display: none; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.form-field input, .form-field textarea {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  padding: 12px 14px;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--gold); }
.form-note {
  display: none;
  margin-top: 18px;
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 0.9rem;
  color: var(--ink);
}
.form-note.show { display: block; }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-search { position: relative; margin-bottom: 26px; }
.faq-search input {
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 44px 12px 14px;
}
.faq-search .search-ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--gold-dark); }
.faq-cats { list-style: none; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-cats button {
  width: 100%;
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  padding: 13px 18px;
  cursor: pointer;
}
.faq-cats li:last-child button { border-bottom: 0; }
.faq-cats button[aria-pressed="true"] { background: var(--ink); color: var(--gold); }
.faq-cats button:hover:not([aria-pressed="true"]) { background: var(--cream); }

.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 0; }
.acc-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  padding: 20px 24px;
  cursor: pointer;
}
.acc-btn:hover { background: var(--cream); }
.acc-btn .acc-ic { flex: none; color: var(--gold-dark); transition: transform 0.2s; }
.acc-btn[aria-expanded="true"] .acc-ic { transform: rotate(45deg); }
.acc-body { padding: 0 24px 22px; color: var(--muted); font-size: 0.93rem; }
.acc-body[hidden] { display: none; }
.acc-item.hidden { display: none; }

/* ---------- News ---------- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter-btn {
  font-family: "Poppins", sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 9px 20px;
  cursor: pointer;
}
.filter-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--gold); }

.news-list { display: grid; gap: 20px; }
.news-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  transition: box-shadow 0.2s;
}
.news-card:hover { box-shadow: var(--shadow-sm); }
.news-card.hidden { display: none; }
/* Hidden until the visitor clicks "See More News" (see js/modules/news-more.js). */
.news-card.more-hidden { display: none; }
.news-date {
  background: var(--ink);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  padding: 12px 6px;
  height: fit-content;
}
.news-date .month {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
}
.news-date .day {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}
.news-date .year { display: block; font-size: 0.72rem; color: #b8b6ac; }
.news-body .tag {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 6px;
}
.news-body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.news-body p { font-size: 0.9rem; color: var(--muted); }

/* ---------- Employment ---------- */
.badge-panel {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 48px 40px;
  text-align: center;
  color: #fff;
}
.badge-panel img { width: 150px; margin: 0 auto 22px; }
.badge-panel h3 { color: #fff; font-size: 1.15rem; margin-bottom: 8px; }
.badge-panel p { color: #d9d7cd; font-size: 0.9rem; margin-bottom: 22px; }

.check-list { list-style: none; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.97rem; }
.check-list .check { flex: none; color: var(--gold-dark); margin-top: 3px; }

.benefit-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.benefit { text-align: center; padding: 24px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.benefit .qa-icon { display: flex; justify-content: center; margin-bottom: 10px; }
.benefit p { font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.4; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.contact-cards { display: grid; gap: 16px; }
.contact-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.contact-card .qa-icon { margin: 2px 0 0; }
.contact-card h3 {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 3px;
}
.contact-card p { font-size: 0.95rem; }
.contact-card a { color: var(--text); text-decoration: none; }
.contact-card a:hover { color: var(--gold-dark); }

.contact-form-panel {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 36px 34px;
}
.contact-form-panel h2 { font-size: 1.3rem; margin-bottom: 22px; }

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  line-height: 0;
}
.map-wrap iframe { width: 100%; height: 400px; border: 0; }

/* ---------- Inmate info ---------- */
.search-panel {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 36px 34px;
  max-width: 640px;
}
.search-panel h2 { font-size: 1.2rem; margin-bottom: 20px; }

/* ---------- Social feed (Instagram / Facebook highlights) ---------- */
.social-block { margin-top: 32px; text-align: center; }
.social-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.social-head .pic { display: flex; color: var(--gold-dark); }
.social-head h3 { font-size: 1.05rem; margin: 0; }
.social-head .handle { font-size: 0.85rem; color: var(--muted); }
.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.social-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; transition: box-shadow 0.2s, transform 0.2s;
}
.social-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.social-card img { width: 100%; height: 170px; object-fit: cover; }
.social-card .cap { padding: 12px 14px; }
.social-card .cap p { font-size: 0.85rem; line-height: 1.5; margin: 0 0 8px; }
.social-card .cap .date {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.social-card.more-hidden { display: none; }
.social-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
@media (max-width: 760px) {
  .social-grid { grid-template-columns: 1fr; }
}
.connect-center { text-align: center; }
.connect-center .kicker { justify-content: center; }
.connect-center .kicker::after { content: ""; width: 28px; height: 2px; background: var(--gold); flex: none; }
.connect-sub { max-width: 520px; margin: 4px auto 26px; color: var(--muted); }
.fb-panel {
  max-width: 540px; margin: 0 auto; background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.fb-embed { max-width: 500px; margin: 0 auto; }
.fb-embed iframe { width: 100%; max-width: 500px; height: 600px; display: block; border-radius: 8px; }
/* Featured Facebook posts — side by side (see js/modules/fb-featured.js) */
.fb-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fb-featured[hidden] { display: none; }
.fb-post { background: var(--paper); border-radius: 10px; overflow: hidden; }
.fb-post iframe { width: 100%; border: 0; }
@media (max-width: 860px) { .fb-featured { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #cfcdc3; margin-top: 90px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding: 64px 0 44px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 16px; }
.footer-brand img { width: 52px; }
.site-footer h3 {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer p { font-size: 0.88rem; }
.footer-links { list-style: none; display: grid; gap: 9px; }
.footer-links a { color: #cfcdc3; text-decoration: none; font-size: 0.88rem; }
.footer-links a:hover { color: var(--gold); }
.footer-contact { list-style: none; display: grid; gap: 10px; font-size: 0.88rem; }
.footer-contact a { color: #cfcdc3; text-decoration: none; }
.footer-contact a:hover { color: var(--gold); }
.social-row { display: flex; gap: 12px; margin-top: 18px; }
.social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #e9e7df;
  transition: border-color 0.2s, color 0.2s;
}
.social-row a:hover { border-color: var(--gold); color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: #9b9e92;
}
.footer-bottom .em { color: var(--gold); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
  .qa-card:nth-child(2n) { border-right: 0; }
  .qa-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .sheriff-grid, .contact-layout, .faq-layout { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .benefit-row { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .split .frame { max-width: 560px; }
}

/* Nav collapses early — full menu + CTA won't fit mid-width screens */
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-2);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 24px;
    border-bottom: 3px solid var(--gold);
    box-shadow: var(--shadow);
  }
  .main-nav.open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a, .drop-toggle { width: 100%; padding: 13px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .nav-list > li > a::after { display: none; }
  .dropdown { position: static; box-shadow: none; border-top: 0; background: var(--ink-3); border-radius: 6px; animation: none; }
  .nav-cta { margin-top: 16px; text-align: center; }
}

@media (max-width: 760px) {
  .hero { padding: 80px 0 120px; }
  .hero::before { width: 280px; height: 280px; right: -60px; opacity: 0.05; }
  .stats-grid { grid-template-columns: 1fr; gap: 30px; }
  .card-grid, .qa-grid, .info-grid { grid-template-columns: 1fr; }
  .qa-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .qa-card:last-child { border-bottom: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .benefit-row { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .news-card { grid-template-columns: 78px 1fr; gap: 18px; padding: 20px; }
  .cta-band { padding: 38px 28px; }
  .section { padding: 56px 0; }
}

/* ============================================================
   Motion & identity pass (ui-ux-pro / taste / transitions)
   ============================================================ */

/* Kicker rule — gold dash before section labels */
.kicker { display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--gold); flex: none; }
.kicker[style*="text-align:center"], .text-center .kicker { justify-content: center; }

/* Est. 1878 hero line */
.est-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.est-line::before, .est-line::after { content: ""; width: 34px; height: 1px; background: var(--gold); opacity: 0.6; }

/* Numbered division cards */
.numbered { counter-reset: div; }
.numbered .card { position: relative; counter-increment: div; overflow: hidden; }
.numbered .card::before {
  content: counter(div, decimal-leading-zero);
  position: absolute;
  top: 10px;
  right: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--stone);
  z-index: 0;
}
.numbered .card > * { position: relative; z-index: 1; }

/* Card hover refinement — gold edge, icon shift */
.card { border-top: 3px solid transparent; }
.card:hover { border-top-color: var(--gold); }
.value-card:hover { border-top-color: var(--gold-dark); }
.card .qa-icon, .qa-card .qa-icon { transition: transform 0.25s ease-out; }
.card:hover .qa-icon, .qa-card:hover .qa-icon { transform: translateY(-3px); }

/* Nav link underline grow */
.nav-list > li > a, .drop-toggle { position: relative; }
.nav-list > li > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease-out;
}
.nav-list > li > a:hover::after, .nav-list > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* Dropdown entrance */
.dropdown { animation: dropIn 0.18s ease-out; }
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Button press + lift */
.btn { transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s ease-out, box-shadow 0.2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(29, 35, 27, 0.18); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Hero content entrance */
.hero-inner > * { opacity: 0; transform: translateY(16px); animation: riseIn 0.6s ease-out forwards; }
.hero-inner > *:nth-child(2) { animation-delay: 0.12s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.24s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.36s; }
@keyframes riseIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveals (JS adds .reveal, then .in) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease-out, transform 0.55s ease-out; transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Accordion body fade */
.acc-body { animation: fadeIn 0.25s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* News cards + filter feedback */
.news-card { transition: box-shadow 0.2s, transform 0.2s ease-out; }
.news-card:hover { transform: translateX(4px); }
.filter-btn, .faq-cats button, .tab-btn { transition: background 0.18s, color 0.18s, border-color 0.18s; }

/* Reduced motion: settle everything instantly */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-inner > * { opacity: 1; transform: none; animation: none; }
}

/* ============================================================
   Bug-fix pass
   ============================================================ */

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: 96px; }

/* Centered kickers get a symmetric dash */
.kicker[style*="text-align:center"]::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--gold);
  flex: none;
}

/* Ghost division numbers shouldn't collide with hover top-border */
.numbered .card::before { top: 13px; }

/* Keep long emails/URLs from overflowing cards on small screens */
.contact-card p, .footer-contact li, .acc-body p { overflow-wrap: anywhere; }

/* Mobile menu button hit area */
.nav-toggle { min-height: 44px; }

/* ---------- Slideshow (Youth Explorers gallery) ---------- */
.slider {
  position: relative;
  max-width: 860px;
  margin: 32px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--ink);
}
.slider { height: 640px; }
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.slide.active { opacity: 1; pointer-events: auto; z-index: 1; }
.slide img {
  width: auto;
  max-width: 100%;
  max-height: 540px;
  height: auto;
  margin: auto;
}
.slide figcaption {
  flex: none;
  color: #d9d7cd;
  font-size: 0.85rem;
  padding: 12px 18px;
  background: var(--ink);
}
@media (max-width: 760px) {
  .slider { height: 440px; }
  .slide img { max-height: 350px; }
}
.slider-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(29, 35, 27, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.slider-btn:hover { background: var(--gold); color: var(--ink); }
.slider-btn.prev { left: 14px; }
.slider-btn.next { right: 14px; }
.slider-dots {
  position: absolute;
  z-index: 2;
  bottom: 52px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.slider-dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.slider-dots button[aria-current="true"] { background: var(--gold); border-color: var(--gold); }

/* ============================================================
   Editor-only affordances
   ------------------------------------------------------------
   The ".hcso-editing" class is added to <html> ONLY by the internal
   content editor (admin.html) while edit mode is on. It never appears on
   the public site, so every rule here is inert in production. It gives the
   editor a Wix-like hover outline over editable text and images.
   ============================================================ */
.hcso-editing body { cursor: text; }
.hcso-editing :is(h1, h2, h3, h4, h5, p, li, a, span, figcaption):hover {
  outline: 2px dashed var(--gold);
  outline-offset: 3px;
}
.hcso-editing img:hover {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  cursor: pointer;
}