/* ==========================================================================
   AVECINA INTERNATIONAL SCHOOL — PUBLIC SITE REFINEMENT LAYER
   --------------------------------------------------------------------------
   Loaded LAST on visitor-facing pages only. Never loaded on login.html,
   portal.html or any authenticated staff/admin surface.

   Intent: replace the generic "template" treatment (glass navbars, radial
   glow washes, pill buttons, 24px rounded cards, filled icon chips, numbered
   circle badges, hover-lift everywhere) with an editorial, print-derived
   identity drawn from the school crest: deep shield navy, pencil green,
   flame red, on warm paper.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE & TOKENS — sampled from the crest
   -------------------------------------------------------------------------- */
:root,
body {
  /* Crest */
  --ink: #141a24;           /* shield outline — primary text */
  --ink-soft: #4d5665;      /* secondary text */
  --ink-faint: #646d7b;     /* captions, meta — 4.93:1 on paper (WCAG AA) */
  --navy: #16305f;          /* shield field, deepened for type */
  --navy-deep: #0f2345;
  /* Text that sits ON --navy / --navy-deep. Those two invert between themes,
     so anything painted over them needs a foreground that inverts with them —
     a hardcoded #ffffff turns white-on-pale-blue the moment dark mode is on. */
  --on-navy: #ffffff;
  --on-navy-deep: #ffffff;
  --green: #2f6b43;         /* pencil */
  --green-deep: #22512f;
  --ember: #a8212b;         /* flame — used once per view, never decoratively */

  /* Paper */
  --paper: #faf8f4;
  --paper-sunk: #f3efe7;
  --paper-raised: #ffffff;
  --rule: #e2dbcd;          /* warm hairline */
  --rule-strong: #cfc5b2;   /* hairlines ONLY — never a text colour */
  --numeral: #8d8068;       /* display figures >=24px — 3.65:1 on paper */

  /* Type */
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Remapped legacy tokens so untouched components inherit the new identity */
  --primary: var(--navy);
  --primary-hover: var(--navy-deep);
  --secondary: var(--green);
  --accent: var(--green);
  --accent-hover: var(--green-deep);
  --bg-light: var(--paper);
  --text-dark: var(--ink);
  --text-muted: var(--ink-soft);
  --surface: var(--paper-raised);
  --card-bg: var(--paper-raised);
  --border-color: var(--rule);
  --border: var(--rule);

  --radius: 2px;
  --measure: 68ch;
}

body.dark-theme,
:root.dark-theme,
.site-page.dark-theme {
  --ink: #f2efe9;
  --ink-soft: #a9b0bb;
  --ink-faint: #7f8794;
  --navy: #b9cdf0;
  --navy-deep: #d7e3f7;
  --on-navy: #0b1220;
  --on-navy-deep: #0b1220;
  --green: #74b98c;
  --green-deep: #8fcba3;
  --ember: #e4727a;

  --paper: #0b0e13;
  --paper-sunk: #0f131a;
  --paper-raised: #141922;
  --rule: #272e3a;
  --rule-strong: #39414f;
  --numeral: #8f9ba9;

  --primary: var(--navy);
  --primary-hover: var(--navy-deep);
  --secondary: var(--green);
  --accent: var(--green);
  --bg-light: var(--paper);
  --text-dark: var(--ink);
  --text-muted: var(--ink-soft);
  --surface: var(--paper-raised);
  --card-bg: var(--paper-raised);
  --border-color: var(--rule);
  --border: var(--rule);
}

/* --------------------------------------------------------------------------
   2. FOUNDATION
   -------------------------------------------------------------------------- */
body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0125rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Kill the radial "glow" washes that read as template decoration. */
.site-page,
.site-page.dark-theme {
  background: var(--paper) !important;
}

