/* ============================================================================
   Zawiya · Shared overrides (display font + mobile responsiveness)
   ----------------------------------------------------------------------------
   Loaded as the LAST stylesheet on every HTML page, so its rules win the
   cascade against the page-specific <style> blocks. Targets:
     - Homepage  (/)              — hero cycling slides, stats strip, subjects
     - About    (/<subject>/about) — hero h1/sub, section h2s, accordions, CTA
   Desktop spacing / sizes left untouched; only display font + mobile rules.
   ============================================================================ */

/* ── Display font ── replace Syne with Fraunces (matches M0 chapter) ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap');

/* Both naming conventions used across pages: --display (about) + --D (home).
   Redefine at :root so every heading that reads either var inherits Fraunces. */
:root {
  --display: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  --D:       'Fraunces', Georgia, 'Times New Roman', serif !important;
}

/* Defensive direct overrides for any rule that hard-coded Syne by name. */
.hero-h1, .h2, .h3, .hl1, .hl2,
.sc-h2, .diag-h, .mfh, .divine-content h2,
.pillar h3, .immersive-card h3, .spine-title, .scenario h4, .std-block h4,
.aud-card h3, .lin-name, .diag-qt, .price-amount, .pi-val, .mod-title,
.sctitle, .scbdg, .hero-preview .hp-story-h,
.hp-equation, .nav-za, .foot-za, .nav-cta, .ncta, .btn-primary,
.aud-icon, .pillar-ghost, .cta-bg-word, .hz,
.divine-ar,
.fcol h4,
.plprice, .plname, .plt,
.bgold, .bwire {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
}

/* ── Image logo (replaces inline ز + "Zawiya Academy" text) ── */
.logo-img { height: 42px; display: block; width: auto; }
.nl, .nav-logo { display: flex; align-items: center; height: 100%; }
/* Homepage nav toggles between .dark / .light on scroll. Show the right
   logo for each state and hide the other. */
.logo-on-light { display: none; }
nav.light .logo-on-dark { display: none; }
nav.light .logo-on-light { display: block; }
/* Make nav taller so the bigger logo doesn't crash into the edges */
nav#mnav { height: 72px !important; }
@media (max-width: 768px) {
  .logo-img { height: 32px; }
  nav#mnav { height: 60px !important; }
}

/* ── Homepage hero: the cycling headlines (.hslides) and the static
   tagline + CTAs (.hrev) now show together. The original 80px headline
   was sized for a model where it owned the whole hero and then vanished;
   sharing the space, the longest headline ("Why do we spend twelve
   years … the world we inherited?") wrapped to ~6 lines and crashed
   straight through the tagline. Shrink the cycling headline to a size
   whose longest member fits inside a fixed slide track, then leave
   clear air before the tagline so they never overlap. */
.hero .hstage { gap: 0; }
.hero .hl1 { font-size: clamp(24px, 3.4vw, 46px) !important; line-height: 1.14 !important; }
.hero .hl2 { font-size: clamp(15px, 1.7vw, 22px) !important; margin-top: 14px !important; }
.hero .hslides { min-height: clamp(190px, 32vh, 300px) !important; overflow: hidden; }
.hero .hprogress { margin-top: 18px !important; }
.hero .hrev { margin-top: 40px; }
.hero .htag { margin-bottom: 28px; }
@media (max-width: 768px) {
  .hero .hl1 { font-size: clamp(22px, 6.4vw, 34px) !important; }
  .hero .hslides { min-height: clamp(150px, 26vh, 220px) !important; }
  .hero .hrev { margin-top: 28px; }
}

/* ── About pages: when the hero collapses to a single column (≤1100px,
   where the original CSS hides .hero-right), the text was left-pinned
   with a big empty right gutter. Centre it so it reads intentionally.
   Above 1100px the original two-column (text left / preview right)
   layout is preserved untouched. */
@media (max-width: 1100px) {
  .hero-left { text-align: center; }
  .hero-left .hero-tag { justify-content: center; }
  .hero-left .hero-cta-row { justify-content: center; flex-wrap: wrap; }
  .hero-left .hero-sub { margin-left: auto; margin-right: auto; }
}

/* ── Spacing fixes that should apply at all viewports ── */
.za-about section { padding-block: clamp(64px, 8vw, 112px); }
.za-about .h2 { margin-bottom: clamp(16px, 2vw, 24px); }
.hero-h1 { margin-bottom: clamp(20px, 2.5vw, 32px); }

/* ── Universal ── prevent any text from overflowing the viewport */
@media (max-width: 900px) {
  body, .za-about, .hero, .hstage, section, .inner {
    overflow-x: hidden;
  }
  .hl1, .hl2, .hero-h1, .hero-sub, .h2, .sc-h2, .diag-h, .mfh, .divine-content h2,
  .pi-val, .sctitle, .scdesc, .h3, .lead, p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
}

