/* =========================================================================
   Shrimad Rajchandra Ashram, Devlali — Stylesheet
   -------------------------------------------------------------------------
   HOW TO EDIT THIS FILE
   You almost never need to. The colours and sizes below are named so you
   can find them by what they mean, not what they look like. If something
   needs to change site-wide (e.g. "make everything a bit bigger"), change
   it once at the top under :root and it updates everywhere.
   ========================================================================= */

:root {
  /* --- Colour palette (temple / marigold theme) --- */
  --color-bg:          #FBF6EC; /* warm ivory page background */
  --color-bg-alt:      #F3E8D3; /* soft sandalwood — alternating sections */
  --color-maroon:      #7A1F2B; /* deep kumkum red — headings, brand */
  --color-maroon-dark: #5A1620; /* pressed / hover state of maroon */
  --color-saffron:     #E8A03D; /* marigold — buttons, accents */
  --color-saffron-dark:#C9822A; /* pressed / hover state of saffron */
  --color-ink:         #3A2A1E; /* body text — warm dark brown, not black */
  --color-ink-light:   #6B5A4A; /* secondary / muted text */
  --color-gold-line:   #C08A2E; /* toran divider + hairline rules */
  --color-white:       #FFFFFF;
  --color-focus:       #1B6FB0; /* visible keyboard focus ring — kept high contrast on purpose */

  /* --- Type --- */
  --font-display: 'Rozha One', 'Hind Vadodara', 'Noto Serif Gujarati', serif;
  --font-body:    'Hind', 'Hind Vadodara', 'Noto Sans Gujarati', sans-serif;

  /* Base size is intentionally larger than a typical site — this is for
     elderly readers. Do not shrink below 18px without discussing why. */
  --text-body:    1.19rem;   /* ~19px */
  --text-small:   1.0rem;    /* ~16px, used sparingly (captions only) */
  --text-h1:      2.6rem;
  --text-h2:      2.1rem;
  --text-h3:      1.5rem;
  --line-height-body: 1.75;

  /* --- Spacing / layout --- */
  --max-width: 1100px;
  --space-section: 4.5rem;
  --radius: 14px;
  --tap-min: 48px; /* minimum comfortable tap target */
}

/* =========================================================================
   Reset & base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; } /* safety net: nothing should ever force horizontal scroll */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; /* long unbroken words (long Gujarati compounds, emails) wrap instead of overflowing */
}
img { max-width: 100%; display: block; }
a { color: var(--color-maroon); text-decoration-thickness: 2px; }
a:hover { color: var(--color-saffron-dark); }

/* Visible keyboard focus everywhere — important for accessibility */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-maroon);
  line-height: 1.25;
  margin: 0 0 0.6em;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section { padding: var(--space-section) 0; }
.section--alt { background: var(--color-bg-alt); }

.section-title {
  text-align: center;
  margin-bottom: 2rem;
}
.section-title p.eyebrow {
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-saffron-dark);
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.reader-page-header p.eyebrow {
  color: var(--color-saffron-dark);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-small);
  margin: 0 0 0.4rem;
}

/* =========================================================================
   Section divider — quiet on purpose. A thin gold hairline with a single
   small diamond at centre, the kind of restrained border motif found on
   temple thresholds and textile borders. Sections are told apart mainly
   by their alternating background colour; this just marks the seam.
   ========================================================================= */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1px;
  background: var(--color-gold-line);
  opacity: 0.5;
}
.section-divider::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-gold-line);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* =========================================================================
   Header / Navigation
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 3px solid var(--color-gold-line);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  flex-direction: column;
  color: var(--color-maroon);
  text-decoration: none;
  line-height: 1.2;
  flex-shrink: 0;
}
.brand .brand-main {
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.brand .brand-sub {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-light);
  letter-spacing: 0.05em;
}
.brand:hover .brand-main { color: var(--color-saffron-dark); }

/* Desktop: nav sits in the middle, call/directions stay top-right */
.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}
.main-nav a {
  display: inline-block;
  padding: 0.6rem 0.75rem;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  border-radius: 8px;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a:focus-visible { background: var(--color-bg-alt); color: var(--color-maroon); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap-min);
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--color-saffron); color: var(--color-maroon-dark); }
.btn-primary:hover { background: var(--color-saffron-dark); color: var(--color-white); }
.btn-outline { background: transparent; color: var(--color-maroon); border-color: var(--color-maroon); }
.btn-outline:hover { background: var(--color-maroon); color: var(--color-white); }
.btn-block { width: 100%; }
.btn-large { min-height: 56px; font-size: 1.1rem; padding: 0.9rem 1.8rem; }

