/* ============================================================
   National 5 Physics — shared stylesheet (hub)
   The S3 Physics sheet's hub, banner, panel and collapsible rules
   in the N5 PINK palette. Only the colour tones differ, so the hub
   reads as the same site as S3, Higher and Advanced Higher.
   ============================================================ */

/* ---------- GLOBAL FIX ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
body { margin: 0; overflow-x: hidden; }
img, iframe { max-width: 100%; height: auto; display: block; }

/* ---------- A11Y HELPERS ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   THEME TOKENS — light mode defaults (pink identity)
   ============================================================ */
:root {
  --font-stack: "Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;

  --bg0:#fff7fb;
  --bg1:#fff0f7;
  --bg2:#fdf2f7;

  --text:#2a0a1a;
  --muted:#5b2f45;

  --accent:#d74a84;
  --accent-2:#a3285c;    /* links and small accent text: 6.6:1 on the page ground */
  --tile-ink:#ffffff;    /* white on every band below */
  --page-accent:var(--accent);
  --menu-accent:var(--accent);

  --card:#ffffff;
  --glass:rgba(255,250,252,0.86);
  --surface-2:rgba(215,74,132,0.06);

  --border:rgba(60,10,30,0.14);
  --border-soft:rgba(60,10,30,0.10);
  --border-accent:rgba(215,74,132,0.22);
  --border-strong:rgba(215,74,132,0.34);

  --shadow:0 18px 40px rgba(0,0,0,0.10);
  --shadow-soft:0 10px 22px rgba(0,0,0,0.08);

  --overlay-bg:rgba(255,255,255,0.82);
  --summary-bg:rgba(255,250,252,0.70);
  --footer-bg:rgba(255,255,255,0.80);

  --glow-1:rgba(215,74,132,0.12);
  --glow-2:rgba(185,58,112,0.08);

  --radius:18px;
  --focus-ring:3px solid rgba(215,74,132,0.55);
  --focus-offset:4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg0:#1d0b14;
    --bg1:#210d17;
    --bg2:#14070e;

    --text:#fbeef4;
    --muted:#e0aec6;

    --accent:#f59ac0;     /* the Physics hub's N5 dark colour */
    --accent-2:#fbd0e3;

    --card:#2a1220;
    --glass:rgba(42,18,32,0.86);
    --surface-2:rgba(245,154,192,0.10);

    --border:rgba(255,255,255,0.16);
    --border-soft:rgba(255,255,255,0.10);
    --border-accent:rgba(245,154,192,0.30);
    --border-strong:rgba(245,154,192,0.42);

    --shadow:0 18px 40px rgba(0,0,0,0.50);
    --shadow-soft:0 10px 22px rgba(0,0,0,0.40);

    --overlay-bg:rgba(20,7,14,0.70);
    --summary-bg:rgba(42,18,32,0.66);
    --footer-bg:rgba(20,7,14,0.55);

    --glow-1:rgba(245,154,192,0.12);
    --glow-2:rgba(185,58,112,0.14);

    --focus-ring:3px solid rgba(245,154,192,0.70);
  }
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-stack);
  color: var(--text);
  background:
    radial-gradient(900px 520px at 12% 0%, var(--glow-1), transparent 62%),
    radial-gradient(900px 520px at 88% 6%, var(--glow-2), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg2) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ============================================================
   BANNER (Higher style)
   ============================================================ */
