:root {
  /* Brand blues */
  --smalt:        #002D74;  /* primary brand blue */
  --smalt-dark:   #001d4e;  /* header background, hero title */
  --smalt-mid:    #003080;  /* back-to-top button */
  --smalt-light:  #004999;  /* back-to-top hover */
  --mariner:      #3474DA;  /* links, definition text */

  /* Khaki accents */
  --khaki:       #C1A783;   /* seal background, accent */
  --khaki-pale:  #f7f4f0;   /* dropdown hover background */

  /* Light blue tints (note: --pale-blue is named for its color, not a khaki shade) */
  --pale-blue:   #e8f0f8;   /* hero band, category badges */
  --light-blue:  #E0F0FA;   /* input border, hover border */

  /* Neutrals */
  --white:       #ffffff;
  --border:      #dbd6cf;
  --text:        #1a1a2a;
  --text-muted:  #5a6070;
  --focus-ring:  #ffcc00;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth;
scroll-padding-top: 160px; /* header (~73px) + search hero (~80px) + buffer */
}
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}
a { color: var(--mariner); text-decoration: none; }
a:hover { text-decoration: underline; }

/* HEADER */
#top-bar { position: sticky; top: 0; z-index: 200; }
.site-header { background: var(--smalt-dark); box-shadow: 0 3px 20px rgba(0,0,0,0.35); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 30px;
  border-bottom: 1px solid rgba(193,167,131,0.3);
  gap: 20px;
}
.brand-block { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-seal {
  width: 44px; height: 44px;
  background: var(--khaki);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'EB Garamond', serif;
  font-size: 17px; font-weight: 700;
  color: var(--smalt-dark);
  flex-shrink: 0;
}
.brand-text { line-height: 1.35; }
.brand-agency {
  font-family: 'Open Sans', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.brand-bureau {
  font-family: 'EB Garamond', serif;
  font-size: 18px; font-weight: 500;
  color: var(--white);
}
.header-center { flex: 1; text-align: center; }
.header-label {
  font-family: 'EB Garamond', serif;
  font-size: 13px; font-style: italic;
  color: var(--khaki);
}
.header-nav { display: flex; gap: 6px; flex-shrink: 0; }
.header-nav a {
  font-family: 'Open Sans', sans-serif;
  font-size: 11.5px; font-weight: 600;
  color: rgba(255,255,255,0.6);
  padding: 6px 12px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.03em;
}
.header-nav a:hover { background: rgba(255,255,255,0.1); color: var(--white); text-decoration: none; }
.header-nav a.active { background: rgba(193,167,131,0.18); color: var(--khaki); }

/* PAGE HERO — sticky search */
.page-hero {
  position: sticky;
  top: 73px;
  z-index: 100;
  background: var(--pale-blue);
  padding: 12px 40px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.hero-inner { max-width: 900px; margin: 0 auto; }
.hero-title {
  font-family: 'EB Garamond', serif;
  font-size: 36px; font-weight: 500;
  color: var(--smalt-dark);
  margin-bottom: 4px;
}
.hero-subtitle {
  font-size: 12.5px;
  color: var(--smalt-dark);
  margin-bottom: 14px;
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
}

/* SEARCH BAR */
.search-wrap { position: relative; max-width: 620px; }
.search-icon-svg {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
  width: 16px; height: 16px;
}
#search-input {
  width: 100%;
  padding: 11px 42px 11px 38px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  border: 1.5px solid var(--light-blue);
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#search-input:focus {
  border-color: var(--khaki);
  box-shadow: 0 0 0 3px rgba(193,167,131,0.22);
}
#search-input::placeholder { color: #aaa; }
#clear-btn {
  display: none;
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  background: var(--border);
  border: none; border-radius: 50%;
  width: 22px; height: 22px;
  cursor: pointer; font-size: 12px;
  line-height: 22px; text-align: center;
  color: var(--text-muted);
  transition: background 0.15s;
}
#clear-btn:hover { background: var(--light-blue); }

/* DROPDOWN */
#dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 5px); left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  z-index: 9999;
  overflow: hidden;
}
.dd-header {
  background: var(--smalt);
  color: var(--white);
  font-family: 'Open Sans', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 16px;
}
#results-list { max-height: 400px; overflow-y: auto; }
.result-row {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.result-row:last-child { border-bottom: none; }
.result-row:hover, .result-row.kbd-active { background: var(--khaki-pale); }
.result-acronym {
  font-family: 'EB Garamond', serif;
  font-size: 16px; font-weight: 600;
  color: var(--smalt);
}
.result-def {
  font-size: 12.5px; color: var(--mariner);
  margin-top: 1px; line-height: 1.4;
}
.result-cat-badge {
  display: inline-block; margin-top: 3px;
  background: var(--pale-blue); color: var(--smalt);
  font-size: 9.5px; font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
}
#dd-status {
  padding: 6px 16px; font-size: 11px;
  color: var(--text-muted); background: var(--khaki-pale);
  border-top: 1px solid var(--border);
  font-family: 'Open Sans', sans-serif;
  display: none;
}
mark {
  background: rgba(193,167,131,0.4);
  border-radius: 2px; padding: 0 2px;
  color: inherit; font-style: normal;
}

