/* ===========================================================
   Bhakti Academy — Resources / Prayer pages
   Plain white, simple, readable. Shared by all prayer pages.
   =========================================================== */

/* Loaded after styles.css on sub-pages — overrides the page body to a
   plain white, serif reading surface. Colour vars come from styles.css
   so the shared header/footer stay identical to the homepage. */
body{
  background:#ffffff;
  color:var(--ink);
  font-family:"Marcellus", Georgia, "Times New Roman", serif;
  line-height:1.85;
  font-size:18px;
}

.wrap{max-width:680px;margin:0 auto;padding:2.8rem 1.3rem 3rem}

.prayer-title-bar{
  position:sticky;top:64px;z-index:40;
  background:#fdf6e8;backdrop-filter:blur(6px);
  border-top:1px solid var(--line);border-bottom:2px solid var(--gold);
  box-shadow:0 10px 22px -14px rgba(94,27,20,.55);
  text-align:center;padding:.85rem 1rem;margin:0 0 -1px;
  font-size:1.35rem;font-weight:500;letter-spacing:.01em;color:var(--maroon);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.prayer-title-bar.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:560px){.prayer-title-bar{top:56px;font-size:1.15rem;padding:.7rem 1rem}}

/* While scrolled through an aarti, collapse the header to just the brand —
   the nav links/buttons aren't needed mid-prayer and only crowd the lyrics. */
body.aarti-scrolled .site-header .nav-links,
body.aarti-scrolled .site-header .nav-cta .btn,
body.aarti-scrolled .site-header .nav-cta .site-search{
  display:none;
}
body.aarti-scrolled .site-header .container.nav{justify-content:flex-start}

.prayer-head{text-align:center;margin-bottom:2.6rem}
.prayer-head img{
  width:180px;height:180px;object-fit:cover;border-radius:50%;
  margin:0 auto 1.4rem;border:3px solid var(--line);
}
.prayer-head .kicker{
  text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;
  color:var(--gold);margin:0 0 .5rem
}
.prayer-head h1{
  font-size:clamp(1.9rem,5vw,2.6rem);margin:0 0 .4rem;
  color:var(--maroon);font-weight:500;line-height:1.15
}
.prayer-head .by{color:var(--muted);font-size:.95rem;font-style:italic;margin:0}

.verse{margin:0 0 2.3rem;text-align:center}
.verse .num{
  display:block;font-size:.74rem;letter-spacing:.18em;
  color:var(--gold);margin-bottom:.55rem
}
.verse .text{margin:0;font-size:1.2rem;color:var(--ink);line-height:1.95}
.verse .text em{font-style:italic}
.verse .tr{
  margin:.85rem auto 0;max-width:36rem;
  font-size:1rem;color:var(--muted);
  text-align:left;line-height:1.75
}
.verse .tr::before{
  content:"Translation";display:block;
  text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;
  color:var(--gold);margin-bottom:.25rem;text-align:center
}

.refrain{
  margin:0 auto 2.3rem;max-width:30rem;padding:.9rem 1rem;
  background:#faf7f1;border:1px solid var(--line);border-radius:10px;
  text-align:center;font-style:italic;color:var(--maroon);line-height:1.8
}
.refrain .lbl{
  display:block;font-style:normal;text-transform:uppercase;
  letter-spacing:.16em;font-size:.66rem;color:var(--gold);margin-bottom:.3rem
}

.source{text-align:center;color:var(--muted);font-style:italic;font-size:.95rem;margin:0 0 2.2rem}

hr.sep{border:0;border-top:1px solid var(--line);max-width:120px;margin:2.4rem auto}

/* ---------- meanings (collapsible — hidden by default so the
              mantra stays clean & singable on one screen) ---------- */