.banner-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  z-index: 2;
  aspect-ratio: 3 / 1;
  background: var(--glass);
  border-bottom: 1px solid var(--border-soft);
}
.banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn { to { opacity: 1; } }
.banner-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(215,74,132,0.18), rgba(185,58,112,0.10), rgba(255,255,255,0));
  mix-blend-mode: multiply;
  pointer-events: none;
  display: none;
}
.banner-overlay-text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid var(--border-soft);
  text-align: center;
  padding: 0.9rem 1rem;
}
/* Hub/landing pages: banner art already shows the title — hide the duplicate bar (SR-only) */
.banner-wrap.is-hub .banner-overlay-text {
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  inset: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.banner-overlay-text h1 { margin: 0; font-size: 1.12rem; font-weight: 900; color: var(--text); }
.banner-overlay-text p { margin: 0.25rem 0 0; font-size: 0.95rem; color: var(--muted); font-weight: 800; }
@media (max-width: 560px) { .banner-overlay-text h1 { font-size: 1.02rem; } }

/* ============================================================
   MAIN LAYOUT + PANELS (glass, Higher style)
   ============================================================ */
.page-wrap {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 1rem auto 2rem;
  padding: 0 12px 5rem;
}

.panel, .topic-box {
  background: var(--glass);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow-soft);
  margin: 0.95rem 0;
}
.topic-box { margin-bottom: 2rem; }
.panel.soft { background: var(--glass); }
.panel h2, .topic-box h2 {
  margin: 0 0 0.45rem;
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--text);
}
.panel p { margin: 0.35rem 0 0; line-height: 1.55; }
.topic-box a { color: var(--accent-2); font-weight: 900; text-decoration: none; }
.muted { color: var(--muted); font-weight: 800; }
.page-wrap > section[id] { scroll-margin-top: 20px; }

/* hub-tile bands, one colour per tile (as the S3, Higher and AH hubs). White ink 7.2:1 or more
   on every one, and the same in dark mode, so no dark twins are needed. */
.hub-tile.b-navy{--tile-accent:#172554}   .hub-tile.b-blue{--tile-accent:#1b3aa0}
.hub-tile.b-teal{--tile-accent:#0a5f57}   .hub-tile.b-orange{--tile-accent:#9a3412}
.hub-tile.b-green{--tile-accent:#14532d}  .hub-tile.b-purple{--tile-accent:#6b21a8}
.hub-tile.b-rose{--tile-accent:#9f1239}   .hub-tile.b-indigo{--tile-accent:#3a32b0}
.hub-tile.b-maroon{--tile-accent:#7f1d1d} .hub-tile.b-cyan{--tile-accent:#0b5f76}
.section-title { font-size: 1.12rem; font-weight: 900; color: var(--text); margin: 1.4rem 0 .2rem; }
.section-sub { color: var(--muted); font-weight: 800; margin: 0 0 .2rem; }

/* ============================================================
   COLLAPSIBLES (Higher details.mini style)
   ============================================================ */
.collapsible-panel { margin-top: 0.8rem; }
.collapsible-panel details {
  border-radius: 16px;
  border: 1px solid var(--border-accent);
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.collapsible-panel summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1rem;
  font-weight: 900;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--summary-bg);
  border-bottom: 1px solid var(--border-soft);
}
.collapsible-panel summary::after {
  content: "▾";
  margin-left: auto;
  font-weight: 900;
  opacity: .8;
  transition: transform .18s ease;
}
.collapsible-panel details[open] summary::after { transform: rotate(180deg); }
details summary::-webkit-details-marker { display: none; }
.summary-icon { font-size: 1.2rem; }
.summary-text { flex: 1; }

/* dyslexia-friendly spacing inside open panels */
.collapsible-panel details ul { line-height: 1.75; margin-top: 0.8rem; margin-bottom: 0.8rem; }
.collapsible-panel details ul li { margin-bottom: 0.85rem; padding-left: 0.2rem; }
.collapsible-panel details ul li ul li { margin-bottom: 0.65rem; padding-left: 1rem; }
.collapsible-panel details h3 { margin-top: 1.1rem; margin-bottom: 0.6rem; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  text-align: center;
  padding: 1rem;
  background: var(--footer-bg);
  border-top: 1px solid var(--border-soft);
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: auto;
  font-weight: 800;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 700px) {
  .page-wrap { padding: 0 10px 4rem; }
  .panel, .topic-box { padding: 1rem; }
}