/* =========================================================
   Srivaaram — devotional content pages (vaara-devatalu, navaratri)
   Long-form Telugu prose, so the measure is capped and the line
   height is generous. Shares the palette from style.css.
   ========================================================= */

.bhakti-main {
  padding: 32px 20px 60px;
  background: var(--cream);
}

.bhakti-doc {
  max-width: 860px;
  margin: 0 auto;
  background: var(--white);
  padding: 38px 42px 46px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.bhakti-title {
  font-size: 1.8rem;
  color: var(--maroon-dark);
  margin: 0 0 6px;
  line-height: 1.35;
}

.bhakti-title span {
  display: block;
  font-family: var(--font-en);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.4px;
  margin-top: 4px;
}

.bhakti-lead {
  font-size: 1.03rem;
  line-height: 1.95;
  color: var(--ink);
  margin: 0 0 14px;
}

/* ---- in-page table of contents ---- */
.bhakti-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 24px 0 8px;
  padding: 14px 18px;
  background: var(--cream-2);
  border-radius: 10px;
  font-size: 0.88rem;
}

.bhakti-toc span {
  font-weight: 700;
  color: var(--maroon-dark);
}

.bhakti-toc a {
  color: var(--maroon);
  font-weight: 600;
  border-bottom: 1px solid var(--saffron);
}

.bhakti-toc a:hover { color: var(--maroon-dark); }

/* ---- one card per weekday ---- */
.vaara-card {
  margin: 28px 0 0;
  padding: 22px 24px 20px;
  border-radius: 12px;
  background: var(--cream);
  /* The accent bar is re-coloured per day below; every card keeps a bar so
     the colour is never the only thing distinguishing them. */
  border-left: 5px solid var(--gold);
}

.vaara-head { margin-bottom: 10px; }

.vaara-head h2 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--maroon-dark);
  line-height: 1.35;
}

.vaara-head h2 span {
  font-family: var(--font-en);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 8px;
  opacity: 0.8;
}

