/*
Theme Name: San Jacinto Sheriff
Theme URI: https://sanjacintocountysheriff.org
Author: San Jacinto County Sheriff's Office
Description: Official theme for San Jacinto County Sheriff's Office
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sjc-sheriff
*/

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */
:root {
  --sheriff-blue: #0B1F3A;
  --sheriff-red: #8B1E1E;
  --sheriff-red-deep: #5C1414;
  --sheriff-red-light: #B83333;
  --sheriff-white: #FFFFFF;
  --sheriff-gray-light: #F2F4F7;
  --sheriff-gray-dark: #2E2E2E;
  --sheriff-blue-muted: #3A5F8C;
  --sheriff-gold: #C9A227;
  --sheriff-gold-dark: #8B6914;
  --focus-outline: 3px solid #DC143C;

  /* Enhanced Gold Tones */
  --sheriff-gold-glow: rgba(201, 162, 39, 0.3);
  --sheriff-gold-bright: #E5B82A;
  /* Soft gold used only for the decorative ring around the hero badge. */
  --sheriff-gold-soft: #DFC46E;
  --sheriff-gold-muted: rgba(201, 162, 39, 0.15);

  /* Dark Section Backgrounds */
  --dark-section-bg: linear-gradient(180deg, #0a1829 0%, #0B1F3A 50%, #0a1829 100%);

  /* Enhanced Shadows */
  --card-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --card-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --card-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --card-shadow-glow-gold: 0 4px 20px rgba(201, 162, 39, 0.25);

  /* Smooth Transitions */
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Typefaces
     --font-display  Big Shoulders Display, drawn for the City of Chicago's
                     municipal signage programme: the condensed American gothic
                     of a patrol-car door and a courthouse directory board.
                     Headings, the service record and every button label.
     --font-body     Spectral, a low-contrast screen serif. Reading matter.
                     Low stroke contrast is what lets it survive being reversed
                     out of a dark ground at 17px, which a display serif cannot.
     --font-ui       The system stack. Deliberately kept for form controls,
                     tables, badges and the staff dashboard, where a serif at
                     13-14px costs legibility and buys nothing. */
  --font-display: 'Big Shoulders Display', 'Big Shoulders', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-body: Spectral, Georgia, 'Times New Roman', serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   2. Base/Reset Styles
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@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;
  }
}

body {
  font-family: var(--font-body);
  color: var(--sheriff-gray-dark);
  line-height: 1.6;
}

/* Controls, data and chrome stay on the system stack. The serif is for prose. */
.btn,
.nav-link,
.navbar,
.utility-bar,
.badge,
input,
select,
textarea,
label,
table,
.table,
.sjcs-dashboard,
.breadcrumb,
.pagination {
  font-family: var(--font-ui);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--sheriff-blue);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

/* Section heading accent underline */
.section-heading {
  display: inline-block;
  position: relative;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}

.section-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--sheriff-red);
  border-radius: 2px;
}

.section-heading.text-start::after,
.section-heading.text-md-start::after {
  left: 0;
  transform: none;
}

.section-heading-light::after {
  background: var(--sheriff-gold);
}

a {
  color: var(--sheriff-blue-muted);
  text-decoration: underline;
}

a:hover {
  color: var(--sheriff-blue);
}

/* ==========================================================================
   4. Skip Link
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sheriff-red);
  color: var(--sheriff-white);
  padding: 0.75rem 1.5rem;
  z-index: 9999;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
  color: var(--sheriff-white);
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Skip-link target: receives focus programmatically, must not draw a ring
   around the whole page (see [tabindex]:focus in section 19). */
#main-content:focus,
#main-content:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ==========================================================================
   5. Utility Bar
   ========================================================================== */
.utility-bar {
  background: var(--sheriff-blue);
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.utility-bar a,
.utility-bar .btn {
  color: var(--sheriff-white);
  text-decoration: none;
}

.utility-bar .btn:hover {
  opacity: 0.9;
}

.emergency-911 {
  background: var(--sheriff-red);
  color: var(--sheriff-white);
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.non-emergency {
  color: var(--sheriff-white);
  opacity: 0.9;
}

.utility-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--sheriff-white);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  transition: background 0.2s ease;
  gap: 0.5rem;
}

.utility-btn:hover,
.utility-btn:focus {
  background: rgba(255,255,255,0.1);
  color: var(--sheriff-white);
}

.language-select {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--sheriff-white);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

.language-select option {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

/* Language Flag Buttons */
.language-flags {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.flag-btn {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.flag-btn:hover,
.flag-btn.active {
  opacity: 1;
  border-color: rgba(255,255,255,0.5);
}

/* Mobile menu language buttons */
.flag-btn.mobile-lang {
  border-color: rgba(0,0,0,0.1);
}

.flag-btn.mobile-lang:hover,
.flag-btn.mobile-lang.active {
  border-color: var(--sheriff-blue);
}

.flag-icon {
  font-size: 1.25rem;
}

/* Uniform height for top bar buttons */
.utility-btn,
.language-flags,
.emergency-911 {
  height: 36px;
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   6. Header & Navigation
   ========================================================================== */
.main-header {
  background: var(--sheriff-white);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-bottom: 3px solid var(--sheriff-red);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--sheriff-blue);
}

.header-brand:hover {
  color: var(--sheriff-blue);
}

.badge-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.agency-name {
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.2;
  margin: 0;
}

.main-nav .navbar-nav .nav-link {
  color: var(--sheriff-blue);
  font-weight: 500;
  /* Eight top-level categories have to fit on one row above the collapse
     breakpoint. At 16px with 16px side padding the row needed ~1310px and
     overflowed every desktop narrower than that. */
  font-size: 0.875rem;
  padding: 0.75rem 0.4375rem;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.main-nav .navbar-nav .nav-link:hover,
.main-nav .navbar-nav .nav-link:focus {
  color: var(--sheriff-blue-muted);
  background: rgba(11, 31, 58, 0.05);
}

/* Focus rings on light backgrounds use navy, not gold: #C9A227 on white is
   about 2.4:1, below the 3:1 WCAG 2.2 requires of a focus indicator. */
.main-nav .navbar-nav .nav-link:focus-visible {
  outline: 3px solid var(--sheriff-blue);
  outline-offset: 2px;
}

/* Once the row collapses into the toggle menu the cramped desktop spacing is
   no longer needed. */
@media (max-width: 1199.98px) {
  .main-nav .navbar-nav .nav-link {
    font-size: 1rem;
    padding: 0.625rem 0.5rem;
  }
}

.main-nav .dropdown-menu {
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 0.5rem;
}

.main-nav .dropdown-item:hover {
  background: var(--sheriff-gray-light);
  color: var(--sheriff-blue);
}

.navbar-toggler {
  border: none;
  padding: 0.5rem;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* ==========================================================================
   7. Hero Section
   ========================================================================== */
.hero-section {
  background: linear-gradient(135deg, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 100%) 100%);
  color: var(--sheriff-white);
  padding: 6rem 0;
  min-height: 520px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('images/hero.png') center/cover no-repeat;
  opacity: 0.3;
}

.hero-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}

.hero-badge-wrapper {
  flex: 0 0 35%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-badge {
  width: 280px;
  height: 320px;
  background: linear-gradient(145deg, var(--sheriff-gold) 0%, var(--sheriff-gold-dark) 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 0 60px rgba(201, 162, 39, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-badge::before {
  content: '';
  position: absolute;
  width: 250px;
  height: 290px;
  background: linear-gradient(145deg, var(--sheriff-gold-dark) 0%, #6B4F10 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hero-badge::after {
  content: '\2605';
  position: absolute;
  font-size: 5rem;
  color: var(--sheriff-gold);
  text-shadow: 0 0 20px rgba(201, 162, 39, 0.6);
}

.hero-badge-text {
  position: absolute;
  bottom: 25%;
  color: var(--sheriff-gold);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

/* Hero badge emblem -------------------------------------------------------
   A square wrapper holds two layers: the decorative rotating text ring and
   the badge artwork. The badge previously carried a rectangular border, a
   rounded-square radius, padding and a tinted panel; all four are gone so the
   transparent artwork reads as a badge. Only the gold drop shadow remains. */
.hero-badge-emblem {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

.hero-badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Decorative only: never intercepts a click or a pointer. */
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: sjcs-badge-orbit 65s linear infinite;
}

.hero-badge-ring text {
  fill: var(--sheriff-gold-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}

@keyframes sjcs-badge-orbit {
  to {
    transform: rotate(360deg);
  }
}

/* The ring is ornamental. Anyone who has asked for reduced motion gets it
   stationary. (The global reduced-motion rule above also neutralises it; this
   states the intent locally so it survives any future change to that rule.) */
@media (prefers-reduced-motion: reduce) {
  .hero-badge-ring {
    animation: none;
  }
}

.hero-badge-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 77%;
  height: 77%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 4px 22px rgba(201, 162, 39, 0.25));
}

.hero-content {
  flex: 0 0 60%;
  position: relative;
  z-index: 1;
}

.hero-headline {
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--sheriff-white);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5);
}

.hero-headline-accent {
  display: block;
  width: 60px;
  height: 4px;
  background: var(--sheriff-red);
  margin-bottom: 1.5rem;
  border-radius: 2px;
}

.hero-text {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: 2rem;
  max-width: 700px;
}

.hero-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 600px;
}

@media (min-width: 768px) {
  .hero-cta-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .hero-section {
    overflow-x: hidden;
    overflow-y: visible;
  }

  .hero-section .container {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-headline,
  .hero-text {
    max-width: 100%;
    word-wrap: break-word;
  }

  .hero-cta-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.5rem;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .hero-cta {
    flex: 0 0 140px;
    scroll-snap-align: start;
  }
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 12px side padding (not 16px) leaves "Records Request" enough room to sit
     on one line at the four-column width, so all four labels match. */
  padding: 1.5rem 0.75rem;
  background: var(--sheriff-red);
  border: 2px solid var(--sheriff-red);
  border-radius: 0.5rem;
  color: var(--sheriff-white);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  transition: transform 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 110px;
  box-shadow: 0 4px 15px rgba(139, 30, 30, 0.3);
}

.hero-cta:focus-visible {
  outline: 3px solid var(--sheriff-gold);
  outline-offset: 3px;
}

.hero-cta:hover,
.hero-cta:focus {
  background: var(--sheriff-red-light);
  border-color: var(--sheriff-red-light);
  color: var(--sheriff-white);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(139, 30, 30, 0.4);
}

.hero-cta i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 991.98px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
  }

  .hero-badge-wrapper {
    flex: none;
    /* The emblem is sized as a percentage, so the stacked wrapper needs a
       definite width of its own - without this it collapsed to 0 and the
       badge disappeared below 992px. */
    width: 100%;
    margin-bottom: 2rem;
  }

  .hero-badge {
    width: 220px;
    height: 250px;
  }

  .hero-badge::before {
    width: 195px;
    height: 225px;
  }

  .hero-badge::after {
    font-size: 4rem;
  }

  /* Scale the whole emblem - badge and ring together - so the circular text
     is never clipped and never collides with the headline. */
  .hero-badge-emblem {
    max-width: 290px;
  }

  .hero-content {
    flex: none;
  }

  .hero-headline-accent {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-grid {
    margin: 0 auto;
  }
}

/* Small phones: shrink the emblem only as far as needed to avoid overflow,
   and nudge the ring type up so it stays legible at the smaller radius. */
@media (max-width: 575.98px) {
  .hero-badge-emblem {
    max-width: 230px;
  }

  .hero-badge-ring text {
    font-size: 16px;
  }
}

/* ==========================================================================
   8. Quick Action Grid
   ========================================================================== */
.quick-actions {
  padding: 4rem 0;
  background: var(--sheriff-white);
  position: relative;
}

/* Gold divider at top of section */
.quick-actions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 800px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--sheriff-gold) 20%, var(--sheriff-gold-bright) 50%, var(--sheriff-gold) 80%, transparent 100%);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .action-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .action-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: linear-gradient(180deg, var(--sheriff-white) 0%, var(--sheriff-gray-light) 100%);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--sheriff-blue);
  transition: transform 0.25s var(--transition-smooth),
              background-color 0.25s var(--transition-smooth),
              box-shadow 0.25s var(--transition-smooth);
  min-height: 120px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
  box-shadow: var(--card-shadow-sm);
  overflow: hidden;
}

/* Gold accent line on hover */
.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sheriff-gold), var(--sheriff-gold-bright), var(--sheriff-gold));
  transform: scaleX(0);
  transition: transform 0.3s var(--transition-smooth);
}

.action-card:hover,
.action-card:focus {
  background: var(--sheriff-white);
  color: var(--sheriff-blue);
  /* Restrained lift: enough to register, not enough to jump. */
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-lg), var(--card-shadow-glow-gold);
}

.action-card:focus-visible {
  outline: 3px solid var(--sheriff-blue);
  outline-offset: 3px;
}

.action-card:hover::before,
.action-card:focus::before {
  transform: scaleX(1);
}

.action-card i {
  font-size: 2rem;
  color: var(--sheriff-blue-muted);
  margin-bottom: 0.75rem;
  transition: all 0.3s var(--transition-smooth);
}

.action-card:hover i,
.action-card:focus i {
  color: var(--sheriff-gold);
  filter: drop-shadow(0 0 8px var(--sheriff-gold-glow));
}

.action-card span {
  font-weight: 600;
  font-size: 0.9rem;
}

/* ==========================================================================
   9. Booking Blotter (Dark Theme)
   ========================================================================== */
.booking-blotter {
  padding: 4rem 0;
  background: var(--dark-section-bg);
  position: relative;
}

/* Red accent line at top */
.booking-blotter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--sheriff-red) 20%, var(--sheriff-red-light) 50%, var(--sheriff-red) 80%, transparent 100%);
}

