/* Port Moresby Christian Academy - foundation styles */
/* ---- Custom properties ---- */
/* Used in: every page — the design tokens referenced by all rules below. */
:root {
  /* Colour tokens */
  --sea-deep: #15181B;       /* near-black — navbar, footer, hero overlay */
  --sea: #23262B;            /* secondary dark neutral */
  --gold: #B35900;           /* accent orange — 4.8:1 on white, AA for body text */
  --gold-hover: #8F4700;     /* darker orange — hover/active state, 6.8:1 on white */
  --gold-soft: #FFD9A8;      /* light orange — accent text on dark backgrounds */
  --paper: #FFFFFF;
  --tint: #F8F9FA;
  --mint: #EAF7EA;
  --sky: #E8F4F8;
  --surface: #FFFFFF;
  --stone: #E5E7EB;
  --text: #202225;
  --muted: #55595E;

  /* Type — system font stack, matching the reference site (no webfont) */
  --font-display: system-ui, -apple-system, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* Type scale — fluid between mobile and desktop, sized up for laptop viewing */
  --h1: clamp(2.4rem, 1.7rem + 2.9vw, 4.2rem);
  --h2: clamp(1.95rem, 1.6rem + 1.5vw, 2.85rem);
  --h3: clamp(1.4rem, 1.25rem + 0.6vw, 1.7rem);
  --body: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
  --small: clamp(0.95rem, 0.9rem + 0.1vw, 1.05rem);

  /* Spacing scale — the larger steps are fluid so section padding
     shrinks on narrow/mobile screens instead of staying desktop-sized */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
  --space-6: clamp(2rem, 1.3rem + 3vw, 4rem);
  --space-7: clamp(2.5rem, 1.3rem + 5vw, 6.25rem);

  /* Layout */
  --measure: 34rem;
  --container: 72rem;
  --radius: 8px;
  --radius-full: 50%;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.14);
}

/* ---- Reset ---- */
/* Used in: every page — browser default reset, no page-specific markup. */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: clamp(17px, 15px + 0.6vw, 20px);
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
}

body, h1, h2, h3, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---- Base ---- */
/* Used in: every page — default body copy and h1/h2/h3 styling (<main> content on all 6 pages). */
body {
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  color: var(--muted);
  background: var(--paper);
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--text);
}

h1 { font-size: var(--h1); font-weight: 800; }
h2 { font-size: var(--h2); font-weight: 700; }
h3 { font-size: var(--h3); font-weight: 700; }

small, .small {
  font-size: var(--small);
}

/* ---- Container ---- */
/* Used in: every page — the <div class="wrap"> inside every <header>, <section> and <footer>. */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.measure {
  max-width: var(--measure);
}

/* ---- Focus ---- */
/* Used in: every page — keyboard focus ring on links, buttons and form fields. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---- Todo placeholder ----*/ 
/* Used in: every page — the yellow-highlight <span class="todo"> markers tracked in TODO.md. 
.todo {
  background: #FFF3B0;
  color: var(--text);
  padding: 0 0.2em;
  border-radius: var(--radius);
}----*/

/* ---- Skip link ---- */
/* Used in: every page — the <a class="skip-link"> right after <body>, before the header. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #fff;
  padding: 0.75em 1.25em;
  font-weight: 700;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ---- Header ---- */
/* Used in: every page — <header class="site-header"> (logo, .nav-desktop primary nav, .header-actions). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(15, 17, 19, 0.98);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

@media (min-width: 900px) {
  .header-inner { height: 80px; }
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.logo-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
}

.logo-sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.nav-desktop { display: none; }

.header-cta {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: rgba(179, 89, 0, 0.14);
  border: 1px solid rgba(255, 217, 168, 0.45);
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease-out, background 0.15s ease-out, border-color 0.15s ease-out;
}

.header-cta:hover {
  transform: translateY(-2px);
  background: rgba(179, 89, 0, 0.22);
  border-color: rgba(255, 217, 168, 0.75);
}

@media (min-width: 900px) {
  .nav-desktop {
    display: block;
    flex: 1;
    margin-left: var(--space-6);
  }
  .nav-desktop ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.35rem, 0.2rem + 0.8vw, 1.25rem);
  }
  .nav-desktop a {
    display: inline-block;
    padding: 0.3rem clamp(0.45rem, 0.3rem + 0.35vw, 0.75rem);
    border-radius: var(--radius);
    color: #fff;
    font-weight: 600;
    font-size: clamp(0.9rem, 0.82rem + 0.25vw, 1.05rem);
    letter-spacing: 0;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  }
  .nav-desktop a:hover {
    color: var(--gold-soft);
    background: rgba(184, 226, 31, 0.08);
    transform: translateY(-2px);
  }
  .nav-desktop a.active {
    color: var(--gold-soft);
    background: rgba(209, 106, 3, 0.35);
  }

  .header-cta {
    display: inline-flex;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ---- Hamburger ---- */
