/*
Theme Name: Fortius Gov Theme
Theme URI: https://example.invalid/fortius-gov-theme
Author: Fortius
Description: Modern civic starter theme for fast, consistent delivery.
Version: 0.2.0
Text Domain: fortius-gov
*/

/* ------------------------------------------------------------------
   Design tokens
------------------------------------------------------------------ */
:root {
  --color-bg: #f7f9fc;
  --color-surface: #ffffff;
  --color-surface-muted: #eef3f9;
  --color-border: #e3e8ef;
  --color-border-strong: #cbd5e1;

  --color-text: #0b1b2b;
  --color-text-muted: #4b5f75;
  --color-text-subtle: #6b7e93;

  --color-primary: #0b3d91;        /* Civic navy */
  --color-primary-600: #0a3578;
  --color-primary-700: #082a5f;
  --color-primary-50:  #e8efff;

  --color-accent: #1e88e5;
  --color-success: #137752;
  --color-warning: #b45309;
  --color-critical: #b00020;
  --color-gold: #c9a04e;          /* Maplewood-style muted gold for category labels */
  --color-gold-strong: #e0b64f;   /* Accent underline on open nav item */
  --color-gold-soft: rgba(201, 160, 78, 0.35);
  --color-sky: #2f7a95;           /* Editorial link color (mayor CTA, etc.) */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 1px rgba(11, 27, 43, 0.04), 0 1px 2px rgba(11, 27, 43, 0.04);
  --shadow-md: 0 4px 10px rgba(11, 27, 43, 0.06), 0 1px 2px rgba(11, 27, 43, 0.05);
  --shadow-lg: 0 12px 24px rgba(11, 27, 43, 0.08), 0 2px 4px rgba(11, 27, 43, 0.05);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --container: 1360px;
  --container-wide: 1600px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter",
    "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9rem;      /* ~14.5 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.25rem;    /* 36 */
  --fs-4xl: 2.75rem;    /* 44 */
}

/* ------------------------------------------------------------------
   Base
------------------------------------------------------------------ */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-primary);
  text-underline-offset: 3px;
}
a:hover { color: var(--color-primary-600); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3) 0;
  line-height: 1.2;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3, .h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--space-3) 0; }

.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  clip: auto;
  width: auto; height: auto;
  padding: 12px;
  background: #fff;
  color: var(--color-text);
  z-index: 100000;
  left: var(--space-4);
  top: var(--space-4);
}

/* Respect users who have asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Honor forced-colors / Windows High Contrast mode. */
@media (forced-colors: active) {
  .button,
  .button--primary,
  .button--secondary {
    border: 1px solid ButtonText;
  }
  a:focus-visible,
  button:focus-visible {
    outline: 3px solid Highlight;
  }
}