/* Subtle pattern overlay */
.booking-blotter::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(139, 30, 30, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(139, 30, 30, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.booking-blotter .container {
  position: relative;
  z-index: 1;
}

.booking-blotter .section-heading {
  color: var(--sheriff-white);
}

.booking-blotter .section-heading::after {
  background: var(--sheriff-red-light);
}

.booking-table {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  border: 1px solid rgba(139, 30, 30, 0.3);
}

.booking-table th {
  background: rgb(139 30 31);
  color: #F2F4F7;
  font-weight: 600;
  padding: 1rem;
  white-space: nowrap;
  border-bottom: 2px solid var(--sheriff-red-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}

.booking-table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  color: rgb(0 0 0 / 90%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.booking-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.booking-table tbody tr {
  transition: all 0.3s var(--transition-smooth);
}

.booking-table tbody tr:hover {
  background: rgba(139, 30, 30, 0.15);
  box-shadow: inset 4px 0 0 var(--sheriff-red-light), 0 0 20px rgba(139, 30, 30, 0.15);
}

.mugshot-placeholder {
  width: 60px;
  height: 75px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  border-radius: 0.375rem;
  border: 2px solid rgba(139, 30, 30, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.5rem;
}

.mugshot-img {
  width: 60px;
  height: 75px;
  object-fit: cover;
  border-radius: 0.375rem;
  border: 2px solid rgba(139, 30, 30, 0.5);
  transition: border-color 0.3s ease;
}

.booking-table tbody tr:hover .mugshot-img {
  border-color: var(--sheriff-red-light);
}

.charge-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--sheriff-blue-muted);
  color: var(--sheriff-white);
  padding: 0.375rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0.125rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Color-coded charge badges by category */
.charge-badge.charge-dwi { background: #dc3545; }
.charge-badge.charge-assault { background: #c41e3a; }
.charge-badge.charge-theft { background: #fd7e14; }
.charge-badge.charge-possession { background: #6f42c1; }
.charge-badge.charge-warrant { background: #0d6efd; }
.charge-badge.charge-trespass { background: #6c757d; }

.legal-disclaimer {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  margin-top: 1.5rem;
  padding: 1rem;
  border-left: 4px solid var(--sheriff-red-light);
  border-radius: 0.25rem;
}

.legal-disclaimer strong {
  color: #F2F4F7;
}

.booking-blotter .btn-sheriff-outline {
  border-color: var(--sheriff-red-light);
  color: var(--sheriff-red-light);
}

.booking-blotter .btn-sheriff-outline:hover,
.booking-blotter .btn-sheriff-outline:focus {
  background: var(--sheriff-red-light);
  color: var(--sheriff-white);
  box-shadow: 0 0 20px rgba(184, 51, 51, 0.4);
}

/* ==========================================================================
   11. Newsroom (Enhanced)
   ========================================================================== */
.newsroom-section {
  padding: 4rem 0;
  background: var(--sheriff-gray-light);
  position: relative;
}

/* Gold accent line at top */
.newsroom-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 800px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--sheriff-gold) 20%, var(--sheriff-gold-bright) 50%, var(--sheriff-gold) 80%, transparent 100%);
}

.news-tabs .nav-pills {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.news-tabs .nav-link {
  background: var(--sheriff-white);
  color: var(--sheriff-blue);
  border: 1px solid #ddd;
  border-radius: 2rem;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: all 0.3s var(--transition-smooth);
  box-shadow: var(--card-shadow-sm);
}

.news-tabs .nav-link:hover {
  background: var(--sheriff-gold-muted);
  border-color: var(--sheriff-gold);
  color: var(--sheriff-blue);
}

.news-tabs .nav-link.active {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  border-color: var(--sheriff-blue);
  box-shadow: var(--card-shadow-md);
}

.news-card {
  background: var(--sheriff-white);
  border-radius: 0.5rem;
  padding: 1.5rem;
  height: 100%;
  box-shadow: var(--card-shadow-sm);
  transition: all 0.3s var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

/* Animated top border line */
.news-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sheriff-gold), var(--sheriff-gold-bright), var(--sheriff-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--transition-smooth);
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-lg);
}

.news-card:hover::before {
  transform: scaleX(1);
}

.news-category {
  display: inline-block;
  background: linear-gradient(135deg, var(--sheriff-blue-muted) 0%, var(--sheriff-blue) 100%);
  color: var(--sheriff-white);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  /* Category names read as words, not shouted slugs. The label itself is
     normalised by sjcs_get_term_label(). */
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 6px rgba(11, 31, 58, 0.2);
}

.news-category.alert {
  background: linear-gradient(135deg, var(--sheriff-red) 0%, var(--sheriff-red-deep) 100%);
  box-shadow: 0 2px 6px rgba(139, 30, 30, 0.3);
}

/* Empty category state. Deliberately neutral: an empty news category says
   only that nothing has been posted here, never that no safety alert or
   missing-person case exists. */
/* Direct child only - a descendant selector also caught the arrow inside the
   "All news and official updates" link and blew it up to 2.5rem. */
.news-empty > i {
  font-size: 2.5rem;
  color: var(--sheriff-blue-muted);
  opacity: 0.55;
}

.news-empty p {
  max-width: 46ch;
  margin: 0.5rem auto 1rem;
  color: #555;
  font-size: 0.9rem;
}

.news-date {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.news-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sheriff-blue);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.news-excerpt {
  font-size: 0.875rem;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-image {
  width: calc(100% + 3rem);
  height: 160px;
  object-fit: cover;
  border-radius: 0.5rem 0.5rem 0 0;
  margin: -1.5rem -1.5rem 1rem -1.5rem;
  transition: transform 0.4s var(--transition-smooth);
}

.news-card:hover .news-card-image {
  transform: scale(1.05);
}

/* Homepage news card links (headline, media, Read More) */
.news-card-image-link {
  display: block;
}

.news-title-link {
  color: inherit;
  text-decoration: none;
}

.news-card:hover .news-title-link,
.news-title-link:hover,
.news-title-link:focus-visible {
  text-decoration: underline;
}

.news-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--sheriff-blue);
  text-decoration: none;
}

.news-card-more:hover,
.news-card-more:focus-visible {
  color: var(--sheriff-blue-muted);
  text-decoration: underline;
}

.news-card-more i {
  transition: transform 0.3s var(--transition-smooth);
}

.news-card-more:hover i {
  transform: translateX(3px);
}

.news-card a:focus-visible {
  outline: 3px solid var(--sheriff-gold);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ==========================================================================
   12. Community Links (Dark Theme)
   ========================================================================== */
.community-links {
  padding: 4rem 0;
  background: var(--dark-section-bg);
  position: relative;
}

/* Gold border accent at top */
.community-links::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--sheriff-gold) 20%, var(--sheriff-gold-bright) 50%, var(--sheriff-gold) 80%, transparent 100%);
}

/* Subtle grid pattern */
.community-links::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(201, 162, 39, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 39, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.community-links .container {
  position: relative;
  z-index: 1;
}

.community-links .section-heading {
  color: var(--sheriff-white);
}

.community-links .section-heading::after {
  background: var(--sheriff-gold);
}

.community-links .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.625rem 1.25rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s var(--transition-smooth);
  border: 1px solid rgba(201, 162, 39, 0.2);
}

.link-chip:hover,
.link-chip:focus {
  background: rgba(201, 162, 39, 0.15);
  color: var(--sheriff-gold-bright);
  border-color: var(--sheriff-gold);
  box-shadow: 0 0 20px var(--sheriff-gold-glow), var(--card-shadow-glow-gold);
  transform: translateY(-3px);
}

.link-chip i {
  font-size: 1rem;
  transition: all 0.3s var(--transition-smooth);
}

.link-chip:hover i,
.link-chip:focus i {
  color: var(--sheriff-gold);
  filter: drop-shadow(0 0 6px var(--sheriff-gold-glow));
}

.community-links .btn-sheriff-outline {
  border-color: var(--sheriff-gold);
  color: var(--sheriff-gold);
}

.community-links .btn-sheriff-outline:hover,
.community-links .btn-sheriff-outline:focus {
  background: var(--sheriff-gold);
  color: var(--sheriff-blue);
  box-shadow: var(--card-shadow-glow-gold);
}

/* ==========================================================================
   13. Transparency (Enhanced)
   ========================================================================== */
.transparency-section {
  padding: 4rem 0;
  background: var(--sheriff-white);
  position: relative;
}

/* Gold divider at top */
.transparency-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 800px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--sheriff-gold) 20%, var(--sheriff-gold-bright) 50%, var(--sheriff-gold) 80%, transparent 100%);
}

.transparency-box {
  background: linear-gradient(180deg, var(--sheriff-white) 0%, var(--sheriff-gray-light) 100%);
  border-radius: 0.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  height: 100%;
  transition: all 0.3s var(--transition-smooth);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: var(--card-shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Gold accent line at top - expanding on hover */
.transparency-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--sheriff-gold);
  transition: width 0.3s var(--transition-smooth);
}

.transparency-box:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-lg), var(--card-shadow-glow-gold);
}

.transparency-box:hover::before {
  width: 100%;
}

.transparency-box i {
  font-size: 2.5rem;
  color: var(--sheriff-blue-muted);
  margin-bottom: 1rem;
  transition: all 0.3s var(--transition-smooth);
}

.transparency-box:hover i {
  color: var(--sheriff-gold);
  filter: drop-shadow(0 0 8px var(--sheriff-gold-glow));
}

.transparency-box h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  transition: color 0.3s var(--transition-smooth);
}

.transparency-box:hover h3 {
  color: var(--sheriff-blue);
}

.transparency-box p {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0;
}

/* ==========================================================================
   14. Careers (Enhanced)
   ========================================================================== */
.careers-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, var(--sheriff-blue) 0%, var(--sheriff-blue-muted) 100%);
  color: var(--sheriff-white);
  position: relative;
  overflow: hidden;
}

.careers-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sheriff-gold) 0%, var(--sheriff-red) 35%, var(--sheriff-red-light) 50%, var(--sheriff-red) 65%, var(--sheriff-gold) 100%);
}

.careers-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sheriff-gold) 0%, var(--sheriff-red) 35%, var(--sheriff-red-light) 50%, var(--sheriff-red) 65%, var(--sheriff-gold) 100%);
}

.careers-section h2 {
  color: var(--sheriff-white);
}

.careers-section .lead {
  opacity: 0.9;
}

/* ==========================================================================
   15. Partners (Enhanced)
   ========================================================================== */
.partners-section {
  padding: 4rem 0;
  background: linear-gradient(180deg, var(--sheriff-gray-light) 0%, var(--sheriff-white) 50%, var(--sheriff-gray-light) 100%);
  position: relative;
}

/* Gold divider at top */
.partners-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 800px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--sheriff-gold) 20%, var(--sheriff-gold-bright) 50%, var(--sheriff-gold) 80%, transparent 100%);
}

.partners-intro {
  margin-bottom: 0;
}

/* Community partner strip -------------------------------------------------
   Partners previously rendered as bare underlined text links because none of
   the records carry a logo. Each is now a card with a default outline symbol.

   The row was a three-column grid capped at six partners; it is now one strip
   carrying every partner, drifting continuously and steerable either way. The
   drift is real scrolling rather than a transform, so touch momentum, trackpad
   gestures, arrow keys and scroll-into-view on focus all come for free - see
   assets/js/partners.js. Everything here works without that script: the strip
   is a scroll container first and an animation second. */
.partner-strip {
  position: relative;
  margin-top: 2rem;
}

.partner-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  /* Room for the cards' hover lift and focus ring, which would otherwise be
     clipped by the scroll container. */
  padding-block: 0.75rem;
  /* The scroll position is driven frame by frame, so smooth scrolling would
     fight it. Arrow keys and swipes are unaffected. */
  scroll-behavior: auto;
  /* The drift is the affordance; a scrollbar under a moving strip reads as a
     rendering fault. It is restored under reduced motion, below, where nothing
     moves and the scrollbar becomes the only cue that there is more to see. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Cards dissolve at the edges instead of being guillotined by the viewport.
     A mask rather than gradient overlays, because the section's own background
     is a vertical gradient that a flat overlay could not match. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--partner-fade), #000 calc(100% - var(--partner-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--partner-fade), #000 calc(100% - var(--partner-fade)), transparent 100%);
  --partner-fade: clamp(1.5rem, 6vw, 6rem);
}

.partner-scroller::-webkit-scrollbar {
  display: none;
}

.partner-scroller:focus-visible {
  outline: 3px solid var(--sheriff-blue);
  outline-offset: 2px;
}

/* The cards are links, so their own pointer cursor would win over the
   container's during a drag. */
.partner-scroller.is-grabbing,
.partner-scroller.is-grabbing * {
  cursor: grabbing;
  user-select: none;
}

.partner-track {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding-inline: var(--partner-fade);
  list-style: none;
}

/* Nothing to scroll to: centre the set rather than looping over a row that
   already fits. Set by the script, and the resting state without it. */
.partner-scroller.is-static .partner-track {
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 1.5rem;
}

.partner-item {
  display: flex;
  flex: 0 0 auto;
  width: clamp(11rem, 52vw, 14.5rem);
}

.partner-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  min-height: 166px;
  padding: 1.5rem;
  background: var(--sheriff-gray-light);
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s var(--transition-smooth),
              border-color 0.2s var(--transition-smooth),
              box-shadow 0.2s var(--transition-smooth);
}

.partner-card-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(11, 31, 58, 0.03);
  border: 1px solid rgba(201, 162, 39, 0.27);
  color: var(--sheriff-blue);
  transition: background-color 0.2s var(--transition-smooth),
              color 0.2s var(--transition-smooth);
}

.partner-card-fallback {
  width: 29px;
  height: 29px;
}