/* Used in: every page — the <button id="menu-toggle"> in .header-actions (opens .mobile-panel via js/nav.js). */
.hamburger {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (min-width: 900px) {
  .hamburger { display: none; }
}

.hamburger-icon {
  width: 22px;
  height: 2px;
  background: #fff;
  position: relative;
  transition: background 0.2s ease-out;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform 0.2s ease-out;
}

.hamburger-icon::before { top: -7px; }
.hamburger-icon::after { top: 7px; }

.hamburger[aria-expanded="true"] .hamburger-icon {
  background: transparent;
}

.hamburger[aria-expanded="true"] .hamburger-icon::before {
  transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger-icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mobile overlay panel ---- */
/* Used in: every page — <div id="mobile-panel"> right after the header, toggled by js/nav.js. */
html.scroll-lock,
html.scroll-lock body {
  overflow: hidden;
}

.mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--sea-deep);
  color: #fff;
  padding: var(--space-6) 1.25rem var(--space-4);
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
}

.mobile-panel.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.2s ease-out;
}

.mobile-panel nav ul li a {
  display: block;
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.3rem);
  padding: clamp(0.8rem, 2.5vw, 1.25rem) 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
}

.mobile-panel nav ul li a.active { color: var(--gold-soft); }

/* Used in: every page — the <button id="menu-close"> that closes the mobile panel.
   Needed because .mobile-panel (z-index 50) sits above .site-header (z-index 40)
   and fully covers the hamburger button while open, so the panel needs its own
   visible close control rather than relying on the hidden header button. */
.mobile-panel-close {
  position: absolute;
  top: var(--space-3);
  right: 1.25rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  border-radius: var(--radius-full);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.mobile-panel-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.mobile-panel-footer {
  border-top: 1px solid var(--sea);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--gold-soft);
}

.mobile-panel-footer a { color: #fff; text-decoration: underline; }

/* ---- Footer ---- */
/* Used in: every page — <footer class="site-footer"> (.footer-cols brand + Quick links columns,
   .social-icons row, .footer-copyright bar). */
.site-footer {
  background: var(--sea-deep);
  color: #ddd;
  margin-top: var(--space-7);
}

.footer-top {
  padding: var(--space-6) 0 var(--space-5);
}

.footer-cols {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .footer-cols { grid-template-columns: 1.3fr 1fr; }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
}

.footer-brand img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.footer-brand span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
}

.footer-col h3 {
  font-size: 1.3rem;
  color: var(--gold-soft);
  margin-bottom: var(--space-3);
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-footer a {
  color: #ddd;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--gold-soft);
  text-decoration: underline;
}

.social-icons {
  display: flex;
  gap: 0.75rem;
  margin-top: var(--space-3);
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--sea);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dddddd;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s ease;
}

.social-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.social-icon:hover {
  background: var(--gold);
  color: #fff;
  transform: translateY(-3px);
}

.footer-copyright {
  text-align: center;
  padding: var(--space-4) 0;
  background: #0F1113;
  border-top: 1px solid var(--sea);
}

.footer-copyright p {
  font-size: 0.95rem;
  color: #999;
  margin: 0;
}

/* ---- Buttons ----
   .btn-gold      — index.html hero + "How to enrol" CTA; contact.html "Send Message" submit
   .btn-outline   — index.html hero "How to enrol" link (sits on the dark hero image)
   .btn-outline-sea — index.html "Life at PMCA" link; enrolment.html "Download enrolment form" link
*/
.btn,
.btn-outline-sea {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}

