/* Sanatan Bliss — festival pages (single sb_festival). Theme colours arrive as CSS variables on .sbf. */
.sbf { --sbf-top:#1a0e08; --sbf-bot:#5a2410; --sbf-acc:#f2b24c; --sbf-acc2:#e07b00;
  --sbf-ink:#2b1a10; --sbf-muted:#6b5442; --sbf-card:#fffdf8; --sbf-line:#efe2cf; --sbf-r:18px;
  color: var(--sbf-ink); }
.sbf * { box-sizing: border-box; }
.sbf a { color: #8B1A1A; }

/* ── Hero ─────────────────────────────────────────────── */
.sbf-hero { position: relative; overflow: hidden; color: #fff; min-height: 560px; display: grid; align-items: end;
  background: linear-gradient(180deg, var(--sbf-top), var(--sbf-bot)); isolation: isolate; }
.sbf-hero-art { position: absolute; inset: 0; z-index: -2; }
.sbf-hero-art .sbf-art, .sbf-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbf-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(10,4,2,.62) 58%, rgba(10,4,2,.9)),
              linear-gradient(90deg, rgba(10,4,2,.55), rgba(10,4,2,0) 60%); }
.sbf-hero.has-photo::after { background: linear-gradient(180deg, rgba(10,4,2,.25), rgba(10,4,2,.85)); }
.sbf-hero-inner { width: 100%; max-width: 1120px; margin: 0 auto; padding: 120px 24px 104px; }
.sbf-kicker { display: inline-flex; gap: 8px; align-items: center; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sbf-acc); font-weight: 700; background: rgba(0,0,0,.28); padding: 6px 12px; border-radius: 30px; backdrop-filter: blur(4px); }
.sbf-title { font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02; margin: 14px 0 4px; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.sbf-title-hi { font-family: var(--font-hindi, 'Tiro Devanagari Hindi', serif); font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: #ffe7b8; }
.sbf-tagline { max-width: 640px; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.88); margin: 14px 0 22px; }
.sbf-hero-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sbf-datechip { display: inline-flex; flex-direction: column; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px; padding: 10px 16px; backdrop-filter: blur(6px); min-width: 210px; }
.sbf-datechip b { font-size: 1.15rem; font-weight: 600; }
.sbf-datechip span { font-size: .78rem; color: rgba(255,255,255,.75); }
.sbf-count { display: flex; gap: 6px; }
.sbf-count div { background: rgba(0,0,0,.32); border-radius: 12px; padding: 8px 10px; text-align: center; min-width: 58px; }
.sbf-count b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--sbf-acc); }
.sbf-count small { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.sbf-langpill { display: inline-flex; border: 1px solid rgba(255,255,255,.35); border-radius: 30px; overflow: hidden; margin-left: auto; }
.sbf-langpill button { background: transparent; color: #fff; border: 0; padding: 8px 14px; font: inherit; font-size: .82rem; cursor: pointer; }
.sbf-langpill button.is-on { background: var(--sbf-acc); color: #2b1300; font-weight: 700; }

/* ── Effects (only when motion is welcome) ──────────────── */
.sbf-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sbf-fx i { position: absolute; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .sbf-fx-rain i { top: -40px; width: 1.5px; height: calc(var(--s) * 3); background: linear-gradient(rgba(220,235,255,0), rgba(220,235,255,.75)); animation: sbfDrop calc(var(--d) / 7) linear var(--del) infinite; }
  .sbf-flow { animation: sbfFlowDash 1.6s linear infinite; }
  .sbf-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: sbfFlicker 1.6s ease-in-out infinite alternate; }
  .sbf-glow { animation: sbfGlow 2.4s ease-in-out infinite alternate; }
  .sbf-star { animation: sbfTwinkle var(--tw, 3s) ease-in-out infinite alternate; }
  .sbf-twinkle { animation: sbfTwinkle var(--tw, 2s) ease-in-out infinite alternate; }
  .sbf-sway { animation: sbfSway var(--sw, 5s) ease-in-out infinite alternate; }
  .sbf-pulse { transform-box: fill-box; transform-origin: center; animation: sbfPulse 5s ease-in-out infinite alternate; }
  .sbf-drift { animation: sbfDrift 18s linear infinite alternate; }
  .sbf-rain { animation: sbfRain var(--rd, .8s) linear infinite; }
  .sbf-ripple { transform-box: fill-box; transform-origin: center; animation: sbfRipple 4s ease-out infinite; }
  .sbf-shimmer-line { transform-box: fill-box; transform-origin: center; animation: sbfShim var(--sd, 2.4s) ease-in-out infinite alternate; }
  .sbf-bob { animation: sbfBob var(--bd, 4s) ease-in-out var(--bdel, 0s) infinite alternate; }
  .sbf-float { animation: sbfFloat 26s linear infinite alternate; }
  .sbf-flag { transform-box: fill-box; transform-origin: 0 50%; animation: sbfFlag 1.4s ease-in-out infinite alternate; }

  .sbf-fx-diyas i, .sbf-fx-shimmer i { bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%;
    background: radial-gradient(circle, #fff3c4, var(--sbf-acc) 45%, rgba(255,160,40,0) 70%);
    animation: sbfRise var(--d) linear var(--del) infinite; opacity: 0; }
  .sbf-fx-petals i { top: -20px; width: calc(var(--s) * 1.6); height: var(--s); border-radius: 60% 0 60% 0;
    background: linear-gradient(135deg, #ffb703, #fb5607); animation: sbfFall var(--d) linear var(--del) infinite; opacity: .9; }
  .sbf-fx-petals i:nth-child(3n) { background: linear-gradient(135deg, #ff8fab, #e5383b); }
  .sbf-fx-embers i { bottom: -10px; width: calc(var(--s) * .55); height: calc(var(--s) * .55); border-radius: 50%;
    background: radial-gradient(circle, #fff3c4, #ff7a1a 55%, rgba(255,90,20,0) 72%); animation: sbfRise calc(var(--d) * .7) linear var(--del) infinite; opacity: 0; }
  .sbf-fx-mustard i { top: -20px; width: calc(var(--s) * 1.2); height: var(--s); border-radius: 60% 0 60% 0;
    background: linear-gradient(135deg, #fff176, #f4a300); animation: sbfFall var(--d) linear var(--del) infinite; opacity: .9; }
  .sbf-fx-kites i { top: calc(10% + var(--s) * 4); width: 26px; height: 26px; transform: rotate(45deg); opacity: .5;
    background: linear-gradient(135deg, #ff006e 50%, #ffbe0b 50%); animation: sbfKite calc(var(--d) * 3) linear var(--del) infinite; }
  .sbf-fx-kites i:nth-child(2n) { background: linear-gradient(135deg, #3a86ff 50%, #ffffff 50%); }
  .sbf-fx-colors i { bottom: -10px; width: calc(var(--s) * 1.4); height: calc(var(--s) * 1.4); border-radius: 50%; filter: blur(1px);
    background: #ff006e; animation: sbfRise calc(var(--d) * .8) linear var(--del) infinite; opacity: 0; }
  .sbf-fx-colors i:nth-child(5n+1) { background: #ffbe0b; } .sbf-fx-colors i:nth-child(5n+2) { background: #3a86ff; }
  .sbf-fx-colors i:nth-child(5n+3) { background: #06d6a0; } .sbf-fx-colors i:nth-child(5n+4) { background: #8338ec; }
  .sbf-fx-clouds i { top: calc(8% + var(--s) * 3); width: 220px; height: 40px; border-radius: 40px; background: rgba(255,255,255,.08);
    filter: blur(6px); animation: sbfCloud calc(var(--d) * 4) linear var(--del) infinite; }
}
@keyframes sbfFlicker { 0% { transform: scale(1, 1) rotate(-2deg); opacity: .92; } 50% { transform: scale(.94, 1.08) rotate(2deg); } 100% { transform: scale(1.04, .95) rotate(-1deg); opacity: 1; } }
@keyframes sbfGlow { from { opacity: .55; } to { opacity: 1; } }
@keyframes sbfTwinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes sbfSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes sbfPulse { from { transform: scale(.94); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }
@keyframes sbfDrift { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
@keyframes sbfRain { from { transform: translateY(-20px); } to { transform: translateY(40px); } }
@keyframes sbfRipple { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
@keyframes sbfShim { from { transform: scaleX(.8); opacity: .5; } to { transform: scaleX(1.12); opacity: 1; } }
@keyframes sbfBob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes sbfFloat { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
@keyframes sbfFlag { from { transform: skewY(-8deg) scaleX(.9); } to { transform: skewY(6deg) scaleX(1.05); } }
@keyframes sbfRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(-560px) translateX(30px); opacity: 0; } }
@keyframes sbfFall { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(620px) translateX(60px) rotate(540deg); } }
@keyframes sbfKite { from { transform: translateX(-60px) rotate(45deg); } 50% { transform: translateX(55vw) translateY(-30px) rotate(52deg); } to { transform: translateX(110vw) rotate(45deg); } }
@keyframes sbfCloud { from { transform: translateX(-260px); } to { transform: translateX(110vw); } }

/* ── Layout ───────────────────────────────────────────── */
.sbf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.sbf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; margin: -60px auto 60px; position: relative; z-index: 2; }
.sbf-main > * + * { margin-top: 28px; }
.sbf-card { background: var(--sbf-card); border: 1px solid var(--sbf-line); border-radius: var(--sbf-r); padding: 28px; box-shadow: 0 10px 40px rgba(60,30,10,.07); }
.sbf-h2 { font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif); font-size: 1.9rem; font-weight: 500; margin: 0 0 14px; color: #5a1416; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sbf-h2 .sb-hi { font-size: 1.5rem; }
.sbf-h2-ic { font-size: 1.3rem; }
.sbf p { line-height: 1.85; font-size: 1.02rem; margin: 0 0 14px; }
.sbf .sb-hi p, .sbf p.sb-hi { font-size: 1.08rem; line-height: 2; }

/* Muhurat card (main column, first) */
.sbf-mu { background: linear-gradient(135deg, #2a0f0a, #5a1a12); color: #fff; border: 0; position: relative; overflow: hidden; }
.sbf-mu::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,90,.35), rgba(255,200,90,0) 70%); }
.sbf-mu .sbf-h2 { color: #ffe1a6; }
.sbf-mu-date { font-size: 1.6rem; font-weight: 600; }
.sbf-mu-tithi { color: rgba(255,255,255,.78); margin: 4px 0 16px; font-size: .95rem; }
.sbf-mu-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sbf-mu-item { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 12px 14px; }
.sbf-mu-item.is-main { background: linear-gradient(135deg, rgba(255,196,80,.28), rgba(255,140,40,.16)); border-color: rgba(255,200,100,.55); grid-column: 1 / -1; }
.sbf-mu-item small { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #ffd28a; }
.sbf-mu-item b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sbf-mu-item.is-main b { font-size: 1.55rem; }
.sbf-mu-item em { display: block; font-style: normal; font-size: .76rem; color: rgba(255,255,255,.6); }
.sbf-mu-foot { font-size: .78rem; color: rgba(255,255,255,.6); margin-top: 14px; }
.sbf-years { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sbf-years span { font-size: .8rem; background: rgba(255,255,255,.1); padding: 5px 10px; border-radius: 20px; }

/* Quick answer */
.sbf-answer { border-left: 5px solid var(--sbf-acc2); background: #fff8ec; }
.sbf-answer p:last-child { margin-bottom: 0; }

/* At a glance */
.sbf-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.sbf-glance div { background: #fbf3e6; border-radius: 12px; padding: 12px 14px; }
.sbf-glance small { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sbf-muted); }
.sbf-glance b { font-size: 1rem; }

/* Timeline (multi-day festivals) */
.sbf-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.sbf-tl::before { content: ""; position: absolute; left: 22px; top: 6px; bottom: 6px; width: 3px; background: linear-gradient(var(--sbf-acc), var(--sbf-acc2)); border-radius: 3px; }
.sbf-tl li { position: relative; padding: 0 0 22px 62px; }
.sbf-tl li::before { content: attr(data-n); position: absolute; left: 6px; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 3px solid var(--sbf-acc2); display: grid; place-items: center; font-weight: 700; color: #8B1A1A; }
.sbf-tl h3 { margin: 4px 0 2px; font-size: 1.12rem; }
.sbf-tl .sbf-tl-day { font-size: .78rem; color: var(--sbf-muted); text-transform: uppercase; letter-spacing: .08em; }
.sbf-tl p { margin: 6px 0 0; }
.sbf-tl a { font-weight: 600; text-decoration: none; }

/* Samagri */
.sbf-samagri { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.sbf-samagri li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--sbf-line); }
.sbf-samagri li::before { content: "✓"; color: #2f9e44; font-weight: 700; }

/* Steps */
.sbf-steps { list-style: none; margin: 0; padding: 0; counter-reset: sbf; }
.sbf-steps li { counter-increment: sbf; position: relative; padding: 16px 16px 16px 66px; border-radius: 14px; background: #fffaf1; border: 1px solid var(--sbf-line); }
.sbf-steps li + li { margin-top: 10px; }
.sbf-steps li::before { content: counter(sbf); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--sbf-acc), var(--sbf-acc2)); color: #2b1300; font-weight: 800; display: grid; place-items: center; }
.sbf-steps h3 { margin: 2px 0 4px; font-size: 1.05rem; }
.sbf-steps p { margin: 0; }

/* Do / don't */
.sbf-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sbf-dd > div { border-radius: 14px; padding: 18px; }
.sbf-dd .do { background: #effaf2; } .sbf-dd .dont { background: #fff1f0; }
.sbf-dd h3 { margin: 0 0 8px; font-size: 1rem; }
.sbf-dd ul { margin: 0; padding-left: 18px; } .sbf-dd li { margin: 6px 0; line-height: 1.6; }

/* Regional */
.sbf-reg { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.sbf-reg div { border: 1px solid var(--sbf-line); border-radius: 14px; padding: 16px; background: #fffdf9; }
.sbf-reg h3 { margin: 0 0 6px; font-size: 1rem; color: #8B1A1A; }
.sbf-reg p { margin: 0; font-size: .95rem; line-height: 1.7; }

/* Mantras */
.sbf-mantra { border-radius: 16px; padding: 22px; background: linear-gradient(135deg, #2a0f0a, #4a1a2a); color: #fff; }
.sbf-mantra + .sbf-mantra { margin-top: 12px; }
.sbf-mantra h3 { margin: 0 0 10px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #ffd28a; }
.sbf-mantra .sa { font-family: var(--font-hindi, 'Tiro Devanagari Hindi', serif); font-size: 1.35rem; line-height: 1.9; color: #fff3d6; white-space: pre-line; }
.sbf-mantra .tr { font-style: italic; color: rgba(255,255,255,.75); margin-top: 8px; white-space: pre-line; }
.sbf-mantra .mn { margin-top: 10px; color: rgba(255,255,255,.88); font-size: .95rem; line-height: 1.7; }

/* FAQ */
.sbf-faq details { border-bottom: 1px solid var(--sbf-line); padding: 14px 0; }
.sbf-faq summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sbf-faq summary::-webkit-details-marker { display: none; }
.sbf-faq summary::after { content: "+"; color: var(--sbf-acc2); font-size: 1.3rem; line-height: 1; }
.sbf-faq details[open] summary::after { content: "–"; }
.sbf-faq details p { margin: 10px 0 0; }

/* Sidebar */
.sbf-side { display: flex; flex-direction: column; gap: 18px; }
.sbf-side .sbf-card { padding: 20px; }
.sbf-side h3 { margin: 0 0 12px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sbf-muted); }
.sbf-sticky { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }
.sbf-toc a { display: block; padding: 7px 0; text-decoration: none; color: var(--sbf-ink); border-bottom: 1px dashed var(--sbf-line); font-size: .93rem; }
.sbf-toc a:hover { color: #8B1A1A; }
.sbf-rel a { display: flex; gap: 12px; align-items: center; text-decoration: none; padding: 8px 0; color: var(--sbf-ink); }
.sbf-rel .em { width: 40px; height: 40px; border-radius: 12px; background: #fbf0dd; display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.sbf-rel small { display: block; color: var(--sbf-muted); font-size: .78rem; }
.sbf-share { display: flex; gap: 8px; flex-wrap: wrap; }
.sbf-share a, .sbf-share button { flex: 1; text-align: center; padding: 10px; border-radius: 10px; border: 1px solid var(--sbf-line); background: #fff; cursor: pointer; font: inherit; font-size: .85rem; text-decoration: none; color: var(--sbf-ink); }

.sbf-legacy-content { line-height: 1.85; }

@media (max-width: 960px) {
  .sbf-grid { grid-template-columns: 1fr; margin-top: -40px; }
  .sbf-sticky { position: static; }
  .sbf-hero { min-height: 520px; }
}
@media (max-width: 600px) {
  .sbf-hero-inner { padding: 90px 18px 84px; }
  .sbf-card { padding: 20px; }
  .sbf-dd { grid-template-columns: 1fr; }
  .sbf-langpill { margin-left: 0; }
  .sbf-count div { min-width: 50px; }
  .sbf-h2 { font-size: 1.55rem; }
}
@media print { .sbf-hero { min-height: 0; } .sbf-fx, .sbf-langpill, .sbf-share { display: none !important; } }

@keyframes sbfDrop { from { transform: translateY(0) translateX(0); } to { transform: translateY(640px) translateX(-40px); } }
@keyframes sbfFlowDash { to { stroke-dashoffset: -32; } }

/* City-wise muhurat table (Patch 16) */
.sbf-city-note { margin: 0 0 12px; color: #5b4636; }
.sbf-city-q { width: 100%; max-width: 360px; padding: 10px 14px; border: 1px solid #ecdcc4; border-radius: 999px; font: inherit; margin-bottom: 12px; background: #fffaf3; }
.sbf-city-wrap { overflow-x: auto; border: 1px solid #ecdcc4; border-radius: 12px; }
.sbf-city-t { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 520px; }
.sbf-city-t th, .sbf-city-t td { padding: 9px 12px; border-bottom: 1px solid #f3e6d2; text-align: left; white-space: nowrap; }
.sbf-city-t thead th { background: #fff4e2; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #7a3e00; position: sticky; top: 0; }
.sbf-city-t tbody th { font-weight: 600; } .sbf-city-t tbody th a { color: inherit; text-decoration: none; }
.sbf-city-t tbody th span { display: block; color: #a07840; font-weight: 400; font-size: .8em; }
.sbf-city-t th, .sbf-city-t td { padding-left: 8px; padding-right: 8px; }
.sbf-city-t td.is-main { font-weight: 700; color: #6b1e0f; }
.sbf-city-t tr:target { background: #fff1c9; }
.sbf-city-t tr:target td.is-main { color: #9a3412; }
.sbf-city-foot { font-size: .8rem; color: #8a7360; margin: 10px 0 0; }
/* Patch 17: grid children must be allowed to shrink so wide city tables scroll inside their card, not the page */
.sbf-main, .sbf-main > .sbf-card, .sbf-side { min-width: 0; }
.sbf-city-t { min-width: 0; }
@media (max-width: 600px) { .sbf-city-t { font-size: .8rem; } .sbf-city-t th, .sbf-city-t td { padding: 8px 6px; } .sbf-city-t thead th { white-space: normal; min-width: 92px; } }