/* =====================================================================
   Daiga Learning — styles.css
   Mobile-first. Breakpoints: 600px, 900px, 1200px.

   PALETTE: "Porcelain Blue and Persimmon"
     --cream          #F8F6F1  page background
     --white          #FFFFFF
     --sand           #EFEAE0  alternate section background
     --blue           #245394  porcelain blue (primary)
     --blue-deep      #17325C  deep blue (headings on light, focus ring)
     --blue-tint      #E1EAF5  light blue tint
     --ink            #17212B  body text, footer background
     --text-mid       #3D4B5C  secondary text
     --persimmon      #E4572E  DECORATIVE ONLY (bars, badge outlines, check badges, shapes)
     --persimmon-text #A8360F  persimmon-coloured words (labels, badge text, errors)
     --persimmon-tint #FBE9E3
     --border         #D6CDC0  DECORATIVE dividers and card outlines only (1.5:1)
     --field-border   #6E7682  form fields and controls
     --coral-on-ink   #FFAA8C  footer tagline on ink only

   CONTRAST (WCAG 2.2 AA)
     ink on cream 15.1:1          mid-gray on cream 8.2:1      mid-gray on white 8.9:1
     blue on cream 7.1:1          white on blue 7.7:1          white on deep blue 12.7:1
     blue on blue tint 6.3:1      persimmon text on cream 6.1:1
     persimmon text on white 6.6:1                             persimmon text on tint 5.6:1
     field border on white 4.6:1, on cream 4.2:1 (>= 3:1 for UI components)
     light coral on ink 8.8:1     focus ring deep blue on cream 11.8:1, white on ink 16.3:1
     Decorative persimmon on cream 3.4:1 (non-text decoration only, never text,
     never small white text on persimmon). #D6CDC0 is 1.5:1: never for fields/controls.
   No yellow, gold or amber anywhere. Colour never carries meaning alone: every
   state also has text, an icon, an underline, a border or a shape change.
   ===================================================================== */

:root {
  --cream: #F8F6F1;
  --white: #FFFFFF;
  --sand: #EFEAE0;
  --blue: #245394;
  --blue-deep: #17325C;
  --blue-tint: #E1EAF5;
  --ink: #17212B;
  --text-mid: #3D4B5C;
  --persimmon: #E4572E;
  --persimmon-text: #A8360F;
  --persimmon-tint: #FBE9E3;
  --border: #D6CDC0;
  --field-border: #6E7682;
  --coral-on-ink: #FFAA8C;
  --footer-text: #DCE1E8;

  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-cjk: "PingFang HK", "Noto Sans HK", "Noto Serif HK", "Microsoft JhengHei", serif;
  --font-heading: var(--font-serif);
  --font-body: var(--font-sans);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(23, 33, 43, 0.06), 0 2px 8px rgba(23, 33, 43, 0.05);
  --shadow: 0 2px 4px rgba(23, 33, 43, 0.04), 0 10px 30px rgba(23, 33, 43, 0.08);
  --line-w: 1px;

  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 4.25rem;
  --section-pad: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
  --body-lh: 1.7;
  --letter: normal;
  --word: normal;
  --para-gap: 1em;
  --transition: 0.2s ease;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--body-lh);
  letter-spacing: var(--letter);
  word-spacing: var(--word);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; -webkit-user-drag: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--blue-deep);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 var(--para-gap); }
p:last-child { margin-bottom: 0; }

[lang="zh-yue"] { font-family: var(--font-cjk); letter-spacing: 0; }

a { color: var(--blue); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--blue-deep); text-decoration-thickness: 0.14em; }
/* Links inside running text are always underlined */
p a, dd a, li > span a { text-decoration: underline; }