.btn:hover,
.btn-outline-sea:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.btn {
  display: inline-block;
  padding: 0.85em 1.75em;
  border-radius: var(--radius);
  font-weight: 700;
  text-align: center;
}

.btn-gold {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 4px 15px rgba(179, 89, 0, 0.3);
}

.btn-gold:hover {
  background: var(--gold-hover);
}

.btn-outline {
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}

.btn-outline:hover {
  background: #fff;
  color: var(--sea-deep);
}

.btn-outline-sea {
  display: inline-block;
  padding: 0.85em 1.75em;
  border-radius: var(--radius);
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--gold);
  color: var(--gold);
  background: transparent;
}

.btn-outline-sea:hover {
  background: var(--gold);
  color: #fff;
}

/* ---- Hero ---- */
/* Used in: every page — the <section class="hero"> right after the mobile panel.
   .hero--tall (near-full-viewport) is only used on index.html; other pages use the shorter default.
   .notice (the "Enrolments are open" banner) also appears inside the hero on index.html + enrolment.html. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--sea-deep);
  color: #fff;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 0;
  text-align: center;
}

.hero--tall {
  min-height: 92vh;
}

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 217, 168, 0.35);
  color: var(--gold-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero--tall { min-height: auto; }
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media picture,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(21, 24, 27, 0.6), rgba(21, 24, 27, 0.75));
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-text {
  max-width: 42rem;
  margin-inline: auto;
}

.hero h1 {
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
  max-width: 820px;
  margin-inline: auto;
  letter-spacing: -0.03em;
}

.hero p.measure {
  color: #fff;
  margin-top: var(--space-3);
  margin-inline: auto;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  max-width: 42rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.notice {
  margin-top: var(--space-5);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  border-left: 4px solid var(--gold);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  text-align: left;
  box-shadow: var(--shadow-md);
}

/* ---- Sections ---- */
/* Used in: every page — the <section class="section section--*"> wrapper around each content
   block (.section--paper/tint/mint/sky pick the background; .section--center centers the text). */
.section {
  padding: var(--space-7) 0;
}

.section h2 {
  margin-bottom: var(--space-4);
  text-align: center;
}

/* Intro paragraph directly under a section heading (e.g. "Students follow the
   Papua New Guinea national curriculum...") — centered site-wide like sris.info's
   .welcome/.about/.section-title paragraphs. Scoped to a direct child of .wrap so
   it doesn't reach into cards, tables, forms or the alt-section image/text rows,
   which sris.info itself keeps left-aligned. */
.section > .wrap > p {
  text-align: center;
  margin-inline: auto;
}

/* Lists directly under a section heading. Grid-based lists (.value-grid) are
   already centered per-card, so this only needs to reposition the narrower,
   .measure-width lists (numbered steps, the history timeline) into the middle
   of the section — their own item text/markers stay left-aligned for
   readability, same as sris.info leaves list-style content unreversed. Scoped
   to a direct child of .wrap so the "How to enrol" steps list inside the
   alt-section on index.html (sitting beside an image) is left untouched. */
.section > .wrap > .steps,
.section > .wrap > .ladder {
  margin-inline: auto;
}

.section--paper { background: var(--paper); }
.section--tint { background: var(--tint); }
.section--mint { background: var(--mint); }
.section--sky { background: var(--sky); }


.section--center { text-align: center; }
.section--center .measure { margin-inline: auto; }

/* ---- Welcome / mission bands ---- */
/* Used in: index.html only — "Welcome to PMCA" (.welcome-band) and "Our mission" (.mission-band). */
.welcome-band {
  padding: var(--space-7) 0;
  text-align: center;
  background: linear-gradient(180deg, #f7f8f9 0%, #f2f4f6 100%);
}

.welcome-band h1,
.welcome-band h2 {
  margin-bottom: var(--space-3);
}

.welcome-band p {
  max-width: 46rem;
  margin-inline: auto;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
}

.promise-strip {
  padding-top: var(--space-5);
  background: var(--paper);
}

.promise-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 68rem;
  margin: 0 auto;
}

.promise-card {
  background: var(--surface);
  border: 1px solid rgba(21, 24, 27, 0.06);
  border-top: 5px solid var(--gold);
  border-radius: 18px;
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}

