/*
Theme Name: Raman Bhatia
Description: Custom theme for Raman Bhatia's personal website (Tailwind-based layout).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ramanbhatia
*/

@layer base {
	html, body { margin: 0; padding: 0; }
	body { overscroll-behavior: none; }
	main > :first-child { margin-top: 0 !important; }
	main > :last-child { margin-bottom: 0 !important; }
}
::-webkit-scrollbar { display: none; }

/* Offset in-page anchors for the fixed header */
section[id] { scroll-margin-top: 5rem; }

/* WordPress admin bar sits above the fixed header */
.admin-bar header.site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar header.site-header { top: 46px; } }

/* Mobile menu */
#mobile-menu[hidden] { display: none; }

/* Responsive YouTube embeds */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Basic typography for editor content (pages / posts) */
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content h2 { font-family: "Space Grotesk", sans-serif; font-size: 28px; line-height: 36px; font-weight: 600; }
.entry-content h3 { font-family: "Space Grotesk", sans-serif; font-size: 22px; line-height: 30px; font-weight: 600; }
.entry-content a { color: #006c49; text-decoration: underline; }
.entry-content ul { list-style: disc; padding-left: 1.5rem; }
.entry-content ol { list-style: decimal; padding-left: 1.5rem; }
.entry-content img { border-radius: 0.75rem; height: auto; }


/* Pagination */
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.nav-links .page-numbers { padding: .5rem .9rem; border-radius: .5rem; background: #fff; font-weight: 600; font-size: 14px; }
.nav-links .page-numbers.current { background: #0B192C; color: #fff; }

/* From index2.html */
.object-centerx { object-position: center -60px; }

/* Home page sliders (videos, gallery) */
.rb-slider-track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rb-slide { flex: 0 0 auto; scroll-snap-align: start; }
.rb-slide-3 { width: 100%; }
.rb-slide-4 { width: calc((100% - 1rem) / 2); }
@media (min-width: 768px) {
	.rb-slide-3 { width: calc((100% - 1.5rem) / 2); }
	.rb-slide-4 { width: calc((100% - 2rem) / 3); }
}
@media (min-width: 1024px) {
	.rb-slide-3 { width: calc((100% - 3rem) / 3); }
	.rb-slide-4 { width: calc((100% - 3rem) / 4); }
}

/* Gallery page lightbox */
#rb-lightbox[hidden], #rb-lightbox [hidden] { display: none !important; }
.rb-lightbox-thumbs { scrollbar-width: none; }

/* Tabs (home videos) */
.rb-tab { background: #fff; color: #0b1c30; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.rb-tab:hover { background: #dce9ff; }
.rb-tab[aria-selected="true"] { background: #0B192C; color: #fff; }
[role="tabpanel"][hidden] { display: none !important; }

/* Home: SCO orbit animation (globe pulse, rotating dots) */
@keyframes rb-spin { to { transform: rotate(360deg); } }
@keyframes rb-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes rb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.rb-orbit-spin { animation: rb-spin 40s linear infinite; }
.rb-orbit-spin-reverse { animation-duration: 26s; animation-direction: reverse; }
.rb-orbit-pulse { animation: rb-pulse 3.6s ease-out infinite; pointer-events: none; }
.rb-orbit-pulse-2 { animation-delay: 1.8s; }
.rb-orbit-globe { display: inline-block; animation: rb-float 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.rb-orbit-spin, .rb-orbit-pulse, .rb-orbit-globe { animation: none; }
	.rb-orbit-pulse { opacity: 0; }
}

/* Journey (home): horizontal year rail + one milestone card */
.rb-jtrack { position: absolute; top: 21px; left: calc(100% / (2 * var(--rb-jn, 6))); right: calc(100% / (2 * var(--rb-jn, 6))); height: 3px; border-radius: 3px; background: #dce9ff; overflow: hidden; }
.rb-jfill { height: 100%; width: var(--rb-jp, 0%); background: linear-gradient(90deg, #4edea3, #006c49); transition: width .7s cubic-bezier(.2,.7,.2,1); }
.rb-jdot { width: 45px; height: 45px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #fff; color: #45464d; border: 3px solid #dce9ff; transition: all .45s ease; }
.rb-jdot .material-symbols-outlined { font-size: 20px; }
.rb-jyear { color: #76777d; font-weight: 700; transition: color .3s; }
.rb-jnode:hover .rb-jdot { border-color: #4edea3; color: #006c49; }
.rb-jnode.is-done .rb-jdot { border-color: #4edea3; color: #006c49; }
.rb-jnode[aria-selected="true"] .rb-jdot { background: #006c49; border-color: #6ffbbe; color: #fff; transform: scale(1.15); box-shadow: 0 0 0 7px rgba(78,222,163,.2); }
.rb-jnode[aria-selected="true"] .rb-jyear { color: #006c49; }
.rb-jpanels { display: grid; }
.rb-jpanel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.rb-jpanel.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.rb-jbar-fill { width: 0; }
.rb-jbar-fill.is-running { width: 100%; transition: width var(--rb-jdur, 6s) linear; }
@media (max-width: 639px) {
	.rb-jdot { width: 38px; height: 38px; }
	.rb-jdot .material-symbols-outlined { font-size: 18px; }
	.rb-jtrack { top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.rb-jpanel, .rb-jpanel.is-active, .rb-jfill, .rb-jdot { transition: none; transform: none; }
}
/* Journey on the dark photo background */
.rb-journey-section .rb-jtrack { background: rgba(255,255,255,.15); }
.rb-journey-section .rb-jdot { background: #0B192C; border-color: rgba(255,255,255,.22); color: #c6c6cd; }
.rb-journey-section .rb-jyear { color: rgba(255,255,255,.55); }
.rb-journey-section .rb-jnode:hover .rb-jdot,
.rb-journey-section .rb-jnode.is-done .rb-jdot { border-color: #4edea3; color: #6ffbbe; }
.rb-journey-section .rb-jnode[aria-selected="true"] .rb-jdot { background: #006c49; border-color: #6ffbbe; color: #fff; }
.rb-journey-section .rb-jnode[aria-selected="true"] .rb-jyear { color: #6ffbbe; }

/* Fade-up on scroll (.rb-reveal, switched on by site.js) */
.rb-reveal-on .rb-reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rb-reveal-on .rb-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rb-reveal-on .rb-reveal { opacity: 1; transform: none; transition: none; } }

/* Album titles on a dark section (home gallery) */
.rb-on-dark .rb-album-title { color: #fff; }
.rb-on-dark .rb-album:hover .rb-album-title { color: #6ffbbe; }

/* Mobile heading sizes (keeps headings ~20–26px on phones; "html" beats the Tailwind CDN utilities) */
@media (max-width: 767px) {
	html .text-display-hero,
	html .text-display-hero-mobile { font-size: 26px; line-height: 34px; }
	html .text-headline-lg { font-size: 24px; line-height: 32px; }
	html .text-headline-md { font-size: 20px; line-height: 28px; }
	html .text-headline-sm { font-size: 18px; line-height: 26px; }
	html .text-editorial-quote { font-size: 20px; line-height: 30px; }
	html .text-stat-metric { font-size: 34px; line-height: 40px; }
	html .rb-journey .text-\[44px\] { font-size: 32px; }
	html .text-\[26px\].font-headline-md { font-size: 22px; line-height: 30px; }
}


/* Stagger support for .rb-reveal (--rb-delay), removed once shown so hovers are instant */
.rb-reveal-on .rb-reveal { transition-delay: var(--rb-delay, 0s); }
.rb-reveal-on .rb-reveal.is-done { transition-delay: 0s; }

/* Lighter navy glass (footer quote box). "html" so it wins over Tailwind's bg-surface-glass-navy on the same element */
html .bg-surface-glass-navyLight { background-color: rgb(22 36 67 / 85%); }