/* Sacred background gradient */
.sacred-bg {
  background: linear-gradient(135deg, #fdf6ff 0%, #f3eaff 100%);
}

/* Keep site header compact on BG pages */
.header .container { padding: 0 !important; }

/* Replace the global .container rule with these two */
.bgita-page,
.bhagavat-gita, .bgita-home > .container {
  max-width: 920px;
  margin: 0 auto;
  padding: 1rem;
}

/* (optional) make BG content a touch narrower */
.container.bgita-page,
.container.bhagavat-gita,
.container.verse-reader { max-width: 920px; }  /* was 960 */

.container { padding: 0; }  /* make it harmless */

.gita-hero {
  text-align: center;
  margin: 1rem 0 1.5rem;
}
.gita-title {
  font-size: 1rem;
  font-weight: 800;
  color: #7b2cbf;
  margin-bottom: .3rem;
}
.gita-subtitle {
  font-size: .75rem;
  color: #6b5c7b;
  font-weight: 500;
}


/* Unified accordion bulleted list styling (no background) */
.accordion-bullets {
  padding: 8px 0 8px 0;
  margin-bottom: 8px;
}
.accordion-bullets ul {
  text-align: left;
  margin: 0;
  padding-left: 0.9rem;
}
.accordion-bullets li {
  text-align: left;
  margin-bottom: 6px;
  line-height: 1.2;
}
.container{max-width:960px;margin:0 auto;padding:1rem}

.bhagavat-gita .breadcrumb-nav {
  margin-top: 0.1rem !important;
  margin-bottom: 0.4rem !important;
}
.bhagavat-gita .page-title {
  margin-top: 0.05rem !important;
  margin-bottom: 0.5rem !important;
  font-size: 1.02rem;
}
.bhagavat-gita .breadcrumb-nav {
  margin-top: 0.2rem;
  margin-bottom: 0.6rem;
}
.bhagavat-gita .page-title {
  margin-top: 0.1rem;
  margin-bottom: 0.7rem;
  font-size: 1.05rem;
}

/* Accordion */
.accordion { margin-bottom: 0.8rem; }
.accordion-item { border-bottom: 1px solid #eee; margin-bottom: 6px; }
.accordion-item {
  margin-bottom: 10px; /* Add space between accordion items */
}
.accordion-toggle {
  background: #f3e9ff;
  color: #7b2cbf;
  border: none;
  width: 100%;
  text-align: left;
  font-weight: 700;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  cursor: pointer;
  outline: none;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accordion-toggle[aria-expanded="true"] { background: #ead8ff; }
.accordion-toggle[aria-expanded="true"] .arrow-right { transform: rotate(180deg); }
.accordion-content {
  padding: 0.7rem;
  border: none !important;
  box-shadow: none !important;
}
.arrow-right {
  margin-left: auto;
  font-size: 1.1em;
  color: #7b2cbf;
  transition: transform .2s ease;
}

.center-title { text-align: center; }
.site-purple { color: #7b2cbf; }

/* Breadcrumb */
.breadcrumb-nav { font-size: 0.8rem; color: #6c757d; margin-bottom: 1rem; }
.breadcrumb-nav a { text-decoration: none; color: #7b2cbf; font-weight: 600; }

/* Page title spacing */
.page-title{margin:.15rem 0 0.88rem}

/* Tabs (if used later) */
.gita-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.tab-pill{background:#f3e9ff;color:#7b2cbf;border:1px solid #ead8ff;border-radius:999px;padding:.25rem .6rem;font-weight:600}

/* About banner */
.about-card{
  background: linear-gradient(135deg, #fdf6ff 0%, #f3eaff 100%);
  border: 2px solid #e9d7ff;
  border-radius: 18px;
  padding: 1.1rem;
  margin-bottom: 1.2rem;
  font-size:0.88rem;
  box-shadow: 0 6px 16px rgba(123,44,191,.08);
}
.about-card ul { margin: 0; padding-left: 1.15em; }
.about-card ul li { margin-bottom: 0.45em; line-height: 1.7; }

.mt{margin-top:1rem}

/* Chapters grid */
.chapter-grid,
.chapter-grid.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}

@media (min-width: 1100px){
  .chapter-grid.two-col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .chapter-grid,
  .chapter-grid.two-col { grid-template-columns: 1fr; }
}

/* Chapter card — brand style */
.chapter-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  font-size:0.95rem;
  display:block;
  background:#faf5ff;                 /* soft purple tint */
  border:2px solid #e9d7ff;           /* light purple border */
  border-radius:16px;
  padding:1rem;
  text-decoration:none;
  color:inherit;
  transition: transform .15s, box-shadow .15s, background .15s;
  position:relative;
  min-height:92px;
}
.chapter-card:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 22px rgba(123,44,191,.18);
  background:#f6ecff;
}
.chapter-card.clickable{cursor:pointer;}
.ch-no{color:#7b2cbf;font-weight:800;font-size:0.88rem;}
.ch-count{
  color:#5e2a9e;
  margin-top:.35rem;
  font-size:0.83rem;
  background:#f3e8ff;
  border:1px solid #ede9fe;
  padding:2px 8px; border-radius:999px; display:inline-block;
}
.ch-cta{position:absolute;right:18px;bottom:14px;}
.ch-cta .arrow-right{font-size:1.05em;color:#7b2cbf;font-weight:800}

/* Links / back */
.back-link{color:#7b2cbf;text-decoration:none}

/* Verse-grid (used on chapter page) */
.verse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:.5rem;margin-top:1rem}
.verse-btn{display:flex;align-items:center;justify-content:center;height:42px;border:1px solid #ddd;border-radius:10px;background:#faf7ff;font-weight:700;color:#333;text-decoration:none}
.verse-btn.visited{background:#d6f4d8;border-color:#8cd29a}

/* Progress bar (chapter page) */
.progress-wrap{display:grid;gap:.5rem;margin:1rem 0}
.progress-bar{height:10px;border-radius:999px;background:#eee;overflow:hidden}
#progressFill{height:100%;width:0;background:#22c55e;transition:width .3s}
.legend{display:flex;gap:1rem;align-items:center;color:#666;font-size:.9rem}
.legend .dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:.25rem}
.legend .visited{background:#22c55e}.legend .pending{background:#ddd}

/* Verse page top nav */
.top-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.pager{display:flex;align-items:center;gap:.75rem}
.pager .arrow{padding:.25rem .5rem;border:1px solid #ddd;border-radius:8px;text-decoration:none;color:#333}
.pager .arrow.disabled{opacity:.35;pointer-events:none}

/* Verse content */
.verse-block .verse-text{font-size:1.15rem;line-height:1.9}
.verse-block .commentary{
  margin-top:1rem;padding:10px 14px;background:#faf5ff;border-left:4px solid #7b2cbf;border-radius:8px;color:#333
}

/* Character strip */
.char-strip{display:flex;gap:.5rem;align-items:center;margin:.25rem 0;background:#f4eff8;border:1px solid #ede9fe;border-radius:12px;padding:4px 8px}
.char-strip.left{justify-content:flex-start}
.char-strip.right{justify-content:flex-end;text-align:right}
.char-strip img{height:44px;width:44px;border-radius:50%;border:2px solid #7b2cbf}
.char-name{font-size:.9rem;color:#555}

/* Compact progress layout on chapter page */
.progress-compact .progress-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
}
.progress-label { font-size:.85rem; color:#6b6b6b; }
.progress-bar.small { height:8px; background:#eee; border-radius:999px; overflow:hidden; }
.progress-percent { font-weight:800; color:#7b2cbf; }

/* Verse buttons hover + focus for better affordance */
.verse-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(123,44,191,.12); }
.verse-btn:focus { outline: 2px solid #7b2cbf; outline-offset: 2px; }

/* Make accordion title slightly denser on mobile */
@media (max-width: 600px) {
  .accordion-toggle { padding: .65rem .88rem; }
}

.section-subtitle {
  font-size: 0.9rem;
  font-weight: 700;
  color: #7b2cbf;
  margin: 1rem 0 .5rem;
}

/* Chapter page title – make a little smaller */
.page-title {
  margin: .15rem 0 .75rem;
  font-size: 0.9rem;      /* was bigger */
  font-weight: 700;
  color: #7b2cbf;
}

/* Section subtitle (“ஸ்லோகங்கள்”) */
.section-subtitle {
  font-size: 0.9rem;      /* bump up from 0.85 */
  font-weight: 700;
  color: #7b2cbf;
  margin: 1rem 0 .5rem;
}

/* Progress bar styling */
.progress-bar.small {
  height: 14px;                   /* taller than before (was 8/10px) */
  background: #faf5ff;            /* subtle background */
  border-radius: 999px;
  border: 1px solid #e9d7ff;      /* mild site colour border */
  overflow: hidden;
}
#progressFill {
  height: 100%;
  width: 0;
  background: #7b2cbf;            /* brand purple fill */
  transition: width .3s;
}
.progress-percent {
  font-weight: 700;
  color: #7b2cbf;
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .page-title { font-size: 1.1rem; }
}

/* Header card for verse page */
.verse-header-card{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  background:#faf5ff; border:2px solid #e9d7ff; border-radius:14px; padding:.6rem .8rem; margin-bottom:.6rem;
}

/* Verse card */
.verse-card{
  background:#fff; border:1px solid #7b2cbf; border-radius:16px; padding:1rem; margin:.5rem 0 1rem;
}
.verse-heading{ font-weight:800; color:#7b2cbf; margin-bottom:.5rem; }
.verse-text{ font-size:1.15rem; line-height:1.9; }

/* Divider between verse and commentary */
.verse-divider{ height:1px; background:#f0e8ff; margin:.9rem 0; }

/* Commentary block */
.commentary{ background:#faf5ff; border-left:4px solid #7b2cbf; border-radius:8px; padding:.8rem; }
.commentary-title{ font-weight:800; margin-bottom:.25rem; color:#5e2a9e; }
.commentary-text{ color:#333; }
.commentary-text ul {
  margin: 0 auto;
  padding-left: 1rem;
  display: table;
}
.commentary-text li {
  margin: .25rem 0;
  line-height: 1.5;
  text-align: left;
}

/* Pager */
.pager{ display:flex; align-items:center; gap:.6rem; }
.pager .arrow{ padding:.35rem .6rem; border:1px solid #ddd; border-radius:8px; text-decoration:none; color:#333; background:#fff; }
.pager .arrow:hover{ box-shadow:0 4px 10px rgba(123,44,191,.12); transform:translateY(-1px); }
.pager .arrow.disabled{ opacity:.35; pointer-events:none; }
.verse-pos{ font-weight:700; color:#7b2cbf; }

.bottom-pager{ justify-content:space-between; margin-top:.6rem; }

/* Speaker chip (already in your CSS; small lift) */
.char-strip{ display:flex; gap:.5rem; align-items:center; margin:.5rem 0; background:#f4eff8; border:1px solid #ede9fe; border-radius:12px; padding:6px 10px }
.char-strip img{ height:44px; width:44px; border-radius:50%; border:2px solid #7b2cbf }
.char-name{ font-size:.9rem; color:#555 }

/* Small screens: tighten top header spacing */
@media (max-width: 600px){
  .verse-header-card{ padding:.55rem .7rem }
}

.verse-header-card{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  background:#faf5ff; border:1px solid #e9d7ff;
  border-radius:14px; padding:.55rem .8rem; margin-bottom:.6rem;
}
.verse-pos{ font-weight:700; color:#7b2cbf; }

.bottom-pager{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-top:1rem;
}
.bottom-pager .home-btn{
  background:#faf5ff; border:1px solid #e9d7ff;
  border-radius:10px; padding:.45rem .9rem;
  color:#7b2cbf; font-weight:600; text-decoration:none;
}
.pager .arrow, .bottom-pager .arrow{
  background:#fff; border:1px solid #ddd;
  border-radius:10px; padding:.4rem .8rem;
  font-size:1.2rem; text-decoration:none; color:#333;
}
.pager .arrow.disabled, .bottom-pager .arrow.disabled{ opacity:.35; pointer-events:none; }

/* Header pager */
.verse-header-card{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  background:#faf5ff; border:1px solid #e9d7ff; border-radius:14px;
  padding:.45rem .7rem; margin-bottom:.6rem;
}
.vh-title{ font-weight:700; color:#7b2cbf; font-size:.95rem; }

/* Circular arrows (top + bottom) */
.round-nav{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:#ffffff; border:1px solid #d9c6ff; color:#6b21a8;
  text-decoration:none; font-weight:700; line-height:1;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.round-nav:hover{ background:#f7f2ff; }
.round-nav.lg{ width:44px; height:44px; font-size:1.1rem; }
.round-nav.disabled{ opacity:.35; pointer-events:none; }

/* Chapter chip */
.chip-home{
  padding:.5rem 1rem; border-radius:999px; background:#faf5ff;
  border:1px solid #e9d7ff; color:#7b2cbf; font-weight:700; text-decoration:none;
}

/* Verse card text sizing & wrapping fix */
.verse-card{ background:#fff; border:1px solid #7b2cbf; border-radius:16px; padding:14px; }
.verse-text{
  font-size:.88rem; line-height:1.9;
  word-break:break-word; overflow-wrap:break-word;
  -webkit-hyphens:auto; hyphens:auto;
}
.commentary{ margin-top:10px; }
.commentary-title{ font-weight:700; color:#7b2cbf; margin-bottom:6px; }
.commentary-text{ font-size:.88rem; line-height:1.5; }

/* Divider inside verse card */
.verse-divider{ height:1px; background:linear-gradient(90deg,#eee, #e9d7ff, #eee); margin:10px 0; }

/* Actions row (like/share) – same micro look as home card */
.verse-actions{
  display:flex; gap:10px; margin-top:10px; align-items:center;
}

.banner-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end; /* right-align */
  gap: 10px; /* spacing between buttons */
  height: 100%;
  margin-top: 10px !important;
  margin-left: 12px;
  height: 100%;
}

/* unified emoji icon button */
.icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid #ede9fe; background:#faf5ff;
  color:#7b2cbf; box-shadow:0 2px 10px rgba(123,44,191,.10);
  font-size:1rem; line-height:1; cursor:pointer; transition:transform .12s, box-shadow .12s, background .12s;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(123,44,191,.16); }
.icon-btn:active{ transform:translateY(0); }
.icon-btn:disabled{ opacity:.55; cursor:not-allowed; }

/* Like button state */
.icon-btn.liked {
  background: #fde8e8;        /* soft pink */
  border-color: #fecaca;
  color: #dc2626;             /* red text/heart */
  box-shadow: 0 2px 10px rgba(220,38,38,.08);
}
.icon-btn.liked:hover { transform: none; box-shadow: 0 2px 10px rgba(220,38,38,.08); }

/* (optional) make the like count pulse once when it changes */
#verse-like-count.bump { animation: like-bump .4s ease; }
@keyframes like-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); }
  60% { transform: scale(.95); }
  100% { transform: scale(1); }
}

/* Share counter badge */
.btn-with-badge { position: relative; display: inline-block; }
.count-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  background: #7b2cbf; color: #fff;
  border-radius: 999px; font-size: 11px; line-height: 18px;
  text-align: center; padding: 0 5px;
  box-shadow: 0 2px 6px rgba(123,44,191,.25);
}

/* Bottom bar */
.bottom-pager{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-top:12px;
}

/* Speaker chip */
.char-strip{ display:flex; align-items:center; gap:.6rem; margin:.3rem 0 .7rem; }
.char-strip img{ width:40px; height:40px; border-radius:50%; border:2px solid #e9d7ff; }
.char-name{ font-weight:600; color:#7b2cbf; }

.verse-divider.soft { margin: 12px 0 8px; background:#e9d7ff; height:1px; }

.verse-actions {
  display:flex;
  gap:14px;
  justify-content:flex-end;
  margin-top:8px;
}

.btn-with-badge.vertical {
  display:flex; flex-direction:column; align-items:center;
}
.count-badge.below {
  margin-top:4px;
  font-size:.75rem; text-align:center;
}

/* Compact header just for Gita pages */
.verse-reader { --vh-gap: 8px; }
.verse-reader .vh-title { margin: 8px 0 6px; }

/* Micro breadcrumb */
.breadcrumb-nav.micro {
  margin: 8px 0 6px;
  font-size: 0.75rem;
  color: var(--muted, #6f6a80);
  display: flex; flex-wrap: wrap; gap: .25rem .5rem;
}
.breadcrumb-nav.micro a { color: var(--brand-700, #6b21a8); text-decoration: none; }
.breadcrumb-nav.micro .sep { opacity: .6; }

/* Speaker chip nudged tighter */
.char-strip { margin: 6px 0 10px; }

/* Divider between verse and actions already present; tighten a bit */
.verse-divider { margin: 10px 0; }
.verse-divider.soft { margin: 12px 0 8px; }

/* Accordion improvements */
.accordion .accordion-toggle {
  width: 100%; text-align: left;
  font-size: .88rem; font-weight: 700;
  background: var(--brand-50, #f5e9ff);
  border: 1px solid rgba(107,33,168,.15);
  border-radius: 12px; padding: 12px 14px;
}
.accordion .accordion-content {
  padding: 12px 14px;
  border-left: 2px solid rgba(107,33,168,.15);
  margin: 6px 0 12px 12px;
  border-radius: 8px;
  background: #fff;
}

/* Bulletized commentary */
.commentary-text ul { margin: 0; padding-left: 1rem; }
.commentary-text li { margin: .25rem 0; line-height: 1.5; }

/* Title arrows pill at top already styled; slightly smaller */
.vh-title { font-size: .9rem; }

/* Reduce top spacing on the first big card */
.verse-card.site-shadow { margin-top: 6px; }

/* Ensure icons row aligns right if desired (optional) */
.verse-actions { justify-content: flex-end; }

/* Slimmer top spacing only on BG pages */
.bgita-page {
  margin-top: 6px;
}

/* breadcrumb + top title tighten */
.breadcrumb-nav { margin: 6px 0 4px; font-size: .9rem; }
.vh-title { margin: 2px 0 10px; }

/* speaker chip & pager spacing */
.char-strip { margin: 8px 0 10px; }

/* prevent auto hyphenation in Tamil */
.verse-text {
  hyphens: none;          /* stop browser from inserting hyphens */
  word-break: break-word; /* wrap long tokens without hyphen glyph */
  overflow-wrap: anywhere;
}

/* verse card tighter padding on mobile */
.verse-card { padding: 14px 14px 10px; }

.ai-disclaimer {
  margin-top: 1rem;
  padding: 8px 12px;
  font-size: 0.5rem;
  color: #4a3f6a;
  background: #f5f0ff;
  border-left: 4px solid #7b2cbf;
  border-radius: 6px;
  text-align: left;
  line-height: 1.1;
}
.ai-disclaimer strong {
  color: #5e2a9e;
}

/* === Unified Accordion Styles (Overrides) === */
.accordion {
  margin-bottom: 0.5rem;
  border-radius: 15px;
  border: 1px solid #eee;
  overflow: hidden;
}
.accordion-item {
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
}
.accordion-item {
  margin-bottom: 10px; /* Add space between accordion items */
}
.accordion-toggle {
  background: #f3e9ff;
  color: #7b2cbf;
  border: none;
  width: 100%;
  text-align: left;
  font-weight: 700;
  padding: 0.55rem 1rem 0.55rem 1rem;
  font-size: 0.88rem;
  cursor: pointer;
  outline: none;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px 14px 0 0;
}
.accordion-toggle[aria-expanded="true"] { background: #ead8ff; }
.accordion-toggle[aria-expanded="true"] .arrow-right { transform: rotate(180deg); }
.accordion-content {
  padding: 0.35rem 1rem 0.25rem 1rem;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 0 14px 14px;
  margin-bottom: 0.1rem;
}
.accordion-bullets {
  padding: 2px 0 2px 0;
  margin-bottom: 2px;
}

/* Distinct accordion items: each as a separate card */
.accordion {
  border: none;
  background: none;
  border-radius: 14px;
  padding: 0;
}
.accordion-item {
  border-radius: 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(123,44,191,.06);
  overflow: hidden;
}
.accordion-item:last-child {
  margin-bottom: 0;
}
.accordion-toggle {
  background: #f3e9ff;
  color: #7b2cbf;
  border: none;
  border-radius: 14px 14px 0 0;
  padding: 0.65rem 1.1rem;
}
.accordion-content {
  border-radius: 0 0 14px 14px;
  padding: 0.5rem 1.1rem 0.5rem 1.1rem;
  margin: 0;
  box-shadow: none;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  justify-items: center; /* center cards inside */
}

.chapter-card {
  max-width: 320px;
  background: #fff;
  border: 2px solid #e9d7ff;
  border-radius: 18px;
  padding: 1rem 1.25rem;
  text-align: left;
  position: relative;
}

.chapter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(123,44,191,.15);
  background: #faf5ff;
}

.ch-cta .ch-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e9d7ff;
  background: #faf5ff;
  color: #7b2cbf;
  font-weight: bold;
  font-size: 0.83rem;
}

.accordion-content {
  display: flex;
  justify-content: center;
}
.accordion-content > .chapter-grid {
  max-width: 1000px;
}

/* --- 1) Header width parity with home --- */
/* Restore the usual container gutters ONLY for the header */
.header .container {
  /* same feel as home page container spacing */
  padding-left: 12px !important;
  padding-right: 12px !important;
  max-width: 100% !important;   /* don't constrain header to 960px */
}

/* Neutralize any remaining generic .container in this file */
.container { padding: 0; max-width: none; }

/* Scope layout width to BG content only (not header) */
.bgita-page,
.bhagavat-gita,
.verse-reader {
  max-width: 960px;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* --- 2) Tighten the space under the header before breadcrumb --- */
/* Slightly smaller top offset for BG pages (header is sticky) */
.bgita-page,
.bhagavat-gita,
.verse-reader {
  padding-top: 84px; /* was effectively higher; this matches visual of home */
}

/* Micro breadcrumb = tighter vertical rhythm */
.breadcrumb-nav,
.breadcrumb-nav.micro {
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}

/* The first thin divider below breadcrumb – make it very slim */
.verse-divider.soft {
  margin: 4px 0 6px !important;
}

/* Hero block right after breadcrumb – remove extra top margin */
.gita-hero {
  margin-top: 4px !important;
}

/* Mobile: header feels taller, so tighten a bit more */
@media (max-width: 600px) {
  .bgita-page,
  .bhagavat-gita,
  .verse-reader { padding-top: 78px; }
}

/* === 0) Nuke the generic container width/padding coming from this file === */
/* If you still have `.container{max-width:960px;margin:0 auto;padding:1rem}` anywhere in this file, this neutralizes it */
.container { max-width: none; padding: 0; }

/* === 1) Header should keep home-like gutters, not 960px width === */
.header .container {
  max-width: 100% !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* === 2) Scope width only to BG content (NOT the header) === */
.container.bgita-page,
.container.bhagavat-gita,
.container.verse-reader {
  /* use same feel as home: centered + gentle side gutters */
  max-width: 960px;     /* adjust to your home value if needed */
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 0;       /* prevent extra gap under the fixed header */
}

/* === 3) Tighten the space right under header before breadcrumb === */
.container.bgita-page .breadcrumb-nav,
.container.bhagavat-gita .breadcrumb-nav,
.container.verse-reader .breadcrumb-nav {
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}

/* The very first thin divider after breadcrumb – keep it slim */
.verse-divider.soft { margin: 4px 0 6px !important; }

/* Optional: the hero just after breadcrumb – remove big top margin */
.gita-hero { margin-top: 16px !important; }

/* Mobile nudge: headers feel taller on phones, keep it tight */
@media (max-width: 600px) {
  .container.bgita-page,
  .container.bhagavat-gita,
  .container.verse-reader {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* === Sacred surface spacing for BG pages (match Home look) === */
/* Home already defines .sacred-bg gradient; we just add spacing on BG pages. */
.container.bgita-page.sacred-bg,
.container.bhagavat-gita.sacred-bg,
.container.verse-reader.sacred-bg {
  /* inner padding so the breadcrumb/top + bottom pager don't touch edges */
  padding: 14px 12px 16px;  /* top, sides, bottom */
  /* outer margin so the gradient doesn’t kiss the mobile screen edges */
  margin: 6px 8px 14px;     /* top, sides, bottom */
  border-radius: 16px;      /* same soft radius feel as home cards */
}

/* Keep header gap tight but consistent */
.container.bgita-page,
.container.bhagavat-gita,
.container.verse-reader {
  padding-top: 84px; /* adjust ±4px if your fixed header differs */
}

/* Breadcrumb rhythm inside the sacred surface */
.sacred-bg .breadcrumb-nav { 
  margin-top: 4px !important; 
  margin-bottom: 6px !important; 
}

/* First divider & bottom pager breathing room */
.sacred-bg .verse-divider.soft { margin: 4px 0 8px !important; }
.sacred-bg .bottom-pager { margin-top: 10px; margin-bottom: 6px; }

.bgita-wrapper.sacred-bg {
  margin: 8px auto;          /* gap from edges, like Home */
  padding: 14px 0;           /* top/bottom breathing room */
  border-radius: 16px;       /* same rounded container feel */
  max-width: 920px;          /* same width constraint */
}

.bgita-page {
  padding: 0 12px;           /* inner gutters (left/right white space) */
}

/* Centered sacred surface with equal gutters on mobile + desktop */
.bgita-wrapper.sacred-bg {
  max-width: 920px;        /* same content bound as home */
  margin: 8px 8px 14px;    /* ⟵⟶ add side gutters (was 8px auto) */
  padding: 14px 8px;       /* side padding so gradient never hugs content */
  border-radius: 16px;
  overflow: hidden;        /* keep rounded gradient edges clean */
}

/* Inner container keeps your normal left/right content gutters */
.bgita-page { padding: 0 12px; }

/* Tuck the breadcrumb a touch inside the surface */
.bgita-wrapper.sacred-bg .breadcrumb-nav.micro {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

/* 2) Kill any older offsets so they don't stack */
.bgita-page,
.bhagavat-gita,
.verse-reader,
.container.bgita-page,
.container.bhagavat-gita,
.container.verse-reader {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Chips line */
.facts-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 1rem}
.chip{  display: inline-flex;              /* flexbox alignment */
  align-items: center;               /* vertical centering */
  justify-content: flex-start;       /* keep icon + text aligned */
  gap: 0.35rem;                      /* space between icon and text */
  padding: 6px 12px;                 /* balanced padding */
  line-height: 1.4;                  /* better readability for multi-line */
  min-height: 38px;                  /* consistent chip height */
  border-radius: 50px;               /* pill shape */
  background: #fff;
  border: 1px solid var(--site-purple, #a569bd);
  font-size: 0.83rem;
  word-break: break-word;
  white-space: normal;               /* allows wrapping */}

/* Card holder (soft background + border) */
.facts-card{
  margin:.75rem 0 1rem;
  padding:.6rem .7rem;
  background: var(--site-purple-03, #faf6ff);
  border:1px solid var(--site-purple-12, #7b2cbf);
  border-radius:16px;
}

/* Responsive grid: tidy alignment */
.facts-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:.55rem .6rem;              /* row gap / col gap */
  align-items:stretch;
}

/* Pill */
.chip{
  display:flex; align-items:center; gap:.35rem;
  min-height:38px;
  padding:.38rem .6rem;
  border:1px solid var(--site-purple-20,#e6dcff);
  background: #fff;
  border-radius:999px;
  box-shadow: 0 1px 0 rgba(60,0,100,.03);
}

/* Icon circle */
.chip-ico{
  display:inline-grid; place-items:center;
  width:22px; height:22px; font-size:.9rem;
  border-radius:50%;
  background: var(--site-purple-08,#f2e9ff);
  color: var(--site-purple-strong,#7b2cbf);
}

/* Label / value */
.chip-lbl{ font-size:.75rem; color:#6b5d7a; white-space:nowrap; }
.chip-val{   font-weight: 600;
  font-size: .81rem;
  white-space: normal;      /* ✅ allow wrapping */
  word-wrap: break-word;    /* ✅ break long words if needed */
  line-height: 1.3; }

/* Make "முக்கிய பகுதிகள்" span full width; clamp long text nicely */
.chip--long{
  grid-column:1 / -1;  /* full row */
  justify-content:flex-start;
}
.chip--long .chip-val{
  overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.3;
}

/* Mobile: ensure chips stack cleanly and don't overlap */
@media (max-width: 600px) {
  .facts-grid {
    grid-template-columns: 1fr;   /* single column for narrow screens */
    gap: .5rem 0;                 /* vertical spacing only */
  }

  .facts-grid .chip,
  .facts-grid .chip--long {
    width: 100% !important;      /* full-width pills */
    min-height: 0;               /* allow variable height for wrapped text */
    height: auto !important;
    padding: .5rem .75rem;       /* slightly larger touch target */
    white-space: normal;         /* allow wrapping */
    word-break: break-word;
    align-items: flex-start;     /* align icon to top if text wraps */
  }

  .chip .chip-ico { margin-top: 2px; flex: 0 0 auto; }

  /* If multiple icons or badges are inside chip, keep them from overlapping */
  .chip .chip-val { display:block; }

  /* Make long chips more readable on mobile */
  .chip--long { padding-left: 10px; padding-right: 10px; }
}

/* Optional: center the whole block when few chips */
@media (min-width:480px){
  .facts-grid{ justify-items:stretch; }
}

/* Desktop: ensure chips in the facts-grid align neatly in rows
   - give the grid consistent row sizing
   - make chips stretch to the row height and align to the top
   This avoids uneven vertical centering when some chips wrap to two lines.
*/
@media (min-width: 900px) {
  .facts-grid {
    justify-items: stretch;
    align-items: start;                 /* align grid items to top */
    grid-auto-rows: minmax(46px, auto); /* consistent minimum row height */
  }

  .facts-grid .chip {
    align-self: start; /* ensure each chip sits at the top of its grid cell */
    height: 100%;      /* stretch to the grid row height for visual parity */
    box-sizing: border-box;
    display: flex; align-items: center; gap: .35rem; padding: .38rem .6rem;
  }
}

/* Make the facts chips display vertically (1 column) on desktop as requested */
@media (min-width: 900px) {
  .facts-grid {
    grid-template-columns: 1fr !important; /* single column */
    grid-auto-rows: auto;                   /* let rows size to content */
    gap: .6rem 0;                           /* vertical gap only */
  }

  .facts-grid .chip,
  .facts-grid .chip--long {
    width: 100%;            /* full-width pills */
    justify-content: flex-start; /* left align icon + text */
    padding-left: 12px;     /* align with card padding */
    padding-right: 12px;
  }
}

/* 0) Site-wide tokens */
:root{
  --page-max: 760px;   /* same as Home */
  --page-pad: 12px;    /* gentle side gutters */
}

/* 1) Header stays full-bleed, only adds gutters */
.header .container{
  max-width: 100% !important;
  padding-left: var(--page-pad) !important;
  padding-right: var(--page-pad) !important;
}

/* 2) Constrain ONLY the Gita content to page width */
.container.bgita-page,
.container.bhagavat-gita,
.container.verse-reader{
  max-width: var(--page-max);  /* was 920/960 */
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  padding-top: 0;              /* no extra gap under sticky header */
}

/* 3) Sacred surface (gradient block) spacing to match Home */
.bgita-wrapper.sacred-bg{
  max-width: var(--page-max);  /* was 920 */
  margin: 8px auto 14px;
  padding: 14px var(--page-pad);
  border-radius: 16px;
  overflow: hidden;
}

/* (optional) keep chapter grid breathing inside its accordion */
.accordion-content > .chapter-grid{ max-width: 100%; }

/* === Unified page width like Home === */
:root{ --page-max: 760px; --page-pad: 12px; }

/* Header: NOT full width; center content to page max */
.header .container{
  max-width: var(--page-max) !important;
  margin: 0 auto !important;
  padding-left: var(--page-pad) !important;
  padding-right: var(--page-pad) !important;
}

/* Sacred surface & inner containers (home-like width+gutters) */
.bgita-wrapper.sacred-bg{
  max-width: var(--page-max);
  margin: 8px auto 14px;
  padding: 14px var(--page-pad);
  border-radius: 16px;
}
.container.bgita-page,
.container.bhagavat-gita,
.container.verse-reader{
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* Chapter grid: no cramping */
.chapter-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* was tighter */
  gap: 14px 16px; /* more breathing room */
}
.chapter-card{
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;      /* prevent self-squeeze */
  padding: 1rem 1.1rem; /* slightly snugger padding */
}

/* Verse text: wrap safely (Tamil-friendly) */
.verse-text{
  hyphens: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* place at end of bhagavat_gita.css */
.facts-grid{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .8rem;
  align-items: center;
}
.facts-grid .chip{
  flex: 0 0 auto;      /* don't stretch/shrink */
  white-space: nowrap; /* keep each chip one line on desktop */
}
@media (max-width: 640px){
  .facts-grid .chip{ white-space: normal; } /* allow wrap on small screens */
}

/* Chips: prevent grid overflow on mobile */
.facts-grid > .chip{
  min-width: 0;              /* allow item to shrink within its track */
  max-width: 100%;
  box-sizing: border-box;
}

.chip-val{
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;   /* break anywhere if needed */
}

/* The long “கவனி …” chip: always fit the row without overflow */
.chip--long{
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

/* (optional) give chips a touch more room and tighter padding on small screens */
@media (max-width: 480px){
  .facts-grid{
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .5rem .6rem;
  }
  .chip{ padding: .35rem .55rem; }
}