/* =====================================================
   Caldwell County, Texas — Official Website Styles
   v2.0 — with county seal, courthouse imagery, Google Fonts
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Merriweather:wght@700;900&display=swap');

:root {
  --cc-blue:       #1a3a5c;
  --cc-blue-dark:  #102540;
  --cc-blue-mid:   #24527f;
  --cc-blue-light: #e8f0f8;
  --cc-blue-xlight:#f0f5fb;
  --cc-gold:       #c8951a;
  --cc-gold-text:  #7a5c00;
  --cc-gold-light: #f5e6c4;
  --cc-gold-bright:#e8a820;
  --cc-red:        #8b0000;
  /* Brighter patriotic red used for visual accents (page-banner + footer
     stripes, hero slide-badge). On white: 6.21:1, on cc-blue navy: 4.16:1.
     Meets WCAG 1.4.11 (3:1) for UI components. */
  --cc-red-bright: #b91c1c;
  --cc-gray:       #f0f2f5;
  --cc-gray-mid:   #d0d6de;
  --cc-text:       #1e2530;
  --cc-text-light: #505a68;
  --cc-white:      #ffffff;
  --radius:        8px;
  --radius-lg:     14px;
  --shadow-sm:     0 1px 4px rgba(0,0,0,.08);
  --shadow:        0 2px 10px rgba(0,0,0,.10);
  --shadow-md:     0 4px 20px rgba(0,0,0,.13);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.18);
  --transition:    .22s ease;
  --max-width:     1280px;
  --focus-ring:    0 0 0 3px #fff, 0 0 0 5px #1a3a5c;
  --focus-ring-light: 0 0 0 3px #1a3a5c, 0 0 0 5px #fff;

  /* Courthouse & Seal image references */
  /* Version-bust the query string when the underlying image changes so
     browsers don't serve a stale cached copy. Bump ?v= on every swap. */
  --img-courthouse: url('../img/courthouse-full.jpg?v=2');
  --img-seal: url('../img/seal-gold.png');
}

/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--cc-text);
  background: var(--cc-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Global safety net against horizontal overflow — different browsers
     deal with sub-pixel rounding + scrollbar reservation differently, and
     even a 1px overshoot causes the page to clip on the right edge
     (search button, "Jobs" label, etc. in the screenshots). overflow-x
     here pins the page to the viewport without losing scroll-y. */
  overflow-x: hidden;
  max-width: 100%;
}
html { overflow-x: hidden; max-width: 100%; }
h1, h2, h3, h4, h5 {
  font-family: 'Merriweather', 'Georgia', serif;
  line-height: 1.25;
  color: var(--cc-blue);
}
a { color: var(--cc-blue-mid); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--cc-gold-text); }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ── Skip Link ────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 99999;
  background: var(--cc-blue-dark); color: #fff !important;
  padding: .75rem 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700; font-size: 1rem;
  text-decoration: none !important;
  border: 3px solid var(--cc-gold);
  transition: top .15s ease;
}
.skip-link:focus { top: 0; outline: none; box-shadow: var(--focus-ring); }