/* Mobile nav toggle — hidden on desktop */
.nav-toggle {
  display: none;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  background: var(--color-bg-alt);
  border: 2px solid var(--color-gold-line);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-maroon);
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; }
  .header-right { gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; }
  .nav-toggle { display: inline-flex; }

  .main-nav {
    order: 3;
    flex-direction: column;
    flex-basis: 100%;
    width: 100%;
    display: none;
    border-top: 1px solid var(--color-gold-line);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }
  .main-nav.open { display: flex; }
  .main-nav a { width: 100%; font-size: 1.1rem; padding: 0.9rem 0.6rem; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-slide {
  position: relative;
  height: 60vh;
  min-height: 380px;
  max-height: 620px;
  background-size: cover;
  background-position: center;
  display: none;
}
.hero-slide.active { display: block; }
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58,42,30,0.05) 0%, rgba(58,42,30,0.55) 85%);
}
.hero-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 1.25rem 2.5rem;
  z-index: 2;
  text-align: center;
}
.hero-caption h1 {
  color: var(--color-white);
  font-size: clamp(1.9rem, 5vw, var(--text-h1));
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.hero-caption p {
  color: #F6E9D3;
  font-size: 1.15rem;
  max-width: 640px;
  margin: 0 auto 1.5rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.hero-cta-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-controls button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--color-maroon);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-controls button:hover { background: var(--color-white); }
.hero-prev { left: 14px; }
.hero-next { right: 14px; }

.hero-dots {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.hero-dots button {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.hero-dots button.active { background: var(--color-saffron); border-color: var(--color-saffron); }

@media (max-width: 600px) {
  .hero-slide { height: 46vh; min-height: 300px; }
  .hero-controls button { width: 44px; height: 44px; }
}

/* =========================================================================
   Two-up devotional cards (Mandir section)
   ========================================================================= */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 760px) {
  .card-grid { grid-template-columns: 1fr; }
}
.devotional-card {
  background: var(--color-white);
  border: 1px solid #EADFC8;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(122,31,43,0.06);
  display: flex;
  flex-direction: column;
}
.devotional-card img { width: 100%; height: 260px; object-fit: cover; }
.devotional-card .card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}
.devotional-card blockquote {
  margin: 0;
  font-style: italic;
  color: var(--color-ink);
  border-left: 4px solid var(--color-saffron);
  padding-left: 1rem;
}
.devotional-card .card-body .btn { margin-top: auto; }

/* =========================================================================
   Media embeds (audio / video) — always responsive
   ========================================================================= */
.media-wrap { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 18px rgba(122,31,43,0.08); }
.media-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-wrap.audio { padding-top: 0; height: 340px; }

.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
@media (max-width: 760px) { .media-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Upcoming programmes
   ========================================================================= */
.programme-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.programme-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid #EADFC8;
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.programme-date {
  flex: 0 0 auto;
  min-width: 110px;
  font-weight: 700;
  color: var(--color-maroon);
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.programme-item p { margin: 0; }

/* =========================================================================
   Gallery grid + lightbox
   ========================================================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.9rem;
}
.gallery-grid button {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.gallery-grid button:hover img { transform: scale(1.06); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(30, 20, 12, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(92vw, 1000px); max-height: 85vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.lightbox-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--color-saffron);
  color: var(--color-maroon-dark);
  font-size: 1.6rem;
  cursor: pointer;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--color-maroon);
  font-size: 1.8rem;
  cursor: pointer;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* =========================================================================
   Accordion (native <details>) — Ashram info, CD list
   ========================================================================= */
.accordion-item {
  background: var(--color-white);
  border: 1px solid #EADFC8;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
}
.accordion-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-maroon);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap-min);
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
  content: "+";
  font-size: 1.6rem;
  color: var(--color-saffron-dark);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.accordion-item[open] summary::after { content: "\2212"; }
.accordion-item summary:hover { background: var(--color-bg-alt); }
.accordion-body { padding: 0 1.4rem 1.4rem; }
.accordion-body ul { padding-left: 1.3rem; margin: 0; }
.accordion-body li { margin-bottom: 0.6rem; }

/* =========================================================================
   Contact section
   ========================================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  background: var(--color-white);
  border: 1px solid #EADFC8;
  border-radius: var(--radius);
  padding: 1.6rem;
}
.contact-card h3 { margin-bottom: 1rem; }
.contact-line {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 0.9rem;
}
.contact-line strong { color: var(--color-ink); }
.contact-line a.tap { font-weight: 700; }

.form-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  margin-top: 2.5rem;
}
@media (max-width: 760px) { .form-map-grid { grid-template-columns: 1fr; } }
.map-wrap iframe, .form-wrap iframe { width: 100%; height: 420px; border: 0; border-radius: var(--radius); }

/* =========================================================================
   Book reader (biography / teachings pages — scanned page viewer)
   ========================================================================= */
.reader-page-header {
  text-align: center;
  padding: 2.5rem 1.25rem 1rem;
}
.reader-page-header p {
  color: var(--color-ink-light);
  max-width: 640px;
  margin: 0.5rem auto 0;
}

.reader {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}
.reader-frame {
  background: var(--color-white);
  border: 1px solid #EADFC8;
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(122,31,43,0.08);
  padding: 1rem;
}
.reader-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  background: var(--color-bg-alt);
  border-radius: 10px;
  overflow: hidden;
}
.reader-image-wrap img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
}

