/*
 * ════════════════════════════════════════════════════════════════════════
 * components.nav.css
 * ════════════════════════════════════════════════════════════════════════
 *
 * Transient and navigational UI elements that sit outside chapter
 * content. Persistent chrome (top nav, chapter menu) lives in chrome.css.
 *
 * 01. Toast               – Auto-dismiss confirmation notification
 * 02. Celebration toast   – Milestone / chapter-complete toast
 * 03. Version warning     – Persistent update-available banner toast
 * 04. Save bar            – Fixed bottom Save / Share button bar
 * 05. Chapter nav         – Prev / Next chapter buttons at foot of chapter
 * 06. Page close button   – Shared ✕ Close button used on non-chapter pages
 * 07. Close animations    – Rotation and squish feedback on all close buttons
 * 08. GPU compositing     – will-change hints for fixed / animated elements
 *
 * ── DARK MODE ───────────────────────────────────────────────────────────
 * 09. Dark mode           – body.dark-mode overrides for all rules above
 *
 * ── MULTILINGUAL / RTL ──────────────────────────────────────────────────
 * 10. RTL overrides       – Physical padding flip for version-warning-close
 * 11. Script overrides    – Per-script resets grouped by script family:
 *                           A. Arabic script   — ar, ur
 *                           B. Hebrew script   — he
 *                           C. Devanagari      — ne, hi
 *                           D. Myanmar         — my
 *                           E. CJK             — zh (zh-CN), ja
 *                           F. Hangul          — ko
 *                           G. Cyrillic        — ru, uk  (labels only)
 *
 * ════════════════════════════════════════════════════════════════════════
 */


/* ── 01. TOAST ──────────────────────────────────────────────────────────── */
/* Auto-dismiss notification confirming saves and other brief actions.
   Appears below the top nav, centred horizontally.
   left: 50% + translateX(-50%) is direction-neutral — no RTL change needed. */

.toast,
.validate-toast {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  color: var(--card-bg);
  padding: 10px 20px;
  border-radius: 20px;
  font-family: var(--font-stack-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: var(--z-toast);
  /* Multi-line support */
  white-space: normal;
  width: max-content;
  max-width: min(420px, 88vw);
  text-align: center;
  box-sizing: border-box;   /* ensures padding doesn't push past max-width */
}
.toast {
  background: var(--success);
}
.validate-toast {
  background: var(--validate);
}
.toast.show,
.validate-toast.show  {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ── 02. CELEBRATION TOAST ──────────────────────────────────────────────── */
/* Milestone / chapter-complete toast. Distinct from the standard toast —
   uses accent gold rather than success green, and serif type.
   .celebration-toast-sub is an optional smaller subtitle line. */

.celebration-toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--accent);
  color: var(--text);
  padding: 14px 24px;
  border-radius: 16px;
  font-family: 'Source Serif 4', serif;
  font-size: 15px;         /* UI chrome — stays px */
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: var(--z-toast);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(184,146,42,0.35);
}
.celebration-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.celebration-toast-sub {
  font-size: 13px;         /* UI chrome — stays px */
  opacity: 0.85;
}
#validate-toast {
  top: 120px; /* offset below #toast (top: 64px) to prevent overlap */
}


/* ── 03. VERSION WARNING ────────────────────────────────────────────────── */
/* Persistent banner shown when the app content has been updated and the
   user is viewing a stale version. Floats above the save bar (bottom: 80px).
   Uses the dark nav palette (--text background) regardless of colour mode
   so it always reads as a system-level alert. */

.version-warning-overlay {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  width: calc(100% - 32px);
  max-width: 440px;
  background: var(--text);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  animation: fadeIn 0.3s ease;
}
.version-warning-row  { display: flex; align-items: flex-start; gap: 12px; }
.version-warning-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.version-warning-body { flex: 1; }
.version-warning-eyebrow {
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  font-weight: bold;
}
.version-warning-text {
  font-family: var(--main-font-family);
  font-size: 0.875rem;     /* was 14px — scales */
  color: rgba(245,240,232,0.85);
  line-height: 1.6;
}
.version-warning-close {
  background: none;
  border: none;
  color: rgba(245,240,232,0.4);
  font-size: 18px;         /* UI chrome — stays px */
  cursor: pointer;
  padding-inline-start: 8px;  /* was padding: 0 0 0 8px — flips in RTL */
  flex-shrink: 0;
  line-height: 1;
}


/* ── 04. SAVE BAR ───────────────────────────────────────────────────────── */
/* Fixed bar pinned to the bottom of the viewport.
   Fades into the page background via the gradient so it appears to float
   above content rather than cutting it off.
   max-width keeps buttons centred on wider screens. */

