/* ============================================================
   THE SITEMAP (owner 2026-10-05: "revamp the sitemap completely. like how we
   revamped the resources and all hidden links uis. match them ... change the
   direction, font etc"). It is drawn in the subject Library's and the board
   rows' language: one left-aligned column, a bold sans headline ending in
   blue, then one labelled section per programme -- a short blue bar, the
   programme's name in spaced capitals and one line about it in a left
   column -- with each board as its row's tile, name and qualification, and
   each subject as one row: its name (which opens its Library) over a link to
   every resource it has, dot-separated as the board rows list subjects.

   Every word is the one ink (no grey text, owner 2026-09-26); blue is for the
   headline's last word, the programme labels and bars, the links and arrows;
   a board's hue is on its tile and its name only, from the picker skin, the
   one sheet allowed to carry the board tokens (--smap-accent below).

   SIZES FOLLOW THE SCREEN, as the Library's do: each is a straight line in
   vw clamped so a 1280 laptop stays comfortable and a 2560 monitor does not
   run away. Phones set their own values at the end.
   ============================================================ */

.smap {
  --smap-col: clamp(60rem, 80vw, 88rem);
  --smap-h1: clamp(2.5rem, 4vw, 4.5rem);
  --smap-lede: clamp(18px, 1.5vw, 26px);
  --smap-label: clamp(13px, 1vw, 18px);
  --smap-label-desc: clamp(15px, 1.06vw, 19px);
  --smap-label-w: clamp(180px, 13vw, 250px);
  --smap-board: clamp(18px, 1.3vw, 24px);
  --smap-qual: clamp(14px, 0.95vw, 17px);
  --smap-name: clamp(18px, 1.25vw, 23px);
  --smap-res: clamp(15px, 1.05vw, 18px);
  --smap-tile: clamp(44px, 3vw, 56px);
  --smap-icon: clamp(20px, 1.4vw, 26px);
  --smap-dot: clamp(22px, 1.5vw, 28px);
  --smap-gap: clamp(20px, 2.4vw, 48px);
  --smap-ink: var(--nb-ink, #f0efec);
  --smap-blue: var(--nb-blue, #789ff2);
  --smap-line: var(--nb-border, rgba(255, 255, 255, 0.12));
  --smap-paper: var(--nb-paper, #0f1013);
  /* the subject box's grey, as the module boxes have it (owner 2026-10-05:
     "make grey backgrounds so they are visible"): a little of the ink in the
     paper, a lighter grey by night and a darker one by day */
  --smap-card: color-mix(in srgb, var(--smap-ink) 7%, var(--smap-paper));
  --smap-card-line: var(--nb-border-strong, #3a404d);
  font-family: var(--nb-sans, inherit);
  color: var(--smap-ink);
}
html.theme-light .smap {
  --smap-card-line: color-mix(in srgb, var(--nb-border-strong) 45%, var(--nb-border));
}

.smap-inner {
  box-sizing: border-box;
  width: min(100%, var(--smap-col));
  margin: 0 auto;
  padding: clamp(28px, 3vw, 56px) clamp(16px, 3.5vw, 40px) clamp(64px, 6vw, 112px);
}

/* ── The way back ── */
.smap-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0 0 clamp(18px, 1.6vw, 30px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.smap-crumbs a {
  color: var(--smap-blue);
  text-decoration: none;
}
.smap-crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Header ── */
.smap-head {
  margin-bottom: clamp(24px, 2.4vw, 44px);
}

.smap-title {
  margin: 0 0 clamp(6px, 0.6vw, 12px);
  overflow-wrap: anywhere;
  font-size: var(--smap-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--smap-ink);
}
.smap-title-accent {
  color: var(--smap-blue);
}

.smap-lede {
  margin: 0;
  font-size: var(--smap-lede);
  line-height: 1.4;
  color: var(--smap-ink);
}

/* The programmes in one row, each a jump to its section: the name, then how
   many subjects it holds. Hairlines part them, as the board rows' link is
   parted from its row. */
.smap-jump {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.8vw, 14px);
  margin: clamp(22px, 2vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}
.smap-jump li {
  display: flex;
}
.smap-jump-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: clamp(12px, 1vw, 18px) clamp(16px, 1.6vw, 28px);
  border: 1px solid var(--smap-card-line);
  border-radius: var(--nb-r-lg, 12px);
  background: var(--smap-card);
  text-decoration: none;
  color: var(--smap-ink);
  transition: border-color var(--nb-dur-1, 0.18s) var(--nb-ease, ease);
}
.smap-jump-link:hover,
.smap-jump-link:focus-visible {
  border-color: var(--smap-blue);
}
.smap-jump-name {
  font-size: var(--smap-name);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--smap-ink);
}
.smap-jump-count {
  font-size: var(--smap-res);
  color: var(--smap-blue);
}
.smap-jump-link:hover .smap-jump-name,
.smap-jump-link:focus-visible .smap-jump-name {
  color: var(--smap-blue);
}

/* ── One programme ── */
.smap-sec {
  display: grid;
  grid-template-columns: var(--smap-label-w) minmax(0, 1fr);
  column-gap: var(--smap-gap);
  padding-block: clamp(24px, 2.2vw, 40px);
  border-bottom: 1px solid var(--smap-line);
  scroll-margin-top: 88px;
}
.smap-sec:last-of-type {
  border-bottom: 0;
}

.smap-label-title {
  margin: 0;
  padding-top: clamp(14px, 1.1vw, 20px);
  background: linear-gradient(var(--smap-blue), var(--smap-blue)) left top / clamp(28px, 2.5vw, 44px) 3px no-repeat;
  font-size: var(--smap-label);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.smap-label-title a {
  color: var(--smap-blue);
  text-decoration: none;
}
.smap-label-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.smap-label-desc {
  margin: clamp(10px, 1vw, 16px) 0 0;
  font-size: var(--smap-label-desc);
  line-height: 1.4;
  color: var(--smap-ink);
}
.smap-label-desc span {
  display: block;
}

.smap-boards {
  display: grid;
  gap: clamp(22px, 2vw, 36px);
  min-width: 0;
}

/* ── One board: its tile, name and qualification ── */
.smap-board {
  --smap-accent: var(--smap-blue);
  min-width: 0;
}
.smap-board--edexcel {
  --smap-accent: var(--pg-hover-edexcel, var(--smap-blue));
}
.smap-board--cie {
  --smap-accent: var(--pg-hover-cie, var(--smap-blue));
}

.smap-board-head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.2vw, 20px);
  padding-bottom: clamp(12px, 1vw, 18px);
  border-bottom: 1px solid var(--smap-line);
}
.smap-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--smap-tile);
  height: var(--smap-tile);
  border-radius: var(--nb-r-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--smap-accent) 34%, var(--smap-line));
  background: color-mix(in srgb, var(--smap-accent) 10%, transparent);
  color: var(--smap-accent);
}
.smap-tile svg {
  width: var(--smap-icon);
  height: var(--smap-icon);
}
.smap-board-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.smap-board-name {
  font-size: var(--smap-board);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--smap-accent);
}
.smap-board-qual {
  margin-top: 2px;
  font-size: var(--smap-qual);
  line-height: 1.4;
  color: var(--smap-ink);
}