.partner-card-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* While a real logo is present the default symbol stays out of the way. If the
   image fails to load its onerror removes it, this selector stops matching and
   the symbol takes over - so a visitor never sees a broken-image icon. */
.partner-card-logo ~ .partner-card-fallback {
  display: none;
}

.partner-card-name {
  color: var(--sheriff-blue);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}

a.partner-card:hover,
a.partner-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--sheriff-gold);
  box-shadow: var(--card-shadow-md);
}

a.partner-card:hover .partner-card-icon,
a.partner-card:focus-visible .partner-card-icon {
  background: var(--sheriff-blue);
  color: var(--sheriff-gold-soft);
}

a.partner-card:focus-visible {
  outline: 3px solid var(--sheriff-blue);
  outline-offset: 3px;
}

/* ==========================================================================
   16. Contact (Dark Theme)
   ========================================================================== */
.contact-section {
  padding: 4rem 0;
  background: var(--dark-section-bg);
  position: relative;
}

/* Gold/red gradient at top */
.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sheriff-gold) 0%, var(--sheriff-red) 35%, var(--sheriff-red-light) 50%, var(--sheriff-red) 65%, var(--sheriff-gold) 100%);
}

.contact-section .section-heading {
  color: var(--sheriff-white);
}

.contact-section .section-heading::after {
  background: var(--sheriff-gold);
}

.contact-info {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.75rem;
  padding: 2rem;
  border: 1px solid rgba(201, 162, 39, 0.15);
}

.contact-info h3 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--sheriff-white);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.5rem;
  border-left: 3px solid var(--sheriff-gold);
  transition: all 0.3s var(--transition-smooth);
}

.contact-item:hover {
  background: rgba(201, 162, 39, 0.08);
}

.contact-item i {
  font-size: 1.25rem;
  color: var(--sheriff-gold);
  flex-shrink: 0;
  margin-top: 0.125rem;
  filter: drop-shadow(0 0 4px var(--sheriff-gold-glow));
}

.contact-item div {
  color: rgba(255, 255, 255, 0.9);
}

.contact-item strong {
  color: var(--sheriff-gold-bright);
}

.contact-item a {
  color: var(--sheriff-gold);
}

.contact-item a:hover {
  color: var(--sheriff-gold-bright);
}

.contact-section .btn-sheriff-outline {
  border-color: var(--sheriff-gold);
  color: var(--sheriff-gold);
}

.contact-section .btn-sheriff-outline:hover,
.contact-section .btn-sheriff-outline:focus {
  background: var(--sheriff-gold);
  color: var(--sheriff-blue);
  box-shadow: var(--card-shadow-glow-gold);
}

.map-container {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 3px solid rgba(201, 162, 39, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Gold accent line on map */
.map-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sheriff-gold);
  z-index: 1;
}

.map-placeholder {
  background: rgba(255, 255, 255, 0.05);
  height: 300px;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
}

.map-placeholder i {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--sheriff-gold);
}

/* ==========================================================================
   17. Footer
   ========================================================================== */
.main-footer {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  padding: 3rem 0 1.5rem;
  border-top: 4px solid var(--sheriff-gold);
  position: relative;
}

/* Red accent below gold border */
.main-footer::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sheriff-red);
}

.footer-heading {
  color: var(--sheriff-white);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus {
  color: var(--sheriff-white);
}

/* Address and fax lines carry no destination, so they are plain text. They
   match the links around them in size and colour but are not underlined or
   focusable. */
.footer-links .footer-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.footer-links a:focus-visible {
  outline: 2px solid var(--sheriff-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icons a {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sheriff-white);
  text-decoration: none;
  transition: background 0.2s ease;
}

.social-icons a:hover,
.social-icons a:focus {
  background: var(--sheriff-blue-muted);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.footer-bottom p {
  font-size: 0.875rem;
  opacity: 0.8;
  margin: 0;
}

/* Agency credit. A step quieter than the copyright above it - the county's
   own notice should be what the eye settles on last. */
.footer-credit {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
}

.footer-credit a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: underline;
  text-decoration-color: rgba(201, 162, 39, 0.55);
  text-underline-offset: 3px;
  transition: color 0.2s var(--transition-smooth),
              text-decoration-color 0.2s var(--transition-smooth);
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--sheriff-gold-soft);
  text-decoration-color: var(--sheriff-gold-soft);
}

.accessibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.1);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
}

/* ==========================================================================
   18. Responsive Overrides
   ========================================================================== */
@media (max-width: 991.98px) {
  .utility-bar .d-flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .hero-section {
    padding: 4rem 0;
    min-height: auto;
  }

  .section-heading.text-md-start::after {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Dark section adjustments for tablet */
  .booking-blotter,
  .community-links,
  .contact-section {
    padding: 3rem 0;
  }

  .contact-info {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }
}

@media (max-width: 575.98px) {
  .utility-bar {
    padding: 0.5rem 0;
  }

  .utility-bar-content {
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
  }

  .utility-phone-group {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .emergency-911 {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
  }

  .non-emergency {
    font-size: 0.8rem;
  }

  .non-emergency a {
    color: inherit;
    text-decoration: none;
  }

  .utility-actions-group {
    gap: 0.5rem;
  }

  .utility-btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
  }

  /* Compact emergency alert on mobile */
  .emergency-alert-banner {
    padding: 0.5rem 0;
    position: relative;
  }

  .emergency-alert-banner .container {
    position: relative;
    display: flex;
    flex-direction: row !important; /* Force override 767.98px column */
    align-items: flex-start;
    padding-right: 2.5rem; /* Space for close button */
  }

  .emergency-alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
    line-height: 1.4; /* Match message line-height */
  }

  .emergency-alert-title {
    display: none; /* Hide "Emergency Alert" text */
  }

  .emergency-alert-content {
    text-align: left;
  }

  .emergency-alert-message {
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
  }

  .emergency-alert-readmore {
    display: inline; /* Show READ MORE on mobile */
  }

  .emergency-alert-actions {
    position: absolute !important;
    top: 0;
    right: 0;
    width: auto !important;
    justify-content: flex-end !important;
  }

  .emergency-alert-btn {
    display: none; /* Hide Learn More button on mobile */
  }

  .emergency-alert-close {
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
  }

  .news-tabs .nav-pills {
    justify-content: center;
  }

  /* Adjust contact items on mobile */
  .contact-item {
    padding: 0.75rem;
  }

  /* Link chips wrap better on mobile */
  .link-chips {
    gap: 0.5rem;
  }

  .link-chip {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  /* Booking table mobile optimizations */
  .booking-table th:nth-child(6),
  .booking-table td:nth-child(6) {
    display: none; /* Hide Booking ID column */
  }

  .booking-table .mugshot-img {
    width: 40px;
    height: 50px;
  }

  .booking-table th,
  .booking-table td {
    padding: 0.5rem;
    font-size: 0.8rem;
  }

  .booking-table .charge-badge {
    padding: 0.4rem;
    font-size: 0;  /* Hide text */
    justify-content: center;
    padding-left: 10px;
  }

  .booking-table .charge-badge i {
    font-size: 0.85rem; /* Show icon at readable size */
  }

  /* Center section headings on mobile */
  .transparency-section > .container,
  .community-links > .container,
  .news-section > .container,
  .booking-blotter > .container,
  .quick-actions > .container,
  .contact-section > .container {
    text-align: center;
  }

  .transparency-section > .container > .row,
  .community-links > .container > .row,
  .news-section > .container > .row,
  .contact-section > .container > .row {
    text-align: left;
  }

  /* Public Safety & Transparency horizontal scroll on mobile */
  .transparency-section .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    margin: 0;
  }

  .transparency-section .row > [class*="col-"] {
    flex: 0 0 280px;
    max-width: 280px;
    scroll-snap-align: start;
    padding: 0;
  }

  /* News section horizontal scroll on mobile */
  .newsroom-section .tab-pane .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    margin: 0;
  }

  .newsroom-section .tab-pane .row > [class*="col-"] {
    flex: 0 0 280px;
    max-width: 280px;
    scroll-snap-align: start;
    padding: 0;
  }
}

/* ==========================================================================
   19. Focus Styles (Accessibility - Enhanced)
   ========================================================================== */
a:focus,
button:focus,
input:focus,
select:focus,
[tabindex]:focus {
  outline: 3px solid var(--sheriff-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--sheriff-gold-glow);
}

.btn:focus {
  outline: 3px solid var(--sheriff-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--sheriff-gold-glow);
}

/* Dark section focus - brighter outline */
.booking-blotter a:focus,
.booking-blotter button:focus,
.leadership-section a:focus,
.leadership-section button:focus,
.community-links a:focus,
.community-links button:focus,
.contact-section a:focus,
.contact-section button:focus {
  outline-color: var(--sheriff-gold-bright);
  box-shadow: 0 0 0 6px var(--sheriff-gold-glow), 0 0 20px var(--sheriff-gold-glow);
}

/* ==========================================================================
   20. Print Styles
   ========================================================================== */
@media print {
  .utility-bar,
  .main-nav,
  .hero-cta-grid,
  .action-grid,
  .news-tabs,
  .partners-section,
  .careers-section {
    display: none !important;
  }

  .main-header,
  .main-footer {
    background: none !important;
    color: #000 !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a {
    text-decoration: none;
    color: #000;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #000;
  }
}

/* ==========================================================================
   21. Button Utilities
   ========================================================================== */
.btn-sheriff-red {
  background: linear-gradient(180deg, var(--sheriff-red) 0%, var(--sheriff-red-deep) 100%);
  border-color: var(--sheriff-red);
  color: var(--sheriff-white);
  box-shadow: 0 2px 8px rgba(139, 30, 30, 0.3);
  transition: all 0.2s ease;
}

.btn-sheriff-red:hover,
.btn-sheriff-red:focus {
  background: linear-gradient(180deg, var(--sheriff-red-light) 0%, var(--sheriff-red) 100%);
  border-color: var(--sheriff-red-light);
  color: var(--sheriff-white);
  box-shadow: 0 4px 15px rgba(139, 30, 30, 0.4);
  transform: translateY(-1px);
}

.btn-sheriff-blue {
  background: linear-gradient(180deg, var(--sheriff-blue-muted) 0%, var(--sheriff-blue) 100%);
  border-color: var(--sheriff-blue);
  color: var(--sheriff-white);
  box-shadow: 0 2px 8px rgba(11, 31, 58, 0.3);
  transition: all 0.2s ease;
}