.site-page .hero::before,
.site-page .page-header::before {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY — serif display against a quiet sans
   -------------------------------------------------------------------------- */
/* Font only — colour is deliberately left to each page so headings sitting on
   photography, dark bands or the footer keep their own contrast. */
h1, h2, h3, h4, h5,
.section-header h2,
.principles-section-title,
.leadership-name {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.16;
}

/* The base pages set `* { font-family: Inter }`, which beats inheritance on
   the <span> wrappers used for i18n inside headings — so re-inherit onto them
   explicitly or every heading silently falls back to the sans. */
h1 span, h1 em, h1 strong,
h2 span, h2 em, h2 strong,
h3 span, h3 em, h3 strong,
h4 span, h4 em, h4 strong,
h5 span, h5 em, h5 strong,
.principles-section-title span,
.leadership-quote span,
.leadership-quote em,
.editorial-caption span,
.brand span span {
  font-family: inherit !important;
}

h1 { font-size: clamp(2.4rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
h4 { font-size: 1.14rem; line-height: 1.3; }

/* A readable measure, scoped to prose regions so forms, tables and footers
   keep their own widths. */
.intro-section p,
.academics-section p,
.facilities-section p,
.activities-section p,
.arts-section p,
.nature-section p,
.visit-section p,
.section-header p,
.editorial-copy p {
  max-width: var(--measure);
}

/* Section eyebrow: small caps + a short rule, not a coloured pill. */
.section-kicker {
  display: block !important;
  font-family: var(--font-body);
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--ink-faint) !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.section-header {
  margin-bottom: 56px !important;
  max-width: 760px;
}

.section-header h2 {
  color: var(--ink) !important;
  font-weight: 400 !important;
}

.section-header p {
  font-size: 1.06rem;
  color: var(--ink-soft);
  margin-top: 14px;
}

/* Sub-headings inside light content sections share one ink, so the page stops
   alternating between navy and near-black for no reason. */
.intro-section h2, .intro-section h3, .intro-section h4,
.academics-section h2, .academics-section h3, .academics-section h4,
.facilities-section h2, .facilities-section h3, .facilities-section h4,
.activities-section h2, .activities-section h3, .activities-section h4,
.arts-section h2, .arts-section h3, .arts-section h4,
.nature-section h2, .nature-section h3, .nature-section h4,
.visit-section h2, .visit-section h3, .visit-section h4 {
  color: var(--ink) !important;
  font-weight: 500 !important;
}

/* Section-level headings stay at the lighter display weight; only sub-heads
   step up to 500. */
.intro-section h2,
.academics-section h2,
.facilities-section h2,
.activities-section h2,
.arts-section h2,
.nature-section h2,
.visit-section h2,
.section-header h2 {
  font-weight: 400 !important;
}

/* Centred headings are the single loudest template tell — left-align them. */
.principles-section-title,
.arts-section .section-header,
.nature-section .section-header,
.facilities-section .section-header,
.academics-section .section-header,
.activities-section .section-header {
  text-align: left !important;
}

.principles-section-title {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin-bottom: 44px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   4. NAVBAR — solid paper, hairline rule, engraved wordmark
   -------------------------------------------------------------------------- */
.navbar,
.site-page .navbar,
body.dark-theme .navbar,
.site-page.dark-theme .navbar {
  background: var(--paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--rule) !important;
}

.nav-container { height: 78px; }

.brand span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.22rem;
  letter-spacing: 0.015em;
  text-transform: none;
  color: var(--ink);
}

/* Phase 2E: the wordmark is two-tone again, at the school's request — "Avecina"
   in ink, "School" in the brand green. This reverses the Phase 1 decision to
   flatten it to one colour; it is the school's own brand treatment to make.
   `--green` is theme-aware (#2f6b43 light, #74b98c dark), so both modes keep
   contrast: 5.97:1 on paper, and the dark-mode value on the dark surface. */
.brand .brand-school,
.drawer-brand .brand-school {
  color: var(--green) !important;
  font-weight: 600;
}

.nav-links > .nav-item > a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.nav-links > .nav-item > a:hover { color: var(--ink); }

.dropdown {
  border-radius: var(--radius) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 12px 30px -18px rgba(20, 26, 36, 0.35) !important;
  background: var(--paper-raised) !important;
}

.dropdown a {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.theme-toggle-btn,
.drawer-toggle-btn {
  border-radius: var(--radius) !important;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink-soft) !important;
}

/* --------------------------------------------------------------------------
   5. BUTTONS — squared, letterspaced, no lift, no glow
   -------------------------------------------------------------------------- */
.btn,
.hero-link {
  border-radius: var(--radius) !important;
  font-family: var(--font-body);
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 28px !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover,
.hero-link:hover {
  transform: none !important;
  box-shadow: none !important;
}

.btn-accent,
.btn-primary,
body.dark-theme .btn-accent {
  background: var(--green) !important;
  color: #ffffff !important;
  border: 1px solid var(--green) !important;
}

.btn-accent:hover,
.btn-primary:hover,
body.dark-theme .btn-accent:hover {
  background: var(--green-deep) !important;
  border-color: var(--green-deep) !important;
  color: #ffffff !important;
}

/* The dark-theme green is a tint, so it carries dark type, not white. */
body.dark-theme .btn-accent,
body.dark-theme .btn-primary,
.site-page.dark-theme .btn-accent,
.site-page.dark-theme .btn-primary {
  color: #0b0e13 !important;
  font-weight: 700 !important;
}

body.dark-theme .btn-accent:hover,
body.dark-theme .btn-primary:hover,
.site-page.dark-theme .btn-accent:hover,
.site-page.dark-theme .btn-primary:hover {
  color: #0b0e13 !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule-strong) !important;
}

.btn-outline:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

body.dark-theme .btn-outline {
  color: var(--ink) !important;
  border-color: var(--rule-strong) !important;
}

body.dark-theme .btn-outline:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

#nav-portal-btn {
  background: transparent !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 18px !important;
}

#nav-portal-btn:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

.jump-links a {
  border-radius: var(--radius) !important;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em;
  padding: 11px 16px !important;
}

.jump-links a:hover {
  background: transparent !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   6. HERO — the card dissolves; type sits on a bottom scrim
   -------------------------------------------------------------------------- */
/* Interior pages reuse `.hero` as a plain text header, so the slider-specific
   padding is scoped to the homepage section by id. */
.hero,
body.dark-theme .hero,
.site-page .page-header,
.site-page.dark-theme .page-header {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* --- Interior page headers -------------------------------------------------
   Several pages shipped these as saturated gradient bands with white type.
   They are unified here into one quiet paper masthead with ink type, so every
   interior page opens the same way. Colours are forced because the originals
   assume a dark band. */
header.hero,
.site-page .page-header,
.page-header {
  padding: 124px 0 76px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--rule) !important;
}

header.hero h1,
.page-header h1 {
  color: var(--ink) !important;
  font-weight: 400 !important;
}

header.hero p,
.page-header p {
  color: var(--ink-soft) !important;
  opacity: 1 !important;
}

/* The rounded badge above the title — a filled pill on a coloured band —
   becomes a letterspaced standfirst. Inline styles on these require the
   property-level override. */
.hero-badge,
.policy-hero-badge,
.page-header > div[style] {
  display: inline-block !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  color: var(--ink-faint) !important;
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  box-shadow: none !important;
}

.hero-badge i,
.policy-hero-badge i,
.page-header > div[style] i {
  display: none !important;
}

/* Interior section headings share the homepage's ink so the site reads as one
   document rather than alternating navy and near-black page to page. */
.page-section h2, .page-section h3, .page-section h4,
.policy-section h2, .policy-section h3,
.policy-hero h1,
.donate-hero h1, .donate-card h3,
.channels-section h2,
.help-card h3, .contact-card h3,
.sen-card h3, .therapy-card h3,
.staff-card h3 {
  color: var(--ink) !important;
  font-weight: 500 !important;
}

.policy-hero {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule) !important;
}

#hero-slider-section {
  padding: 78px 0 0 !important;
  border-bottom: 1px solid var(--rule) !important;
}

.hero-slide { min-height: 640px; height: 76vh; }

.hero-slider-viewport { border-radius: var(--radius) !important; }

/* Two crossed scrims — a bottom lift plus a reading side — so the display
   serif stays legible over bright daylight photography. */
.hero-slide-overlay {
  background:
    linear-gradient(
      to top,
      rgba(10, 14, 20, 0.82) 0%,
      rgba(10, 14, 20, 0.66) 34%,
      rgba(10, 14, 20, 0.36) 60%,
      rgba(10, 14, 20, 0.10) 86%,
      rgba(10, 14, 20, 0.04) 100%
    ),
    linear-gradient(
      to right,
      rgba(10, 14, 20, 0.46) 0%,
      rgba(10, 14, 20, 0.20) 48%,
      rgba(10, 14, 20, 0.00) 80%
    ) !important;
}

html[dir="rtl"] .hero-slide-overlay {
  background:
    linear-gradient(
      to top,
      rgba(10, 14, 20, 0.82) 0%,
      rgba(10, 14, 20, 0.66) 34%,
      rgba(10, 14, 20, 0.36) 60%,
      rgba(10, 14, 20, 0.10) 86%,
      rgba(10, 14, 20, 0.04) 100%
    ),
    linear-gradient(
      to left,
      rgba(10, 14, 20, 0.46) 0%,
      rgba(10, 14, 20, 0.20) 48%,
      rgba(10, 14, 20, 0.00) 80%
    ) !important;
}

.hero-floating-card,
html[dir="rtl"] .hero-floating-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 640px;
  margin: auto 0 72px 76px;
}

html[dir="rtl"] .hero-floating-card { margin: auto 76px 72px 0; }

.hero-slide { align-items: flex-end; }

.hero-floating-card h1 {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.5rem, 4.6vw, 4rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45) !important;
  margin-bottom: 22px !important;
}