/* ── Focus ────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--cc-blue); outline-offset: 3px; }
.site-header :focus-visible,
.main-nav :focus-visible,
.utility-bar :focus-visible,
.site-footer :focus-visible,
.page-banner :focus-visible,
.hero :focus-visible {
  outline-color: var(--cc-gold); outline-offset: 3px;
}
*:focus:not(:focus-visible) { outline: none; }

/* ── Visually hidden (screen reader only) ─────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Layout ───────────────────────────────────────── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 3.5rem 0; }
.section-title {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.55rem; color: var(--cc-blue); font-weight: 700;
  margin-bottom: 1.5rem; padding-bottom: .55rem;
  border-bottom: 3px solid var(--cc-gold); display: inline-block;
}

/* ── Utility Bar ──────────────────────────────────── */
.utility-bar {
  background: var(--cc-blue-dark);
  color: rgba(255,255,255,.8);
  font-size: .8rem; padding: .38rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.utility-bar .container {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: .5rem;
}
.utility-bar a { color: rgba(255,255,255,.78); }
.utility-bar a:hover { color: var(--cc-gold-bright); text-decoration: none; }  /* WCAG AA: gold-bright on navy is 5.16:1 (vs 4.31 for --cc-gold) */
.utility-links { display: flex; gap: 1.2rem; align-items: center; }
.translate-btn {
  background: var(--cc-gold); color: var(--cc-blue-dark) !important;
  padding: .2rem .7rem; border-radius: 3px;
  font-weight: 700; font-size: .76rem; letter-spacing: .02em;
}

/* ── Header ───────────────────────────────────────── */
.site-header {
  background: linear-gradient(135deg, var(--cc-blue-dark) 0%, #1e4470 100%);
  padding: .85rem 0;
  position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 3px 16px rgba(0,0,0,.35);
  border-bottom: 3px solid var(--cc-gold);
}
.header-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1.2rem;
}
.logo-block {
  display: flex; align-items: center; gap: 1rem;
  text-decoration: none !important;
}
/* Real county seal image — transparent background, no white backing */
.logo-seal-img {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  object-fit: contain;
  background: transparent;
  padding: 0;
  flex-shrink: 0;
  transition: filter var(--transition);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.logo-block:hover .logo-seal-img {
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.55)) brightness(1.1);
}
/* Fallback emoji seal (hidden when img loads) */
.logo-seal-fallback {
  width: 64px; height: 64px;
  background: radial-gradient(circle at 35% 35%, var(--cc-gold-bright), var(--cc-gold));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.35);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.logo-text h1 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.35rem; font-weight: 900; color: #fff;
  line-height: 1.15; letter-spacing: .01em;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.logo-text span {
  font-size: .76rem; color: var(--cc-gold-light);
  font-style: italic; letter-spacing: .04em;
  display: block; margin-top: .1rem;
}
.header-search {
  display: flex; align-items: center; gap: .5rem;
}
.header-search input {
  padding: .48rem 1rem;
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 24px;
  background: rgba(255,255,255,.1);
  color: #fff; font-size: .88rem; width: 220px;
  transition: var(--transition);
  font-family: 'Inter', sans-serif;
}
.header-search input::placeholder { color: rgba(255,255,255,.55); }
.header-search input:focus {
  outline: none; background: rgba(255,255,255,.18);
  border-color: var(--cc-gold); box-shadow: 0 0 0 3px rgba(200,149,26,.3);
}
.btn-search {
  background: var(--cc-gold); border: none;
  color: var(--cc-blue-dark); padding: .48rem .95rem;
  border-radius: 24px; cursor: pointer;
  font-weight: 700; font-size: .88rem;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.btn-search:hover { background: var(--cc-gold-bright); transform: translateY(-1px); }
.menu-toggle {
  display: none; background: none;
  border: 2px solid rgba(255,255,255,.45);
  color: #fff; padding: .42rem .75rem;
  border-radius: var(--radius); cursor: pointer;
  font-size: 1.2rem;
  /* Ensure the button itself is the click target, not the inner SVG.
     Without this, taps that land on the SVG path can produce an e.target
     inside the SVG shadow DOM, which breaks Element.contains() lookups
     in the outside-click handler — a classic mobile-menu failure mode. */
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
  touch-action: manipulation;
}
.menu-toggle > * { pointer-events: none; }
/* Same defensive rule for dropdown triggers — a tap on the chevron SVG
   should bubble cleanly to the parent <a class="nav-link"> rather than
   leave e.target inside the SVG (which trips up .closest() in some
   touch handlers). */
.nav-link > * { pointer-events: none; }
.nav-link { -webkit-tap-highlight-color: rgba(255,255,255,.08); }

/* ── Navigation ───────────────────────────────────── */
.main-nav {
  background: var(--cc-blue-mid);
  border-top: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.nav-list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;          /* Wrap onto a second row when the 7-item nav doesn't fit, instead of clipping. */
  row-gap: 2px;
}
.nav-item { position: relative; }
.nav-link {
  display: block; color: rgba(255,255,255,.92);
  /* Tighter horizontal padding on the link so all 7 top-level items fit
     on common 1024–1280 px laptops without wrapping. The vertical padding
     keeps the touch target at WCAG-AA-compliant height. */
  padding: .82rem 1rem;
  font-size: .875rem; font-weight: 600;
  letter-spacing: .025em;
  transition: var(--transition); white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav-link:hover,
.nav-item:hover .nav-link,
.nav-item.open .nav-link {
  background: rgba(255,255,255,.08);
  color: var(--cc-gold-light);
  text-decoration: none;
  border-bottom-color: var(--cc-gold);
}
.nav-link .arrow { font-size: .62rem; margin-left: .35rem; opacity: .65; vertical-align: middle; }
.has-dropdown { cursor: pointer; }

/* Dropdown */
.dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 230px;
  background: var(--cc-white);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  border-top: 3px solid var(--cc-gold);
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 999;
  animation: dropDown .15s ease;
}
@keyframes dropDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-item:hover .dropdown-menu,
.nav-item.open .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block; padding: .62rem 1.1rem;
  color: var(--cc-text); font-size: .875rem;
  border-bottom: 1px solid var(--cc-gray);
  transition: var(--transition); font-weight: 500;
}
.dropdown-menu a:hover,
.dropdown-menu a:focus {
  background: var(--cc-blue-light); color: var(--cc-blue);
  padding-left: 1.45rem; text-decoration: none;
  outline: none; box-shadow: inset 3px 0 0 var(--cc-blue);
}
.dropdown-menu a:last-child { border-bottom: none; border-radius: 0 0 var(--radius) var(--radius); }