:where(ul[role="list"]) { list-style: none; margin: 0; padding: 0; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--white);
  border-radius: 4px;
}
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible, main:focus-visible { outline-offset: 6px; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 1000;
  background: var(--blue-deep); color: var(--white);
  padding: 0.75rem 1.25rem; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: underline;
}
.skip-link:focus { top: calc(0.75rem + env(safe-area-inset-top, 0px)); color: var(--white); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.container-narrow { max-width: 860px; }
main { position: relative; display: block; }
.top-sentinel { position: absolute; top: 400px; left: 0; width: 1px; height: 1px; pointer-events: none; }
.bottom-sentinel { height: 1px; margin-top: -1px; pointer-events: none; }

.section { padding-block: var(--section-pad); }
.section-sand { background: var(--sand); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

.section-label {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 0.75rem;
  color: var(--persimmon-text);
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.section-label::before {
  content: ""; width: 28px; height: 3px; border-radius: 3px;
  background: var(--persimmon); flex: none;
}

.section-title { position: relative; }
.section-intro { color: var(--text-mid); font-size: 1.125rem; max-width: 40rem; }

/* Heading "copy link" anchor */
.heading-anchor {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: 0.25rem; vertical-align: middle;
  color: var(--blue); border-radius: var(--radius-sm);
  opacity: 0; transition: opacity var(--transition);
}
.section-title:hover .heading-anchor,
.heading-anchor:focus-visible { opacity: 1; }
.heading-anchor:hover { background: var(--blue-tint); }
@media (hover: none) { .heading-anchor { opacity: 0.55; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.625rem 1.25rem;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 4px 14px rgba(36, 83, 148, 0.25); }
.btn-primary:hover { background: var(--blue-deep); color: var(--white); }
.btn-outline { background: var(--white); color: var(--blue-deep); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue-tint); color: var(--blue-deep); }
.btn-outline-light { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.btn-lg { min-height: 52px; padding: 0.875rem 1.75rem; font-size: 1.0625rem; }
.btn-block { display: flex; width: 100%; }

.text-link { font-weight: 700; text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(23, 33, 43, 0.06);
  padding-top: env(safe-area-inset-top, 0px);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.5rem; min-height: var(--header-h);
}

.logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 44px; text-decoration: none; color: var(--blue-deep);
  user-select: none;
}
.logo-mark {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--blue); color: var(--white);
  font-size: 1rem; font-weight: 700; line-height: 1; white-space: nowrap;
  box-shadow: inset 0 -4px 0 var(--blue-deep);
}
.logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; line-height: 1.1; white-space: nowrap; }
.logo:hover { color: var(--blue); }
@media (max-width: 439px) {
  .logo-text-extra { display: none; }
  .header-inner { gap: 0.375rem; }
  .header-actions { gap: 0.375rem; }
  .btn-header-cta { padding-inline: 0.75rem; }
}
@media (max-width: 374px) {
  .logo-text { display: none; }
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.a11y-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-width: 44px; min-height: 44px; padding: 0 0.5rem;
  border: 2px solid var(--blue); border-radius: 12px;
  background: var(--white); color: var(--blue-deep);
  font: inherit; font-weight: 700; cursor: pointer;
}
.a11y-trigger:hover { background: var(--blue-tint); }
.a11y-icon { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1; }
.a11y-trigger-text { display: none; font-size: 0.95rem; }

.btn-header-cta { padding-inline: 0.875rem; font-size: 0.95rem; white-space: nowrap; }

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--blue); border-radius: 12px;
  background: var(--white); color: var(--blue-deep); cursor: pointer;
}
.menu-toggle-bars { position: relative; width: 20px; height: 14px; }
.menu-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px;
  background: currentColor; transition: transform var(--transition), opacity var(--transition), top var(--transition);
}
.menu-toggle-bars span:nth-child(1) { top: 0; }
.menu-toggle-bars span:nth-child(2) { top: 5.75px; }
.menu-toggle-bars span:nth-child(3) { top: 11.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(1) { top: 5.75px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(3) { top: 5.75px; transform: rotate(-45deg); }

/* Mobile / tablet nav panel (<= 900px) */
.site-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 16px 30px rgba(23, 33, 43, 0.12);
  max-height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px));
  max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-header.menu-open .site-nav { display: block; }
