/* Khutbah subtitle overlay — shared, single source of truth (this file's
   own name/classes are internal identifiers, left untouched; the user-
   facing feature name is "Live Title Overlays" now, renamed from
   "Khutbah Subtitle" — display text only, real usage is title-card
   overlays for any live program, not translation captions specifically).
   Linked by
   the live kiosk (index.html) and /present's own operator preview
   (present/index.html). admin/index.html used to link this too, for a
   camera composite mini-stage in its own Camera capture section — that
   section (and this link) moved with Camera capture to /present entirely
   (2026-09-04), and the composite preview itself was deleted rather than
   relocated (redundant once Camera capture sits next to /present's own
   real operator preview — see present/index.html's own comment on that
   section). admin/index.html links neither this file nor the composite-
   preview CSS in admin.css that consumed it anymore. Split out of
   styles.css specifically so pages other than the kiosk can reuse these
   exact rules without pulling in the rest of that kiosk-only stylesheet —
   admin.css's own header comment already documents why a wholesale
   @import of styles.css broke admin/index.html once before (locks
   scrolling via html/body overflow:hidden, and collides with that page's
   own .panel-section styling). This file has neither problem: it
   declares nothing but these khutbah-overlay classes, so any page that
   links it gets pixel-identical rendering with zero drift risk and zero
   collision surface.

   Depends on --color-primary/--color-secondary/--panel-bg already being
   defined by the linking page's own :root (styles.css and admin.css each
   define their own fallbacks, both overwritten at runtime by theme.js's
   applyTheme() with the mosque's real palette) — this file intentionally
   doesn't redeclare those. */

/* content_type='khutbah' branch (see js/live-session.js's
   showKhutbahSlide()) — same "absolute, fills .slide-zone" shell as
   .live-session-overlay, containing a static branded background
   (placeholder for the eventual camera feed — position/size/layering
   already match where that will sit, so it's a content swap-in later,
   not a layout rebuild) plus the subtitle bar pinned to the bottom.
   On the admin preview, the containing block is .khutbah-overlay-
   preview-item (see admin.css) instead of the kiosk's .slide-zone —
   same inset:0-fills-its-parent behavior either way. */
.khutbah-overlay {
  position: absolute;
  inset: 0;
}

.khutbah-overlay.hidden {
  display: none;
}

/* No logo of its own — the kiosk's existing dangling mosque logo
   (.kiosk-logo, see kiosk-logo.js) already renders on top of whatever's
   in .slide-zone regardless of content_type, so this only needs to be
   the same plain panel background every other kiosk surface already
   uses — that's what "branded" means here without duplicating a logo
   element this page already has. */
.khutbah-background {
  position: absolute;
  inset: 0;
  background: var(--panel-bg);
}

/* Locked spec, verbatim, for the DEFAULT (Image Overlays off) case:
   bottom 150px, 80% opacity, Primary background/Secondary text, Amiri
   Bold 26px, up to 3 lines. 80% applies to the background fill
   specifically (color-mix against transparent, same idiom this
   stylesheet already uses for opacity-like blending elsewhere — e.g.
   --panel-bg itself), not the text — the text needs to stay fully
   legible, only the backdrop is meant to be translucent.
   z-index:2 is new and deliberate, not decorative — this element sits
   BEFORE .khutbah-overlay-image in every consumer's markup (unchanged),
   which would otherwise paint the image on top per plain DOM order,
   backwards from what the image-behind-text redesign below needs.
   Explicit z-index here (and 1 on .khutbah-subtitle-overlay-image)
   overrides that without reordering three separate HTML files — the one
   deliberate exception to this stylesheet's usual "DOM order decides,
   no z-index needed" convention, precisely because this pairing is now
   the only one where both elements are ever simultaneously visible. */
.khutbah-subtitle-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  z-index: 2;
}

