/* ===== footer-tidy.css — the site footer, on every screen =================

   WHAT WAS WRONG, and one rule was doing most of it.

   responsive.css gives every `.rail-link` a 44px tap target and
   `text-align:center`. That is right for the nav rail and for a pill. Every
   link in the footer's four navigation columns is also a `.rail-link`, and
   there it produced, from a tablet screenshot:

     · the column headings ("THE SCHOOL", "FOR FAMILIES") left-aligned while
       every link under them was CENTRED — the "nothing lines up" complaint;
     · 52px between one link and the next, because the links are `display:block`
       with `min-height:44px`, so the text sits at the TOP of a 44px box and the
       column's own gap is added under it. Five links became 260px of column;
     · the legal line at the bottom overlapping itself, because "Code of Ethics"
       and "Privacy & Terms" are rail-links inside a sentence and each became a
       44px block in the middle of running text;
     · four 180px columns floating in the middle of an 867px tablet, pushed
       apart by `justify-content:space-between` on the band above them.

   The 44px target is worth keeping — these are real links a thumb has to hit.
   So the box stays 44px and the TEXT is centred inside it vertically instead
   of being pushed to the top, the horizontal centring is dropped, and the
   column's own gap goes to zero because 44px is already the rhythm.

   SPECIFICITY NOTE, and it cost an hour the first time. responsive.css already
   carries a footer block, written as `footer.site-footer > div:last-of-type >
   div:nth-child(n)`. A rule here written as `.site-footer nav` is LESS specific
   than `footer.site-footer nav`, so `!important` on both sides loses to the
   older file however late this one loads. Every selector below therefore uses
   the same shape as that block. If you add a rule here, match it. */


/* ── 1. The four navigation columns ──────────────────────────────────────── */
footer.site-footer nav { gap: 0 !important; }

footer.site-footer nav a {
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  min-height: 44px !important;
  line-height: 1.3 !important;
}

/* The heading sits on the same left edge as the links under it, with real air
   below it rather than the 4px the pack gives it. */
footer.site-footer nav > p:first-child {
  margin: 0 0 10px !important;
  opacity: .72;
}

/* ── 2. The legal line ───────────────────────────────────────────────────
   Inline links inside a sentence: the hit area grows through padding and an
   equal negative margin cancels its effect on the line box — the same trick
   touch.css uses for prose links, and the reason the sentence stops
   overlapping itself. */
footer.site-footer > div:last-of-type > div:nth-child(3) a.rail-link,
footer.site-footer > div:last-of-type > div:nth-child(3) a {
  display: inline !important;
  min-height: 0 !important;
  text-align: inherit !important;
  padding-block: 11px;
  margin-block: -11px;
}

/* Three spans pushed apart by `justify-content:space-between` across 1440px is
   a line of text with two holes in it. They read as one credit line:
   left-aligned, wrapping normally, one ordinary gap. */
footer.site-footer > div:last-of-type > div:nth-child(3) {
  justify-content: flex-start !important;
  gap: 6px 22px !important;
}

/* ── 3. Tablet and phone ─────────────────────────────────────────────────
   The column count follows the width rather than being left to auto-fit: four
   across a tablet (tight, with narrow alleys, now that each link is a 44px row
   instead of a 52px one), two on a large phone, one below that. Two columns on
   a tablet was tried and rejected — it leaves half of each 435px cell empty,
   which is the same "adrift" look from the other direction. */
@media (max-width: 1150px), (max-width: 1400px) and (pointer: coarse) {
  footer.site-footer {
    padding-left: clamp(18px, 5vw, 48px) !important;
    padding-right: clamp(18px, 5vw, 48px) !important;
    padding-bottom: 28px !important;
  }
  footer.site-footer > div:last-of-type { gap: clamp(24px, 3.2vw, 34px) !important; }
  footer.site-footer > div:last-of-type > div:nth-child(2) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px clamp(14px, 2.4vw, 28px) !important;
  }

  /* The identity block, the contact block and the button stop competing for
     one row: the name and the contact details sit together and the button
     goes full width under them, where it is unmissable rather than wedged
     into whatever is left at the end of a wrapped flex row. */
  footer.site-footer > div:last-of-type > div:first-child {
    gap: 20px clamp(22px, 4vw, 40px) !important;
    padding-bottom: 24px !important;
  }
  footer.site-footer > div:last-of-type > div:first-child > a.rail-link {
    flex: 1 0 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* A large phone: two columns. */
@media (max-width: 719px) {
  footer.site-footer > div:last-of-type > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 18px !important;
  }
}

/* A small phone: one column. Two 150px columns of wrapped link text is worse
   than one clean list. The decorative blobs come off — at this width they sit
   directly behind the link text rather than behind a whole footer. */