.vaara-deity {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.vaara-deity strong { color: var(--maroon); }

.vaara-card p {
  margin: 0 0 12px;
  line-height: 1.95;
  color: var(--ink-soft);
}

/* the compact facts strip at the foot of each day */
.vaara-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 8px 16px;
  margin: 14px 0 10px;
  padding: 14px 16px;
  background: var(--white);
  border-radius: 9px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.vaara-facts span {
  display: block;
  font-weight: 700;
  color: var(--maroon-dark);
  font-size: 0.76rem;
  letter-spacing: 0.3px;
  margin-bottom: 1px;
}

.vaara-note {
  font-size: 0.88rem !important;
  padding-top: 10px;
  border-top: 1px dashed rgba(122, 18, 32, 0.18);
  opacity: 0.92;
}

/* per-day accents, roughly following the colour each day is associated with */
.vaara-sun { border-left-color: #d94f2b; background: #fdf2ee; }
.vaara-mon { border-left-color: #7a8fa6; background: #f4f7fa; }
.vaara-tue { border-left-color: #b3261e; background: #fdf0ef; }
.vaara-wed { border-left-color: #2e7d32; background: #f2f9f2; }
.vaara-thu { border-left-color: #c8963c; background: #fdf7ea; }
.vaara-fri { border-left-color: #c2185b; background: #fdeff4; }
.vaara-sat { border-left-color: #37474f; background: #f3f5f6; }

/* ---- section headings inside the devotional pages ---- */
.bhakti-h2 {
  font-size: 1.4rem;
  color: var(--maroon-dark);
  margin: 34px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cream-2);
  line-height: 1.4;
}

.bhakti-h3 {
  font-size: 1.1rem;
  color: var(--maroon);
  margin: 22px 0 6px;
}

.bhakti-doc > section > p,
.bhakti-doc section p {
  line-height: 1.95;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

/* ---- the nine Navaratri forms ---- */
.nava-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
  margin-top: 16px;
}

.nava-card {
  padding: 18px 20px;
  border-radius: 11px;
  background: var(--cream);
  border-top: 4px solid var(--saffron);
}

.nava-card h3 {
  margin: 0 0 2px;
  font-size: 1.15rem;
  color: var(--maroon-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.35;
}

.nava-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--white);
  font-family: var(--font-en);
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nava-mean {
  margin: 0 0 8px !important;
  font-size: 0.86rem !important;
  color: var(--gold) !important;
  font-weight: 600;
}

.nava-card p { font-size: 0.94rem; }

.nava-meta {
  margin: 10px 0 0 !important;
  padding-top: 9px;
  border-top: 1px solid rgba(122, 18, 32, 0.12);
  font-size: 0.82rem !important;
}

.nava-meta span {
  font-weight: 700;
  color: var(--maroon-dark);
}

/* ---- the nine Dasara alankarams ---- */
.alankara-list {
  margin: 14px 0 12px;
  padding-left: 24px;
  color: var(--ink-soft);
}

.alankara-list li {
  margin-bottom: 9px;
  line-height: 1.85;
}

.alankara-list strong { color: var(--maroon); }

.bhakti-note {
  font-size: 0.88rem;
  padding: 12px 16px;
  background: var(--cream-2);
  border-radius: 9px;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ---- closing block and cross links ---- */
.bhakti-closing {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 2px solid var(--cream-2);
}

.bhakti-closing h2 {
  font-size: 1.2rem;
  color: var(--maroon-dark);
  margin: 0 0 10px;
}

.bhakti-crosslink {
  margin-top: 18px !important;
  padding: 14px 18px;
  background: var(--cream-2);
  border-radius: 10px;
  line-height: 2.1 !important;
  font-size: 0.95rem;
}

.bhakti-crosslink a {
  color: var(--maroon);
  font-weight: 600;
  border-bottom: 1px solid var(--saffron);
}

.bhakti-crosslink a:hover { color: var(--maroon-dark); }

/* ---- responsive ---- */
@media (max-width: 620px) {
  .bhakti-main { padding: 22px 12px 44px; }
  .bhakti-doc { padding: 24px 18px 30px; }
  .bhakti-title { font-size: 1.4rem; }
  .vaara-card { padding: 18px 16px 16px; }
  .vaara-head h2 { font-size: 1.22rem; }
  .vaara-facts { grid-template-columns: 1fr; padding: 12px 14px; }
  .nava-grid { grid-template-columns: 1fr; }
  .bhakti-h2 { font-size: 1.22rem; }
}

/* =========================================================
   Generated entity pages (deity / festival / mantra)
   Rendered by .build/build-content.js from content/*.json
   ========================================================= */

.crumbs {
  max-width: 860px;
  margin: 0 auto 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.crumbs a { color: var(--maroon); border-bottom: 1px solid var(--saffron); }
.crumbs span { opacity: 0.6; margin: 0 2px; }

.entity-alt {
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  opacity: 0.9;
}

/* The trust label. Every page states how widely its tradition is followed,
   so a regional custom never reads as a universal requirement. */
.trust-box {
  margin: 18px 0 20px;
  padding: 12px 16px;
  background: var(--cream-2);
  border-radius: 10px;
  border-left: 4px solid var(--gold);
}

.trust-scope {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--maroon-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}

.trust-scope em {
  font-style: normal;
  font-weight: 500;
  font-family: var(--font-en);
  font-size: 0.78rem;
  color: var(--ink-soft);
  opacity: 0.85;
}

.trust-note,
.trust-origin {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.trust-origin { opacity: 0.75; }

/* quick facts */
.qf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px 18px;
  margin: 18px 0 4px;
  padding: 16px 18px;
  background: var(--cream);
  border-radius: 11px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.qf-grid span {
  display: block;
  font-weight: 700;
  color: var(--maroon-dark);
  font-size: 0.76rem;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.entity-section { margin-top: 30px; }

.entity-section h2 {
  font-size: 1.3rem;
  color: var(--maroon-dark);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cream-2);
  line-height: 1.4;
}

.entity-section p {
  line-height: 1.95;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.faq-item {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--cream);
  border-radius: 10px;
}

.faq-item h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--maroon);
  line-height: 1.5;
}

.faq-item p { margin: 0 !important; font-size: 0.94rem; }

.entity-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 8px;
}

.entity-related a {
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--maroon);
  font-size: 0.9rem;
  font-weight: 600;
}

.entity-related a:hover { background: var(--saffron-light); }

@media (max-width: 620px) {
  .qf-grid { grid-template-columns: 1fr; padding: 14px 15px; }
  .entity-section h2 { font-size: 1.16rem; }
}

/* =========================================================
   Bhakti hub (/bhakti/) and category indexes
   ========================================================= */

.bhakti-hero { text-align: center; margin: 0 0 22px; }

.bhakti-hero h1 {
  font-size: 2rem;
  color: var(--maroon-dark);
  margin: 0;
  line-height: 1.3;
}

.bhakti-hero-sub {
  margin: 4px 0 0;
  font-family: var(--font-en);
  font-size: 0.86rem;
  color: var(--gold);
  letter-spacing: 0.4px;
}

/* ---- today's panchangam card ---- */
.today-card {
  max-width: 980px;
  margin: 0 auto 26px;
  padding: 22px 24px 18px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.today-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--cream-2);
}

.today-date { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--maroon-dark); }
.today-date-en { margin: 2px 0 0; font-family: var(--font-en); font-size: 0.8rem; color: var(--ink-soft); opacity: 0.8; }
.today-samvat { margin: 0; font-size: 0.86rem; color: var(--ink-soft); text-align: right; max-width: 320px; }

.today-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.today-item {
  padding: 11px 13px;
  background: var(--cream);
  border-radius: 9px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.today-item > span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}

/* panchangam.js writes <small> lines for the start/end times */
.today-item small { display: block; font-size: 0.76rem; opacity: 0.85; }

.today-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  padding: 10px 0 0;
  border-top: 1px dashed rgba(122, 18, 32, 0.16);
}

.today-times-warn b { color: #b3261e; }

.today-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--maroon);
  border-bottom: 1px solid var(--saffron);
}

/* ---- blocks and cards ---- */
.bhakti-block { max-width: 980px; margin: 0 auto 26px; }

.bhakti-block .bhakti-h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0;
}

.see-all {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--maroon);
  border-bottom: 1px solid var(--saffron);
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: 10px;
}

