/* Family Law Cost Hub — premium editorial theme (v2, 2026-10-31)
   Deep navy + warm gold, serif headings, clean cards. 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. */
*{box-sizing:border-box}
:root{
  --navy:#0e2a47; --navy-2:#173f66; --gold:#c9a86a; --gold-dark:#9c7f45;
  --ink:#1b2430; --muted:#5b6b7d; --bg:#f4f1ea; --line:#e2ddd0;
  --card:#ffffff; --calc-bg:#fbf8f1; --result-bg:#eef3f8;
}
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.65;background:var(--bg)}
a{color:var(--navy-2);text-underline-offset:3px}
a:hover{color:var(--gold-dark)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:#e9dcc0}

/* Header — dark navy hero band with a gold rule */
header{background:linear-gradient(135deg,#0a1f36 0%,var(--navy) 55%,var(--navy-2) 100%);color:#fff;padding:30px 22px 26px;border-bottom:4px solid var(--gold)}
header a{color:#fff;text-decoration:none}
header strong{font-family:Georgia,"Times New Roman",serif;font-size:1.65em;letter-spacing:.2px}
header .tag{opacity:.88;font-size:1em;margin-top:6px;max-width:860px;color:#e8ddc4}

/* Sticky nav */
nav{background:rgba(255,255,255,.96);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;box-shadow:0 2px 12px rgba(14,42,71,.06)}
nav a{text-decoration:none;font-weight:600;color:var(--navy)}
nav a:hover{color:var(--gold-dark);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px}

main{max-width:920px;margin:0 auto;padding:28px 22px 48px;background:#fff;box-shadow:0 10px 30px rgba(14,42,71,.07)}
h1{font-family:Georgia,"Times New Roman",serif;font-size:2.15em;line-height:1.2;color:var(--navy);margin:.2em 0 .4em}
h2{font-family:Georgia,"Times New Roman",serif;font-size:1.5em;color:var(--navy);margin-top:1.8em;border-bottom:3px solid var(--gold);padding-bottom:8px}
h3{font-family:Georgia,"Times New Roman",serif;font-size:1.18em;color:var(--navy);margin-top:1.2em}
p,li{font-size:1.02em}

/* Cards — soft shadow, gold top accent, lift on hover */
.card{border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:14px;padding:18px 18px 16px;margin:18px 0;background:var(--card);box-shadow:0 6px 20px rgba(14,42,71,.07);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(14,42,71,.12)}
.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:#fff8e1;border:1px solid #ecd9a8;border-left:5px solid var(--gold);border-radius:10px;padding:13px 16px;margin:16px 0}
.note{background:#f1f5f9;border-left:4px solid var(--navy-2);padding:12px 16px;margin:14px 0;border-radius:0 10px 10px 0}
.author{background:linear-gradient(180deg,#fbf8f1,#fff);border-top-color:var(--navy)}
.byline{color:var(--muted);font-size:.95em}
.small{font-size:.92em;color:var(--muted)}
.crumbs{max-width:920px;margin:0 auto;padding:14px 22px 0;font-size:.9em;color:var(--muted)}
.crumbs a{text-decoration:none}

/* Calculator — the star of the page */
.calc{background:var(--calc-bg);border:1px solid #e3d5b3;border-radius:14px;padding:20px;margin:20px 0;box-shadow:0 6px 20px rgba(14,42,71,.06)}
.calc h2,.calc h3{border-bottom:0;padding-bottom:0}
label{display:block;margin:12px 0 5px;font-weight:700;color:var(--navy)}
input,select{width:100%;padding:11px 12px;border:1.5px solid #c3ccd6;border-radius:9px;font-size:1em;background:#fff;color:var(--ink)}
input:focus,select:focus{border-color:var(--gold-dark);outline:3px solid rgba(201,168,106,.35)}
button{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border:0;padding:12px 24px;border-radius:999px;font-size:1em;font-weight:700;cursor:pointer;margin-top:16px;box-shadow:0 6px 16px rgba(14,42,71,.25);transition:transform .15s ease,box-shadow .15s ease}
button:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(14,42,71,.3)}
button:active{transform:translateY(0)}
.result{background:var(--result-bg);border:1px solid #bcd0e4;border-left:5px solid var(--navy);border-radius:10px;padding:16px;margin-top:16px;font-size:1.08em}
.result b{font-size:1.25em;color:var(--navy)}

/* Tables */
table{border-collapse:collapse;width:100%;margin:14px 0;overflow:hidden;border-radius:10px}
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:#f8f6f1}

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

/* Consent banner — keep its own contrast, do not inherit the gold button */
#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;box-shadow:0 -4px 20px rgba(0,0,0,.25)}
#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:999px;cursor:pointer;box-shadow:none;margin-top:0}

@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}
}