.nav-list {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1rem max(var(--gutter), env(safe-area-inset-right, 0px)) calc(1.25rem + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.nav-link {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 52px; padding: 0.5rem 1rem;
  border-left: 4px solid transparent; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.125rem;
}
.nav-link:hover { background: var(--white); color: var(--blue-deep); }
.nav-check { display: none; color: var(--blue); flex: none; }
.nav-link[aria-current="location"] {
  font-weight: 700; color: var(--blue-deep);
  background: var(--blue-tint); border-left-color: var(--blue);
}
.nav-link[aria-current="location"] .nav-check { display: inline-flex; }
.label-desktop { display: none; }
.nav-menu-cta { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.nav-menu-cta .nav-link-contact { border-left: 2px solid transparent; color: var(--white); justify-content: center; font-size: 1.0625rem; }
.nav-menu-cta .nav-link-contact:hover { background: var(--blue-deep); color: var(--white); }
.nav-menu-cta .nav-link-contact[aria-current="location"] { background: var(--blue-deep); color: var(--white); border-color: var(--blue-deep); text-decoration: underline; }

@media (min-width: 1100px) {
  .a11y-trigger { padding: 0 0.875rem; }
  .a11y-trigger-text { display: inline; }
}

/* Desktop nav (> 900px) */
@media (min-width: 901px) {
  :root { --header-h: 4.75rem; }
  .menu-toggle { display: none; }
  .header-inner { flex-wrap: nowrap; gap: 1rem; }
  .site-nav {
    display: block; position: static; background: none; border: 0; box-shadow: none;
    max-height: none; overflow: visible; margin-left: auto;
  }
  .nav-list { flex-direction: row; align-items: center; gap: 0.25rem; padding: 0; }
  .nav-link {
    position: relative; min-height: 44px; padding: 0.5rem 0.75rem;
    border-left: 0; font-size: 1rem; background: none;
  }
  .nav-link:hover { background: none; color: var(--blue); }
  .nav-link::after {
    content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 4px;
    height: 3px; border-radius: 3px; background: var(--blue);
    transform: scaleX(0); transition: transform var(--transition);
  }
  .nav-link:hover::after { transform: scaleX(0.5); }
  .nav-link[aria-current="location"] { background: none; color: var(--blue-deep); }
  .nav-link[aria-current="location"]::after { transform: scaleX(1); }
  .nav-link[aria-current="location"] .nav-check { display: none; }
  .label-desktop { display: inline; }
  .label-mobile { display: none; }
  .nav-menu-cta { display: none; }
  .header-actions { margin-left: 0.25rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: clip;
  padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(3.5rem, 2.5rem + 6vw, 7rem);
}
.hero-shapes { position: absolute; inset: 0; pointer-events: none; }
.shape { position: absolute; border-radius: 50%; }
.shape-a { width: 420px; height: 420px; right: -160px; top: -140px; background: var(--blue-tint); }
.shape-b { width: 220px; height: 220px; left: -90px; bottom: -80px; background: var(--persimmon-tint); }
.shape-c { width: 18px; height: 18px; right: 12%; bottom: 14%; border: 3px solid var(--persimmon); background: transparent; }

.hero-grid { position: relative; display: grid; gap: 2.5rem; align-items: center; }
.hero-copy h1 { max-width: 14ch; color: var(--blue-deep); }
.hero-lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.35rem); color: var(--text-mid); max-width: 34rem; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.hero-points { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; color: var(--text-mid); font-weight: 500; }
.hero-points li { display: inline-flex; align-items: center; gap: 0.5rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--persimmon); flex: none; }

.hero-card {
  position: relative;
  background: var(--white);
  border: var(--line-w) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  max-width: 28rem;
}
.hero-card::before {
  content: ""; position: absolute; left: clamp(1.5rem, 1rem + 2vw, 2.25rem); top: 0;
  width: 48px; height: 4px; border-radius: 0 0 4px 4px; background: var(--persimmon);
}
.hero-card-chars { font-size: clamp(3rem, 2.5rem + 2vw, 4rem); line-height: 1; color: var(--blue); margin-bottom: 0.25rem; font-weight: 700; }
.hero-card-roman { color: var(--persimmon-text); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 1rem; }
.hero-card-roman sup { font-size: 0.65em; }
.hero-card-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--blue-deep); margin-bottom: 0.5rem; }
.hero-card p:not(.hero-card-chars):not(.hero-card-roman):not(.hero-card-title) { color: var(--text-mid); }