.save-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 10px 12px 5px 12px;
  /* Uses safe-area-inset-bottom plus extra padding for home-indicator devices */
  padding-bottom: calc(env(safe-area-inset-bottom) + 5px);
  background: linear-gradient(to top, var(--surface-mid) 70%, transparent);
  display: flex;
  gap: 8px;
  max-width: 340px;
  margin: 0 auto;
}
.save-btn {
  flex: 1;
  background: var(--text);
  color: var(--surface);
  border: none;
  border-radius: 10px;
  padding: 10px 6px;
  font-family: var(--main-font-family);
  font-size: 12px;         /* UI chrome — stays px */
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.save-btn:active { transform: scale(0.98); }
.save-btn.saved  { background: var(--success); }
.save-btn span   { font-size: 14px; }   /* emoji — stays px */


/* ── 05. CHAPTER NAV + LANGUAGE BAR ────────────────────────────────────── */
/* Prev / Next buttons at the foot of each chapter.
   Language bar: sticky strip of flag/badge buttons below the top nav,
   shown only when a chapter contains content in more than one language.
   Matches the visual style and positioning of .lib-sticky-header in
   07-pages.css — same background, same z-index, same top offset. */

.chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px var(--content-margin) 0;
  padding-bottom: 8px;
  gap: 10px;
}
.chapter-nav-btn {
  flex: 1;
  background: var(--text);
  color: var(--surface);
  border: none;
  border-radius: 10px;
  padding: 14px 10px;
  font-family: var(--font-stack-heading);
  font-size: 0.9375rem;    /* was 15px — scales */
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  text-align: center;
}
.chapter-nav-btn:active { transform: scale(0.98); }
.chapter-nav-btn:hover  { background: var(--text-secondary); }
.chapter-nav-btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.chapter-nav-btn.secondary:hover { background: var(--surface-mid); }

/* .chapter-lang-bar is the fixed lang switcher for chapters.
   position:fixed mirrors the top nav and save bar — all persistent UI chrome
   in this app is fixed rather than sticky, since window is the scroll root
   and the top nav itself is fixed. top: 52px + safe-area-inset-top places it
   flush below the fixed nav. z-index:49 keeps it below modals (50+).
   Buttons use .lib-lang-btn directly (defined in 07-pages.css) so no
   separate .chapter-lang-btn ruleset is needed. */
.chapter-lang-bar {
  position: fixed;
  top: calc(52px + env(safe-area-inset-top));  /* flush below the fixed top nav */
  left: 0;
  right: 0;
  z-index: calc(var(--z-subnav) - 1);          /* below modals (≥z-subnav) but above content */
  background: #1c1710;                         /* = var(--text) hardcoded as fallback */
  display: none;                               /* hidden by default; JS sets display:flex */
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(245,240,232,0.10);
  overflow-x: auto;
  scrollbar-width: none;
}
.chapter-lang-bar::-webkit-scrollbar { display: none; }

/* When the lang bar is visible, the chapter content needs to clear it.
   The bar height is approximately 38px (padding 5px top + 5px bottom +
   18px emoji + border). A padding-top on .chapter-page pushes the
   chapter header below the fixed bar.
   JS sets chapter-page--with-lang-bar on the wrapper when the bar shows,
   so single-language chapters (bar hidden) are unaffected. */
.chapter-page--with-lang-bar {
  padding-top: 38px;
}



/* ── 06. PAGE CLOSE BUTTON ──────────────────────────────────────────────── */
/* Shared ✕ Close button used on non-chapter full-screen pages
   (How to Use, Copyright, Settings, Leaders Notes, etc.). */

.page-close-bar {
  display: flex;
  justify-content: center;
  padding: 8px 16px 24px;
}
.page-close-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  border-radius: 20px;
  padding: 8px 24px;
  font-family: var(--font-stack-mono);
  font-size: 11px;         /* UI chrome — stays px */
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.page-close-btn:hover {
  background: var(--surface-mid);
  color: var(--text);
}


/* ── 07. CLOSE BUTTON ANIMATIONS ────────────────────────────────────────── */
/* Rotation and squish feedback shared across all close buttons:
   page-close-btn, verse-modal-close, modal-close-footer-btn, qa-modal-close.
   Note: .verse-modal-close and .qa-modal-close are defined in overlays.css —
   their animation behaviour is coupled here intentionally. */

/* Base: the ✕ icon span needs inline-block for rotation to work */
.page-close-btn span,
.verse-modal-close span,
.modal-close-footer-btn span,
.qa-modal-close span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  line-height: 1;
}