.btn-sheriff-blue:hover,
.btn-sheriff-blue:focus {
  background: linear-gradient(180deg, var(--sheriff-blue) 0%, #081628 100%);
  border-color: #081628;
  color: var(--sheriff-white);
  box-shadow: 0 4px 15px rgba(11, 31, 58, 0.4);
  transform: translateY(-1px);
}

.btn-sheriff-outline {
  background: transparent;
  border: 2px solid var(--sheriff-blue);
  color: var(--sheriff-blue);
  transition: all 0.2s ease;
}

.btn-sheriff-outline:hover,
.btn-sheriff-outline:focus {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  box-shadow: 0 4px 15px rgba(11, 31, 58, 0.3);
  transform: translateY(-1px);
}

.btn-white-outline {
  background: transparent;
  border: 2px solid var(--sheriff-white);
  color: var(--sheriff-white);
  transition: all 0.2s ease;
}

.btn-white-outline:hover,
.btn-white-outline:focus {
  background: var(--sheriff-white);
  color: var(--sheriff-blue);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* Minimum tap target size */
.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* ==========================================================================
   22. Floating Side Tabs
   ========================================================================== */
.floating-side-tabs {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* The side tabs are a desktop affordance. On a narrow screen they sit on top of
   the content and are easy to hit by accident, so they are withdrawn - the same
   links remain in the footer's Connect With Us group. */
@media (max-width: 991.98px) {
  .floating-side-tabs {
    display: none;
  }
}

.floating-side-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sheriff-red);
  color: var(--sheriff-white);
  padding: 1rem 0.5rem;
  text-decoration: none;
  border-radius: 8px 0 0 8px;
  transition: background 0.2s ease;
  margin-bottom: 2px;
}

.floating-side-tabs a.donate-tab {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

.floating-side-tabs a.donate-tab:hover {
  background: #a01828;
}

.floating-side-tabs a.social-tab {
  padding: 0.75rem 0.5rem;
  font-size: 1.25rem;
}

.floating-side-tabs a.social-tab.facebook {
  background: #1877F2;
}

.floating-side-tabs a.social-tab.facebook:hover {
  background: #0d65d9;
}

.floating-side-tabs a.social-tab.instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.floating-side-tabs a.social-tab.instagram:hover {
  background: linear-gradient(45deg, #d9842e, #cf5d36, #c6233c, #b81f5c, #a9167a);
}

.floating-side-tabs a.social-tab.twitter-x {
  background: #000000;
}

.floating-side-tabs a.social-tab.twitter-x:hover {
  background: #333333;
}

/* ==========================================================================
   23. Emergency Alert Banner
   ========================================================================== */
.emergency-alert-banner {
  border-top: 4px solid var(--sheriff-gold);
  border-bottom: 2px solid var(--sheriff-gold);
  color: var(--sheriff-white);
  position: relative;
}

/* Single alert fallback background (when no slides exist) */
.emergency-alert-banner:not([data-alert-count]) {
  background: linear-gradient(135deg, var(--sheriff-red) 0%, var(--sheriff-red-light) 100%);
  padding: 1rem 0;
}

.emergency-alert-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.emergency-alert-icon {
  font-size: 1.75rem;
  color: var(--sheriff-gold);
  animation: pulse-alert 2s ease-in-out infinite;
}

@keyframes pulse-alert {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .emergency-alert-icon {
    animation: none;
  }
}

.emergency-alert-content {
  flex: 1;
  max-width: 800px;
  text-align: center;
}

.emergency-alert-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
  color: var(--sheriff-gold);
}

.emergency-alert-message {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}

.emergency-alert-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.emergency-alert-btn {
  background: var(--sheriff-white);
  color: var(--sheriff-red);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.emergency-alert-btn:hover {
  background: var(--sheriff-gold);
  color: var(--sheriff-blue);
}

.emergency-alert-close {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.5);
  color: var(--sheriff-white);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  transition: all 0.2s ease;
}

.emergency-alert-close:hover {
  background: rgba(255,255,255,0.2);
  border-color: var(--sheriff-white);
}

.emergency-alert-readmore {
  display: none;
  color: var(--sheriff-gold);
  font-weight: 700;
  text-decoration: underline;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* Emergency Alert Banner - Responsive */
@media (max-width: 767.98px) {
  .emergency-alert-banner .container {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .emergency-alert-actions {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   PHASE 2: Inner Pages & Components
   ========================================================================== */

/* ==========================================================================
   Inner Page Hero
   ========================================================================== */
.inner-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4rem 0 3rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.inner-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 31, 58, 0.7) 0%,
    rgba(11, 31, 58, 0.85) 100%
  );
  z-index: 1;
}

.inner-hero .container {
  position: relative;
  z-index: 2;
}

.inner-hero-title {
  color: var(--sheriff-white);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin: 1rem 0 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.inner-hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.125rem;
  margin: 0.75rem 0 0;
  max-width: 600px;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumb-nav {
  margin-bottom: 1rem;
}

.breadcrumb-nav .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
}

.breadcrumb-nav .breadcrumb-item {
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-nav .breadcrumb-item a {
  color: var(--sheriff-gold);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-nav .breadcrumb-item a:hover {
  color: var(--sheriff-white);
  text-decoration: underline;
}

.breadcrumb-nav .breadcrumb-item.active {
  color: var(--sheriff-white);
}

.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.5);
  content: "/";
}

/* Light background version */
.breadcrumb-light .breadcrumb-item {
  color: var(--sheriff-gray-dark);
}

.breadcrumb-light .breadcrumb-item a {
  color: var(--sheriff-blue);
}

.breadcrumb-light .breadcrumb-item a:hover {
  color: var(--sheriff-red);
}

.breadcrumb-light .breadcrumb-item.active {
  color: var(--sheriff-gray-dark);
}

.breadcrumb-light .breadcrumb-item + .breadcrumb-item::before {
  color: var(--sheriff-gray-dark);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination-wrapper {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}

.pagination-wrapper .pagination {
  gap: 0.25rem;
}

.pagination-wrapper .page-item .page-link {
  color: var(--sheriff-blue);
  border-color: #dee2e6;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.pagination-wrapper .page-item .page-link:hover {
  background-color: var(--sheriff-gray-light);
  border-color: var(--sheriff-blue);
  color: var(--sheriff-blue);
}

.pagination-wrapper .page-item.active .page-link {
  background-color: var(--sheriff-blue);
  border-color: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.pagination-wrapper .page-item.disabled .page-link {
  color: #6c757d;
  background-color: transparent;
}

.pagination-info {
  color: #6c757d;
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.empty-state {
  padding: 4rem 2rem;
  background-color: var(--sheriff-gray-light);
  border-radius: 0.5rem;
  border: 2px dashed #dee2e6;
}

.empty-state-icon {
  font-size: 4rem;
  color: #adb5bd;
}

.empty-state-title {
  color: var(--sheriff-gray-dark);
  font-weight: 600;
}

/* ==========================================================================
   Filters Bar
   ========================================================================== */
.filters-bar {
  background: var(--sheriff-gray-light);
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid #e9ecef;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: var(--sheriff-white);
  border: 1px solid #dee2e6;
  border-radius: 2rem;
  color: var(--sheriff-gray-dark);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  background: var(--sheriff-blue);
  border-color: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.filter-pill.active {
  background: var(--sheriff-blue);
  border-color: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.filter-pill.active .filter-count {
  background: rgba(255, 255, 255, 0.2);
}

.filters-search .form-control {
  border-color: #dee2e6;
}

.filters-search .form-control:focus {
  border-color: var(--sheriff-blue);
  box-shadow: 0 0 0 0.2rem rgba(11, 31, 58, 0.15);
}

.filters-search .btn-primary {
  background-color: var(--sheriff-blue);
  border-color: var(--sheriff-blue);
}

.filters-search .btn-primary:hover {
  background-color: var(--sheriff-red);
  border-color: var(--sheriff-red);
}

/* ==========================================================================
   Page Intro
   ========================================================================== */
.page-intro {
  max-width: 800px;
}

.page-intro-text {
  font-size: 1.125rem;
  color: var(--sheriff-gray-dark);
  line-height: 1.7;
}

.page-intro-text p:last-child {
  margin-bottom: 0;
}

.page-intro-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-intro-ctas .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==========================================================================
   Card Components Base
   ========================================================================== */
.card-grid {
  display: grid;
  gap: 1.5rem;
}

.card-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.card-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991.98px) {
  .card-grid-3,
  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .card-grid-2,
  .card-grid-3,
  .card-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Content Card Base */
.content-card {
  background: var(--sheriff-white);
  border-radius: 0.5rem;
  border: 1px solid #e9ecef;
  overflow: hidden;
  transition: all 0.3s var(--transition-smooth);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content-card:hover {
  box-shadow: var(--card-shadow-md);
  transform: translateY(-2px);
  border-color: var(--sheriff-blue);
}

.content-card-image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.content-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.content-card:hover .content-card-image img {
  transform: scale(1.05);
}

/* Shown when an article has no featured image. Fills the same 16:9 footprint as
   a real image so card heights stay level across a row. */
.news-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--sheriff-gray-light) 0%, #e4e8ee 100%);
  color: var(--sheriff-blue);
  opacity: 0.45;
  font-size: 3.25rem;
  line-height: 1;
}

.content-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: #6c757d;
}

.content-card-meta .badge {
  font-weight: 600;
}

.content-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.content-card-title a {
  color: var(--sheriff-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

.content-card-title a:hover {
  color: var(--sheriff-red);
}

.content-card-excerpt {
  color: var(--sheriff-gray-dark);
  font-size: 0.9375rem;
  line-height: 1.6;
  flex: 1;
}

.content-card-footer {
  padding: 1rem 1.25rem;
  background: var(--sheriff-gray-light);
  border-top: 1px solid #e9ecef;
  margin-top: auto;
}

/* Category Badge */
.category-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-radius: 0.25rem;
}

.category-badge-outline {
  background: transparent;
  border: 1px solid var(--sheriff-blue);
  color: var(--sheriff-blue);
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 2rem;
}

.status-badge-open {
  background: #d4edda;
  color: #155724;
}

.status-badge-closed {
  background: #e2e3e5;
  color: #383d41;
}

.status-badge-filled {
  background: #fff3cd;
  color: #856404;
}

/* ==========================================================================
   Archive Page Layout
   ========================================================================== */
.archive-page {
  padding: 3rem 0 4rem;
}

/* Custom page templates sit directly under the inner hero with no breathing
   room of their own - on /contact/ the red emergency notice touched the hero.
   Match the spacing the archive templates already use. */
.page-template {
  padding: 3rem 0 4rem;
}

.archive-header {
  margin-bottom: 2rem;
}

.archive-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 0.5rem;
  color: var(--sheriff-blue);
}

.archive-description {
  color: var(--sheriff-gray-dark);
  font-size: 1.0625rem;
  max-width: 700px;
}

.archive-count {
  color: #6c757d;
  font-size: 0.9375rem;
}

/* ==========================================================================
   Single Page Layout
   ========================================================================== */
.single-page {
  padding: 3rem 0 4rem;
}

.single-content {
  max-width: 800px;
}

.single-content h2,
.single-content h3,
.single-content h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.single-content p {
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

.single-content ul,
.single-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.single-content li {
  margin-bottom: 0.5rem;
}

.single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Single Meta */
.single-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef;
  font-size: 0.9375rem;
  color: #6c757d;
}

.single-meta i {
  color: var(--sheriff-blue);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.page-sidebar {
  position: sticky;
  top: 2rem;
}

.sidebar-widget {
  background: var(--sheriff-gray-light);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.sidebar-widget-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--sheriff-gold);
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-list li {
  margin-bottom: 0.5rem;
}

.sidebar-list a {
  color: var(--sheriff-gray-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  transition: color 0.2s ease;
}

.sidebar-list a:hover {
  color: var(--sheriff-red);
}

.sidebar-list a i {
  color: var(--sheriff-blue);
  font-size: 0.875rem;
}

/* ==========================================================================
   Related Posts
   ========================================================================== */
.related-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid #e9ecef;
}

.related-section-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Page Template Styles
   ========================================================================== */
.page-template-section {
  padding: 4rem 0;
}

.page-template-section:nth-child(even) {
  background: var(--sheriff-gray-light);
}

.page-template-section-title {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.page-template-section-title::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--sheriff-gold);
}

/* ==========================================================================
   Inner Page Responsive Adjustments
   ========================================================================== */
@media (max-width: 991.98px) {
  .inner-hero {
    padding: 3rem 0 2rem;
    min-height: 220px;
  }

  .inner-hero-title {
    font-size: 1.75rem;
  }

  .archive-page,
  .page-template,
  .single-page {
    padding: 2rem 0 3rem;
  }

  .page-sidebar {
    position: static;
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .inner-hero {
    padding: 2.5rem 0 1.5rem;
    min-height: 180px;
  }

  .filter-pills {
    gap: 0.375rem;
  }

  .filter-pill {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .content-card-body {
    padding: 1rem;
  }

  .page-template-section {
    padding: 3rem 0;
  }
}

/* ==========================================================================
   Card Component Specific Styles
   ========================================================================== */

/* Staff Card */
.staff-card .staff-card-image {
  padding: 1.5rem 1.5rem 0;
  text-align: center;
}

.staff-card .staff-card-image img,
.staff-card .staff-card-image .staff-photo-placeholder {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--sheriff-gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Neutral fallback shown when a staff portrait has not been uploaded.
   Holds a square 1:1 footprint so card and profile geometry never shifts. */
.staff-photo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sheriff-gray-light);
  color: var(--sheriff-blue);
  font-size: 3rem;
  line-height: 1;
}

.staff-profile-photo.staff-photo-placeholder {
  font-size: 4rem;
}

.program-coordinator-photo.staff-photo-placeholder {
  font-size: 1.5rem;
}

.staff-card-title {
  color: var(--sheriff-blue);
  font-size: 0.9375rem;
}

.staff-card-contact {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.staff-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--sheriff-gray-light);
  border-radius: 50%;
  color: var(--sheriff-blue);
  text-decoration: none;
  transition: all 0.2s ease;
}

.staff-card-link:hover {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

/* Event Card */
.event-card-header {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--sheriff-gray-light);
  border-bottom: 1px solid #e9ecef;
}

.event-card-date-box {
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  border-radius: 0.375rem;
  padding: 0.5rem;
}

.event-date-month {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sheriff-gold);
}

.event-date-day {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.event-card-header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.event-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.event-card-meta i {
  flex-shrink: 0;
}

.event-past {
  opacity: 0.7;
}

.event-past .event-card-date-box {
  background: #6c757d;
}

/* Program Card */
.program-card-badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: var(--sheriff-red);
  color: var(--sheriff-white);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.25rem;
}

/* Resource Card */
.resource-card {
  flex-direction: row;
  align-items: stretch;
}

.resource-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  flex-shrink: 0;
  background: var(--sheriff-gray-light);
  font-size: 2rem;
  color: var(--sheriff-blue);
  border-right: 1px solid #e9ecef;
}

.resource-card .content-card-body {
  flex: 1;
}

.resource-card .content-card-footer {
  display: flex;
  align-items: center;
  border-top: none;
  border-left: 1px solid #e9ecef;
  background: transparent;
  padding: 1rem;
}

@media (max-width: 575.98px) {
  .resource-card {
    flex-direction: column;
  }

  .resource-card-icon {
    width: 100%;
    height: 60px;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
    font-size: 1.5rem;
  }

  .resource-card .content-card-footer {
    border-left: none;
    border-top: 1px solid #e9ecef;
  }
}

/* Job Card */
.job-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.job-card-meta i {
  width: 16px;
  text-align: center;
}

.job-closed {
  opacity: 0.7;
}

.job-closed .content-card-title a {
  color: #6c757d;
}

/* ==========================================================================
   Arrest Table Styles
   ========================================================================== */
.arrest-table {
  width: 100%;
  border-collapse: collapse;
}

.arrest-table th {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 1rem;
  text-align: left;
}

.arrest-row {
  border-bottom: 1px solid #e9ecef;
  transition: background-color 0.2s ease;
}

.arrest-row:hover {
  background-color: var(--sheriff-gray-light);
}

.arrest-row td {
  padding: 1rem;
  vertical-align: middle;
}

.arrest-mugshot-cell {
  width: 80px;
}

.arrest-mugshot {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.375rem;
  border: 2px solid #dee2e6;
}

.arrest-info-cell {
  min-width: 150px;
}

.arrest-name {
  display: block;
  font-weight: 700;
  color: var(--sheriff-blue);
  text-decoration: none;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}

.arrest-name:hover {
  color: var(--sheriff-red);
  text-decoration: underline;
}

.arrest-age {
  font-size: 0.8125rem;
  color: #6c757d;
}

.arrest-booking-cell {
  width: 120px;
}

.arrest-booking-id {
  display: block;
  font-weight: 600;
  color: var(--sheriff-blue);
  font-size: 0.875rem;
}

.arrest-date,
.arrest-time {
  display: block;
  font-size: 0.8125rem;
  color: #6c757d;
}

.arrest-charges-cell {
  min-width: 200px;
}

.arrest-charges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.arrest-action-cell {
  width: 120px;
  text-align: right;
}

/* Responsive Arrest Table */
@media (max-width: 991.98px) {
  .arrest-table thead {
    display: none;
  }

  .arrest-table,
  .arrest-table tbody,
  .arrest-table tr,
  .arrest-table td {
    display: block;
    width: 100%;
  }

  .arrest-row {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    background: var(--sheriff-white);
  }

  .arrest-row td {
    padding: 0.5rem 0;
    border: none;
  }

  .arrest-mugshot-cell {
    width: 100%;
    text-align: center;
    padding-bottom: 1rem;
  }

  .arrest-mugshot {
    width: 100px;
    height: 100px;
  }

  .arrest-info-cell {
    text-align: center;
  }

  .arrest-booking-cell {
    width: 100%;
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
  }

  .arrest-charges-cell {
    width: 100%;
    justify-content: center;
  }

  .arrest-charges {
    justify-content: center;
  }

  .arrest-action-cell {
    width: 100%;
    text-align: center;
    padding-top: 1rem;
  }

  .arrest-action-cell .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Staff Profile Styles
   ========================================================================== */
.staff-profile-sidebar {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.staff-profile-photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--sheriff-gold);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.staff-profile-info {
  border-top: 1px solid #e9ecef;
  padding-top: 1.5rem;
}

.staff-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.staff-info-item:last-child {
  border-bottom: none;
}

.staff-info-label {
  font-size: 0.875rem;
  color: #6c757d;
  font-weight: 500;
}

.staff-info-value {
  font-weight: 600;
  color: var(--sheriff-blue);
  text-decoration: none;
}

.staff-info-value:hover {
  color: var(--sheriff-red);
}

.staff-biography {
  font-size: 1.0625rem;
  line-height: 1.8;
}

/* ==========================================================================
   Resources List Styles
   ========================================================================== */
.resources-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.resources-list .resource-card {
  margin-bottom: 0;
}

/* ==========================================================================
   Division Services Styles
   ========================================================================== */
.division-services {
  display: grid;
  gap: 1.5rem;
}

.division-service {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--sheriff-gray-light);
  border-radius: 0.5rem;
  border-left: 4px solid var(--sheriff-gold);
}

.division-service-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  border-radius: 0.5rem;
  font-size: 1.25rem;
}

.division-service-content h4 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: var(--sheriff-blue);
}

.division-service-content p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--sheriff-gray-dark);
}

