:root {
  --borough-navy: #153B52;
  --borough-blue: #245A82;
  --borough-green: #3F6B45;
  --borough-gold: #C89A2B;

  --light-green: #EDF4ED;
  --light-gray: #F7F8F8;
  --soft-gray: #EEF1F4;
  --border-light: #E2E6EA;

  --text-dark: #23303A;
  --text-muted: #66727A;
  --white: #FFFFFF;

  --container-wide: 1440px;
  --container: 1200px;
  --container-narrow: 900px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.10);

  --section-padding: 96px 32px;
  --section-padding-sm: 72px 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text-dark);
  background: var(--white);
  font-family: Arial, Helvetica, sans-serif;
}

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

a {
  color: inherit;
}

.page-section {
  padding: var(--section-padding);
}

.page-section-tight {
  padding: 64px 32px;
}

.page-section-light {
  background: var(--light-gray);
}

.page-section-green {
  background: var(--light-green);
}

.page-section-white {
  background: var(--white);
}

.page-section-dark {
  background: var(--borough-navy);
  color: var(--white);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.section-heading {
  color: var(--borough-navy);
  text-align: center;
  font-size: 42px;
  line-height: 1.15;
  margin: 0 0 48px;
}

.section-subtitle {
  max-width: 760px;
  margin: -28px auto 48px;
  text-align: center;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.7;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

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

  .split-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .page-section {
    padding: var(--section-padding-sm);
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .section-heading {
    font-size: 34px;
  }
}

@media (max-width: 600px) {
  .page-section {
    padding: 56px 20px;
  }

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

/* ==========================================================
   BOARD PAGE TWO-COLUMN LAYOUT FIX
========================================================== */

.gov-detail-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr) !important;
  gap: 36px !important;
  align-items: start !important;
}

.gov-detail-layout .gov-detail-main {
  grid-column: 1 !important;
}

.gov-detail-layout .gov-detail-sidebar {
  grid-column: 2 !important;
  align-self: start !important;
  margin-top: 0 !important;
  position: sticky;
  top: 24px;
}

@media (max-width: 900px) {
  .gov-detail-layout {
    grid-template-columns: 1fr !important;
  }

  .gov-detail-layout .gov-detail-main,
  .gov-detail-layout .gov-detail-sidebar {
    grid-column: auto !important;
  }

  .gov-detail-layout .gov-detail-sidebar {
    position: static;
  }
}