/* ═══════════════════════════════════════════════════════════════════
   sangrah.css — Vidhan / Pujan / Bhakti / Granth (free PDF collection)

   Loaded ONLY on /sangrah/ pages (templates add the <link>), so it never
   adds a byte to any other page. Built on the site's own tokens, each with
   a literal fallback so the page still reads if a token is ever renamed.

   Layout follows the Prabhavana page: a light header strip rather than a
   tall hero, so the thing the visitor came for — the PDF — is on screen
   the moment the page loads.
   ═══════════════════════════════════════════════════════════════════ */

.jsg-wrap { max-width: 78rem; margin: 0 auto; padding: 0 var(--sp-4, 1rem); }

/* ── header strip ─────────────────────────────────────────────────── */
.jsg-head {
  background: linear-gradient(180deg, var(--surface-warm, #FBF6EA), var(--surface, #fff));
  border-bottom: 1px solid var(--border, #E8DFCB);
  padding: var(--sp-5, 1.5rem) 0 var(--sp-4, 1rem);
}
.jsg-eyebrow {
  margin: 0 0 .35rem; font-size: var(--fs-xs, .78rem); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright, #B98A2F);
}
.jsg-eyebrow a { color: inherit; text-decoration: none; }
.jsg-eyebrow a:hover { text-decoration: underline; }

.jsg-h1 { margin: 0 0 .5rem; line-height: 1.12; color: var(--primary, #7A1620); }
.jsg-h1 .jsg-hi {
  display: block; font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.7rem, 4.2vw, 2.5rem); font-weight: 700;
}
.jsg-h1 .jsg-en {
  display: block; margin-top: .25rem; font-family: var(--font-body, system-ui, sans-serif);
  font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 600; color: var(--text-muted, #6B6055);
}
.jsg-lede { margin: 0; max-width: 62ch; color: var(--text-muted, #6B6055); font-size: var(--fs-small, .92rem); line-height: 1.65; }

.jsg-badges { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .8rem 0 0; padding: 0; }
.jsg-badges li {
  font-size: var(--fs-xs, .78rem); font-weight: 600; padding: .22rem .7rem;
  border: 1px solid var(--border, #E8DFCB); border-radius: 999px;
  background: var(--surface, #fff); color: var(--text, #2A2016);
}
.jsg-badges li.is-free { background: #E8F3EC; border-color: #B9D8C4; color: #1F5A3A; }

.jsg-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin-top: 1rem; }

/* ── buttons ──────────────────────────────────────────────────────── */
.jsg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 2px solid var(--primary, #7A1620); background: var(--primary, #7A1620); color: #fff;
  border-radius: 999px; padding: .7rem 1.5rem; font: inherit; font-weight: 700;
  font-size: var(--fs-body, 1rem); cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 .35rem 1rem rgba(122, 22, 32, .22);
}
.jsg-btn:hover { background: var(--primary-hover, #5E1119); color: #fff; transform: translateY(-1px); }
.jsg-btn:focus-visible, .jsg-btn-quiet:focus-visible, .jsg-chip:focus-visible,
.jsg-input:focus-visible, .jsg-card a:focus-visible { outline: 3px solid var(--accent, #C9A227); outline-offset: 2px; }
.jsg-btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.jsg-btn-sm { padding: .5rem 1.05rem; font-size: var(--fs-small, .92rem); box-shadow: none; }
.jsg-btn-quiet {
  display: inline-flex; align-items: center; gap: .4rem; background: transparent;
  border: 1.5px solid var(--border-strong, #CFC3A8); color: var(--text, #2A2016);
  border-radius: 999px; padding: .55rem 1.1rem; font: inherit; font-size: var(--fs-small, .92rem);
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.jsg-btn-quiet:hover { border-color: var(--primary, #7A1620); color: var(--primary, #7A1620); }

/* ── page grid ────────────────────────────────────────────────────── */
.jsg-main-wrap { padding: var(--sp-5, 1.5rem) var(--sp-4, 1rem) var(--sp-7, 3rem); }
.jsg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--sp-6, 2rem); align-items: start; }
.jsg-side { position: sticky; top: var(--sp-4, 1rem); display: grid; gap: var(--sp-4, 1rem); min-width: 0; }
@media (max-width: 62rem) {
  .jsg-grid { grid-template-columns: 1fr; }
  .jsg-side { position: static; }
}

.jsg-section { margin: 0 0 var(--sp-6, 2rem); }
.jsg-section > h2 {
  font-family: var(--font-heading, Georgia, serif); font-size: var(--fs-h4, 1.35rem);
  color: var(--primary, #7A1620); margin: 0 0 var(--sp-3, .75rem);
}
.jsg-section > h2 .jsg-h2-hi { display: block; font-size: .8em; font-weight: 400; color: var(--text-muted, #6B6055); }

/* ── the quotable answer ──────────────────────────────────────────── */
.jsg-answer {
  background: var(--surface-warm, #FBF6EA); border: 1px solid var(--border, #E8DFCB);
  border-left: 4px solid var(--accent, #C9A227); border-radius: var(--r-lg, 14px);
  padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem); margin-bottom: var(--sp-5, 1.5rem);
}
.jsg-answer-label {
  margin: 0 0 .35rem; font-size: var(--fs-xs, .78rem); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright, #B98A2F);
}
.jsg-answer p { margin: 0 0 .55rem; line-height: 1.7; }
.jsg-answer p:last-child { margin-bottom: 0; color: var(--text-muted, #6B6055); }

/* ── editions ─────────────────────────────────────────────────────── */
.jsg-eds { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.jsg-ed {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--surface, #fff); border: 1px solid var(--border, #E8DFCB);
  border-radius: var(--r-md, 12px); padding: .8rem 1rem;
}
.jsg-ed:hover { border-color: var(--accent, #C9A227); box-shadow: 0 .25rem .9rem rgba(0, 0, 0, .05); }
.jsg-ed-main { min-width: 0; }
.jsg-ed-label { display: block; font-weight: 700; }
.jsg-ed-label small { font-weight: 500; color: var(--text-muted, #6B6055); }
.jsg-ed-meta { display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: var(--fs-xs, .78rem); color: var(--text-muted, #6B6055); margin-top: .15rem; }
.jsg-ed-meta span::before { content: "· "; }
.jsg-ed-meta span:first-child::before { content: ""; }

/* ── prose ────────────────────────────────────────────────────────── */
.jsg-prose p { margin: 0 0 .75rem; line-height: 1.75; max-width: 70ch; }
.jsg-prose p[lang="hi"] { color: var(--text-muted, #6B6055); }
.jsg-note {
  display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-xs, .78rem);
  color: var(--text-muted, #6B6055); background: var(--surface-warm, #FBF6EA);
  border: 1px dashed var(--border-strong, #CFC3A8); border-radius: var(--r-md, 12px); padding: .55rem .8rem;
}
.jsg-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.jsg-links a {
  display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid var(--border, #E8DFCB); background: var(--surface, #fff); color: var(--primary, #7A1620);
  font-size: var(--fs-small, .92rem); font-weight: 600; text-decoration: none;
}
.jsg-links a:hover { border-color: var(--primary, #7A1620); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.jsg-faq details { border-bottom: 1px solid var(--border, #E8DFCB); padding: .75rem 0; }
.jsg-faq summary { cursor: pointer; font-weight: 600; color: var(--primary, #7A1620); }
.jsg-faq details p { margin: .5rem 0 0; color: var(--text-muted, #6B6055); line-height: 1.7; max-width: 70ch; }
.jsg-faq h3 { font-size: var(--fs-small, .92rem); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted, #6B6055); margin: 1.2rem 0 .2rem; }

/* ── source & credit ──────────────────────────────────────────────── */
.jsg-source {
  border: 1px solid var(--border, #E8DFCB); border-radius: var(--r-lg, 14px);
  padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem); background: var(--surface, #fff);
  font-size: var(--fs-small, .92rem); line-height: 1.65; color: var(--text-muted, #6B6055);
}
.jsg-source strong { color: var(--text, #2A2016); }

/* ── side cards ───────────────────────────────────────────────────── */
.jsg-card { background: var(--surface, #fff); border: 1px solid var(--border, #E8DFCB); border-radius: var(--r-lg, 14px); padding: var(--sp-4, 1rem); }
.jsg-card h2, .jsg-card h3 { font-family: var(--font-heading, Georgia, serif); font-size: 1.05rem; color: var(--primary, #7A1620); margin: 0 0 .5rem; }
.jsg-card ul { list-style: none; margin: 0; padding: 0; }
.jsg-card li { border-bottom: 1px solid var(--border, #E8DFCB); }
.jsg-card li:last-child { border-bottom: 0; }
.jsg-card li a { display: block; padding: .5rem 0; text-decoration: none; color: var(--text, #2A2016); font-size: var(--fs-small, .92rem); }
.jsg-card li a:hover { color: var(--primary, #7A1620); }
.jsg-card li a small { display: block; color: var(--text-muted, #6B6055); font-size: var(--fs-xs, .78rem); }
.jsg-card-warm { background: linear-gradient(160deg, #FFF6E6, #FBEDEE); border-color: #EBCB8E; }
.jsg-card-warm p { font-size: var(--fs-small, .92rem); line-height: 1.6; margin: 0 0 .7rem; }

/* ── hub / category ───────────────────────────────────────────────── */
.jsg-stats { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.jsg-stats li { display: flex; flex-direction: column; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #6B6055); line-height: 1.1; }
.jsg-stats strong { font-family: var(--font-heading, Georgia, serif); font-size: 1.6rem; color: var(--primary, #7A1620); letter-spacing: 0; text-transform: none; }

.jsg-search { position: relative; margin: 1rem 0 0; max-width: 34rem; }
.jsg-input {
  width: 100%; padding: .75rem 1rem .75rem 2.6rem; border: 1.5px solid var(--border-strong, #CFC3A8);
  border-radius: 999px; background: var(--surface, #fff); color: var(--text, #2A2016);
  font: inherit; font-size: 1rem;              /* 16px stops iOS zooming on focus */
}
.jsg-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted, #6B6055); pointer-events: none; }
.jsg-empty { display: none; padding: 1rem; border: 1px dashed var(--border-strong, #CFC3A8); border-radius: var(--r-md, 12px); color: var(--text-muted, #6B6055); }

.jsg-cats { display: grid; gap: var(--sp-4, 1rem); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: 0 0 var(--sp-6, 2rem); }
.jsg-cat {
  display: flex; flex-direction: column; gap: .5rem; background: var(--surface, #fff);
  border: 1px solid var(--border, #E8DFCB); border-top: 4px solid var(--accent, #C9A227);
  border-radius: var(--r-lg, 14px); padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
}
.jsg-cat h2 { margin: 0; font-family: var(--font-heading, Georgia, serif); font-size: 1.25rem; color: var(--primary, #7A1620); }
.jsg-cat h2 a { color: inherit; text-decoration: none; }
.jsg-cat h2 a:hover { text-decoration: underline; }
.jsg-cat .jsg-cat-hi { color: var(--text-muted, #6B6055); font-size: .95rem; }
.jsg-cat p { margin: 0; font-size: var(--fs-small, .92rem); line-height: 1.6; color: var(--text-muted, #6B6055); }
.jsg-cat .jsg-count { font-size: var(--fs-xs, .78rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-bright, #B98A2F); }

.jsg-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.jsg-chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .8rem; border-radius: 999px;
  border: 1px solid var(--border-strong, #CFC3A8); background: var(--surface, #fff); color: var(--text, #2A2016);
  font-size: var(--fs-xs, .8rem); font-weight: 600; text-decoration: none;
}
.jsg-chip:hover { border-color: var(--primary, #7A1620); color: var(--primary, #7A1620); }
.jsg-chip.is-on { background: var(--primary, #7A1620); border-color: var(--primary, #7A1620); color: #fff; }
.jsg-chip small { opacity: .7; font-weight: 500; }

.jsg-group { margin-bottom: var(--sp-6, 2rem); }
.jsg-group > h2 { font-family: var(--font-heading, Georgia, serif); font-size: var(--fs-h4, 1.3rem); color: var(--primary, #7A1620); margin: 0 0 .2rem; }
.jsg-group > h2 a { color: inherit; text-decoration: none; }
.jsg-group > h2 a:hover { text-decoration: underline; }
.jsg-group > p { margin: 0 0 .8rem; color: var(--text-muted, #6B6055); font-size: var(--fs-small, .92rem); max-width: 70ch; }

.jsg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.jsg-item a {
  display: block; height: 100%; text-decoration: none; color: inherit; background: var(--surface, #fff);
  border: 1px solid var(--border, #E8DFCB); border-radius: var(--r-md, 12px); padding: .75rem 1rem;
}
.jsg-item a:hover { border-color: var(--accent, #C9A227); box-shadow: 0 .25rem .9rem rgba(0, 0, 0, .05); }
.jsg-item .jsg-i-hi { display: block; font-weight: 700; color: var(--primary, #7A1620); line-height: 1.35; }
.jsg-item .jsg-i-en { display: block; font-size: var(--fs-small, .92rem); color: var(--text, #2A2016); margin-top: .1rem; }
.jsg-item .jsg-i-meta { display: block; margin-top: .3rem; font-size: var(--fs-xs, .78rem); color: var(--text-muted, #6B6055); }
.jsg-item[hidden] { display: none; }

/* ── the download dialog ──────────────────────────────────────────── */
.jsg-dlg {
  border: 0; border-radius: 1.25rem; padding: 0; width: min(31rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem); overflow: auto; color: var(--text, #2A2016); background: var(--surface, #fff);
  box-shadow: 0 1.5rem 4rem rgba(40, 8, 22, .45);
}
.jsg-dlg::backdrop { background: rgba(35, 12, 20, .58); backdrop-filter: blur(2px); }
.jsg-dlg[open] { animation: jsgPop .22s ease-out; }
@keyframes jsgPop { from { opacity: 0; transform: translateY(1rem) scale(.98); } to { opacity: 1; transform: none; } }

.jsg-dlg-top {
  display: flex; align-items: flex-start; gap: .9rem; padding: 1.1rem 1.3rem;
  background: linear-gradient(135deg, #7A1620, #A02636); color: #fff;
}
.jsg-dlg-ic { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); font-size: 1.3rem; }
.jsg-dlg-top h2 { margin: 0; font-size: 1.1rem; line-height: 1.25; font-family: var(--font-heading, Georgia, serif); }
.jsg-dlg-top p { margin: .15rem 0 0; font-size: .82rem; opacity: .88; }
.jsg-dlg-x {
  margin-left: auto; flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.05rem; cursor: pointer;
}
.jsg-dlg-x:hover { background: rgba(255, 255, 255, .3); }
.jsg-dlg-x:focus-visible { outline: 3px solid #FFC94D; outline-offset: 2px; }

.jsg-dlg-body { padding: 1.2rem 1.3rem 1.3rem; }
.jsg-dlg-body[hidden] { display: none; }
.jsg-dlg-lead { margin: 0 0 1rem; font-size: var(--fs-small, .92rem); color: var(--text-muted, #6B6055); line-height: 1.6; }

.jsg-field { margin-bottom: .9rem; }
.jsg-field label { display: block; font-size: var(--fs-small, .9rem); font-weight: 700; margin-bottom: .3rem; }
.jsg-field label em { color: var(--danger, #B3261E); font-style: normal; }
.jsg-field input[type="text"], .jsg-field input[type="tel"] {
  width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--border-strong, #CFC3A8);
  border-radius: .7rem; font: inherit; font-size: 1rem; background: #fff; color: var(--text, #2A2016);
}
.jsg-field input:focus { border-color: var(--primary, #7A1620); outline: 3px solid rgba(201, 162, 39, .35); }
.jsg-field input.is-bad { border-color: var(--danger, #B3261E); background: #FFF6F5; }
.jsg-field small { display: block; margin-top: .25rem; font-size: var(--fs-xs, .78rem); color: var(--text-muted, #6B6055); }
.jsg-optin { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-small, .9rem); line-height: 1.45; margin-bottom: .9rem; cursor: pointer; }
.jsg-optin input { margin-top: .2rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.jsg-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.jsg-err { margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: .6rem; background: #FBEAE8; border: 1px solid var(--danger, #B3261E); color: #8C382F; font-size: var(--fs-small, .9rem); }
.jsg-err[hidden] { display: none; }
.jsg-fine { margin: .9rem 0 0; font-size: var(--fs-xs, .76rem); line-height: 1.55; color: var(--text-muted, #6B6055); }
.jsg-fine a { color: var(--primary, #7A1620); }
.jsg-dlg .jsg-btn { width: 100%; }

/* success step */
.jsg-done { text-align: center; }
.jsg-tick { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 0 auto .7rem; border-radius: 50%; background: #E8F3EC; color: #1F5A3A; font-size: 1.7rem; }
.jsg-done h3 { margin: 0 0 .3rem; font-family: var(--font-heading, Georgia, serif); font-size: 1.25rem; color: var(--primary, #7A1620); }
.jsg-done > p { margin: 0 0 .9rem; color: var(--text-muted, #6B6055); font-size: var(--fs-small, .92rem); }
.jsg-again { margin-top: .5rem; }
.jsg-forget { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-xs, .78rem); color: var(--text-muted, #6B6055); text-decoration: underline; cursor: pointer; }

.jsg-give {
  margin-top: 1.1rem; text-align: left; border-radius: 1rem; padding: 1rem 1.1rem;
  background: linear-gradient(150deg, #FFF6E6 0%, #FBEDEE 100%); border: 1px solid #EBCB8E;
}
.jsg-give h4 { margin: 0 0 .25rem; font-family: var(--font-heading, Georgia, serif); font-size: 1.05rem; color: #7A1620; }
.jsg-give p { margin: 0 0 .7rem; font-size: var(--fs-small, .9rem); line-height: 1.55; }
.jsg-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: 0 0 .7rem; padding: 0; list-style: none; }
.jsg-amounts a {
  display: block; text-align: center; padding: .5rem .2rem; border-radius: .6rem; text-decoration: none;
  background: #fff; border: 1.5px solid #E4C57C; color: #7A1620; font-weight: 800; font-size: .95rem;
}
.jsg-amounts a:hover { background: #7A1620; border-color: #7A1620; color: #fff; }
.jsg-amounts a.is-pop { border-color: #7A1620; }
.jsg-give .jsg-btn { box-shadow: none; }

/* phones: the dialog becomes a bottom sheet — easier to reach with a thumb */
@media (max-width: 40rem) {
  .jsg-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 1.25rem 1.25rem 0 0; max-height: 92vh; }
  .jsg-cta-row .jsg-btn { width: 100%; }
  .jsg-amounts { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .jsg-dlg[open] { animation: none; }
  .jsg-btn { transition: none; }
  .jsg-btn:hover { transform: none; }
}
@media print { .jsg-side, .jsg-dlg, .jsg-cta-row { display: none !important; } }

/* ── hub suggest box (assets/js/sangrah.js builds this) ─────────────── */
.jsg-search { position: relative; }
.jsg-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + .4rem); z-index: 20;
  margin: 0; padding: .3rem; list-style: none;
  background: var(--surface, #fff); border: 1px solid var(--border, #E8DFCB);
  border-radius: 1rem; box-shadow: 0 1rem 2.5rem rgba(40, 8, 22, .18);
  max-height: 22rem; overflow-y: auto;
}
.jsg-suggest[hidden] { display: none; }
.jsg-suggest li { border-radius: .6rem; }
.jsg-suggest li a { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .8rem; border-radius: .6rem; text-decoration: none; color: var(--text, #2A2016); }
.jsg-suggest li a:hover, .jsg-suggest li a:focus-visible { background: var(--surface-warm, #FBF6EA); }
.jsg-suggest li a strong { font-weight: 700; }
.jsg-suggest li a small { color: var(--text-muted, #6B6055); font-size: var(--fs-xs, .78rem); }
.jsg-suggest li.is-none { padding: .6rem .8rem; color: var(--text-muted, #6B6055); font-size: var(--fs-small, .9rem); }