/* ==========================================================================
   Division Gallery
   ========================================================================== */
.division-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.division-gallery-item {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 0.5rem;
}

.division-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.division-gallery-item:hover img {
  transform: scale(1.05);
}

@media (max-width: 767.98px) {
  .division-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Program Details
   ========================================================================== */
.program-schedule {
  background: var(--sheriff-gray-light);
  padding: 1.5rem;
  border-radius: 0.5rem;
  border-left: 4px solid var(--sheriff-gold);
}

.program-schedule-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--sheriff-blue);
}

.program-schedule-content {
  margin: 0;
  white-space: pre-line;
  font-size: 0.9375rem;
}

.program-coordinator {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--sheriff-gray-light);
  border-radius: 0.5rem;
}

.program-coordinator-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sheriff-gold);
}

.program-coordinator-info {
  flex: 1;
}

.program-coordinator-name {
  font-weight: 600;
  color: var(--sheriff-blue);
  text-decoration: none;
  display: block;
}

.program-coordinator-name:hover {
  color: var(--sheriff-red);
}

.program-coordinator-title {
  font-size: 0.875rem;
  color: #6c757d;
}

/* ==========================================================================
   Events Calendar
   ========================================================================== */
.events-calendar {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  overflow: hidden;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.calendar-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--sheriff-white);
}

.calendar-nav-prev,
.calendar-nav-next {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--sheriff-white);
}

.calendar-nav-prev:hover,
.calendar-nav-next:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--sheriff-white);
  color: var(--sheriff-white);
}

.calendar-grid {
  padding: 1rem;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.calendar-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #6c757d;
  padding: 0.5rem;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.calendar-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--sheriff-gray-light);
}

.calendar-day:hover {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.calendar-day.other-month {
  opacity: 0.3;
  cursor: default;
}

.calendar-day.other-month:hover {
  background: var(--sheriff-gray-light);
  color: inherit;
}

.calendar-day.today {
  background: var(--sheriff-gold);
  color: var(--sheriff-blue);
  font-weight: 700;
}

.calendar-day.selected {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.calendar-day.has-events::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 6px;
  height: 6px;
  background: var(--sheriff-red);
  border-radius: 50%;
}

.calendar-day.today.has-events::after {
  background: var(--sheriff-blue);
}

.calendar-day.selected.has-events::after {
  background: var(--sheriff-white);
}

.calendar-day-number {
  font-size: 0.875rem;
  font-weight: 500;
}

.calendar-event-dot {
  display: none;
}

.calendar-events-panel {
  padding: 1rem 1.25rem;
  border-top: 1px solid #e9ecef;
  min-height: 100px;
}

.calendar-events-empty {
  text-align: center;
  color: #6c757d;
  padding: 1rem;
}

.calendar-events-empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

.calendar-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calendar-event-item {
  display: block;
  padding: 0.75rem 1rem;
  background: var(--sheriff-gray-light);
  border-radius: 0.375rem;
  text-decoration: none;
  color: var(--sheriff-blue);
  transition: all 0.2s ease;
}

.calendar-event-item:hover {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.calendar-event-title {
  font-weight: 500;
}

/* ==========================================================================
   Event Details Styles
   ========================================================================== */
.event-details-box {
  border-left: 4px solid var(--sheriff-gold);
}

.event-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.event-detail i {
  flex-shrink: 0;
}

.event-detail strong {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.map-embed-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.map-embed-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Job Details Styles
   ========================================================================== */
.job-details-box {
  border-left: 4px solid var(--sheriff-gold);
}

.job-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.job-detail i {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.job-detail strong {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.job-content-block ul,
.job-content-block ol {
  padding-left: 1.25rem;
}

.job-content-block li {
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   Careers Page Styles
   ========================================================================== */
.careers-intro {
  font-size: 1.0625rem;
}

.careers-intro .lead {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--sheriff-blue);
}

.stat-box {
  border-radius: 0.5rem;
  transition: transform 0.2s ease;
}

.stat-box:hover {
  transform: translateY(-2px);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
}

.benefit-card {
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

.benefit-card:hover {
  border-left-color: var(--sheriff-gold);
  transform: translateY(-2px);
}

/* ==========================================================================
   Responsive Calendar
   ========================================================================== */
@media (max-width: 575.98px) {
  .calendar-day {
    font-size: 0.75rem;
  }

  .calendar-weekday {
    font-size: 0.625rem;
    padding: 0.25rem;
  }

  .calendar-day.has-events::after {
    width: 4px;
    height: 4px;
    bottom: 2px;
  }
}

/* ==========================================================================
   Transparency Page
   ========================================================================== */
.transparency-section-card {
  background: var(--sheriff-white);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  border: 1px solid #e9ecef;
}

.transparency-section-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.transparency-section-card .section-icon {
  width: 56px;
  height: 56px;
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.transparency-section-card .section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sheriff-blue);
  margin-bottom: 0.5rem;
}

.transparency-section-card .section-description {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

.transparency-section-card .section-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sheriff-red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.transparency-section-card .section-link:hover {
  text-decoration: underline;
}

/* Report Cards */
.report-card {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.report-card .report-type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sheriff-red);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.report-card .report-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sheriff-blue);
  margin-bottom: 0.375rem;
}

.report-card .report-description {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.375rem;
}

.report-card .report-date {
  font-size: 0.75rem;
  color: #adb5bd;
}

/* Dashboard Cards */
.dashboard-card {
  display: block;
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s ease;
}

.dashboard-card:hover {
  border-color: var(--sheriff-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.dashboard-card i {
  font-size: 2.5rem;
  color: var(--sheriff-blue);
  margin-bottom: 1rem;
}

.dashboard-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sheriff-gray-dark);
  margin-bottom: 0.375rem;
}

.dashboard-card p {
  font-size: 0.8125rem;
  color: #6c757d;
  margin-bottom: 0.75rem;
}

.dashboard-card .dashboard-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sheriff-red);
}

/* Policies List */
.policies-list {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  overflow: hidden;
}

.policy-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #e9ecef;
}

.policy-item:last-child {
  border-bottom: none;
}

.policy-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.policy-info i {
  color: var(--sheriff-blue);
  font-size: 1.25rem;
}

.policy-title {
  font-size: 0.9375rem;
  color: var(--sheriff-gray-dark);
}

.policy-download {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sheriff-gray-light);
  border-radius: 50%;
  color: var(--sheriff-blue);
  transition: all 0.2s ease;
}

