/* djjs.us · v1.0.5 liturgy pages: /panchang (Dinacharya), /bhakti (Lyric Sanctuary) and /bhakti/<slug> (the viewer and
   its printed lyric sheet). Loaded by includes/views/panchang.php, bhakti.php and bhakti-text.php on top of site.css,
   whose tokens (Temple Dark and light) it uses. */

/* Devanagari verse face: Tiro Devanagari Hindi, the same woff2 the Sangat portal bundle ships (assets/, hashed name),
   under its own family name so it never competes with the portal's or site.css's faces. */
@font-face { font-family: "DJJS Tiro Devanagari"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../tiro-devanagari-hindi-devanagari-400-normal-BN7hftjh.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; }

.lit { --lit-deva: "DJJS Tiro Devanagari", "Tiro Devanagari Hindi", "Mukta", "Noto Serif Devanagari", "Noto Sans Devanagari", serif;
  --lit-scale: 1; }
.lit__head { max-width: 48rem; margin-bottom: clamp(24px, 4vw, 44px); }
.lit__head .lead { color: var(--muted); }
.lit h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }

/* ---------- /panchang ---------- */
.lit__grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 1100px) { .lit__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.lit__main { min-width: 0; }
djjs-dinacharya { display: block; min-height: 420px; }
djjs-dinacharya:defined { min-height: 0; }
.lit-ssr { padding: 24px; border: 1px solid var(--champagne); border-radius: 24px; background: var(--surface); }
.lit-ssr h2 { margin: 0.2em 0 0.4em; }
.lit-ssr ul { padding-left: 1.2em; }
.lit-ssr__fine { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.lit__explain section + section { margin-top: 8px; }
.lit__explain h2 { margin: 0.9em 0 0.35em; }
.lit__explain section:first-child h2 { margin-top: 0; }
.lit__explain p { color: var(--ink); }
.lit__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ---------- /bhakti ---------- */
.lit__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.lit__chips a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--champagne-strong);
  background: var(--surface); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.lit__collection { padding-top: clamp(28px, 4vw, 48px); margin-top: clamp(20px, 3vw, 36px); border-top: 1px solid var(--champagne); scroll-margin-top: calc(var(--header-h) + 16px); }
.lit__collection h2 { margin: 0 0 0.3em; }
.lit__hi { font-family: var(--lit-deva); font-size: 0.72em; color: var(--gold-text); margin-left: 0.3em; white-space: nowrap; }
.lit__intro { color: var(--muted); max-width: 46rem; }
.lit__cards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lit__card { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 44px; padding: 20px 22px; border-radius: var(--radius-card);
  border: 1px solid var(--champagne); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-soft);
  transition: border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.lit__card:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .lit__card:hover { border-color: var(--champagne-strong); color: var(--ink); text-decoration: none; } }
.lit__card-deva { font-family: var(--lit-deva); font-size: 1.5rem; line-height: 1.5; color: var(--gold-text); }
.lit__card-title { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.lit__card-meta { color: var(--muted); font-size: var(--fs-sm); }
.lit__portal { margin-top: 16px; }
.lit__portal a { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; font-weight: 600; }
/* v1.1.2 aarti: the Naman & Mangal Aarti and Rudri Path Practice cards at the top of /bhakti */
.lit__feature { margin-top: 0; margin-bottom: clamp(12px, 2vw, 20px); }
.lit__card--feature { border-color: var(--champagne-strong); background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(136, 19, 55, 0.08) 60%, transparent), var(--surface); }
.lit__fine { margin-top: clamp(32px, 5vw, 56px); color: var(--muted); font-size: var(--fs-sm); max-width: 46rem; }

/* ---------- /bhakti/<slug>: the viewer ---------- */
.lit__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; font-size: var(--fs-sm); color: var(--muted); }
.lit__crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.lit__head--text h1 { margin-bottom: 0.1em; }
.lit__title-deva { font-family: var(--lit-deva); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.4; color: var(--gold-text); margin: 0 0 0.4em; }
.lit__source { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.lit__note { font-size: var(--fs-sm); color: var(--muted); padding: 10px 14px; border-left: 2px solid var(--champagne-strong); background: var(--sunken); border-radius: 0 12px 12px 0; }

.lit__toolbar { position: sticky; top: calc(var(--header-h) + var(--djjs-global-h, 0px) + 8px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px; margin: 0 0 20px; border: 1px solid var(--champagne); border-radius: 22px; background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-soft); }
.lit__toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 44px; min-width: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--champagne-strong); background: transparent; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.lit__toolbar button[aria-pressed="true"] { background: var(--vermilion); border-color: var(--vermilion); color: var(--on-vermilion); }
.lit__toolbar button:disabled { opacity: 0.45; cursor: default; }
.lit__size { display: inline-flex; gap: 4px; }
.lit__size button { padding: 0 12px; }
.lit__pdf { margin-left: auto; }
.lit__toolbar .lit__pdf { background: linear-gradient(135deg, #F8D888 0%, #E7AE45 52%, #C98A22 100%); border-color: transparent; color: #2A0A14; }
.lit__hint { flex-basis: 100%; text-align: right; font-size: var(--fs-xs); color: var(--muted); padding: 0 8px; }
@media (max-width: 640px) { .lit__pdf { margin-left: 0; } .lit__hint { text-align: left; } .lit__toolbar { position: static; } }
@media (hover: hover) and (pointer: fine) { .lit__toolbar button:not(:disabled):hover { border-color: var(--gold-text); } }

.lit__jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.lit__jump a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 999px;
  border: 1px solid var(--champagne); background: var(--surface); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }

.lit__verses { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.4vw, 26px); }
.verse { position: relative; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--champagne); border-radius: var(--radius-card); background: var(--surface);
  scroll-margin-top: calc(var(--header-h) + 90px); }
