/* ==========================================================================
   Be EV Wise guide pages (/ev-wise/...): Be Wise family look (October 2026)
   Matches the restyled Be EV Wise app (bw-family-ev-wise.css) and the
   bewiseapps.com home page: deep navy + coral, Newsreader headings,
   Public Sans text, white cards on a cool grey page.
   APPEARANCE ONLY. Loaded after ev-wise-pages.css and /bw-nav.css and
   overrides them; no wording, links or behaviour are changed.
   The identifying colour (electric blue) is set in each page as --bw-accent
   and is used only for the line under the header, the line on top of the
   footer and the small mark before the breadcrumb label.
   No green anywhere: "good" / battery colours are blue #2C5E8C.
   ========================================================================== */

:root{
  --bw-ink:#14213D;          /* deep navy */
  --bw-harbour:#1B2A4A;      /* logo navy */
  --bw-night:#0D1629;        /* top strips */
  --bw-coral:#E4572E;
  --bw-coral-strong:#C2461F;
  --bw-coral-hover:#A63B19;
  --bw-coral-soft:#FCF1EC;
  --bw-mist:#EEF1F6;
  --bw-tint:#F6F8FB;
  --bw-rule:#D9DFE8;
  --bw-rule-strong:#C3CCD9;
  --bw-steel:#56637A;
  --bw-text:#3E4A63;
  --bw-blue:#2C5E8C;         /* replaces green */
  --bw-blue-bg:#E7EFF8;
  --bw-accent:#3A7BD5;       /* set again in the page */

  /* Re-point the guide stylesheet's own tokens at the family palette */
  --ink:#14213D;
  --ink-soft:#3E4A63;
  --paper:#EEF1F6;
  --raised:#FFFFFF;
  --signal:#C2461F;
  --signal-dark:#A63B19;
  --signal-soft:#FCF1EC;
  --charge:#2C5E8C;
  --charge-soft:#E7EFF8;
  --amber:#56637A;
  --amber-soft:#F6F8FB;
  --flag:#A23B3B;
  --flag-soft:#F8ECEA;
  --rule:#D9DFE8;
  --rule-strong:#C3CCD9;
  --focus:#2C5E8C;
  --font-head:"Newsreader", Georgia, "Times New Roman", serif;
  --font-body:"Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --r:4px;
}

/* ---------- Base ---------- */
html{ background:var(--bw-mist); }
body{ background:var(--bw-mist); color:var(--bw-ink); font-family:var(--font-body); line-height:1.65; }
a{ color:var(--bw-blue); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }
:focus-visible{ outline:3px solid var(--bw-coral); outline-offset:2px; }

