/*
 * Custom inline-tag styling for Bihar Class 10 slide decks.
 *
 * The slide markdown (mirrored from gitea) uses custom HTML tags as inline
 * emphasis "boxes" that the original Django wrapper never explicitly styled,
 * so they fell back to default browser rendering (= plain inline text). These
 * rules give them the green / blue / amber / red callout look the slide
 * authors expected.
 *
 * Tag census across the 154 mirrored decks:
 *   <success>  4,696 uses  → green
 *   <primary>  4,541 uses  → blue
 *   plus a handful of <answer>, <options>, <number>, <countdown>,
 *   <underline>, <footnotesize>, <bu>, <anumati>.
 */

/* ---- shared box look ----------------------------------------------------- */
.reveal success,
.reveal primary,
.reveal info,
.reveal warning,
.reveal danger,
.reveal alert,
.reveal answer,
.reveal options {
  display: inline-block;
  padding: 0.18em 0.55em;
  margin: 0.12em 0.18em;
  border: 1px solid;
  border-radius: 5px;
  line-height: 1.35;
  font-weight: 600;
  vertical-align: baseline;
  /* Allow line-wrapping for long strings inside the box */
  white-space: normal;
}

/* ---- semantic colours (Bootstrap-alert palette, slightly softened) ------- */
.reveal success {
  background: #d4edda;
  border-color: #b8dec1;
  color: #155724;
}

.reveal primary {
  background: #cfe2ff;
  border-color: #b6d4fe;
  color: #084298;
}

.reveal info {
  background: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}

.reveal warning {
  background: #fff3cd;
  border-color: #ffe69c;
  color: #856404;
}

.reveal danger,
.reveal alert {
  background: #f8d7da;
  border-color: #f1aeb5;
  color: #721c24;
}

.reveal answer {
  background: #fff8e1;
  border-color: #ffe082;
  color: #5d4037;
}

.reveal options {
  background: #f3e5f5;
  border-color: #ce93d8;
  color: #4a148c;
}

/* ---- minor inline tags --------------------------------------------------- */
.reveal underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.reveal footnotesize {
  display: inline;
  font-size: 0.78em;
  color: #555;
}

.reveal number {
  display: inline-block;
  font-weight: 700;
  color: #0d47a1;
}

.reveal bu {
  font-weight: 700;
  text-decoration: underline;
}

.reveal anumati {
  /* Hindi: "अनुमति" — "permission/note". Treated as a soft callout. */
  display: inline-block;
  padding: 0.15em 0.5em;
  border-left: 4px solid #6c757d;
  background: #f8f9fa;
  color: #495057;
  font-style: italic;
}

/* <countdown> is governed by the reveal.js countdown plugin; if that plugin
 * is absent (we deliberately skip it on the student-facing site), keep the
 * element from leaking the textual countdown markup into the slide. */
.reveal countdown { display: none; }

/* ---- question / answer-key classes used in MCQ and exercise decks ------- */
/* Counts in our 154 mirrored decks: .question-text 740, .question-solution
 * 2,331, .correct-option 78, .question-on-answer 32, .question-in-option-text
 * 34. None of these had explicit rules in the gitea CSS ecosystem, so the
 * styling lived only in inline `style=""` attributes. The rules below give
 * them sensible visual hierarchy. */

.reveal .question-text {
  margin: 0.5rem 0 0.4rem;
  padding: 0.45rem 0.7rem;
  border-left: 4px solid #1976d2;
  background: #e3f2fd;
  color: #0d47a1;
  font-weight: 500;
  text-align: left;
  border-radius: 0 4px 4px 0;
  font-size: 0.92em;
  line-height: 1.12;
}

.reveal .प्रश्न-text {
  margin: 0.5rem 0 0.4rem;
  padding: 0.45rem 0.7rem;
  border-left: 4px solid #1976d2;
  background: #e3f2fd;
  color: #0d47a1;
  font-weight: 500;
  text-align: left;
  border-radius: 0 4px 4px 0;
  font-size: 0.92em;
  line-height: 1.12;
}