/* ── Hero (homepage) ──────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: 480px;
  display: flex; align-items: center;
  background:
    linear-gradient(to right, rgba(10,24,44,.82) 0%, rgba(10,24,44,.55) 60%, rgba(10,24,44,.3) 100%),
    var(--img-courthouse) center / cover no-repeat;
  color: #fff; padding: 5rem 0;
}
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(to right, var(--cc-gold), transparent);
}
.hero-content { position: relative; z-index: 1; max-width: 640px; }
.hero-badge {
  display: inline-block;
  background: var(--cc-gold); color: var(--cc-blue-dark);
  padding: .28rem .9rem; border-radius: 20px;
  font-size: .78rem; font-weight: 800; margin-bottom: 1.1rem;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hero h2 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 2.6rem; font-weight: 900;
  margin-bottom: .8rem; line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  color: #fff;
}
.hero p {
  font-size: 1.1rem; opacity: .92;
  max-width: 520px; margin-bottom: 2rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.hero-btns { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ── Page Banner (interior pages) ────────────────── */
.page-banner {
  position: relative; overflow: hidden;
  background:
    linear-gradient(to right, rgba(10,24,44,.88) 0%, rgba(10,24,44,.65) 55%, rgba(10,24,44,.45) 100%),
    var(--img-courthouse) center 30% / cover no-repeat;
  color: #fff; padding: 3.2rem 0;
  /* Flag-style bottom stripe: 3px gold over 2px red. Stays crisp on every
     viewport because we use a linear-gradient instead of a single border. */
  border-bottom: 0;
}

/* Canonical content area: standardize vertical rhythm under the banner.
   Adopting `class="container page-body"` removes the inline-padding
   variation we saw across pages (`2rem 1rem` vs `2.5rem 1rem 4rem`). */
.page-body { padding: 2.5rem 1rem 4rem; }
.page-banner::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(to bottom,
    var(--cc-gold) 0%, var(--cc-gold) 60%,
    var(--cc-red-bright) 60%, var(--cc-red-bright) 100%);
  z-index: 2; pointer-events: none;
}
.page-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,24,44,.15) 0%, transparent 40%);
  pointer-events: none;
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 2rem; font-weight: 900; margin-bottom: .45rem;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.page-banner p {
  opacity: .88; font-size: 1rem;
  max-width: 600px;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
/* Service tile cards — used on elections.html, probation.html, and any
   page that adds a tile via the live editor's "Service Tile" palette
   component. Hover AND focus both lift the tile (accessibility parity
   between mouse and keyboard users). */
.service-tile { transition: transform .15s, box-shadow .15s; }
.service-tile:hover,
.service-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(15,20,40,0.10); }

