/* ============================================================================
   DashLightCode.com — clean, trustworthy automotive reference UI
   Audience: worried drivers looking for a fast, credible answer.
   Design: light surface, solid navy "dashboard" header, amber warning accent,
   semantic urgency colours, strong readable typography.
   ========================================================================== */
:root{
  --ink:#0f1c2e;          /* headings / navy header */
  --ink-2:#1c2c42;
  --text:#26313f;         /* body text */
  --muted:#5c6b7e;        /* secondary text */
  --bg:#f4f6f9;           /* page background */
  --surface:#ffffff;      /* cards */
  --surface-2:#f8fafc;
  --line:#e2e8f0;         /* borders */
  --line-2:#cfd8e3;
  --brand:#1b4b8f;        /* trustworthy blue */
  --brand-dark:#143a72;
  --accent:#e8871e;       /* warning amber */
  --green:#1a8a4a; --amber:#c9760a; --red:#c62828; --blue:#1d6fb8;
  --radius:12px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(15,28,46,.06),0 8px 24px rgba(15,28,46,.06);
  --shadow-sm:0 1px 2px rgba(15,28,46,.08);
  --maxw:1040px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.7 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:22px}
h1,h2,h3{color:var(--ink); line-height:1.25; letter-spacing:-.012em; font-weight:800}
h1{font-size:clamp(1.75rem,4vw,2.5rem); margin:.15em 0 .35em}
h2{font-size:clamp(1.3rem,2.6vw,1.7rem); margin:1.7em 0 .55em}
h3{font-size:1.06rem}
p{margin:.5em 0 .9em}
img,svg{max-width:100%}
code{background:var(--surface-2); border:1px solid var(--line); padding:.08em .42em;
  border-radius:6px; font-size:.9em; color:var(--ink)}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:12px; top:12px; background:var(--brand); color:#fff; padding:8px 14px; border-radius:8px; z-index:50}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:20; background:var(--ink);
  border-bottom:3px solid var(--accent)}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.16rem; color:#fff}
.brand:hover{text-decoration:none}
.brand__mark{width:34px; height:34px; color:var(--ink); display:grid; place-items:center;
  background:var(--accent); border-radius:9px}