.promise-card span {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.promise-card h3 {
  margin-bottom: 0.5rem;
}

.promise-card p {
  margin: 0;
}

.mission-band {
  padding: var(--space-6) 0;
  text-align: center;
  background: var(--gold);
  color: #fff;
}

.mission-band h2 { color: #fff; margin-bottom: var(--space-3); }

.mission-band p {
  max-width: 50rem;
  margin-inline: auto;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  line-height: 1.8;
  color: #fff;
}

/* ---- Level ladder / timeline ---- */
/* Used in: about.html only — the "Our history" timeline (<ul class="ladder timeline">). */
.ladder { position: relative; }

.ladder::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 2px;
  background: var(--stone);
}

.ladder-item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: var(--space-5);
}

.ladder-item:last-child { padding-bottom: 0; }

.ladder-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background: var(--gold);
  transform: rotate(45deg);
  border-radius: var(--radius);
}

/* ---- Card grid (feature / value cards) ---- */
/* Used in: index.html ("Our levels", "Why parents choose us"), about.html ("Faith & values"),
   our-school.html ("Curriculum", "Facilities"), enrolment.html ("Documents needed"). */
.value-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.highlights-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 68rem;
  margin-inline: auto;
}

.highlight-item {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  border-top: 5px solid var(--gold);
}

.highlight-number {
  display: inline-flex;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

.highlight-item h3 {
  margin-bottom: 0.5rem;
}

.highlight-item p {
  margin: 0;
}

.testimonial-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 68rem;
  margin-inline: auto;
}

.quote-card {
  background: var(--surface);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

.quote {
  font-size: clamp(1.08rem, 1rem + 0.25vw, 1.2rem);
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
}

.quote-credit {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
}

.value-card {
  background: var(--surface);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5) var(--space-6);
  box-shadow: var(--shadow-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.value-card h3 {
  font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.6rem);
  margin-bottom: 0.5rem;
}

.value-card p {
  font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
  margin: 0;
}

.value-icon {
  font-size: 3.75rem;
  margin-bottom: var(--space-3);
  color: var(--gold);
}

/* ---- Stats / at-a-glance grid ---- */
/* Used in: index.html only — the "PMCA at a glance" section; js/stats.js drives the count-up
   animation on the [data-count] spans when the grid scrolls into view. */
.stats-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 56rem;
  margin-inline: auto;
}

.stats-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-3);
  box-shadow: var(--shadow-sm);
}

.stats-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stats-label {
  color: var(--muted);
}

/* ---- Numbered steps ---- */
/* Used in: index.html ("How to enrol" alt-section) and enrolment.html ("Steps to enrol"). */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  min-height: 2rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--radius);
}

/* ---- Alternating image / text sections ---- */
/* Used in: index.html only — "How to enrol" (.section--mint) and "Life at PMCA"
   (.alt-section--reverse .section--sky). */
.alt-section {
  padding: var(--space-7) 0;
}

.alt-section .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.alt-section--reverse .wrap {
  flex-direction: row-reverse;
}

.alt-content {
  flex: 1 1 320px;
}

.alt-content h2 { margin-bottom: var(--space-3); }

.alt-content p { margin-bottom: var(--space-3); }

.alt-media {
  flex: 1 1 320px;
  max-width: 460px;
  margin-inline: auto;
}

.alt-media picture {
  display: block;
  aspect-ratio: 4 / 5;
  border: 6px solid var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.alt-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---- Image / photo card grid (campus life) ---- */
/* Used in: index.html only — "Moments from our school" section. */
.image-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.image-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.image-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.image-card picture {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-card-body {
  padding: var(--space-4);
}

.image-card-body h3 {
  font-size: 1.3rem;
  margin-bottom: 0.35rem;
}

.image-card-body p {
  margin: 0;
  font-size: var(--small);
}

.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(1.6rem, 4vw, 3.1rem);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(21, 24, 27, 0.98), rgba(35, 38, 43, 0.96));
  color: #fff;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.cta-panel h2 {
  margin: 0;
  text-align: left;
  color: #fff;
  font-size: clamp(1.8rem, 1.4rem + 1vw, 2.6rem);
  max-width: 34rem;
}

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 700;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: flex-end;
}

