/* ==========================================================================
   Vedic People v3 — content.css
   Biography/scripture ("content-mode") pages only. Loaded via
   functions.php when a page is NOT a hub page. Grantha's reader pages use
   their own grantha-reader.css (Phase 6) but share these .side-card /
   .toc-body class names so the component looks identical in both places.
   ========================================================================== */

.content-page{width:90%; margin:0 auto; padding:24px 0 34px;}

/* content-main is a normal block now (not a flex child) — .side-stack
   floats inside it, right after the H1, so .prose paragraphs wrap around
   it instead of reserving a whole reserved column for the page's full
   height. The clearfix keeps the float contained within content-main. */
.content-main{clear:both;}
.content-main::after{content:""; display:table; clear:both;}

/* Infobox + TOC — float top-right, max 375px wide, body text wraps
   around them; once the prose runs taller than the float, later
   paragraphs automatically use the full content width again. */
.side-stack{float:right; width:375px; max-width:375px; margin:0 0 24px 28px;}

.side-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); margin-bottom:14px;}
.side-card summary{display:flex; align-items:center; justify-content:space-between; padding:11px 15px; font:900 1.35rem var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); cursor:pointer; background:var(--paper-deep); border-bottom:1px solid var(--line); list-style:none;}
.side-card summary::-webkit-details-marker{display:none;}
.side-card summary svg{width:13px; height:13px; transition:transform .15s; flex:none;}
.side-card[open] summary svg{transform:rotate(180deg);}

/* Infobox */
.infobox__img{width:100%; height:auto; display:block; background:linear-gradient(160deg,#F0C64B,#D8542F);}
.infobox table{width:100%; border-collapse:collapse;}
.infobox td{padding:9px 15px; font:400 1.02rem var(--font-ui); border-top:1px solid var(--line-soft); vertical-align:top;}
.infobox tr:first-child td{border-top:none;}
.infobox td.k{color:var(--ink-soft); width:40%; font-size:1.15rem;}
.infobox td.v{font-size:1.25rem;}
.infobox td.v a{color:var(--green); font-weight:400; text-decoration:none;}
.infobox td.v a:hover{color:var(--vermilion); text-decoration:underline;}
.infobox td.v ul, .infobox td.v ol{margin:0; padding-left:18px;}

/* In-page Contents/TOC — nested <ul>, no numbers: a light grey bullet on
   leaf items, a chevron toggle (in place of the bullet) on any H2 that has
   H3 children. Every section starts collapsed; vp3-base.js toggles
   .expanded and aria-expanded on click. */
.toc-body{font:400 1.25rem var(--font-ui); padding:10px 15px 14px;}
.toc-body ul, .toc-body ol{list-style:none; margin:0; padding:0;}

/* Fallback for TOC markup this file doesn't control directly (Grantha's
   own book-level chapter list, passed through as raw $toc_html) — still
   no numbers, still a plain grey bullet, even without the .toc-row/
   .toc-item wrapper structure below. */
.toc-body li:not(.toc-item){position:relative; padding-left:16px; margin-bottom:8px;}
.toc-body li:not(.toc-item)::before{content:""; position:absolute; left:0; top:.65em; width:5px; height:5px; border-radius:50%; background:var(--ink-faint);}
.toc-body .toc-sublist{padding-left:22px; margin-top:6px; display:none;}
.toc-body li.toc-item.expanded > .toc-sublist{display:block;}
.toc-body li{margin-bottom:8px;}
.toc-body li:last-child{margin-bottom:0;}
.toc-body .toc-row{display:flex; align-items:center; gap:8px;}
.toc-body .toc-row::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--ink-faint); flex:none; margin-left:1px;}
.toc-body li.has-children > .toc-row::before{display:none;}
.toc-body li.toc-h3{font-size:.92em;}
.toc-body a{color:var(--ink); text-decoration:none; flex:1;}
.toc-body a:hover{color:var(--green);}

.toc-toggle{background:none; border:none; padding:2px; margin:0; cursor:pointer; color:var(--ink-faint); flex:none; display:flex;}
.toc-toggle svg{width:12px; height:12px; transition:transform .15s;}
.toc-toggle[aria-expanded="true"] svg{transform:rotate(90deg);}

/* Available-to-read tag (infobox language pills) */
.tag.available{background:var(--role-available-bg); border:1.4px solid var(--role-available-border); color:var(--role-available-color); display:inline-flex; align-items:center; gap:5px;}
.tag.available::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--role-available-dot); display:inline-block;}

/* Prose (page body content) */
.prose{font:400 var(--body-en)/1.5 var(--font-serif); font-weight:400; color:var(--ink);}
.prose p{margin:0 0 14px;}
.prose a{color:var(--green); text-decoration:underline; text-decoration-color:var(--green);}
.prose a:hover{color:var(--vermilion); text-decoration-color:var(--vermilion);}

blockquote.verse{margin:18px 0; padding:4px 0 4px 18px; border-left:3px solid var(--gold); font:italic 500 1.2rem/1.6 var(--font-serif); color:var(--ink-soft);}
blockquote.verse cite{display:block; font:400 .96rem var(--font-ui); font-style:normal; color:var(--ink-faint); margin-top:6px;}

/* Published/Updated dates live in the footer (see footer.php / base.css
   .footer-meta) — not repeated here. */

@media (max-width: 960px){
  .side-stack{float:none; width:100%; max-width:none; margin:0 0 20px;}
}