/* Family Law Cost Hub — "Trust Blue" theme (Direction A, 2026-10-31)
   GOV.UK + NerdWallet pattern: white edge-to-edge, sans everywhere,
   one accent blue, dark navy header, loud navy result panel.
   No external fonts, no images, so the site stays fast and private.
   All original class names are preserved, so calculators, results
   and the consent banner keep working. No gold, no beige. */
*{box-sizing:border-box}
:root{
  --blue:#1d70b8; --blue-dark:#003078; --navy:#0f2a44;
  --ink:#0b0c0c; --muted:#505a5f; --line:#b1b4b6;
  --grey:#f3f2f1; --card:#ffffff; --focus:#ffdd00;
}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;margin:0;color:var(--ink);line-height:1.6;background:#fff}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--blue-dark)}
:focus-visible{outline:3px solid var(--focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--ink)}
a:focus-visible{color:var(--ink);background:var(--focus);text-decoration:none}
::selection{background:var(--focus);color:var(--ink)}

/* Header — flat dark navy, no gradient, no gold rule */
header{background:var(--navy);color:#fff;padding:28px 22px 24px}
header a{color:#fff;text-decoration:none}
header strong{font-size:1.65em;letter-spacing:.2px}
header .tag{opacity:.9;font-size:1em;margin-top:6px;max-width:860px;color:#d5e6f3}

/* Sticky nav — plain white, blue underline on hover */
nav{background:#fff;border-bottom:1px solid var(--line);padding:12px 22px;display:flex;flex-wrap:wrap;gap:18px;font-size:.96em;position:sticky;top:0;z-index:50}
nav a{text-decoration:none;font-weight:600;color:var(--navy)}
nav a:hover{color:var(--blue);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:3px}

main{max-width:1100px;margin:0 auto;padding:28px 22px 48px;background:#fff}
h1{font-size:2em;line-height:1.2;color:var(--ink);margin:.2em 0 .4em}
h2{font-size:1.5em;color:var(--ink);margin-top:1.8em;padding-bottom:8px;border-bottom:1px solid var(--line)}
h3{font-size:1.18em;color:var(--ink);margin-top:1.2em}
p,li{font-size:1.02em}

/* Quick-answer box (Direction A pattern) — number/range first, guide second */
.quick-answer{background:#eaf2f8;border-left:5px solid var(--blue);padding:14px 18px;margin:18px 0}
.quick-answer p{margin:0}
.quick-answer b{font-size:1.15em}

/* Cards — plain border, no shadow, no hover lift (useless on touch) */
.card{border:1px solid var(--line);border-radius:4px;padding:18px;margin:18px 0;background:var(--card)}
.card h3{margin-top:0}
.card h3 a{text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.grid .card{margin:0}

/* Disclaimer, notes, author */
.disclaimer{background:var(--grey);border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:4px;padding:13px 16px;margin:16px 0}
.note{background:var(--grey);border-left:4px solid var(--blue);padding:12px 16px;margin:14px 0}
.author{background:var(--grey);border:1px solid var(--line)}
.byline{color:var(--muted);font-size:.95em}
.small{font-size:.92em;color:var(--muted)}
.crumbs{max-width:1100px;margin:0 auto;padding:14px 22px 0;font-size:.9em;color:var(--muted)}
.crumbs a{text-decoration:none}

/* Calculator — white panel, black 2px inputs, loud navy result */
.calc{background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px;margin:20px 0}
.calc h2,.calc h3{border-bottom:0;padding-bottom:0}
label{display:block;margin:12px 0 5px;font-weight:700;color:var(--ink)}
input,select{width:100%;padding:11px 12px;border:2px solid var(--ink);border-radius:0;font-size:1em;background:#fff;color:var(--ink)}
input:focus,select:focus{border-color:var(--ink);outline:3px solid var(--focus);box-shadow:inset 0 0 0 2px var(--ink)}
button{background:var(--blue);color:#fff;border:0;padding:12px 24px;border-radius:4px;font-size:1em;font-weight:700;cursor:pointer;margin-top:16px}
button:hover{background:var(--blue-dark)}
button:active{transform:translateY(1px)}
.result{background:var(--navy);color:#fff;border-radius:4px;padding:20px;margin-top:16px;font-size:1.08em}
.result b{font-size:1.5em;color:#fff}

/* Tables */
table{border-collapse:collapse;width:100%;margin:14px 0}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left}
th{background:var(--navy);color:#fff}
tr:nth-child(even) td{background:var(--grey)}

/* Footer — dark navy, matching the header */
footer{max-width:1100px;margin:0 auto;padding:26px 22px 34px;color:#fff;font-size:.92em;background:var(--navy)}
footer a{color:#fff}

/* Consent banner — keep its own contrast */
#consent-banner{position:fixed;left:0;right:0;bottom:0;background:var(--navy);color:#fff;padding:14px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;z-index:99}
#consent-banner p{margin:0;flex:1;min-width:260px}
#consent-banner button{background:#fff;color:var(--navy);border:0;padding:10px 18px;border-radius:4px;cursor:pointer;margin-top:0}
#consent-banner button:hover{background:var(--grey)}

@media(max-width:640px){
  header{padding:22px 16px}
  header strong{font-size:1.35em}
  nav{padding:10px 16px;gap:12px}
  main{padding:22px 16px 40px}
  h1{font-size:1.6em}
  h2{font-size:1.3em}
  table{font-size:.9em}
  .calc{padding:16px}
}