/* 1. Rotation — triggered by hover (desktop) or tap (Android) */
.page-close-btn:hover span,
.page-close-btn:active span,
.verse-modal-close:hover span,
.verse-modal-close:active span,
.modal-close-footer-btn:hover span,
.modal-close-footer-btn:active span,
.qa-modal-close:hover span,
.qa-modal-close:active span {
  transform: rotate(90deg);
}

/* 2. Squish — visual feedback for finger taps on Android */
.page-close-btn:active,
.verse-modal-close:active,
.modal-close-footer-btn:active,
.qa-modal-close:active {
  transform: scale(0.95);
  background-color: var(--surface-mid);
  transition: transform 0.1s ease;
}

/* 3. Minimum touch target — Android accessibility standard (44 × 44px) */
.verse-modal-close,
.qa-modal-close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
}


/* ── 08. GPU COMPOSITING ────────────────────────────────────────────────── */
/* will-change hints for elements that animate or are fixed-positioned.
   Applied to nav elements here; overlay elements carry their own hints
   in overlays.css. */

.save-bar,
.toast {
  will-change: transform;
  transform: translateZ(0);
}


/* ══════════════════════════════════════════════════════════════════════════
   09. DARK MODE
   body.dark-mode overrides for all rules in this file, gathered here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Toast ──
   No overrides needed — success green reads clearly on dark backgrounds. */

/* ── Celebration toast ──
   No overrides needed — accent gold and --text colour both hold in dark mode. */

/* ── Version warning ──
   No overrides needed — uses --text background palette by design,
   which is already dark regardless of colour mode. */

/* ── Save bar ──
   No overrides needed — gradient uses --surface-mid token, which is
   overridden at the body level in base.css dark mode. */

/* ── Chapter nav ── */
body.dark-mode .chapter-nav-btn.secondary {
  border-color: var(--dm-border);
  color: var(--text-faint);
}
body.dark-mode .chapter-nav-btn.secondary:hover {
  background: var(--dm-raised);
}

/* ── Chapter language bar ──
   In dark mode the top nav uses --dm-base, so the lang bar matches that
   rather than --text. The lib-lang-btn dark-mode tints already apply via
   the .lib-lang-btn rules in 07-pages.css dark-mode section, so only the
   bar background and border need overriding here. */
body.dark-mode .chapter-lang-bar {
  background: #0f0c09;                         /* = var(--dm-base) hardcoded as fallback */
  border-bottom-color: var(--dm-border);
}

/* ── Page close button ── */
body.dark-mode .page-close-btn {
  border-color: var(--dm-border);
  color: var(--dm-text-faint);
}
body.dark-mode .page-close-btn:hover {
  background: var(--dm-raised);
  color: var(--dm-text-mid);
}


/* ══════════════════════════════════════════════════════════════════════════
   10. RTL OVERRIDES  (dir="rtl" on <html> or a parent element)
   Applies to Arabic (ar), Urdu (ur), and Hebrew (he).

   .version-warning-close sits at the inline-end of a flex row. Its original
   padding: 0 0 0 8px (physical left) separates it from the body text to its
   left in LTR. In RTL the body text is to its right, so the gap must be on
   the right — padding-inline-start (already applied in the base rule above)
   handles this automatically with no additional rule needed here.

   All toasts use left: 50% + translateX(-50%) for centring, which is
   direction-neutral and requires no override.
   ══════════════════════════════════════════════════════════════════════════ */

/* No physical layout overrides required in this file beyond the
   padding-inline-start change already made to .version-warning-close. */


/* ══════════════════════════════════════════════════════════════════════════
   11. SCRIPT-SPECIFIC OVERRIDES
   ──────────────────────────────────────────────────────────────────────────
   Elements targeted in this file:

   .toast / .validate-toast      letter-spacing: 0.05em on translated text
   .version-warning-eyebrow      letter-spacing: 0.15em + text-transform: uppercase
   .version-warning-text         line-height: 1.6 (body text, translated)
   .celebration-toast            font-family: 'Source Serif 4' hardcoded +
                                 line-height: 1.5 (translated milestone text)
   .chapter-nav-btn              font-family: var(--font-stack-heading) on
                                 translated "Prev / Next" button labels
   .page-close-btn               letter-spacing: 0.08em on translated label

   Elements NOT targeted (no changes needed):
   .save-btn       — uses --main-font-family, no letter-spacing, short emoji+label
   .celebration-toast-sub — same font/container as parent toast, covered above
   All animation, GPU, and dark-mode rules — no typographic content
   ══════════════════════════════════════════════════════════════════════════ */


/* ── A. Arabic script — ar, ur ────────────────────────────────────────── */

:lang(ar) .toast,
:lang(ur) .toast,
:lang(ar) .validate-toast,
:lang(ur) .validate-toast {
  letter-spacing: 0;
}

