/* ============================================================
   vedanta.study — Main Stylesheet
   Design: Clean editorial, inspired by os.me
   Palette: Warm cream, saffron/brown accent
   Fonts: Playfair Display (headings) + Inter (body)
============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --bg:           #FAF8F5;
  --bg-surface:   #F0EDE7;
  --bg-card:      #FFFFFF;
  --border:       #E0D9D0;
  --border-light: #EDE8E2;
  --text:         #44362b;
  --text-muted:   #6B6560;
  --text-light:   #9B9590;
  --accent: #a95612;
  --accent-dark: #8F4A10;
  --accent-light: #FDF0E3;
  --accent-mid:   #965b20e3;
  --white:        #FFFFFF;
  --black:        #111111;

  /* Secondary accent — muted sage, for tags/secondary UI/chart accents
     alongside the warm brown primary without competing with it. */
  --accent2:       #6B7A5E;
  --accent2-dark:  #566349;
  --accent2-light: #EEF1E9;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-btn: 10px;  /* buttons: rounded but not a full pill — warm, still serious */

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow:     0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

  --shadow-soft: 0 2px 20px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 30px rgba(0, 0, 0, 0.1);
  --sattva-color: #90C695;
  --sattva-bg: #E8F5E9;
  --rajas-color: #E57373;
  --rajas-bg: #FFEBEE;
  --tamas-color: #616161;
  --tamas-bg: #EEEEEE;  

  --transition: 0.25s ease;
  --container:  1160px;
}

html.dark-mode {
  --bg:           #12110E !important;
  --bg-surface:   #1C1A17 !important;
  --bg-card:      #23201D !important;
  --border:       #423C36 !important;
  --border-light: #322E29 !important;
  --text:         #F5EFEB !important;
  --text-muted:   #C8BFB5 !important;
  --text-light:   #9C9388 !important;
  --accent:       #D97736 !important;
  --accent-dark:  #E8924E !important;
  --accent-light: #351C0C !important;
  --accent-mid:   #D97736e3 !important;
  --accent2:       #92A283 !important;
  --accent2-dark:  #AEBBA0 !important;
  --accent2-light: #232A1F !important;
  --white:        #23201D !important;
  --black:        #F5EFEB !important;
  --sattva-color: #72B87A !important;
  --sattva-bg:    #122415 !important;
  --rajas-color:  #E57373 !important;
  --rajas-bg:     #2E1010 !important;
  --tamas-color:  #A5A5A5 !important;
  --tamas-bg:     #222222 !important;
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.5);
  --shadow:       0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.7);
  --shadow-soft:  0 2px 20px rgba(0,0,0,0.4);
  --shadow-medium:0 4px 30px rgba(0,0,0,0.5);
}

html.dark-mode body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  color-scheme: dark;
}

html.dark-mode header,
html.dark-mode .header {
  background: rgba(18, 17, 14, 0.92) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

html.dark-mode .card,
html.dark-mode .blog-card,
html.dark-mode .movie-card,
html.dark-mode .research-card,
html.dark-mode .feature-card,
html.dark-mode .stat-card,
html.dark-mode .book-card,
html.dark-mode .modal-content {
  background-color: var(--bg-card) !important;
  border-color: var(--border-light) !important;
  color: var(--text) !important;
}

html.dark-mode .nav-link {
  color: var(--text-muted) !important;
}

html.dark-mode .nav-link:hover,
html.dark-mode .nav-link.active {
  color: var(--accent) !important;
}

html.dark-mode .announcement-bar {
  background: #1C1A17 !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}

html.dark-mode .footer {
  background: #0D0C0A !important;
  border-top-color: var(--border) !important;
  color: var(--text-muted) !important;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html.dark-mode .btn-secondary,
html.dark-mode .btn-ghost {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Comprehensive dark mode for all research subpages, texts & concept maps */
html.dark-mode .research-content,
html.dark-mode .article-body,
html.dark-mode .gita-chapter,
html.dark-mode .upanishad-content,
html.dark-mode .verse-box,
html.dark-mode .verse-container,
html.dark-mode .shloka-card,
html.dark-mode .mantra-box,
html.dark-mode .srt-content,
html.dark-mode .info-panel,
html.dark-mode .sidebar,
html.dark-mode .toc,
html.dark-mode .toc-container,
html.dark-mode .concept-panel {
  background-color: var(--bg-card) !important;
  border-color: var(--border-light) !important;
  color: var(--text) !important;
}

html.dark-mode .sanskrit,
html.dark-mode .sanskrit-text,
html.dark-mode .devanagari {
  color: #F8D7A8 !important;
}

html.dark-mode .translation,
html.dark-mode .translation-text,
html.dark-mode .purport,
html.dark-mode .purport-text,
html.dark-mode .commentary {
  color: #E8E2D9 !important;
}

html.dark-mode .breadcrumbs,
html.dark-mode .breadcrumb-item {
  color: var(--text-light) !important;
}
html.dark-mode .breadcrumbs a {
  color: var(--accent) !important;
}

html.dark-mode table,
html.dark-mode th,
html.dark-mode td {
  border-color: var(--border-light) !important;
  color: var(--text) !important;
}
html.dark-mode th {
  background-color: var(--bg-surface) !important;
}

/* ── Theme Dark Toggle Button (Website Header) ── */
.dark-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.92rem;
  line-height: 1;
  padding: 0;
  margin-left: 4px;
}
.dark-toggle:hover {
  background: var(--accent-light);
  color: var(--accent-dark);
  border-color: var(--accent);
  transform: scale(1.05);
}
.dark-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
.dark-toggle .icon-sun { display: none; }
.dark-toggle .icon-moon { display: inline-block; }
html.dark-mode .dark-toggle .icon-sun { display: inline-block; }
html.dark-mode .dark-toggle .icon-moon { display: none; }
html.dark-mode .dark-toggle {
  background: var(--bg-card);
  border-color: var(--border);
  color: #F5EFEB;
}
html.dark-mode .dark-toggle:hover {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }
input, textarea, select {
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
}

/* ── Layout ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0;
}
.section.bg-surface {
  background: var(--bg-surface);
}

/* ── Typography ── */
h1,h2,h3,h4,h5 { font-family: var(--font-heading); font-weight: 500; line-height: 1.25; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { line-height: 1.7; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  border-radius: var(--radius-btn);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: var(--transition);
  cursor: pointer;
}
.btn-primary {
  background: var(--text);
  color: var(--white);
  border: 1.5px solid var(--text);
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--text);
}
.btn-accent {
  background: var(--accent);
  color: var(--white);
  border: 1.5px solid var(--accent);
}
.btn-accent:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 9px 20px;
  font-size: 0.8rem;
}
.btn-ghost:hover {
  background: var(--accent);
  color: var(--white);
}

/* ── Announcement Bar ── */
.announcement-bar {
  background: var(--text);
  color: var(--white);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 0.85rem;
  position: relative;
  z-index: 1000;
}
.announcement-bar a {
  color: var(--accent-mid);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.announcement-bar a:hover { color: var(--white); }
.announcement-close {
  position: absolute;
  right: 20px;
  color: var(--white);
  font-size: 1.25rem;
  opacity: 0.6;
  transition: opacity var(--transition);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}
.announcement-close:hover { opacity: 1; }

/* ── Header / Navigation ── */
.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}

.header.scrolled {
  box-shadow: var(--shadow);
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.logo-text {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.logo-accent { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  padding: 7px 14px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
  border-radius: 100px;
  transition: var(--transition);
}
.nav-link:hover, .nav-link.active {
  color: var(--text);
  background: var(--bg-surface);
}
.nav-cta {
  background: var(--text);
  color: var(--white) !important;
  font-weight: 500;
  margin-left: 8px;
}
.nav-cta:hover { background: var(--accent) !important; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: var(--radius);
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

/* ── Hero Section ── */
.hero {
  padding: 0 0 0;
  border-bottom: 1px solid var(--border);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 64px;
}
.hero-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: var(--accent-light);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--text);
}
.hero-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-meta span { color: var(--border); }
.hero-excerpt {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 32px;
  line-height: 1.7;
  max-width: 480px;
}
.hero-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Online Class Banner ── */
.class-banner {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 32px 0;
}
.class-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.class-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  background: var(--accent-light);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
}
.class-banner-content h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.class-banner-content p {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 520px;
}

/* ── Section Headers ── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.section-link {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition);
}
.section-link:hover { color: var(--accent-dark); text-decoration: underline; }

/* ── Blog Cards ── */
.blogs-section { background: var(--bg); }
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
/* v24 · three-across rows (Latest Writings, What is Vedānta). The tablet and
   phone rules further down still take it to two and one column. */
.blogs-grid-3 { grid-template-columns: repeat(3, 1fr); }
.blog-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.blog-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-meta {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-card-category {
  background: var(--accent-light);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.blog-card h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 10px;
  color: var(--text);
}
.blog-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}
.blog-card-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}
.blog-card-link:hover { color: var(--accent-dark); }
.blog-card-link::after { content: '→'; }

/* ── YouTube Section ── */
.youtube-section { background: var(--bg-surface); }
.yt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.yt-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--text);
  position: relative;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.video-card {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.yt-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.yt-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: opacity var(--transition);
}
.yt-card:hover img { opacity: 0.85; }
.yt-play-btn {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.yt-play-btn::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 18px;
  border-color: transparent transparent transparent var(--text);
  margin-left: 3px;
}
.yt-card:hover .yt-play-btn {
  background: #FF0000;
}
.yt-card:hover .yt-play-btn::after {
  border-color: transparent transparent transparent white;
}
.yt-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%);
  padding: 16px;
  color: white;
  z-index: 2;
}
.yt-card-overlay h4 {
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.3;
}
.yt-card-placeholder {
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  padding: 16px;
}
.yt-section-footer {
  text-align: center;
}
.yt-subscribe-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}
.yt-subscribe-area p { color: var(--text-muted); font-size: 0.9rem; }
.btn-yt {
  background: #FF0000;
  color: white;
  border: none;
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  text-decoration: none;
}
.btn-yt:hover { background: #CC0000; }

/* Instagram */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.insta-card {
  aspect-ratio: 9/16;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background: var(--bg-soft);
}

.insta-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}