.reveal .question-text p,
.reveal .question-text ul,
.reveal .question-text ol,
.reveal .question-text li,
.reveal .प्रश्न-text p,
.reveal .प्रश्न-text ul,
.reveal .प्रश्न-text ol,
.reveal .प्रश्न-text li {
  margin-top: 0.12rem;
  margin-bottom: 0.12rem;
  font-size: 18px !important;
  line-height: 1.05 !important;
}

.reveal .question-solution,
.reveal .प्रश्न-solution {
  margin: 0.5rem 0;
  padding: 0.45rem 0.7rem;
  border-left: 4px solid #2e7d32;
  background: #e8f5e9;
  color: #1b5e20;
  text-align: left;
  border-radius: 0 4px 4px 0;
  font-size: 0.92em;
  line-height: 1.12;
}

.reveal .question-solution p,
.reveal .question-solution ul,
.reveal .question-solution ol,
.reveal .question-solution li,
.reveal .प्रश्न-solution p,
.reveal .प्रश्न-solution ul,
.reveal .प्रश्न-solution ol,
.reveal .प्रश्न-solution li {
  margin-top: 0.12rem;
  margin-bottom: 0.12rem;
}

.reveal .question-solution .katex-display,
.reveal .प्रश्न-solution .katex-display {
  margin: 0.18rem 0;
}

.reveal .correct-option {
  background: #c8e6c9 !important;
  border: 2px solid #2e7d32 !important;
  color: #1b5e20 !important;
  font-weight: 700;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  position: relative;
}
.reveal .correct-option::after {
  content: ' ✓';
  color: #2e7d32;
  font-weight: 900;
}

.reveal .question-on-answer,
.reveal .question-in-option-text {
  font-weight: 600;
  color: #424242;
  margin: 0.35rem 0;
}

.reveal .slides footer {
  display: none !important;
}

.reveal .english p,
.reveal .hindi p {
  margin-top: 0.12rem;
  margin-bottom: 0.12rem;
  font-size: 18px !important;
  line-height: 1.12 !important;
}

/* ---- bilingual layout columns ------------------------------------------- */
/* The slide author convention: a row with two children:
 *   <div class='english' style='float:left;width:49%'> ... </div>
 *   <div class='hindi'   style='float:right;width:49%'> ... </div>
 * The inline style handles geometry; we add typography polish + a separator. */

/* `compact` modifier — opt-in tighter density for slides whose columns
 * overflow at the default 0.86em/1.1. Applied per-column on confirmed-
 * overflowing slides via the `class='english compact'` attribute. */
