/* ============================================================
   learnfromcher.com — ELEMENT-SQUARE THEME (site-wide override)
   Loads AFTER each page's embedded styles and restyles the
   shared class vocabulary to match the portal login (4a):
   periodic-grid textures, DM Serif Display headings, DM Mono
   labels, element-square cards with offset accent shadows.
   Palette is unchanged — teal #1A7A8A · ink #1A2E35 · coral #E8604C.
   ============================================================ */

:root {
  --sq-ink:       #1A2E35;
  --sq-teal:      #1A7A8A;
  --sq-teal-dk:   #0F5A67;
  --sq-coral:     #E8604C;
  --sq-purple:    #9B8FC7;
  --sq-bg:        #F4F7F8;
  --sq-bg-alt:    #E3EDEF;
  --sq-card:     #ffffff;
  --sq-line:      rgba(26,46,53,.14);
  --sq-border:    #E2E8F0;
  --sq-grid:      rgba(26,46,53,.05);
  --sq-grid-dark: rgba(255,255,255,.055);
  --sq-shadow:    rgba(26,122,138,.24);
  --sq-panel:     #1A2E35;
  --sq-panel-2:   #14232A;
  --sq-mono:      'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sq-serif:     'DM Serif Display', serif;
}

/* ---------- Base: light periodic-grid paper ---------- */
body {
  background-color: var(--sq-bg);
  background-image:
    linear-gradient(var(--sq-grid) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--sq-grid) 1.5px, transparent 1.5px);
  background-size: 74px 74px;
}

/* ---------- Nav ---------- */
nav {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--sq-border);
}
.nav-links a { font-weight: 600; white-space: nowrap; }
.nav-links a.active { color: var(--sq-teal); }
.nav-cta,
a.nav-cta {
  background: var(--sq-teal);
  border-radius: 10px;
  box-shadow: 0 6px 16px var(--sq-shadow);
}
.nav-cta:hover, a.nav-cta:hover { background: var(--sq-teal-dk); }
/* Member-login link (injected) — quiet, element-square outline */
.nav-portal-link {
  border: 1.5px solid var(--sq-line);
  border-radius: 9px;
  padding: 7px 14px !important;
  font-family: var(--sq-mono);
  font-size: 13px !important;
  color: var(--sq-ink) !important;
  white-space: nowrap;
}
.nav-portal-link:hover { border-color: var(--sq-teal); color: var(--sq-teal) !important; }
/* the 6-item nav needs ~1030px on one line — collapse to hamburger earlier */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-mobile-btn { display: flex; }
}