.insta-card:hover img {
  transform: scale(1.05);
}

.insta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: #fff;
  font-size: 0.85rem;
}

/* ── Books Section ── */
.books-section { background: var(--bg-surface); }
.books-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.book-card {
  display: flex;
  flex-direction: column;
}
.book-cover-wrap {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 6px 6px 24px rgba(0,0,0,0.18);
  margin-bottom: 20px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.book-cover-wrap:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow: 10px 14px 36px rgba(0,0,0,0.22);
}
.book-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-author {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 6px;
}
.book-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  line-height: 1.3;
}
.book-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.book-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.book-link {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  border: 1px solid var(--accent-light);
  background: var(--accent-light);
  padding: 5px 12px;
  border-radius: 100px;
  transition: var(--transition);
}
.book-link:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

/* ── Footer ── */
.footer {
  background: var(--text);
  color: var(--white);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand .logo-text { color: var(--white); }
.footer-brand .logo-accent { color: var(--accent-mid); }
.footer-brand p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-top: 12px;
  max-width: 320px;
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  transition: var(--transition);
  text-decoration: none;
}
.footer-social a:hover {
  border-color: var(--accent-mid);
  color: var(--accent-mid);
}
.footer-col h4 {
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}
.footer-col ul li {
  margin-bottom: 10px;
}
.footer-col ul a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  transition: var(--transition);
  text-decoration: none;
}
.footer-col ul a:hover { color: var(--white); }

/* ── Newsletter / Contact Form (Footer) ── */
.footer-form-section {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin-bottom: 48px;
}
.footer-form-section h3 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  color: var(--white);
}
.footer-form-section p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
}
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.form-input {
  padding: 11px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-size: 0.9rem;
  transition: var(--transition);
  width: 100%;
}
.form-input::placeholder { color: rgba(255,255,255,0.3); }
.form-input:focus { border-color: var(--accent-mid); background: rgba(255,255,255,0.12); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}
.footer-bottom a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 0.8rem;
  transition: var(--transition);
}
.footer-bottom a:hover { color: var(--white); }

/* ── Modal / Popup ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.modal-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px;
  max-width: 480px;
  width: 100%;
  position: relative;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s ease;
  box-shadow: var(--shadow-lg);
}
.modal-overlay.active .modal-box {
  transform: translateY(0) scale(1);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 1.5rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition);
}
.modal-close:hover { color: var(--text); }
.modal-badge {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.modal-box h3 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  line-height: 1.25;
}
.modal-box > p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-form input,
.modal-form select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color var(--transition);
}
.modal-form input:focus,
.modal-form select:focus {
  border-color: var(--accent);
}
.modal-form input::placeholder { color: var(--text-light); }
.modal-form select { color: var(--text); }
.modal-form .btn {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 0.9rem;
  border-radius: var(--radius);
}
.modal-success {
  display: none;
  text-align: center;
  padding: 20px 0;
}
.modal-success.show { display: block; }
.modal-success-icon {
  width: 56px;
  height: 56px;
  background: #e8f5e9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.5rem;
}
.modal-success h4 { font-size: 1.25rem; margin-bottom: 8px; }
.modal-success p { font-size: 0.875rem; color: var(--text-muted); }

/* ── Blog Page ── */
.page-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 56px;
}
.page-hero-inner {
  max-width: 720px;
}
.page-hero .section-label { margin-bottom: 10px; }
.page-hero h1 { margin-bottom: 14px; }
.page-hero p { color: var(--text-muted); font-size: 1.05rem; }

