/* Explore rgveda interactive webchart styles */
.explore-rgveda-container {
	position: relative;
	width: 400px;
	height: 400px;
	margin: 80px auto;
}

.main-explore-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #ead3c2;
	color: #4b2e19;
	font-family: Montserrat, Georgia, serif;
	font-size: 2rem;
	padding: 1.2rem 2.5rem;
	border-radius: 2rem;
	box-shadow: 0 2px 16px rgba(0,0,0,0.12);
	cursor: pointer;
	z-index: 2;
	transition: box-shadow 0.2s;
}

.main-explore-btn:hover {
	box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

.sub-btn {
	position: absolute;
	background: #ead3c2;
	color: #4b2e19;
	font-family: Montserrat, Georgia, serif;
	font-size: 1.1rem;
	padding: 0.7rem 1.5rem;
	border-radius: 1.2rem;
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	opacity: 0;
	pointer-events: auto;
	transition: opacity 0.3s, transform 0.3s;
	z-index: 1;
}


.hero-text h1 {
	color: #fff;
	font-size: 3rem;
	font-family: 'Georgia', serif;
	text-shadow: 4px 4px 16px rgba(0,0,0,0.5);
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(.68,-0.55,.27,1.55), text-shadow 0.3s;
}

.hero-text h1:hover {
	transform: scale(1.05) skewX(-8deg);
	text-shadow: 6px 6px 24px rgba(0,0,0,0.6);
}

.page2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: url('fallback-image.jpeg') center center/cover no-repeat;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s cubic-bezier(.68,-0.55,.27,1.55);
}

.page2.active {
	opacity: 1;
	pointer-events: auto;
}
body, html {
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: auto; /* allow page scrolling */
}

.hero-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

#bg-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: 1;
	background: transparent;
	display: block;
}

#bg-video img#fallback-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: 0;
	display: block;
}

.hero-text {
		position: absolute;
		top: calc(79%);
		left: 52%;
		transform: translate(-50%, -50%);
		z-index: 3;
		text-align: center;
}

.hero-text h1 {
			color: #fff;
			font-size: 3rem;
			font-family: 'Georgia', serif;
			text-shadow: 4px 4px 16px rgba(0,0,0,0.5);
}

/* Intro audio toggle button */
#intro-audio-toggle{
		background: rgba(255,255,255,0.06);
		color: #fff;
		border: 1px solid rgba(255,255,255,0.08);
		padding: 6px 10px;
		border-radius: 8px;
		cursor: pointer;
		font-size: 1.1rem;
}

/* Colors: beige sections with dark-brown text */
:root{ --beige:#ffe3cb; --brown:#4b2e19; }

/* Mandala RVSM grid */
.rvsm-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; align-items:start; width:100%; max-height:70vh; overflow-y:scroll; scrollbar-gutter: stable both-edges; scrollbar-color: rgba(0,0,0,0.45) rgba(255,255,255,0.03); }
.rvsm-grid .rvsm-btn { width:100%; text-align:center; padding:8px 10px; font-size:0.855rem; height:43px; display:flex; align-items:center; justify-content:center; }
@media (max-width:1200px){ .rvsm-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:900px){ .rvsm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:480px){ .rvsm-grid { grid-template-columns: repeat(2, 1fr); } }

/* Mandala index grid (smaller, tighter buttons) */
.mandala-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:12px; width:100%; max-width:720px; }
.mandala-grid .mandala-btn { padding:8px 10px; font-size:0.95rem; min-width:90px; text-align:center; }

/* Vertical mandala list: centered on the page */
.mandala-vertical { display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:flex-start; }
.mandala-vertical .mandala-btn { width:231px; text-align:center; font-size:1.05rem; }

/* Ensure rvsm grid can scroll vertically when it grows beyond viewport */
.rvsm-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; align-items:start; width:100%; max-height: 70vh; overflow-y: scroll; scrollbar-gutter: stable both-edges; padding-right: 12px; scrollbar-color: rgba(0,0,0,0.45) rgba(255,255,255,0.03); }
.rvsm-grid::-webkit-scrollbar { width: 14px; }
.rvsm-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius:6px; }
.rvsm-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.45); border-radius:6px; border: 3px solid rgba(255,255,255,0.03); }