.policy-download:hover {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

/* Records Request CTA */
.records-request-cta .cta-card {
  background: linear-gradient(135deg, var(--sheriff-blue) 0%, #0a1628 100%);
  color: var(--sheriff-white);
  border-radius: 0.5rem;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.records-request-cta .cta-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.records-request-cta .cta-card p {
  margin-bottom: 0;
  opacity: 0.9;
}

/* ==========================================================================
   Contact Page
   ========================================================================== */
.contact-form-section {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 2rem;
}

.contact-form .hp-field {
  position: absolute;
  left: -9999px;
}

.contact-form .required {
  color: var(--sheriff-red);
}

.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-info-card {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  display: flex;
  gap: 1rem;
}

.contact-info-card .contact-icon {
  width: 44px;
  height: 44px;
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-card .contact-icon i {
  font-size: 1.25rem;
}

.contact-info-card .contact-details h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sheriff-gray-dark);
  margin-bottom: 0.125rem;
}

.contact-info-card .contact-details a,
.contact-info-card .contact-details p,
.contact-info-card .contact-details address {
  font-size: 0.9375rem;
  color: #6c757d;
  text-decoration: none;
  margin: 0;
  font-style: normal;
}

.contact-info-card .contact-details a:hover {
  color: var(--sheriff-red);
}

.contact-quick-links h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.contact-quick-links li {
  margin-bottom: 0.5rem;
}

.contact-quick-links a {
  color: var(--sheriff-gray-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.contact-quick-links a:hover {
  color: var(--sheriff-red);
}

.contact-quick-links a i {
  color: var(--sheriff-blue);
}

/* Location Cards */
.location-card {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.25rem;
  height: 100%;
}

.location-card .location-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--sheriff-blue);
  margin-bottom: 0.75rem;
}

.location-card address {
  font-style: normal;
  font-size: 0.9375rem;
  color: #6c757d;
  margin-bottom: 0.75rem;
}

.location-card .location-phone,
.location-card .location-hours {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
}

.location-card .location-phone a {
  color: #6c757d;
  text-decoration: none;
}

.location-card .location-phone a:hover {
  color: var(--sheriff-red);
}

.location-card .location-map-link {
  display: inline-flex;
  align-items: center;
  color: var(--sheriff-red);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

.location-card .location-map-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Arrests Archive & Single
   ========================================================================== */
.arrest-disclaimer {
  font-size: 0.9375rem;
}

.arrests-table {
  background: var(--sheriff-white);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.arrests-table thead {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.arrests-table th {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.875rem 1rem;
  border: none;
}

.arrests-table td {
  padding: 0.875rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #e9ecef;
}

.arrests-table tbody tr:hover {
  background: var(--sheriff-gray-light);
}

.arrests-table .col-photo {
  width: 80px;
}

.arrests-table .mugshot-thumb {
  width: 60px;
  height: 75px;
  object-fit: cover;
  border-radius: 0.25rem;
}

.arrests-table .mugshot-placeholder {
  width: 60px;
  height: 75px;
  background: #e9ecef;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
}

.arrests-table .inmate-name {
  font-weight: 600;
  color: var(--sheriff-blue);
  text-decoration: none;
}

.arrests-table .inmate-name:hover {
  color: var(--sheriff-red);
}

.arrests-table .inmate-age {
  font-size: 0.8125rem;
  color: #6c757d;
}

.arrests-table .charges-list {
  font-size: 0.8125rem;
}

.arrests-table .charges-list li {
  margin-bottom: 0.25rem;
}

.arrests-table .status-badge {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Arrest Detail Page */
.arrest-detail .arrest-header {
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #e9ecef;
}

.arrest-detail .arrest-name {
  font-size: 1.75rem;
  color: var(--sheriff-blue);
  margin-bottom: 0.25rem;
}

.arrest-detail .booking-number {
  font-size: 0.9375rem;
}

.arrest-detail .status-badge {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

.arrest-section {
  padding: 1.5rem 0;
  border-bottom: 1px solid #e9ecef;
}

.arrest-section:last-of-type {
  border-bottom: none;
}

.arrest-section .section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sheriff-blue);
  margin-bottom: 1rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.info-item {
  background: var(--sheriff-gray-light);
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
}

.info-item .info-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.info-item .info-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sheriff-gray-dark);
}

.charges-list .charge-item {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
}

.charge-item .charge-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.charge-item .charge-description {
  font-weight: 500;
  color: var(--sheriff-gray-dark);
}

.charge-item .charge-degree {
  font-size: 0.6875rem;
  text-transform: uppercase;
}

.charge-item .charge-statute {
  font-size: 0.8125rem;
}

.charge-types .badge {
  margin-right: 0.375rem;
  margin-bottom: 0.375rem;
}

/* Press Release Section */
.press-release-section {
  background: var(--sheriff-gray-light);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-top: 1rem;
}

.press-release-section .section-title {
  display: flex;
  align-items: center;
  color: var(--sheriff-red);
}

.press-release-headline {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sheriff-blue);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--sheriff-gold);
}

.press-release-content {
  line-height: 1.75;
  color: var(--sheriff-gray-dark);
}

.press-release-content p {
  margin-bottom: 1rem;
}

.press-release-content strong {
  color: var(--sheriff-blue);
}

.press-release-content em {
  color: #6c757d;
}

.press-release-content ul,
.press-release-content ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.press-release-content li {
  margin-bottom: 0.5rem;
}

.press-release-content hr {
  border: none;
  border-top: 1px solid #dee2e6;
  margin: 1.5rem 0;
}

.press-release-content a {
  color: var(--sheriff-red);
  text-decoration: underline;
}

.press-release-content a:hover {
  color: var(--sheriff-red-light);
}

/* Print styles for press release */
@media print {
  .press-release-section {
    background: none;
    border: 1px solid #000;
    page-break-inside: avoid;
  }

  .press-release-headline {
    border-bottom-color: #000;
  }
}

/* Mugshot Sidebar */
.arrest-mugshot-placeholder .placeholder-box {
  background: #e9ecef;
  border-radius: 0.5rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #adb5bd;
}

.arrest-mugshot-placeholder .placeholder-box i {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  display: block;
}

.quick-facts-box {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.quick-facts-box h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.quick-facts-box li {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.quick-facts-box li i {
  color: var(--sheriff-blue);
  margin-right: 0.5rem;
}

/* ==========================================================================
   Alerts Archive & Single
   ========================================================================== */
.alerts-grid {
  display: grid;
  gap: 1rem;
}

.alert-card {
  background: var(--sheriff-white);
  border-radius: 0.5rem;
  padding: 1.25rem;
  border-left: 4px solid #6c757d;
}

.alert-card.alert-danger {
  border-left-color: var(--sheriff-red);
  background: #fff5f5;
}

.alert-card.alert-warning {
  border-left-color: #ffc107;
  background: #fffef5;
}

.alert-card.alert-info {
  border-left-color: var(--sheriff-blue);
  background: #f5f9ff;
}

.alert-card.is-active {
  box-shadow: 0 4px 12px rgba(139, 30, 30, 0.15);
}

.alert-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.alert-card .alert-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.alert-card .alert-category {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.alert-card .alert-status {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.alert-card .alert-status.active {
  color: var(--sheriff-red);
}

.alert-card .alert-date {
  font-size: 0.8125rem;
  color: #6c757d;
}

.alert-card .alert-title {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.alert-card .alert-title a {
  color: var(--sheriff-gray-dark);
  text-decoration: none;
}

.alert-card .alert-title a:hover {
  color: var(--sheriff-red);
}

.alert-card .alert-excerpt {
  font-size: 0.9375rem;
  color: #6c757d;
  margin-bottom: 0.75rem;
}

.alert-card .alert-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sheriff-red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.alert-card .alert-link:hover {
  text-decoration: underline;
}

/* Alert Signup CTA */
.alert-signup-cta .cta-card {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  border-radius: 0.5rem;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.alert-signup-cta .cta-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.alert-signup-cta .cta-card p {
  margin-bottom: 0;
  opacity: 0.9;
}

/* Alert Detail Page */
.alert-detail .alert-header {
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.alert-detail .alert-header.alert-danger {
  background: #fff5f5;
  border-left: 4px solid var(--sheriff-red);
}

.alert-detail .alert-header.alert-warning {
  background: #fffef5;
  border-left: 4px solid #ffc107;
}

.alert-detail .alert-header.alert-info {
  background: #f5f9ff;
  border-left: 4px solid var(--sheriff-blue);
}

.alert-detail .alert-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.alert-detail .pulse-badge {
  animation: pulse-animation 1.5s infinite;
}

@keyframes pulse-animation {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.alert-detail .alert-title {
  font-size: 1.75rem;
  color: var(--sheriff-gray-dark);
  margin-bottom: 0.75rem;
}

.alert-detail .alert-dates {
  font-size: 0.875rem;
  color: #6c757d;
}

.alert-detail .alert-dates span {
  display: inline-block;
  margin-right: 1.5rem;
}

.alert-section .section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sheriff-blue);
  margin-bottom: 1rem;
}

.resources-list {
  list-style: none;
  padding: 0;
}

.resources-list li {
  margin-bottom: 0.5rem;
}

.resources-list a {
  color: var(--sheriff-gray-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.resources-list a:hover {
  color: var(--sheriff-red);
  text-decoration: underline;
}

/* Emergency Box */
.emergency-box {
  background: linear-gradient(135deg, var(--sheriff-red) 0%, #5c1414 100%);
  color: var(--sheriff-white);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.emergency-box h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.emergency-box .emergency-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.emergency-box .emergency-item:last-child {
  border-bottom: none;
}

.emergency-box .label {
  font-size: 0.8125rem;
  opacity: 0.9;
}

.emergency-box .number {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sheriff-white);
  text-decoration: none;
}

.emergency-box .number:hover {
  text-decoration: underline;
}

/* Details Box */
.details-box {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.details-box h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.details-list {
  margin: 0;
}

.details-list dt {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
  margin-bottom: 0.125rem;
}

.details-list dd {
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}

/* Share Box */
.share-box {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.share-box h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.share-buttons {
  display: flex;
  gap: 0.5rem;
}

.share-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.share-btn.facebook {
  background: #1877f2;
  color: var(--sheriff-white);
}

.share-btn.twitter {
  background: #000;
  color: var(--sheriff-white);
}

.share-btn.email {
  background: var(--sheriff-gold);
  color: var(--sheriff-gray-dark);
}

.share-btn.copy {
  background: var(--sheriff-gray-light);
  color: var(--sheriff-gray-dark);
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Sidebar CTA Box */
.sidebar-cta-box {
  background: var(--sheriff-gray-light);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.sidebar-cta-box h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sidebar-cta-box p {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

/* ==========================================================================
   Resources Page
   ========================================================================== */
.category-card {
  display: block;
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-decoration: none;
  height: 100%;
  transition: all 0.2s ease;
}

.category-card:hover {
  border-color: var(--sheriff-blue);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.category-card .category-icon {
  width: 56px;
  height: 56px;
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.category-card .category-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sheriff-gray-dark);
  margin-bottom: 0.375rem;
}

.category-card .category-description {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

.category-card .category-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sheriff-red);
}

/* Resource Search Box */
.search-box {
  background: var(--sheriff-gray-light);
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
}

.search-box h3 {
  font-size: 1.25rem;
  margin-bottom: 0.375rem;
}

.search-box p {
  color: #6c757d;
  margin-bottom: 1.5rem;
}

.resource-search-form .input-group {
  max-width: 500px;
  margin: 0 auto;
}

/* Resource Type Section */
.resource-type-section .section-header {
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 0.75rem;
}

.resource-type-section .view-all-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sheriff-red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.resource-type-section .view-all-link:hover {
  text-decoration: underline;
}

/* All Resources CTA */
.all-resources-cta {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}

/* ==========================================================================
   Phase 2G Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  .records-request-cta .cta-card,
  .alert-signup-cta .cta-card {
    flex-direction: column;
    text-align: center;
  }

  .contact-form-section {
    padding: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .report-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .report-card .report-action {
    margin-top: 1rem;
  }

  .info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .alert-detail .alert-title {
    font-size: 1.5rem;
  }

  .arrest-detail .arrest-name {
    font-size: 1.5rem;
  }

  .share-buttons {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   PHASE 3: 404 Page, Search Results, WooCommerce
   ========================================================================== */

/* ==========================================================================
   404 Error Page
   ========================================================================== */
.error-404-hero {
  background: linear-gradient(135deg, var(--sheriff-blue) 0%, #0a1628 100%);
  color: var(--sheriff-white);
  padding: 4rem 0;
  text-align: center;
}

.error-404-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.error-badge-wrapper {
  display: flex;
  justify-content: center;
}

.error-badge-img {
  width: 120px;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.4));
}

.error-message {
  max-width: 600px;
}

.error-code {
  display: block;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sheriff-gold);
  text-shadow: 0 4px 20px rgba(201, 162, 39, 0.3);
  margin-bottom: 0.5rem;
}

.error-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sheriff-white);
  margin: 0 0 1rem;
}

.error-description {
  font-size: 1.125rem;
  opacity: 0.9;
  margin: 0;
}

.error-404-body {
  padding: 3rem 0 4rem;
}

.error-search-section {
  max-width: 600px;
  margin: 0 auto 3rem;
}

.error-search-form .form-control {
  border-color: #dee2e6;
}

.error-search-form .form-control:focus {
  border-color: var(--sheriff-blue);
  box-shadow: 0 0 0 0.2rem rgba(11, 31, 58, 0.15);
}

.error-search-form .btn-primary {
  background-color: var(--sheriff-blue);
  border-color: var(--sheriff-blue);
}

.error-search-form .btn-primary:hover {
  background-color: var(--sheriff-red);
  border-color: var(--sheriff-red);
}

.error-quick-links {
  margin-bottom: 3rem;
}

.error-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--sheriff-gray-dark);
  transition: all 0.2s ease;
  height: 100%;
  min-height: 120px;
}

.error-link-card:hover {
  border-color: var(--sheriff-blue);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  color: var(--sheriff-blue);
}

.error-link-card i {
  font-size: 2rem;
  color: var(--sheriff-blue);
  margin-bottom: 0.75rem;
}

.error-link-card span {
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
}

.error-emergency-box {
  background: var(--sheriff-gray-light);
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;
  margin-bottom: 3rem;
  border-left: 4px solid var(--sheriff-red);
}

.error-recent-news {
  margin-bottom: 3rem;
}

.error-report-section {
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}

@media (max-width: 767.98px) {
  .error-code {
    font-size: 4rem;
  }

  .error-title {
    font-size: 1.5rem;
  }

  .error-link-card {
    min-height: 100px;
    padding: 1rem;
  }

  .error-link-card i {
    font-size: 1.5rem;
  }

  .error-link-card span {
    font-size: 0.8125rem;
  }

  .error-emergency-box {
    padding: 1rem 1.25rem;
    text-align: center;
  }
}

/* ==========================================================================
   Search Results Page
   ========================================================================== */
.search-results-page {
  padding: 3rem 0 4rem;
}

.search-form-section {
  margin-bottom: 2rem;
}

.search-form-large .input-group-text {
  border-color: #dee2e6;
}

.search-form-large .form-control {
  border-color: #dee2e6;
}

.search-form-large .form-control:focus {
  border-color: var(--sheriff-blue);
  box-shadow: none;
}

.search-form-large .btn-primary {
  background-color: var(--sheriff-blue);
  border-color: var(--sheriff-blue);
  padding-left: 2rem;
  padding-right: 2rem;
}

.search-form-large .btn-primary:hover {
  background-color: var(--sheriff-red);
  border-color: var(--sheriff-red);
}

.search-summary {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

.search-count {
  font-size: 1.0625rem;
  margin-bottom: 1rem;
}

.search-jump-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.jump-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6c757d;
}

.jump-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--sheriff-gray-light);
  border-radius: 2rem;
  color: var(--sheriff-gray-dark);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.jump-link:hover {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.jump-link .badge {
  font-size: 0.6875rem;
}

.search-group {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e9ecef;
}

.search-group:last-of-type {
  border-bottom: none;
}

.search-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.search-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  margin: 0;
}

.search-group-title i {
  color: var(--sheriff-blue);
}

.search-group-title .badge {
  font-size: 0.75rem;
  font-weight: 600;
}

.view-all-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sheriff-red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.view-all-link:hover {
  text-decoration: underline;
}

.search-suggestions {
  max-width: 600px;
  margin: 2rem auto 0;
}

.suggestions-list {
  color: #6c757d;
  padding-left: 1.5rem;
}

.suggestions-list li {
  margin-bottom: 0.5rem;
}

.suggestion-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: var(--sheriff-gray-light);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--sheriff-gray-dark);
  transition: all 0.2s ease;
}

.suggestion-link:hover {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.suggestion-link i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.no-search-query {
  max-width: 600px;
  margin: 0 auto;
}

.no-search-query i {
  opacity: 0.5;
}

@media (max-width: 767.98px) {
  .search-jump-links {
    gap: 0.5rem;
  }

  .jump-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  .search-group-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-group-title {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   WooCommerce Overrides
   ========================================================================== */
.woocommerce-page {
  padding: 3rem 0 4rem;
}

.shop-archive-page {
  padding: 3rem 0 4rem;
}

.single-product-page {
  padding: 2rem 0 4rem;
}

/* Product Breadcrumbs */
.product-breadcrumbs {
  margin-bottom: 1rem;
}

.woocommerce-breadcrumb {
  font-size: 0.875rem;
  color: #6c757d;
}

.woocommerce-breadcrumb a {
  color: var(--sheriff-blue);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: var(--sheriff-red);
  text-decoration: underline;
}

/* Shop Sidebar */
.shop-sidebar {
  margin-bottom: 2rem;
}

.shop-widget {
  background: var(--sheriff-gray-light);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.shop-widget-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--sheriff-gold);
}

.shop-category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shop-category-list li {
  margin-bottom: 0.5rem;
}

.shop-category-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color: var(--sheriff-gray-dark);
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.shop-category-list a:hover,
.shop-category-list a.active {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
}

.shop-category-list .count {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Shop Toolbar */
.shop-toolbar {
  background: var(--sheriff-gray-light);
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
}

.shop-result-count {
  font-size: 0.9375rem;
  color: #6c757d;
}

.shop-ordering select {
  border-color: #dee2e6;
  border-radius: 0.375rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
}

/* Product Card */
.product-card {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s var(--transition-smooth);
  height: 100%;
}

.product-card:hover {
  box-shadow: var(--card-shadow-md);
  transform: translateY(-2px);
  border-color: var(--sheriff-blue);
}

.product-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--sheriff-gray-light);
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card-image img {
  transform: scale(1.05);
}

.product-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  color: #adb5bd;
}

.product-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.product-badge-sale,
.product-badge-featured,
.product-badge-sold {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.product-quick-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card:hover .product-quick-actions {
  opacity: 1;
}

.product-add-to-cart {
  width: 100%;
}

.product-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card-category {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sheriff-red);
  margin-bottom: 0.5rem;
}

.product-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.product-card-title a {
  color: var(--sheriff-blue);
  text-decoration: none;
}

.product-card-title a:hover {
  color: var(--sheriff-red);
}

.product-card-rating {
  margin-bottom: 0.5rem;
}

.product-card-rating .star-rating {
  font-size: 0.875rem;
}

.product-card-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sheriff-gray-dark);
  margin-top: auto;
}

.product-card-price del {
  color: #6c757d;
  font-weight: 400;
  font-size: 0.9375rem;
}

.product-card-price ins {
  color: var(--sheriff-red);
  text-decoration: none;
}

.product-card-footer {
  padding: 1rem 1.25rem;
  background: var(--sheriff-gray-light);
  border-top: 1px solid #e9ecef;
}

/* WooCommerce Product Loop */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 991.98px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

.woocommerce ul.products li.product {
  margin: 0;
  padding: 0;
  width: 100%;
  float: none;
}

/* Single Product Page */
.woocommerce div.product {
  margin-bottom: 3rem;
}

.woocommerce div.product div.images {
  margin-bottom: 2rem;
}

.woocommerce div.product div.images img {
  border-radius: 0.5rem;
}

.woocommerce div.product div.summary {
  padding-left: 2rem;
}

.woocommerce div.product .product_title {
  font-size: 2rem;
  color: var(--sheriff-blue);
  margin-bottom: 1rem;
}

.woocommerce div.product p.price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sheriff-gray-dark);
  margin-bottom: 1.5rem;
}

.woocommerce div.product p.price del {
  opacity: 0.6;
  font-size: 1.125rem;
}

.woocommerce div.product p.price ins {
  color: var(--sheriff-red);
  text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  margin-bottom: 1.5rem;
  color: var(--sheriff-gray-dark);
  line-height: 1.7;
}

/* Add to Cart Button */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--sheriff-blue);
  color: var(--sheriff-white);
  border-radius: 0.375rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border: none;
  transition: all 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--sheriff-red);
  color: var(--sheriff-white);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--sheriff-red);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--sheriff-red-deep);
}

