/* ══════════════════════════════════════════════════════════════════
   SHARED DISCIPLINE-PAGE STYLES

   Replaces the ~93-line <style> block that was duplicated, near
   identically, across kusti / mallakhamb / yoga / dhanurvidya /
   sankalp.html. Those five copies had NO dark theme applied, so
   clicking a discipline link dropped the visitor from the dark
   homepage into a light cream page. That is the bug this file fixes.

   Load order:  tailwind (optional) → theme.css → subpage.css
   All colour comes from the tokens in theme.css.
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Navigation ─────────────────────────────────────────────── */
#main-nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  background: rgba(255, 248, 238, .86);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line), 0 8px 32px rgba(94, 0, 0, .10);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 1.5rem; max-width: 1400px; margin: 0 auto;
}
.nav-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex-shrink: 0; }
.nav-brand img { height: 48px; width: auto; filter: drop-shadow(0 2px 8px rgba(94, 0, 0, .22)); }
.nav-brand-text .name {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  /* Was --brand-gold. The nav is light now, and gold on near-white is
     about 1.2:1 — effectively invisible. Maroon is 9.8:1 and still
     reads as the brand. */
  color: var(--brand-maroon); letter-spacing: .04em; line-height: 1.2;
}
.nav-brand-text .sub {
  font-family: var(--font-body); font-size: .65rem;
  color: var(--text-muted); letter-spacing: .08em;
}
.nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; }
.nav-links a {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--text-body); text-decoration: none;
  padding: .4rem .65rem; border-radius: 6px; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
/* The nav bar is light now, so saffron (2.8:1) can tint the hover
   BACKGROUND but must not be the text colour. --accent-text-2 is
   6.4:1 and still reads as a distinct state change from the
   maroon resting colour. */
.nav-links a:hover { color: var(--accent-text-2); background: rgba(255, 107, 0, .09); }
.nav-links a[aria-current="page"] { color: var(--accent-text-2); }

.btn-trial {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  /* Ends on --brand-saffron, not the darker --brand-saffron-dk.
     Dark text on #CC5500 is 4.43:1 — a hair under AA at this size —
     while on #FF6B00 it is 6.7:1. Ending brighter is both safer and
     more saffron, and it matches the button recipe on index.html so
     the CTA looks identical across all seven pages. */
  background: linear-gradient(135deg, var(--brand-saffron-lt), var(--brand-saffron));
  color: var(--text-on-gold); border: none;
  padding: .55rem 1.1rem; border-radius: 8px; cursor: pointer;
  text-decoration: none; letter-spacing: .05em; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn-trial:hover { box-shadow: var(--glow-saffron); transform: translateY(-1px); }

.hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 4px; background: none; border: none;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--brand-maroon); border-radius: 2px; transition: all var(--dur) var(--ease-out); }

/* The background here used to be rgba(74, 13, 6, .97) — dark maroon —
   while the links below use var(--text-body). Nothing on a sub-page
   carries .on-dark, so --text-body resolved to the LIGHT-context
   #3A1410: dark brown on dark maroon, about 1.2:1.

   That bug only ever reached two pages, and the reason is worth
   recording because it is easy to re-introduce. Five sub-pages mark
   this element `class="mobile-menu" id="mobile-menu"`, and theme.css
   styles `#mobile-menu` with a light cream background for index.html.
   An ID outranks a class no matter which stylesheet loads last, so on
   those five the panel was quietly light and read correctly. Only
   refund.html and privacy-policy.html — which spell the id
   `mobileMenu` — missed that rule and rendered the dark panel.

   So the panel is light on all seven now, matching index.html and the
   nav bar it drops out of. Do NOT "fix" this by adding .mobile-menu to
   the .on-dark group in theme.css: the five ID-matched pages would
   keep their cream background, get cream text, and go blank. */