/* CONTENT */
.content-wrap { max-width: 1100px; margin: 0 auto; padding: 28px 40px 72px; }

/* STATS BAR */
.stats-bar {
  display: flex; align-items: baseline;
  gap: 8px; margin-bottom: 16px;
  font-size: 13px; color: var(--text-muted);
}
.stats-count {
  font-family: 'EB Garamond', serif;
  font-size: 28px; font-weight: 500;
  color: var(--smalt); line-height: 1;
}
#filter-note { color: var(--mariner); font-weight: 600; display: none; }

/* CATEGORY PILLS */
.cat-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 20px;
}
.cat-pill {
  font-family: 'Open Sans', sans-serif;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 13px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--khaki-pale);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s, box-shadow 0.13s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.cat-pill:hover {
  border-color: var(--smalt);
  color: var(--smalt);
  background: var(--khaki-pale);
}
.cat-pill.active {
  background: var(--smalt);
  color: var(--white);
  border-color: var(--smalt);
  box-shadow: 0 2px 6px rgba(0,45,116,0.18);
}
.cat-pill.active:hover {
  background: var(--smalt-dark);
  border-color: var(--smalt-dark);
}

/* ALPHA NAV */
.alpha-nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 24px;
}
.alpha-btn {
  font-family: 'Open Sans', sans-serif;
  font-size: 11.5px; font-weight: 700;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  color: var(--smalt);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-decoration: none;
}
.alpha-btn:hover { background: var(--smalt); color: var(--white); border-color: var(--smalt); text-decoration: none; }
.alpha-btn.disabled { color: #ccc; border-color: #ece8e2; cursor: default; pointer-events: none; }

/* LETTER SECTIONS */
.letter-section {
  scroll-margin-top: 160px;
}
.letter-heading {
  font-family: 'EB Garamond', serif;
  font-size: 13px; font-weight: 600;
  color: var(--white);
  background: var(--smalt);
  display: inline-block;
  padding: 3px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
  margin-top: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.acronym-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 8px;
}
.acronym-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px 15px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.acronym-card:hover {
  box-shadow: 0 2px 10px rgba(0,45,116,0.09);
  border-color: var(--light-blue);
}
.acronym-card.flash-highlight {
  animation: flashCard 1.6s ease-out;
}
@keyframes flashCard {
  0%   { background: rgba(193,167,131,0.55); box-shadow: 0 0 0 3px var(--khaki); }
  100% { background: var(--white); box-shadow: none; }
}
.card-acronym {
  font-family: 'EB Garamond', serif;
  font-size: 16px; font-weight: 600;
  color: var(--smalt); margin-bottom: 2px;
}
.card-def { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.card-cat {
  display: inline-block; margin-top: 6px;
  background: var(--pale-blue); color: var(--smalt);
  font-size: 9.5px; font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
}

/* EMPTY STATE */
.empty-state {
  display: none; text-align: center;
  padding: 56px 24px; color: var(--text-muted);
}
.empty-icon { font-size: 36px; margin-bottom: 14px; }
.empty-state p {
  font-family: 'EB Garamond', serif;
  font-size: 20px; font-weight: 500;
  color: var(--smalt-dark); margin-bottom: 6px;
}
.empty-state span { font-size: 13px; }

/* FOOTER */
.page-footer { border-top: 1px solid var(--border); margin-top: 0; }
.footer-body {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 0; gap: 16px;
}
.footer-text {
  font-family: 'EB Garamond', serif;
  font-size: 12px; color: var(--text-muted);
}

/* RESPONSIVE
   Two breakpoints. At 1024px (tablet portrait / small laptop) the header
   stacks vertically because the long bureau name plus three nav links runs
   out of horizontal room, and content padding tightens. At 768px (phone)
   typography shrinks further and the acronym grid collapses to one column.

   Alpha-nav letters and category pills wrap naturally (default flex-wrap
   behavior) — we do NOT use horizontal scrolling here because the fixed
   30px letter buttons don't have enough total width and get squished. */
@media (max-width: 1024px) {

  /* Header stacks: brand on top, nav below */
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 24px;
  }
  .header-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
  }

  /* Hero band sits under the now-taller stacked header */
  .page-hero {
    padding: 12px 24px;
    top: 105px;
  }

  /* Tighter side padding for body content */
  .content-wrap { padding: 24px 24px 56px; }
  .acronym-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 768px) {

  /* Tighter header padding + smaller bureau text on phones */
  .header-inner {
    padding: 12px 18px;
  }
  .brand-bureau {
    font-size: 15px;
    line-height: 1.25;
  }
  .header-nav a {
    padding: 6px 10px;
    font-size: 11px;
  }

  /* Hero typography shrinks */
  .page-hero {
    padding: 12px 16px;
  }
  .hero-title {
    font-size: 26px;
  }

  /* Body content: single column on phones */
  .content-wrap { padding: 20px 16px 48px; }
  .acronym-grid { grid-template-columns: 1fr; }

  /* Smaller back-to-top on phones */
  #backToTop {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    font-size: 20px;
  }
}