.day-card {
  display: block;
  padding: 14px 12px;
  background: var(--white);
  border-radius: 11px;
  text-align: center;
  border-top: 4px solid var(--saffron);
  box-shadow: var(--shadow);
  transition: transform 0.14s ease;
}

.day-card:hover { transform: translateY(-2px); }
.day-card-empty { opacity: 0.55; box-shadow: none; }

.day-name {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 3px;
}

.day-deity {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--maroon-dark);
  line-height: 1.4;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}

.ent-card {
  display: block;
  padding: 18px 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--gold);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.ent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.ent-card h2, .ent-card h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--maroon-dark);
  line-height: 1.4;
}

.ent-card-en {
  margin: 1px 0 8px !important;
  font-family: var(--font-en);
  font-size: 0.76rem !important;
  color: var(--gold) !important;
}

.ent-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

@media (max-width: 620px) {
  .bhakti-hero h1 { font-size: 1.55rem; }
  .today-card { padding: 18px 15px 15px; }
  .today-samvat { text-align: left; max-width: none; }
  .today-grid { grid-template-columns: repeat(2, 1fr); }
  .day-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Verse blocks and the japa counter
   ========================================================= */

/* A reciter reads this from a phone, often at arm's length in poor light, so
   the Telugu line is large, high-contrast and generously spaced. No advert is
   ever placed inside this block. */
.verse {
  padding: 20px 22px;
  margin-bottom: 12px;
  background: var(--cream-2);
  border-radius: 12px;
  border-left: 5px solid var(--saffron);
}

.verse-te {
  margin: 0;
  font-size: 1.28rem;
  line-height: 2.15;
  color: var(--maroon-dark);
  font-weight: 600;
}

.verse-sa {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
  padding-top: 10px;
  border-top: 1px solid rgba(122, 18, 32, 0.14);
}

.verse-tr {
  margin: 6px 0 0;
  font-family: var(--font-en);
  font-size: 0.86rem;
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.85;
  line-height: 1.7;
}

.verse-actions { margin: 14px 0 0 !important; }

.japa-btn, .japa-reset {
  display: inline-block;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--white);
  background: var(--maroon);
  border: none;
  border-radius: 999px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.japa-btn:hover, .japa-reset:hover { background: var(--maroon-dark); }

/* ---- counter ---- */
.japa-doc { text-align: center; }
.japa-doc .bhakti-title, .japa-doc .entity-section { text-align: left; }

.japa-for { font-size: 0.95rem; color: var(--ink-soft); }
.japa-for strong { color: var(--maroon); text-transform: capitalize; }

.japa-stage { margin: 22px 0 18px; }

.japa-bead {
  position: relative;
  width: 240px;
  height: 240px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.japa-bead svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.japa-track {
  fill: var(--cream-2);
  stroke: rgba(122, 18, 32, 0.12);
  stroke-width: 8;
}

.japa-ring {
  fill: none;
  stroke: var(--maroon);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
}

.japa-num {
  position: absolute;
  top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-en);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--maroon-dark);
  line-height: 1;
}

.japa-of {
  position: absolute;
  top: 63%; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-size: 1rem;
  color: var(--ink-soft);
  opacity: 0.8;
}

.japa-bead:active .japa-track { fill: var(--saffron-light); }
.japa-bead:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 50%; }

.japa-hint { margin: 8px 0 0; font-size: 0.86rem; color: var(--ink-soft); opacity: 0.8; }
.japa-done { margin: 8px 0 0; font-size: 1.05rem; font-weight: 700; color: #2e7d32; }

.japa-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.japa-targets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.japa-targets button {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(122, 18, 32, 0.25);
  background: var(--white);
  color: var(--maroon);
  cursor: pointer;
}

.japa-targets button.on { background: var(--maroon); color: var(--white); border-color: var(--maroon); }
.japa-reset { background: var(--ink-soft); }
.japa-reset:hover { background: var(--ink); }

.japa-rounds { font-size: 0.92rem; color: var(--ink-soft); }

.japa-log { list-style: none; margin: 0; padding: 0; text-align: left; }
.japa-log li {
  padding: 9px 12px;
  margin-bottom: 6px;
  background: var(--cream);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.japa-log li span { font-family: var(--font-en); font-size: 0.8rem; opacity: 0.75; margin-right: 6px; }
.japa-empty { font-size: 0.88rem; color: var(--ink-soft); opacity: 0.75; }

@media (max-width: 620px) {
  .verse { padding: 16px 15px; }
  .verse-te { font-size: 1.16rem; line-height: 2.05; }
  .japa-bead { width: 200px; height: 200px; }
  .japa-num { font-size: 2.9rem; }
}

/* ---- namavali (108 / 1000 names) ---- */
.nv-count {
  font-family: var(--font-en);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--gold);
  margin-left: 8px;
}

/* Numbered so a reciter can find their place again after an interruption —
   the single most useful affordance in a long namavali. */
.namavali {
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
  counter-reset: nv;
}

.namavali li {
  counter-increment: nv;
  position: relative;
  padding: 11px 14px 11px 52px;
  margin-bottom: 6px;
  background: var(--cream);
  border-radius: 9px;
  border-left: 3px solid transparent;
}

.namavali li::before {
  content: counter(nv);
  position: absolute;
  left: 12px; top: 11px;
  width: 28px;
  font-family: var(--font-en);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  text-align: right;
}

.namavali li:hover { border-left-color: var(--saffron); }

.nv-name {
  display: block;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--maroon-dark);
  line-height: 1.75;
}

.nv-mean {
  display: block;
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.7;
}

@media (max-width: 620px) {
  .namavali li { padding: 10px 12px 10px 46px; }
  .nv-name { font-size: 1rem; }
}

/* ---- search ---- */
.search-box { margin: 18px 0 8px; }

.search-box input {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 14px 18px;
  border-radius: 999px;
  border: 2px solid rgba(122, 18, 32, 0.2);
  background: var(--cream);
  color: var(--ink);
}

.search-box input:focus {
  outline: none;
  border-color: var(--maroon);
  background: var(--white);
}

.search-status { margin: 0 0 12px; font-size: 0.82rem; color: var(--ink-soft); opacity: 0.8; }

.search-examples {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  align-items: center; margin-bottom: 18px;
  font-size: 0.86rem; color: var(--ink-soft);
}

.search-examples a {
  padding: 5px 13px; border-radius: 999px;
  background: var(--cream-2); color: var(--maroon); font-weight: 600;
}

.search-examples a:hover { background: var(--saffron-light); }

.search-note { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 10px; }