/* ---------- Story ---------- */
.story-grid { display: grid; gap: 2.5rem; align-items: start; }
.story-body { max-width: 42rem; }
.story-body p { color: var(--ink); }
.story-lead {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.55; color: var(--blue-deep) !important;
}
.story-figure {
  margin: 0;
  background: var(--white);
  border: var(--line-w) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2rem 1.5rem;
  text-align: center;
}
.story-figure { container-type: inline-size; }
/* The eight characters stay on one line: the size scales with the card width. */
.story-figure-chars {
  font-size: 1.6rem;
  font-size: min(3.25rem, 10.5cqw);
  line-height: 1.35; font-weight: 700; white-space: nowrap;
  color: var(--blue); letter-spacing: 0.1em; margin-bottom: 1rem;
}
.story-figure figcaption { color: var(--text-mid); font-style: italic; }
.story-figure figcaption::before {
  content: ""; display: block; width: 36px; height: 3px; border-radius: 3px;
  background: var(--persimmon); margin: 0 auto 1rem;
}

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 1.25rem; }
.card {
  height: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--white);
  border: var(--line-w) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.card p { color: var(--text-mid); }
.card .badge { margin-top: auto; }
.card-icon {
  position: relative; display: grid; place-items: center;
  width: 72px; height: 72px; margin-bottom: 1.25rem;
  border-radius: 20px; background: var(--blue-tint); color: var(--blue);
}
.card-badge-check {
  position: absolute; right: -6px; bottom: -6px;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--persimmon); color: var(--white);
  border: 3px solid var(--white);
}

.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border: 1.5px solid var(--persimmon); border-radius: 999px;
  background: var(--persimmon-tint); color: var(--persimmon-text);
  font-weight: 700; font-size: 0.875rem; line-height: 1.4;
}
.badge-soon::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--persimmon-text);
}

.availability-note {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-top: 2rem; color: var(--text-mid); font-weight: 500;
}
.availability-note svg { flex: none; color: var(--blue); margin-top: 0.2em; }

/* ---------- Placeholder cards (Teachers, Schedule) ---------- */
.placeholder-card {
  max-width: 44rem;
  background: var(--white);
  border: var(--line-w) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}
.placeholder-card .badge { margin-bottom: 1rem; }
.placeholder-text { font-size: 1.125rem; color: var(--text-mid); }

/* Teachers toggle */
.teacher-grid { display: grid; gap: 1.25rem; }
[data-show-profiles="false"] .teacher-grid { display: none; }
[data-show-profiles="true"] .teachers-placeholder { display: none; }
.teacher-card {
  height: 100%; text-align: center;
  background: var(--white);
  border: var(--line-w) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2rem 1.5rem;
}
.teacher-card p { color: var(--text-mid); }
.teacher-photo, .teacher-photo-placeholder {
  width: 160px; height: 160px; border-radius: 50%; margin: 0 auto 1.25rem;
  object-fit: cover; border: 4px solid var(--blue-tint);
}
.teacher-photo-placeholder { background: var(--sand); }
.teacher-role { color: var(--persimmon-text) !important; font-weight: 700; }

