/* Nestworth.UK shared stylesheet.
   Linked from every page except the arcade games (which keep their own dark theme).
   Tool pages load this BEFORE their inline <style>, so their inline rules win ties. */

:root { --dark:#1F3864; --mid:#2E5395; --light:#EDF1F8; --muted:#667;
        --green:#2e7d32; --amber:#b26a00; --red:#b3261e; }
* { box-sizing:border-box; }
body { font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       margin:0; color:#222; background:#f7f8fb; line-height:1.55; font-size:17px; }
a { color:var(--mid); }

/* ---- Keyboard focus ---- */
:focus-visible { outline:3px solid var(--mid); outline-offset:2px; }
.site-nav :focus-visible, .site-footer :focus-visible, .page-hero :focus-visible,
.article-hero :focus-visible { outline-color:#fff; }

/* ---- Site navigation (same markup on every page; adjust relative hrefs) ----
<nav class="site-nav">
  <div class="inner">
    <a class="brand" href="index.html">Nestworth<span>.UK</span></a>
    <div class="links">
      <a href="articles/index.html">Guides</a>
      <a href="tools/index.html">Tools</a>
      <a href="arcade/index.html">Games</a>
      <a href="tools/todo.html">Todo</a>
      <a href="about.html">About</a>
    </div>
  </div>
</nav>
Mark the current section with aria-current="page", and put id="main" on the
page's hero (.page-hero / .article-hero) so the skip link lands on the <h1>. ------------------------- */
.site-nav { background:var(--dark); }
.site-nav .inner { max-width:1000px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  min-height:54px; gap:0 16px; }
.site-nav .brand { color:#fff; font-weight:800; font-size:19px; letter-spacing:.4px;
  text-decoration:none; padding:12px 0; }
.site-nav .brand span { color:#9db8e0; }
.site-nav .links { display:flex; flex-wrap:wrap; gap:2px; }
.site-nav .links a { color:#cdd9ee; text-decoration:none; font-size:15px;
  padding:8px 12px; border-radius:6px; }
.site-nav .links a:hover { background:rgba(255,255,255,.1); color:#fff; }
.site-nav .links a[aria-current="page"] { background:rgba(255,255,255,.14);
  color:#fff; font-weight:600; }

/* ---- Page hero (dark banner under the nav) ---- */
.page-hero { background:linear-gradient(160deg, var(--dark) 0%, #2a4a80 100%);
  color:#fff; text-align:center; padding:18px 24px 20px; }
.page-hero h1 { margin:0 0 10px; font-size:32px; letter-spacing:.4px; }
.page-hero p { margin:0 auto; max-width:640px; font-size:16.5px; opacity:.92; }
.page-hero p + p { margin-top:8px; font-size:14.5px; opacity:.78; }

/* ---- Sections and card grids ---- */
section.band { max-width:1000px; margin:0 auto; padding:36px 24px 6px; }
section.band > h2:not(.subhead) { color:var(--dark); font-size:23px; margin:0 0 4px; }
section.band > p.lead { color:var(--muted); margin:0 0 20px; font-size:15.5px; }
.subhead { color:var(--mid); font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; margin:26px 0 12px; }
.subhead:first-of-type { margin-top:4px; }

/* Wrap a band in this to give it a full-bleed white background, so consecutive
   sections alternate between the page background and white. */
.band-wrap { background:#fff; border-top:1px solid #eceff5; border-bottom:1px solid #eceff5; }
.band-wrap section.band { padding-bottom:34px; }

.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
a.card { display:block; background:#fff; border:1px solid #e2e6ef; border-radius:12px;
  padding:20px 22px; text-decoration:none; color:#222;
  transition:border-color .15s, transform .15s, box-shadow .15s; }
a.card:hover { border-color:var(--mid); transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(31,56,100,.08); }
a.card .icon { display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px; background:var(--light);
  color:var(--mid); margin-bottom:12px; }
a.card .icon svg { width:26px; height:26px; }
a.card .t { display:block; font-size:18px; font-weight:700; color:var(--dark); margin-bottom:6px; }
a.card .d { display:block; font-size:14.5px; color:#444; }
a.card .k { display:inline-block; margin-top:10px; font-size:12px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:var(--mid);
  background:var(--light); border-radius:12px; padding:3px 10px; }
p.more-link { margin:16px 0 0; font-size:15px; }

/* ---- Guide list (articles/index.html) ---- */
a.guide { display:block; background:#fff; border:1px solid #e2e6ef; border-radius:12px;
  padding:18px 22px; margin-bottom:14px; text-decoration:none; color:#222;
  transition:border-color .15s, transform .15s; }
a.guide:hover { border-color:var(--mid); transform:translateX(3px); }
a.guide .gt { display:block; font-size:19px; font-weight:700; color:var(--dark); }
a.guide .gd { display:block; font-size:15px; color:#444; margin-top:4px; }
a.guide .gdate { display:block; font-size:13px; color:var(--muted); margin-top:6px; }
h2.cat { color:var(--mid); font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; margin:26px 0 14px; }
h2.cat:first-child { margin-top:4px; }

/* ---- Guide article pages ---- */
.article-hero { background:linear-gradient(160deg, var(--dark) 0%, #2a4a80 100%);
  color:#fff; text-align:center; padding:14px 24px 18px; }
.article-hero .inner { max-width:1000px; margin:0 auto; }
.article-hero a { color:#cdd9ee; text-decoration:none; font-size:14px; }
.article-hero h1 { margin:8px 0 4px; font-size:28px; }
.article-hero .desc { margin:0 auto; max-width:640px; opacity:.85; font-size:16px; }
main.article-main { max-width:820px; margin:0 auto; padding:28px 20px 12px; }
main.article-main article { background:#fff; border:1px solid #e2e6ef; border-radius:12px;
  padding:30px 34px; line-height:1.6; }
/* the card's padding already spaces the opening h2/p — don't stack its top margin on it */
main.article-main article > :first-child { margin-top:0; }
article h2 { color:var(--dark); font-size:21px; margin:28px 0 10px; }
article h3 { color:var(--mid); font-size:17.5px; margin:22px 0 8px; }
article p { margin:12px 0; }
article ul, article ol { padding-left:24px; }
article li { margin:7px 0; }
article a { color:var(--mid); }
article blockquote { border-left:4px solid var(--mid); background:var(--light);
  margin:16px 0; padding:10px 16px; border-radius:0 8px 8px 0; }
article blockquote p { margin:4px 0; }
article table { border-collapse:collapse; width:100%; font-size:15px; margin:14px 0; }
article th { background:var(--dark); color:#fff; padding:7px 11px; text-align:left; }
article td { border:1px solid #e2e6ef; padding:7px 11px; }
article tr:nth-child(even) td { background:var(--light); }
/* build_articles.py wraps every guide table so wide ones scroll on phones */
.table-scroll { overflow-x:auto; margin:14px 0; }
.table-scroll table { margin:0; }
article code { background:var(--light); padding:1px 5px; border-radius:4px; font-size:15px; }
.disclaimer { font-size:13px; color:var(--muted); margin-top:26px;
  border-top:1px solid #e2e6ef; padding-top:14px; }
/* "Related guides" strip on tool pages, just above the disclaimer */
.related-guides { font-size:14px; color:var(--muted); margin-top:20px; }
.related-guides a { color:var(--mid); }
/* Guide footer: related tool cards + previous/next guide in the same category */
.guide-pager { margin-top:28px; }
.guide-pager .pager-head { color:var(--mid); font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; margin:0 0 12px; }
.guide-pager .pager-links { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.guide-pager a.guide { margin:0; line-height:1.4; }
.guide-pager a.guide .gt { font-size:17px; }
.guide-pager a.guide .gk { display:block; font-size:12px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--mid); margin-bottom:4px; }
.guide-pager a.guide.prev:hover { transform:translateX(-3px); }
.guide-pager a.guide.next { grid-column:2; text-align:right; }
@media (max-width:640px) {
  main.article-main { padding:16px 10px 8px; }
  main.article-main article { padding:20px 18px; border-radius:10px; }
  .guide-pager .pager-links { grid-template-columns:1fr; }
  .guide-pager a.guide.next { grid-column:auto; }
  article table { font-size:14px; }
  article th, article td { padding:6px 8px; }
}

/* ---- Prose panel (about page) ---- */
.panel { background:#fff; border:1px solid #e2e6ef; border-radius:12px; padding:26px 30px; }
.panel p { margin:10px 0; font-size:16px; }
.panel .promise { border-left:4px solid var(--green); background:#e8f5e9;
  padding:10px 16px; border-radius:0 8px 8px 0; margin:16px 0; }

/* ---- Utilities ---- */
/* Visually hidden but still read by screen readers (e.g. a tool's aria-live result summary) */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; white-space:nowrap; clip-path:inset(50%); }

/* ---- Phone results bar (calculators) ----
   Below 880px a calculator's inputs stack above its results, so a slim bar pinned to the bottom
   mirrors the headline figure and links to #results. The tool's script adds .off once the
   results are on screen. */
.results-bar { display:none; }
@media (max-width:880px) {
  .results-bar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20;
    align-items:center; justify-content:space-between; gap:12px;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:var(--dark); color:#fff;
    font-size:15px; font-weight:600; text-decoration:none; box-shadow:0 -2px 10px rgba(0,0,0,.18); }
  .results-bar:focus-visible { outline-color:#fff; outline-offset:-4px; }
  .results-bar.off { display:none; }
  #results { scroll-margin-top:12px; }
}

/* ---- Site footer ---- */
.site-footer { margin-top:28px; background:var(--dark); color:#b9c6dd;
  padding:26px 24px 32px; font-size:14px; }
.site-footer .inner { max-width:1000px; margin:0 auto; }
.site-footer a { color:#cdd9ee; }
.site-footer .legal { margin-top:12px; font-size:12.5px; opacity:.7; line-height:1.5; }

@media (max-width:640px) {
  .page-hero h1 { font-size:26px; }
  /* Brand and links on one row on a phone instead of wrapping to two. */
  .site-nav .inner { padding:0 12px; gap:0 8px; min-height:48px; }
  .site-nav .brand { font-size:17px; letter-spacing:.2px; padding:10px 0; }
  .site-nav .links { gap:0; }
  .site-nav .links a { padding:7px 7px; font-size:14px; }
}
@media (max-width:420px) {
  .site-nav .brand { font-size:16px; }
  .site-nav .links a { padding:7px 5px; font-size:13px; }
}