/* ---------- Heroes: the dark element-table panel ---------- */
.hero { background: var(--sq-panel); }
.hero-bg { background: none; opacity: 1; }
.hero-grid {
  background-image:
    linear-gradient(var(--sq-grid-dark) 2px, transparent 2px),
    linear-gradient(90deg, var(--sq-grid-dark) 2px, transparent 2px);
  background-size: 150px 150px;
  background-position: -40px -30px;
  opacity: 1;
}
.hero-badge {
  font-family: var(--sq-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 9px;
  color: rgba(255,255,255,.75);
}
.hero-title { font-family: var(--sq-serif); font-weight: 400; letter-spacing: -.5px; }
.hero-title em { font-style: italic; color: #7DD3DC; }

/* ---------- Section headings ---------- */
.section-label {
  font-family: var(--sq-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--sq-teal);
  background: none;
  padding: 0;
}
.section-title { font-family: var(--sq-serif); font-weight: 400; letter-spacing: -.5px; }
.section-title em { color: var(--sq-teal); }

/* ---------- Sections: alternating rhythm ----------
   paper (grid texture) → solid tone panel → dark band, so adjacent
   sections always read as distinct in both themes. */
.section, .how-section, .testimonials-section, .testi-section,
.programmes-section, .cher-section, .diagnostic-section,
.pricing-section, .selector-section, .faq-section, .report-section,
.test-section, .story-section, .journey-section, .diff-section {
  background-color: transparent;
}
/* solid-tone sections */
.section, .testimonials-section, .selector-section, .faq-section,
.pure-section, .story-section {
  background-color: var(--sq-bg-alt);
  border-top: 1px solid var(--sq-border);
  border-bottom: 1px solid var(--sq-border);
}
/* paper sections (grid shows through) */
.diagnostic-section, .pricing-section, .how-section,
.journey-section, .diff-section, .testi-section, .combined-section, .compare-section {
  background-color: transparent;
  border-top: 0;
  border-bottom: 0;
}
/* dark-native bands (white text baked into page CSS) — stay dark in BOTH themes */
.programmes-section, .report-section, .compare-section,
.cher-says-section, .cher-preview-section {
  background-color: var(--sq-panel);
  border-top: 0;
  border-bottom: 0;
}
/* .cher-section is dark on About but light on Home; adjacent dark bands get a deeper tone + seam */
[data-page="about"] .cher-section {
  background-color: var(--sq-panel-2);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 0;
}
[data-page="index"] .cher-section, .test-section {
  background-color: var(--sq-bg-alt);
  border-top: 1px solid var(--sq-border);
  border-bottom: 1px solid var(--sq-border);
}
[data-page="about"] .cher-section .section-title { color: #fff; }

/* ---------- Cards: element squares ---------- */
.testi-card, .step-card, .price-card, .selector-card,
[data-page="index"] .cher-card, .test-meta-card, .faq-item, .diff-card,
.story-mini-card, .prog-card {
  background: var(--sq-card);
  border: 2px solid var(--sq-line);
  border-radius: 14px;
  box-shadow: none;
}
/* hero showcase cards + featured pricing = full element square */
.hero-card, .report-card, .diag-card, .test-form-card,
.price-card.featured, .sample-report {
  border: 3px solid var(--sq-ink);
}
.hero-card, .report-card, .diag-card, .test-form-card,
.price-card.featured, .sample-report {
  border-radius: 14px;
  box-shadow: 10px 12px 0 var(--sq-shadow);
}
.sample-report, .report-card { border-color: var(--sq-teal); background-color: #14232A; }
.price-card.featured { border-color: var(--sq-ink); }
.price-card { transition: transform .15s ease, box-shadow .15s ease; }
.price-card:hover { transform: translateY(-2px); box-shadow: 6px 8px 0 var(--sq-shadow); }

/* card titles */
.pc-title, .selector-title, .prog-title, .testi-tag { font-family: 'DM Sans', sans-serif; }
.pc-price, .selector-card [style*="DM Serif"] { font-family: var(--sq-serif); }
.pc-price { color: var(--sq-teal-dk); }

/* status chips → mono element captions */
.pc-status, .pc-tag, .grp-tag, .topic-badge, .timeline-tag {
  font-family: var(--sq-mono);
  font-weight: 500;
  letter-spacing: .04em;
  border-radius: 7px;
}

/* ---------- Buttons ---------- */
.btn-primary, .form-submit, .pc-cta.primary, .prog-btn,
.selector-btn, .btn-diag, .report-action {
  background: var(--sq-teal);
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 8px 22px var(--sq-shadow);
}
.btn-primary:hover, .form-submit:hover, .pc-cta.primary:hover,
.prog-btn:hover, .selector-btn:hover, .btn-diag:hover, .report-action:hover {
  background: var(--sq-teal-dk);
}
.btn-secondary { border-radius: 10px; }
.pc-cta.outline { border-radius: 10px; border-width: 2px; }

/* ---------- Step numbers → element-square badges ---------- */
.step-number, .step-num, .topic-num {
  font-family: var(--sq-mono);
  font-weight: 500;
  border-radius: 9px;
  background: var(--sq-card);
  border: 2px solid var(--sq-ink);
  color: var(--sq-teal-dk);
  box-shadow: 3px 3px 0 var(--sq-shadow);
}

/* ---------- Timeline ---------- */
.timeline-year { font-family: var(--sq-mono); }
.timeline-dot { background: var(--sq-teal); box-shadow: 0 0 0 4px var(--sq-shadow); }

/* ---------- Testimonials ---------- */
.testi-avatar {
  font-family: var(--sq-serif);
  border-radius: 11px;
  background: var(--sq-card);
  border: 2px solid var(--sq-teal);
  color: var(--sq-teal);
}
.testi-quote { font-size: 15px; }
.testi-tag {
  font-family: var(--sq-mono);
  background: transparent;
  border: 1.5px solid var(--sq-teal);
  color: var(--sq-teal-dk);
  border-radius: 7px;
}

/* ---------- FAQ ---------- */
.faq-item { border-radius: 12px; }
.faq-q { font-weight: 700; }
.faq-q .icon { font-family: var(--sq-mono); color: var(--sq-teal); }

/* ---------- CTA band ---------- */
.cta-section {
  background-color: var(--sq-panel);
  background-image:
    linear-gradient(var(--sq-grid-dark) 2px, transparent 2px),
    linear-gradient(90deg, var(--sq-grid-dark) 2px, transparent 2px);
  background-size: 150px 150px;
}
.cta-title { font-family: var(--sq-serif); font-weight: 400; }
.cta-title em { color: #7DD3DC; }

/* ---------- Footer ---------- */
footer {
  background-color: var(--sq-panel-2);
  background-image:
    linear-gradient(var(--sq-grid-dark) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--sq-grid-dark) 1.5px, transparent 1.5px);
  background-size: 74px 74px;
}
.footer-col h4 {
  font-family: var(--sq-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.footer-bottom p { font-family: var(--sq-mono); font-size: 11px; letter-spacing: .04em; }

/* ---------- Trust / no-reg strips ---------- */
.trust-bar, .no-reg-strip { background: var(--sq-bg-alt); border-top: 1px solid var(--sq-border); border-bottom: 1px solid var(--sq-border); }
.trust-item, .no-reg-item { font-family: var(--sq-mono); font-size: 12.5px; letter-spacing: .02em; }
.trust-item .dot, .no-reg-item .dot { background: var(--sq-teal); border-radius: 3px; }

/* ---------- Stats strip ---------- */
.stats-strip { background: var(--sq-panel); }
.stat-item .big { font-family: var(--sq-serif); font-weight: 400; }
.stat-item .big em { color: #7DD3DC; }

/* ---------- Misc mono touches ---------- */
.prog-code, .selector-code, .pc-price-unit, .meta-label, .sr-footer span,
.hero-stat .label, .upnext-when { font-family: var(--sq-mono); }
.hero-stat .num { font-family: var(--sq-serif); font-weight: 400; }

/* keep coral for the founding-members moments only */
.hero-founding-chip, .founding-banner { border-radius: 12px; }
.hero-founding-chip span { white-space: nowrap; }
.pc-founding { font-family: var(--sq-mono); font-size: 12px; }

/* ---------- Theme toggle (nav) ---------- */
.sq-theme-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1.5px solid var(--sq-line); border-radius: 9px;
  padding: 7px 12px; cursor: pointer;
  font-family: var(--sq-mono); font-size: 12px; font-weight: 500;
  color: var(--sq-ink); letter-spacing: .04em;
}
.sq-theme-btn:hover { border-color: var(--sq-teal); color: var(--sq-teal); }
/* standalone toggle in the nav bar itself — visible when links collapse to the hamburger */
.sq-theme-mobile { display: none; margin-left: auto; margin-right: 14px; }
@media (max-width: 1080px) { .sq-theme-mobile { display: inline-flex; } }

/* ---------- Dark theme ---------- */
nav .logo-dark { display: none !important; }
[data-theme="dark"] nav .logo-light { display: none !important; }
[data-theme="dark"] nav .logo-dark { display: block !important; }

[data-theme="dark"] {
  /* element-square tokens */
  --sq-bg:      #0F1C22;
  --sq-bg-alt:  #1C3038;
  --sq-card:    #1A2C34;
  --sq-ink:     #EAF1F2;
  --sq-line:    rgba(255,255,255,.15);
  --sq-border:  #2B4048;
  --sq-grid:    rgba(255,255,255,.04);
  --sq-teal:    #35B3C6;
  --sq-teal-dk: #57C6D6;
  --sq-shadow:  rgba(53,179,198,.22);
  /* section bands go DEEPER than the page so the rhythm survives */
  --sq-panel:   #0B161C;
  --sq-panel-2: #081217;
  /* retint each page's local tokens (text + light surfaces) */
  --dark:      #EAF1F2;
  --dark2:     #DCE7EA;
  --mid:       #B8C7CD;
  --light:     #8CA3AD;
  --off:       #16262D;
  --teal-lt:   #12333B;
  --teal-xlt:  #10262D;
  --border:    #2B4048;
  --border-lt: #2B4048;
  --gold-lt:   #2E2814;
  --green-lt:  #12291D;
  --purple-lt: #251F35;
}
body { transition: background-color .3s ease, color .3s ease; }
[data-theme="dark"] body { color: #DCE7EA; }
[data-theme="dark"] nav { background: rgba(15,28,34,.97); border-bottom-color: #2B4048; }
[data-theme="dark"] .nav-links[style] { background: #14232A !important; border-bottom: 1px solid #2B4048 !important; }
[data-theme="dark"] .nav-mobile-btn span { background: #B8C7CD; }
[data-theme="dark"] .timeline-year { background: var(--sq-bg); }
/* full element squares get the accent border in dark, like the portal */
[data-theme="dark"] .hero-card, [data-theme="dark"] .report-card,
[data-theme="dark"] .diag-card, [data-theme="dark"] .test-form-card,
[data-theme="dark"] .price-card.featured, [data-theme="dark"] .sample-report {
  border-color: #35B3C6;
}
/* inline black-alpha text (price strikethroughs etc.) */
[data-theme="dark"] .price-card span[style*="rgba(0,0,0"],
[data-theme="dark"] .price-card div[style*="rgba(0,0,0"] { color: #8CA3AD !important; }
/* inline dark-var backgrounds (summary-table header) */
[data-theme="dark"] div[style*="background: var(--dark)"] { background: #0C171D !important; }
/* dark cards on light sections use page-local `background: var(--dark)`;
   the --dark retint flips them light while their text stays white — pin them dark */
[data-theme="dark"] .test-form-card,
[data-theme="dark"] .contact-form-panel,
[data-theme="dark"] .included-panel,
[data-theme="dark"] .portal-mock,
[data-theme="dark"] .diag-card-header,
[data-theme="dark"] .form-field select option { background-color: #14232A; }
[data-theme="dark"] .nav-mobile-btn span { background-color: #B8C7CD; }

/* ---------- Back to top (cont.) ---------- */
.sq-top-btn {
  position: fixed; bottom: 22px; right: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--sq-card); border: 2px solid var(--sq-ink);
  color: var(--sq-teal-dk); font-family: var(--sq-mono); font-size: 20px;
  cursor: pointer; box-shadow: 4px 5px 0 var(--sq-shadow);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .15s ease;
}
.sq-top-btn.show { opacity: 1; pointer-events: auto; }
.sq-top-btn:hover { transform: translateY(-2px); }

/* ══════════════════════════════════════════════════════════
   HERO VIDEO REVAMP (index.html only)
   Right side is a vertical phone-style reel; left side trimmed.
   Additions live here (not inline) per house rule.
   ══════════════════════════════════════════════════════════ */
.hero-video-frame {
  width: 310px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 720 / 1280;
  border-radius: 30px;
  overflow: hidden;
  background: #000;
  border: 6px solid rgba(255,255,255,0.08);
  box-shadow: 0 26px 60px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-theme="light"] .hero-video-frame {
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 22px 50px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.05);
}

/* Mobile: headline → one-liner → CTA → video (centred, ~70%) → chips.
   Flatten the two hero columns into one flex column and reorder, so the
   video (in .hero-right) can sit between the CTA and the trust chips. */
@media (max-width: 900px) {
  .hero-inner { display: flex; flex-direction: column; align-items: center; }
  .hero-left, .hero-right { display: contents; }
  .hero-founding-chip { order: 1; }
  .hero-badge         { order: 2; }
  .hero-tagline       { order: 3; }
  .hero-title         { order: 4; width: 100%; }
  .hero-sub           { order: 5; width: 100%; }
  .hero-cta-group     { order: 6; width: 100%; }
  .hero-video-frame   { order: 7; width: 70%; }
  .hero-trust         { order: 8; width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   UNIFORMITY + FIXES PASS
   ══════════════════════════════════════════════════════════ */

/* C — italic accent phrase in headings sits on its OWN line (all 6 pages) */
.section-title em,
.hero-title em { display: block; }

/* D + E — homepage programme selector: three equal cards */
.prog-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
@media (max-width: 900px) { .prog-grid { grid-template-columns: 1fr; } }

/* E — one card system: equal-height cards in a row, CTA pinned to the bottom */
.prog-card,
.price-card,
.selector-card { display: flex; flex-direction: column; height: 100%; }
.prog-card .prog-btn,
.price-card .pc-cta,
.selector-card .selector-cta { margin-top: auto; }
/* Panels that differed in width between pages — normalise to fill their column */
.included-panel,
.topic-list-wrap { width: 100%; box-sizing: border-box; }

/* A — hero video pause/play toggle (no mute button: asset has no audio) */
.hero-video-frame { position: relative; }
.hero-video-toggle {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35); cursor: pointer;
  background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; padding: 0;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .2s, transform .15s;
}
.hero-video-toggle:hover { background: rgba(0,0,0,0.78); transform: translateY(-1px); }
.hero-video-toggle:focus-visible { outline: 2px solid #7DD3DC; outline-offset: 2px; }

/* D — N(A) programme card: darker-teal identity (matches programmes-page N(A) stream #0F5A67) */
.prog-card.na { background: linear-gradient(135deg, rgba(15,90,103,0.32) 0%, rgba(10,60,70,0.22) 100%); }
.prog-card.na::after { background: #0F5A67; }
.prog-card.na .prog-tag { background: rgba(15,90,103,0.35); color: #7DD3DC; border: 1px solid rgba(15,90,103,0.5); }
.prog-card.na .prog-btn { background: #0F5A67; color: #fff; }
.prog-card.na .prog-btn:hover { background: #1A7A8A; }