/* ── Homepage (/) ── */
@media (max-width: 768px) {
  /* Hero cycling slides — tighter rhythm + smaller text */
  .hero { padding: 0 !important; min-height: 100svh !important; }
  .hstage { padding: 0 18px !important; }
  .hl1 { font-size: clamp(26px, 7.2vw, 40px) !important; line-height: 1.1 !important; }
  .hl2 { font-size: 14px !important; margin-top: 12px !important; line-height: 1.4; }
  .hslides { min-height: 180px !important; max-width: 100% !important; }
  .hprogress { gap: 6px !important; margin-top: 22px !important; flex-wrap: wrap; justify-content: center; max-width: 280px; margin-left: auto; margin-right: auto; }
  .hpd { width: 16px !important; }
  .hpd.act { width: 24px !important; }
  .hsubl { font-size: 9px !important; margin: 20px 0 10px !important; letter-spacing: .22em !important; }
  .htag { font-size: 13.5px !important; margin: 0 auto 28px !important; padding: 0 4px; }
  .hctas { gap: 10px; }
  .bgold, .bwire { padding: 13px 24px !important; font-size: 11px !important; }
  .hbar { bottom: 0; }
  .hbar .hbc { padding: 14px 12px !important; min-width: 88px !important; }
  .hbn { font-size: 18px !important; }
  .hbl { font-size: 8px !important; letter-spacing: .12em; }
  .scue { display: none !important; }
}

/* Hide more stat cells on very narrow screens */
@media (max-width: 420px) {
  .hl1 { font-size: 22px !important; }
  .hl2 { font-size: 13px !important; }
  .hbar .hbc:nth-child(n+4) { display: none !important; }
  .hslides { min-height: 200px !important; }
}

/* ── "Immersive · Intelligent · Purposeful" pillar grid + other broken
       homepage grids on mobile ── */