.breadcrumb {
  font-size: .8rem; color: rgba(255,255,255,.72);
  margin-bottom: .7rem;
}
.breadcrumb a { color: var(--cc-gold-light); }
.breadcrumb a:hover { color: var(--cc-gold-bright); text-decoration: underline; }
.breadcrumb span { opacity: .55; }
/* Horizontal list-style breadcrumb (<ol class="breadcrumb">) */
ol.breadcrumb,
ul.breadcrumb {
  margin: 0 0 .7rem 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
}
ol.breadcrumb li,
ul.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
}
ol.breadcrumb [aria-current="page"],
ul.breadcrumb [aria-current="page"] { opacity: 1; }

/* ── Quick Access Buttons ─────────────────────────── */
.quick-access {
  background: var(--cc-blue-xlight);
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--cc-gray-mid);
}
.quick-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
}
.quick-btn {
  background: var(--cc-white);
  border: 2px solid var(--cc-gray-mid);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem; text-align: center;
  text-decoration: none; color: var(--cc-blue);
  font-weight: 700; font-size: .86rem;
  transition: var(--transition);
  display: flex; flex-direction: column;
  align-items: center; gap: .65rem;
  box-shadow: var(--shadow-sm);
}
.quick-btn:hover {
  border-color: var(--cc-blue); background: var(--cc-blue);
  color: #fff; transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(26,58,92,.25);
  text-decoration: none;
}
.quick-btn .icon { font-size: 2.1rem; }

/* ── Alert Banner ─────────────────────────────────── */
.alert-banner {
  background: #fffbeb;
  border-left: 5px solid var(--cc-gold);
  padding: .9rem 1.5rem; margin: 1rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  display: flex; align-items: flex-start; gap: .8rem;
  box-shadow: var(--shadow-sm);
}
.alert-banner.alert-danger { background: #fff1f0; border-left-color: var(--cc-red); }
.alert-banner .alert-icon { font-size: 1.3rem; margin-top: .1rem; }
.alert-banner .alert-text { font-size: .9rem; }
.alert-banner strong { display: block; margin-bottom: .2rem; }

/* ── News Section ─────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
.news-list { display: flex; flex-direction: column; gap: 1.2rem; }
.news-card {
  background: var(--cc-white);
  border: 1px solid var(--cc-gray-mid);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--cc-blue);
  transition: var(--transition);
}
.news-card:hover {
  border-left-color: var(--cc-gold);
  transform: translateX(3px);
  box-shadow: var(--shadow);
}
.news-date {
  font-size: .76rem; color: var(--cc-text-light);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .3rem;
  font-family: 'Inter', sans-serif;
}
.news-card h3 { font-size: 1rem; color: var(--cc-blue); margin-bottom: .4rem; }
.news-card p { font-size: .875rem; color: var(--cc-text-light); }
.news-card a { color: var(--cc-blue-mid); font-size: .84rem; font-weight: 600; }

/* Sidebar */
.sidebar-box {
  background: var(--cc-white);
  border: 1px solid var(--cc-gray-mid);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
  box-shadow: var(--shadow-sm); margin-bottom: 1.2rem;
}
.sidebar-box h3 {
  font-size: 1rem; color: var(--cc-blue);
  border-bottom: 2px solid var(--cc-gold);
  padding-bottom: .4rem; margin-bottom: .85rem; font-weight: 700;
}
.sidebar-links { display: flex; flex-direction: column; gap: .45rem; }
.sidebar-links a {
  font-size: .875rem; color: var(--cc-blue-mid);
  padding: .35rem 0; border-bottom: 1px solid var(--cc-gray);
  display: flex; align-items: center; gap: .5rem;
  transition: var(--transition);
}
.sidebar-links a:hover { color: var(--cc-gold-text); text-decoration: underline; padding-left: .35rem; }
.sidebar-links a::before { content: '›'; font-size: 1.1rem; color: var(--cc-gold); font-weight: 700; }

/* ── Resources Grid ───────────────────────────────── */
.resources-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .85rem; margin-top: 1.5rem;
}
.resource-btn {
  background: var(--cc-blue-light);
  border: 1px solid rgba(26,58,92,.15);
  border-radius: var(--radius);
  padding: .9rem 1rem; text-align: center;
  font-size: .85rem; color: var(--cc-blue);
  font-weight: 600; cursor: pointer;
  transition: var(--transition); text-decoration: none; display: block;
}
.resource-btn:hover {
  background: var(--cc-blue); color: #fff;
  text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* ── Departments Grid ─────────────────────────────── */
.dept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dept-card {
  background: var(--cc-white);
  border: 1px solid var(--cc-gray-mid);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: .85rem;
  transition: var(--transition);
  text-decoration: none; color: var(--cc-text);
}
.dept-card:hover {
  border-color: var(--cc-blue);
  background: var(--cc-blue-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  text-decoration: none; color: var(--cc-blue);
}
.dept-icon { font-size: 1.5rem; flex-shrink: 0; }
.dept-card span { font-size: .9rem; font-weight: 600; }

/* ── Footer ───────────────────────────────────────── */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #0d1f35 0%, var(--cc-blue-dark) 100%);
  color: rgba(255,255,255,.8);
  padding: 3.5rem 0 1.5rem;
  margin-top: 2.5rem;
  border-top: 0;
}
/* Footer flag-stripe: 2px red over 3px gold — mirror of the page-banner
   bottom so the page reads top→bottom as gold-red, then red-gold at the
   footer, framing the content patriotically. */
.site-footer::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(to bottom,
    var(--cc-red-bright) 0%, var(--cc-red-bright) 40%,
    var(--cc-gold) 40%, var(--cc-gold) 100%);
  pointer-events: none;
}
.footer-seal {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  object-fit: contain;
  background: transparent;
  padding: 0;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  transition: filter var(--transition);
}
.footer-brand:hover .footer-seal {
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.6)) brightness(1.08);
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem; margin-bottom: 2.5rem;
}
.footer-col h3, .footer-col h4 {
  color: var(--cc-gold-bright); font-size: .88rem; font-weight: 700;  /* WCAG AA */
  margin-bottom: 1.1rem;
  text-transform: uppercase; letter-spacing: .07em;
  font-family: 'Inter', sans-serif;
  padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-col p, .footer-col a {
  font-size: .84rem; color: rgba(255,255,255,.68);
  line-height: 1.9; display: block;
}
.footer-col a:hover { color: var(--cc-gold-bright); text-decoration: none; }  /* WCAG AA */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.2rem;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: .8rem;
  font-size: .8rem; color: rgba(255,255,255,.45);
}
.footer-bottom a { color: rgba(255,255,255,.45); }
.footer-bottom a:hover { color: var(--cc-gold-bright); }  /* WCAG AA */
.social-links { display: flex; gap: .65rem; align-items: center; }
/* Use .footer-col selector prefix so we beat the more-specific
   `.footer-col a { color: rgba(255,255,255,.68) }` rule below, which was
   coloring the SVG icons grey-white instead of gold. */
