/* ==========================================================================
   Woodleigh Typography Scale — Revised
   Matches existing authoring convention: mobile-first, single breakpoint
   at 900px. Display retains the original H1 fluid formula; H1–H6 use
   fixed mobile/desktop pairs, resized so no two levels can collide at
   any viewport width (the bug in the current build).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Display — hero/banner only. This is the CURRENT h1 rule, unchanged,
   renamed and rescoped so it no longer doubles as the semantic H1.
   Scoped to .banner so editors get this automatically when they type an
   H1 inside the Banner field — no new toolbar option needed.
   -------------------------------------------------------------------------- */
.banner h1,
.display {
    font-family: BananaGrotesk-Regular,sans-serif;
    font-size: 60px;
    letter-spacing: -3px;
    line-height: 90%
}

@media (min-width: 900px) {
    .banner h1,
    .display {
        font-size: max(60px,min(9vw,128px));
        letter-spacing: -6.4px;
        line-height: 90%
    }
}

/* --------------------------------------------------------------------------
   H1 — actual page title. Usable on every page, not just heroes.
   Fixed mobile/desktop pair (not fluid) so it can never drift down to
   meet H2, which is the bug being fixed here.
   -------------------------------------------------------------------------- */
.h1,h1 {
    font-family: BananaGrotesk-Regular,sans-serif;
    font-size: 32px;
    letter-spacing: -1.6px;
    line-height: 100%
}

@media (min-width: 900px) {
    .h1,h1 {
        font-size: 60px;
        letter-spacing: -3px;
        line-height: 100%
    }
}

.h1 b,.h1 strong,h1 b,h1 strong {
    font-family: BananaGrotesk-Bold,sans-serif
}

.h1 mark,h1 mark {
    font-family: RecifeTextWeb-Light,sans-serif;
    font-size: 32px;
    letter-spacing: -1.9px;
    line-height: 100%;
    text-transform: none
}

@media (min-width: 900px) {
    .h1 mark,h1 mark {
        font-size: 60px;
        letter-spacing: -3.6px;
        line-height: 100%
    }
}

.h1 mark b,.h1 mark strong,h1 mark b,h1 mark strong {
    font-family: RecifeText-Semibold,sans-serif
}

/* --------------------------------------------------------------------------
   H2
   -------------------------------------------------------------------------- */
.h2,h2 {
    font-family: BananaGrotesk-Regular,sans-serif;
    font-size: 26px;
    letter-spacing: -1.3px;
    line-height: 105%
}

@media (min-width: 900px) {
    .h2,h2 {
        font-size: 44px;
        letter-spacing: -2.2px;
        line-height: 105%
    }
}

.h2 b,.h2 strong,h2 b,h2 strong {
    font-family: BananaGrotesk-Bold,sans-serif
}

.h2 mark,h2 mark {
    font-family: RecifeTextWeb-Light,sans-serif;
    font-size: 26px;
    letter-spacing: -1.6px;
    line-height: 105%
}

@media (min-width: 900px) {
    .h2 mark,h2 mark {
        font-size: 44px;
        letter-spacing: -2.9px;
        line-height: 105%
    }
}

.h2 mark b,.h2 mark strong,h2 mark b,h2 mark strong {
    font-family: RecifeText-Semibold,sans-serif
}

/* --------------------------------------------------------------------------
   H3 — font-family corrected to Banana Grotesk (was incorrectly set to
   RecifeTextWeb-Light). Letter-spacing brought back to the -5% pattern
   every other level uses, now that it's on the right typeface.
   -------------------------------------------------------------------------- */
.h3,h3 {
    font-family: BananaGrotesk-Regular,sans-serif;
    font-size: 22px;
    letter-spacing: -1.1px;
    line-height: 115%
}

@media (min-width: 900px) {
    .h3,h3 {
        font-size: 32px;
        letter-spacing: -1.6px;
        line-height: 115%
    }
}

.h3 b,.h3 strong,h3 b,h3 strong {
    font-family: BananaGrotesk-Bold,sans-serif
}

.h3 mark,h3 mark {
    font-family: RecifeTextWeb-Light,sans-serif;
    font-size: 22px;
    letter-spacing: -1.4px;
    line-height: 115%
}

@media (min-width: 900px) {
    .h3 mark,h3 mark {
        font-size: 32px;
        letter-spacing: -2.1px;
        line-height: 115%
    }
}

.h3 mark b,.h3 mark strong,h3 mark b,h3 mark strong {
    font-family: RecifeText-Semibold,sans-serif
}

/* --------------------------------------------------------------------------
   H4
   -------------------------------------------------------------------------- */
.h4,h4 {
    font-family: BananaGrotesk-Regular,sans-serif;
    font-size: 19px;
    letter-spacing: -.95px;
    line-height: 115%
}

