/* Chen Li light-theme corrections for /01.
 *
 * The landing's section backgrounds were flipped from #111 (near-black) to #fff
 * (white). Text that the dark theme had set to white must now be dark so it stays
 * readable on white. This file is loaded LAST in <head>, after the Nuxt CSS, so
 * its same-specificity rules win over the originals WITHOUT !important — while the
 * more-specific blue accent rules (color:#1a26ff) still win for highlights.
 *
 * Deliberately NOT touched: the map/globe section (.ui-map-* labels stay white on
 * the dark 3D globe) and blue (#1a26ff) surfaces, which keep white text. */

/* global default text: dark instead of white */
main { color: #111; }

/* content sections that explicitly set white text in the dark theme */
.modules-impact-head,
.modules-introduction,
.modules-how,
.modules-how-content-mobile,
.modules-how-item,
.modules-how-item-mobile,
.modules-how-progressions .menu-container,
.modules-case-studies-card .content,
.modules-header .logos .common-headline,
.common-nav-sub-mobile {
  color: #111;
}

/* "The Group in Numbers" head: its title + intro keep their own white color
 * (for the old dark theme), so the same-specificity rule above can't override
 * them — force them dark. The head contains no stat figures, so the blue (#1a26ff)
 * counters are untouched. */
.modules-impact-head .html-text,
.modules-impact-head p,
.modules-impact-head .common-headline {
  color: #111 !important;
}

/* keep white text where the surface stays blue (#1a26ff) */
.modules-contact .content-hover,
.modules-case-studies-card .content-hover {
  color: #fff;
}

/* The whole contact block sits on the blue (#1a26ff) surface, but the
 * main{color:#111} default forced its text dark (dark-on-blue, unreadable):
 * the "Contact Us" heading, the intro paragraph, the "I am…" prompt and the
 * A Parent / A Student / An Educator / Just Curious choices (all .label). The
 * choice/prompt buttons are transparent, so white reads cleanly on the blue.
 * Form <input>/<textarea> keep their own colour (they sit on light fields). */
.modules-contact-content .title,
.modules-contact-content .common-headline,
.modules-contact p,
.modules-contact .label,
.modules-contact h2,
.modules-contact h3,
.modules-contact .h3 {
  color: #fff !important;
}

/* Hide the "Our NEXT GEN partners" section. The DOM is kept intact — removing it
 * desyncs the Nuxt SSR markup from the hydrating Vue component and cascades a
 * hydration mismatch into the following sections. Hiding via CSS is invisible to
 * hydration, so the page stays consistent while the section is not shown. */
.modules-partners { display: none !important; }

/* Header — the /01 route now renders the real React <SiteHeader> as a fixed
 * overlay above the iframe (same component as every other page), so hide the
 * in-iframe Vue header bar and its menu overlay. CSS hide only (DOM kept intact)
 * stays invisible to Nuxt hydration, the same approach as .modules-partners. */
.common-header,
.common-nav { display: none !important; }

/* Hide the "How We Teach / Success Stories" solution-cards section (Adaptive
 * Learning Engine, Data-informed Teaching, Classroom of the Future + each card's
 * "Solution" label and descriptions). The .modules-case-studies cards are nested
 * inside .modules-how, so hiding the parent removes both. CSS-hide only (DOM
 * intact) stays invisible to Nuxt hydration, same as .modules-partners.
 * NOTE: .modules-solutions (the "Our Approach" parallax intro) is a DIFFERENT
 * section and is intentionally left visible. */
.modules-how { display: none !important; }

/* Footer — the /01 route injects the real site footer INTO this iframe (replacing
 * the Canopy footer) so it lives in the inner scroller and doesn't create a second
 * scroll region. Hidden by default; <IframeExperience> un-hides .common-footer
 * (via .cn01f-host) once our markup is injected, avoiding a flash of the original. */
.common-footer { display: none !important; }

/* Contact — location map injected by cn-i18n.js in place of the old Donate CTA. */
.cn-contact-map {
  margin: 28px 0 8px;
  width: 100%;
  max-width: 560px;
}
.cn-contact-map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

/* Manifesto / case-study mask-reveal images are repointed to local classroom
 * photos at runtime by cn-i18n.js (fixMaskImages) so none render as broken boxes;
 * here we just make them fill their mask cleanly and keep the headline text
 * readable over the photo backgrounds. */
.modules-manifesto-panel .manifesto,
.modules-manifesto-panel .manifesto.h2 {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

/* Clean replacement headline injected by cn-i18n.js (fixManifesto): the original
 * GSAP scatter-reveal piled the per-word spans on top of each other, so we hide
 * that (.manifesto) and overlay one centered, generously-leaded line instead.
 * Hidden with visibility (NOT display:none) so the panel keeps its box and the
 * page-wide ScrollTrigger pin heights stay correct. */
.modules-manifesto-panel .manifesto {
  visibility: hidden !important;
}
.modules-manifesto-panel .cn-manifesto-fix {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column; /* blue lead stacked above the white sub-line */
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin: 0;
  padding: 0 6vw;
  text-align: center;
  color: #fff;
  font-family: Staff-XX-Condensed-Bold, Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 1.2;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.modules-manifesto-panel .cn-manifesto-fix .lime {
  color: #fff;
}
/* White sub-line under the blue lead — a touch smaller for headline/sub-line
 * hierarchy. */
.modules-manifesto-panel .cn-manifesto-fix .cn-manifesto-sub {
  font-size: 0.66em;
  font-weight: 600;
  color: #fff;
}

/* Contact is now rendered as an injected HTML section (.cn01s-contact) at the
 * bottom of the inner scroll, below 最新消息 — built from the React
 * ContactSection in lib/iframe-sections.ts. Hide the whole vendored Nuxt contact
 * section so contact shows once, in the new location. (The older choices/form +
 * card rules below are now inert since their ancestor is hidden.) */
.modules-contact {
  display: none !important;
}
.modules-contact-choicesContainer,
.modules-contact--form {
  display: none !important;
}
/* Injected contact-info card — white text + icons on the blue (#1a26ff) surface. */
.modules-contact .cn-contact-info {
  margin-top: 32px;
  max-width: 560px;
  padding: 32px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
}
.modules-contact .cn-ci-label {
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff !important;
}
.modules-contact .cn-ci-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.modules-contact .cn-ci-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff !important;
  font-size: 18px;
  line-height: 1.5;
}
.modules-contact .cn-ci-list a {
  color: #fff !important;
  text-decoration: none;
}
.modules-contact .cn-ci-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: #fff;
}
.modules-contact .cn-ci-icon svg {
  width: 22px;
  height: 22px;
}

/* Remove the "Discover what's next" CTA in the map section — it linked to the
 * dead vendored /map route. CSS hide only (DOM kept intact) stays invisible to
 * Nuxt hydration, same approach as .modules-partners. */
.modules-map--container a.ui-fragments-button,
.modules-map--container a[href="/map"] {
  display: none !important;
}

/* "Going Global / 邁向全球" map heading ships at font-weight:100 (hairline).
 * Switch it to the bold condensed face so it reads heavy. The condensed family
 * doesn't synthesise bold well, so swap to the -Bold variant too. */
.modules-map--container .ui-fragments-title .h2,
.modules-map--container .ui-fragments-title h2 {
  font-family: Staff-XX-Condensed-Bold, Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  color: #111 !important;
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  line-height: 1.15 !important;
}
/* Map section description paragraph — was white; make it dark to match. */
.modules-map--container .description {
  color: #111 !important;
}
.mask-square img,
.mask-rect img,
.mask-rounded img,
img.mask-square,
img.mask-rect,
img.mask-rounded {
  object-fit: cover;
}

/* Remove the "The Audacious Project" intro block (a Canopy/TED quote card with a
 * broken image). It is the sole content of the .modules-introduction section, so
 * hiding the section drops the whole block. CSS hide only (DOM kept intact) stays
 * invisible to Nuxt hydration, the same approach as .modules-partners. */
.modules-introduction {
  display: none !important;
}

/* NEXT GEN NOW hero (.modules-background-1) keeps the vendored GitHub original:
 * an ordinary <video> (new.mp4 = the planets clip) revealed through the jagged
 * #svgPath "shredded paper" clip. The video sits 31.94vw down, which leaves a gap
 * at the top where the layer images behind it (.modules-header .layers) peek
 * through below the torn edge. Raise the video so the planets cover those layers,
 * but keep it clear of the NEXT GEN NOW headline. */
.modules-background-1 {
  padding-top: 24vw !important; /* was 31.94vw — lifts the planets to cover the layers */
}

/* Replace the THREE.js / WebGL canvas in .modules-background-2 with a plain
 * <video> of the AI-classroom clip (bg-2), injected into the masked <picture> by
 * <IframeExperience>. The vendored scroll engine still writes --mask-2 (the
 * growing reveal circle) onto this module, and <picture> uses it as its
 * clip-path — so the injected video inherits the EXACT same reveal animation,
 * just without WebGL. We only hide the <canvas>; the module stays visible. */
.modules-background-2 picture > canvas {
  display: none !important;
}
.modules-background-2 picture > video.cn-bg2-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The engine sized this layer to ~1623px and writes an inline
 * `transform: translate(390px, …)` on .position each tick — a "docking" move
 * built for the small THREE canvas. For a full-bleed <video> that just pushes it
 * right and off-centre. Span the layer to the full width and cancel the docking
 * translate so the reveal circle and the video stay centred. !important beats the
 * inline transform the engine re-applies on scroll. */
.modules-background-2,
.modules-background-2 .bg,
.modules-background-2 .position,
.modules-background-2 picture {
  width: 100% !important;
  left: 0 !important;
}
.modules-background-2 .position {
  transform: none !important;
}

/* Remove the two backdrop photos below the "NEXT GEN NOW" wordmark — the hero's
 * .layer images (student-tablet-closeup.webp / pair-reading.webp) plus the lazy
 * third. The wordmark itself is an SVG, so it is untouched. The hero has no other
 * <img>, so targeting .modules-header img is safe. */
.modules-header img {
  display: none !important;
}

/* Hide the leftover Canopy "Success Stories" case-study cards (the placeholder
 * Renewcell / Nafici brands). The real Chen Li brand cards are injected lower in
 * the scroll by <IframeExperience>. CSS hide only (DOM intact) stays invisible to
 * Nuxt hydration, same approach as .modules-partners / .modules-how. */
.modules-case-studies {
  display: none !important;
}
