/* ============================================================================
 * Modern colorful theme for the NCERT Class 9 deck wrapper.
 *
 * Layered AFTER custom-tags.css. Adds:
 *   - Inter (English) + Noto Sans Devanagari (Hindi) typography baseline
 *   - Vibrant gradient + soft-shadow chip styling (success / primary)
 *   - Polished question / solution boxes (rounded, soft accent-shadow)
 *   - Subtle slide-canvas tint (off-white instead of pure white)
 *   - Smoother slide transitions, modernized chevrons + page indicator
 *
 * No source markdown changes required — purely visual.
 * ============================================================================ */

/* ---- Type baseline -------------------------------------------------------- */
.reveal,
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6,
.reveal p, .reveal li {
  font-family: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "ss01", "cv11", "tnum"; /* Inter stylistic alts: friendlier 'a', tabular nums */
  letter-spacing: -0.005em;
}
.reveal .hindi,
.reveal .hindi p, .reveal .hindi li,
.reveal .प्रश्न-text, .reveal .प्रश्न-solution {
  font-family: "Noto Sans Devanagari", "Inter", "Mangal", system-ui, sans-serif;
  font-feature-settings: normal;
  letter-spacing: 0;
}
/* Mixed-script chips and inline tags fall through to the body stack — Inter
 * has a Latin-only glyph set; Devanagari runs in those chips will draw from
 * the Noto Sans Devanagari fallback automatically. */

/* Slightly heavier chip text — modern decks tend toward 700-800 for big labels. */
.reveal success, .reveal primary, .reveal HeadingTag, .reveal TitleSlideText {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- Slide canvas tint --------------------------------------------------- */
.reveal {
  background-color: #fafbfc; /* near-white with a hint of cool */
}

/* ---- Chip surfaces: gradients + soft shadows -----------------------------
 * Padding kept close to the original custom-tags.css footprint (0.18em 0.55em)
 * so the new chip styling does NOT push borderline-dense slides over the
 * autoFit threshold. The shadow gives the perception of more breathing room
 * without actually adding vertical space. */
.reveal success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #6ee7b7;
  color: #064e3b;
  border-radius: 8px;
  padding: 0.18em 0.6em;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08), 0 4px 14px rgba(16, 185, 129, 0.10);
}
.reveal primary {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 1px solid #93c5fd;
  color: #1e3a8a;
  border-radius: 8px;
  padding: 0.18em 0.6em;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.08), 0 4px 14px rgba(59, 130, 246, 0.10);
}
.reveal info {
  background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
  border: 1px solid #5eead4;
  color: #134e4a;
  border-radius: 8px;
  padding: 0.18em 0.6em;
  box-shadow: 0 1px 2px rgba(20, 184, 166, 0.08), 0 4px 14px rgba(20, 184, 166, 0.10);
}
.reveal warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
  color: #78350f;
  border-radius: 8px;
  padding: 0.18em 0.6em;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.10), 0 4px 14px rgba(245, 158, 11, 0.12);
}
.reveal danger,
.reveal alert {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border: 1px solid #fca5a5;
  color: #7f1d1d;
  border-radius: 8px;
  padding: 0.18em 0.6em;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.10), 0 4px 14px rgba(239, 68, 68, 0.12);
}
.reveal answer {
  background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
  border: 1px solid #facc15;
  color: #713f12;
  border-radius: 8px;
  padding: 0.18em 0.6em;
}
.reveal options {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
  border: 1px solid #c084fc;
  color: #581c87;
  border-radius: 8px;
  padding: 0.18em 0.6em;
}

/* HeadingTag / TitleSlideText (class-9 BreakPoint dialect): same vibrant tint. */
.reveal HeadingTag {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #6ee7b7;
  color: #064e3b;
  border-radius: 10px;
  padding: 0.22em 0.7em;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08), 0 4px 14px rgba(16, 185, 129, 0.10);
}
.reveal subheading {
  color: #1e3a8a;
}

/* ---- Question / Solution boxes -------------------------------------------
 * Padding matches the original 0.45rem/0.7rem so dense Q+S slides keep their
 * vertical budget. The accent border + shadow do the visual lifting. */