.mobile-menu {
  display: none; position: fixed; top: 68px; left: 0; width: 100%;
  background: rgba(255, 250, 242, .98);   /* matches theme.css #mobile-menu */
  border-top: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 1rem 1.5rem 1.5rem; z-index: 49;
  flex-direction: column; gap: .25rem;
}
.mobile-menu a {
  font-family: var(--font-body); font-size: .9rem; font-weight: 500;
  color: var(--text-body); text-decoration: none;
  padding: .65rem .75rem; border-radius: 6px; display: block; min-height: 44px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
/* All seven sub-pages toggle this class now. Six of them used to set
   .style.display inline instead, which outranks the stylesheet and
   left this rule as dead code on every page except privacy-policy. */
.mobile-menu.open { display: flex; }
.mobile-menu a:hover { color: var(--brand-maroon); background: rgba(255, 107, 0, .10); }
.mobile-menu .btn-trial { margin-top: .5rem; display: inline-flex; justify-content: center; }

@media (max-width: 1023px) {
  .nav-links { display: none; }
  .btn-trial.desktop { display: none; }
  .hamburger { display: flex; }
}

/* The hamburger is hidden above 1023px, so nothing can close the menu
   there. Open it on a phone, then rotate to landscape or widen the
   window, and the panel stayed on screen over the desktop nav with no
   control to dismiss it. Scoping .open to the breakpoint that owns the
   hamburger means the desktop layout cannot inherit a stuck panel. */
@media (min-width: 1024px) {
  .mobile-menu.open { display: none; }
}

/* ─── Hero ───────────────────────────────────────────────────── */
/* The hero is text over a discipline photograph, so it stays a dark
   context — the .on-dark scope in theme.css re-points --text-* here.
   The scrims are deep maroon (--deep-3), never black. Opacity on
   .hero-bg is raised from .34 to .52 because the scrim is now warmer
   and lighter, so the photo can carry more of the frame. */
.hero {
  position: relative; min-height: 66vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  background: var(--deep-3);
  padding: 7rem 1.5rem 4rem;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .52;
  transform: scale(1.06);
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 150, 40, .16) 0%, transparent 65%),
    linear-gradient(165deg, rgba(74, 13, 6, .82) 0%, rgba(110, 17, 9, .55) 50%, rgba(74, 13, 6, .90) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 860px; }
.hero-badge {
  display: inline-block; font-family: var(--font-body);
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-gold);
  background: rgba(232, 184, 75, .13);
  border: 1px solid rgba(232, 184, 75, .38);
  padding: .35rem 1rem; border-radius: var(--r-pill); margin-bottom: 1.25rem;
}
.hero h1 {
  font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900; color: var(--text-heading);
  letter-spacing: .04em; line-height: 1.15; margin-bottom: 1rem;
  text-shadow: 0 3px 18px rgba(58, 8, 4, .82);
}
.hero h1 span { color: var(--brand-gold); }
.hero-tagline {
  font-family: var(--font-body); font-size: clamp(.95rem, 2vw, 1.2rem);
  color: var(--text-body); letter-spacing: .12em;
  text-transform: uppercase; font-weight: 300;
}
.hero-divider {
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-saffron));
  margin: 1.25rem auto; border-radius: 2px;
}

/* ─── Sections ───────────────────────────────────────────────── */
.section { padding: 5rem 1.5rem; background: var(--surface-1); }
.section-cream { background: var(--surface-2); }   /* names kept so the
.section-warm  { background: var(--surface-3); }      existing markup works */
.container { max-width: 1100px; margin: 0 auto; }

.section-label {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  /* .section is --surface-1 sand. Saffron there is 2.8:1, which
     fails AA even for large text; this is a small-caps label. */
  color: var(--accent-text); margin-bottom: .75rem;
}
.section-title {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700; color: var(--text-heading); line-height: 1.2; margin-bottom: 1rem;
}
.section-divider {
  width: 50px; height: 3px;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-saffron));
  border-radius: 2px; margin-bottom: 1.75rem;
}
.section-text {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.85;
  color: var(--text-body); margin-bottom: 1.25rem;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
@media (max-width: 767px) { .two-col { grid-template-columns: 1fr; gap: 2rem; } }

.benefits-list { list-style: none; display: flex; flex-direction: column; gap: .85rem; margin-top: .5rem; }
.benefits-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  font-family: var(--font-body); font-size: .95rem;
  color: var(--text-body); line-height: 1.6;
}
.benefits-list li::before { content: '▸'; color: var(--accent-text-2); font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }

/* ─── Schedule table ─────────────────────────────────────────── */
.schedule-wrap {
  overflow-x: auto; border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--lift-2);
}
table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: .9rem; }
thead tr { background: var(--surface-4); }
thead th {
  /* thead sits on --surface-4 (#FFFDF8). Gold there is ~1.2:1 —
     the schedule table had no visible column headings at all. */
  color: var(--accent-text); font-weight: 700; padding: .9rem 1.25rem;
  text-align: left; letter-spacing: .04em;
}
tbody tr:nth-child(even) { background: var(--surface-2); }
tbody tr:nth-child(odd)  { background: var(--surface-1); }
tbody tr:hover { background: rgba(255, 107, 0, .07); }
tbody td { padding: .8rem 1.25rem; color: var(--text-body); border-bottom: 1px solid var(--line-subtle); }
.table-note { font-family: var(--font-body); font-size: .8rem; color: var(--text-muted); margin-top: .75rem; font-style: italic; }

/* ─── CTA band ───────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(160deg, var(--surface-1), var(--surface-4));
  padding: 5rem 1.5rem; text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-section h2 {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700; color: var(--text-heading); margin-bottom: .75rem;
}
.cta-section p { font-family: var(--font-body); color: var(--text-body); margin-bottom: .5rem; font-size: .95rem; }
/* The fee line is the single most commercially important string on
   a discipline page. It was gold on a light gradient — invisible. */
.cta-section .fees { font-family: var(--font-body); color: var(--accent-text); font-size: 1rem; font-weight: 600; margin-bottom: 2rem; }

.btn-primary {
  display: inline-block; font-family: var(--font-display);
  font-size: .9rem; font-weight: 700;
  /* Ends on --brand-saffron, not the darker --brand-saffron-dk.
     Dark text on #CC5500 is 4.43:1 — a hair under AA at this size —
     while on #FF6B00 it is 6.7:1. Ending brighter is both safer and
     more saffron, and it matches the button recipe on index.html so
     the CTA looks identical across all seven pages. */
  background: linear-gradient(135deg, var(--brand-saffron-lt), var(--brand-saffron));
  color: var(--text-on-gold);
  padding: .9rem 2.2rem; border-radius: 10px; text-decoration: none;
  letter-spacing: .07em; min-height: 44px;
  box-shadow: 0 4px 20px rgba(255, 107, 0, .35);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn-primary:hover { box-shadow: var(--glow-saffron), 0 10px 28px rgba(255, 107, 0, .42); transform: translateY(-2px); }

/* ─── Cards ──────────────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.card {
  background: var(--glass-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-gold);
  border-radius: var(--r-md);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--lift-1);
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.card:hover { background: var(--glass-2); box-shadow: var(--lift-2), var(--glow-saffron); }
.card-icon { font-size: 1.8rem; margin-bottom: .75rem; }
.card h3 { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--accent-text); margin-bottom: .5rem; }
.card p { font-family: var(--font-body); font-size: .85rem; color: var(--text-body); line-height: 1.65; }

.highlight-box {
  background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-0) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 2.5rem; margin-top: 2rem;
  box-shadow: var(--lift-2);
}
.highlight-box h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--accent-text); margin-bottom: 1rem; }
.highlight-box p { font-family: var(--font-body); font-size: .92rem; line-height: 1.8; color: var(--text-body); }

/* ─── What / Why / How / Different ───────────────────────────── */
.wwhd { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2rem; }
.wwhd-card {
  position: relative;
  background: var(--glass-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem 1.6rem 1.75rem;
  box-shadow: var(--lift-1);
  overflow: hidden;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.wwhd-card:hover { background: var(--glass-2); border-color: var(--line-strong); box-shadow: var(--lift-3), var(--glow-saffron); }
.wwhd-card::before {
  content: attr(data-step);
  position: absolute; top: -.35em; right: .35em;
  font-family: var(--font-display); font-size: 5.5rem; font-weight: 900;
  color: rgba(255, 107, 0, .07); line-height: 1; pointer-events: none;
}
.wwhd-eyebrow {
  font-family: var(--font-body); font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-text-2); margin-bottom: .5rem; display: block;
}
.wwhd-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text-heading); margin-bottom: .85rem; }
.wwhd-card ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.wwhd-card li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .88rem; line-height: 1.6; color: var(--text-body);
}
.wwhd-card li::before { content: '▸'; color: var(--accent-text-2); flex-shrink: 0; }