/* Quantity Input */
.woocommerce .quantity .qty {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  width: 70px;
  text-align: center;
}

/* Product Tabs */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 3rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  border-bottom: 2px solid #e9ecef;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--sheriff-gray-dark);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--sheriff-blue);
  border-bottom-color: var(--sheriff-blue);
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding: 1.5rem 0;
}

/* Related Products */
.woocommerce div.product .related.products {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid #e9ecef;
}

.woocommerce div.product .related.products h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Cart Page */
.woocommerce-cart .woocommerce-cart-form {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  overflow: hidden;
}

.woocommerce table.shop_table {
  border: none;
  margin: 0;
}

.woocommerce table.shop_table th {
  background: var(--sheriff-blue);
  color: var(--sheriff-white);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  padding: 1rem;
  border: none;
}

.woocommerce table.shop_table td {
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  vertical-align: middle;
}

.woocommerce table.shop_table tbody tr:hover {
  background: var(--sheriff-gray-light);
}

.woocommerce table.shop_table .product-thumbnail img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.25rem;
}

.woocommerce table.shop_table .product-name a {
  color: var(--sheriff-blue);
  text-decoration: none;
  font-weight: 500;
}

.woocommerce table.shop_table .product-name a:hover {
  color: var(--sheriff-red);
}

/* Cart Totals */
.woocommerce .cart-collaterals .cart_totals {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.woocommerce .cart-collaterals .cart_totals h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.woocommerce .cart-collaterals .cart_totals table {
  border: none;
}

.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e9ecef;
}

.woocommerce .cart-collaterals .cart_totals .order-total th,
.woocommerce .cart-collaterals .cart_totals .order-total td {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sheriff-blue);
}

/* Checkout Page */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 1.5rem;
}

.woocommerce-checkout .woocommerce-info {
  background: var(--sheriff-gray-light);
  border-left: 4px solid var(--sheriff-blue);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.woocommerce form .form-row {
  margin-bottom: 1.25rem;
}

.woocommerce form .form-row label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--sheriff-gray-dark);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  font-size: 1rem;
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--sheriff-blue);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(11, 31, 58, 0.15);
}

.woocommerce-checkout #order_review_heading {
  font-size: 1.25rem;
  margin: 2rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}

.woocommerce-checkout-review-order {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

/* Order Received / Thank You Page */
.woocommerce-order-received .woocommerce-notice--success {
  background: #d4edda;
  border-left: 4px solid #28a745;
  padding: 1rem 1.25rem;
  border-radius: 0.375rem;
  margin-bottom: 2rem;
}

.woocommerce-order-details {
  background: var(--sheriff-white);
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

/* Messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 0.375rem;
  border-left: 4px solid;
}

.woocommerce-message {
  background: #d4edda;
  border-left-color: #28a745;
}

.woocommerce-info {
  background: var(--sheriff-gray-light);
  border-left-color: var(--sheriff-blue);
}

.woocommerce-error {
  background: #f8d7da;
  border-left-color: #dc3545;
}

.woocommerce-error li {
  list-style: none;
}

/* Price Filter Widget */
.woocommerce .widget_price_filter .price_slider_wrapper {
  padding-top: 1rem;
}

.woocommerce .widget_price_filter .ui-slider {
  background: #dee2e6;
  border: none;
  border-radius: 0.25rem;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background: var(--sheriff-blue);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--sheriff-gold);
  border: none;
  border-radius: 50%;
  top: -4px;
}

.woocommerce .widget_price_filter .price_slider_amount {
  margin-top: 1rem;
}

.woocommerce .widget_price_filter .price_slider_amount .button {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

/* Responsive WooCommerce */
@media (max-width: 991.98px) {
  .woocommerce div.product div.summary {
    padding-left: 0;
    margin-top: 2rem;
  }

  .shop-sidebar {
    order: -1;
    margin-bottom: 2rem;
  }
}

@media (max-width: 767.98px) {
  .woocommerce table.shop_table_responsive thead {
    display: none;
  }

  .woocommerce table.shop_table_responsive tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1rem;
  }

  .woocommerce table.shop_table_responsive tbody tr td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border: none;
    border-bottom: 1px solid #e9ecef;
  }

  .woocommerce table.shop_table_responsive tbody tr td:last-child {
    border-bottom: none;
  }

  .woocommerce table.shop_table_responsive tbody tr td::before {
    content: attr(data-title) ": ";
    font-weight: 600;
    color: var(--sheriff-gray-dark);
  }
}

/* ==========================================================================
   42. Emergency Alert Rotation
   ========================================================================== */

/* Alert slides - hidden by default, shown when active */
.emergency-alert-slide {
  display: none;
  opacity: 0;
  padding: 1rem 0;
  transition: opacity 0.4s ease-in-out;
}

.emergency-alert-slide.active {
  display: block;
  opacity: 1;
}

/* Apply alert severity styling to slides */
.emergency-alert-slide.alert-severity-critical {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.emergency-alert-slide.alert-severity-warning {
  background: linear-gradient(135deg, #fd7e14 0%, #e8590c 100%);
}

.emergency-alert-slide.alert-severity-info {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

/* ==========================================================================
   Language switch labels - a flag alone does not identify a language
   ========================================================================== */
.flag-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.flag-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

/* ==========================================================================
   22. Leadership - Commission Plate
   --------------------------------------------------------------------------
   The Sheriff's portrait hung in a matted brass frame, over a struck-brass
   service bar with the years of his career incised into it.

   Two ideas carry the section. First, the bar is ONE continuous object with
   five grooves scored across it, not five cards - because the argument the
   band makes is a fifty-two-year unbroken span, and a span should be built as
   a span. Second, the years are the darkest thing in the brightest element
   rather than the other way round: a dark numeral with a lit lower edge reads
   as metal cut away, which keeps it fully legible while subordinating it to
   the role beside it. That inversion is what stops 1973 / 1977 / 1981 from
   reading as decorative 01 / 02 / 03 numbering.

   Nothing in this band moves on its own. No glow, no gradient ground, no
   rotating ring. It is the page's one still, formal moment, between a loud
   photographic hero and a bright filterable news grid.
   ========================================================================== */
.leadership-section.cplate {
  /* Ink. One flat matte ground, edge to edge. The department navy taken a step
     deeper and cooler so the band is a different MATERIAL from the photographic
     hero above it - though against the booking blotter's #0a1829 the ground
     alone measures 1.03:1, so the brass rule at the top edge is what actually
     makes the seam, not this value. */
  --cp-ink: #071526;

  /* Stock. Commission paper: the mat, the name, the role titles. Warm, because
     the straw hat, the brass and the daylight in the photograph are all warm
     and a cool white fights them. 14.76:1 on the ink. */
  --cp-stock: #EDE6D6;
  --cp-stock-86: rgba(237, 230, 214, 0.86);  /* the lead     11.06:1 */

  /* Brass. The ink of the record: rules, years, borders, the primary fill. */
  --cp-brass: #C9A227;       /* eyebrow, borders        7.59:1 on ink */
  --cp-brass-soft: #DFC46E;  /* link label             10.71:1 on ink */
  --cp-brass-hi: #F0DC97;    /* highlights, focus ring 13.45:1 on ink */
  --cp-brass-lo: #8A6C18;    /* shadow value of brass */

  /* The button bottoms out at #B08A1F: ink on #B08A1F measures 5.68:1, so the
     label clears the 4.5 body threshold at the fill's darkest point. */
  --cp-btn-ramp: linear-gradient(180deg, #F0DC97 0%, #DDB948 34%, #C9A227 70%, #B08A1F 100%);
  --cp-frame-ramp: linear-gradient(160deg, #E3C457 0%, #C9A227 34%, #8A6C18 68%, #B99521 100%);

  --cp-mat: #EDE6D6;
  --cp-mat-empty: #E4DCC8;
  --cp-window-bg: #D7CFBC;

  /* Barn red earns exactly two jobs: the seal marking the office currently
     held, and the rule closing the band against the light newsroom below.
     Never type - #8B1E1E on the ink is 2.01:1 and fails. */
  --cp-red: #8B1E1E;
  --cp-red-hi: #B83333;

  /* Geometry. The plate's WIDTH is locked at each breakpoint so a change of
     portrait can never move the grid column; only the window's height breathes. */
  /* Square. A 5:6 plate stood 80px taller than the text beside it and left an
     L of empty ink under the buttons; square, the two columns finish together.
     It also stays well clear of .mugshot-img's 4:5 in the booking blotter. */
  --cp-focal: 50% 16%;
  --cp-window-ar: 1 / 1;
  /* 400px. The band carries a portrait, a lead and two actions, so the plate is
     sized to hold the left half of the composition on its own rather than
     floating in it. */
  --cp-plate-w: 25rem;
  --cp-frame-pad: 9px;
  --cp-mat-pad: 14px;
  --cp-chamfer: 20px;
  /* Derived, not chosen: for the brass to measure the same 9px along the
     diagonal as it does orthogonally, (18 + c - 20) / sqrt(2) = 9, so c = 14.7. */
  --cp-mat-chamfer: 15px;
  --cp-gap: 5rem;
  --cp-pad-y: clamp(3.5rem, 2.25rem + 4.4vw, 6rem);
  --cp-ease: cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;
  overflow: hidden;
  padding: var(--cp-pad-y) 0;
  background: var(--cp-ink);
  font-family: var(--font-body);
  /* Spectral ships one weight here, so no browser may synthesise a bold. */
  font-synthesis-weight: none;
}

/* Top edge. The darkest stop sits at the TOP, against the neighbour, because
   the band above is the white quick-actions grid when no arrests are published
   and the dark booking blotter when they are: #8B6914 measures 5.09:1 on white
   and 3.51:1 on #0a1829, so the seam is visible either way. */
.leadership-section.cplate::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(180deg, #8B6914 0%, #F0DC97 45%, #C9A227 100%);
}

/* Bottom edge. A machined metal lip seated on barn red, handing off to the
   light newsroom: the red measures 8.28:1 against #F2F4F7 immediately below. */
.leadership-section.cplate::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: linear-gradient(180deg, #F0DC97 0 1px, #C9A227 1px 2px, #8B1E1E 2px 5px);
}

/* No max-width of its own: the band shares .container's left edge with every
   other section on the page, so the plate, the name and the bar all sit on the
   same axis as the newsroom heading below. Measure is governed where it
   belongs instead, on the lead itself. */
.cplate__inner {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Identity: portrait, name, lead, actions
   -------------------------------------------------------------------------- */

/* align-items: start, not centre. Vertical centring is the specific mechanism
   that left a 250px circle floating in empty navy beside nine paragraphs. */
.cplate__id {
  display: grid;
  grid-template-columns: var(--cp-plate-w) minmax(0, 1fr);
  grid-template-areas:
    'fig head'
    'fig intro'
    'fig act'
    'fig more';
  column-gap: var(--cp-gap);
  align-items: start;
}

.cplate__h2 {
  grid-area: head;
  margin: 0;
  color: inherit;
  letter-spacing: normal;
}

.cplate__eyebrow {
  display: block;
  margin-bottom: 0.875rem;
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cp-brass);
}

.cplate__name {
  display: block;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.15rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--cp-stock);
}

.cplate__name::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 1.25rem;
  background: var(--cp-brass);
}

/* 72ch, at the upper end of a comfortable measure rather than the middle. The
   band has only a portrait and a paragraph to hold 1320px, so the lead is
   allowed to reach; capping it at 54ch is what left a third of the band empty
   on a wide desktop. */
.cplate__intro {
  grid-area: intro;
  max-width: 72ch;
  margin: 1.5rem 0 0;
  font-size: clamp(1.0625rem, 0.99rem + 0.25vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.72;
  color: var(--cp-stock-86);
}


/* Emphasis arriving from the CMS is carried by full-strength colour against
   the intro's 86%, not by a weight this face does not have. */
.leadership-section.cplate strong,
.leadership-section.cplate b {
  font-weight: 400;
  color: var(--cp-stock);
}

.cplate__actions {
  grid-area: act;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   The plate: brass frame, bone mat, window
   -------------------------------------------------------------------------- */

/* The shadow lives on the shell because clip-path clips box-shadow, while
   filter: drop-shadow follows the clipped outline. */
.cplate__shell {
  grid-area: fig;
  margin: 0;
  filter: drop-shadow(0 18px 30px rgba(3, 9, 15, 0.62));
}

/* Top two corners chamfered, bottom two square: the cornerstone-tablet
   silhouette. This is the only clip-path in the band. */
.cplate__frame {
  width: min(100%, var(--cp-plate-w));
  padding: var(--cp-frame-pad);
  background: var(--cp-frame-ramp);
  border-radius: 0;
  clip-path: polygon(
    var(--cp-chamfer) 0,
    calc(100% - var(--cp-chamfer)) 0,
    100% var(--cp-chamfer),
    100% 100%,
    0 100%,
    0 var(--cp-chamfer)
  );
}

.cplate__mat {
  padding: var(--cp-mat-pad);
  background: var(--cp-mat);
  clip-path: polygon(
    var(--cp-mat-chamfer) 0,
    calc(100% - var(--cp-mat-chamfer)) 0,
    100% var(--cp-mat-chamfer),
    100% 100%,
    0 100%,
    0 var(--cp-mat-chamfer)
  );
}

/* The frame owns the ratio; the asset never does. A square, portrait or
   landscape upload all produce the same silhouette, and the grid column cannot
   move. The 1px fillet is an inset shadow rather than a border so it cannot
   perturb the aspect-ratio box. */
.cplate__window {
  position: relative;
  aspect-ratio: var(--cp-window-ar);
  overflow: hidden;
  background: var(--cp-window-bg);
  box-shadow: inset 0 0 0 1px rgba(7, 21, 38, 0.55);
}

/* Absolutely positioned so the width and height attributes WordPress prints
   cannot override the window's geometry. */
.cplate__window .cplate__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cp-focal);
}

/* No portrait: a framed empty mat, not a broken image. */
.cplate__window--empty {
  background: var(--cp-mat-empty);
}

.cplate__star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: rgba(7, 21, 38, 0.12);
  clip-path: polygon(
    50% 0%, 64.43% 25%, 93.3% 25%, 78.87% 50%, 93.3% 75%,
    64.43% 75%, 50% 100%, 35.57% 75%, 6.7% 75%, 21.13% 50%, 6.7% 25%, 35.57% 25%
  );
}

/* ==========================================================================
   23. Record of Public Service
   --------------------------------------------------------------------------
   One struck-brass bar with the years of a career incised into it, used on the
   staff profile page beneath the biography. It is NOT on the homepage: the
   front page's job is routing residents to services, and a fifty-year career
   history belongs with the profile it explains.

   Two ideas carry it. The bar is ONE continuous object with a groove scored
   between entries, not a stack of cards, because the argument it makes is an
   unbroken span. And the years are the darkest thing in the brightest element -
   a dark numeral with a lit lower edge reads as metal cut away - which keeps
   them legible while subordinating them to the role beside them, so they cannot
   read as decorative 01 / 02 / 03 numbering.

   Self-contained: it carries its own tokens so it works on any background.
   ========================================================================== */
.cprec {
  /* Lit from the left at exactly 90deg, so the ramp is identical at every
     height down the bar's length - one extruded object, not a fade. */
  --cp-bar: linear-gradient(90deg, #C9A227 0%, #E8CF78 8%, #F0DC97 22%, #E2C25E 50%, #D2AC38 74%, #C39B23 88%, #9C7718 100%);
  /* The colour of metal cut away. Used for the years and nowhere else. */
  --cp-incision: #4E3C0C;
  --cp-yearcol: 96px;
  /* Defaults suit a light page. 16.5:1 and 5.90:1 on white. */
  --cprec-role: var(--sheriff-blue);
  --cprec-detail: #5B6472;

  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ONE bar behind every row, so the span reads as a single object. A lit left
   edge and a shadowed right edge is the whole illusion of machined metal. */
.cprec::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: var(--cp-yearcol);
  background: var(--cp-bar);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.5),
    inset -2px 0 0 rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -2px 0 rgba(0, 0, 0, 0.38);
}

.cprec__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--cp-yearcol) minmax(0, 16.5rem) minmax(0, 1fr);
  column-gap: 2rem;
  min-height: 4.75rem;
}

