/* extras.css
   Styles for the entity layer (quick-facts box), the festival hub and pages,
   the public question pages, and the Hindi pilot.

   Loaded ONLY by pages that use these parts (see render_head(extra_css=True)),
   so every other page on the site keeps byte-identical HTML. Tokens come from
   styles.css. */

/* — quick facts box (temple entity layer) — */
.infobox{margin:var(--space-6) 0;padding:var(--space-5);border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface)}
.infobox h2{margin:0 0 var(--space-3);font-size:18px}
.infobox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 var(--space-6);margin:0}
.infobox-grid>div{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) 0;border-bottom:1px dotted var(--color-divider)}
.infobox-grid dt{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--color-accent-2)}
.infobox-grid dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.infobox-grid a{font-weight:600}

/* — plain-language article body used by festival and question pages — */
.prose{padding-bottom:var(--space-8)}
.prose h1{margin:var(--space-4) 0 var(--space-4)}
.prose h2{margin:var(--space-7) 0 var(--space-3)}
.prose h3{margin:var(--space-5) 0 var(--space-2);font-size:16px}
.prose p{max-width:68ch;margin:0 0 var(--space-3);line-height:1.7}
.prose ul,.prose ol{max-width:68ch;margin:0 0 var(--space-4);padding-left:1.3em;line-height:1.7}
.prose li{margin-bottom:var(--space-2)}
.prose .lede{font-size:17px}
.prose .table{margin:var(--space-3) 0 var(--space-5)}

/* snippet-bait answer box: the short direct answer shown first */
.answer-box{margin:var(--space-4) 0 var(--space-5);padding:var(--space-4) var(--space-5);border-left:4px solid var(--color-accent);background:var(--color-accent-100);border-radius:0 var(--radius-md) var(--radius-md) 0}
.answer-box .answer-line{margin:0;font-size:17px;line-height:1.6}

.meta-line{font-size:13px;color:color-mix(in srgb,var(--color-text) 62%,transparent);margin:0 0 var(--space-4)}

/* — festival hub cards — */
.fest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--space-4);margin:var(--space-4) 0 var(--space-7)}
.fest-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-bg);color:inherit;text-decoration:none}
.fest-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm)}
.fest-card h3{margin:0;font-size:18px}
.fest-card p{margin:0;font-size:14px;line-height:1.55}
.fest-date{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--color-accent-2)}
.fest-status{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full);background:var(--color-accent-100);color:var(--color-accent-2)}
.fest-status.live{background:var(--color-good-bg);color:var(--color-good)}
.fest-status.ended{background:var(--color-neutral-200);color:var(--color-neutral-700)}
.fest-temples{list-style:none;padding:0!important;margin:0 0 var(--space-5)}
.fest-temples li{padding:var(--space-4);border:1px solid var(--color-divider);border-radius:var(--radius-md);margin-bottom:var(--space-3);background:var(--color-bg)}
.fest-temples strong{display:block;margin-bottom:var(--space-1)}
.fest-temples p{margin:0 0 var(--space-2);max-width:none}

/* — "coming up at this temple" block on temple pages — */
.coming-up{margin:var(--space-6) 0;padding:var(--space-5);border:1px solid var(--color-accent-300);border-radius:var(--radius-md);background:var(--color-accent-100)}
.coming-up h2{margin-top:0;font-size:18px}
.coming-up ul{margin:0;padding-left:1.2em}
.coming-up li{margin-bottom:var(--space-2);font-size:14px;line-height:1.6}

/* — question list on the hub — */
.q-list{list-style:none;padding:0!important;margin:var(--space-4) 0 var(--space-7)}
.q-list li{margin:0 0 var(--space-3)}
.q-list a{display:block;padding:var(--space-4) var(--space-5);border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-bg);color:inherit;text-decoration:none;font-weight:600}
.q-list a:hover{border-color:var(--color-accent)}
.q-list span{display:block;margin-top:var(--space-1);font-weight:400;font-size:13px;color:color-mix(in srgb,var(--color-text) 66%,transparent)}

/* — Hindi pilot — */
:lang(hi){font-family:"Noto Sans Devanagari","Mukta","Inter",system-ui,sans-serif}
html[lang="hi"] body{line-height:1.75}
html[lang="hi"] .prose p,html[lang="hi"] .prose li{line-height:1.85}
.lang-switch{display:inline-flex;gap:var(--space-2);align-items:center;font-size:13px;margin:0 0 var(--space-3)}
.lang-switch a{padding:3px 10px;border:1px solid var(--color-divider);border-radius:var(--radius-full);font-weight:600;text-decoration:none}
.lang-switch a[aria-current="true"]{background:var(--color-accent-100);border-color:var(--color-accent)}