/* No mint-green highlight word — it reads as a template flourish. */
.hero-floating-card h1 span.accent-highlight {
  color: #ffffff !important;
  font-style: italic;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45) !important;
}

.hero-floating-card p {
  font-size: 1.04rem !important;
  line-height: 1.65;
  max-width: 50ch;
  color: rgba(255, 255, 255, 0.86) !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.hero-actions {
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-top: 32px !important;
}

.hero-actions .btn,
.hero-actions .hero-link { min-width: 0 !important; }

/* Secondary hero action becomes a rule-underlined link, not a second button. */
.hero-actions .btn-outline {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}

.hero-actions .btn-outline:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--ink) !important;
}

/* Arrows dock as a square pair in the bottom-right corner instead of floating
   over the headline at mid-height. */
.hero-slider-arrow {
  top: auto !important;
  bottom: 40px !important;
  transform: none !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: var(--radius) !important;
  background: rgba(12, 16, 22, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  font-size: 0.85rem !important;
}

.hero-slider-arrow:hover {
  background: rgba(12, 16, 22, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

.hero-slider-prev { left: auto !important; right: 110px !important; }
.hero-slider-next { right: 48px !important; }

html[dir="rtl"] .hero-slider-prev { right: auto !important; left: 110px !important; }
html[dir="rtl"] .hero-slider-next { right: auto !important; left: 48px !important; }

/* Dots become a measured rule-index, aligned to the text column. */
.hero-slider-dots {
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 22px !important;
  padding-left: 4px;
}

html[dir="rtl"] .hero-slider-dots {
  justify-content: flex-end !important;
  padding: 0 4px 0 0;
}

.hero-dot {
  border-radius: 0 !important;
  width: 30px !important;
  height: 2px !important;
  background: var(--rule-strong) !important;
  border: 0 !important;
}

.hero-dot.active {
  background: var(--ember) !important;
  width: 30px !important;
}

/* --------------------------------------------------------------------------
   7. CARDS & SURFACES — hairlines instead of shadows and 24px radii
   -------------------------------------------------------------------------- */
.vm-card,
.principle-item,
.tab-detail-card,
.quick-link-card,
.service-card,
.trust-item,
.ribbon-card,
.form-highlight,
.support-pill,
.pro-photo-card,
.pro-split-banner,
.leadership-card,
.feature-card,
.price-card,
.menu-media-card,
.event-card,
.donate-card,
.help-card,
.contact-card,
.policy-card,
.sen-card,
.therapy-card,
.staff-card,
.site-page .content-block,
.site-page .form-section {
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  background: var(--paper-raised) !important;
  border: 1px solid var(--rule) !important;
  transition: border-color 0.2s ease !important;
}

.vm-card:hover,
.principle-item:hover,
.tab-detail-card:hover,
.quick-link-card:hover,
.service-card:hover,
.pro-photo-card:hover,
.feature-card:hover,
.price-card:hover,
.event-card:hover,
.donate-card:hover,
.help-card:hover,
.sen-card:hover,
.therapy-card:hover,
.staff-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--rule-strong) !important;
}

.pro-photo-card:hover .media-wrap img { transform: none !important; }

/* Decorative icon chips carry no information — the filled rounded square is
   the clearest template tell, and a stripped glyph just leaves an orphan dot,
   so they come out entirely. */
.vm-card-icon,
.card-icon,
.feature-icon,
.help-card-icon,
.sen-card-icon,
.quick-link-card > i,
.service-card > i,
.traditions-icon {
  display: none !important;
}

/* Principles: hairline-separated entries, not a wall of bordered boxes. */
.principles-grid {
  border-top: 1px solid var(--rule);
}

.principle-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: 28px 28px 30px 0 !important;
  gap: 18px !important;
  align-items: baseline !important;
}

