/* ==========================================================================
   Site-wide typography (font option A, 2026-10-24)
   One family (Plus Jakarta Sans) + one script accent (Yellowtail), and one
   size scale for every page banner and heading. Loaded LAST on every page so
   it wins over main.css and the per-page CSS files — !important is used on
   purpose here because this file is the single source of truth for sizes.
   Header, footer and the site-wide "Begin Your Child's" banner keep their
   own sizes; only their script accent font changes (via --font-script).
   ========================================================================== */

:root {
	--font-script: 'Yellowtail', cursive;
	--type-h1: clamp(32px, calc(20px + 2.2vw), 52px);
	--type-h1-compact: clamp(30px, calc(18px + 1.8vw), 44px);
	--type-h1-article: clamp(28px, calc(16px + 1.6vw), 40px);
	--type-h2: clamp(24px, calc(16px + 1vw), 30px);
	--type-h2-band: clamp(22px, calc(15px + 0.8vw), 26px);
	--type-card-title: clamp(20px, calc(14px + 0.5vw), 22px);
	--type-h3: clamp(17px, calc(15px + 0.2vw), 18px);
	--type-intro: clamp(15.5px, calc(14px + 0.18vw), 16.5px);
}

/* Script accent words: Yellowtail only has a regular weight. */
.cta-banner__content h2 .text-orange,
.site-footer__tagline .text-orange,
.notfound-hero__caption {
	font-family: var(--font-script) !important;
	font-weight: 400 !important;
}

/* ---------- H1: page banners ---------- */
.fas-hero__copy h1,
.curriculum-page-hero h1,
.why-hero__copy h1,
.admissions-hero__copy h1,
.pr-hero__copy h1,
.about-hero__copy h1,
.contact-hero__copy h1,
.sp-hero__copy h1 {
	font-family: var(--font-base) !important;
	font-size: var(--type-h1) !important;
	font-weight: 800 !important;
	line-height: 1.12 !important;
	letter-spacing: -0.02em !important;
}

/* Compact banner: form / utility pages, and the homepage (4-line title
   beside the photo + recommendation form leaves less room) */
.hero__copy h1,
.advisor-hero__copy h1,
.visit-hero__copy h1,
.leadgen-hero__copy h1,
.brochure-hero h1,
.blog-index h1 {
	font-family: var(--font-base) !important;
	font-size: var(--type-h1-compact) !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;
}

/* Blog article title */
.blog-post__hero h1 {
	font-family: var(--font-base) !important;
	font-size: var(--type-h1-article) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
}

/* Banner intro paragraph */
.hero__desc,
.fas-hero__desc,
.curriculum-page-hero__desc,
.why-hero__desc,
.admissions-hero__desc,
.pr-hero__desc,
.about-hero__copy > p,
.contact-hero__copy > p,
.advisor-hero__copy > p,
.visit-hero__copy > p,
.leadgen-hero__desc,
.brochure-hero__desc,
.sp-hero__desc,
.blog-index .pr-section-sub {
	font-size: var(--type-intro) !important;
	line-height: 1.7 !important;
}

/* Banner eyebrow label (the homepage one is a deliberate design one-off) */
:is(.fas-hero__copy, .admissions-hero__copy, .leadgen-hero__copy, .brochure-hero, .blog-index, .blog-post__hero) .eyebrow {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
}

/* ---------- H2: section headings ---------- */
body h2:not(:where(.site-header, .site-footer, .cta-banner, .advisor-question__head, .leadgen-card, .pr-newsletter__form-card, .contact-form-card, .sp-contact__card, .sp-awards__list, .map-banner, .advisor-cta, .admissions-cta, .why-cta, .fas-cta, .sp-cta, .why-community) h2) {
	font-family: var(--font-base) !important;
	font-size: var(--type-h2) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}

/* Coloured CTA bands inside pages */
:is(.map-banner, .advisor-cta, .admissions-cta, .why-cta, .fas-cta, .sp-cta, .why-community) h2 {
	font-family: var(--font-base) !important;
	font-size: var(--type-h2-band) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
}

/* Form / card titles */
:is(.leadgen-card, .pr-newsletter__form-card, .contact-form-card, .sp-contact__card, .sp-awards__list) h2 {
	font-family: var(--font-base) !important;
	font-size: var(--type-card-title) !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
}

/* ---------- H3: card headings ---------- */
body h3:not(:where(.site-header, .site-footer, .cta-banner, .visit-card__head, .pr-wizard__col) h3) {
	font-family: var(--font-base) !important;
	font-size: var(--type-h3) !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
}

/* Big screens: scale the whole site proportionally so it fills large monitors
   instead of sitting small in the middle (layout is designed around ~1240–1600px).
   Laptops, tablets and phones are unaffected (2026-10-26). */
@media (min-width: 1600px) { html { zoom: 1.15; } }
@media (min-width: 1900px) { html { zoom: 1.3; } }
@media (min-width: 2400px) { html { zoom: 1.6; } }