/* Image Overlays ON (locked spec, verbatim): the uploaded image becomes
   this bar's ENTIRE background — no color layer of any kind behind or
   in front of it. This rule's only job is stripping the color away;
   the image itself renders via .khutbah-subtitle-overlay-image below,
   at its own natural height (which needn't match this bar's fixed
   150px at all — see that rule's own comment), painted behind it via
   z-index. Text (a child of this element) keeps rendering on top
   either way — see showKhutbahSlide()/renderKhutbahPreview()'s own
   comments: text is no longer conditional on this mode at all, only
   the background is. */
.khutbah-subtitle-bar.khutbah-subtitle-bar-image-mode {
  background: none;
}

.khutbah-subtitle-text {
  color: var(--color-secondary);
  font-family: "Amiri", serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  text-align: center;
  /* "3 lines max" is a visual cap on this component's own rendering, not
     a re-truncation of the text — the 175-character cap is already
     enforced upstream (extraction/review), so this is a safety backstop
     for content this component didn't itself validate, not the primary
     mechanism. On the admin preview this is exactly what makes an
     over-cap slide visually obvious as a clipped 3rd line, not a
     separate character-count warning. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Arabic-only override, both BODY Arabic-majority slides AND fetched
   QURAN_CITATION verses — confirmed both actually render through this
   exact same element (khutbah-subtitle-text) with dir="rtl" toggled by
   the identical isArabicMajority()-or-citation-Arabic check in all three
   consumers of this file (live-session.js's showKhutbahSlide(),
   present.js's own render, admin.js's renderKhutbahOverlaySlide()) — one
   selector genuinely covers both, no separate rule needed per surface.
   1.4 instead of the LTR default 1.2: tashkeel (Arabic diacritics) sit
   above/below the base letterforms and were getting clipped between
   lines at 1.2 on real tashkeel-heavy text. English/other LTR content
   keeps the tighter 1.2 above — it was never the problem this addresses.
   Still comfortably inside the 150px bar: 3 lines × 26px × 1.4 ≈ 109px. */
.khutbah-subtitle-text[dir="rtl"] {
  line-height: 1.4;
}

/* Base class, shared by two usages that turned out to want the exact
   same natural-height sizing after all — kept as one base class plus a
   thin modifier (below) rather than collapsing them into a single
   class, since the modifier still carries one real difference (z-index):
     - Lecture's own Image Overlay (js/present.js's lectureOverlayMode,
       #deckOverlayImage/#presentDeckOverlayImage) — a layer over Main
       content (slide or camera). Uses this base class alone, unmodified.
     - Khutbah's own Caption Bar (khutbahOverlayImage/
       presentKhutbahOverlayImage) — see .khutbah-subtitle-overlay-image
       below, which only adds the z-index that pairing specifically
       needs (it sits alongside .khutbah-subtitle-bar, which Lecture's
       own overlay never does).
   width:100% + height:auto (no object-fit) is what gives both their
   natural height — an object-fit:cover/contain would force either into
   some fixed box, which neither wants: these overlay uploads carry real
   alpha transparency (confirmed by sampling pixel data directly, not
   assumed), so letting the image render at its own natural size and
   simply overlap from the bottom is what actually makes "no color layer
   of any kind" true in practice — the image supplies its own
   transparency instead of any rule here imposing a crop. */
.khutbah-overlay-image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}

.khutbah-overlay-image.hidden {
  display: none;
}

/* Khutbah's own Caption Bar image layer (khutbahOverlayImage/
   presentKhutbahOverlayImage) — sizing is identical to the base class
   above (see that rule's own comment for why: natural height, no crop,
   relies on the upload's real alpha transparency). The one thing this
   pairing needs beyond the base class: z-index:1, painted BEHIND
   .khutbah-subtitle-bar (see that rule's own comment on why this
   pairing specifically can't rely on DOM order anymore), so text still
   renders on top regardless of how tall this image ends up being —
   Lecture's own use of the base class never needs this, since it's
   never layered against that same bar. */
.khutbah-overlay-image.khutbah-subtitle-overlay-image {
  z-index: 1;
}