/* Schedule toggle */
[data-show-schedule="false"] .schedule-live { display: none; }
[data-show-schedule="true"] .schedule-placeholder { display: none; }
.calendar-wrap {
  position: relative; height: 600px; margin-bottom: 2.5rem;
  border-radius: var(--radius-lg); overflow: hidden;
  border: var(--line-w) solid var(--border); background: var(--white);
}
.calendar-wrap:empty { display: none; }
.calendar-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.class-list-title { margin-bottom: 1rem; }
.class-list { display: grid; gap: 1rem; }
.class-card {
  height: 100%;
  background: var(--white);
  border: var(--line-w) solid var(--border);
  border-left: 5px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
}
.class-card dl { margin: 0; display: grid; gap: 0.35rem; }
.class-card dl div { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.class-card dt { font-weight: 700; color: var(--ink); min-width: 4.5rem; }
.class-card dd { margin: 0; color: var(--text-mid); }

/* ---------- FAQ accordion ---------- */
.accordion { display: grid; gap: 0.75rem; }
.accordion-item {
  background: var(--white);
  border: var(--line-w) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.accordion-item h3 { margin: 0; font-size: inherit; }
.accordion-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 60px; padding: 1rem 1.25rem;
  background: none; border: 0; border-radius: var(--radius);
  font-family: var(--font-heading); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem); font-weight: 700;
  color: var(--blue-deep); text-align: left; cursor: pointer;
}
.accordion-trigger:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.chevron {
  flex: none; color: var(--blue);
  width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--blue-tint);
  transition: transform var(--transition);
}
.accordion-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.accordion-panel { padding: 0 1.25rem 1.25rem; color: var(--text-mid); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 2.5rem; align-items: start; }
.contact-intro > p { color: var(--text-mid); max-width: 32rem; }
.email-reveal { margin-top: 1.5rem; }
.email-reveal-label { font-weight: 700; color: var(--ink) !important; margin-bottom: 0.5rem; }
.email-reveal-result a { font-weight: 700; font-size: 1.0625rem; text-decoration: underline; display: inline-flex; min-height: 44px; align-items: center; }

.form-card {
  background: var(--white);
  border: var(--line-w) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
}
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 700; margin-bottom: 0.4rem; color: var(--ink); }
.field input, .field textarea {
  display: block; width: 100%;
  min-height: 48px; padding: 0.7rem 0.9rem;
  font: inherit; font-size: max(16px, 1rem); line-height: 1.5;
  color: var(--ink); background: var(--white);
  border: 2px solid var(--field-border); border-radius: 12px;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:hover, .field textarea:hover { border-color: var(--blue); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--blue-deep); border-radius: 12px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-width: 3px; border-color: var(--persimmon-text); border-style: solid;
  background: var(--white);
}
.field-hint { font-size: 0.95rem; color: var(--text-mid); margin: 0.4rem 0 0; }
.field-captcha .field-hint { margin: 0 0 0.5rem; }
.field-captcha input { max-width: 10rem; }
.field-error {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0.5rem 0 0; color: var(--persimmon-text); font-weight: 700; font-size: 0.975rem;
}
.field-error::before {
  content: "!"; flex: none; display: grid; place-items: center;
  width: 1.3em; height: 1.3em; margin-top: 0.1em; border-radius: 50%;
  background: var(--persimmon-text); color: var(--white);
  font-size: 0.85em; font-weight: 800; line-height: 1;
}
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.reply-note {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 1rem 0 0; color: var(--text-mid); font-weight: 600; font-size: 1rem;
}
.reply-note svg { flex: none; color: var(--blue); }

.form-status:empty { display: none; }
.form-status {
  margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius);
  border: 2px solid var(--blue); background: var(--blue-tint); color: var(--blue-deep);
  font-weight: 600;
}
.form-status p { margin: 0 0 0.25rem; }
.form-status-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; }
.form-status.is-success .form-status-title::before {
  content: "✓"; display: grid; place-items: center; width: 1.5em; height: 1.5em; flex: none;
  border-radius: 50%; background: var(--blue); color: var(--white); font-size: 0.9em;
}
.form-status.is-error { border-color: var(--persimmon-text); background: var(--persimmon-tint); color: var(--persimmon-text); }
.form-status.is-error .form-status-title::before {
  content: "!"; display: grid; place-items: center; width: 1.5em; height: 1.5em; flex: none;
  border-radius: 50%; background: var(--persimmon-text); color: var(--white); font-size: 0.9em;
}

/* ---------- Back to top ---------- */
/* The dock is the last child of <main> and sticky to the viewport bottom, so the
   button rides along while scrolling but stops at the end of <main>: it is
   automatically lifted above the footer and never covers it. */
.to-top-dock {
  position: sticky;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  height: 0; z-index: 40;
  pointer-events: none;
}
.to-top {
  position: absolute; bottom: 0;
  right: calc(20px + env(safe-area-inset-right, 0px));
  display: grid; place-items: center;
  width: 3rem; height: 3rem; min-width: 48px; min-height: 48px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--blue); color: var(--white);
  box-shadow: 0 0 0 3px var(--white), 0 6px 18px rgba(23, 33, 43, 0.25);
  cursor: pointer; pointer-events: auto;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--blue-deep); }