.reader-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.reader-controls .btn {
  min-width: 120px;
}
.reader-position {
  font-family: var(--font-display);
  color: var(--color-maroon);
  font-size: 1.15rem;
  text-align: center;
  white-space: nowrap;
}
.reader-position small {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-ink-light);
  font-size: 0.85rem;
}

.reader-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.reader-jump label { font-weight: 600; }
.reader-jump input[type="number"] {
  width: 80px;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  font-size: 1.05rem;
  border: 2px solid #EADFC8;
  border-radius: 8px;
  text-align: center;
}
.reader-jump .btn { min-height: 44px; padding: 0.5rem 1rem; }

@media (max-width: 480px) {
  .reader-controls .btn span.btn-label { display: none; }
  .reader-controls .btn { min-width: 56px; padding: 0.75rem; }
}

/* =========================================================================
   Audio Book
   ========================================================================= */

/* --- Continue listening banner --- */
.continue-banner {
  display: none; /* shown by JS only when there's something to resume */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--color-maroon);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  margin-bottom: 2rem;
}
.continue-banner.visible { display: flex; }
.continue-banner .continue-text { display: flex; flex-direction: column; }
.continue-banner .continue-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #F0C888;
  font-weight: 700;
}
.continue-banner .continue-title { font-family: var(--font-display); font-size: 1.25rem; }
.continue-banner .btn-primary { flex-shrink: 0; }

/* --- Layout: sidebar + main reading/player pane --- */
.audiobook-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .audiobook-layout { grid-template-columns: 1fr; }
  .chapter-sidebar.chapter-panel { display: none; } /* mobile uses the drawer instead — two classes so this reliably beats .chapter-panel's own display:flex */
}

/* --- Chapter sidebar / drawer (shared styles; drawer adds an overlay) --- */
.chapter-panel {
  background: var(--color-white);
  border: 1px solid #EADFC8;
  border-radius: var(--radius);
  padding: 1.1rem;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
}
.chapter-sidebar.chapter-panel { position: sticky; top: calc(var(--header-height, 80px) + 16px); }

.chapter-toolbar { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.9rem; }
.chapter-search {
  width: 100%;
  min-height: 46px;
  padding: 0.5rem 0.9rem;
  font-size: 1rem;
  border: 2px solid #EADFC8;
  border-radius: 10px;
}
.chapter-filter-row { display: flex; gap: 0.5rem; }
.chapter-filter-row button {
  flex: 1;
  min-height: 40px;
  border-radius: 8px;
  border: 2px solid #EADFC8;
  background: var(--color-bg);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--color-ink-light);
}
.chapter-filter-row button.active { background: var(--color-saffron); border-color: var(--color-saffron); color: var(--color-maroon-dark); }