@media (max-width: 900px) {
  /* .pg is the 6-card pillar grid; .sg is subjects; .how3 is how-it-works;
     .plng is pricing plans; .wg is whom-for. All collapse to 2 cols at 1100
     but the inline "grid-column: span 2" on the 6th .pp card breaks the
     2-col layout (becomes a wide single column). Reset the span and
     enforce single-column at this breakpoint. */
  .pg, .sg, .how3, .plng, .wg { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pp[style*="span 2"], .pp { grid-column: auto !important; }
  .pp { padding: 32px 24px !important; }
  .pp h3 { font-size: 18px !important; margin-bottom: 8px !important; }
  .pp p { font-size: 13.5px !important; line-height: 1.65 !important; }
  .ppico { font-size: 22px !important; margin-bottom: 14px !important; }
  .ppgh { font-size: 60px !important; opacity: .04 !important; }
}

/* Diagnosis-style two-column grids that pile up the same way */
@media (max-width: 900px) {
  .dg, .ideoi, .campusg, .bundle, .idcg { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bndl, .bndr { padding: 28px 22px !important; border-right: none !important; }
  .bndl { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
}

/* Footer columns */
@media (max-width: 900px) {
  .fg { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 480px) {
  .fg { grid-template-columns: 1fr !important; }
  .fcol ul { margin-top: 8px; }
}

/* Section h2s + leads */
@media (max-width: 768px) {
  .h2, .mfh, .sc-h2, .diag-h { font-size: clamp(26px, 7vw, 38px) !important; line-height: 1.1 !important; }
  .lead, .mfp { font-size: 15px !important; line-height: 1.7 !important; }
  /* Subject scroll cards on mobile */
  .sc { margin-bottom: 20px; }
  .sct { padding: 28px 22px !important; }
  .scbdg { font-size: 10px !important; }
  .sctitle { font-size: 20px !important; line-height: 1.2 !important; margin-top: 10px !important; }
  .scdesc { font-size: 13.5px !important; line-height: 1.65 !important; }
  .scm { display: grid; grid-template-columns: repeat(3, 1fr) !important; }
  .scmc { padding: 14px 12px !important; }
  .scmv { font-size: 18px !important; }
  .scml { font-size: 9px !important; }
  .scb { padding: 16px 22px !important; flex-wrap: wrap !important; gap: 12px; }
  .stag { font-size: 9px !important; padding: 4px 9px !important; }
  /* Pricing rows */
  .pl { padding: 28px 22px !important; }
  .plt { font-size: 22px !important; }
  .plprice { font-size: 32px !important; }
  /* How-it-works steps */
  .hstep { padding: 32px 22px !important; }
  /* Whom-for */
  .wc { padding: 32px 22px !important; }
  /* Footer */
  footer { padding: 36px 20px 20px !important; }
  .fcol h4 { font-size: 11px; }
  .fcol ul li { font-size: 12px; }
  .mfpills { gap: 6px !important; }
  .mfpill { font-size: 9px !important; padding: 6px 14px !important; }
}

/* ── About pages (/<subject>/about) ── */
@media (max-width: 900px) {
  /* Hero */
  .za-hero, .hero { padding: 90px 20px 40px !important; gap: 32px !important; }
  .hero-h1 { font-size: clamp(28px, 7.5vw, 44px) !important; line-height: 1.05 !important; margin-bottom: 18px !important; }
  .hero-sub { font-size: 14.5px !important; line-height: 1.65 !important; margin-bottom: 28px !important; max-width: 100% !important; }
  .hero-tag { font-size: 9px !important; letter-spacing: .2em !important; margin-bottom: 22px !important; }
  .hero-cta-row { flex-wrap: wrap; gap: 10px; }
  .btn-primary, .btn-ghost { padding: 12px 22px !important; font-size: 10.5px !important; }
  .hero-geo svg { width: 90vw !important; opacity: .04 !important; }
  /* Stats strip */
  .stats-strip { flex-wrap: wrap; }
  .stat-cell { flex: 0 0 50% !important; min-width: 0 !important; padding: 24px 18px !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
  .stat-num { font-size: 28px !important; }
  .stat-lbl { font-size: 9px !important; }
  /* Section labels + h2s */
  .sec-label, .sc-label, .diag-label { font-size: 9px !important; letter-spacing: .2em !important; margin-bottom: 30px !important; }
  .h2, .sc-h2, .diag-h, .divine-content h2 { font-size: clamp(26px, 7.5vw, 40px) !important; line-height: 1.1 !important; }
  .lead, .sc-lead { font-size: 15px !important; }
  /* Pillars */
  .pillar { padding: 36px 24px !important; }
  .pillar h3 { font-size: 20px !important; }
  .pillar p { font-size: 13.5px !important; }
  /* Immersive cards */
  .immersive-card { padding: 32px 22px !important; }
  .immersive-card h3 { font-size: 19px !important; }
  .featured-inner { gap: 24px !important; }
  .featured-demo { padding: 18px !important; font-size: 11.5px !important; }
  /* Chapter spine */
  .spine-num { font-size: 10px !important; }
  .spine-title { font-size: 15px !important; }
  .spine-desc { font-size: 11.5px !important; }
  /* Curriculum accordion — vertical phase header so it fits */
  .phase-header { flex-wrap: wrap; }
  .ph-tag { min-width: 0 !important; padding: 18px 18px !important; border-right: none !important; border-bottom: 1px solid var(--border); flex: 1 1 100%; }
  .ph-name { font-size: 16px !important; padding: 14px 20px !important; flex: 1 1 100%; border-bottom: 1px solid var(--border); }
  .ph-meta { display: none !important; }
  .ph-toggle { flex: 1 1 100% !important; padding: 14px 0 !important; border-left: none !important; }
  /* Module cards in accordion */
  .pi-cell { padding: 18px 20px !important; border-right: none !important; border-bottom: 1px solid var(--border); }
  .pi-cell:last-child { border-bottom: none; }
  .mod-card { padding: 20px 22px !important; }
  .mod-title { font-size: 13.5px !important; }
  /* Scenarios + standards + audience */
  .scenario { padding: 26px 22px !important; }
  .scenario h4 { font-size: 16px !important; }
  .std-block { padding: 26px 22px !important; }
  .std-block h4 { font-size: 17px !important; }
  .badge { font-size: 9px !important; padding: 4px 10px !important; }
  .aud-card { padding: 32px 22px !important; }
  .aud-card h3 { font-size: 19px !important; }
  /* Lineage scroll */
  .lin-fig { flex: 0 0 200px !important; padding: 28px 22px !important; }
  /* Divine precision arabic glyph — smaller, less squeeze */
  .divine-ar { font-size: clamp(80px, 22vw, 140px) !important; }
  /* CTA */
  .cta-section { padding: 90px 22px !important; }
  .pricing-row { gap: 24px !important; padding-top: 36px !important; margin-top: 48px !important; }
  .price-amount { font-size: 28px !important; }
  /* Footer */
  .za-foot { padding: 30px 20px !important; gap: 12px; text-align: center; }
}

@media (max-width: 420px) {
  .hero-h1 { font-size: 26px !important; }
  .h2, .sc-h2, .diag-h, .divine-content h2 { font-size: 24px !important; }
  .stat-cell { flex: 0 0 100% !important; }
  .stat-num { font-size: 32px !important; }
  .featured-inner { grid-template-columns: 1fr !important; }
  .featured-demo { font-size: 10.5px !important; }
}

/* ── Arabic about page — RTL block readability ── */
@media (max-width: 768px) {
  /* The arabic page mixes LTR and RTL blocks; ensure RTL content wraps */
  .arabic-block, [dir="rtl"], .ar-line {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}