.principle-num {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--rule-strong) !important;
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  display: block !important;
}

.principle-content h4 {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
}

.principle-content p,
.vm-card p,
.traditions-text p {
  font-size: 0.93rem !important;
  color: var(--ink-soft) !important;
}

.vm-card {
  padding: 34px !important;
}

.vm-card h3 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}

/* The principal's message is the page's one human moment — give it rules and
   air rather than another bordered tile. */
.leadership-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: 52px 0 !important;
}

.leadership-title-badge {
  border-radius: var(--radius) !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-faint) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  padding: 0 !important;
}

.leadership-quote {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  max-width: 62ch;
}

.leadership-avatar,
.leadership-portrait-frame {
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   8. MEDIA — square corners, warm hairline, serif captions
   -------------------------------------------------------------------------- */
.editorial-media img,
.academic-photo-frame img,
.tab-feature-media img,
.tab-supporting-media img,
.tab-gallery-item img,
.visit-figure img,
.pro-photo-card .media-wrap,
.pro-split-banner-media,
.facility-hero-media img,
.facility-card-editorial img {
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.editorial-media,
.academic-photo-frame,
.tab-feature-media,
.tab-supporting-media,
.tab-gallery-item,
.visit-figure,
.pro-split-banner-media,
.facility-hero-media {
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  border-color: var(--rule) !important;
}

.editorial-caption,
.visit-figure figcaption,
.tab-gallery-item figcaption {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: 0.88rem !important;
  color: var(--ink-faint) !important;
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   9. SECTION RHYTHM — vary the vertical spacing so sections stop reading
      as identical stacked blocks, and separate with rules not colour bands.
   -------------------------------------------------------------------------- */
.intro-section,
.academics-section,
.facilities-section,
.activities-section,
.arts-section,
.nature-section,
.visit-section {
  background: var(--paper) !important;
  border-top: 1px solid var(--rule);
}

.intro-section { padding: 104px 0 88px !important; border-top: 0; }
.academics-section { padding: 88px 0 !important; }
.facilities-section { padding: 104px 0 !important; }
.activities-section { padding: 88px 0 !important; }
.arts-section { padding: 104px 0 !important; }
.nature-section { padding: 88px 0 !important; }
.visit-section { padding: 104px 0 112px !important; }

.vision-mission-grid { gap: 28px !important; }
.principles-grid { gap: 20px !important; }

/* --------------------------------------------------------------------------
   10. ACTIVITY TABS — understated rules rather than filled pills
   -------------------------------------------------------------------------- */
.activities-tabs-nav {
  border-bottom: 1px solid var(--rule);
  gap: 4px !important;
}

.activity-tab-btn {
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--ink-faint) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 16px 18px !important;
  box-shadow: none !important;
}

.activity-tab-btn:hover { color: var(--ink) !important; }

.activity-tab-btn.active {
  background: transparent !important;
  color: var(--ink) !important;
  border-bottom-color: var(--ember) !important;
}

/* Pill filter / form-switcher rows on the calendar and e-forms pages get the
   same rule-underline treatment as the homepage tabs. */
.filter-tabs { border-bottom: 1px solid var(--rule); gap: 4px !important; }

.filter-btn,
.tab-btn {
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--ink-faint) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 15px 16px !important;
  box-shadow: none !important;
}

.filter-btn:hover,
.tab-btn:hover {
  background: transparent !important;
  color: var(--ink) !important;
  border-bottom-color: var(--rule-strong) !important;
}

.filter-btn.active,
.tab-btn.active {
  background: transparent !important;
  color: var(--ink) !important;
  border-bottom-color: var(--ember) !important;
}

.filter-btn i,
.tab-btn i { display: none !important; }

/* Event / status chips: a small caps label with a hairline, not a tinted pill. */
.event-badge,
.deletion-badge {
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid var(--rule-strong) !important;
  padding: 1px 0 1px 9px !important;
  color: var(--ink-faint) !important;
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

.event-badge.badge-term { border-left-color: var(--navy) !important; }
.event-badge.badge-assembly { border-left-color: var(--green) !important; }
.event-badge.badge-outing { border-left-color: var(--ember) !important; }

.stage-number {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  color: var(--rule-strong) !important;
  background: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* --------------------------------------------------------------------------
   11. FORMS — squared fields, no inner glow
   -------------------------------------------------------------------------- */
input, select, textarea,
.site-page .form-group input,
.site-page .form-group select,
.site-page .form-group textarea,
.site-page .input-group input,
.footer-form input,
.footer-form textarea {
  border-radius: var(--radius) !important;
  font-family: var(--font-body);
  box-shadow: none !important;
}

.site-page .file-upload,
.site-page .radio-label,
.site-page .check-label {
  border-radius: var(--radius) !important;
  background: var(--paper-sunk) !important;
}

/* --------------------------------------------------------------------------
   12. FOOTER — deep ink, serif column heads
   -------------------------------------------------------------------------- */
footer,
.site-page footer {
  background: var(--navy-deep) !important;
  border-top: 0 !important;
  margin-top: 0 !important;
  padding: 88px 0 0 !important;
}

.site-page footer::before { display: none !important; }

body.dark-theme footer,
.site-page.dark-theme footer {
  background: #080b11 !important;
  border-top: 1px solid var(--rule) !important;
}

.footer-col h4 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 1.02rem !important;
  color: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding-bottom: 14px;
  margin-bottom: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-col h4 i { display: none !important; }

.footer-col p,
.footer-col a,
.contact-list li {
  color: rgba(255, 255, 255, 0.66) !important;
  font-size: 0.92rem !important;
}

.footer-col a:hover { color: #ffffff !important; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  margin-top: 56px !important;
  padding: 26px 0 !important;
  color: rgba(255, 255, 255, 0.46) !important;
  font-size: 0.84rem !important;
}

/* --------------------------------------------------------------------------
   13. MISC CHROME
   -------------------------------------------------------------------------- */
.back-to-top {
  border-radius: var(--radius) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-drawer,
.drawer-footer { background: var(--paper) !important; }

/* The drawer header is a dark block with white type — flatten the gradient but
   keep it dark so its contents stay legible. */
.drawer-header {
  background: var(--navy-deep) !important;
  border-bottom: 0 !important;
}

body.dark-theme .drawer-header,
.site-page.dark-theme .drawer-header { background: #080b11 !important; }

.drawer-nav-item,
.drawer-theme-btn,
.drawer-logout-btn { border-radius: var(--radius) !important; }

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-floating-card,
  html[dir="rtl"] .hero-floating-card {
    margin: auto 24px 56px !important;
    max-width: none;
  }

  .intro-section,
  .academics-section,
  .facilities-section,
  .activities-section,
  .arts-section,
  .nature-section,
  .visit-section { padding: 64px 0 !important; }

  .section-header { margin-bottom: 36px !important; }
}

@media (max-width: 640px) {
  body { font-size: 0.97rem; }

  .hero-slide { min-height: 540px; height: auto; }

  .hero-floating-card h1 {
    font-size: clamp(2rem, 9vw, 2.6rem) !important;
  }

  .site-page .page-header h1,
  .site-page .hero h1 {
    font-size: clamp(2rem, 9vw, 2.6rem) !important;
    line-height: 1.1;
  }

  .hero-actions .btn { width: auto !important; }

  .btn,
  .hero-link { padding: 13px 22px !important; font-size: 0.74rem !important; }

  .activity-tab-btn { padding: 13px 13px !important; font-size: 0.72rem !important; }

  footer, .site-page footer { padding: 56px 0 0 !important; }
}

/* --------------------------------------------------------------------------
   15. MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   16. ACCESSIBILITY CORRECTIONS (Phase 1E)
   --------------------------------------------------------------------------
   Four defects introduced by this layer, corrected without altering the
   editorial character. Ratios are measured against --paper #faf8f4 and
   --navy-deep #0f2345 with alpha compositing applied.
   ========================================================================== */

/* (a) Display figures previously used --rule-strong (a hairline colour) as
       text at 1.61:1. Numerals >=24px now use --numeral (3.65:1, AA large). */
.principle-num,
.stage-number {
  color: var(--numeral) !important;
}

/* (b) .stage-number renders at ~12.8px, which is NOT large text, so it needs
       the full 4.5:1 and takes the body ink instead (6.98:1). */
.stage-number {
  color: var(--ink-soft) !important;
}

/* (c) The footer baseline was rgba(255,255,255,0.46) = 4.37:1 over --navy-deep,
       just under AA. 0.62 gives 6.78:1 and still reads as de-emphasised.
       (The footer body links at 0.66 already passed at 7.49:1 and are unchanged.) */
.footer-bottom {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* (d) Hero slider dots were 30x2px, far below the 24x24 minimum target size
       (WCAG 2.2 SC 2.5.8). The visual stays a 2px rule; the hit area is now a
       transparent 24px-tall box centred on it. */
.hero-slider-dots {
  align-items: center !important;
  gap: 0 !important;
}

.hero-dot {
  position: relative;
  height: 24px !important;
  width: 44px !important;
  min-height: 24px;
  min-width: 24px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.hero-dot::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background: var(--rule-strong);
  transition: background-color 0.2s ease;
}

.hero-dot.active::after { background: var(--ember); }
.hero-dot:hover::after  { background: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Keyboard accessibility: a visible focus ring on every interactive element.
   Uses :focus-visible so pointer users never see it.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ember) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

.hero-slide-overlay ~ * a:focus-visible,
.hero-floating-card a:focus-visible,
.hero-slider-arrow:focus-visible,
.hero-dot:focus-visible,
footer a:focus-visible,
footer button:focus-visible {
  outline-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Skip link — WCAG 2.4.1 Bypass Blocks
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 2000;
  padding: 14px 20px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Visually-hidden label text (kept available to screen readers)
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Public form status messages (success / failure live regions)
   -------------------------------------------------------------------------- */
.form-status {
  margin: 14px 0 0;
  padding: 13px 16px;
  border-radius: 2px;
  font-size: 0.92rem;
  line-height: 1.5;
  border-left: 3px solid;
}

.form-status-success {
  background: rgba(47, 107, 67, 0.08);
  border-left-color: var(--green);
  color: var(--ink);
}

.form-status-error {
  background: rgba(168, 33, 43, 0.07);
  border-left-color: var(--ember);
  color: var(--ink);
}

.footer-form .form-status {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.footer-form .form-status-error { border-left-color: #e4727a; }
.footer-form .form-status-success { border-left-color: #74b98c; }

button[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* Slides 2+ carry a visual headline but must not be additional <h1>s. */
.hero-floating-card .hero-headline {
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45);
  margin-bottom: 22px;
  max-width: none;
}

.hero-floating-card .hero-headline span.accent-highlight {
  color: #ffffff;
  font-style: italic;
}

/* Carousel pause control (WCAG 2.2.2) — sits with the slide index. */
.hero-autoplay-toggle {
  width: 24px;
  height: 24px;
  margin-right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink-soft);
  font-size: 0.6rem;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-autoplay-toggle:hover {
  border-color: var(--ink);
  color: var(--ink);
}

@media (max-width: 640px) {
  .hero-floating-card .hero-headline { font-size: clamp(2rem, 9vw, 2.6rem); }
}