.reveal .question-text,
.reveal .प्रश्न-text {
  border-left-width: 4px;
  border-left-color: #3b82f6;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e3a8a;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.08), 0 6px 18px rgba(59, 130, 246, 0.06);
}
.reveal .question-solution,
.reveal .प्रश्न-solution {
  border-left-width: 4px;
  border-left-color: #10b981;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #064e3b;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08), 0 6px 18px rgba(16, 185, 129, 0.06);
}
.reveal .correct-option {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  border-color: #10b981 !important;
  color: #064e3b !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18);
}

/* ---- Bilingual column divider — soft gradient instead of solid black ----- */
.reveal main > div[style*="background-color: black"],
.reveal main > div[style*="background:black"] {
  background: linear-gradient(180deg, transparent 0%, #cbd5e1 18%, #cbd5e1 82%, transparent 100%) !important;
  width: 1px !important;
}

/* ---- Unified accent palette --------------------------------------------
 * Brand blue is #2563eb (Tailwind blue-600). This single hue covers every
 * "blue" semantic: in-text highlights, chip text on light bg, Q-box accent
 * border, link color, page-indicator hover, fragment-current pulse.
 *
 * Variants used:
 *   --accent-blue       #2563eb  in-text emphasis, accent border
 *   --accent-blue-deep  #1e40af  chip text on light gradient bg (legibility)
 *   --accent-blue-soft  rgba(37, 99, 235, 0.18)  pulse / hover halos
 */
.reveal {
  --accent-blue: #2563eb;
  --accent-blue-deep: #1e40af;
  --accent-blue-soft: rgba(37, 99, 235, 0.18);
}

/* ---- KaTeX math: bring it into the modern palette ----------------------- */
.reveal .katex {
  color: #0f172a; /* slate-900, slightly cooler than default black */
}
/* Every "color:blue" inline style across the corpus (chip sub-lines,
   highlighted values inside questions, KaTeX wrap colors, footers, etc.)
   resolves to the same accent. Unifies the legacy #0d47a1 / #1976d2 /
   #084298 shades that varied across custom-tags.css and source markdown. */
.reveal [style*="color:blue"],
.reveal [style*="color: blue"] {
  color: var(--accent-blue) !important;
}
/* Chip primary text (legacy was #084298 from Bootstrap-derived palette) —
   tune to the deep variant of the brand blue so it sits in the same family. */
.reveal primary {
  color: var(--accent-blue-deep);
}

/* ---- Smoother slide transitions ----------------------------------------- */
.reveal .slides section {
  transition-duration: 320ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard */
}

/* ---- Fragment-current pulse --------------------------------------------
 * When a fragment becomes the most-recent visible (`.current-fragment`),
 * a soft blue halo appears for 1.2s then fades. Pulls the student's eye
 * to where the teacher just clicked, so they don't have to scan the whole
 * column to find the new content.
 *
 * Reveal applies `.current-fragment` on reveal and removes it when the
 * next fragment becomes current — so the keyframe runs exactly once per
 * fragment-show. Doesn't fire on `.visible` (already-shown fragments).
 */
@keyframes pulse-current-frag {
   0% { background-color: var(--accent-blue-soft); box-shadow: 0 0 0 6px var(--accent-blue-soft); border-radius: 4px; }
  60% { background-color: var(--accent-blue-soft); box-shadow: 0 0 0 6px var(--accent-blue-soft); border-radius: 4px; }
 100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; border-radius: 4px; }
}
.reveal .fragment.current-fragment {
  animation: pulse-current-frag 1200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* The pulse is a UX cue, not a content style. Suppress on:
 *   - the fragment-progress bar dots (already animate via .current rule)
 *   - solution-cont arrow markers (would flash an arrow)
 *   - <hr> spacer fragments (would flash a horizontal line) */
.reveal .frag-progress .fragment.current-fragment,
.reveal .text-arrow.fragment.current-fragment,
.reveal .fragment.current-fragment > hr,
.reveal hr.fragment.current-fragment {
  animation: none;
}

/* ---- Modernized chevrons + page indicator ------------------------------- */
.reveal .controls .navigate-left,
.reveal .controls .navigate-right,
.reveal .controls .navigate-up,
.reveal .controls .navigate-down {
  color: var(--accent-blue) !important;
  transition: transform 200ms ease, color 200ms ease;
}
.reveal .controls button:hover .controls-arrow {
  transform: scale(1.15);
}
.reveal .slide-number {
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "tnum";
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}

/* ---- Fragment progress dots (right-edge strip) -------------------------- */
.frag-progress span {
  background: #cbd5e1; /* slate-300, default */
}
.frag-progress span.done {
  background: #10b981;
}
.frag-progress span.current {
  background: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
}

/* ---- Figure-stack: question raster → solution SVG swap ------------------
 * Pedagogical pattern: the question slide ships with the textbook's original
 * figure (raster), so the student sees the same figure they would on a
 * printed NCERT page. The solution then *redraws* the figure step-by-step
 * with a native SVG that builds up under teacher guidance — this is the
 * teacher's construction, not the textbook's.
 *
 * Markup:
 *   <div class="figure-stack" data-w="200" data-h="215">
 *     <div class="fragment fade-out figure-raster" data-fragment-index="1">
 *       <img src="..." width="200">
 *       <span class="figure-caption">Fig 9.23</span>
 *     </div>
 *     <div class="fragment fade-in figure-svg" data-fragment-index="1">
 *       <svg viewBox="0 0 200 200" ...>
 *         ...static infrastructure (always shown once SVG is visible)...
 *         <path class="fragment fade-in-then-semi-out" data-fragment-index="2" .../>
 *         ...
 *       </svg>
 *     </div>
 *   </div>
 *
 * The raster fades out at fragment 1; the SVG fades in at the same click,
 * occupying the same physical box. Inner SVG elements with their own
 * `data-fragment-index` build up the construction through fragments 2-N.
 * Per-deck width/height is provided via inline `style="width:Xpx; height:Ypx"`
 * on the figure-stack div (or via data-w/data-h, your choice).
 *
 * Caveat (markdown gotcha): when authoring this inside a `<textarea
 * data-template>` block, do NOT leave blank lines between SVG/HTML elements.
 * The reveal-markdown plugin terminates an inline-HTML block at the first
 * blank line, so any element following a blank line inside the figure-stack
 * gets stripped from the rendered DOM. Pack the elements tightly. */
.reveal .figure-stack {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.reveal .figure-stack > .figure-raster,
.reveal .figure-stack > .figure-svg {
  position: absolute;
  inset: 0;
  text-align: center;
}
.reveal .figure-stack .figure-raster img,
.reveal .figure-stack .figure-svg svg {
  display: block;
  margin: 0 auto;
}
.reveal .figure-stack .figure-caption {
  display: inline-block;
  padding-top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #475569;
}

/* ---- Body text rhythm --------------------------------------------------- */
.reveal p, .reveal li {
  line-height: 1.45;
}
.reveal .english p, .reveal .english li,
.reveal .hindi p, .reveal .hindi li {
  line-height: 1.42 !important;
}

/* ---- Compact mode plays nicely with the new chips ----------------------- */
.reveal .english.compact, .reveal .hindi.compact {
  line-height: 1.05 !important;
}

/* ---- Bare-<b> section headings ------------------------------------------ *
 * Many class-9 decks use `<b>Section title</b><br><br>` as a section heading
 * inside the `.english` / `.hindi` columns. The markdown processor wraps that
 * line as `<p><b>...</b> <br><br></p>`, which then inherits the global
 * `.reveal .english p, .reveal .hindi p { font-size: 18px !important }` body
 * rule from custom-tags.css — making the heading render *smaller* than the
 * surrounding `<li>` bullets (24px). Use `:has(> br + br)` to specifically
 * target the heading pattern (two adjacent `<br>` direct children — the
 * source-level `<br><br>` trailer). Inline emphasis like
 * `<b>Note:</b> rest of sentence` produces no `<br>` children, so the rule
 * leaves it untouched. */
.reveal .english p:has(> br + br),
.reveal .hindi p:has(> br + br) {
  font-size: 26px !important;
  font-weight: 700;
  line-height: 1.2 !important;
  margin: 0.45em 0 0.5em;
}

/* ---- Sub-bullet indent ---------------------------------------------------- *
 * Bullets in a `<div class="fragment">` immediately following a heading-style
 * fragment (single bullet whose plain text ends in `:`) are visually meant
 * to be sub-bullets under that heading, but the per-fragment-div structure
 * prevents markdown's nested-list parsing. The `subbullets` pass in
 * `tools/post-mirror-bilingualise.py` adds `sub-bullet` to those fragments;
 * this rule indents them and switches their bullet marker so they read as
 * a nested level. */
.reveal .fragment.sub-bullet {
  margin-left: 1.6em;
}
.reveal .fragment.sub-bullet ul {
  list-style-type: circle;
}