/* ===== Design tokens v1 (RVMax) ===== */
:root{
  /* Brand */
  --brand-900:#0B1C5A;
  --brand-700:#1E3A8A;
  --brand-500:#0EA5E9;
  --accent-500:#10B981;

  /* Base colors */
  --ink:#0F172A;         /* primary text */
  --fg: var(--ink);      /* alias for older rules */
  --muted:#64748B;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --line:#E2E8F0;

  /* Layout */
  --max:1100px;
  --radius:14px;
  --shadow:0 6px 20px rgba(2,6,23,.06);

  /* Spacing scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px;

  /* Type scale */
  --h1:clamp(28px,2.6vw,40px);
  --h2:22px; --h3:20px;
  --text:16px; --small:14px;

  /* Buttons */
  --btn-h:44px; --btn-r:10px;

  /* CTAs + focus */
  --phone:#1E3A8A;
  --site:#0EA5E9;
  --focus:#10B981;

  /* Fonts (loaded in HTML) */
  --font-head: Manrope, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.45;
}

main { max-width: var(--max); margin: 2rem auto; padding: 1rem; }

/* ===== Header / branding ===== */
.site-header { display:flex; align-items:center; gap:12px; margin: 1rem auto 1rem; max-width: var(--max); padding: 0 1rem; }
.site-header .brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.site-header .brand-text { font-weight:700; font-size:1.25rem; color:#111; }
.page-subtitle { margin:0; font-size:1rem; color:#666; }
.logo { width: clamp(140px, 18vw, 220px); height:auto; display:block; }
img, svg { max-width:100%; height:auto; }

/* ===== Filters ===== */
.filters { display:flex; gap:.75rem; flex-wrap:wrap; margin: 0 0 1rem; }
input[type="search"], select {
  padding: .6rem .7rem;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:#fff;
}

/* ===== Grid & cards ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .9rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}

.card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.card .muted { color: var(--muted); font-size: .95rem; }
.card a { display:inline-block; margin-top:.6rem; font-size: .95rem; }

/* ===== Helper ===== */
.muted { color: var(--muted); }

/* ===== Type scale (light touch) ===== */
h1,h2,h3{
  margin:0 0 var(--space-3);
  line-height:1.2;
  font-family: var(--font-head, Manrope, Inter, system-ui, sans-serif);
  color: var(--fg);
}
h1{ font-size: var(--h1); font-weight:700; }
h2{ font-size: var(--h2); font-weight:700; }
h3{ font-size: var(--h3); font-weight:700; }

/* ===== Dealer card + CTAs (new, non-breaking) ===== */
.dealer-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-6);
}
.dealer-card h3{ margin:0 0 var(--space-2); }
.dealer-meta{ color:var(--muted); font-size:var(--small); margin-bottom:var(--space-4); }

.actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--btn-h); padding:0 16px; border-radius:var(--btn-r);
  font-weight:600; text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--phone); color:#fff; }
.btn-ghost{ background:#fff; color:var(--site); border-color:var(--site); }
.btn:hover{ filter:saturate(1.08); }
.btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

.icon{ width:18px; height:18px; display:inline-block; }

/* ===== Accessibility helper ===== */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--space-4)}
.chip{
  display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);text-decoration:none;font-weight:600;font-size:14px;
  color:var(--ink)
}
.chip:hover{border-color:var(--site)}
.chip.is-active{border-color:var(--phone);box-shadow:0 0 0 2px rgba(14,165,233,.15)}

#city-links{ margin-bottom: var(--space-4); }

/* Chip polish */
.chip{ cursor:pointer; }
.chip:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
#top-states .chip.is-active{
  border-color:var(--phone);
  box-shadow:0 0 0 3px rgba(30,58,138,.10);
}
#city-links .chip:hover{ border-color:var(--site); }


#site-footer{ margin-top:24px; padding-bottom:24px; }
#site-footer .footer-legal{ margin-top:16px; color:var(--muted); font-size:var(--small); }
#site-footer .footer-legal p{ margin:4px 0; }
#site-footer a{ color:var(--site); text-decoration:none; }
#site-footer a:hover{ text-decoration:underline; }


.page-subtitle{ color:var(--muted); font-weight:600; letter-spacing:.2px; }

/* Button hover/active with AA contrast */
.btn-primary{ background: var(--phone); color:#fff; }
.btn-primary:hover{ background:#1A357C; }   /* darker than #1E3A8A for clear hover */
.btn-primary:active{ background:#162F6D; }

.btn-ghost{
  background:#fff; color:var(--site); border-color:var(--site);
}
.btn-ghost:hover{
  background:#F0F9FF; border-color:#0284C7; color:#0284C7; /* still readable */
}

/* Header layout after removing brand text */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--max);margin:20px auto 8px;padding:0 16px;}
.brand{display:inline-flex;align-items:center;text-decoration:none;}
.logo{display:block;max-width:100%;height:auto;}

.header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.page-subtitle{color:var(--muted);font-weight:600;letter-spacing:.2px;margin:0;}
.header-links a{color:var(--site);text-decoration:none;font-weight:600;}
.header-links a:hover{text-decoration:underline;}

/* Tighten hero spacing a touch */
main h1{margin-top:8px;margin-bottom:12px;}

/* Small screens: keep it clean */
@media (max-width:640px){
  .site-header{margin:12px auto 4px;}
  .logo{width:180px;}
  .header-right{gap:8px;}
  .page-subtitle{font-size:14px;line-height:1.3}
}
@media (max-width:420px){
  .logo{width:160px;}
  .page-subtitle{display:none;} /* hide tagline on very small screens */
}

/* About / info card */
.about-card{
  margin: 8px 0 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.about-card > summary{
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}
.about-card > summary::-webkit-details-marker{ display:none; }
.about-card > summary:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }
.about-card[open]{ box-shadow: var(--shadow); }
.about-card p{ margin: 8px 0 0; }
.small{ font-size: var(--small); }