.search-hit {
  display: block; padding: 14px 16px; margin-bottom: 9px;
  background: var(--cream); border-radius: 10px;
  border-left: 3px solid var(--saffron);
}

.search-hit:hover { background: var(--cream-2); }

.hit-kind {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.3px; margin-bottom: 3px;
}

.search-hit h3 {
  margin: 0 0 3px; font-size: 1.05rem; color: var(--maroon-dark); line-height: 1.45;
}

.search-hit h3 em {
  font-style: normal; font-family: var(--font-en);
  font-size: 0.76rem; font-weight: 500; color: var(--ink-soft); opacity: 0.8;
}

.search-hit p { margin: 0; font-size: 0.88rem; line-height: 1.7; color: var(--ink-soft); }


/* ---------------------------------------------------------------- §33/§34
   Knowledge-graph blocks. The quick-nav row is the deity page's table of
   contents; the cards below are the neighbourhood the graph produced.

   Cards rather than a link list because the mockup sheet is built entirely
   from boxes, and because a reader choosing between "మూల మంత్రం" and
   "అష్టోత్తరం" needs the kind label and the summary to choose at all. */

.entity-quicknav {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 22px; padding: 12px 0 14px;
  border-top: 1px solid var(--saffron-light);
  border-bottom: 1px solid var(--saffron-light);
}

.entity-quicknav a {
  display: inline-block; padding: 6px 13px;
  font-size: 0.86rem; font-weight: 600; text-decoration: none;
  color: var(--maroon); background: var(--cream);
  border: 1px solid var(--saffron-light); border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.entity-quicknav a:hover,
.entity-quicknav a:focus-visible {
  background: var(--saffron-light); color: var(--maroon-dark);
}

/* Anchored sections must clear the sticky header when jumped to. */
.graph-group { scroll-margin-top: 90px; }

.graph-cards {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

.graph-card {
  display: block; padding: 13px 15px; text-decoration: none;
  background: var(--cream); border-radius: 10px;
  border: 1px solid var(--saffron-light);
  border-left: 3px solid var(--saffron);
  transition: background 0.15s ease, transform 0.15s ease;
}

.graph-card:hover,
.graph-card:focus-visible { background: var(--cream-2); transform: translateY(-1px); }

.gc-kind {
  display: block; font-size: 0.68rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.3px; margin-bottom: 3px;
}

.graph-card h3 {
  margin: 0 0 4px; font-size: 1rem; line-height: 1.45;
  color: var(--maroon-dark);
}

.graph-card p {
  margin: 0; font-size: 0.83rem; line-height: 1.65; color: var(--ink-soft);
  /* Two lines is enough to distinguish two mantras; more turns a chooser
     into a wall of text, which is the failure the boxes exist to avoid. */
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 560px) {
  .graph-cards { grid-template-columns: 1fr; }
  .entity-quicknav { gap: 6px; }
  .entity-quicknav a { padding: 5px 11px; font-size: 0.82rem; }
}


/* ------------------------------------------------------------ filter chips
   Directory chip rows (design sheet screens 4, 14, 18). The count in each
   chip is the useful part -- it tells a reader whether a filter is worth
   tapping before they tap it. */

.filter-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--saffron-light);
}