details.meanings{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
details.meanings>summary{
  cursor:pointer;list-style:none;text-align:center;
  color:var(--gold);text-transform:uppercase;letter-spacing:.16em;
  font-size:.74rem;padding:.5rem 0;user-select:none
}
details.meanings>summary::-webkit-details-marker{display:none}
details.meanings>summary::after{content:" ▾";display:inline-block}
details.meanings[open]>summary::after{content:" ▴"}
details.meanings>summary:hover{color:var(--maroon)}
details.meanings .meaning:first-of-type{margin-top:1.6rem}
.meaning{display:flex;gap:.95rem;max-width:38rem;margin:0 auto 1.35rem}
.meaning .mnum{flex:0 0 1.4rem;color:var(--gold);font-size:.95rem;letter-spacing:.04em;padding-top:.05rem}
.meaning p{margin:0;color:var(--ink);font-size:1.02rem;line-height:1.75}
.meaning .mlbl{display:block;color:var(--gold);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:.2rem}

/* ---------- legal / prose pages ---------- */
.prose h1{font-size:clamp(1.9rem,5vw,2.5rem);color:var(--maroon);font-weight:500;margin:0 0 .4rem;text-align:center}
.prose .updated{text-align:center;color:#9a8f80;font-size:.86rem;margin:0 0 2.4rem}
.prose h2{font-size:1.25rem;color:var(--maroon);font-weight:500;margin:2.2rem 0 .6rem}
.prose p,.prose li{font-size:1.02rem;color:var(--ink);line-height:1.8}
.prose ul{padding-left:1.3rem;margin:.6rem 0}
.prose li{margin:.35rem 0}
.prose a{color:var(--maroon)}

.credit{
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);
  text-align:center;font-size:.82rem;color:#9a8f80;line-height:1.6
}
.credit a{color:#9a8f80}

.prayer-nav{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin:1.6rem 0 1.8rem;padding-top:1.2rem;border-top:1px solid var(--line);
  flex-wrap:wrap
}
.prayer-nav a{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--maroon);font-size:.85rem;font-weight:500;
  text-decoration:none;border:1px solid var(--gold);border-radius:999px;
  padding:.42rem .95rem;background:#fff;transition:background .15s,color .15s
}
.prayer-nav a:hover{background:var(--gold);color:#fff}
.prayer-nav a.next{margin-left:auto}
.prayer-nav span.spacer{flex:1}

/* ---------- mobile: the whole aarti on one Kindle-style page ----------
   The .aarti block (header + every verse + refrains) is scaled by
   assets/js/aarti.js via the --fit multiplier so it always fits one screen
   without scrolling. All sizes/margins inside are in em so they scale
   together; meanings & credit live outside .aarti and scroll normally. */
@media(max-width:560px){
  body{font-size:17px}
  .wrap{padding:.9rem 1.15rem 2.2rem}

  .aarti{
    --fit:1;
    font-size:calc(17px * var(--fit));
    display:flex;flex-direction:column;justify-content:center;
  }

  .aarti .prayer-head{margin:0 0 1.15em}
  .aarti .prayer-head img{width:6.8em;height:6.8em;margin:0 auto .75em;border-width:2px}
  .aarti .prayer-head .kicker{font-size:.66em;margin-bottom:.35em}
  .aarti .prayer-head h1{font-size:2em;margin-bottom:.2em}
  .aarti .prayer-head .by{font-size:.92em}

  .aarti .source{font-size:.9em;margin:0 0 1.1em}

  .aarti .verse{margin:0 0 1em}
  .aarti .verse .num{font-size:.7em;margin-bottom:.3em}
  .aarti .verse .text{font-size:1.3em;line-height:1.6}

  .aarti .refrain{
    font-size:1.08em;margin:0 auto 1em;padding:.6em .85em;
    max-width:none;line-height:1.55;border-radius:8px;
  }
  .aarti .refrain .lbl{font-size:.62em;margin-bottom:.2em}

  .aarti hr.sep{margin:1em auto}

  .prayer-nav{margin:0 0 1.4rem;padding-top:.9rem}
  .prayer-nav a{font-size:.8rem;padding:.4rem .85rem}

  .meaning .mnum{flex-basis:1.2rem}
}