.chapter-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.chapter-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.5rem;
  border: none;
  background: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  min-height: var(--tap-min);
}
.chapter-item:hover { background: var(--color-bg-alt); }
.chapter-item.active { background: var(--color-bg-alt); }
.chapter-item.active .chapter-item-title { color: var(--color-maroon); }
.chapter-item-num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-ink-light);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chapter-item.completed .chapter-item-num { background: var(--color-saffron); color: var(--color-maroon-dark); }
.chapter-item-body { flex: 1; min-width: 0; }
.chapter-item-title {
  display: block;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chapter-item-progress { display: block; height: 4px; background: #EADFC8; border-radius: 2px; margin-top: 0.4rem; overflow: hidden; }
.chapter-item-progress-fill { display: block; height: 100%; background: var(--color-saffron); width: 0%; }
.chapter-item-star {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #D8CBB0;
  min-width: 32px;
}
.chapter-item-star.favorited { color: var(--color-saffron-dark); }
.chapter-item-page { flex-shrink: 0; font-size: 0.78rem; color: var(--color-ink-light); font-variant-numeric: tabular-nums; }
.chapter-item-author { display: block; font-size: 0.8rem; font-style: italic; color: var(--color-ink-light); margin-top: 0.1rem; }
.chapter-item.unavailable { opacity: 0.7; }
.chapter-item-unavailable-tag { display: block; font-size: 0.75rem; font-style: italic; font-weight: 400; color: var(--color-ink-light); margin-top: 0.1rem; }

.chapter-section-header {
  padding: 0.9rem 0.5rem 0.3rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-maroon);
  border-top: 1px solid #EADFC8;
  margin-top: 0.4rem;
}
.chapter-list li:first-child.chapter-section-header { border-top: none; margin-top: 0; }
.chapter-section-pages { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--color-ink-light); }

.chapter-empty { color: var(--color-ink-light); text-align: center; padding: 1.5rem 0.5rem; }

/* --- Language toggle: one copy lives in the header bar (desktop),
   one lives inside the mobile menu — CSS shows only the right one,
   so the mobile bar never gets crowded next to the hamburger. --- */
.lang-toggle { display: flex; gap: 0.3rem; }
.lang-toggle--in-nav { display: none; margin-bottom: 0.6rem; }
.lang-toggle button {
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  border: 2px solid #EADFC8;
  background: var(--color-white);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--color-ink-light);
}
.lang-toggle button.active { background: var(--color-maroon); border-color: var(--color-maroon); color: var(--color-white); }
@media (max-width: 900px) {
  .lang-toggle--in-bar { display: none; }
  .lang-toggle--in-nav { display: flex; }
}

/* --- Unavailable-recording notice inside the player --- */
.unavailable-notice {
  display: none;
  background: #FBEFE0;
  border: 1px solid #E8C98F;
  color: #8A5A1E;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.1rem;
  text-align: center;
}

/* Mobile chapter drawer (opens full-screen, same idea as the photo lightbox) */
.chapter-drawer-toggle { width: 100%; margin-bottom: 1.5rem; display: none; }
@media (max-width: 900px) { .chapter-drawer-toggle { display: inline-flex; } }

.chapter-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(30,20,12,0.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.chapter-drawer.open { display: flex; }
.chapter-drawer .chapter-panel {
  width: 100%;
  max-height: 85vh;
  border-radius: var(--radius) var(--radius) 0 0;
  margin: 0;
}
.chapter-drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.chapter-drawer-close {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-alt);
  font-size: 1.3rem;
  cursor: pointer;
}

/* --- Player card --- */
.player-card {
  background: var(--color-white);
  border: 1px solid #EADFC8;
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: 0 4px 20px rgba(122,31,43,0.06);
}
.player-eyebrow { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-saffron-dark); }
.player-title { margin: 0.2rem 0 1.2rem; }

.player-actions-row { display: flex; gap: 0.6rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.player-actions-row .btn { padding: 0.55rem 1rem; font-size: 0.9rem; min-height: 40px; }

.player-seek-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.player-seek-row input[type="range"] { flex: 1; accent-color: var(--color-saffron-dark); height: 6px; }
.player-time { font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--color-ink-light); min-width: 44px; }