.to-top:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 4px; box-shadow: 0 0 0 3px var(--white); }
.to-top-tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; padding: 0.35rem 0.75rem; border-radius: 8px;
  background: var(--ink); color: var(--white); font-size: 0.9rem; font-weight: 600;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition);
}
@media (hover: hover) and (min-width: 900px) {
  .to-top:hover .to-top-tip, .to-top:focus-visible .to-top-tip { opacity: 1; visibility: visible; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink); color: var(--footer-text);
  padding-block: 3.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
}
.site-footer a { color: var(--white); }
.site-footer :focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: none; }
.footer-grid { display: grid; gap: 2rem; }
.footer-name { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; }
.footer-tagline { color: var(--coral-on-ink); max-width: 30rem; }
.footer-nav ul { display: grid; gap: 0.25rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-meta { display: grid; gap: 1rem; align-content: start; }
.footer-meta p { margin: 0; }
.footer-meta a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.email-reveal-dark { margin-top: 0; }
.copyright { color: var(--footer-text); font-size: 0.95rem; }

/* ---------- Dialogs ---------- */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(23, 33, 43, 0.55);
}
.dialog {
  width: 100%; max-width: 36rem;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(23, 33, 43, 0.3);
}
.dialog-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.25rem 1rem 1.5rem; background: var(--white);
  border-bottom: 1px solid var(--border);
}
.dialog-head h2 { margin: 0; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem); }
.dialog-close {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--blue); border-radius: 12px;
  background: var(--white); color: var(--blue-deep); cursor: pointer;
}
.dialog-close:hover { background: var(--blue-tint); }
.dialog-body { padding: 1.25rem 1.5rem 1.5rem; }
.dialog-body h3 { font-size: 1.125rem; margin-top: 1.25rem; margin-bottom: 0.35rem; }
.dialog-body p { color: var(--text-mid); }
.dialog-updated { font-size: 0.95rem; }

.switch-list { display: grid; gap: 0.5rem; margin: 1rem 0 1.25rem; }
.switch {
  display: flex; align-items: center; gap: 0.875rem;
  width: 100%; min-height: 56px; padding: 0.5rem 1rem;
  background: var(--cream); color: var(--ink);
  border: 2px solid var(--field-border); border-radius: 14px;
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.switch:hover { border-color: var(--blue); }
.switch-label { flex: 1; }
.switch-track {
  position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px;
  background: var(--white); border: 2px solid var(--field-border);
  transition: background-color var(--transition);
}
.switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--field-border); transition: transform var(--transition);
}
.switch-state { flex: none; min-width: 2.25rem; font-weight: 700; color: var(--text-mid); text-align: right; }
.switch[aria-checked="true"] { border-color: var(--blue); background: var(--blue-tint); }
.switch[aria-checked="true"] .switch-track { background: var(--blue); border-color: var(--blue); }
.switch[aria-checked="true"] .switch-thumb { background: var(--white); transform: translateX(20px); }
.switch[aria-checked="true"] .switch-state { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 0.2em; }

/* While a dialog is open, the page behind cannot scroll */
html.dialog-open, html.dialog-open body { overflow: hidden; }

/* ---------- Content-protection deterrent (light only) ----------
   Text selection is disabled on the hero and brand areas. This is NOT security,
   and it is switched off whenever any accessibility option is on. */
html:not([data-a11y-any]) .protect-select { -webkit-user-select: none; user-select: none; }

/* ---------- Breakpoints ---------- */
@media (min-width: 600px) {
  .card-grid, .teacher-grid, .class-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .calendar-wrap { height: auto; aspect-ratio: 4 / 3; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 3rem; }
  .hero-card { justify-self: end; }
  .story-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4rem; }
  .story-figure { position: sticky; top: calc(var(--header-h) + 2rem); margin-top: 6rem; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid > li:last-child:nth-child(odd) { grid-column: auto; }
  .teacher-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; }
  .calendar-wrap { aspect-ratio: 16 / 10; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}