.verse:target { border-color: var(--champagne-strong); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.verse__num { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
.verse__num span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--champagne-strong); letter-spacing: 0; font-size: 0.9rem; }
.verse__num em { font-style: normal; }
.verse__cols { display: grid; gap: 14px 32px; }
@media (min-width: 820px) { .verse__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lit--swap .verse__roman { order: -1; }
.verse__line { margin: 0; text-wrap: balance; }
.verse__deva { font-family: var(--lit-deva); font-size: calc(1.35rem * var(--lit-scale)); line-height: 1.75; overflow-wrap: anywhere; }
.verse__roman { font-family: var(--serif); font-size: calc(1.3rem * var(--lit-scale)); line-height: 1.6; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.verse__chords { display: block; font-family: var(--sans); font-size: 0.62em; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-text); line-height: 1.3; white-space: pre; }
.verse__words { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--champagne); font-size: calc(0.95rem * var(--lit-scale)); }
.verse__words div { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line); max-width: 100%; }
.verse__words dt { font-family: var(--serif); font-weight: 600; font-size: 1.12em; line-height: 1.3; overflow-wrap: anywhere; }
.verse__words dd { margin: 0; color: var(--muted); font-size: 0.88em; line-height: 1.35; }
.verse__meaning { margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var(--amber); font-family: var(--serif); font-style: italic; font-size: calc(1.2rem * var(--lit-scale)); line-height: 1.55; color: var(--ink); }
.lit--no-words .verse__words, .lit--no-meaning .verse__meaning { display: none; }
.lit__more { margin-top: clamp(36px, 5vw, 60px); padding-top: 28px; border-top: 1px solid var(--champagne); }
.lit__more h2 { margin: 0 0 0.3em; }
.lit__print-foot { display: none; }
@media (min-width: 2400px) { .lit--text .wrap { --wrap: 1600px; } .verse__deva { font-size: calc(1.6rem * var(--lit-scale)); } .verse__roman { font-size: calc(1.5rem * var(--lit-scale)); } }

@media (prefers-reduced-motion: reduce) { .lit__card, .lit__chips a { transition: none; } }

/* ---------- the printed lyric sheet (Download sheet → Save as PDF) ---------- */
@media print {
  @page { size: auto; margin: 14mm 13mm 16mm; }
  html, body { background: #fff !important; color: #000 !important; transition: none !important; }
  html { background-color: #fff !important; }
  body { font-size: 10.5pt; line-height: 1.45; }
  body > :not(main), .lit__toolbar, .lit__jump, .lit__crumbs, .lit__more, .lit__intro, .lit__note, .ambient, [data-djjs-global], .skip-link { display: none !important; }
  .page { padding: 0 !important; overflow: visible !important; }
  .wrap { width: auto !important; margin: 0 !important; }
  .lit, .lit * { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  .lit__head { margin: 0 0 8mm; max-width: none; padding-bottom: 4mm; border-bottom: 0.6pt solid #999; }
  .lit .eyebrow { margin: 0 0 1mm; font-size: 8pt; letter-spacing: 0.18em; }
  .lit h1 { font-size: 22pt; line-height: 1.1; margin: 0; }
  .lit__title-deva { font-size: 16pt; margin: 1mm 0; }
  .lit__source { font-size: 9pt; margin: 0; }
  .lit__verses { gap: 5mm; }
  .verse { padding: 0 0 4mm; border: 0; border-bottom: 0.4pt solid #ccc; border-radius: 0; break-inside: avoid; page-break-inside: avoid; }
  .verse__num { margin: 0 0 1.5mm; font-size: 7.5pt; }
  .verse__num span { width: 18px; height: 18px; font-size: 7.5pt; border-color: #888; }
  .verse__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 2mm 8mm; }
  .verse__deva { font-size: calc(13pt * var(--lit-scale)); line-height: 1.6; }
  .verse__roman { font-size: calc(11.5pt * var(--lit-scale)); line-height: 1.55; }
  .verse__chords { font-size: 8pt; }
  .verse__words { margin-top: 2.5mm; padding-top: 2mm; gap: 1mm 4mm; font-size: 8.5pt; border-top: 0.4pt dashed #bbb; }
  .verse__words div { padding: 0; border: 0; flex-direction: row; gap: 1.5mm; }
  .verse__words dt { font-size: 1em; }
  .verse__words dd::before { content: "– "; }
  .verse__words dd { font-size: 1em; color: #333 !important; }
  .verse__meaning { margin-top: 2mm; padding-left: 3mm; border-left: 1pt solid #999; font-size: calc(10pt * var(--lit-scale)); }
  .lit__print-foot { display: block; margin-top: 6mm; font-size: 8pt; color: #555 !important; text-align: center; }
  a { color: #000 !important; text-decoration: none !important; }
  .lit--panchang djjs-dinacharya { break-inside: avoid; }
}