.reveal .english.compact,
.reveal .hindi.compact {
  font-size: 0.74em !important;
  line-height: 1.02 !important;
}
.reveal .english.compact p,
.reveal .hindi.compact p,
.reveal .english.compact li,
.reveal .hindi.compact li {
  margin-top: 0.05rem !important;
  margin-bottom: 0.05rem !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.reveal .english,
.reveal .hindi {
  text-align: left;
  vertical-align: top;
  font-size: 0.86em !important;
  line-height: 1.1 !important;
  /* Long Hindi sentences and KaTeX block-mspace runs can be wider
     than the 49% column. Force wrapping at any point so content
     stays inside the column on the horizontal axis. We deliberately
     keep overflow vertical so newly-revealed fragments below the
     initial column height stay visible — clipping the column with
     overflow:hidden was hiding fragments 4+ on slides like m10-1#5. */
  overflow-wrap: anywhere;
  word-break: break-word;
  /* Do not clip horizontal overflow: generated decks often contain long
     linked phrases and formula captions. With clipping enabled, readable
     text was visibly cut off on the right edge even when the slide did not
     technically scroll. Wrapping rules above handle ordinary text; the
     overflow audit catches true unwrapped equations/images. */
  overflow-x: visible;
}

/* bi-lingual-styling.css clamps `<main>` to 56vh with overflow:auto
   `!important`, which forces a tiny inner scroll bar when fragments
   reveal content past that height (m10-1 #/5/0/4 et al. — items
   3+ fall behind a hidden scroll). Free `<main>` to grow with the
   slide so fragments stay in flow. */
.reveal .slides main {
  height: auto !important;
  overflow: visible !important;
}

/* KaTeX renders each math twice: a visible katex-html span and a
   screen-reader-only katex-mathml span. The mathml span is clipped
   to a 1px box visually, but its intrinsic content width still
   contributes to ancestor scrollWidth. Treat it as zero-width. */
.reveal .katex-mathml {
  max-width: 0 !important;
  overflow: hidden;
}

/* KaTeX `\\` renders as <span class="mspace newline"> with
   display:block. Default block-width is 100% of math, but in
   inline math it can size itself off the natural math width and
   push the column wider than its 49% slot. Cap to parent width. */
.reveal .mspace.newline {
  max-width: 100%;
  display: inline-block;
}

/* Same for the visible katex-html container. */
.reveal .katex-html {
  max-width: 100%;
}

/* Constrain every descendant of a bilingual column so that nested
   lists / fragment wrappers / KaTeX boxes never out-grow the
   visible column box. Without this, a `<ul>` with default
   padding-left places its `<li>`s at column-left+~40px, and an LI
   at width:auto sized to natural content ends up extending past the
   column's right edge. */
.reveal .english *,
.reveal .hindi * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Mirror decks (m10-1 etc.) put the chapter chip and section chip
   in two consecutive H4 or H5 blocks at the top of every slide:
       <h5><success>Real Numbers</success></h5>
       <h5><primary>Section 1.1 - Introduction</primary></h5>
   (Some hand-authored decks like s10-60 use H4 instead; the rule
   below covers both.) Stacked vertically these consume ~170px of
   slide height for labels alone. Inline them so they share one row
   and free that space for the actual content/fragments below. */
.reveal section > h4:has(> success),
.reveal section > h4:has(> primary),
.reveal section > h5:has(> success),
.reveal section > h5:has(> primary) {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 8px;
}
/* Source markdown often hard-codes `margin-top: 25px` on the section
   chip (inherited from the legacy stacked layout). Zero that out so
   the chip sits flush inside its H4/H5 and the two chips' centers match. */
.reveal section > h4:has(> success) > success,
.reveal section > h4:has(> primary) > primary,
.reveal section > h5:has(> success) > success,
.reveal section > h5:has(> primary) > primary {
  margin-top: 0 !important;
  /* Equalize chip box height so the two inlined chips line up even
     when only one has a Hindi subtitle (augmentSlideHeadings can't
     always find a translation for the section title — the un-
     translated chip would otherwise be shorter and its center would
     drift up by ~2px). 3em at the chip's 22px font ≈ 66px, matching
     the natural height of a translated chip. */
  min-height: 3em;
  justify-content: center !important;
}
.reveal section:has(> h4:has(> success) + h4:has(> primary)),
.reveal section:has(> h5:has(> success) + h5:has(> primary)) {
  text-align: center;
}

.reveal .hindi {
  font-family: "Noto Sans Devanagari", "Mangal", "Kohinoor Devanagari", system-ui, serif;
  line-height: 1.55;
}

.reveal .english {
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
}

/* ---- block variants when authors wrap the tag with display:block --------- */
.reveal success.block,
.reveal primary.block,
.reveal info.block,
.reveal warning.block,
.reveal danger.block,
.reveal alert.block {
  display: block;
  padding: 0.6em 0.9em;
  margin: 0.5em 0;
}

/* ---- class 9 BreakPoint-dialect custom tags ----------------------------- */
/* Source files use these inline-tag "callouts" without explicit styling.    */
.reveal HeadingTag {
  display: inline-block;
  background: #d4edda;
  border: 1px solid #b8dec1;
  color: #155724;
  padding: 0.18em 0.6em;
  margin: 0.2em 0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.4em;
}
.reveal subheading {
  display: block;
  margin: 0.4em 0 0.3em;
  font-size: 1.05em;
  font-weight: 600;
  color: #084298;
}
.reveal TitleSlideText {
  display: block;
  text-align: center;
  font-size: 1.4em;
  font-weight: 700;
  margin: 0.4em 0;
}
.reveal TitleSlideNotes { display: none; }