@media (min-width: 900px) {
    .h4,h4 {
        font-size: 24px;
        letter-spacing: -1.2px;
        line-height: 115%
    }
}

.h4 b,.h4 strong,h4 b,h4 strong {
    font-family: BananaGrotesk-Bold,sans-serif
}

/* --------------------------------------------------------------------------
   H5 — functions as a strong sub-head or lead paragraph, not a mini H4.
   -------------------------------------------------------------------------- */
.h5,h5 {
    font-family: BananaGrotesk-Regular,sans-serif;
    font-size: 17px;
    letter-spacing: -.85px;
    line-height: 120%
}

@media (min-width: 900px) {
    .h5,h5 {
        font-size: 20px;
        letter-spacing: -1px;
        line-height: 120%
    }
}

.h5 b,.h5 strong,h5 b,h5 strong {
    font-family: BananaGrotesk-Bold,sans-serif
}

/* --------------------------------------------------------------------------
   H6 — treated as a label, not a size step. Distinguishes itself from
   body text (15px mobile / 18px desktop) through weight, case and
   tracking rather than size — a smaller H6 would collide with body copy.
   -------------------------------------------------------------------------- */
.h6,h6 {
    font-family: BananaGrotesk-Bold,sans-serif;
    font-size: 14px;
    letter-spacing: .28px;
    line-height: 130%;
    text-transform: uppercase
}

@media (min-width: 900px) {
    .h6,h6 {
        font-size: 15px;
        letter-spacing: .3px;
        line-height: 130%
    }
}

/* --------------------------------------------------------------------------
   Body copy — unchanged from current build. Correction: this is Banana
   Grotesk, not Recife, per .p,p in the live stylesheet.
   -------------------------------------------------------------------------- */
.p,p {
    font-family: BananaGrotesk-Regular,sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 175%;
    padding-bottom: 24px
}

@media (min-width: 900px) {
    .p,p {
        font-size: 18px;
        font-weight: 500;
        line-height: 175%
    }
}

/* ==========================================================================
   Vertical Rhythm — relational spacing between headings, paragraphs and
   blockquotes.

   REQUIRES REMOVAL of these existing rules, or this will stack on top of
   them rather than replace them:
     - .p,p { padding-bottom: 24px }  (base rule + its @media 900px copy)
     - section .neo-block--text h1,h2,h3,h4,h5,p { padding-bottom: 40px }
     - main.page--article article.article .neo-block--text
       h1,h2,h3,h4,h5,p { padding-bottom: 40px }

   Scoped to .neo-block--text so this doesn't leak onto headings used
   elsewhere (cards, footer, cart, CTA sections etc.).

   Assumption to confirm: "kicker" = <h6> used editorially above a larger
   heading. Rules below also match a .kicker class in case that's used
   instead — remove whichever doesn't apply once confirmed.
   ========================================================================== */

.neo-block--text {
    --space-3xs: 8px;
    --space-2xs: 16px;
    --space-xs: 24px;
    --space-sm: 32px;
    --space-lg: 64px
}

/* Baseline: any block-level element following another gets standard rhythm.
   Selector reaches three levels deep (.neo-block--text > .flex.grow >
   [alignment wrapper] > element) to match how the block renderer actually
   nests content — a bare `> * + *` never matched anything here, which is
   why headings/paragraphs were rendering with the browser's zero-margin
   reset instead of this rhythm. */
.neo-block--text > * > * > * + * {
    margin-top: var(--space-xs)
}

/* First element in a block never carries top margin */
.neo-block--text > * > * > *:first-child {
    margin-top: 0
}

/* Kicker directly before a heading — tightest gap, reads as one grouped unit */
.neo-block--text h6 + h1,
.neo-block--text h6 + h2,
.neo-block--text h6 + h3,
.neo-block--text h6 + h4,
.neo-block--text h6 + h5,
.neo-block--text .kicker + h1,
.neo-block--text .kicker + h2,
.neo-block--text .kicker + h3,
.neo-block--text .kicker + h4,
.neo-block--text .kicker + h5 {
    margin-top: var(--space-3xs)
}

/* Heading directly before a paragraph — heading "owns" the copy beneath it.
   Matched to paragraph-to-paragraph rhythm (--space-xs) rather than a
   tighter value, now that the old padding-bottom is gone and this margin
   is the only thing creating the gap. */
.neo-block--text h1 + p,
.neo-block--text h2 + p,
.neo-block--text h3 + p,
.neo-block--text h4 + p,
.neo-block--text h5 + p,
.neo-block--text h6 + p {
    margin-top: var(--space-xs)
}

/* Paragraph or blockquote directly before a new heading (or its kicker) —
   the biggest gap, signals a new section starting */