@media (min-width: 1200px) {
  .hero-copy h1 { max-width: 15ch; }
}

/* Short landscape phones: keep the menu scrollable and the hero compact */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-block: 2rem 3rem; }
}

/* =====================================================================
   ACCESSIBILITY MODES — set by script.js as data attributes on <html>
   ===================================================================== */

/* 1. Larger text (~125%). Everything is sized in rem, so the layout reflows. */
html[data-a11y-text="on"] { font-size: 125%; }
html[data-a11y-text="on"] .logo-text-extra { display: none; }

/* 2. High contrast: pure dark text on white, thicker borders, no shadows,
      gradients or translucent overlays. */
html[data-a11y-contrast="on"] {
  --cream: #FFFFFF;
  --sand: #FFFFFF;
  --ink: #000000;
  --text-mid: #000000;
  --blue: #17325C;
  --blue-deep: #000000;
  --blue-tint: #FFFFFF;
  --border: #000000;
  --field-border: #000000;
  --persimmon-text: #8A2A08;
  --persimmon-tint: #FFFFFF;
  --shadow-sm: none;
  --shadow: none;
  --line-w: 2px;
}
html[data-a11y-contrast="on"] *,
html[data-a11y-contrast="on"] *::before,
html[data-a11y-contrast="on"] *::after { box-shadow: none !important; text-shadow: none !important; background-image: none !important; }
html[data-a11y-contrast="on"] .hero-shapes { display: none; }
html[data-a11y-contrast="on"] .site-header { border-bottom: 2px solid #000; }
html[data-a11y-contrast="on"] .section-sand { border-block: 2px solid #000; }
html[data-a11y-contrast="on"] .site-footer { background: #000; --footer-text: #FFFFFF; --coral-on-ink: #FFFFFF; }
html[data-a11y-contrast="on"] .dialog-backdrop { background: #FFFFFF; }
html[data-a11y-contrast="on"] .dialog { border: 3px solid #000; }
html[data-a11y-contrast="on"] .to-top { outline: 3px solid #000; }
html[data-a11y-contrast="on"] a { text-decoration: underline; }
html[data-a11y-contrast="on"] .btn-primary,
html[data-a11y-contrast="on"] .nav-menu-cta .nav-link-contact { background: #000; color: #fff; border-color: #000; }
html[data-a11y-contrast="on"] .nav-link[aria-current="location"] { outline: 2px solid #000; }

/* 3. Underline all links */
html[data-a11y-underline="on"] a { text-decoration: underline !important; text-decoration-thickness: 0.1em !important; }

/* 4. Readable font (WCAG 1.4.12 text spacing) */
html[data-a11y-font="on"] {
  --font-heading: var(--font-sans);
  --font-serif: var(--font-sans);
  --body-lh: 1.8;
  --letter: 0.12em;
  --word: 0.16em;
  --para-gap: 2em;
}
html[data-a11y-font="on"] h1, html[data-a11y-font="on"] h2,
html[data-a11y-font="on"] h3, html[data-a11y-font="on"] h4 { line-height: 1.5; letter-spacing: 0.05em; }
html[data-a11y-font="on"] .section-label { letter-spacing: 0.12em; }

/* 5. Reduce motion (user setting or OS preference) */
html[data-a11y-motion="on"] { scroll-behavior: auto; }
html[data-a11y-motion="on"] *,
html[data-a11y-motion="on"] *::before,
html[data-a11y-motion="on"] *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Windows High Contrast / forced colours: keep system colours, make sure
   shapes that relied on backgrounds still show. Never override forced colours. */
@media (forced-colors: active) {
  .switch-thumb, .dot, .section-label::before, .card-badge-check { background: CanvasText; }
  .switch[aria-checked="true"] .switch-thumb { background: Highlight; }
  .nav-link[aria-current="location"]::after { background: Highlight; }
  .to-top { border: 2px solid ButtonText; }
  .hero-shapes { display: none; }
}

/* Print */
@media print {
  .site-header, .to-top-dock, .dialog-backdrop, .hero-shapes, .contact-form { display: none !important; }
  body { background: #fff; }
}