/* BACK TO TOP BUTTON */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--smalt-mid);
  color: var(--white);
  border: none;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
  z-index: 9999;
}
#backToTop.visible {
  opacity: 1;
  visibility: visible;
}
#backToTop:hover {
  background-color: var(--smalt-light);
  transform: translateY(-3px);
}
#backToTop:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* ── 508 / ACCESSIBILITY ── */

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Global visible focus ring for all interactive elements */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Override outline for search input so it doesn't clash with box-shadow focus */
#search-input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 0;
  box-shadow: 0 0 0 3px rgba(193,167,131,0.22);
}

/* brand-block as <a> — strip link underline, keep block layout */
a.brand-block {
  text-decoration: none;
  color: inherit;
}
a.brand-block:hover .brand-bureau {
  text-decoration: underline;
  color: var(--white);
}

/* hero-title as <h1> — preserve existing visual style */
h1.hero-title {
  font-family: 'EB Garamond', serif;
  font-size: 36px;
  font-weight: 500;
  color: var(--smalt-dark);
  margin-bottom: 4px;
}

/* letter-heading as <h2> — preserve existing visual style */
h2.letter-heading {
  font-family: 'EB Garamond', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  background: var(--smalt);
  display: inline-block;
  padding: 3px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
  margin-top: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Acronym cards: use <dl>/<dt>/<dd> — reset default dl spacing */
dl.acronym-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 8px;
}
dt.card-acronym {
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--smalt);
  margin-bottom: 2px;
}
dd.card-def {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-left: 0;
}
dd.card-cat {
  display: inline-block;
  margin-top: 6px;
  margin-left: 0;
  background: var(--pale-blue);
  color: var(--smalt);
  font-size: 9.5px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}

/* Category pills: aria-pressed toggle state */
.cat-pill[aria-pressed="true"] {
  background: var(--smalt);
  color: var(--white);
  border-color: var(--smalt);
  box-shadow: 0 2px 6px rgba(0,45,116,0.18);
}

/* Alpha nav: disabled state */
.alpha-btn[aria-disabled="true"] {
  color: #ccc;
  border-color: #ece8e2;
  cursor: default;
  pointer-events: none;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--smalt);
  color: var(--white);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  border-radius: 0 0 4px 0;
  text-decoration: none;
  transition: top 0.1s;
}
.skip-link:focus {
  top: 0;
}

/* Main content: allow programmatic focus for back-to-top */
#main-content:focus {
  outline: none;
}

@media (max-width: 768px) {
  dl.acronym-grid { grid-template-columns: 1fr; }
}