/* What's My Zone — County of Ventura RMA brand theme (WCAG 2.1 AA).
   Palette/type extracted from https://rma.venturacounty.gov (see BRANDING.md). */
:root {
  --vc-blue-900:#0C428D; --vc-blue-700:#235596; --vc-blue-600:#225BAA;
  --vc-gold-deep:#7a4f00;                 /* AA-contrast gold text on the gold tint */
  --vc-ink:#1a1a1a; --vc-gray:#4a4f54; --vc-muted:#5f6368;  /* all ≥4.5:1 on white */
  --vc-line:#dee2e6; --vc-white:#ffffff;
  --vc-font-display:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --vc-font-body:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --vc-font-label:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
* { box-sizing: border-box; }
body { font-family: var(--vc-font-body); color: var(--vc-ink); margin: 0; background: #fff; }

/* Full-width / responsive (fills the iframe). Prose is capped separately. */
.container { padding: 20px; max-width: 100%; margin: 0 auto; }

/* Visible focus for everyone (2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible,
[role="option"]:focus-visible, #map:focus-visible {
  outline: 3px solid var(--vc-blue-700);
  outline-offset: 2px;
}

/* 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;
}

/* Keep prose readable (~72 chars/line) even though the layout is full-width. */
.map-help { max-width: 72ch; }

/* --- Search --- */
.search-wrap { position: relative; }
.search-container {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--vc-line); border-radius: .375rem; padding: 6px;
}
.search-container:focus-within { border-color: var(--vc-blue-600); box-shadow: 0 0 0 3px rgba(35,85,150,.3); }
#search-input {
  flex: 1; border: 0; padding: 12px 14px; font-size: 16px; font-family: var(--vc-font-body);
  outline: none; background: transparent; color: var(--vc-ink);
}
#search-input::placeholder { color: var(--vc-muted); }
#search-button {
  background: var(--vc-blue-900); color: #fff; border: 0; border-radius: 6px;
  padding: 12px 22px; font-family: var(--vc-font-display); font-weight: 600; font-size: 15px; cursor: pointer;
}

/* --- Autocomplete (ARIA combobox listbox) --- */
#suggestion-list {
  /* Above Leaflet's map controls (z-index 1000). */
  list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; z-index: 2000; width: 100%;
  background: #fff; border: 1px solid var(--vc-line); border-radius: .375rem;
  box-shadow: 0 8px 20px rgba(16,24,40,.12); max-height: 320px; overflow-y: auto;
}
#suggestion-list[hidden] { display: none; }
.group-label {
  font-family: var(--vc-font-label); font-weight: 700; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--vc-gray); padding: 8px 10px 4px;
}
[role="option"] {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px;
  border-radius: 4px; cursor: pointer; font-size: 14px;
}
[role="option"]:hover, [role="option"].active { background: #eef3f9; color: var(--vc-blue-900); }
[role="option"] .apn { font-weight: 700; }

/* --- Status / loading / error (4.1.3) --- */
#loading { margin: 12px 0; color: var(--vc-blue-700); font-weight: 600; }
#loading[hidden] { display: none; }
#error {
  margin: 12px 0; padding: 12px 14px; border-left: 4px solid #b3261e; background: #fce8e6;
  color: #7a1b13; border-radius: 4px;
}
#error[hidden] { display: none; }

/* --- Report (description list) --- */
.report { margin: 20px 0; border: 1px solid var(--vc-line); border-radius: .375rem; padding: 1.25rem; }
.report[hidden] { display: none; }
.report-heading { font-family: var(--vc-font-display); font-size: 1rem; margin: 0 0 12px; color: var(--vc-ink); }
.report-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 16px 28px; margin: 0;
}
.report-grid > div { min-width: 0; }
dt {
  font-family: var(--vc-font-label); font-weight: 700; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--vc-gray); margin-bottom: 6px;
}
dd { margin: 0; font-size: 15px; color: var(--vc-ink); }
dd.highlight { font-family: var(--vc-font-display); font-weight: 600; font-size: 18px; color: var(--vc-blue-700); font-variant-numeric: tabular-nums; }
dd.muted { color: var(--vc-muted); }
.chip { display: inline-block; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 13px; }
.chip-zone { background: rgba(35,85,150,.12); color: var(--vc-blue-900); }
.chip-overlay { background: rgba(223,153,13,.20); color: var(--vc-gold-deep); }
.chip-list { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* --- Map --- */
.map-help { color: var(--vc-gray); font-size: .9rem; margin: 20px 0 8px; }
#map { height: 400px; border: 1px solid var(--vc-line); border-radius: .375rem; }

/* Respect reduced motion (2.3.1) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}