/* Header left area inside RVSM detail: logo + find button */
.rvsm-header-left { position: absolute; top: 12px; left: 12px; display:flex; align-items:center; gap:8px; z-index:30; }

/* Blur overlay used for fade transitions (replaces previous swoosh slide) */
.swoosh-blur { backdrop-filter: blur(4px); background: rgba(255,255,255,0.06); pointer-events: none; }

/* Small audio controls in the hero */
#audio-controls { display:inline-flex; gap:8px; align-items:center; margin-top:8px; }
#audio-controls button { background: rgba(0,0,0,0.28); color:#fff; border:1px solid rgba(255,255,255,0.06); padding:6px 8px; border-radius:8px; cursor:pointer; }
#audio-controls #intro-play-btn { background: rgba(241, 221, 205, 0.97); color: #4b2e19; font-weight:800; }
#audio-controls #clear-cache-btn { background: rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.08); padding:6px 8px; border-radius:8px; cursor:pointer; }

/* Play button used for on-demand audio */
.rvsm-play-btn { padding:8px 12px; border-radius:8px; background: rgba(237,216,200,0.97); color:#4b2e19; font-weight:800; border: none; cursor: pointer; }
.rvsm-play-btn[disabled]{ opacity:0.6; cursor:progress; }

/* Slight blur applied to the page background video/hero when dynamic pages are active.
	This targets only the video/hero container to limit repaint cost and avoid lag. */
/* Reduce blur strength and avoid expensive transforms to reduce repaint cost on low-end devices */
body.page-blur-active #bg-video { filter: blur(2px) saturate(0.98); transition: filter 200ms ease; }
body.page-blur-active .hero-container { filter: blur(1px); transition: filter 200ms ease; }

/* If the browser does not support backdrop-filter well, avoid applying it to reduce lag */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
	.swoosh-blur { background: rgba(255,255,255,0.02); backdrop-filter: none; }
	body.page-blur-active #bg-video, body.page-blur-active .hero-container { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
	.swoosh-blur { transition: none !important; }
	body.page-blur-active #bg-video, body.page-blur-active .hero-container { transition: none !important; }
}
.rvsm-header-left img.logo { height:100px; width:100px; object-fit:contain; cursor:pointer; border-radius:8px; }
.rvsm-header-left button.find-btn { background: rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.08); padding:6px 8px; border-radius:8px; cursor:pointer; font-size:1.05rem; }

/* Large logo variant used in the main header */
.logo-large { height:264px; width:264px; object-fit:contain; }

/* Search panel */
.rvsm-search-panel { position: absolute; top: 12px; left: 76px; z-index:31; display:none; }
.rvsm-search-panel.active { display:block; }
.rvsm-search-panel input.search-input { width: 320px; padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.12); }
.search-suggestions { margin-top:6px; background: rgba(0,0,0,0.35); color:#fff; border-radius:8px; max-height:240px; overflow:auto; box-shadow:0 6px 24px rgba(0,0,0,0.4); }
.search-suggestions .item { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.03); cursor:pointer; }
.search-suggestions .item:hover, .search-suggestions .item.active { background: rgba(255,255,255,0.04); }
.search-suggestions .code { font-weight:800; margin-right:8px; }
.search-suggestions .snippet { opacity:0.9; font-size:0.9rem; }