.neo-block--text p + h1,
.neo-block--text p + h2,
.neo-block--text p + h3,
.neo-block--text p + h4,
.neo-block--text p + h5,
.neo-block--text p + h6,
.neo-block--text p + .kicker,
.neo-block--text blockquote + h1,
.neo-block--text blockquote + h2,
.neo-block--text blockquote + h3,
.neo-block--text blockquote + h4,
.neo-block--text blockquote + h5,
.neo-block--text blockquote + h6,
.neo-block--text blockquote + .kicker {
    margin-top: var(--space-lg)
}

/* Paragraph <-> blockquote — the quote is already its own visual unit
   (border, colour, Recife), needs air but not a full section break */
.neo-block--text p + blockquote,
.neo-block--text blockquote + p {
    margin-top: var(--space-sm)
}

/* hr as a section divider. No margin here deliberately: an hr always
   renders alone in its own .neo-block--text block, and that block
   already gets 64px (--space-lg) top/bottom padding from the theme's
   `section > .neo-block--text` rule. Margin here on top of that padding
   was doubling the gap around every divider to ~128px. If an hr is ever
   authored inline alongside other content in the same block, it will
   need spacing added back in, scoped to that case. */
.neo-block--text hr {
    margin-top: 0;
    margin-bottom: 0
}

.neo-block--text hr + * {
    margin-top: 0
}

/* --------------------------------------------------------------------------
   Overrides two legacy rules that can't be deleted from this file directly
   and keep stacking with the margin-based system above, causing the extra
   space reported after paragraphs and headings throughout testing:
     - .p,p { padding-bottom: 24px }
     - section .neo-block--text h1,h2,h3,h4,h5,p { padding-bottom: 40px }
   Scoped to .neo-block--text only, so paragraphs elsewhere on the site
   (cards, footer, cart etc.) that may still want that original spacing
   are untouched. !important used deliberately here, since this is
   overriding rules that live outside this file and can't be resolved by
   specificity or load order alone.
   -------------------------------------------------------------------------- */
.neo-block--text p,
.neo-block--text h1,
.neo-block--text h2,
.neo-block--text h3,
.neo-block--text h4,
.neo-block--text h5 {
    padding-bottom: 0 !important
}

/* --------------------------------------------------------------------------
   Blockquote — font-family added. Previously undeclared, so it was
   silently inheriting Banana Grotesk from body/section rather than
   rendering in Recife. Using RecifeTextWeb-Light as the closest match to
   "Recife Book" — confirm with Spicy Web whether Book is a genuinely
   different weight or whether Light has been standing in for it.
   -------------------------------------------------------------------------- */
blockquote {
    font-family: RecifeTextWeb-Light,sans-serif;
    color: #ef9f71;
    color: var(--color-secondary);
    display: block;
    font-size: 22px;
    letter-spacing: -1.1px;
    line-height: 115%;
    position: relative;
    padding-left: 48px;
    border-left-width: 0
}

@media (min-width: 900px) {
    blockquote {
        font-size: 30px;
        letter-spacing: -1.5px;
        line-height: 115%
    }
}

blockquote::before {
    font-family: RecifeTextWeb-Light,sans-serif;
    font-size: 60px;
    line-height: 1;
    color: #ef9f71;
    color: var(--color-secondary);
    position: absolute;
    display: flex;
    align-items: center;
    content: "\201C";
    left: 0;
    top: 0
}

@media (min-width: 900px) {
    blockquote::before {
        font-size: 80px
    }
}




/* Pill Styles */

.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900!important;
  line-height: 1.4;
  white-space: nowrap;
  text-transform: capitalize;
}

/* Minimbah */
.pill--minimbah {
  background: #429659; /* Forest */
}

/* Penbank */
.pill--penbank {
  background: #387ebc; /* Royal */
}

/* Senior Campus */
.pill--senior {
  background: #f89c49; /* Mandarin (tint) */
}

/* Whole School */
.pill--whole-school {
  background: #8fa89b;
}

/* Whole School — gradient across all three campus colours */
.pill--whole-school-alt {
  background: linear-gradient(135deg, #429659, #387ebc, #f89c49);
}


/* ==========================================================================
   Page Intro — horizontal alignment fix
   Base theme hardcodes .page-intro to a fixed 40px left/right padding
   (`padding: 64px 40px`) at every viewport width, independent of the
   16px/64px responsive padding that `section .neo-block` uses for the
   body content beneath it. Result: the intro text drifts out of
   alignment with headings/paragraphs below (24px too far left on
   desktop; the reverse on mobile, where 40px > 16px). Overriding just
   the horizontal padding here to match, leaving the theme's 64px
   top/bottom padding untouched.
   ========================================================================== */
.page-intro {
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 900px) {
    .page-intro {
        padding-left: 64px;
        padding-right: 64px;
    }
}