/* ---- Staff cards ---- */
/* Used in: about.html only — "Our staff" section. */
.staff-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.staff-card {
  border-top: 5px solid var(--gold);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.staff-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.staff-card picture {
  display: block;
  width: 170px;
  height: 170px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 4px solid var(--paper);
  box-shadow: 0 0 0 1px var(--stone), var(--shadow-sm);
}

.staff-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.staff-card h3 {
  font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.6rem);
}

.staff-card .role {
  color: var(--muted);
  font-size: var(--small);
  margin-bottom: 0.5rem;
}

/* ---- Principal welcome ---- */
/* Used in: about.html only — "Principal's welcome" section. */
.principal-card {
  background: var(--surface);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  max-width: 100%;
}

.principal-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
}

.principal-block picture {
  display: block;
  width: 230px;
  height: 230px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 4px solid var(--paper);
  box-shadow: 0 0 0 1px var(--stone), var(--shadow-sm);
  flex-shrink: 0;
  margin-inline: auto;
}

.principal-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.principal-block .content {
  flex: 1 1 320px;
}

.principal-block .content p {
  font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
  margin-bottom: var(--space-3);
}

/* ---- Gallery carousel ---- */
/* Used in: gallery.html only — both "Our students" and "School environment" sliders
   (js/carousel.js drives every [data-carousel] on the page). */
.carousel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sea-deep);
  box-shadow: var(--shadow-md);
  /* Capped so the source photos (largest is 872px wide) aren't stretched far
     beyond their native resolution on wide screens, which is what was
     causing the blur — width still flexes with the viewport up to this cap. */
  max-width: clamp(28rem, 60vw, 42rem);
  margin-inline: auto;
}

.carousel-track {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.carousel-slide picture {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--sea-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease-out;
}

.carousel-btn:hover { transform: translateY(-50%) scale(1.08); background: var(--gold); color: #fff; }

.carousel-prev { left: var(--space-3); }
.carousel-next { right: var(--space-3); }

.carousel-status {
  text-align: center;
  padding: var(--space-2) 0;
  color: var(--muted);
}

/* ---- Scrollable tables ---- */
/* Used in: our-school.html ("A day at PMCA" timetable) and enrolment.html ("Fees", "Term dates"). */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-4) 0;
  border: 1px solid var(--stone);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.table-scroll table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--stone);
  text-align: left;
  white-space: nowrap;
}

.table-scroll thead th {
  background: var(--tint);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
}

.table-scroll tbody tr:last-child td { border-bottom: none; }

/* Used in: our-school.html only — the "A day at PMCA" timetable. Centers the
   table block in the section and centers each cell's text; the Fees/Term
   dates tables on enrolment.html keep the default left alignment. */
.table-scroll--center {
  max-width: clamp(32rem, 60vw, 48rem);
  margin-inline: auto;
}

.table-scroll--center th,
.table-scroll--center td {
  text-align: center;
}

/* ---- Definition list ---- */
/* Used in: contact.html only — the "Get in touch" <dl class="info-list">. */
.info-list dt {
  font-weight: 700;
  color: var(--gold);
  margin-top: var(--space-3);
}

.info-list dd {
  margin: 0.25rem 0 0;
}

/* ---- Map embed ---- */
/* Used in: contact.html only — the "Find us" Google Maps iframe. */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--stone);
  background: var(--tint);
  border-radius: var(--radius);
  overflow: hidden;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Contact cards ---- */
/* Used in: contact.html only — the two-column layout wrapping "Get in touch", "Find us"
   and "Send us a message". */
.contact-grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

.contact-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-card {
  background: var(--surface);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

#send-message {
  scroll-margin-top: 88px;
}