.blog-search-bar {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 480px;
  margin-top: 28px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: var(--white);
  overflow: hidden;
  transition: border-color var(--transition);
}
.blog-search-bar:focus-within { border-color: var(--accent); }
.search-icon {
  padding: 0 16px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
.blog-search-bar input {
  flex: 1;
  padding: 12px 16px 12px 0;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: var(--text);
}
.blog-search-bar input::placeholder { color: var(--text-light); }

.blogs-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 56px;
}

.blog-card-wide {
  grid-column: 1 / -1;
}
.blog-card-wide .blog-card-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.blog-card-wide .blog-card-img {
  aspect-ratio: unset;
  min-height: 260px;
}
.blog-card-wide .blog-card-body {
  padding: 32px;
}
.blog-card-wide .blog-card h3 {
  font-size: 1.5rem;
}

.no-results {
  display: none;
  text-align: center;
  padding: 48px;
  color: var(--text-muted);
  font-size: 0.95rem;
  grid-column: 1 / -1;
}
.no-results.show { display: block; }

/* ── Blog Post Page ── */
.post-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.post-header {
  margin-bottom: 36px;
}
.post-header .section-label { margin-bottom: 14px; }
.post-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 16px;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.post-meta-dot { color: var(--border); }
.post-hero-img {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  margin-bottom: 40px;
}
.post-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text);
}
.post-body h2 {
  font-size: 1.6rem;
  margin: 36px 0 14px;
}
.post-body h3 {
  font-size: 1.2rem;
  margin: 28px 0 10px;
}
.post-body p { margin-bottom: 22px; }
.post-body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-light);
  padding: 20px 24px;
  margin: 28px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--accent-dark);
}
.post-body ul, .post-body ol {
  padding-left: 24px;
  margin-bottom: 22px;
}
.post-body ul li, .post-body ol li {
  list-style: disc;
  margin-bottom: 8px;
}
.post-body ol li { list-style: decimal; }
.post-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 32px 0;
}
.tag {
  background: var(--bg-surface);
  color: var(--text-muted);
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid var(--border);
}
.post-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 36px 0;
}
.author-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 40px;
}
.author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-info h4 { font-size: 1rem; margin-bottom: 4px; }
.author-info p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.related-posts h2 { font-size: 1.4rem; margin-bottom: 24px; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* ── About Page ── */
.about-hero {
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}
.about-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-meta {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 14px;
}
.about-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 8px;
}
.about-tagline {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-muted);
  font-family: var(--font-heading);
  margin-bottom: 22px;
  line-height: 1.5;
}
.about-bio {
  font-size: 0.975rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 28px;
}
.about-image-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow-lg);
}
.about-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.stat-item {
  text-align: left;
}
.stat-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.about-section { padding: 64px 0; border-bottom: 1px solid var(--border); }
.about-section:last-of-type { border-bottom: none; }
.topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
}
.topic-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.topic-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.topic-category {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 12px;
}
.topic-card h4 { font-size: 0.95rem; margin-bottom: 10px; }
.topic-card ul { padding-left: 0; }
.topic-card ul li {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.topic-card ul li::before {
  content: '–';
  color: var(--accent);
  font-weight: 600;
}
.institutions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.institution-tag {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}
.about-contact {
  background: var(--text);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 48px;
  text-align: center;
  margin: 56px 0;
}
.about-contact h2 { font-size: 2rem; margin-bottom: 10px; }
.about-contact p {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  margin-bottom: 28px;
}
.contact-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.contact-link-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: var(--transition);
  text-decoration: none;
}
.contact-link-item:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Scroll Animation ── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* ── Utilities ── */
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   Personality Chart Page
   ======================================== */
.chart-section {
  padding: 60px 0;
  background-color: var(--white);
}

.chart-intro {
  max-width: 800px;
  margin: 0 auto 50px;
  text-align: center;
}

.chart-intro p {
  font-size: 1.1rem;
  line-height: 1.8;
}

.personality-chart {
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--bg-cream);
  border-radius: 12px;
  padding: 40px;
  box-shadow: var(--shadow-soft);
}

.chart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

.chart-table th,
.chart-table td {
  padding: 15px 20px;
  text-align: center;
  border: 1px solid var(--border-light);
}

