/* ==========================================================================
   Waterford College — Colours & Type
   --------------------------------------------------------------------------
   Tokens lifted from the live site (waterfordcollege.co.za) so this sub-site
   and the main site stay in step. Values were read off the rendered page, not
   guessed:  --at-primary  -> #013754 ,  --at-tertiary -> #1AB588 ,
             --at-accent   -> #DFDB74 ,  headings DM Serif Display, body Aptos.
   ========================================================================== */

/* Fonts ------------------------------------------------------------------- */
/* DM Serif Display — the brand serif, same face the main site loads. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

/* Aptos is the brand sans. It ships with Microsoft 365, so it is NOT available
   as a webfont and the main site relies on it being installed locally too.
   The fallback stack below is what non-Microsoft devices will actually render;
   Segoe UI / system-ui are the closest metric-compatible faces. */

:root {
  /* ---------- BRAND COLOURS ---------------------------------------------- */
  /* Petrol blue family — the anchor of the brand (--at-primary + its ladder) */
  --wc-petrol:        #013754;  /* Primary. Headlines, hero, header, footer   */
  --wc-petrol-2:      #2A5871;  /* Secondary, for layered dark sections       */
  --wc-petrol-mid:    #52788D;  /* Muted mid tone                             */
  --wc-ink:           #012A40;  /* Near-black for body text                   */

  /* Green family — the brand's living accent (--at-tertiary) */
  --wc-green:         #1AB588;  /* Brand green. Accents on dark, CTAs         */
  --wc-green-dark:    #0E7355;  /* Darker green, for links/text on light      */

  /* Lime accent — used sparingly, and only on the dark field (--at-accent) */
  --wc-lime:          #DFDB74;

  /* Neutrals */
  --wc-white:         #FFFFFF;
  --wc-off-white:     #F4F9FC;  /* Cool paper white, banded sections         */
  --wc-pale:          #F5FBFF;  /* Palest tint (--at-primary-l-6)            */
  --wc-grey:          #D6DEE4;

  /* ---------- PHASE ACCENTS ---------------------------------------------- */
  /* A progression from young + green to senior + petrol. */
  --wc-phase-preschool: var(--wc-green);
  --wc-phase-foundation:var(--wc-green-dark);
  --wc-phase-high:      var(--wc-petrol);

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND -------------------------- */
  --fg-1: var(--wc-petrol);
  --fg-2: #3A5B6E;
  --fg-3: #6E8695;
  --fg-on-dark: var(--wc-white);
  --fg-on-dark-muted: #C4D6E0;

  --bg-1: var(--wc-white);
  --bg-2: var(--wc-off-white);
  --bg-3: var(--wc-grey);
  --bg-dark: var(--wc-petrol);
  --bg-dark-2: var(--wc-petrol-2);

  --accent:      var(--wc-green);
  --accent-soft: var(--wc-lime);

  /* Lines / dividers */
  --line-soft:    rgba(1, 55, 84, 0.13);
  --line-on-dark: rgba(255, 255, 255, 0.18);

  /* ---------- TYPEFACES ------------------------------------------------- */
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans:  Aptos, 'Aptos Display', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* ---------- TYPE SCALE ------------------------------------------------- */
  --fs-display-xl: clamp(3.5rem, 6vw, 6rem);
  --fs-display-l:  clamp(2.75rem, 4.5vw, 4.5rem);
  --fs-display-m:  2.5rem;
  --fs-display-s:  1.75rem;

  --fs-lead:  1.25rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.55;

  --tracking-eyebrow: 0.18em;
  --tracking-button:  0.12em;
  --tracking-tight:   -0.01em;

  /* ---------- SPACING ---------------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;

  /* ---------- RADII ------------------------------------------------------ */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 24px;  --r-xl: 40px;  --r-pill: 999px;

  /* ---------- SHADOWS ---------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(1, 55, 84, 0.06);
  --sh-2: 0 4px 14px rgba(1, 55, 84, 0.09);
  --sh-3: 0 18px 40px -12px rgba(1, 55, 84, 0.26);
  --sh-card: 0 10px 30px -10px rgba(1, 55, 84, 0.18);

  /* Motion */
  --ease-natural: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-slow: 520ms;
}

/* =========================================================================
   BASE STYLES
   ========================================================================= */
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use the SERIF (DM Serif Display). The brand leans on an italic
   serif for the emotive word, the same two-tone treatment the main site uses
   on "Wired for wonder". */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  color: var(--fg-1);
  line-height: var(--lh-heading);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
}

h1, .h1 { font-size: var(--fs-display-l); line-height: var(--lh-display); }
h2, .h2 { font-size: var(--fs-display-m); }
h3, .h3 { font-size: var(--fs-display-s); }
h4, .h4 { font-size: 1.25rem; }

.display-xl { font-family: var(--font-serif); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); }
.display-l  { font-family: var(--font-serif); font-size: var(--fs-display-l);  line-height: var(--lh-display); }
.italic     { font-style: italic; }

/* Eyebrow — all-caps sans, wide tracking, above a big serif title. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Body */
p { margin: 0 0 1em; max-width: 62ch; }
.lead { font-size: var(--fs-lead); color: var(--fg-2); }
small, .small { font-size: var(--fs-small); color: var(--fg-3); }

/* Links */
a { color: var(--wc-green-dark); text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity var(--dur-fast) var(--ease-natural); }
a:hover { opacity: 0.7; }

/* Utility */
.u-serif { font-family: var(--font-serif); }
.u-sans  { font-family: var(--font-sans); }
.u-italic { font-style: italic; }

.bg-petrol { background: var(--wc-petrol);   color: var(--fg-on-dark); }
.bg-petrol-2 { background: var(--wc-petrol-2); color: var(--fg-on-dark); }
.bg-green  { background: var(--wc-green);    color: var(--wc-petrol); }
.bg-lime   { background: var(--wc-lime);     color: var(--wc-petrol); }

/* Dark-section overrides */
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--fg-on-dark); }
.on-dark .eyebrow { color: var(--wc-lime); }
.on-dark p { color: var(--fg-on-dark-muted); }