.skip-link {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: var(--space-4); top: var(--space-4);
  width: auto; height: auto;
  padding: 10px 12px;
  background: #fff; color: var(--color-text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 9999;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container--wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
@media (max-width: 720px) {
  .container, .container--wide { padding: 0 var(--space-4); }
}

/* ------------------------------------------------------------------
   Layout primitives
------------------------------------------------------------------ */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.section { padding: var(--space-12) 0; }
.section--tight { padding: var(--space-8) 0; }
/* Section that immediately follows a page-header: the header already
   provides visual separation via its border + tinted background, so
   we shrink the top padding to keep the kicker/title close to the
   actual page content. */
.page-header + .section,
.page-header + main.section { padding-top: var(--space-6); }
.section--muted {
  background: var(--color-surface-muted);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Any homepage section with an admin-uploaded background image. The
   `background-image` URL is applied inline; we just set positioning
   and fallback color here. */
.section--bg {
  background-color: #0a1f44;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Light-text variant. Combine with .section--bg when the image is dark. */
.section--dark {
  color: #f2f6fc;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark .h2,
.section--dark .h3 { color: #ffffff; }
.section--dark p,
.section--dark .lead,
.section--dark .meta { color: rgba(242, 246, 252, 0.80); }
.section--dark a { color: #b9d4f2; }
.section--dark a:hover { color: #ffffff; }

/* Dark-mode adjustments for elements that sit inside these sections. */
.section--dark .pill {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.section--dark .pill:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}
.section--dark .search-block__form input[type="search"] {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-ink);
}
.section--dark .about-stats li {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.section--dark .about-stats strong { color: #ffffff; }
.section--dark .about-stats span { color: rgba(242, 246, 252, 0.72); }
.section__header { margin-bottom: var(--space-6); max-width: 720px; }
.section__header h2 { margin-bottom: var(--space-2); }
.lead {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}

.page-header { margin: 0 0 var(--space-6) 0; }

/* ------------------------------------------------------------------
   Buttons
------------------------------------------------------------------ */
.button,
button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background 120ms ease, transform 80ms ease;
}
.button:hover,
button:hover {
  background: var(--color-primary-600);
  color: #fff;
}
.button:active,
button:active { transform: translateY(1px); }
.button--secondary {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.button--secondary:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}
.button--ghost {
  background: transparent;
  color: var(--color-primary);
  padding: 8px 10px;
}
.button--sm { padding: 6px 10px; font-size: var(--fs-sm); }

/* ------------------------------------------------------------------
   Cards
------------------------------------------------------------------ */
.card {
  display: block;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
a.card:hover { transform: translateY(-1px); }
.card--compact { padding: var(--space-4); }

/* Service action card with icon */
.card--action {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
  align-items: center;
}
.card--action .icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: grid; place-items: center;
}
.card--action .icon svg {
  width: 22px; height: 22px;
}
.card--action strong {
  display: block;
  font-size: var(--fs-md);
  margin-bottom: 2px;
}
.card--action .meta { color: var(--color-text-subtle); }

/* ------------------------------------------------------------------
   Lists
------------------------------------------------------------------ */
.list { list-style: none; padding: 0; margin: 0; }
.list--cards { display: grid; gap: var(--space-3); }

.link-list {
  list-style: none; padding: 0;
  margin: var(--space-2) 0 0 0;
  display: grid; gap: var(--space-2);
}
.link-list a { text-decoration: none; color: var(--color-primary); }
.link-list a:hover { text-decoration: underline; }

.meta-list {
  list-style: none; padding: 0;
  margin: var(--space-2) 0 0 0;
  display: grid; gap: 6px;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.meta {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
}

/* ------------------------------------------------------------------
   Forms
------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--color-text);
  font: inherit;
}
textarea { min-height: 120px; }

.search-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.search-form input[type="search"] { flex: 1; }

/* ------------------------------------------------------------------
   Utility bar + header
------------------------------------------------------------------ */
.utility-bar {
  background: #08223f;
  color: #dbe6f4;
  font-size: var(--fs-sm);
}
.utility-bar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 8px var(--space-5);
  display: flex;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.utility-bar a { color: inherit; text-decoration: none; opacity: 0.9; }
.utility-bar a:hover { opacity: 1; text-decoration: underline; }
.utility-bar__tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: #0a2e57; padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
}

.site-header {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-branding__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  text-decoration: none;
}
.site-branding__text { display: flex; flex-direction: column; gap: 2px; }
.site-branding__name { font-weight: 700; font-size: var(--fs-lg); }
.site-branding__tagline { font-size: var(--fs-sm); opacity: 0.85; }
.site-branding img { max-height: 40px; width: auto; }

.site-nav__menu,
.site-footer__menu {
  list-style: none; display: flex; gap: var(--space-1);
  padding: 0; margin: 0; flex-wrap: wrap;
}
.site-nav__menu a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-weight: 500;
}
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a {
  background: rgba(255, 255, 255, 0.14);
}

.site-header__a11y {
  color: #fff !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.site-header__a11y:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
}
.site-header__cta {
  background: #ffbf47;
  color: var(--color-text) !important;
}
.site-header__cta:hover { background: #f0ad2c; color: var(--color-text) !important; }

/* Mobile menu */
.nav-toggle {
  display: none;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 8px 10px;
  border-radius: var(--radius-md);
}
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 85vw);
    background: #fff;
    color: var(--color-text);
    transform: translateX(100%);
    transition: transform 180ms ease;
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav__menu {
    flex-direction: column;
    gap: var(--space-1);
  }
  .site-nav__menu a {
    color: var(--color-text);
    padding: 10px 12px;
    border-radius: var(--radius-md);
  }
  .site-nav__menu a:hover { background: var(--color-primary-50); color: var(--color-primary-700); }
  .site-header__a11y,
  .site-header__cta { display: none; }
}

/* ------------------------------------------------------------------
   Alerts
------------------------------------------------------------------ */
.alert-banner {
  padding: var(--space-3) 0;
  background: #fff8e1;
  border-bottom: 1px solid #ffe4a1;
  color: #4a3a00;
}
.alert-banner--info { background: #e8f1ff; border-bottom-color: #c7dcff; color: #08305e; }
.alert-banner--warning { background: #fff4d6; border-bottom-color: #f2d38b; color: #513800; }
.alert-banner--critical { background: #ffe3e3; border-bottom-color: #ffb3b3; color: #6a0a14; }
.alert-banner .container {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.alert-banner__title { margin-right: var(--space-2); }
.alert-banner__link { margin-left: auto; font-weight: 600; }

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------ */
/* Clean, light hero so any uploaded image shows through without fighting
   a tinted overlay. When an image is set, we add only a soft left-side
   white fade so the headline stays legible. */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-12) 0 var(--space-10);
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(30, 136, 229, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-border);
}
.hero > .container { position: relative; z-index: 1; }

/* Uploaded photo: minimal left-side white fade for text legibility,
   clear on the right so the image is visible. */
.hero[style*="--hero-image"] {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.72) 35%,
      rgba(255, 255, 255, 0.20) 70%,
      rgba(255, 255, 255, 0.00) 100%
    ),
    var(--hero-image) center / cover no-repeat;
}

/* Bundled SVG preset: same treatment, illustration anchored right. */
.hero.hero--preset[style*="--hero-image"] {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.80) 35%,
      rgba(255, 255, 255, 0.35) 70%,
      rgba(255, 255, 255, 0.10) 100%
    ),
    var(--hero-image) right center / cover no-repeat;
}

@media (max-width: 960px) {
  /* Copy stacks on top of the image, so use a vertical wash for readability. */
  .hero[style*="--hero-image"]:not(.hero--dark),
  .hero.hero--preset[style*="--hero-image"]:not(.hero--dark) {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 249, 252, 0.80) 100%),
      var(--hero-image) center / cover no-repeat;
  }
}

/* ------------------------------------------------------------------
   Dark hero variant — use this when the uploaded background image is
   already dark (e.g. the bundled civic-hero-navy.jpg) and you want
   white text on top instead of a light wash over the image.
------------------------------------------------------------------ */
.hero.hero--dark {
  background: #0a1f44;
  color: #f2f6fc;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.hero.hero--dark[style*="--hero-image"] {
  /* No white fade — let the dark image fill the hero edge to edge.
     Tiny left-side navy tint just to lift text contrast if needed. */
  background:
    linear-gradient(90deg, rgba(10, 31, 68, 0.25) 0%, rgba(10, 31, 68, 0) 50%),
    var(--hero-image) center / cover no-repeat;
}
.hero.hero--dark .hero__title { color: #ffffff; }
.hero.hero--dark .hero__subtitle { color: rgba(242, 246, 252, 0.82); }
.hero.hero--dark .hero__kicker {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.hero.hero--dark .hero__stats li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.hero.hero--dark .hero__stats strong { color: #ffffff; }
.hero.hero--dark .hero__stats span { color: rgba(242, 246, 252, 0.78); }
.hero.hero--dark .button--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
.hero.hero--dark .button--secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
}
.hero__kicker {
  display: inline-block;
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.hero__title {
  margin: 0;
  font-size: var(--fs-4xl);
  line-height: 1.08;
}
@media (max-width: 600px) {
  .hero__title { font-size: var(--fs-3xl); }
}
.hero__subtitle {
  margin: var(--space-3) 0 var(--space-5) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  max-width: 560px;
}
.hero__buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero__facts {
  list-style: none; padding: 0;
  margin: var(--space-6) 0 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 600px) {
  .hero__facts { grid-template-columns: 1fr; }
}
.hero__facts li {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.hero__searchCard {
  background: #fff;
}
.hero__searchCard h2 { margin-top: 0; }

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
.site-footer {
  margin-top: var(--space-12);
  background: #0a2545;
  color: #dbe6f4;
  border-top: 4px solid var(--color-accent);
}
.site-footer a { color: #cfe0ff; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .h3 { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: var(--space-8);
  padding: var(--space-10) 0 var(--space-6) 0;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand strong { color: #fff; font-size: var(--fs-lg); }
.site-footer .meta,
.site-footer .meta-list { color: #b5c6de; }
.site-footer__meta {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-4) 0 var(--space-6);
  font-size: var(--fs-sm);
  color: #aab8cf;
}

/* ------------------------------------------------------------------
   Pagination
------------------------------------------------------------------ */
.pagination { margin-top: var(--space-6); }
.pagination a,
.pagination span {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #fff;
  text-decoration: none;
  color: var(--color-primary);
  margin-right: 4px;
}
.pagination .current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ------------------------------------------------------------------
   Filters panel (docs)
------------------------------------------------------------------ */
.filters { padding: var(--space-5); margin-bottom: var(--space-5); }
.filters__actions {
  display: flex; gap: var(--space-2); margin-top: var(--space-4);
  flex-wrap: wrap;
}
/* When the action group is placed *inside* a grid cell (as in jobs / bids /
 * staff filter bars), align it to the bottom of the cell so its button sits
 * on the input baseline instead of floating up near the labels. */
.filters .grid > .filters__actions {
  margin-top: 0;
  align-self: end;
}
.filters label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------
   Service Request form (Fortius plugin)

   The form is rendered by a shortcode (no wrapping page chrome) and
   the theme is responsible for typography + sizing. We set inputs to
   full width so the Title field can hold a long subject line, give
   every field the same vertical rhythm, and put an extra margin on
   the submit button so the file-input row doesn't crowd it.
------------------------------------------------------------------ */
/* Card wrapper around the shortcode output. Mirrors the .card on
   the contact page's "Send us a message" panel so the request form
   has the same boxed look across pages. We intentionally drop both
   the card's own max-width and the parent .entry-content's
   max-width, otherwise the form is squeezed into a narrow column
   when it lives inside the standard page-with-sidebar layout. */
.fortius-sr-card {
  padding: var(--space-5);
}
.fortius-sr-card > .fortius-sr__intro:first-child { margin-top: 0; }
/* Let the form fill the article column (which is already
   constrained by the .interior grid) instead of being stuck at
   the typography 760px limit used for prose. */
.entry-content:has(.fortius-sr-card),
.entry-content:has(> .fortius-sr-card) { max-width: none; }

.fortius-sr {
  display: grid;
  gap: var(--space-4);
  max-width: none;
}
.fortius-sr__intro {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}
.fortius-sr__field {
  display: grid;
  gap: 6px;
}
.fortius-sr__field label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin: 0;
}
.fortius-sr__field input[type="text"],
.fortius-sr__field input[type="email"],
.fortius-sr__field input[type="tel"],
.fortius-sr__field input:not([type]),
.fortius-sr__field textarea,
.fortius-sr__field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  color: var(--color-text);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.fortius-sr__field input:focus,
.fortius-sr__field textarea:focus,
.fortius-sr__field select:focus {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 95, 218, 0.18);
}
.fortius-sr__field textarea {
  min-height: 130px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.fortius-sr__field input[type="file"] {
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-size: var(--fs-sm);
}
.fortius-sr__field small {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.fortius-sr button[type="submit"] {
  justify-self: start;
  margin-top: var(--space-3);
  padding: 12px 22px;
  font-size: var(--fs-md);
}
.fortius-sr__status {
  min-height: 1.25em;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.fortius-sr__status:not(:empty) {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: #eef4ff;
  color: var(--color-text);
}
@media (min-width: 720px) {
  /* Two-column layout for the short personal-info block so the form
     doesn't feel like a long stack of single-line inputs. */
  .fortius-sr {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
  }
  .fortius-sr__intro,
  .fortius-sr__field:nth-of-type(1),  /* Title  */
  .fortius-sr__field:nth-of-type(2),  /* Message */
  .fortius-sr__field:has(input[type="file"]),
  .fortius-sr button[type="submit"],
  .fortius-sr__status {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------
   Alert strip (top warning bar)
------------------------------------------------------------------ */
.alertstrip {
  background: #b71c1c;
  color: #fff;
}
.alertstrip__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 8px var(--space-5);
  flex-wrap: wrap;
}
.alertstrip__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #b71c1c;
  font-weight: 700;
  font-size: var(--fs-xs);
  padding: 2px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.alertstrip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  opacity: 0.95;
  flex: 1;
}
.alertstrip__list li + li {
  border-left: 1px solid rgba(255,255,255,0.3);
  padding-left: var(--space-5);
}
.alertstrip__actions { display: flex; gap: var(--space-2); }
.alertstrip__link {
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
}
.alertstrip__link:hover { background: rgba(255,255,255,0.12); color: #fff; }
.alertstrip__link--emergency { background: #fff; color: #b71c1c; }
.alertstrip__link--emergency:hover { background: #ffe8e8; color: #b71c1c; }

/* Utility bar richer layout */
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--space-5);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.utility-bar__brandline { font-size: var(--fs-sm); letter-spacing: 0.02em; }
.utility-bar__tools {
  display: flex; gap: var(--space-3); align-items: center;
  font-size: var(--fs-sm);
}
.utility-bar__tool {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  opacity: 0.92;
}
.utility-bar__tool:hover { opacity: 1; text-decoration: underline; }
.utility-bar__tool--cta {
  background: #ffbf47;
  color: #1a1a1a !important;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
}
.utility-bar__tool--cta:hover { background: #f0ad2c; text-decoration: none; }

/* ------------------------------------------------------------------
   Kickers / section headers
------------------------------------------------------------------ */
.kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.kicker--warn { color: #7a1400; background: #ffe2cc; }
.section__header--center {
  text-align: center;
  margin-left: auto; margin-right: auto;
  max-width: 720px;
}
.section__header--center .lead { color: var(--color-text-muted); }
.section__cta { margin-top: var(--space-6); text-align: center; }

/* Hero: single-column when no right-side widget is used */
.hero__inner { grid-template-columns: 1fr !important; }
.hero__copy { max-width: 1040px; }
.hero__title { font-size: clamp(2rem, 4.2vw, 3.25rem); max-width: 960px; }
.hero__subtitle { max-width: 780px; }

/* ------------------------------------------------------------------
   Hero stats
------------------------------------------------------------------ */
.hero__stats {
  list-style: none;
  margin: var(--space-8) 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 720px) {
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero__stats li {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 2px;
}
.hero__stats strong {
  font-size: var(--fs-xl);
  color: var(--color-primary-700);
}
.hero__stats span {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------
   Popular Services grid
------------------------------------------------------------------ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.service-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.service-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.service-card__icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: grid; place-items: center;
}
.service-card__emoji { font-size: 22px; line-height: 1; }
.mayor__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card__body { display: grid; gap: 2px; }
.service-card__body strong { font-size: var(--fs-md); }
.service-card__body .meta { color: var(--color-text-subtle); }

/* ------------------------------------------------------------------
   Search block
------------------------------------------------------------------ */
.search-block { max-width: 820px; margin: 0 auto; text-align: center; }
.search-block__form {
  display: flex; gap: var(--space-2);
  margin: var(--space-5) auto var(--space-4) auto;
  max-width: 620px;
}
.search-block__form input[type="search"] { flex: 1; }
.search-block__tags {
  display: inline-flex; gap: var(--space-2);
  flex-wrap: wrap; align-items: center; justify-content: center;
}
.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-primary);
  text-decoration: none;
}
.pill:hover { background: var(--color-primary-50); }

/* ------------------------------------------------------------------
   News cards
------------------------------------------------------------------ */
.news-card { padding: 0; overflow: hidden; }
.news-card__image {
  height: 96px;
  background: linear-gradient(135deg, #1f3a6d 0%, #6fa6e8 100%);
  display: flex; align-items: flex-end;
  padding: var(--space-2) var(--space-3);
  position: relative;
  overflow: hidden;
}
.news-card__image--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Category-keyed gradient palettes (match citydemo color cues). */
.news-card__image[data-cat="public-works"],
.news-card__image[data-cat="roads"],
.news-card__image[data-cat="infrastructure"] {
  background: linear-gradient(135deg, #1f3a6d 0%, #6fa6e8 100%);
}
.news-card__image[data-cat="permits"],
.news-card__image[data-cat="parks"],
.news-card__image[data-cat="parks-recreation"],
.news-card__image[data-cat="environment"] {
  background: linear-gradient(135deg, #1a4a2e 0%, #2d7a4f 100%);
}
.news-card__image[data-cat="community"],
.news-card__image[data-cat="events"],
.news-card__image[data-cat="arts-culture"] {
  background: linear-gradient(135deg, #3a1a5a 0%, #6a3a9a 100%);
}
.news-card__image[data-cat="public-safety"],
.news-card__image[data-cat="police"],
.news-card__image[data-cat="fire"],
.news-card__image[data-cat="emergency"],
.news-card__image[data-cat="alerts"] {
  background: linear-gradient(135deg, #7a1f1f 0%, #c94545 100%);
}
.news-card__image[data-cat="business"],
.news-card__image[data-cat="economic-development"],
.news-card__image[data-cat="bids"] {
  background: linear-gradient(135deg, #7a4a0f 0%, #d9a23c 100%);
}
.news-card__image[data-cat="meetings"],
.news-card__image[data-cat="city-council"],
.news-card__image[data-cat="government"] {
  background: linear-gradient(135deg, #0f3a4a 0%, #2f7a95 100%);
}
.news-card__image[data-cat="jobs"],
.news-card__image[data-cat="hr"] {
  background: linear-gradient(135deg, #3a3a3a 0%, #7a7a7a 100%);
}

/* A subtle diagonal shine so the flat gradients feel a little richer. */
.news-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 55%, rgba(255,255,255,0.12) 75%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.news-card__image--photo::after { display: none; }
.news-card__kicker {
  background: #fff;
  color: var(--color-primary-700);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.news-card__body { padding: var(--space-4); }
.news-card__body h3 { margin-top: var(--space-1); }

/* ------------------------------------------------------------------
   Meetings list + calendar
------------------------------------------------------------------ */
.meeting-list { display: grid; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.meeting {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
}
.meeting__date {
  width: 80px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.meeting__month {
  display: block;
  background: var(--color-primary);
  color: #fff;
  padding: 4px 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.meeting__day {
  display: block;
  padding: 8px 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
}
.meeting__body h3 { margin: 0 0 4px 0; font-size: var(--fs-lg); }
.meeting__actions { margin-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; }

.calendar { padding: var(--space-4); }
.calendar__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.calendar__head h3 { margin: 0; }
.calendar__head button {
  background: #fff; color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.calendar__head button[disabled],
.calendar__head button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.calendar__grid { width: 100%; border-collapse: collapse; text-align: center; }
.calendar__grid th {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  font-weight: 600;
  padding: 6px 0;
}
.calendar__grid td {
  padding: 8px 0;
  font-size: var(--fs-sm);
  border-top: 1px solid var(--color-border);
  position: relative;
}
.calendar__grid td.is-outside { color: #c3cbd6; }
.calendar__grid td.is-today {
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
}
.calendar__grid td.has-event { font-weight: 700; color: var(--color-primary-700); }
.calendar__grid td.has-event::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-critical);
}
.calendar__legend {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0 0;
  display: flex;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.dot--event { background: var(--color-critical); }
.dot--today { background: var(--color-primary); }

/* ------------------------------------------------------------------
   Mayor message
------------------------------------------------------------------ */
.mayor { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.mayor__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 720px) {
  .mayor__inner { grid-template-columns: 1fr; text-align: center; gap: var(--space-6); }
  .mayor__photo { margin: 0 auto; }
  .mayor__copy { text-align: left; }
}

.mayor__photo {
  width: 200px;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, #c8d5e8, #8aaac8);
  border: 4px solid var(--color-gold, #c8a04c);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mayor__photo-placeholder { width: 72px; height: 72px; fill: rgba(10, 31, 68, 0.30); }
.mayor__photo-caption { font-size: 11px; color: rgba(10, 31, 68, 0.40); letter-spacing: 0.04em; }

.mayor__eyebrow {
  color: var(--color-gold, #c8a04c);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.mayor__name {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-primary, #0a1f44);
  margin: 0 0 6px;
}
.mayor__role {
  font-size: 14px;
  color: var(--color-text-subtle);
  font-style: italic;
  margin: 0 0 18px;
}
.mayor__para {
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.75;
  margin: 0 0 16px;
}
.mayor__cta {
  display: inline-block;
  color: var(--color-sky, #2f7a95);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 4px;
}
.mayor__cta:hover,
.mayor__cta:focus { text-decoration: underline; }

/* ------------------------------------------------------------------
   About stats
------------------------------------------------------------------ */
.about-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.about-stats li {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
.about-stats strong {
  display: block;
  font-size: 1.75rem;
  color: var(--color-primary-700);
}
.about-stats span { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ------------------------------------------------------------------
   Safety block — single-row editorial strip (matches citydemo)
------------------------------------------------------------------ */
.safety {
  background: var(--color-surface-muted);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.safety__flex {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: stretch;
}
.safety__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.safety__badge {
  background: #c23a2b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  white-space: nowrap;
}
.safety__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.25;
}
.safety__links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-start;
}
.safety__link {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.safety__link:hover,
.safety__link:focus-visible {
  border-color: #c23a2b;
  color: #c23a2b;
}
.safety__icon { font-size: 14px; line-height: 1; }

@media (max-width: 1100px) {
  .safety__title { white-space: normal; }
}

/* ------------------------------------------------------------------
   Newsletter band
------------------------------------------------------------------ */
.newsletter-section .newsletter-band {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: var(--space-6);
}
.newsletter-section .newsletter-band h2 { color: #fff; margin-top: 0; }
.newsletter-section .newsletter-band .lead { color: #d4e2ff; }
@media (max-width: 720px) {
  .newsletter-section .newsletter-band { grid-template-columns: 1fr; }
}
.newsletter-section .newsletter { display: flex; gap: var(--space-2); }
.newsletter-section .newsletter input[type="email"] { flex: 1; border-radius: var(--radius-md); }
.newsletter-section .newsletter button { background: #ffbf47; color: var(--color-text); }
.newsletter-section .newsletter button:hover { background: #f0ad2c; color: var(--color-text); }

/* When a background image is set on the newsletter section, let it show
   through by making the band transparent instead of a solid blue card. */
.newsletter-section.section--bg .newsletter-band {
  background: transparent;
  padding: var(--space-10) 0;
  border-radius: 0;
}

/* ------------------------------------------------------------------
   Contact section
------------------------------------------------------------------ */
.contact__facts { gap: var(--space-3); }
.contact .card h3 { margin: 0 0 4px 0; }
.map-placeholder {
  background: linear-gradient(135deg, #e8efff 0%, #d6e3ff 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
}

/* ------------------------------------------------------------------
   Deep footer
------------------------------------------------------------------ */
.footer-main { padding: var(--space-10) 0 0 0; }
.footer-brand .h3 { color: #fff; margin-bottom: var(--space-2); }
.social {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0 0;
  display: flex;
  gap: var(--space-2);
}
.social a {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
}
.social a:hover { background: rgba(255,255,255,0.18); }
.footer-grid { grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr; }
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: var(--space-6);
  padding: var(--space-4) 0 var(--space-6);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: #aab8cf;
}
.footer-legal__links {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: var(--space-4); flex-wrap: wrap;
}
.footer-legal__links a { color: #cfe0ff; text-decoration: none; }
.footer-legal__links a:hover { text-decoration: underline; color: #fff; }

/* ------------------------------------------------------------------
   Mega menu
------------------------------------------------------------------ */
.site-nav__menu { position: static; }
.site-nav__item { position: relative; }
.site-nav__item > a,
.site-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-weight: 500;
  background: transparent;
  border: 0;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
  line-height: 1.2;
}
.site-nav__trigger .chev { font-size: 0.7em; opacity: 0.85; transition: transform 140ms ease; }
.site-nav__item.is-open .site-nav__trigger .chev { transform: rotate(180deg); }
/* Hover: turn text gold, subtle white pill */
.site-nav__item > a:hover,
.site-nav__item:hover > .site-nav__trigger,
.site-nav__trigger:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-gold-strong);
}
.site-nav__item:hover > .site-nav__trigger .chev,
.site-nav__trigger:hover .chev { color: var(--color-gold-strong); opacity: 1; }

/* Open (clicked) state: same gold text, slightly stronger pill */
.site-header .site-nav__item.is-open > .site-nav__trigger,
.site-header .site-nav__item.is-open > .site-nav__trigger:hover,
.site-header .site-nav__item.is-open > .site-nav__trigger:focus {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-gold-strong) !important;
  border-radius: var(--radius-md);
}
.site-header .site-nav__item.is-open > .site-nav__trigger .chev {
  color: var(--color-gold-strong);
  opacity: 1;
}
/* Keep focus outline gold — matches the civic gold accent */
.site-header .site-nav__trigger:focus-visible,
.site-header .site-nav__item > a:focus-visible {
  outline: 2px solid var(--color-gold-strong);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold-strong);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s 140ms;
  z-index: 60;
  margin-top: 0;
}
.site-nav__item:hover > .mega,
.site-nav__item.is-open > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}
.mega__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4) var(--space-6);
}
.mega--wide { min-width: 780px; }
.mega--wide .mega__inner { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
@media (max-width: 1100px) {
  .mega--wide { min-width: 560px; }
  .mega--wide .mega__inner { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
.mega--wide { left: 50%; transform: translate(-50%, 6px); }
.site-nav__item:hover > .mega--wide,
.site-nav__item.is-open > .mega--wide {
  transform: translate(-50%, 0);
}
.mega__heading {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  font-weight: 700;
  border-bottom: 1px solid var(--color-gold-soft);
  padding-bottom: 6px;
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list a {
  display: block;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.mega__list a:hover,
.mega__list a:focus {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

/* Mobile: turn mega menus into accordions inside the drawer */
@media (max-width: 960px) {
  .site-nav__trigger { width: 100%; justify-content: space-between; color: var(--color-text); }
  .site-nav__item > a { color: var(--color-text); }
  .site-nav__item.is-open .site-nav__trigger { background: var(--color-primary-50); color: var(--color-primary-700); }
  .mega,
  .mega--wide {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none !important;
    box-shadow: none;
    border: 0;
    padding: 0 8px 8px;
    min-width: 0;
    margin-top: 0;
    display: none;
  }
  .site-nav__item.is-open > .mega,
  .site-nav__item.is-open > .mega--wide { display: block; }
  .mega__inner { grid-template-columns: 1fr !important; gap: var(--space-3); }
  .mega__heading { margin-top: var(--space-2); }
}

/* ------------------------------------------------------------------
   Interior page header + breadcrumbs
------------------------------------------------------------------ */
.page-header {
  background:
    radial-gradient(900px 280px at 85% 120%, rgba(201, 160, 78, 0.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) 0 var(--space-6);
}
.page-header .kicker { margin-bottom: var(--space-3); }
.page-header__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  color: var(--color-text);
}
.page-header__subtitle {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  max-width: 720px;
}

.breadcrumbs { margin-bottom: var(--space-4); font-size: var(--fs-sm); }
.breadcrumbs ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  color: var(--color-text-muted);
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--color-text-subtle);
}
.breadcrumbs a { color: var(--color-primary); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* ------------------------------------------------------------------
   Entry content typography (pages + posts)
------------------------------------------------------------------ */
.entry-content { max-width: 760px; }
.entry-content h2 { margin-top: var(--space-8); }
.entry-content h3 { margin-top: var(--space-6); }
.entry-content p,
.entry-content ul,
.entry-content ol { margin: 0 0 var(--space-4); }
.entry-content ul,
.entry-content ol { padding-left: 1.25rem; }
.entry-content a:not(.button):not(.button--secondary):not(.button--ghost) {
  color: var(--color-primary);
  text-decoration: underline;
}
.entry-content a:not(.button):not(.button--secondary):not(.button--ghost):hover {
  color: var(--color-primary-700);
}
.entry-content a.button,
.entry-content a.button--secondary,
.entry-content a.button--ghost { text-decoration: none; }
.entry-content a.button { color: #fff; }
.entry-content a.button:hover { color: #fff; }
.entry-content blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-5);
  border-left: 4px solid var(--color-gold-strong);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.entry-content img,
.entry-content figure { max-width: 100%; border-radius: var(--radius-md); }

/* When the default page.php wraps post_content in a `.card.entry-card`
   (the "prose card" treatment that matches /contact/), let the inner
   `.entry-content` span the full card width instead of being clamped
   to the 760px prose width above. The card itself stays inside the
   .interior content column, so this just lets prose fill the card,
   not the whole viewport. */
.entry-card > .entry-content { max-width: none; }
.entry-card { margin-bottom: var(--space-6); }
.entry-card > .entry-content > :first-child { margin-top: 0; }
.entry-card > .entry-content > :last-child  { margin-bottom: 0; }

.entry-meta {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  color: var(--color-text-muted); font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}
.entry-meta .sep { color: var(--color-text-subtle); }

/* ------------------------------------------------------------------
   Two-column interior layout (content + sidebar)
------------------------------------------------------------------ */
.interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 960px) { .interior { grid-template-columns: 1fr; } }
.sidebar .card + .card { margin-top: var(--space-4); }
.sidebar h3 { margin-top: 0; }
.sidebar .link-list a { display: block; padding: 6px 0; color: var(--color-primary); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.sidebar .link-list a:last-child { border-bottom: 0; }
.sidebar .link-list a:hover { color: var(--color-primary-700); }

/* ------------------------------------------------------------------
   Post / news listing cards
------------------------------------------------------------------ */
.post-list { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.post-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-5);
  padding: var(--space-4);
  align-items: center;
}
@media (max-width: 720px) { .post-item { grid-template-columns: 1fr; } }
.post-item__thumb {
  height: 140px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #c6d7f5 0%, #93b4e8 100%);
  display: flex; align-items: flex-end;
  padding: var(--space-3);
  overflow: hidden;
}
.post-item__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.post-item__body h2,
.post-item__body h3 { margin: 6px 0; }
.post-item__body h2 a,
.post-item__body h3 a { color: var(--color-text); text-decoration: none; }
.post-item__body h2 a:hover,
.post-item__body h3 a:hover { color: var(--color-primary); }

/* ------------------------------------------------------------------
   Services hub
------------------------------------------------------------------ */
.services-hub__search {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  max-width: 820px;
  margin: 0 auto var(--space-6);
}
.services-hub__search form { display: flex; gap: var(--space-2); }
.services-hub__search input[type="search"] { flex: 1; }

/* ------------------------------------------------------------------
   404
------------------------------------------------------------------ */
.error-404 {
  text-align: center;
  padding: var(--space-12) var(--space-4);
}
.error-404__code {
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}
.error-404 h1 { margin-top: var(--space-3); }
.error-404 p { color: var(--color-text-muted); max-width: 560px; margin: 0 auto var(--space-5); }
.error-404__actions { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* Department contact card */
.dept-contact { display: grid; gap: var(--space-3); }
.dept-contact dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 2px; }
.dept-contact dd { margin: 0; color: var(--color-text); }

/* Page header print button sits alongside the title */
.page-header__actions { margin-top: var(--space-3); }

/* Print stylesheet
 * Goal: produce a clean, ink-saving printed version of any page — hide chrome
 * (nav, footer, alerts, sidebars, forms, print button itself), expand the
 * content column, show link URLs inline for reference. */
@media print {
  @page { margin: 1.5cm; }

  :root {
    --color-primary: #000;
    --color-primary-600: #000;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  .skip-link,
  .alertstrip,
  .utility-bar,
  .site-header,
  .site-nav,
  .nav-toggle,
  .no-print,
  .breadcrumbs,
  .newsletter-section,
  .site-footer,
  .sidebar,
  .hero__cta,
  .mega,
  .fortius-sr button[type="submit"],
  form button[type="submit"] {
    display: none !important;
  }

  /* Expand content column and drop shadows/borders. */
  .container,
  .interior,
  .entry-content {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .interior { grid-template-columns: 1fr !important; }

  .card,
  .post-card,
  .meeting,
  .service-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  /* Inline link URLs so print readers can follow them. */
  .entry-content a[href^="http"]::after,
  .entry-content a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }
  /* Don't print URL for anchor links or tel/mailto. */
  .entry-content a[href^="#"]::after,
  .entry-content a[href^="tel:"]::after,
  .entry-content a[href^="mailto:"]::after { content: ""; }

  /* Force black text for ink. */
  h1, h2, h3, h4, p, li, a { color: #000 !important; }

  /* Ensure images don't overflow. */
  img { max-width: 100% !important; }

  /* Append a small citation footer on every printed page. */
  .page-header {
    border-bottom: 2px solid #000 !important;
    padding-bottom: 12pt !important;
    margin-bottom: 16pt !important;
  }
}

/* Staff directory grid + cards */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.staff-card {
  padding: var(--space-4);
  text-align: center;
}
.staff-card__photo {
  width: 96px; height: 96px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary-50);
}
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-card__name { font-size: var(--fs-md); margin: 0 0 2px; }
.staff-card__contact { margin-top: var(--space-3); display: grid; gap: 4px; font-size: var(--fs-sm); }
.staff-card__contact dd { margin: 0; }

.staff-detail__photo { max-width: 240px; margin-bottom: var(--space-4); }
.staff-detail__photo img { width: 100%; height: auto; border-radius: var(--radius-md); }

/* FAQ accordion */
.faq-list { display: grid; gap: var(--space-3); }
.faq-item { padding: 0; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  color: var(--color-primary);
  font-size: 1.4em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item__body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); }
.faq-group + .faq-group { margin-top: var(--space-6); }

/* ============================================================
   Language switcher (utility bar)
   ============================================================ */
.utility-bar__lang { position: relative; display: inline-block; }
.utility-bar__lang summary {
	list-style: none; cursor: pointer;
	user-select: none;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background 120ms ease;
}
.utility-bar__lang summary::-webkit-details-marker { display: none; }
.utility-bar__lang summary:focus-visible { outline: 2px solid #ffd700; outline-offset: 1px; }
.utility-bar__lang summary:hover { background: rgba(255,255,255,0.08); }
.utility-bar__lang[open] summary { background: rgba(255,255,255,0.12); }

/* Sits above the header (which can include sticky elements) and the
   mega menu. The 100k ceiling matches the screen-reader skip-link so
   nothing of ours can ever cover it. */
.utility-bar__lang-menu {
	position: absolute; right: 0; top: calc(100% + 6px);
	min-width: 160px; padding: 6px; margin: 0; list-style: none;
	background: #fff; color: #222; border-radius: 6px;
	box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
	z-index: 100001;
}
.utility-bar__lang-menu::before {
	content: ""; position: absolute; right: 14px; top: -6px;
	width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
	box-shadow: -2px -2px 4px rgba(0,0,0,0.04);
}
.utility-bar__lang-menu li { padding: 0; position: relative; z-index: 1; }
.utility-bar__lang-menu a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 12px; border-radius: 4px;
	color: #222; text-decoration: none; font-size: 14px;
	transition: background 120ms ease;
}
.utility-bar__lang-menu a:hover,
.utility-bar__lang-menu a:focus-visible { background: #eef2fa; outline: none; }
.utility-bar__lang-menu a[aria-current="true"] {
	font-weight: 700; background: #eaf2ff;
}
.utility-bar__lang-menu a[aria-current="true"]::after {
	content: "✓"; color: #2a8c4d; font-weight: 700; margin-left: 12px;
}

/* Sign-In dropdown — uses the same <details> pattern and identical
   visuals as the language switcher, but with two stacked items each
   showing a label + small hint underneath (e.g. "Staff Sign In" /
   "City employees — username & password"). */
.utility-bar__signin { position: relative; display: inline-block; }
.utility-bar__signin summary {
	list-style: none; cursor: pointer; user-select: none;
	padding: 4px 8px; border-radius: 4px;
	transition: background 120ms ease;
}
.utility-bar__signin summary::-webkit-details-marker { display: none; }
.utility-bar__signin summary:focus-visible { outline: 2px solid #ffd700; outline-offset: 1px; }
.utility-bar__signin summary:hover { background: rgba(255,255,255,0.08); }
.utility-bar__signin[open] summary { background: rgba(255,255,255,0.12); }

.utility-bar__signin-menu {
	position: absolute; right: 0; top: calc(100% + 6px);
	min-width: 260px; padding: 6px; margin: 0; list-style: none;
	background: #fff; color: #222; border-radius: 6px;
	box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
	z-index: 100001;
}
.utility-bar__signin-menu::before {
	content: ""; position: absolute; right: 14px; top: -6px;
	width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
	box-shadow: -2px -2px 4px rgba(0,0,0,0.04);
}
.utility-bar__signin-menu li { padding: 0; position: relative; z-index: 1; }
.utility-bar__signin-menu a {
	display: block; padding: 10px 12px; border-radius: 4px;
	color: #222; text-decoration: none;
	transition: background 120ms ease;
}
.utility-bar__signin-menu a:hover,
.utility-bar__signin-menu a:focus-visible { background: #eef2fa; outline: none; }
.utility-bar__signin-row { display: flex; flex-direction: column; gap: 2px; }
.utility-bar__signin-label { font-size: 14px; font-weight: 600; color: #0b3d91; }
.utility-bar__signin-hint  { font-size: 12px; color: #5f6b82; }

/* Resident registration / activation form (shortcode rendered inside
   the theme's .card.entry-card wrapper on /register/). Matches the
   /contact/ form treatment. */
.fortius-auth { max-width: 480px; }
.fortius-auth__banner {
	display: block; padding: 10px 14px; border-radius: 6px; margin-bottom: 18px;
	font-size: 14px;
}
.fortius-auth__banner--ok  { background: #e8f5ec; color: #1a6e3a; }
.fortius-auth__banner--err { background: #fde0df; color: #912018; }
.fortius-auth__field { display: block; margin-bottom: 16px; }
.fortius-auth__field > span {
	display: block; font-weight: 600; margin-bottom: 6px; color: #1a1f2c;
}
.fortius-auth__field input {
	width: 100%; padding: 10px 12px;
	border: 1px solid #c4c9d6; border-radius: 6px;
	font-size: 15px; box-sizing: border-box;
}
.fortius-auth__hint { display: block; margin-top: 4px; color: #5f6b82; font-size: 12px; }
.fortius-auth__actions { margin: 8px 0 14px; }
.fortius-auth__note { font-size: 13px; color: #475066; margin: 0; }