/* ---------- "Be Wise Apps" strip (from bw-nav) and disclaimer bar ---------- */
.bw-strip{ background:var(--bw-night); border-bottom:1px solid rgba(255,255,255,0.08); }
.dis-bar{ background:var(--bw-night); color:rgba(255,255,255,0.82); font-size:.8rem; line-height:1.45; }
.dis-bar strong{ color:#FFFFFF; }

/* ---------- Header: navy with the electric-blue line ---------- */
.masthead{ background:var(--bw-ink); border-bottom:3px solid var(--bw-accent); }
.mast-row{ padding-top:12px; padding-bottom:12px; }
.wordmark{ color:#FFFFFF; }
.wordmark .name{ font-family:var(--font-head); font-weight:600; font-size:1.4rem; letter-spacing:-0.005em; color:#FFFFFF; white-space:nowrap; }
.wordmark .juris{ color:#FFFFFF; border-color:rgba(255,255,255,0.35); border-radius:4px; }
.snav a{ color:rgba(255,255,255,0.84); font-weight:500; border-radius:4px; }
.snav a:hover, .snav a:focus-visible{ background:rgba(255,255,255,0.1); color:#FFFFFF; }

/* ---------- Article column ---------- */
main{ padding:30px 0 56px; }
.page{ max-width:1060px; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; font-size:.82rem; color:var(--bw-steel); margin:0 0 16px; line-height:1.5; }
.crumbs::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); flex-shrink:0; margin-right:6px; }
.crumbs a{ color:var(--bw-steel); text-decoration:underline; text-decoration-color:var(--bw-rule-strong); }
.crumbs a:hover{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }

h1,h2,h3,h4{ font-family:var(--font-head); color:var(--bw-ink); }
.page h1{ font-weight:500; font-size:clamp(2rem,4.2vw,2.75rem); line-height:1.1; letter-spacing:-0.015em; margin:0 0 .45em; max-width:30ch; }
.page h2{ font-weight:500; font-size:clamp(1.45rem,2.8vw,1.8rem); line-height:1.2; letter-spacing:-0.01em; margin:1.9em 0 .55em; }
.page h3{ font-weight:600; font-size:1.2rem; line-height:1.3; margin:1.5em 0 .4em; }
.page h4{ font-weight:600; }

.page p{ color:var(--bw-text); line-height:1.65; max-width:70ch; }
.page .lede{ font-size:1.13rem; line-height:1.6; color:var(--bw-text); max-width:64ch; margin-bottom:1.2em; }
.page ul, .page ol{ color:var(--bw-text); line-height:1.65; max-width:70ch; padding-left:1.25em; }
.page li{ margin-bottom:.45em; }
.page li::marker{ color:var(--bw-steel); }
.page strong{ color:var(--bw-ink); font-weight:600; }
.updated, .page p.updated{ font-size:.82rem; line-height:1.55; color:var(--bw-steel); max-width:78ch; }
.small.muted, .page p.small.muted{ font-size:.84rem; line-height:1.55; color:var(--bw-steel); }

/* ---------- Spec and price tables ---------- */
.tbl{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; margin:16px 0 12px; box-shadow:none; -webkit-overflow-scrolling:touch; }
.tbl table{ font-size:.88rem; line-height:1.45; border-collapse:separate; border-spacing:0; }
.tbl th, .tbl td{ padding:10px 14px; border-bottom:1px solid #E6EAF0; }
.tbl th{
  background:var(--bw-tint); color:var(--bw-steel); font-family:var(--font-body);
  font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; line-height:1.35;
  border-bottom:1px solid var(--bw-rule-strong); vertical-align:bottom;
}
.tbl td{ color:var(--bw-text); }
.tbl td:first-child{ color:var(--bw-ink); font-weight:600; }
.tbl tbody tr:nth-child(even) td{ background:#FAFBFD; }
.tbl tbody tr:hover td{ background:var(--bw-blue-bg); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl td a{ color:var(--bw-blue); font-weight:600; }
.tbl tr:target td{ background:var(--bw-coral-soft); }

/* Wide model / version tables (7+ columns): keep figures on one line, name column stays in view while scrolling */
.tbl table:has(th:nth-child(8):last-child) td:not(:first-child),
.tbl table:has(th:nth-child(10)) td:is(:nth-child(3),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10)),
.tbl table:has(th:nth-child(7):last-child) td:is(:nth-child(2),:nth-child(3),:nth-child(7)){ white-space:nowrap; }
.tbl table:has(th:nth-child(10)) td:is(:nth-child(4),:nth-child(5),:nth-child(6)),
.tbl table:has(th:nth-child(7):last-child) td:is(:nth-child(4),:nth-child(5),:nth-child(6)){ min-width:8.2em; }
/* 10-column manufacturer tables: slightly tighter so they fit the page width on a laptop */
.tbl table:has(th:nth-child(10)){ font-size:.85rem; }
.tbl table:has(th:nth-child(10)) :is(th,td){ padding:10px 10px; }
.tbl table:has(th:nth-child(10)) :is(th,td):first-child{ padding-left:14px; }
.tbl table:has(th:nth-child(7)) th:first-child,
.tbl table:has(th:nth-child(7)) td:first-child{ position:sticky; left:0; z-index:1; box-shadow:inset -1px 0 0 var(--bw-rule); }
.tbl table:has(th:nth-child(7)) th:first-child{ background:var(--bw-tint); z-index:2; }
.tbl table:has(th:nth-child(7)) td:first-child{ background:#FFFFFF; min-width:150px; }
.tbl table:has(th:nth-child(7)) tbody tr:nth-child(even) td:first-child{ background:#FAFBFD; }
.tbl table:has(th:nth-child(7)) tbody tr:hover td:first-child{ background:var(--bw-blue-bg); }
.tbl table:has(th:nth-child(7)) tbody tr:target td:first-child{ background:var(--bw-coral-soft); }

/* Guide price column: firm navy figures */
.tbl table:has(th:nth-child(10)) td:nth-child(4),
.tbl table:has(th:nth-child(7):last-child) td:nth-child(4),
.tbl table:has(th:nth-child(8):last-child) td:nth-child(2){ color:var(--bw-ink); font-weight:600; }

/* ---------- Callouts (no cream, no green) ---------- */
.note{ background:var(--bw-tint); border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour); color:var(--bw-ink); border-radius:0 8px 8px 0; padding:12px 16px; font-size:.92rem; line-height:1.6; max-width:78ch; }
.note.info{ background:var(--bw-blue-bg); border-color:#C9D9EA; border-left-color:var(--bw-blue); color:var(--bw-ink); }
.note.bad{ background:var(--bw-coral-soft); border-color:#F0D3C7; border-left-color:var(--bw-coral-strong); color:#5B1E1E; }
.note p{ color:inherit; max-width:none; line-height:1.6; }
.note strong{ color:inherit; }

/* ---------- FAQ accordions ---------- */
details.q{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; margin:8px 0; max-width:none; }
details.q summary{ font-weight:600; color:var(--bw-ink); padding:14px 18px; align-items:center; line-height:1.4; border-radius:8px; }
details.q summary:hover{ background:var(--bw-tint); }
details.q summary::after{ color:var(--bw-coral-strong); font-weight:400; flex-shrink:0; }
details.q[open]{ border-color:var(--bw-rule-strong); }
details.q[open] summary{ border-bottom:1px solid #E6EAF0; border-radius:8px 8px 0 0; margin-bottom:12px; }
details.q p{ padding:0 18px; margin:0 0 16px; color:var(--bw-text); line-height:1.65; max-width:72ch; }

/* ---------- Link grids (manufacturers, guides, rivals) ---------- */
.page ul.linkgrid, ul.linkgrid{ padding-left:0; max-width:none; gap:8px; margin:12px 0 16px; }
.linkgrid li{ margin:0; }
.linkgrid a{
  height:100%; background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:6px;
  padding:11px 14px; color:var(--bw-ink); font-weight:600; font-size:.92rem; line-height:1.4;
  text-decoration:none; transition:border-color .15s, box-shadow .15s;
}
.linkgrid a:hover, .linkgrid a:focus-visible{ border-color:var(--bw-harbour); color:var(--bw-ink); box-shadow:0 2px 8px rgba(20,33,61,0.08); }
.linkgrid small{ color:var(--bw-steel); font-weight:400; font-size:.8rem; margin-top:2px; }

/* ---------- Source lists ---------- */
.page ul.srcs{ font-size:.88rem; line-height:1.55; }
.page ul.srcs a{ overflow-wrap:anywhere; }

/* ---------- "Keep going" panel and buttons ---------- */
.keep{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; padding:22px 24px; margin:36px 0 24px; }
.keep h2{ font-weight:500; font-size:1.5rem; margin:0 0 .35em; }
.keep p{ margin-bottom:.6em; }
.cta-row{ gap:10px; }
.btn{ border-radius:4px; border:1px solid var(--bw-ink); background:var(--bw-ink); color:#FFFFFF; padding:11px 19px; font-weight:600; font-family:var(--font-body); text-decoration:none; }
.btn:hover{ background:var(--bw-harbour); border-color:var(--bw-harbour); color:#FFFFFF; }
.btn.signal{ background:var(--bw-coral-strong); border-color:var(--bw-coral-strong); color:#FFFFFF; }
.btn.signal:hover{ background:var(--bw-coral-hover); border-color:var(--bw-coral-hover); color:#FFFFFF; }
.btn.ghost{ background:#FFFFFF; color:var(--bw-ink); border-color:var(--bw-rule-strong); }
.btn.ghost:hover{ background:var(--bw-mist); border-color:var(--bw-harbour); color:var(--bw-ink); }

/* ---------- Bottom "Back" / "Back to Top" (bw-nav) ---------- */
.bw-bottom{ color:var(--bw-steel); }

/* ---------- Footer: navy with the electric-blue line ---------- */
footer{ background:var(--bw-ink); color:rgba(255,255,255,0.72); border-top:3px solid var(--bw-accent); line-height:1.6; }
footer a{ color:#FFFFFF; text-decoration-color:var(--bw-coral); text-underline-offset:3px; }
footer a:hover{ color:#FFFFFF; }
.foot-brand{ font-family:var(--font-head); font-weight:600; font-size:1.2rem; color:#FFFFFF; }
.copy{ color:rgba(255,255,255,0.6) !important; }
.copy a{ text-decoration-color:rgba(255,255,255,0.4) !important; }

/* ---------- Phones ---------- */
@media (max-width:640px){
  .mast-row{ flex-wrap:wrap; row-gap:4px; padding:10px 16px 6px; }
  .wordmark .name{ font-size:1.3rem; }
  .snav{ width:100%; justify-content:flex-start; gap:0 2px; margin-left:-8px; }
  .snav a{ min-height:40px; padding:8px; font-size:.88rem; }
  main{ padding:22px 0 44px; }
  .wrap{ padding:0 16px; }
  .page h1{ font-size:2rem; }
  .page h2{ margin-top:1.7em; }
  .page .lede{ font-size:1.05rem; }
  .tbl th, .tbl td{ padding:9px 11px; }
  .tbl table:has(th:nth-child(7)) td:first-child{ min-width:128px; max-width:150px; }
  .keep{ padding:18px; }
  .cta-row .btn{ flex:1 1 auto; }
  details.q summary{ padding:13px 14px; }
  details.q p{ padding:0 14px; }
}