/* ─── Footer ─────────────────────────────────────────────────── */
footer {
  background: var(--surface-0); color: var(--text-body); padding: 0;
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--brand-maroon), var(--brand-gold), var(--brand-saffron)) 1;
}
/* ── Footer crest ──
   This block was painted --surface-1 (light sand) while still
   containing, left over from the dark theme:
     · WHITE_LOGO.png — a WHITE logo,
     · a gold Devanagari motto (~1.2:1 on sand),
     · rgba(255,255,255,.6) "Established" text (~1.1:1).
   All three were invisible, on all seven subpages.

   Rather than recolour three things, paint the block maroon —
   which is what a white logo needs anyway — and re-point the
   --text-* tokens for the subtree exactly as .on-dark does. That
   fixes every descendant without editing seven HTML files. */
.footer-patch {
  background: var(--brand-maroon);
  padding: 2.25rem 1.5rem; text-align: center;
  border-bottom: 2px solid rgba(200, 148, 26, .3);

  --text-heading: var(--on-dark-heading);
  --text-body:    var(--on-dark-body);
  --text-muted:   var(--on-dark-muted);
  --accent-text:  var(--brand-gold);
  color: var(--text-body);
}
.footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; padding: 2.5rem 1.5rem 0; }
@media (max-width: 767px) { .footer-inner { grid-template-columns: 1fr; gap: 2rem; } }
.footer-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer-brand img { height: 44px; }
/* gold → maroon: .footer-inner sits on --surface-0 sand, where
   gold is ~1.2:1 and maroon is 9.8:1. Same fix as the nav brand. */
.footer-brand-text .name { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--accent-text); }
.footer-brand-text .sub { font-size: .62rem; color: var(--text-muted); letter-spacing: .08em; }
.footer-desc { font-size: .82rem; line-height: 1.7; color: var(--text-muted); }
.footer-heading { font-family: var(--font-display); font-size: .85rem; font-weight: 700; color: var(--accent-text); letter-spacing: .06em; margin-bottom: 1rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-links a {
  color: var(--text-body); font-size: .83rem; text-decoration: none;
  min-height: 44px; display: flex; align-items: center;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-links a:hover { color: var(--accent-text-2); }
.footer-address { font-size: .83rem; line-height: 1.75; color: var(--text-body); }
.footer-address strong { color: var(--text-heading); }
.footer-address a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.footer-address a:hover { color: var(--accent-text-2); }
.social-row { display: flex; gap: .75rem; margin-top: 1rem; }
.social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass-1); border: 1px solid var(--line);
  color: var(--accent-text); text-decoration: none; font-size: .95rem;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.social-icon:hover { background: rgba(255, 107, 0, .13); transform: translateY(-2px); }
.footer-bottom {
  max-width: 1100px; margin: 2rem auto 0;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--line-subtle);
  text-align: center; font-size: .75rem; color: var(--text-muted);
}
/* The sub-page footers used to hand-roll their bottom bar inline, with
   an onmouseover/onmouseout pair on each legal link writing
   element.style.color — the same :hover rule copied fourteen times,
   hard-coding the pre-token gold #C8941A.

   They now use .footer-bottom-inner / .footer-legal, which theme.css
   already defines for index.html's footer and which every sub-page
   loads. Nothing is redeclared here: a second copy would only drift.

   The one thing that DOES need saying is padding. theme.css pads
   .footer-bottom-inner, and .footer-bottom above pads it again on the
   sub-pages, so the two stack to ~2.5rem. The outer element owns the
   padding here, so the inner one gives it up. */
.footer-bottom .footer-bottom-inner { padding: 0; }