.chart-table thead th {
  background-color: var(--bg-warm);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.chart-table th.sattva-header {
  background-color: var(--sattva-bg);
  color: #2E7D32;
}

.chart-table th.rajas-header {
  background-color: var(--rajas-bg);
  color: #C62828;
}

.chart-table th.tamas-header {
  background-color: var(--tamas-bg);
  color: #424242;
}

.chart-table tbody th {
  text-align: left;
  font-weight: 500;
  background-color: var(--white);
}

.chart-table tbody td {
  background-color: var(--white);
}

.chart-table input[type="number"] {
  width: 60px;
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  text-align: center;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: var(--transition);
}

.chart-table input[type="number"]:focus {
  outline: none;
  border-color: var(--primary-color);
}

.chart-table input.sattva-input:focus {
  border-color: var(--sattva-color);
  box-shadow: 0 0 0 3px rgba(144, 198, 149, 0.2);
}

.chart-table input.rajas-input:focus {
  border-color: var(--rajas-color);
  box-shadow: 0 0 0 3px rgba(229, 115, 115, 0.2);
}

.chart-table input.tamas-input:focus {
  border-color: var(--tamas-color);
  box-shadow: 0 0 0 3px rgba(97, 97, 97, 0.2);
}

.row-total {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
}

.row-total.valid {
  color: #2E7D32;
}

.row-total.invalid {
  color: #C62828;
}

.chart-table tfoot td {
  background-color: var(--bg-warm);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}

.chart-table tfoot td.sattva-result {
  background-color: var(--sattva-bg);
  color: #2E7D32;
}

.chart-table tfoot td.rajas-result {
  background-color: var(--rajas-bg);
  color: #C62828;
}

.chart-table tfoot td.tamas-result {
  background-color: var(--tamas-bg);
  color: #424242;
}

.chart-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.calculate-btn,
.reset-btn {
  padding: 14px 32px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.calculate-btn {
  background-color: var(--primary-color);
  color: var(--black);
  border: none;
}

.calculate-btn:hover {
  background-color: var(--primary-dark);
}

.reset-btn {
  background-color: var(--white);
  color: var(--text-medium);
  border: 1px solid var(--border-light);
}

.reset-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.chart-results {
  margin-top: 40px;
  padding: 30px;
  background-color: var(--white);
  border-radius: 8px;
  display: none;
}

.chart-results.visible {
  display: block;
}

.chart-results h3 {
  text-align: center;
  margin-bottom: 30px;
}

.results-bars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.result-bar {
  display: flex;
  align-items: center;
  gap: 20px;
}

.result-label {
  width: 100px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
}

.result-label.sattva {
  color: #2E7D32;
}

.result-label.rajas {
  color: #C62828;
}

.result-label.tamas {
  color: #424242;
}

.bar-container {
  flex: 1;
  height: 30px;
  background-color: var(--bg-cream);
  border-radius: 15px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 15px;
  transition: width 0.5s ease;
}

.bar-fill.sattva {
  background-color: var(--sattva-color);
}

.bar-fill.rajas {
  background-color: var(--rajas-color);
}

.bar-fill.tamas {
  background-color: var(--tamas-color);
}

.result-percentage {
  width: 60px;
  text-align: right;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}

.error-message {
  background-color: #FFEBEE;
  color: #C62828;
  padding: 15px 20px;
  border-radius: 8px;
  margin-top: 20px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  display: none;
}

.error-message.visible {
  display: block;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .blogs-grid, .yt-grid, .insta-grid, .books-grid { grid-template-columns: repeat(2, 1fr); }
  .blogs-page-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-card-wide .blog-card-inner { grid-template-columns: 1fr; }
  .blog-card-wide { grid-column: auto; }
  .topics-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-form { grid-template-columns: 1fr 1fr; }
  .contact-form .btn { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .container { padding: 0 18px; }

  /* Header */
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 4px;
    z-index: 888;
  }
  .nav.open { display: flex; }
  .nav-link { padding: 12px 16px; border-radius: var(--radius); }
  .nav-cta { margin-left: 0; text-align: center; justify-content: center; }
  .menu-toggle { display: flex; }
  .header { position: sticky; }

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero-image { order: -1; }
  .hero-title { font-size: 2rem; }

  .class-banner-inner { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* Grids → single column */
  .blogs-grid { grid-template-columns: 1fr; }
  .yt-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .books-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .blogs-page-grid { grid-template-columns: 1fr; }
  .topics-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .related-grid { grid-template-columns: 1fr; }
  .footer-form-section { padding: 28px 20px; }
  .contact-form { grid-template-columns: 1fr; }
  .about-contact { padding: 32px 20px; }
  .modal-box { padding: 28px 20px; }
}

@media (max-width: 480px) {
  .books-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .announcement-close { display: none; }
  .about-stats { gap: 20px; }
}

/* ============================================================
   Added for shared header/footer include system
============================================================ */
.header-spacer {
  height: 28px;
}
@media (max-width: 860px) {
  .header-spacer { height: 16px; }
}

.nav-login {
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-login i { font-size: 0.8em; }
.nav-login:hover, .nav-login.active {
  border-color: var(--accent);
}

/* Books section sub-headings */
.books-subsection {
  margin-bottom: 48px;
}
.books-subsection:last-child { margin-bottom: 0; }
.books-subhead {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Landing-page category groups (Research / Activity landings) */
.landing-category {
  margin-bottom: 56px;
}
.landing-category:last-child { margin-bottom: 0; }
.landing-category-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}
.landing-category-head h2 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.landing-category-head span {
  font-size: 0.85rem;
  color: var(--text-light);
}

/* ============================================================
   Page sub-navigation (volumes / chapters / parts within a
   single research section) — sits directly below the shared
   site header, keeps its own links out of the main site menu.
============================================================ */
.page-subnav {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.page-subnav .container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.page-subnav .subnav-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-right: 8px;
  white-space: nowrap;
}
.page-subnav a {
  padding: 6px 13px;
  font-size: 0.85rem;
  border-radius: 100px;
  color: var(--text-muted);
  transition: var(--transition);
  white-space: nowrap;
}
.page-subnav a:hover,
.page-subnav a.active {
  background: var(--white);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* ── Page sub-navigation: breadcrumb variant ──────────────────
   Used on every page inside /research, /blogs, and /activity to
   show "Section / Page" with an optional row of related links. */
.page-subnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0;
}
.page-subnav-crumb {
  font-size: 0.82rem;
  color: var(--text-light);
}
.page-subnav-crumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.page-subnav-crumb a:hover {
  color: var(--accent-dark);
}
.page-subnav-crumb span {
  color: var(--text);
  font-weight: 600;
}
.page-subnav-links {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.page-subnav-links a {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
}
.page-subnav-links a:hover {
  color: var(--accent-dark);
}
.page-subnav-links a.page-subnav-cta {
  color: var(--accent-dark);
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 100px;
}
.page-subnav-links a.page-subnav-cta:hover {
  background: var(--accent);
  color: #fff;
}

/* ============================================================
   DIRECTORY LANDING — Featured strip + collapsible categories
   ------------------------------------------------------------
   For landing pages that list many pages as cards
   (research.html, activity.html) where the list has grown too
   long to scan.

   These rules add no card styling of their own. The cards stay
   exactly as they are — .blog-card inside .blogs-page-grid —
   so Featured and every category share one format. All this
   layer does is wrap each category in a heading you can click
   and hide the overflow cards until you do.

   ── MARKUP: FEATURED STRIP ───────────────────────────────────

   <section class="featured-strip">
     <div class="container">
       <div class="section-header">
         <div>
           <span class="section-label">Start here</span>
           <h2 class="section-title">Featured</h2>
         </div>
       </div>
       <div class="blogs-page-grid">
         <article class="blog-card fade-up"> ... </article>   <!-- unchanged -->
       </div>
     </div>
   </section>

   <div class="section-partition" role="presentation"></div>

   ── MARKUP: A COLLAPSIBLE CATEGORY ───────────────────────────

   <section class="collapse-section">
     <button class="collapse-head" type="button"
             aria-expanded="false" aria-controls="grid-foundations">
       <span class="collapse-title">Scriptural Foundations</span>
       <span class="collapse-count">9</span>
       <span class="collapse-sub">Optional one-line description</span>
       <span class="collapse-toggle"></span>
     </button>
     <div class="blogs-page-grid collapse-grid" id="grid-foundations">
       <article class="blog-card fade-up is-pinned"> ... </article>  <!-- always visible -->
       <article class="blog-card fade-up"> ... </article>            <!-- hidden until open -->
     </div>
   </section>

   Note both classes on the grid: .blogs-page-grid supplies the
   layout you already have, .collapse-grid is only the hook these
   rules target.

   ── HOW TO CHOOSE THE 3 CARDS SHOWN BY DEFAULT ───────────────

   MODE A (default, and what research.html uses) — PINNED CARDS.
   Add  is-pinned  to whichever three cards should stay visible
   while the category is collapsed. They may sit anywhere in the
   list; the collapsed row renders them in DOM order, so the
   pinned card highest in the markup leads.

   TO SHOW TWO ROWS INSTEAD OF ONE: the grid is 3 across on
   desktop, so pin 6 cards instead of 3. That is the entire
   change — no attribute to edit, and nothing is capped.

   MODE B — AUTOMATIC (nothing to pin by hand).
   Add  auto-preview  to the <section> and set data-rows:
       <section class="collapse-section auto-preview" data-rows="1">   → first 3
       <section class="collapse-section auto-preview" data-rows="2">   → first 6
   Mode B ignores is-pinned. Use one mode or the other per
   category, never both.

   ── CATEGORIES WITH 3 OR FEWER CARDS ─────────────────────────
   Nothing to hide, so they carry  is-static is-open  and every
   card is pinned; the toggle removes itself and the heading
   stops behaving like a button. If such a category later grows
   past 3 cards, delete  is-static is-open  and un-pin the
   extras.

   ── SCRIPT ───────────────────────────────────────────────────

   document.querySelectorAll('.collapse-section:not(.is-static) .collapse-head')
     .forEach(function (btn) {
       btn.addEventListener('click', function () {
         var sec  = btn.closest('.collapse-section');
         var open = sec.classList.toggle('is-open');
         btn.setAttribute('aria-expanded', open ? 'true' : 'false');
       });
     });
============================================================ */

/* ── Featured strip ── */
.featured-strip {
  background: var(--bg-surface);
  padding: 48px 0 56px;
}
.featured-strip .blogs-page-grid { margin-bottom: 0; }

/* ── Partition between Featured and the categories below ── */
.section-partition {
  height: 1px;
  background: var(--border);
  position: relative;
  margin: 0 0 8px;
}
.section-partition::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 72px;
  height: 9px;
  margin-left: -36px;
  background: var(--bg);
  border-bottom: 3px solid var(--accent);
}

/* ── Collapsible category ── */
.collapse-section {
  border-bottom: 1px solid var(--border);
  padding: 30px 0;
}
.collapse-section:last-of-type { border-bottom: none; }

.collapse-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 0 24px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.collapse-section.is-static .collapse-head { cursor: default; }

.collapse-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.collapse-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 2px 10px;
  line-height: 1.5;
}

.collapse-sub {
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 400;
}

/* Chevron + label, pushed to the right edge */
.collapse-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
  transition: color var(--transition);
}
.collapse-toggle::before { content: 'Show all'; }
.collapse-section.is-open .collapse-toggle::before { content: 'Show less'; }
.collapse-toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}
.collapse-section.is-open .collapse-toggle::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.collapse-head:hover .collapse-toggle { color: var(--accent-dark); }
.collapse-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
/* Categories with nothing to hide lose the control entirely */
.collapse-section.is-static .collapse-toggle { display: none; }

/* Grid hook only — layout still comes from .blogs-page-grid */
.collapse-grid { margin-bottom: 0; }

/* MODE A — pinned cards survive the collapse, the rest hide */
.collapse-section:not(.is-open) .collapse-grid > *:not(.is-pinned) {
  display: none;
}

/* MODE B — .auto-preview: first N in DOM order, N from data-rows */
.collapse-section.auto-preview:not(.is-open) .collapse-grid > * {
  display: flex;
}
.collapse-section.auto-preview:not(.is-open) .collapse-grid > *:nth-child(n+4) {
  display: none;
}
.collapse-section.auto-preview[data-rows="2"]:not(.is-open) .collapse-grid > *:nth-child(n+4) {
  display: flex;
}
.collapse-section.auto-preview[data-rows="2"]:not(.is-open) .collapse-grid > *:nth-child(n+7) {
  display: none;
}

/* ── Search filtering ───────────────────────────────────────
   While the search box holds text, body gets .is-searching:
   every matching card shows regardless of pin state or collapse,
   non-matching cards and emptied categories drop out, and the
   Featured strip steps aside so results aren't buried.      */
body.is-searching .collapse-grid > *            { display: flex !important; }
body.is-searching .collapse-grid > *.is-hidden  { display: none !important; }
.blog-card.is-hidden,
body.is-searching .collapse-section.is-hidden,
body.is-searching .featured-strip,
body.is-searching .section-partition,
body.is-searching .collapse-toggle { display: none !important; }

.search-empty {
  display: none;
  text-align: center;
  padding: 48px 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.search-empty.show { display: block; }

/* ── Responsive ──
   .blogs-page-grid drops to 2 columns at 1024 and 1 at 768, so
   "one row" changes meaning. Mode B is re-cut below to keep the
   row count honest. Mode A is deliberately left alone: a pinned
   card is pinned because it matters, not because it fit a row. */
@media (max-width: 1024px) {
  .collapse-section.auto-preview:not(.is-open) .collapse-grid > *:nth-child(n+3) {
    display: none;
  }
  .collapse-section.auto-preview[data-rows="2"]:not(.is-open) .collapse-grid > *:nth-child(n+3) {
    display: flex;
  }
  .collapse-section.auto-preview[data-rows="2"]:not(.is-open) .collapse-grid > *:nth-child(n+5) {
    display: none;
  }
}

@media (max-width: 768px) {
  .featured-strip { padding: 34px 0 40px; }
  .collapse-section { padding: 22px 0; }
  .collapse-head { padding-bottom: 18px; gap: 9px; }
  .collapse-title { font-size: 1.12rem; }
  .collapse-sub { display: none; }
  .collapse-toggle::before { content: 'All'; }
  .collapse-section.is-open .collapse-toggle::before { content: 'Less'; }

  .collapse-section.auto-preview:not(.is-open) .collapse-grid > *:nth-child(n+2) {
    display: none;
  }
  .collapse-section.auto-preview[data-rows="2"]:not(.is-open) .collapse-grid > *:nth-child(n+2) {
    display: flex;
  }
  .collapse-section.auto-preview[data-rows="2"]:not(.is-open) .collapse-grid > *:nth-child(n+3) {
    display: none;
  }
}

/* ── Password Visibility Toggle ── */
.pwd-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
.pwd-input-wrap input {
  width: 100% !important;
  padding-right: 42px !important;
  box-sizing: border-box !important;
}
.pwd-toggle-btn {
  position: absolute !important;
  right: 8px !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-light, #8C827A) !important;
  cursor: pointer !important;
  padding: 6px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  transition: color 0.15s ease !important;
  z-index: 3 !important;
}
.pwd-toggle-btn:hover {
  color: var(--accent, #A95612) !important;
}



/* ══════════════════════════════════════════════════════════════
   v20.0.9 · Install as an app
   Lives in styles.css rather than app.css because both the site and
   the app load this one, and the button and its instructions sheet
   are the same on either side.
   ══════════════════════════════════════════════════════════════ */
.pwa-install{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:9999px; cursor:pointer;
  border:1px solid var(--accent, #7D562D);
  background:transparent; color:var(--accent, #7D562D);
  font-family:inherit; font-size:0.82rem; font-weight:600; line-height:1.5;
  white-space:nowrap; transition:background .15s ease, color .15s ease;
}
.pwa-install:hover{ background:var(--accent, #7D562D); color:#fff }
.pwa-install[hidden]{ display:none !important }
.pwa-install svg{ width:15px; height:15px; flex:none }

/* ── The manual instructions ────────────────────────────────────
   iOS has no programmatic install, so this is not a fallback for a
   failure — it is the only route that exists there, and it should
   look as deliberate as the one-tap path does elsewhere. */
.pwa-sheet-ground{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(28,22,16,.45); backdrop-filter:blur(3px);
  padding:0;
}
.pwa-sheet-ground[hidden]{ display:none !important }
@media (min-width:640px){
  .pwa-sheet-ground{ align-items:center; padding:24px }
}
.pwa-sheet{
  position:relative; width:100%; max-width:460px;
  background:var(--bg-card, #fff); color:var(--text, #2B2622);
  border-radius:22px 22px 0 0; padding:26px 24px 30px;
  box-shadow:0 -8px 40px rgba(0,0,0,.22);
  max-height:88vh; overflow-y:auto;
}
@media (min-width:640px){
  .pwa-sheet{ border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,.28) }
}
.pwa-sheet-x{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border, #E0D9D0); background:var(--bg-surface, #F5F1EA);
  color:var(--text-muted, #6B6560); font-size:1.15rem; line-height:1;
  cursor:pointer; display:grid; place-items:center;
}
.pwa-sheet h3{
  font-family:var(--font-heading, Georgia, serif); font-weight:400;
  font-size:1.3rem; margin:0 34px 6px 0;
}
.pwa-sheet-sub{ font-size:.88rem; line-height:1.6; color:var(--text-muted, #6B6560); margin:0 0 18px }
.pwa-steps{ margin:0; padding:0 0 0 4px; list-style:none; counter-reset:pwa }
.pwa-steps li{
  counter-increment:pwa; position:relative; padding:0 0 16px 40px;
  font-size:.92rem; line-height:1.6;
}
.pwa-steps li::before{
  content:counter(pwa); position:absolute; left:0; top:-1px;
  width:26px; height:26px; border-radius:50%;
  background:var(--accent-light, #FFCA98); color:var(--accent-dark, #623F18);
  font-size:.8rem; font-weight:700; display:grid; place-items:center;
}
.pwa-steps li:last-child{ padding-bottom:6px }
.pwa-sheet-note{
  font-size:.8rem; line-height:1.55; color:var(--text-light, #7A7268);
  margin:10px 0 0; padding-top:14px; border-top:1px solid var(--border-light, #EFE9E1);
}

/* ══════════════════════════════════════════════════════════════
   v22.0.3 · BUTTONS — one system for the website, Sopānam and Gurukul.

   Elegant, glossy, quiet. Every button is a rounded pill (or a circle when
   it holds only an icon). Nothing is filled with solid brown or bright
   peach any more:

     · PRIMARY   a soft wash of the accent, accent-dark text, a hairline
                 border and a faint glass highlight across the top.
     · QUIET     the same glass on the card colour, a neutral border.
     · SELECTED  chips, tabs and toggles that are "on": a lighter shade of
                 the same accent, never a solid fill.
     · DANGER    the primary recipe in terracotta.

   This block sits at the end of styles.css in all three folders (common/,
   app/assets/css/, course/assets/css/) — identical copies, because each
   folder is self-contained. Selectors carry `html body` so they win over
   the older, more specific rules in app.css, course.css and the page CSS
   loaded after this file.
══════════════════════════════════════════════════════════════ */
:root{
  --b-gloss: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 48%, rgba(255,255,255,0) 100%);
  --b-tone:        color-mix(in srgb, var(--accent) 12%, #fff);
  --b-tone-hover:  color-mix(in srgb, var(--accent) 8%,  #fff);
  --b-tone-border: color-mix(in srgb, var(--accent) 22%, transparent);
  --b-tone-text:   var(--accent-dark, #623F18);
  --b-quiet:       var(--bg-card, #fff);
  --b-quiet-hover: color-mix(in srgb, var(--accent) 5%, var(--bg-card, #fff));
  --b-quiet-border: color-mix(in srgb, var(--text) 13%, transparent);
  --b-shadow:      inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(60,40,20,.06), 0 6px 14px -10px rgba(60,40,20,.35);
  --b-shadow-hover:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(60,40,20,.06), 0 10px 20px -12px rgba(60,40,20,.38);
  --sel-bg:        color-mix(in srgb, var(--accent) 10%, var(--bg-card, #fff));
  --sel-hover:     color-mix(in srgb, var(--accent) 6%,  var(--bg-card, #fff));
  --sel-border:    color-mix(in srgb, var(--accent) 30%, transparent);
  --sel-text:      var(--accent-dark, #623F18);
  --b-danger:      #A3443F;
}
html.dark-mode{
  --b-gloss: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 50%, rgba(255,255,255,0) 100%);
  --b-tone:        color-mix(in srgb, var(--accent) 24%, var(--bg-card, #23201D));
  --b-tone-hover:  color-mix(in srgb, var(--accent) 32%, var(--bg-card, #23201D));
  --b-tone-border: color-mix(in srgb, var(--accent) 42%, transparent);
  --b-tone-text:   #F2D4B4;
  --b-quiet-hover: color-mix(in srgb, var(--accent) 12%, var(--bg-card, #23201D));
  --b-quiet-border: color-mix(in srgb, #fff 14%, transparent);
  --b-shadow:      inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.3);
  --b-shadow-hover:inset 0 1px 0 rgba(255,255,255,.1), 0 6px 16px -8px rgba(0,0,0,.6);
  --sel-bg:        color-mix(in srgb, var(--accent) 22%, var(--bg-card, #23201D));
  --sel-hover:     color-mix(in srgb, var(--accent) 14%, var(--bg-card, #23201D));
  --sel-border:    color-mix(in srgb, var(--accent) 50%, transparent);
  --sel-text:      #F2D4B4;
  --b-danger:      #E08A84;
}

/* ── Shape: every button is round ─────────────────────────── */
html body :is(.btn, .btn-accent, .btn-primary, .btn-outline, .btn-ghost, .btn-secondary, .btn-filter,
  .btn-outline-sm, .btn-mini, .mini-btn, .choice-btn, .nav-btn, .action-pill, .tag-save,
  .gk-done-btn, .gk-navbtn, .gk-linkbtn.danger, .gk-linkbtn.is-icon, .rev-btn, .cust-mode-btn,
  .thought-today-btn, .ref-chip, .map-chip, .jr-chip, .rv-chip, .level-chip, .fbf-b,
  .pw-quick button, .qa-hints button, .gk-blk-tools button, .fb-kinds span, .install-tab-btn,
  .calculate-btn, .reset-btn, .verse-nav-btn, .app-modal .close, .version-modal-close){
  border-radius: 999px !important;
}

/* ── PRIMARY ───────────────────────────────────────────────── */
html body :is(.btn-accent, .btn.btn-accent, .btn-primary, .btn.btn-primary, .action-pill, .tag-save,
  .gk-done-btn, .calculate-btn, .ob-cta){
  background: var(--b-gloss), var(--b-tone) !important;
  color: var(--b-tone-text) !important;
  border: 1px solid var(--b-tone-border) !important;
  box-shadow: var(--b-shadow) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
html body :is(.btn-accent, .btn-primary, .action-pill, .tag-save, .gk-done-btn, .calculate-btn, .ob-cta):hover{
  background: var(--b-gloss), var(--b-tone-hover) !important;
  border-color: color-mix(in srgb, var(--accent) 32%, transparent) !important;
  box-shadow: var(--b-shadow-hover) !important;
  color: var(--b-tone-text) !important;
  transform: translateY(-1px);
}
html body :is(.btn-accent, .btn-primary, .action-pill, .tag-save, .gk-done-btn) :is(i, svg){ color: inherit !important }
html body :is(.btn-accent, .gk-done-btn, .tag-save, .btn-primary):is(:disabled, [disabled]){ opacity: .5; transform: none }
html body .gk-done-btn.is-done{
  background: var(--b-gloss), color-mix(in srgb, var(--sattva-color, #4B9862) 12%, #fff) !important;
  color: var(--sattva-color, #2E7D46) !important;
  border-color: color-mix(in srgb, var(--sattva-color, #4B9862) 30%, transparent) !important;
}

/* ── QUIET ─────────────────────────────────────────────────── */
html body :is(.btn-ghost, .btn.btn-ghost, .btn-outline, .btn.btn-outline, .btn-secondary, .btn-outline-sm,
  .gk-navbtn, .rev-btn, .thought-today-btn, .reset-btn, .btn-mini, .mini-btn, .install-tab-btn){
  background: var(--b-gloss), var(--b-quiet) !important;
  color: var(--text) !important;
  border: 1px solid var(--b-quiet-border) !important;
  box-shadow: var(--b-shadow) !important;
  text-decoration: none !important;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
}
html body :is(.btn-ghost, .btn-outline, .btn-secondary, .btn-outline-sm, .gk-navbtn, .rev-btn,
  .thought-today-btn, .reset-btn, .btn-mini, .mini-btn, .install-tab-btn):hover{
  background: var(--b-gloss), var(--b-quiet-hover) !important;
  border-color: var(--b-tone-border) !important;
  color: var(--b-tone-text) !important;
  box-shadow: var(--b-shadow-hover) !important;
  transform: translateY(-1px);
}

/* ── Link-style and icon-only buttons in the course editor ──── */
html body .gk-linkbtn{ border-radius: 999px; padding: 6px 12px; transition: background .18s, color .18s }
html body .gk-linkbtn:hover{ background: var(--sel-hover); }
html body .gk-linkbtn.is-icon{
  width: 34px; height: 34px; padding: 0 !important; justify-content: center; flex: none;
  background: var(--b-gloss), var(--b-quiet) !important;
  border: 1px solid var(--b-quiet-border) !important; box-shadow: var(--b-shadow);
}

/* ── DANGER ────────────────────────────────────────────────── */
html body :is(.gk-linkbtn.danger, .btn-ghost.danger, .gk-navbtn.danger, .btn-danger, .gk-blk-tools button.danger){
  color: var(--b-danger) !important;
}
html body :is(.gk-linkbtn.danger:not(.is-icon), .btn-ghost.danger, .gk-navbtn.danger, .btn-danger){
  background: var(--b-gloss), color-mix(in srgb, var(--b-danger) 7%, var(--bg-card, #fff)) !important;
  border: 1px solid color-mix(in srgb, var(--b-danger) 22%, transparent) !important;
}
html body :is(.gk-linkbtn.danger, .btn-ghost.danger, .gk-navbtn.danger, .btn-danger):hover{
  background: var(--b-gloss), color-mix(in srgb, var(--b-danger) 12%, var(--bg-card, #fff)) !important;
  border-color: color-mix(in srgb, var(--b-danger) 35%, transparent) !important;
  color: var(--b-danger) !important;
}

/* ── SELECTED — chips, tabs, toggles that are "on" ─────────── */
html body .fb-kinds input:checked + span,
html body :is(.ref-chip, .jr-chip, .rv-chip, .fbf-b, .map-chip).is-on,
html body .pw-quick button.is-on,
html body .cust-mode-btn.active,
html body .level-chip.current,
html body .chips input:checked + span{
  background: var(--b-gloss), var(--sel-bg) !important;
  color: var(--sel-text) !important;
  border-color: var(--sel-border) !important;
  box-shadow: var(--b-shadow) !important;
  font-weight: 600;
}
html body .fb-kinds span{ background: var(--b-gloss), var(--b-quiet); box-shadow: var(--b-shadow); }
html body .fb-kinds label:hover span,
html body :is(.qa-hints button, .ref-chip, .map-chip, .jr-chip, .rv-chip, .fbf-b, .pw-quick button, .gk-blk-tools button):hover{
  background: var(--sel-hover) !important;
  color: var(--sel-text) !important;
  border-color: var(--sel-border) !important;
}

/* ── Close and icon circles ────────────────────────────────── */
html body :is(.app-modal .close, .version-modal-close){
  background: var(--b-gloss), color-mix(in srgb, var(--bg-card, #fff) 70%, transparent);
  border: 1px solid var(--b-quiet-border);
}

html body :is(.btn, .btn-accent, .btn-ghost, .btn-outline, .btn-primary, .gk-done-btn, .gk-navbtn,
  .gk-linkbtn, .action-pill, .tag-save, .rev-btn, .fb-kinds span):focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent) !important;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  html body :is(.btn, .btn-accent, .btn-ghost, .gk-done-btn, .gk-navbtn, .action-pill, .tag-save):hover{ transform: none }
}

/* ── The cookie banner and the nav's Contact pill join the same family ── */
html body #cc-main{
  --cc-btn-border-radius: 999px;
  --cc-btn-primary-bg: var(--b-tone) !important;
  --cc-btn-primary-color: var(--b-tone-text) !important;
  --cc-btn-primary-border-color: var(--b-tone-border) !important;
  --cc-btn-primary-hover-bg: var(--b-tone-hover) !important;
  --cc-btn-primary-hover-color: var(--b-tone-text) !important;
  --cc-btn-primary-hover-border-color: color-mix(in srgb, var(--accent) 32%, transparent) !important;
  --cc-btn-secondary-bg: var(--b-quiet) !important;
  --cc-btn-secondary-color: var(--text) !important;
  --cc-btn-secondary-border-color: var(--b-quiet-border) !important;
  --cc-btn-secondary-hover-bg: var(--b-quiet-hover) !important;
  --cc-btn-secondary-hover-color: var(--b-tone-text) !important;
  --cc-btn-secondary-hover-border-color: var(--b-tone-border) !important;
}
html body #cc-main :is(.cm__btn, .pm__btn){
  background-image: var(--b-gloss) !important;
  box-shadow: var(--b-shadow) !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  font-weight: 600 !important;
}
html body .nav-cta{
  background: var(--b-gloss), var(--b-tone) !important;
  color: var(--b-tone-text) !important;
  border: 1px solid var(--b-tone-border) !important;
  box-shadow: var(--b-shadow) !important;
  border-radius: 999px !important;
}
html body .nav-cta:hover{ background: var(--b-gloss), var(--b-tone-hover) !important; color: var(--b-tone-text) !important }

/* ── v22.0.4 · Cookie banner: readable links, warm toggles ──────────
   The library colours links with the primary-button colour (now a pale
   tint, so links vanished) and its "off" toggle is a slate grey that
   belongs to no theme here. Both now come from the site's own browns. */
html body #cc-main{
  --cc-link-color: var(--accent-dark, #623F18) !important;
  --cc-footer-bg: color-mix(in srgb, var(--accent) 5%, var(--bg-card, #fff)) !important;
  --cc-footer-color: var(--text-muted, #444748) !important;
  --cc-footer-border-color: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  --cc-toggle-on-bg: var(--accent) !important;
  --cc-toggle-off-bg: color-mix(in srgb, var(--accent) 30%, #fff) !important;
  --cc-toggle-on-knob-bg: #fff !important;
  --cc-toggle-off-knob-bg: #fff !important;
  --cc-toggle-enabled-icon-color: var(--accent) !important;
  --cc-toggle-disabled-icon-color: color-mix(in srgb, var(--accent) 55%, #fff) !important;
  --cc-toggle-readonly-bg: color-mix(in srgb, var(--accent) 18%, #fff) !important;
  --cc-toggle-readonly-knob-bg: #fff !important;
  --cc-toggle-readonly-knob-icon-color: color-mix(in srgb, var(--accent) 70%, #fff) !important;
}
html.dark-mode body #cc-main{
  --cc-link-color: #E8B98A !important;
  --cc-footer-bg: color-mix(in srgb, var(--accent) 10%, var(--bg-card, #2A2925)) !important;
  --cc-footer-color: #C8C6C2 !important;
  --cc-toggle-on-bg: color-mix(in srgb, var(--accent) 85%, #fff) !important;
  --cc-toggle-off-bg: color-mix(in srgb, var(--accent) 30%, var(--bg-card, #2A2925)) !important;
  --cc-toggle-readonly-bg: color-mix(in srgb, var(--accent) 22%, var(--bg-card, #2A2925)) !important;
  --cc-toggle-on-knob-bg: #F2F1ED !important;
  --cc-toggle-off-knob-bg: #F2F1ED !important;
}
html body #cc-main :is(a, .cm__links a, .cm__footer a, .cm__desc a, .pm__section a, .pm__section-desc a){ color: var(--cc-link-color) !important; -webkit-text-fill-color: var(--cc-link-color); text-decoration: underline !important; text-underline-offset: 2px; font-weight: 600 }
html body #cc-main :is(button, a):focus-visible{ outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent) !important; outline-offset: 2px }
html body #cc-main .pm__badge{ padding: 4px 10px !important; overflow: visible !important; white-space: nowrap !important; flex: none }

/* ── v22.0.5 · Cookie notice: room for the toggle, and Accept > Reject ──
   The section title had lost the right padding the library keeps clear for
   the switch, so "Always allowed" slid underneath it. And Accept and Reject
   wore the same tint: Accept is now the deeper tone, Reject the lighter one. */
html body #cc-main .pm__section--toggle .pm__section-title{ padding-right: 88px !important }
html body #cc-main .pm__section--toggle .pm__badge{ margin-right: 0 !important }
html body #cc-main :is(.cm__btn, .pm__btn)[data-role="all"]{
  background: var(--b-gloss), color-mix(in srgb, var(--accent) 30%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
  color: var(--accent-dark, #623F18) !important;
}
html body #cc-main :is(.cm__btn, .pm__btn)[data-role="all"]:hover{
  background: var(--b-gloss), color-mix(in srgb, var(--accent) 22%, #fff) !important;
}
html body #cc-main :is(.cm__btn, .pm__btn)[data-role="necessary"]{
  background: var(--b-gloss), color-mix(in srgb, var(--accent) 6%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent) 18%, transparent) !important;
  color: color-mix(in srgb, var(--accent-dark, #623F18) 85%, #000) !important;
}
html.dark-mode body #cc-main :is(.cm__btn, .pm__btn)[data-role="all"]{
  background: var(--b-gloss), color-mix(in srgb, var(--accent) 55%, var(--bg-card, #2A2925)) !important;
  color: #FFF4E8 !important;
}
html.dark-mode body #cc-main :is(.cm__btn, .pm__btn)[data-role="necessary"]{
  background: var(--b-gloss), color-mix(in srgb, var(--accent) 14%, var(--bg-card, #2A2925)) !important;
  color: #F2D4B4 !important;
}


/* ── v24 · What is Vedānta (home section) ─────────────────── */
.wiv-section { background: var(--bg-surface); }
.wiv-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 26px 24px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.wiv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.wiv-card h3 { font-family: var(--font-heading); font-size: 1.25rem; margin: 14px 0 8px; color: var(--text); }
.wiv-card p { font-size: .93rem; line-height: 1.65; color: var(--text-muted); margin: 0; }
.wiv-ic {
  display: inline-flex; width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--accent-light); color: var(--accent); font-size: 1.05rem;
}

/* ── v24 · Source disclaimer at the end of a research page ─── */
.source-disclaimer {
  max-width: 820px; margin: 48px auto 56px; padding: 18px 22px;
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg); background: var(--bg-surface);
  font-size: .9rem; line-height: 1.65; color: var(--text-muted);
}
.source-disclaimer strong { color: var(--text); }
.source-disclaimer a { color: var(--accent); }