.brand__mark svg{width:21px; height:21px}
.brand__text{color:#fff}
.brand__text::after{content:".com"; color:#8ea3bd; font-weight:600}
.site-nav{display:flex; gap:26px; font-weight:600; font-size:.95rem}
.site-nav a{color:#c6d2e2}
.site-nav a:hover{color:#fff; text-decoration:none}

/* ---------- footer ---------- */
.site-footer{margin-top:72px; background:var(--ink); color:#c6d2e2; padding:40px 0 26px}
.site-footer__inner{display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between}
.site-footer__brand strong{color:#fff; font-size:1.1rem}
.site-footer__brand p{color:#8ea3bd; margin:.35em 0 0; max-width:340px}
.site-footer__nav{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:flex-start}
.site-footer__nav a{color:#c6d2e2}
.site-footer__nav a:hover{color:#fff}
.site-footer__legal{margin-top:24px; padding-top:20px; border-top:1px solid #22344c}
.site-footer__legal p{color:#8194ac; font-size:.84rem; margin:0}

/* ---------- hero / home ---------- */
.hero{padding:60px 22px 26px; text-align:center; max-width:820px; margin-inline:auto}
.hero__title{margin:0 auto .35em; max-width:15ch}
.hero__sub{color:var(--muted); font-size:1.08rem; max-width:62ch; margin:0 auto 30px}
.finder{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:end;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); max-width:780px; margin:0 auto; text-align:left}
.finder .btn{grid-column:1 / -1; width:100%}
.finder__field select[disabled]{opacity:.6; cursor:not-allowed}
.section__lead{color:var(--muted); margin:-.2em 0 1.1em}
.finder__field{display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:600;
  color:var(--muted); text-transform:uppercase; letter-spacing:.03em}
.finder__field input,.finder__field select{
  background:#fff; border:1px solid var(--line-2); color:var(--text);
  border-radius:var(--radius-sm); padding:12px 13px; font-size:1rem; font-weight:400;
  text-transform:none; letter-spacing:0}
.finder__field input:focus,.finder__field select:focus{outline:2px solid var(--brand); border-color:var(--brand)}
.finder__hint{color:var(--muted); font-size:.88rem; margin-top:14px; text-align:center}

.btn{display:inline-block; border:1px solid transparent; border-radius:var(--radius-sm);
  padding:13px 20px; font-weight:700; cursor:pointer; font-size:1rem; transition:.15s}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{background:var(--brand-dark); text-decoration:none}

.section{margin-top:50px}

/* ---------- light grid ---------- */
.light-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.light-card{display:flex; flex-direction:column; gap:7px; padding:18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); color:var(--text);
  box-shadow:var(--shadow-sm); transition:.15s}
.light-card:hover{border-color:var(--brand); transform:translateY(-2px); text-decoration:none;
  box-shadow:var(--shadow)}
.light-card__icon{width:46px; height:46px; display:grid; place-items:center; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--line)}
.light-card__icon svg{width:28px; height:28px}
.light-card__name{font-weight:700; color:var(--ink)}
.light-card__meta{color:var(--muted); font-size:.83rem}

/* urgency icon colours */
.icon--critical{color:var(--red)} .icon--high{color:var(--amber)}
.icon--medium{color:var(--amber)} .icon--low{color:var(--green)}

/* ---------- chips ---------- */
.chip-grid{display:flex; flex-wrap:wrap; gap:9px}
.chip{background:var(--surface); border:1px solid var(--line-2); color:var(--brand);
  padding:8px 14px; border-radius:999px; font-size:.9rem; font-weight:600; box-shadow:var(--shadow-sm)}
.chip:hover{border-color:var(--brand); background:var(--brand); color:#fff; text-decoration:none}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted);
  font-size:.86rem; margin:24px 0 8px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--brand)}

/* ---------- article ---------- */
.article{max-width:800px}
.article__hero{display:flex; gap:20px; align-items:center; padding:14px 0 10px;
  border-bottom:1px solid var(--line); margin-bottom:6px}
.article__icon{width:76px; height:76px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm)}
.article__icon svg{width:46px; height:46px}
.article__lead{color:var(--muted); margin:.35em 0 0; font-size:1.05rem}
.hub-hero{padding:8px 0 6px}
.hub-hero p{color:var(--muted); max-width:66ch; font-size:1.05rem}

.urgency-badge{display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; padding:4px 11px; border-radius:999px; margin-bottom:8px}
.urgency-badge--critical{background:#fdecec; color:#a51f1f; border:1px solid #f3bcbc}
.urgency-badge--high{background:#fdf1e2; color:#9a5a05; border:1px solid #f2d3a0}
.urgency-badge--medium{background:#fdf6e7; color:#8a6209; border:1px solid #f0dfa8}
.urgency-badge--low{background:#e8f6ee; color:#136c3a; border:1px solid #bfe4cd}

.prose p{color:var(--text)}
.prose--page{max-width:74ch}
.center{text-align:center; margin-inline:auto}
.ticks{list-style:none; padding:0; margin:.6em 0}
.ticks li{position:relative; padding-left:30px; margin:.5em 0}
.ticks li::before{content:""; position:absolute; left:2px; top:.35em; width:18px; height:18px;
  background:var(--brand); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat}
.steps{margin:.6em 0; padding:0; counter-reset:step; list-style:none}
.steps li{position:relative; padding:6px 0 6px 44px; margin:.35em 0; min-height:32px}
.steps li::before{counter-increment:step; content:counter(step); position:absolute; left:0; top:4px;
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:800; font-size:.85rem}

/* ---------- byline (E-E-A-T) ---------- */
.byline{display:flex; gap:13px; align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 16px; margin:18px 0; box-shadow:var(--shadow-sm)}
.byline__avatar,.mechanic-tips__avatar,.bio__avatar{width:42px; height:42px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:50%; font-weight:800; color:#fff; background:var(--brand)}
.byline__authors{margin:0; font-size:.92rem; color:var(--text)}
.byline__date{margin:2px 0 0; color:var(--muted); font-size:.82rem}

/* ---------- DTC table ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.dtc-table{width:100%; border-collapse:collapse; font-size:.94rem; background:var(--surface)}
.dtc-table th,.dtc-table td{text-align:left; padding:13px 15px; border-bottom:1px solid var(--line); vertical-align:top}
.dtc-table tr:last-child th,.dtc-table tr:last-child td{border-bottom:0}
.dtc-table thead th{background:var(--ink); color:#c6d2e2; font-size:.76rem; text-transform:uppercase; letter-spacing:.05em}
.dtc-table tbody th{white-space:nowrap}
.dtc-table code{background:#eef4fb; border-color:#d3e2f2; color:var(--brand); font-weight:700}
.dtc-table span{color:var(--muted)}

/* ---------- mechanic tips ---------- */
.mechanic-tips{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:22px 24px; margin:28px 0; box-shadow:var(--shadow-sm)}
.mechanic-tips h2{margin-top:0}
.mechanic-tips__attr{display:flex; align-items:center; gap:11px; color:var(--muted); font-size:.9rem; margin-bottom:12px}
.tip{margin:11px 0; padding:14px 18px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; color:var(--text)}

/* ---------- faq ---------- */
.faq__item{border:1px solid var(--line); border-radius:var(--radius); padding:2px 18px; margin:10px 0;
  background:var(--surface); box-shadow:var(--shadow-sm)}
.faq__item summary{cursor:pointer; list-style:none; padding:14px 0}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{display:inline; font-size:1.04rem; margin:0}
.faq__item[open] summary h3{color:var(--brand)}
.faq__item[open] summary{border-bottom:1px solid var(--line)}
.faq__item p{color:var(--text); margin:14px 0}

/* ---------- related ---------- */
.related{margin-top:36px}

/* ---------- bio ---------- */
.bio{display:flex; gap:15px; margin:18px 0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm)}
.bio h3{margin:.1em 0}
.bio__role{color:var(--brand); font-weight:600; margin:.1em 0 .45em}

/* ---------- ads ---------- */
.ad-slot{margin:24px 0; min-height:90px; display:grid; place-items:center;
  background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--radius)}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .finder{grid-template-columns:1fr}
  .site-nav{gap:16px; font-size:.9rem}
  .article__icon{width:60px; height:60px}
  .article__icon svg{width:36px; height:36px}
  .hero{padding-top:40px}
}