.filter-chips button {
  font: inherit; cursor: pointer;
  padding: 7px 14px; font-size: 0.87rem; font-weight: 600;
  color: var(--maroon); background: var(--cream);
  border: 1px solid var(--saffron-light); border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filter-chips button span {
  font-size: 0.76rem; font-weight: 700; opacity: 0.65;
  font-family: var(--font-en);
}

.filter-chips button:hover { background: var(--saffron-light); }

.filter-chips button.is-on {
  background: var(--maroon); border-color: var(--maroon); color: #fff;
}

.filter-chips button.is-on span { opacity: 0.75; }

.filter-chips button:focus-visible {
  outline: 2px solid var(--maroon); outline-offset: 2px;
}

.filter-empty {
  margin: 18px 0; padding: 16px; text-align: center;
  font-size: 0.9rem; color: var(--ink-soft);
  background: var(--cream); border-radius: 10px;
}

@media (max-width: 560px) {
  .filter-chips { gap: 6px; }
  .filter-chips button { padding: 6px 11px; font-size: 0.82rem; }
}


/* Result-type chips reuse the directory chip styling, tightened a little
   because they sit directly under the search box. */
.search-chips { margin-bottom: 14px; padding-bottom: 12px; }


/* ----------------------------------------------------------- §25 locations
   Gramadevata worship differs village to village. These cards sit side by
   side so the differences are visible at a glance rather than flattened into
   one description that would be wrong everywhere. */

.place-grid {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}

.place-card {
  padding: 14px 16px; background: var(--cream);
  border: 1px solid var(--saffron-light); border-radius: 10px;
}

.place-card h3 {
  margin: 0 0 2px; font-size: 1.02rem; color: var(--maroon-dark);
}

.place-where {
  margin: 0 0 9px; font-size: 0.78rem; color: var(--ink-soft);
  font-family: var(--font-en); opacity: 0.85;
}

.place-card p { margin: 0 0 5px; font-size: 0.87rem; line-height: 1.6; }

.place-card p span {
  display: block; font-size: 0.7rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.3px;
}

.place-note {
  margin-top: 9px !important; padding-top: 9px;
  border-top: 1px dashed var(--saffron-light);
  font-size: 0.83rem !important; color: var(--ink-soft);
}

@media (max-width: 560px) { .place-grid { grid-template-columns: 1fr; } }


/* -------------------------------------------------------- festival calendar
   A dated list rather than a month grid. On a phone a 7x5 grid of Telugu
   festival names is unreadable, and the question a reader actually has is
   "when is the next one", which a chronological list answers directly. */

.cal-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 0 0 22px; padding: 10px 0;
  border-top: 1px solid var(--saffron-light);
  border-bottom: 1px solid var(--saffron-light);
}

.cal-nav span {
  font-size: 1.25rem; font-weight: 700; color: var(--maroon-dark);
  font-family: var(--font-en); min-width: 4ch; text-align: center;
}

.cal-nav button {
  font: inherit; cursor: pointer; line-height: 1;
  width: 38px; height: 38px; font-size: 1.3rem;
  color: var(--maroon); background: var(--cream);
  border: 1px solid var(--saffron-light); border-radius: 50%;
}

.cal-nav button:hover { background: var(--saffron-light); }
.cal-nav button:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

.cal-month {
  margin: 24px 0 10px; padding-bottom: 6px;
  font-size: 1.05rem; color: var(--maroon);
  border-bottom: 1px dashed var(--saffron-light);
}

.cal-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 8px; text-decoration: none;
  background: var(--cream); border-radius: 10px;
  border-left: 3px solid var(--saffron);
}

a.cal-row:hover { background: var(--cream-2); }

/* Past dates stay readable but recede, so the next festival stands out. */
.cal-row.is-past { opacity: 0.55; }

.cal-row.is-today {
  border-left-color: var(--maroon); background: var(--cream-2);
  box-shadow: 0 0 0 1px var(--saffron-light);
}

.cal-date {
  flex: 0 0 46px; text-align: center; line-height: 1.15;
  font-family: var(--font-en); font-size: 0.68rem; color: var(--ink-soft);
}

.cal-date b {
  display: block; font-size: 1.35rem; font-weight: 700; color: var(--maroon-dark);
}

.cal-body { flex: 1 1 auto; min-width: 0; }

.cal-body strong {
  display: block; font-size: 1rem; color: var(--maroon-dark);
  line-height: 1.45; margin-bottom: 2px;
}

/* The rule is the checkable part — never hide it behind a tap. */
.cal-body em {
  display: block; font-style: normal;
  font-size: 0.8rem; line-height: 1.55; color: var(--ink-soft);
}

.cal-kind {
  display: inline-block; margin-bottom: 3px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--saffron-light); color: var(--maroon-dark);
}