.footer-col .social-link,
.social-link {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  /* Explicit color so the SVG icons (which use currentColor) render at
     high contrast against the navy footer. */
  color: var(--cc-gold-bright);
  transition: var(--transition);
  text-decoration: none;
  /* Override the footer-col line-height/display so the disc stays a
     circle (parent rule sets display:block + line-height:1.9). */
  line-height: 1;
  padding: 0;
}
/* SVGs inside the circle: scale them up so they fill the disc nicely. */
.footer-col .social-link svg,
.social-link svg { width: 18px; height: 18px; }
.footer-col .social-link:hover,
.social-link:hover {
  background: var(--cc-gold); color: var(--cc-blue-dark);
  border-color: var(--cc-gold); transform: translateY(-2px);
}
.footer-col .social-link:focus-visible,
.social-link:focus-visible {
  outline: 3px solid var(--cc-gold-bright); outline-offset: 2px;
}

/* ── Info-card label/value pairs (used on every officeholder page) ─── */
/* Previously these classes had no global CSS; only county-clerk.html
   defined them inline. Result was "Phone(512) 376-1507" mashed together
   on every other page. These rules give label + value proper spacing,
   stack on narrow cards, and break long emails so they don't clip. */
.info-card { background: transparent; }
.info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: .55rem 0;
  border-bottom: 1px solid var(--cc-gray-mid);
  gap: .15rem .85rem;
  font-size: .9rem;
  line-height: 1.45;
}
.info-row:last-child { border-bottom: 0; }
.info-label {
  font-weight: 700;
  color: var(--cc-blue);
  min-width: 92px;
  flex-shrink: 0;
}
.info-value {
  color: var(--cc-text);
  flex: 1 1 auto;
  min-width: 0;                /* allow flex child to shrink below content width */
  word-break: break-word;
  overflow-wrap: anywhere;     /* break long emails so they don't clip the card */
}
.info-value a { color: var(--cc-blue); }
.info-value a:hover { color: var(--cc-blue-dark); }

/* ── Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.45rem; border-radius: var(--radius);
  font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: var(--transition); border: none;
  text-decoration: none; letter-spacing: .02em;
  font-family: 'Inter', sans-serif;
}
.btn-primary {
  background: linear-gradient(135deg, var(--cc-blue-mid) 0%, var(--cc-blue) 100%);
  color: #fff; box-shadow: 0 2px 8px rgba(26,58,92,.3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--cc-blue) 0%, var(--cc-blue-dark) 100%);
  color: #fff; text-decoration: none;
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(26,58,92,.4);
}
.btn-gold {
  background: linear-gradient(135deg, var(--cc-gold-bright) 0%, var(--cc-gold) 100%);
  color: var(--cc-blue-dark); box-shadow: 0 2px 8px rgba(200,149,26,.35);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #f0b830 0%, var(--cc-gold-bright) 100%);
  color: var(--cc-blue-dark); text-decoration: none;
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(200,149,26,.45);
}
.btn-outline {
  background: transparent; border: 2px solid var(--cc-blue); color: var(--cc-blue);
}
.btn-outline:hover {
  background: var(--cc-blue); color: #fff;
  text-decoration: none; transform: translateY(-1px);
}
.btn-white {
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.5);
  color: #fff; backdrop-filter: blur(4px);
}
.btn-white:hover {
  background: rgba(255,255,255,.25); color: #fff;
  text-decoration: none; transform: translateY(-1px);
}
.btn-sm { padding: .4rem .9rem; font-size: .8rem; }
.btn-lg { padding: .9rem 2.2rem; font-size: 1rem; }

/* ── Forms ────────────────────────────────────────── */
.form-group { margin-bottom: 1.2rem; }
.form-label { display: block; font-size: .875rem; font-weight: 600; color: var(--cc-blue); margin-bottom: .4rem; }
.form-label .required { color: var(--cc-red); margin-left: .2rem; }
.form-control {
  width: 100%; padding: .65rem .95rem;
  border: 2px solid var(--cc-gray-mid);
  border-radius: var(--radius); font-size: .9rem;
  color: var(--cc-text); transition: var(--transition);
  font-family: 'Inter', sans-serif; background: var(--cc-white);
}
.form-control:focus {
  outline: none; border-color: var(--cc-blue);
  box-shadow: 0 0 0 3px rgba(26,58,92,.14);
}
.form-control.error { border-color: var(--cc-red); }
.form-help { font-size: .8rem; color: var(--cc-text-light); margin-top: .3rem; }
.form-error { font-size: .8rem; color: var(--cc-red); margin-top: .3rem; display: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Badges ───────────────────────────────────────── */
.badge {
  display: inline-block; padding: .22rem .65rem;
  border-radius: 20px; font-size: .74rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.badge-new     { background: #d4edda; color: #155724; }
.badge-review  { background: #cce5ff; color: #003580; }
.badge-interview { background: #fff3cd; color: #6b4c00; }
.badge-hired   { background: #d4edda; color: #155724; }
.badge-closed  { background: #f8d7da; color: #721c24; }
.badge-open    { background: #d4edda; color: #155724; }

/* ── Tables ───────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table th {
  background: linear-gradient(135deg, var(--cc-blue-mid), var(--cc-blue));
  color: #fff; padding: .78rem 1rem;
  text-align: left; font-weight: 600; letter-spacing: .02em;
}
.data-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--cc-gray); }
.data-table tr:hover td { background: var(--cc-blue-light); color: var(--cc-text); }
.data-table tr:nth-child(even) td { background: #fafbfc; }
.data-table tr:nth-child(even):hover td { background: var(--cc-blue-light); }

/* ── Tabs ─────────────────────────────────────────── */
.tabs {
  display: flex; border-bottom: 2px solid var(--cc-gray-mid);
  margin-bottom: 1.5rem; gap: .25rem;
}
.tab-btn {
  padding: .65rem 1.3rem; border: none; background: none;
  font-size: .88rem; font-weight: 600; color: var(--cc-text-light);
  cursor: pointer; border-bottom: 3px solid transparent;
  margin-bottom: -2px; transition: var(--transition);
  font-family: 'Inter', sans-serif;
}
.tab-btn.active { color: var(--cc-blue); border-bottom-color: var(--cc-blue); }
.tab-btn:hover { color: var(--cc-blue); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Cards ────────────────────────────────────────── */
.card {
  background: var(--cc-white);
  border: 1px solid var(--cc-gray-mid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 1.4rem;
}
.card-header {
  background: linear-gradient(135deg, var(--cc-blue-mid), var(--cc-blue));
  color: #fff; padding: 1rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between;
  margin: -1.4rem -1.4rem 1.4rem;
}
.card-header h2, .card-header h3 { margin: 0; font-size: 1.05rem; color: #fff; }
/* Info block card variant */
.info-block {
  border-left: 4px solid var(--cc-gold);
  background: linear-gradient(135deg, var(--cc-white) 0%, var(--cc-blue-xlight) 100%);
}
.info-block h3 { color: var(--cc-blue); }
/* PDF link style */
.pdf-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--cc-blue-mid); font-size: .875rem; font-weight: 500;
  padding: .3rem 0; border-bottom: 1px dashed rgba(36,82,127,.3);
  transition: var(--transition);
}
.pdf-link:hover { color: var(--cc-gold-text); border-bottom-color: var(--cc-gold); text-decoration: none; }

/* ── Section dividers ─────────────────────────────── */
.section-divider {
  height: 1px; background: linear-gradient(to right, transparent, var(--cc-gray-mid), transparent);
  margin: 2rem 0;
}

/* ── Courthouse strip (decorative) ─────────────────
   Taller strip (320px) with a slightly low-leaning anchor (center 65%)
   so the bell tower, side cupolas, and main facade all read. Followed
   immediately by the site footer with no margin gap (see the sibling
   rule below). */
.courthouse-strip {
  position: relative; height: 320px; overflow: hidden;
  background: var(--img-courthouse) center 65% / cover no-repeat;
}
/* Kill the footer's default 2.5rem top margin when it follows the
   courthouse strip — otherwise the body background bleeds through as
   a white gap between the photo and the footer. */
.courthouse-strip + .site-footer { margin-top: 0; }
.courthouse-strip::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,24,44,.25) 0%, rgba(10,24,44,.65) 100%);
}
.courthouse-strip-caption {
  position: absolute; bottom: 1rem; right: 1.5rem; z-index: 1;
  color: rgba(255,255,255,.6); font-size: .72rem; font-style: italic;
}

/* ── Texas pride accent ───────────────────────────── */
.tx-accent {
  display: inline-block;
  background: linear-gradient(135deg, var(--cc-gold-bright), var(--cc-gold));
  color: var(--cc-blue-dark); padding: .18rem .65rem;
  border-radius: 3px; font-size: .75rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  vertical-align: middle;
}

/* ── Weather Widget ───────────────────────────────── */
.weather-section {
  background: var(--cc-blue-dark); color: #fff;
  padding: 2rem 0; text-align: center;
}
.weather-inner {
  display: flex; align-items: center;
  justify-content: center; gap: 2rem; flex-wrap: wrap;
}

/* ── Modal ────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 2000;
  align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--cc-white); border-radius: var(--radius-lg);
  max-width: 640px; width: 90%; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(-12px); } to { opacity: 1; transform: none; } }
.modal-header {
  background: linear-gradient(135deg, var(--cc-blue-mid), var(--cc-blue));
  color: #fff; padding: 1.2rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-close {
  background: none; border: none; color: #fff;
  font-size: 1.4rem; cursor: pointer; line-height: 1;
  opacity: .8; transition: var(--transition);
}
.modal-close:hover { opacity: 1; transform: scale(1.15); }
.modal-body { padding: 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem; border-top: 1px solid var(--cc-gray);
  display: flex; gap: .8rem; justify-content: flex-end;
}

/* ── Granicus ─────────────────────────────────────── */
.granicus-embed {
  background: #000; border-radius: var(--radius); overflow: hidden;
}
.granicus-embed iframe { width: 100%; border: none; display: block; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
  .dept-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Touch-and-tablet nav: also kicks in on any pointer:coarse device
   (touchscreen tablets up to ~1024px, large phones in landscape).
   Without this clause, an iPad or iPhone-Plus in landscape gets the
   hover-only desktop dropdowns and the chevron buttons appear "dead"
   because hover does not fire on touchscreens. */
@media (max-width: 1024px) and (pointer: coarse),
       (max-width: 768px) {
  .menu-toggle { display: block; }
  .main-nav { display: none; }
  .main-nav.open { display: block; }
  .nav-list { flex-direction: column; }
  .dropdown-menu {
    position: static; box-shadow: none;
    border-top: none; border-left: 3px solid var(--cc-gold);
    margin-left: 1rem; animation: none;
    border-radius: 0;
  }
  .nav-item:hover .dropdown-menu { display: none; }
  .nav-item.open .dropdown-menu { display: block; }
}
@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .header-search { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .hero { min-height: 340px; padding: 3.5rem 0; }
  .hero h2 { font-size: 1.75rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .dept-grid { grid-template-columns: 1fr; }
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
  .page-banner { padding: 2.2rem 0; }
  .page-banner h1 { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .resources-grid { grid-template-columns: 1fr; }
  .logo-seal-img, .logo-seal-fallback { width: 54px; height: 54px; }
  .logo-text h1 { font-size: 1.1rem; }
}

/* ── Print ────────────────────────────────────────── */
@media print {
  .site-header, .main-nav, .utility-bar, .site-footer { display: none; }
  .page-banner {
    background: none !important; color: var(--cc-text);
    border-bottom: 2px solid var(--cc-blue); padding: 1rem 0;
  }
  .page-banner h1 { color: var(--cc-blue); text-shadow: none; }
}

/* ── Reduced Motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .skip-link { transition: none; }
}

/* ── High Contrast ────────────────────────────────── */
@media (forced-colors: active) {
  .btn, .badge, .quick-btn, .resource-btn { border: 2px solid ButtonText; }
  .skip-link { border: 3px solid Highlight; }
}

/* ── ARIA / Role styles ───────────────────────────── */
[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
[aria-current="page"] > .nav-link {
  background: rgba(255,255,255,.12);
  color: var(--cc-gold-light);
  border-bottom-color: var(--cc-gold) !important;
}
.form-control[aria-invalid="true"] {
  border-color: var(--cc-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%238b0000' stroke-width='1.5'/%3E%3Cline x1='8' y1='4' x2='8' y2='9' stroke='%238b0000' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='11.5' r='.75' fill='%238b0000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
  padding-right: 2.5rem;
}
.form-error { display: none; font-size: .82rem; color: #721c24; margin-top: .3rem; font-weight: 600; }
.form-error.visible { display: flex; align-items: center; gap: .3rem; }
.form-error::before { content: '⚠ '; }

/* ── Admin nav items ──────────────────────────────── */
.admin-nav-item[role="button"], .admin-nav-item[tabindex] { cursor: pointer; }
.admin-nav-item:focus-visible { outline: 3px solid var(--cc-gold); outline-offset: -3px; }

/* ── Slideshow pause ──────────────────────────────── */
.slideshow-pause {
  position: absolute; bottom: 1rem; right: 1rem;
  background: rgba(0,0,0,.6); color: #fff;
  border: 2px solid rgba(255,255,255,.5); border-radius: var(--radius);
  padding: .3rem .7rem; font-size: .78rem; cursor: pointer; z-index: 10;
}
.slideshow-pause:focus-visible { outline: 3px solid var(--cc-gold); outline-offset: 2px; }

/* ── Wikimedia attribution ────────────────────────── */
.img-attribution {
  font-size: .7rem; color: var(--cc-text-light);
  font-style: italic; margin-top: .3rem;
}