/* The incision. A dark glyph with a lit lower edge is the oldest letterpress
   illusion there is. The 10px inline padding is a hard guard keeping glyphs
   off the bar's shadowed right lip, where contrast falls away. */
.cprec__year {
  display: flex;
  position: relative;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  padding-inline: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 1.1vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cp-incision);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  /* The groove between cells: dark above, light below, read downwards. The
     reverse order reads as a raised lip rather than a scored line. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 -1px 0 rgba(26, 19, 2, 0.42);
}

.cprec__row:last-child .cprec__year {
  border-bottom-color: transparent;
  box-shadow: none;
  /* Clears a lane for the seal. Padding rather than a flow item, so the seal
     costs the row no height and the record's rows stay an even column - on a
     phone the last row is short enough that a pinned seal would otherwise land
     on top of its own year. */
  padding-bottom: 1.25rem;
}

/* The office currently held, marked by a change of MATERIAL. Colour is never
   the only carrier: the detail line says it in words and the shape is present
   on one row and absent on the rest. 5.26:1 against the brass it sits in. */
.cprec__seal {
  position: absolute;
  bottom: 0.375rem;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  background: linear-gradient(170deg, #A32626 0%, #8B1E1E 48%, #5C1414 100%);
  box-shadow:
    inset 0 0 0 1px rgba(240, 220, 151, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.4);
}

.cprec__role {
  align-self: center;
  padding-left: 2rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cprec-role);
  overflow-wrap: anywhere;
}

.cprec__detail {
  align-self: center;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cprec-detail);
  overflow-wrap: anywhere;
}

/* No horizontal rules on the text side. The milled scoring on the bar carries
   the row boundaries at high contrast; a faint line across the ink would
   measure under 2.2:1 and would rebuild the five-separate-cards read the bar
   exists to defeat. */

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

/* Built from scratch rather than on Bootstrap's .btn, whose focus state in
   this theme attaches a 6px gold glow that this band forbids. */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    filter 160ms var(--cp-ease),
    background-color 160ms var(--cp-ease),
    border-color 160ms var(--cp-ease),
    color 160ms var(--cp-ease),
    transform 120ms var(--cp-ease);
}

/* A struck brass plate with a lit top lip and a shadowed foot: the same object
   as the service bar, one scale down. */
.leadership-section.cplate .cp-btn--brass {
  color: var(--cp-ink);
  background: var(--cp-btn-ramp);
  border-color: var(--cp-brass-lo);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.26);
}

.leadership-section.cplate .cp-btn--brass:hover {
  color: var(--cp-ink);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.leadership-section.cplate .cp-btn--brass:active {
  filter: brightness(0.98);
  transform: translateY(0);
}

.leadership-section.cplate .cp-btn--outline {
  color: var(--cp-stock);
  background: transparent;
  border-color: var(--cp-brass);
}

.leadership-section.cplate .cp-btn--outline:hover {
  color: #F7F2E6;
  background: var(--cp-red);
  border-color: var(--cp-red-hi);
}

.cplate__more {
  grid-area: more;
  margin: 1.5rem 0 0;
}


.leadership-section.cplate .cplate__more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--cp-brass-soft);
  text-decoration: underline;
  text-decoration-color: var(--cp-brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 160ms var(--cp-ease), text-decoration-thickness 160ms var(--cp-ease);
}

.leadership-section.cplate .cplate__more-link:hover {
  color: var(--cp-brass-hi);
  text-decoration-thickness: 2px;
}

.cplate__more-link .bi {
  transition: transform 160ms var(--cp-ease);
}

.leadership-section.cplate .cplate__more-link:hover .bi {
  transform: translateX(3px);
}

/* Focus. (0,3,1), so it beats the theme's shared dark-section rule at (0,2,1)
   outright rather than on source order - and it must restate box-shadow to
   clear that rule's inherited gold glow. Not written with :is(), which would
   take its specificity from the type selector and lose.

   The ring alone vanishes on brass (1.72:1) and on the bone mat (1.10:1), so
   the ink halo is what carries the indicator over those surfaces. 9px of
   spread, not 6px: an outline paints above an outer box-shadow, so a 6px halo
   under a 3px outline offset 3px would be entirely covered. */
.leadership-section.cplate a:focus,
.leadership-section.cplate a:focus-visible,
.leadership-section.cplate button:focus,
.leadership-section.cplate button:focus-visible {
  outline: 3px solid var(--cp-brass-hi);
  outline-offset: 3px;
  box-shadow: 0 0 0 9px rgba(7, 21, 38, 0.92);
}

.leadership-section.cplate a:focus:not(:focus-visible),
.leadership-section.cplate button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.leadership-section.cplate .cp-btn--brass:focus-visible {
  box-shadow:
    0 0 0 9px rgba(7, 21, 38, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.26);
}

/* --------------------------------------------------------------------------
   Tablet: the identity stacks, the record keeps its three columns
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .leadership-section.cplate {
    --cp-plate-w: 21.25rem;
  }

  /* The plate stays LEFT-aligned so the single left axis survives the stack:
     plate, name, lead and bar all still start at the same x. */
  .cplate__id {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'head'
      'fig'
      'intro'
      'act'
      'more';
  }

  .cplate__shell {
    margin-top: 1.75rem;
  }

  .cplate__intro {
    max-width: 60ch;
    margin-top: 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   Small tablet and phone: the record drops to two columns
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .leadership-section.cplate {
    --cp-yearcol: 80px;
  }

  /* The two rows are declared explicitly so the year cell's grid-row: 1 / -1
     has an explicit end line to resolve against. Left implicit, -1 resolves to
     line 1 and the span silently collapses to a single track. An absent detail
     simply leaves the second row at zero height. */
  .cprec__row {
    grid-template-columns: var(--cp-yearcol) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1.25rem;
    min-height: 0;
    padding-block: 0.875rem;
  }

  /* The role and detail stack into two implicit rows here, so the year must be
     told to span both. Without this it occupies only the first of them and the
     groove scored at its bottom edge lands in the middle of the entry instead
     of on the boundary between entries. */
  .cprec__year {
    grid-row: 1 / -1;
    align-self: stretch;
  }

  .cprec__role {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    padding-left: 0;
  }

  .cprec__detail {
    grid-column: 2;
    align-self: start;
    padding-left: 0;
  }

  .cprec__role {
    font-size: 1.0625rem;
  }

  .cprec__detail {
    margin-top: 0.3125rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}

@media (max-width: 575.98px) {
  .cprec {
    --cp-yearcol: 64px;
  }

  .leadership-section.cplate {
    --cp-plate-w: 18.75rem;
    --cp-frame-pad: 7px;
    --cp-mat-pad: 12px;
    --cp-chamfer: 16px;
    --cp-mat-chamfer: 12px;
  }

  .cplate__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .cp-btn {
    width: 100%;
  }
}

/* The band has no autonomous motion, so there is nothing here to stop - only
   the two transforms, which are removed at the declaration level rather than
   merely sped up, since a 0.01ms 1px jump is still a jump. */
@media (prefers-reduced-motion: reduce) {
  .leadership-section.cplate .cp-btn,
  .leadership-section.cplate .cplate__more-link,
  .leadership-section.cplate .cplate__more-link .bi {
    transition: none;
  }

  .leadership-section.cplate .cp-btn:hover,
  .leadership-section.cplate .cp-btn:active,
  .leadership-section.cplate .cplate__more-link:hover .bi {
    transform: none;
  }
}

/* The record's home: beneath the biography on a staff profile page.
   The bar and the incision carry their own contrast, so only the surrounding
   text colours change between a light page and a dark one. */
.staff-record {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(11, 31, 58, 0.12);
}

/* The profile page styles every ol inside .single-content with a 1.5rem left
   padding at (0,1,1), which out-specifies the component's own reset at (0,1,0).
   That pushed the rows 24px right of the bar - the bar is absolutely positioned
   against the padding box, the rows sit inside the content box - so the grooves
   hung off the metal. Scoped here at (0,2,0) so it wins outright. */
.staff-record .cprec {
  margin: 0;
  padding: 0;
}

.staff-record .staff-record-title {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sheriff-blue);
}

.staff-record .cprec__role {
  font-size: 1.0625rem;
}

/* Reduced motion: the strip holds still, so the scrollbar has to come back -
   with nothing drifting it is the only cue that the row continues past the
   edge. The script skips the repeated copies in this mode too, so the row ends
   where the partners end. */
@media (prefers-reduced-motion: reduce) {
  .partner-scroller {
    scrollbar-width: thin;
    scrollbar-color: var(--sheriff-blue-muted) transparent;
    -ms-overflow-style: auto;
  }

  .partner-scroller::-webkit-scrollbar {
    display: block;
    height: 10px;
  }

  .partner-scroller::-webkit-scrollbar-thumb {
    background: var(--sheriff-blue-muted);
    border-radius: 5px;
  }
}