/* ---- Contact form ---- */
/* Used in: contact.html only — the "Send us a message" FormSubmit form. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-honey {
  position: absolute;
  left: -9999px;
}

.form-note { color: var(--muted); margin: 0; }

.form-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .form-grid.two-col { grid-template-columns: 1fr 1fr; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-field label {
  font-weight: 700;
  color: var(--text);
  font-size: var(--small);
}

.form-field input,
.form-field textarea {
  font: inherit;
  padding: 0.65em 0.85em;
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--text);
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(179, 89, 0, 0.15);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.section-action { margin-top: var(--space-4); }
.section-list { margin-top: var(--space-5); }
.fee-caption { text-align: left; padding: 0.5em 1em; }

/* ---- Reduced motion ---- */
/* Used in: every page — respects OS-level "reduce motion" for hero/carousel/hover animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Education wireframe overrides ---- */
:root {
  --sea-deep: #163f52;
  --sea: #1f6071;
  --gold: #d9792b;
  --gold-hover: #b85f1d;
  --gold-soft: #ffd3a6;
  --paper: #fffdf8;
  --tint: #f1f6f4;
  --mint: #e3f1ec;
  --sky: #e6f1f5;
  --surface: #ffffff;
  --stone: #d9e2df;
  --text: #17313d;
  --muted: #4d6268;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Trebuchet MS", "Segoe UI", sans-serif;
  --radius: 6px;
  --shadow-sm: 0 2px 8px rgba(22, 63, 82, 0.08);
  --shadow-md: 0 12px 28px rgba(22, 63, 82, 0.12);
}

body { background: var(--paper); }
.site-header { background: var(--sea-deep); border-bottom: 4px solid var(--gold); }
.header-inner { height: 72px; }
.logo-img { width: 44px; height: 44px; border: 2px solid var(--gold-soft); }
.logo-text { letter-spacing: 0.04em; }
.logo-sub { letter-spacing: 0.08em; text-transform: uppercase; }
.nav-desktop ul { gap: 0.25rem; }
.nav-desktop a { font-size: 0.92rem; letter-spacing: 0; }
.nav-desktop a.active, .nav-desktop a:hover { color: #fff; background: var(--sea); }
.hero { min-height: 500px; background: var(--sea-deep); }
.hero::after { background: linear-gradient(90deg, rgba(15, 45, 58, 0.92) 0%, rgba(15, 45, 58, 0.64) 48%, rgba(15, 45, 58, 0.18) 100%); }
.hero-inner { padding-block: clamp(4rem, 8vw, 7rem); }
.hero-text { max-width: 40rem; }
.hero-text h1 { max-width: 15ch; font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.8rem); }
.hero-text p { color: #e9f2ee; }
.btn, .btn-outline, .btn-outline-sea { border-radius: 4px; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; }
.btn-gold { background: var(--gold); color: #fff; }
.notice { border-left: 4px solid var(--gold); border-radius: 0; background: rgba(255, 253, 248, 0.12); color: #fff; }
.welcome-band, .mission-band { padding-block: var(--space-6); }
.welcome-band { background: var(--gold); color: #fff; }
.welcome-band h2, .mission-band h2 { color: inherit; margin-bottom: var(--space-2); }
.mission-band { background: var(--sea); color: #eaf5f2; }
.section, .alt-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section h2 { margin-bottom: var(--space-3); color: var(--sea-deep); }
.section--tint { background: var(--tint); }
.section--paper { background: var(--paper); }
.stats-grid, .value-grid, .image-grid, .staff-grid { gap: 1rem; }
.stats-card, .value-card, .image-card, .staff-card { border: 1px solid var(--stone); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stats-card { background: var(--sea-deep); border-color: var(--sea-deep); color: #fff; }
.stats-number { color: var(--gold-soft); }
.stats-label { color: #eaf5f2; }
.value-card, .staff-card { background: var(--surface); padding: var(--space-4); }
.value-card h3, .staff-card h3, .image-card h3 { color: var(--sea-deep); }
.value-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-3); border-radius: 50%; background: var(--mint); font-size: 1.4rem; }
.steps li { border-color: var(--gold); }
.steps li::before { background: var(--gold); }
.alt-section .wrap { gap: clamp(2rem, 6vw, 6rem); }
.alt-section--reverse { background: var(--sky); }
.image-card, .staff-card { overflow: hidden; }
.image-card-body { padding: var(--space-3); background: var(--surface); }
.table-scroll { border: 1px solid var(--stone); box-shadow: var(--shadow-sm); }
.table-scroll thead th { background: var(--sea-deep); color: #fff; }
.table-scroll tbody tr:nth-child(even) td { background: var(--tint); }
.site-footer { background: var(--sea-deep); }
.footer-top { border-top: 4px solid var(--gold); }

@media (max-width: 899px) {
  .header-inner { height: 64px; }
  .hero, .hero--tall { min-height: 560px; }
  .hero-text h1 { max-width: 12ch; }
}