/* =============================================================
   Fairfield County Auditor's Office — GIS Data Downloads
   Matches the Engineer's Office stylesheet system.
   ============================================================= */
:root {
  --navy:      #032949;
  --navy-2:    #063a66;
  --gold:      #e6a91d;
  --gold-bright:#f7c331;
  --ink:       #1d1d1f;
  --body:      #3a3f45;
  --muted:     #6b7178;
  --line:      #e3e6ea;
  --canvas:    #f6f8fa;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1300px;
  --gutter: clamp(20px, 4vw, 48px);
  --shadow-sm: 0 1px 2px rgba(18,28,45,.06), 0 2px 8px rgba(18,28,45,.05);
  --shadow-md: 0 6px 24px rgba(3,41,73,.12);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font-family: var(--font); font-size:17px; line-height:1.6; color: var(--body); background:#fff; -webkit-font-smoothing: antialiased; }
img { max-width:100%; display:block; }
h1,h2,h3,h4,p,ul { margin:0; }
ul { list-style:none; padding:0; }
button { font: inherit; cursor: pointer; }
a { color: var(--navy-2); }
a:hover { color: var(--navy); }
.wrap { width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--gutter); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background: var(--gold); color:#1b1b1b; font-weight:700; padding:12px 20px; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }

/* ---------- header ---------- */
.site-header { position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--line); box-shadow: var(--shadow-sm); }
.header-inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:92px; }
.brand { display:flex; align-items:center; gap:16px; text-decoration:none; color: var(--navy); flex-shrink:0; white-space:nowrap; }
.brand img { width:118px; height:auto; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.b-kicker { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#34557a; font-weight:700; }
.b-name { font-size:21px; font-weight:800; color: var(--navy); letter-spacing:-.01em; }

.nav-list { display:flex; align-items:stretch; gap:4px; }
.nav-link { display:inline-flex; align-items:center; padding:10px 14px; border-radius:8px; white-space:nowrap; font-size:13.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--navy); text-decoration:none; transition: background .15s, color .15s; }
.nav-link:hover { background: var(--navy); color:#fff; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background: var(--navy); border:0; border-radius:8px; padding:11px 13px; }
.nav-toggle span { width:22px; height:2.5px; background:#fff; border-radius:2px; }

@media (max-width: 1220px) {
  .nav-toggle { display:flex; }
  .primary-nav { position:absolute; top:100%; left:0; right:0; z-index:90; display:none; }
  .primary-nav.open { display:block; }
  .nav-list { flex-direction:column; gap:0; align-items:stretch; padding:10px var(--gutter) 20px; background:#fff; border-bottom:1px solid var(--line); box-shadow: var(--shadow-md); }
  .nav-link { width:100%; }
}

/* ---------- page hero ---------- */
.page-hero { background: var(--navy); color:#fff; }
.page-hero-inner { padding-block: clamp(28px, 4vw, 46px); }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.85); margin-bottom:14px; }
.breadcrumb a { color:#fff; text-decoration:none; }
.breadcrumb a:hover { color: var(--gold-bright); }
.breadcrumb .sep { color:rgba(255,255,255,.62); }
.page-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight:800; line-height:1.1; letter-spacing:-.015em; text-transform:uppercase; }
.page-hero .lede { margin-top:12px; max-width:760px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.85); }

/* ---------- body ---------- */
.page-body { padding-block: clamp(36px, 5vw, 60px); }
.top-grid { display:grid; grid-template-columns: minmax(0,1fr) 380px; gap: clamp(26px, 4vw, 48px); align-items:start; }
.what-gis { font-size:19px; font-weight:800; color: var(--ink); letter-spacing:-.01em; margin-bottom:14px; }
.bullets { list-style:disc; padding-left:1.3em; font-size:16.5px; line-height:1.7; color: var(--body); }
.bullets li { margin-top:.5em; }
.note-card { background: var(--canvas); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:10px; padding:22px 24px; }
.note-label { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--navy-2); font-weight:800; margin-bottom:10px; }
.note-card p { font-size:15.5px; line-height:1.65; color: var(--body); }

.band { margin-top:44px; background: var(--navy); color:#fff; border-radius:10px; padding:14px 20px; font-size:20px; font-weight:700; }
.subhead { margin-top:34px; font-size:16px; font-weight:800; color: var(--navy-2); letter-spacing:.05em; text-transform:uppercase; }

.dl-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin-top:10px; }
.dl-grid--single { grid-template-columns:1fr; margin-top:6px; }
.dl-grid > a,
.dl-row-static { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 8px; border-bottom:1px solid var(--line); font-size:15.5px; font-weight:600; color: var(--ink); text-decoration:none; }
.dl-grid > a:hover { color: var(--navy-2); background: var(--canvas); }
.dl-grid .meta { font-size:12.5px; color: var(--muted); white-space:nowrap; }
.dl-grid em { font-style:normal; font-weight:500; color: var(--muted); }
.dl-row-static { justify-content:flex-start; gap:8px; }
.dl-row-static a { color: var(--navy-2); text-decoration:underline; text-underline-offset:2px; }

.cama { margin-top:16px; }
.doc-download { display:inline-flex; align-items:center; gap:10px; background: var(--navy); color:#fff; font-weight:700; font-size:15px; padding:12px 20px; border-radius:9px; text-decoration:none; }
.doc-download:hover { background: var(--navy-2); color:#fff; }
.disclaimer-body { margin-top:26px; max-width:1000px; font-size:14.5px; line-height:1.7; color: var(--muted); }
.disclaimer-body strong { color: var(--body); }

/* ---------- real estate band ---------- */
.search-band { background: var(--navy); padding-block: clamp(34px,5vw,52px); text-align:center; }
.search-band a { color:#fff; font-size: clamp(24px,3.4vw,35px); font-weight:800; letter-spacing:-.01em; text-decoration:none; }
.search-band a:hover { color: var(--gold-bright); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color:#fff; }
.footer-top { padding-block: clamp(40px,5vw,58px); display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; border-top:1px solid rgba(255,255,255,.12); }
.footer-brand { display:flex; flex-direction:column; gap:16px; }
.footer-brand img { width:168px; height:auto; background:#fff; border-radius:8px; padding:10px 12px; }
.footer-brand p { font-size:13.5px; color:rgba(255,255,255,.78); line-height:1.6; max-width:260px; }
.footer-col h3 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); font-weight:800; margin-bottom:14px; }
.footer-col a { display:block; padding:6px 0; font-size:14.5px; color:rgba(255,255,255,.92); text-decoration:none; }
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding-block:22px; display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; }
.footer-bottom .copyright { font-size:13.5px; color:rgba(255,255,255,.82); }
.footer-bottom .disclaimer { font-size:12px; color:rgba(255,255,255,.72); max-width:640px; line-height:1.55; }
.footer-bottom a { color:rgba(255,255,255,.88); text-decoration:none; border-bottom:1px solid rgba(247,195,49,.45); }
.footer-bottom a:hover { color: var(--gold-bright); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .top-grid { grid-template-columns:1fr; gap:26px; }
  .dl-grid { grid-template-columns:1fr; gap:0; }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width: 700px) {
  body { font-size:16px; }
  .header-inner { gap:12px; min-height:78px; }
  .brand { flex-shrink:1; min-width:0; gap:10px; white-space:normal; }
  .brand img { width:74px; }
  .b-name { font-size:17px; }
  .b-kicker { font-size:11px; }
  .nav-toggle { flex-shrink:0; }
  .footer-top { grid-template-columns:1fr; gap:28px; }
  .band { font-size:18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }