/* ---------------------------------------------------------------
   Interior pages and forms.
   --------------------------------------------------------------- */

.ss-page { padding: 0 0 72px; }
.ss-page__inner {
  max-width: var(--ss-max);
  margin-inline: auto;
  padding: 48px var(--ss-gutter) 0;
}
.ss-page__inner--narrow { max-width: 880px; }

.ss-page__head { margin-bottom: 34px; }
.ss-page__head h1 { margin: 0; }
.ss-lede {
  font-size: clamp(17px, 1.7vw, 19px);
  color: var(--ss-muted);
  max-width: 62ch;
  margin: 16px 0 0;
}

/* Hero band for service pages: ink panel, no photograph needed. */
.ss-pagehero { background: var(--ss-ink); color: #EDF1F4; }
/* Centred, for the same reason the section heads are: the ink band runs the
   full width of the screen and everything under it is symmetrical, so a
   title ranged into the left third read like it had slipped. */
.ss-pagehero__inner {
  max-width: var(--ss-max);
  margin-inline: auto;
  padding: clamp(44px, 5vw, 72px) var(--ss-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ss-pagehero h1 { color: #EDF1F4; margin: 0; max-width: 20ch; }
.ss-pagehero p {
  color: #A9B3BD;
  max-width: 56ch;
  margin: 18px auto 0;
  font-size: 17px;
  /* Centred text wants even lines; greedy wrapping left a short last one. */
  text-wrap: balance;
}
.ss-pagehero__eyebrow {
  font-family: var(--ss-font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ss-yellow);
  display: block;
  margin-bottom: 14px;
}

/* Prose */
.ss-prose { max-width: 68ch; }
.ss-prose h2 { margin: 40px 0 12px; }
.ss-prose h3 { margin: 28px 0 8px; }
.ss-prose p { margin: 0 0 16px; }
.ss-prose ul { margin: 0 0 18px; padding-left: 20px; }
.ss-prose li { margin-bottom: 8px; }
.ss-prose strong { font-weight: 600; }

/* Two-column facts block, used on service pages. */
.ss-facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ss-hair);
  margin: 30px 0 0;
  max-width: 68ch;
}
.ss-facts > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ss-hair);
  align-items: baseline;
}
@media (max-width: 620px) { .ss-facts > div { grid-template-columns: 1fr; gap: 4px; } }
.ss-facts dt, .ss-facts .k {
  font-family: var(--ss-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ss-muted);
}

/* ---------- forms ---------- */
.ss-form {
  background: var(--ss-surface);
  border-radius: var(--ss-radius);
  padding: clamp(22px, 3vw, 34px);
  max-width: 680px;
}
.ss-field { margin-bottom: 18px; }
.ss-field label {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 6px;
  color: var(--ss-ink);
}
.ss-optional { font-weight: 400; color: var(--ss-muted); font-size: 13px; }
.ss-field input[type="text"],
.ss-field input[type="email"],
.ss-field input[type="tel"],
.ss-field textarea {
  width: 100%;
  font-family: var(--ss-font-body);
  font-size: 16px;
  color: var(--ss-ink);
  background: var(--ss-paper);
  border: 1px solid var(--ss-hair);
  border-radius: var(--ss-radius);
  padding: 12px 14px;
}
.ss-field input:focus, .ss-field textarea:focus {
  border-color: var(--ss-ink);
  background: #fff;
  outline: 3px solid rgba(240,194,46,.45);
  outline-offset: 1px;
}
.ss-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .ss-field-row { grid-template-columns: 1fr; gap: 0; } }

.ss-field--check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14.5px; }
.ss-field--check input { margin-top: 3px; flex: 0 0 auto; }

.ss-field__err { display: block; color: #B4331F; font-size: 13.5px; margin-top: 6px; font-weight: 500; }
.ss-hint { color: var(--ss-muted); font-size: 13.5px; margin: -10px 0 18px; }

.ss-form__item-label {
  display: block;
  font-family: var(--ss-font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ss-muted);
  margin-bottom: 5px;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.ss-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ss-notice {
  background: var(--ss-surface);
  border: 1px solid var(--ss-hair);
  border-radius: var(--ss-radius);
  padding: 26px 28px;
  margin-bottom: 28px;
  max-width: 680px;
}
.ss-notice h1 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 34px); }
.ss-notice p { margin: 0 0 16px; color: var(--ss-muted); }
/* State reads from the panel and the text, not from a stripe. */
.ss-notice--bad { border-color: #E0B4AA; background: #FDF6F4; }
.ss-notice--bad p { color: #B4331F; margin: 0; font-weight: 500; }

.ss-aside { margin-top: 34px; max-width: 680px; }
.ss-aside h2 { font-size: 19px; margin: 0 0 12px; }
.ss-aside ul { list-style: none; margin: 0; padding: 0; }
.ss-aside li { margin-bottom: 6px; color: var(--ss-muted); }
.ss-aside a { font-weight: 500; }

/* Closing call to action on interior pages. */
/* The closing card centres in its container rather than sitting against the
   left edge of a 1240px page with nothing beside it. */
.ss-pagecta {
  background: var(--ss-surface);
  border-radius: var(--ss-radius);
  padding: clamp(30px, 3.4vw, 44px);
  margin-top: 52px;
  margin-inline: auto;
  max-width: 68ch;
  text-align: center;
}
.ss-pagecta h2 { margin: 0 0 10px; font-size: clamp(21px, 2.4vw, 28px); }
.ss-pagecta p {
  margin: 0 auto 22px;
  color: var(--ss-muted);
  max-width: 52ch;
  text-wrap: balance;
}
.ss-pagecta__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Contact: details beside the shared form. */
.ss-contact { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 900px) { .ss-contact { grid-template-columns: .85fr 1.15fr; gap: 56px; } }
.ss-contact__details h2:first-child { margin-top: 0; }
.ss-contact__details h2 { font-size: 21px; margin: 36px 0 12px; }
.ss-contact__details p { color: var(--ss-muted); max-width: 46ch; }
.ss-contact__form h2 { font-size: 21px; margin: 0 0 16px; }
.ss-contact__form .ss-form { max-width: none; }

/* Single flex child of Astra's container; see the note in the templates.
   Astra lays the container out as a flex row, so a child left at `flex: 0 1
   auto` shrinks to its content and the bands stop short of the right edge.
   Both wrappers have to claim the full line. */
.ss-main,
.ss-home {
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
}

/* ---------- school lists ---------- */
.ss-schools { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Crest and name on one line. The mark is given a fixed box so a tall
   crest and a wide wordmark still line their names up across the grid. */
.ss-school__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.ss-school__mark {
  /* One place to change the plate; the image caps derive from it. */
  --plate-w: 116px;
  --plate-h: 88px;
  --plate-inset: 18px;   /* 8px padding + 1px border, both sides */

  flex: 0 0 auto;
  /* Landscape rather than square: it has to hold a squarish crest and a wide
     wordmark equally. Sized up once the schools sent their real logos - a
     detailed crest at 54px is a smudge, and recognising the crest is the only
     reason the logo is here at all. */
  width: var(--plate-w);
  height: var(--plate-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--ss-surface);
  border: 1px solid var(--ss-hair);
  border-radius: var(--ss-radius);
  overflow: hidden;
}
/* Schools that only publish the reversed logo get the dark plate it was
   drawn for, rather than a white mark on a white tile. */
.ss-school__mark--dark { background: var(--ss-ink); border-color: var(--ss-ink); }

/* Capped in pixels, not percentages. A percentage height on a grid or flex
   item resolves against a box that is not the padded one, so the artwork sized
   itself past the plate and overflow:hidden quietly clipped 17px off the
   bottom of the Kid'z crest - its motto ribbon - and 7px off Fields College. */
.ss-school__mark img {
  display: block;
  max-width: calc(var(--plate-w) - var(--plate-inset));
  max-height: calc(var(--plate-h) - var(--plate-inset));
  width: auto;
  height: auto;
}
/* Until a school sends its logo through. */
.ss-school__initials {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .01em;
  color: var(--ss-muted);
}
.ss-school h2 { font-size: 20px; margin: 0; text-wrap: balance; }

.ss-school__pending {
  color: var(--ss-muted);
  font-size: 15.5px;
  margin: 0 0 12px;
}
.ss-school__ask {
  font-family: var(--ss-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ss-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ss-yellow);
  padding-bottom: 3px;
}
.ss-school__ask:hover { color: var(--ss-yellow-dk); }
/* Hairline rows, not railed cards. A yellow bar down the left of a rounded
   white card is one of the most over-used components on the web right now,
   and the site already has a better device for a list of links with a value
   on the right: the pick list, the FAQ and the contact card all use rules.
   Reusing it here also makes three grades read as one list rather than as
   three floating objects. */
.ss-school__grades { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ss-hair); }
.ss-school__grades li { margin: 0; }
.ss-school__grades a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--ss-hair);
  text-decoration: none;
  transition: background-color .15s ease;
}
.ss-school__grades a:hover { background: var(--ss-surface); }
.ss-school__grades a:hover .ss-school__grade { color: var(--ss-yellow-dk); }
.ss-school__grade { font-family: var(--ss-font-display); font-weight: 700; font-size: 17px; color: var(--ss-ink); }
.ss-school__count { font-size: 13.5px; color: var(--ss-muted); }

.ss-listtable { max-width: 68ch; border-top: 1px solid var(--ss-hair); }
.ss-listtable__head {
  display: flex; justify-content: space-between; padding: 12px 0;
  border-bottom: 1px solid var(--ss-hair);
  font-family: var(--ss-font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ss-muted);
}
.ss-listtable__row {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--ss-hair);
}
.ss-listtable__item { display: flex; flex-direction: column; gap: 3px; }
.ss-listtable__item a { font-weight: 500; text-decoration: none; }
.ss-listtable__item a:hover { color: var(--ss-yellow-dk); }
.ss-listtable__sku { font-size: 12.5px; color: var(--ss-muted); }
.ss-listtable__qty { font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------
   Full-bleed bands
   ---------------------------------------------------------------
   On these templates Astra's container stops boxing the page, so the
   hero, colour bands and photo bands run edge to edge. Every section
   then boxes its own inner to --ss-max, which keeps all the content on
   one grid line regardless of whether its background bleeds.

   Done by unboxing the container rather than by 100vw breakout: a
   viewport-width child overflows by the scrollbar width and gives the
   whole page a horizontal scrollbar.
   --------------------------------------------------------------- */
body.ss-bleed .site-content .ast-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.ss-bleed #primary { margin-top: 0; margin-bottom: 0; }

/* The hero's left panel now starts at the screen edge, so pad its text
   across to the boxed grid line the rest of the page sits on. */
body.ss-bleed .ss-hero__text {
  max-width: none;
  margin-left: 0;
  /* Align the hero text with the boxed grid: the container's left offset
     (50vw - max/2) PLUS the gutter every boxed inner also pads by.
     Omitting the gutter left the headline 46px left of everything else. */
  padding-inline: max(var(--ss-gutter), calc(50vw - (var(--ss-max) / 2) + var(--ss-gutter))) clamp(24px, 4vw, 56px);
}
/* These repeat the caps set in home.css because `> *` outranks the base
   element rules, so the h1 needs its own line here or it inherits the body
   measure and fills the column. Keep the two files in step. */
body.ss-bleed .ss-hero__text > * { max-width: 48ch; }
body.ss-bleed .ss-hero__text h1 { max-width: 18ch; }

/* On a phone that cap is wider than the column, so the headline ran to
   within 3px of the gutter. Three balanced lines at 209px read better than
   two jammed edge to edge. Lives here, not in home.css, because the rule
   above outranks anything set on the bare element. */
@media (max-width: 780px) {
  body.ss-bleed .ss-hero__text h1 { max-width: 16ch; }
}

@media (max-width: 860px) {
  body.ss-bleed .ss-hero__text { padding-inline: var(--ss-gutter); }
}

/* ---------------------------------------------------------------
   Enquiry page
   ---------------------------------------------------------------
   The form is the only thing on the page, so it was set in a narrow
   880px column and the contact details were parked underneath it.
   Boxed to the site width instead, with the form taking the reading
   column and the phone numbers standing beside it.

   The right column is sticky because the form is now long: with a
   twenty-line school list on it, a parent who decides halfway down
   that they would rather just phone should not have to scroll to
   find the number.
   --------------------------------------------------------------- */
.ss-enquire { display: grid; gap: clamp(24px, 3vw, 40px); align-items: start; }

@media (min-width: 900px) {
  .ss-enquire { grid-template-columns: minmax(0, 1fr) 310px; }
  .ss-enquire__side {
    position: sticky;
    /* Clears the revealed sticky header rather than tucking under it. */
    top: 108px;
  }
}

/* The form filled 680px inside an 880px column; it now takes its
   column, which is close to the same measure at the site width. */
.ss-enquire__form .ss-form { max-width: none; }

.ss-callcard {
  background: var(--ss-ink);
  color: #EDF1F4;
  border-radius: var(--ss-radius);
  padding: 22px 22px 18px;
}
.ss-callcard__label {
  display: block;
  font-family: var(--ss-font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ss-yellow);
  margin-bottom: 14px;
}
/* One line per row, so the icon centres against the number rather than
   hanging off the top of a two-line block. */
.ss-callcard__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid #252D35;
  color: #EDF1F4;
  text-decoration: none;
}
.ss-callcard__row:first-of-type { border-top: 0; padding-top: 2px; }
.ss-callcard__row .ss-icon { color: var(--ss-yellow); }
.ss-callcard__row strong {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.01em;
  /* Long addresses break rather than pushing the sticky column wider. */
  overflow-wrap: anywhere;
}
.ss-callcard__row:hover strong { color: var(--ss-yellow); }