:lang(ar) .version-warning-eyebrow,
:lang(ur) .version-warning-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ar) .version-warning-text,
:lang(ur) .version-warning-text {
  line-height: 2;
}

:lang(ar) .celebration-toast,
:lang(ur) .celebration-toast {
  font-family: var(--main-font-family);
  line-height: 2;
}

:lang(ar) .chapter-nav-btn,
:lang(ur) .chapter-nav-btn {
  font-family: var(--main-font-family);
}

:lang(ar) .page-close-btn,
:lang(ur) .page-close-btn {
  letter-spacing: 0;
}


/* ── B. Hebrew script — he ────────────────────────────────────────────── */

:lang(he) .toast,
:lang(he) .validate-toast {
  letter-spacing: 0;
}

:lang(he) .version-warning-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

:lang(he) .version-warning-text {
  line-height: 1.9;
}

:lang(he) .celebration-toast {
  font-family: var(--main-font-family);
  line-height: 1.9;
}

:lang(he) .chapter-nav-btn {
  font-family: var(--main-font-family);
}

:lang(he) .page-close-btn {
  letter-spacing: 0;
}


/* ── C. Devanagari — ne (Nepali), hi (Hindi) ─────────────────────────── */

:lang(ne) .toast,
:lang(hi) .toast,
:lang(ne) .validate-toast,
:lang(hi) .validate-toast {
  letter-spacing: 0;
}

:lang(ne) .version-warning-eyebrow,
:lang(hi) .version-warning-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ne) .version-warning-text,
:lang(hi) .version-warning-text {
  line-height: 2;
}

:lang(ne) .celebration-toast,
:lang(hi) .celebration-toast {
  font-family: var(--main-font-family);
  line-height: 2;
}

:lang(ne) .chapter-nav-btn,
:lang(hi) .chapter-nav-btn {
  font-family: var(--main-font-family);
}

:lang(ne) .page-close-btn,
:lang(hi) .page-close-btn {
  letter-spacing: 0;
}


/* ── D. Myanmar script — my (Burmese) ───────────────────────────────── */

:lang(my) .toast,
:lang(my) .validate-toast {
  letter-spacing: 0;
}

:lang(my) .version-warning-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

:lang(my) .version-warning-text {
  line-height: 2.2;
}

:lang(my) .celebration-toast {
  font-family: var(--main-font-family);
  line-height: 2.2;
}

:lang(my) .chapter-nav-btn {
  font-family: var(--main-font-family);
}

:lang(my) .page-close-btn {
  letter-spacing: 0;
}


/* ── E. CJK — zh (Chinese Simplified zh-CN), ja (Japanese) ──────────── */

:lang(zh) .toast,
:lang(ja) .toast,
:lang(zh) .validate-toast,
:lang(ja) .validate-toast {
  letter-spacing: 0;
}

:lang(zh) .version-warning-eyebrow,
:lang(ja) .version-warning-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

:lang(zh) .version-warning-text,
:lang(ja) .version-warning-text {
  line-height: 1.6;   /* CJK default — same as base value, stated for clarity */
}

:lang(zh) .celebration-toast,
:lang(ja) .celebration-toast {
  font-family: var(--main-font-family);
  line-height: 1.6;
}

:lang(zh) .chapter-nav-btn,
:lang(ja) .chapter-nav-btn {
  font-family: var(--main-font-family);
}

:lang(zh) .page-close-btn,
:lang(ja) .page-close-btn {
  letter-spacing: 0;
}


/* ── F. Hangul — ko (Korean) ─────────────────────────────────────────── */

:lang(ko) .toast,
:lang(ko) .validate-toast {
  letter-spacing: 0;
}

:lang(ko) .version-warning-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ko) .version-warning-text {
  line-height: 1.7;
}

:lang(ko) .celebration-toast {
  font-family: var(--main-font-family);
  line-height: 1.7;
}

:lang(ko) .chapter-nav-btn {
  font-family: var(--main-font-family);
}

:lang(ko) .page-close-btn {
  letter-spacing: 0;
}


/* ── G. Cyrillic — ru (Russian), uk (Ukrainian) ─────────────────────── */
/* Cyrillic has case and italic so only letter-spacing on chrome labels
   is reset. font-family and text-transform are left unchanged. */

:lang(ru) .toast,
:lang(uk) .toast,
:lang(ru) .validate-toast,
:lang(uk) .validate-toast {
  letter-spacing: 0;
}

:lang(ru) .version-warning-eyebrow,
:lang(uk) .version-warning-eyebrow {
  letter-spacing: 0;
}

:lang(ru) .page-close-btn,
:lang(uk) .page-close-btn {
  letter-spacing: 0;
}