/* ── The subjects of a board: two to a line on a wide screen ── */
.smap-subjects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 0.9vw, 16px);
  margin: clamp(12px, 1vw, 18px) 0 0;
  padding: 0;
  list-style: none;
}
.smap-subject {
  min-width: 0;
  padding: clamp(14px, 1.1vw, 20px) clamp(16px, 1.3vw, 24px);
  border: 1px solid var(--smap-card-line);
  border-radius: var(--nb-r-lg, 12px);
  background: var(--smap-card);
  transition: border-color var(--nb-dur-1, 0.18s) var(--nb-ease, ease);
}
.smap-subject:hover,
.smap-subject:focus-within {
  border-color: var(--smap-blue);
}

/* The name opens the subject's Library; the arrow moves with a hover, as
   the board rows' does. */
.smap-subject-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: var(--smap-name);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--smap-ink);
  text-decoration: none;
}
.smap-arrow {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  color: var(--smap-blue);
  transition: transform 0.22s var(--ease-expo, ease);
}
.smap-subject-name:hover,
.smap-subject-name:focus-visible {
  color: var(--smap-blue);
}
.smap-subject-name:hover .smap-arrow,
.smap-subject-name:focus-visible .smap-arrow {
  transform: translateX(3px);
}

/* Every resource carries its dot in front, and the list is pulled left by one
   dot's width inside a clipping box, so a wrapped line never starts "·"
   (the board rows' subject list does the same). */
.smap-res {
  display: block;
  overflow: hidden;
  margin-top: clamp(6px, 0.5vw, 10px);
  font-size: var(--smap-res);
  line-height: 1.5;
}
.smap-res-in {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--smap-dot));
}
.smap-res-link {
  color: var(--smap-blue);
  text-decoration: none;
}
.smap-res-link::before {
  content: "\00B7";
  display: inline-block;
  width: var(--smap-dot);
  font-weight: 700;
  text-align: center;
  color: var(--smap-ink);
}
.smap-res-link:hover,
.smap-res-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is(.smap-jump-link, .smap-subject-name, .smap-res-link, .smap-label-title a, .smap-crumbs a):focus-visible {
  outline: 2px solid var(--smap-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.smap-empty {
  margin: 0;
  font-size: var(--smap-lede);
  color: var(--smap-ink);
}

/* ── Narrower screens: the label goes over its programme ── */
@media (max-width: 900px) {
  .smap-sec {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(16px, 3vw, 24px);
  }
}

/* ── Phones: one subject to a line, the phone's own sizes ── */
@media (max-width: 600px) {
  .smap {
    --smap-h1: 2.25rem;
    --smap-lede: 17px;
    --smap-label: 13px;
    --smap-label-desc: 15px;
    --smap-board: 18px;
    --smap-qual: 14px;
    --smap-name: 18px;
    --smap-res: 15px;
    --smap-tile: 44px;
    --smap-icon: 22px;
    --smap-dot: 20px;
  }
  .smap-subjects {
    grid-template-columns: minmax(0, 1fr);
  }
  .smap-jump {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smap-jump-link {
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 12px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smap-arrow,
  .smap-jump-link {
    transition: none;
  }
  .smap-subject-name:hover .smap-arrow,
  .smap-subject-name:focus-visible .smap-arrow {
    transform: none;
  }
}

/* A finger needs a 44px target: the links grow, the words stay their size. */
@media (pointer: coarse) {
  .smap-jump-link {
    min-height: 44px;
  }
  .smap-subject-name {
    min-height: 44px;
  }
  .smap-res-link {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
  .smap-label-title a,
  .smap-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}