@media (max-width: 470px) {
  footer.site-footer > div:last-of-type > div:nth-child(2) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  footer.site-footer > div[aria-hidden="true"] { display: none !important; }
  footer.site-footer p#footerLogo { font-size: 22px !important; }
}

/* ── 4. The tagline is NOT broken — a note so nobody "fixes" it again ─────
   A screenshot at 390px showed "Curiosity leads the way." rendering as
   "Curio", and it looks exactly like a clipping bug: `#footerType` is
   `display:inline-block;white-space:nowrap;overflow:hidden` with a
   `width:0 → 100%` typewriter animation, and its parent is a shrink-wrapped
   inline-block, which is the classic way for a percentage width to resolve
   against nothing.

   It is not that. Measured A/B at identical timing, with the parent forced
   back to `inline-block` and with it set to `block`: **both render 290px for
   288px of text — the full sentence.** The screenshot had simply caught the
   animation mid-type. It is 1.15s of `steps(24,end)` on a 0.55s delay, fired
   by an IntersectionObserver when the footer scrolls into view, so any capture
   inside the first ~1.8s shows a partial sentence.

   A fix was written here and then removed, because it fixed nothing and
   changed the paragraph's display for no reason. If this looks wrong again,
   wait two seconds before believing it. */

/* ── 5. The footer was two screens tall on a phone ────────────────────────
   Measured at 390px: 1966px of footer — 22 navigation links in ONE column at
   44px a row, under an identity block that also stacked. A visitor who reaches
   the bottom of a page has to scroll past two and a half more screens of links
   to reach the copyright.

   Two columns from 360px up. "Inside a Classroom" wraps to two lines in a
   170px column, which the 44px row absorbs, and the set halves in height. Only
   a phone narrower than 360px keeps the single column, where two would be
   150px each and every second label would wrap. */
@media (min-width: 360px) and (max-width: 470px) {
  footer.site-footer > div:last-of-type > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;
  }
}

/* ── 6. The identity block on a phone ────────────────────────────────────
   Address, phone/email and hours are three flex children of one row. On a
   desktop they sit side by side with `gap:clamp(22px,3vw,44px)`; on a phone
   they wrap into a column and that same gap becomes 22px of vertical air
   between three short blocks, on top of each block's own line-height. The
   result read as three unrelated islands rather than one contact card.

   14px between them, and the school name pulled closer to the strapline it
   belongs to. Phone-only: the desktop row is unchanged. */
@media (max-width: 560px) {
  footer.site-footer > div:last-of-type > div:first-child > div:nth-child(2) {
    gap: 14px !important;
  }
  footer.site-footer > div:last-of-type > div:first-child { gap: 18px !important; }
  footer.site-footer p#footerLogo + p { margin-bottom: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   07 · THE LINK GROUPS COLLAPSE ON A PHONE.

   Measured at 390×844 the footer was 1,407px — more than one and a half
   screens — and 599px of that was twenty links in four five-link groups.
   public/legacy/footer-accordion.js gives each group's heading button
   semantics and marks the open one with `data-foot-open`; these rules are
   the other half, and they are the ONLY place the links are hidden.

   Scoped to 719px and below. Above it every link shows whatever the
   attribute says, so a stale state from a rotation can never hide a link,
   and a browser where the script did not run gets the open footer.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 719px) {
  footer.site-footer nav[aria-label] > p.foot-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    margin: 0 !important;
    padding: 13px 2px !important;
    border-bottom: 1px solid rgba(250, 247, 239, .16);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* The chevron. Drawn, not a glyph, so it cannot be captured as text and
     cannot pick up a font the pack does not load. */
  footer.site-footer nav[aria-label] > p.foot-head::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(250, 247, 239, .7);
    border-bottom: 2px solid rgba(250, 247, 239, .7);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
  }
  footer.site-footer nav[aria-label][data-foot-open] > p.foot-head::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  footer.site-footer nav[aria-label]:not([data-foot-open]) > a { display: none !important; }

  /* Open: the links sit under their heading with a little inset, so the
     group reads as one block rather than a new list. */
  footer.site-footer nav[aria-label][data-foot-open] > a {
    padding-left: 2px !important;
  }

  /* One column of groups, stacked, with no grid gap between them — the
     heading's own rule is the separator now. */
  footer.site-footer > div:last-of-type > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  footer.site-footer nav[aria-label] { gap: 0 !important; }
  footer.site-footer nav[aria-label][data-foot-open] { padding-bottom: 8px; }
}

@media (max-width: 719px) and (prefers-reduced-motion: reduce) {
  footer.site-footer nav[aria-label] > p.foot-head::after { transition: none; }
}