/* Donat Sciences and Maths: the site header (top menu, subject tabs, subject row) and footer,
   for pages that have their own design inside (the quiz pages and the maths books).
   Colours and fonts are the same as the rest of the site; they are set on .site-chrome only. */
.site-chrome{
  --bg:#f4f9fc; --surface:#ffffff; --ink:#10243a; --ink-soft:#44576b; --line:#d3e3ee;
  --accent:#0a68a6; --accent-ink:#ffffff; --accent-soft:#fff6d6; --blue:#0a68a6; --blue-soft:#e1f2fb; --sun:#f2b705;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-family:var(--body); color:var(--ink); background:var(--bg); line-height:1.5; font-size:17px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .site-chrome{
    --bg:#0b1622; --surface:#122232; --ink:#e6eef5; --ink-soft:#a6b6c4; --line:#223648;
    --accent:#5cc4f0; --accent-ink:#04202f; --accent-soft:#2a2410; --blue:#7fd3f5; --blue-soft:#102a3b;
  }
}
:root[data-theme="dark"] .site-chrome{
  --bg:#0b1622; --surface:#122232; --ink:#e6eef5; --ink-soft:#a6b6c4; --line:#223648;
  --accent:#5cc4f0; --accent-ink:#04202f; --accent-soft:#2a2410; --blue:#7fd3f5; --blue-soft:#102a3b;
}
.site-chrome *{box-sizing:border-box;}
.site-chrome .wrap{max-width:1040px; margin:0 auto; padding-inline:20px; width:auto; flex-direction:row; gap:normal;}
.site-chrome nav.subjects, .site-chrome nav.subnav, .site-chrome nav.links{display:block; margin:0; padding:0;}
.site-chrome nav.links{display:flex;}
.site-chrome header.top{position:static; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:none; min-height:0;}
.site-chrome header.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; flex-wrap:wrap; row-gap:10px;}
.site-chrome .brand{font-family:var(--display); font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px; margin:0; white-space:nowrap;}
.site-chrome .brand .dot{width:12px; height:12px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 4px color-mix(in srgb, var(--sun) 30%, transparent);}
.site-chrome .brand .amp{font-weight:600; color:var(--ink-soft);}
.site-chrome nav.links{display:flex; gap:8px; flex-wrap:wrap; margin:0;}
.site-chrome nav.links a{display:inline-flex; align-items:center; text-decoration:none; font-weight:700; font-size:14.5px; padding:6px 12px; border-radius:999px; background:var(--blue-soft); color:var(--blue); border:1.5px solid color-mix(in srgb, var(--blue) 40%, transparent);}
.site-chrome nav.links a .ni{margin-right:5px;}
.site-chrome nav.subjects{background:var(--surface); border-bottom:1px solid var(--line);}
.site-chrome nav.subjects .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding-block:8px;}
.site-chrome nav.subjects a{display:flex; flex-direction:column; gap:1px; text-decoration:none; color:var(--ink); padding:8px 12px; border-radius:12px; border:1.5px solid transparent;}
.site-chrome nav.subjects a b{font-family:var(--display); font-size:17px;}
.site-chrome nav.subjects a small{font-size:12.5px; color:var(--ink-soft);}
.site-chrome nav.subjects a[aria-current="page"]{background:var(--blue-soft); border-color:var(--blue);}
.site-chrome nav.subjects a[aria-current="page"] b{color:var(--blue);}
.site-chrome nav.subnav{background:var(--blue-soft); border-bottom:1px solid var(--line);}
.site-chrome nav.subnav .wrap{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-block:8px;}
.site-chrome nav.subnav a{display:inline-flex; align-items:center; text-decoration:none; font-weight:700; font-size:15px; color:var(--blue); background:var(--surface); border:1.5px solid color-mix(in srgb, var(--blue) 40%, transparent); border-radius:999px; padding:7px 14px; min-height:40px; white-space:nowrap;}
.site-chrome nav.subnav a .ni{margin-right:5px;}
.site-chrome nav.subnav a.sn-home{background:transparent; border-color:transparent; padding-inline:4px 8px; font-family:var(--display); font-size:16px; color:var(--ink);}
.site-chrome nav.subnav a.sn-home::after{content:"\203A"; margin-left:8px; color:var(--ink-soft);}
.site-chrome nav.subnav a[aria-current="page"]:not(.sn-home){background:var(--blue); color:var(--surface); border-color:var(--blue);}
.site-chrome footer.site-foot{padding-block:32px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:14px; margin-top:32px;}
.site-chrome footer.site-foot .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
/* quiz pages have padding on <body>: let the header use the full width */
.site-chrome.bleed{margin:-24px -16px 20px;}
.site-chrome.bleed-foot{margin:24px -16px -24px;}
@media (max-width:640px){
  .site-chrome .brand{font-size:17px;}
  .site-chrome nav.subjects .wrap{grid-template-columns:repeat(2,1fr);}
  .site-chrome nav.subjects a{padding:6px 10px;}
}
@media (max-width:480px){
  .site-chrome nav.subnav a.sn-home{display:none;}
  .site-chrome nav.subnav .wrap{gap:6px; flex-wrap:nowrap;}
  .site-chrome nav.subnav a{flex:1; justify-content:center; padding:7px 8px;}
}
html.dpa-contrast .site-chrome{--bg:#000; --surface:#000; --ink:#fff; --ink-soft:#fff; --line:#fff; --blue:#7fe7ff; --blue-soft:#001a22;}
html.dpa-contrast .site-chrome nav.subnav a[aria-current="page"]:not(.sn-home){background:#ffd500; color:#000; border-color:#ffd500;}