.player-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.3rem;
  flex-wrap: wrap;
}
.player-transport button {
  border: none;
  background: var(--color-bg-alt);
  color: var(--color-maroon);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-transport .btn-skip { width: 48px; height: 48px; font-size: 0.85rem; font-weight: 700; }
.player-transport .btn-chapter-step { width: 48px; height: 48px; font-size: 1.2rem; }
.player-transport .btn-play {
  width: 72px; height: 72px;
  background: var(--color-saffron);
  color: var(--color-maroon-dark);
  font-size: 1.7rem;
}
.player-transport .btn-play:hover { background: var(--color-saffron-dark); color: var(--color-white); }

.player-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
}
.player-setting { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; }
.player-setting label { font-size: 0.8rem; font-weight: 700; color: var(--color-ink-light); }
.player-setting select {
  min-height: 42px;
  border-radius: 8px;
  border: 2px solid #EADFC8;
  padding: 0.3rem 0.6rem;
  font-size: 0.95rem;
}

/* --- "More options" disclosure — keeps secondary controls out of the way
   until asked for, so the primary play controls stay the visual focus --- */
.player-more { margin-top: 1.3rem; border-top: 1px solid #EADFC8; padding-top: 0.2rem; }
.player-more summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.3rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-maroon);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.player-more summary::-webkit-details-marker { display: none; }
.player-more summary::after { content: "\25BE"; font-size: 0.8rem; color: var(--color-saffron-dark); }
.player-more[open] summary::after { content: "\25B4"; }
.player-more summary:hover { background: var(--color-bg-alt); border-radius: 8px; }
.player-more-body { padding-top: 0.8rem; display: flex; flex-direction: column; gap: 1.1rem; }

.toggle-row { display: flex; align-items: center; gap: 0.6rem; }
.toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: #D8CBB0; border-radius: 999px; transition: 0.2s;
}
.toggle-slider::before {
  content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: var(--color-white); border-radius: 50%; transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--color-saffron); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-label { font-size: 0.9rem; font-weight: 600; }

/* --- Progress summary at top of chapter list --- */
.progress-summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.6rem;
  margin-bottom: 0.8rem;
  background: var(--color-bg-alt);
  border-radius: 10px;
}
.progress-ring { flex-shrink: 0; }
.progress-summary-text { font-size: 0.9rem; color: var(--color-ink-light); font-weight: 600; }
.progress-summary-text strong { color: var(--color-maroon); font-family: var(--font-display); font-size: 1.05rem; display: block; }

/* --- Simple mode: fewer, bigger controls for anyone who wants a plainer player --- */
.simple-mode-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.simple-mode-row .toggle-label { font-size: 0.85rem; color: var(--color-ink-light); }
.player-card.simple .player-settings,
.player-card.simple .player-actions-row,
.player-card.simple .btn-chapter-step { display: none; }
.player-card.simple .player-transport .btn-play { width: 88px; height: 88px; font-size: 2rem; }
.player-card.simple .player-transport .btn-skip { width: 58px; height: 58px; font-size: 1rem; }

/* --- Transcript --- */
.transcript-card {
  background: var(--color-white);
  border: 1px solid #EADFC8;
  border-radius: var(--radius);
  padding: 1.6rem;
  margin-top: 1.5rem;
}
.transcript-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; }
.transcript-header h3 { margin: 0; }
.font-size-controls { display: flex; gap: 0.4rem; }
.font-size-controls button {
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 2px solid #EADFC8;
  background: var(--color-bg);
  cursor: pointer;
  font-weight: 700;
}
.font-size-controls button.active { background: var(--color-saffron); border-color: var(--color-saffron); }

.transcript-text { color: var(--color-ink); }
.transcript-text p { margin: 0 0 1.1em; }
.transcript-text.font-small { font-size: 1rem; }
.transcript-text.font-medium { font-size: 1.19rem; }
.transcript-text.font-large { font-size: 1.4rem; }
.transcript-text.font-xlarge { font-size: 1.65rem; }
.transcript-placeholder { color: var(--color-ink-light); font-style: italic; }

@media (max-width: 600px) {
  .player-card, .transcript-card { padding: 1.2rem; }
  .player-transport { gap: 0.5rem; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  background: var(--color-maroon);
  color: #F6E9D3;
  text-align: center;
  padding: 2.5rem 1.25rem;
}
.site-footer a { color: var(--color-white); }
.site-footer p { margin: 0.3rem 0; }