/* RVSM detail styling adjustments */
.rvsm-code-title { position:absolute; top:35px; right:48px; color:#fff; font-weight:900; font-size:2.99rem; text-transform:uppercase; }
.info-row { display:flex; gap:12px; justify-content:flex-end; align-items:flex-start; margin-top:48px; }
.info-box { background:var(--beige); color:var(--brown); padding:12px 16px; border-radius:16px; min-width:160px; max-width:320px; }
.info-box .label { font-weight:900; margin-bottom:6px; text-transform:uppercase; }
.info-box .value { font-weight:400; }

/* Control pills small */
.toggle-pill { background:var(--beige); color:var(--brown); padding:6px 10px; border-radius:999px; font-weight:900; font-size:0.9rem; }
.toggle-pill[data-active='0']{ opacity:0.45; }

/* New toggle switch style for RVSM detail toggles */
.toggle-switch { display:flex; align-items:center; gap:8px; }
.toggle-switch label { color: #4b2e19; font-weight:400; font-size:1rem; }
.toggle-switch input[type="checkbox"] { width: 44px; height: 24px; appearance: none; background: #ddd; border-radius: 999px; position: relative; outline: none; cursor: pointer; transition: background 160ms; }
.toggle-switch input[type="checkbox"]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform 160ms; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.toggle-switch input[type="checkbox"]:checked { background: #f5decd; }
.toggle-switch input[type="checkbox"]:checked::after { transform: translateX(20px); }

/* audio meta small text */
.audio-meta { color: #fff; opacity: 0.95; }
.audio-meta .file-title { font-weight:700; color:#fff; }
.audio-meta .audio-attrib { color: #f3efe8; }

/* Lower beige content boxes */
.sections-wrap.internal { display:flex; gap:28px; padding:0 4vw; overflow-x:auto; -webkit-overflow-scrolling: touch; scrollbar-width: auto; scrollbar-color: rgba(75,46,25,0.9) rgba(205,185,168,0.12); }
.sections-wrap.internal::-webkit-scrollbar { height:12px; }
.sections-wrap.internal::-webkit-scrollbar-track { background: rgba(205,185,168,0.08); border-radius:8px; }
.sections-wrap.internal::-webkit-scrollbar-thumb { background: rgba(75,46,25,0.6); border-radius:8px; }
.section.internal-box { background:var(--beige); color:var(--brown); border-radius:28px; padding:22px; min-height:324px; flex:0 0 48%; box-sizing:border-box; }
.section.internal-box h3{ color:var(--brown); font-weight:900; margin-top:0; }
.section.internal-box pre{ color:var(--brown); font-weight:400; white-space:pre-wrap; font-family:inherit; }
@media(max-width:720px){
	.sections-wrap.internal{ flex-direction:column; }
	.section.internal-box{ flex:0 0 100%; width:100%; }
}

/* SPA and RVSM styles */
.dynamic-page { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.mandala-btn {
	/* Keep size/position but make visual style similar to index buttons */
	background: rgba(0,0,0,0.22);
	color: #fff;
	padding: 8px 12px;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	font-weight: 800;
	font-size: 0.95rem;
	font-family: Montserrat, Georgia, serif;
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.rvsm-btn { background: rgba(0,0,0,0.45); color:#fff; padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,0.08); cursor:pointer; font-size:0.85rem; transform-origin:center; }
.rvsm-detail { position:relative; }
.rvsm-code-title { position:absolute; top:28px; right:48px; color:#fff; font-weight:900; font-size:3.32rem; text-transform:uppercase; }
.sections-wrap.internal::-webkit-scrollbar { height:12px; }

/* internal section box when rendered in RVSM detail */
.section.internal-box { box-sizing:border-box; }
.section.huge { flex:0 0 80% !important; }

/* Responsive adjustments */
@media (max-width:900px){
  .rvsm-code-title { position:static; text-align:left; font-size:2rem; margin-bottom:12px; }
  .sections-wrap.internal { flex-direction:column; }
}

/* Ensure body can scroll when dynamic pages are open */
body { overflow:auto; }


/* Utility: hide class used by toggles */
.hidden { display: none !important; }

/* Smooth horizontal scroll for rvsm sections */
.rvsm-sections-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    display: flex;
    gap: 28px;
    padding: 12px;
}
/* Visual cursor when dragging */
.rvsm-sections-wrap.dragging { cursor: grabbing; cursor: -webkit-grabbing; }

/* Ensure each section shows inline in the horizontal flow */
.rvsm-sections-wrap .section { flex: 0 0 48%; box-sizing: border-box; }