.ss-callcard__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid #252D35;
  font-size: 13.5px;
  line-height: 1.5;
  color: #939DA7;
}
.ss-callcard__note .ss-icon { color: var(--ss-yellow); flex: 0 0 auto; margin-top: 2px; }

@media (max-width: 899px) {
  /* Stacked, it sits under the form as a card rather than a sticky rail. */
  .ss-enquire__side { order: 2; }
}

/* ---------------------------------------------------------------
   School pick list
   ---------------------------------------------------------------
   The read-only table this replaces made a parent read twenty-one
   lines and then press one all-or-nothing button. Nobody needs the
   whole list: last year's ruler and scissors are still in the
   drawer. Everything starts ticked, and unticking three things is
   far less work than finding eighteen.
   --------------------------------------------------------------- */
.ss-picklist { max-width: 720px; margin-inline: auto; }

.ss-picklist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--ss-ink);
}
.ss-picklist__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ss-font-display);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
}
.ss-picklist__qtylabel {
  font-family: var(--ss-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ss-muted);
}

.ss-pickrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ss-hair);
}
/* The whole row is the label, so the tap target is the line, not the box. */
.ss-pickrow__body { display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.ss-pickrow__name { font-weight: 500; line-height: 1.35; }
.ss-pickrow__sku { font-size: 12.5px; color: var(--ss-muted); }

.ss-pickrow__check,
.ss-picklist__all input { width: 20px; height: 20px; accent-color: var(--ss-yellow-dk); flex: 0 0 auto; }

.ss-pickrow__view {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ss-muted);
  text-decoration: none;
  white-space: nowrap;
}
.ss-pickrow__view:hover { color: var(--ss-yellow-dk); }

.ss-pickrow__qty {
  width: 62px;
  padding: 8px 10px;
  border: 1px solid var(--ss-hair);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
  font: inherit;
  font-weight: 600;
  text-align: center;
  color: var(--ss-ink);
}

/* Unticked rows stay readable but clearly out. */
.ss-pickrow.is-off .ss-pickrow__name,
.ss-pickrow.is-off .ss-pickrow__sku { color: var(--ss-muted); }
.ss-pickrow.is-off .ss-pickrow__name { text-decoration: line-through; text-decoration-thickness: 1px; }
.ss-pickrow.is-off .ss-pickrow__qty { opacity: .45; }

/* Rides along the bottom of the screen while the list is being worked
   through, so the count and the button never scroll away from the ticking. */
.ss-picklist__bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--ss-ink);
  color: #EDF1F4;
  border-radius: var(--ss-radius);
  box-shadow: 0 -6px 22px -14px rgba(18,23,28,.6);
}
.ss-picklist__count { font-size: 14.5px; color: #C6CED6; font-variant-numeric: tabular-nums; }
.ss-picklist__bar .ss-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.ss-picklist__bar .ss-btn.is-added { background: #2F9E6B; color: #fff; }

@media (max-width: 560px) {
  .ss-pickrow { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; }
  /* The product link is the first thing to go: the row already names the
     item, and thumbs need the space for the box and the quantity. */
  .ss-pickrow__view { display: none; }
  .ss-picklist__bar { justify-content: center; text-align: center; }
  .ss-picklist__bar .ss-btn { width: 100%; text-align: center; }
}