.cal-kind.cal-vrata { background: #d9e8d2; }
.cal-kind.cal-jayanti { background: #e6dcf0; }

@media (max-width: 480px) {
  .cal-row { gap: 11px; padding: 11px; }
  .cal-date { flex-basis: 40px; }
  .cal-date b { font-size: 1.2rem; }
}


/* ------------------------------------------------------- festival date card
   The sheet's screen-10 date block. Rendered only once the date is computed,
   so the page never shows an empty promise of a date. */

.fest-date-card {
  display: flex; gap: 16px; align-items: center;
  margin: 0 0 22px; padding: 15px 17px;
  background: var(--cream-2); border-radius: 12px;
  border: 1px solid var(--saffron-light);
  border-left: 4px solid var(--saffron);
}

.fd-when {
  flex: 0 0 auto; text-align: center; line-height: 1.1;
  padding-right: 16px; border-right: 1px dashed var(--saffron-light);
}

.fd-day {
  display: block; font-family: var(--font-en);
  font-size: 2.1rem; font-weight: 700; color: var(--maroon-dark);
}

.fd-mon {
  display: block; font-size: 0.74rem; color: var(--ink-soft); white-space: nowrap;
}

.fd-body { min-width: 0; }

.fd-lead {
  display: block; font-size: 0.68rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.3px;
}

.fd-body strong {
  display: block; font-size: 1.02rem; color: var(--maroon-dark);
  line-height: 1.4; margin: 1px 0 3px;
}

.fd-body em {
  display: block; font-style: normal;
  font-size: 0.82rem; line-height: 1.55; color: var(--ink-soft);
}

.fd-note {
  display: block; margin-top: 6px;
  font-size: 0.73rem; line-height: 1.5; color: var(--ink-soft); opacity: 0.85;
}

@media (max-width: 480px) {
  .fest-date-card { gap: 12px; padding: 13px; }
  .fd-when { padding-right: 12px; }
  .fd-day { font-size: 1.8rem; }
}


/* ------------------------------------------------------------- hub tiles
   The design sheet's ప్రధాన విభాగాలు grid. Icon plus label plus a count, so a
   reader can see at a glance which parts of the section actually have depth. */

.hub-tiles {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
}

.hub-tile {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 16px 10px; text-decoration: none; text-align: center;
  background: var(--cream); border: 1px solid var(--saffron-light);
  border-radius: 12px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.hub-tile:hover,
.hub-tile:focus-visible { background: var(--cream-2); transform: translateY(-2px); }

.ht-icon {
  font-size: 1.5rem; line-height: 1; color: var(--saffron);
  margin-bottom: 4px;
}

.ht-name {
  font-size: 0.94rem; font-weight: 600; color: var(--maroon-dark);
  line-height: 1.35;
}

.ht-count {
  font-size: 0.72rem; color: var(--ink-soft); opacity: 0.8;
  font-family: var(--font-en);
}

@media (max-width: 480px) {
  .hub-tiles { grid-template-columns: repeat(auto-fill, minmax(min(105px, 100%), 1fr)); gap: 8px; }
  .hub-tile { padding: 13px 7px; }
  .ht-name { font-size: 0.85rem; }
}


/* ------------------------------------------------------------- pooja pages
   Materials as a two-column list of cards, steps as a numbered sequence with
   a visible index. Someone mid-pooja needs to find their place again after
   looking away, which is what the large step numbers are for. */

.mat-list {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
}

.mat-list li {
  padding: 10px 13px; background: var(--cream); border-radius: 9px;
  border-left: 3px solid var(--saffron);
}

.mat-name { display: block; font-size: 0.93rem; font-weight: 600; color: var(--maroon-dark); }

.mat-note {
  display: block; margin-top: 2px;
  font-size: 0.79rem; line-height: 1.55; color: var(--ink-soft);
}

.step-list {
  margin: 14px 0 0; padding: 0; list-style: none; counter-reset: step;
}

.step-list li {
  position: relative; counter-increment: step;
  padding: 0 0 18px 46px; margin-bottom: 4px;
  border-left: 2px solid var(--saffron-light);
}

.step-list li:last-child { border-left-color: transparent; padding-bottom: 0; }

.step-list li::before {
  content: counter(step);
  position: absolute; left: -17px; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: 0.88rem; font-weight: 700;
  color: #fff; background: var(--saffron);
}

.step-list h3 {
  margin: 4px 0 6px; font-size: 1.02rem; color: var(--maroon-dark); line-height: 1.4;
}

.step-list p { margin: 0 0 7px; font-size: 0.92rem; line-height: 1.85; }

@media (max-width: 560px) {
  .mat-list { grid-template-columns: 1fr; }
  .step-list li { padding-left: 38px; }
  .step-list li::before { width: 28px; height: 28px; left: -15px; font-size: 0.82rem; }
}