/* ══════════════════════════════════════════════════════════════════════
   Premium theme transition — daytime darshan ⇄ evening temple.
   The new theme sweeps across the page as a circle expanding from the
   toggle button (View Transitions API). The old view holds still beneath;
   only the growing circle is animated, so the whole page changes in one
   perfectly synchronized, GPU-composited motion.
   ══════════════════════════════════════════════════════════════════════ */
::view-transition-old(root) {
	animation: none;
}
::view-transition-new(root) {
	animation: pd-theme-reveal 640ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes pd-theme-reveal {
	from { clip-path: circle(0px at var(--pd-tx, 90%) var(--pd-ty, 40px)); }
	to   { clip-path: circle(160vmax at var(--pd-tx, 90%) var(--pd-ty, 40px)); }
}

/* Fallback veil (no View Transitions API): a soft light that breathes over
   the swap — golden dusk when going dark, ivory dawn when going light. */
#pd-theme-veil {
	position: fixed;
	inset: 0;
	z-index: 4000;
	pointer-events: none;
	opacity: 0;
	transition: opacity 420ms ease-in-out;
}
#pd-theme-veil.pd-veil--dusk {
	background: radial-gradient(120% 120% at var(--pd-tx, 90%) var(--pd-ty, 40px),
		rgba(244, 196, 48, 0.45) 0%, rgba(74, 31, 22, 0.92) 55%, rgba(26, 10, 8, 0.96) 100%);
}
#pd-theme-veil.pd-veil--dawn {
	background: radial-gradient(120% 120% at var(--pd-tx, 90%) var(--pd-ty, 40px),
		rgba(255, 253, 247, 0.95) 0%, rgba(244, 196, 48, 0.55) 45%, rgba(255, 253, 247, 0.9) 100%);
}
#pd-theme-veil.is-on { opacity: 1; }

/* Sacred marks glow softly while the light changes — ॐ, સીતારામ, lotus
   dividers. Slightly warmer and longer when night falls, brief and bright
   at sunrise. Small decorative elements only, so the filter stays cheap. */
html.pd-theme-anim .pd-footer-om-symbol,
html.pd-theme-anim .pd-sitaram-mark,
html.pd-theme-anim .pd-footer-sitaram,
html.pd-theme-anim .pd-om-float,
html.pd-theme-anim .pd-history-om,
html.pd-theme-anim .pd-story-seal-om,
html.pd-theme-anim .pd-story-quote-om,
html.pd-theme-anim .pd-dsthan-pause-om,
html.pd-theme-anim .pd-dsthan-pause-sitaram,
html.pd-theme-anim .pd-sacred-divider svg,
html.pd-theme-anim .pd-hero-ornament-star,
html.pd-theme-anim .pd-fest-ornament-star {
	animation: pd-sacred-glow 1.15s ease-in-out;
}
html.pd-to-light .pd-footer-om-symbol,
html.pd-to-light .pd-sitaram-mark,
html.pd-to-light .pd-footer-sitaram,
html.pd-to-light .pd-om-float,
html.pd-to-light .pd-sacred-divider svg {
	animation-duration: 800ms;
}
@keyframes pd-sacred-glow {
	0%   { filter: none; }
	45%  { filter: drop-shadow(0 0 10px rgba(244, 196, 48, 0.85)) drop-shadow(0 0 26px rgba(232, 162, 58, 0.45)); }
	100% { filter: none; }
}

/* The toggle itself: a golden ripple radiates out and the incoming icon
   (sun or diya-moon) spins into place. */
.pd-theme-btn { position: relative; }
.pd-theme-btn::after {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid rgba(244, 196, 48, 0.75);
	opacity: 0;
	transform: scale(0.6);
	pointer-events: none;
}
html.pd-theme-anim .pd-theme-btn::after {
	animation: pd-toggle-ripple 700ms ease-out;
}
@keyframes pd-toggle-ripple {
	0%   { opacity: 0.9; transform: scale(0.55); }
	100% { opacity: 0;   transform: scale(2.1); }
}
html.pd-theme-anim .pd-theme-btn .pd-icon svg {
	animation: pd-icon-arrive 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pd-icon-arrive {
	from { transform: rotate(-170deg) scale(0.3); opacity: 0; }
	to   { transform: rotate(0deg) scale(1); opacity: 1; }
}

/* Reduced motion: the transformation is instant and quiet. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) { animation: none !important; }
	#pd-theme-veil { display: none !important; }
	html.pd-theme-anim .pd-theme-btn::after,
	html.pd-theme-anim .pd-theme-btn .pd-icon svg,
	html.pd-theme-anim .pd-footer-om-symbol,
	html.pd-theme-anim .pd-sitaram-mark,
	html.pd-theme-anim .pd-footer-sitaram,
	html.pd-theme-anim .pd-om-float,
	html.pd-theme-anim .pd-history-om,
	html.pd-theme-anim .pd-story-seal-om,
	html.pd-theme-anim .pd-story-quote-om,
	html.pd-theme-anim .pd-dsthan-pause-om,
	html.pd-theme-anim .pd-dsthan-pause-sitaram,
	html.pd-theme-anim .pd-sacred-divider svg,
	html.pd-theme-anim .pd-hero-ornament-star,
	html.pd-theme-anim .pd-fest-ornament-star { animation: none !important; }
}

/* Theme-toggle icons: moon in light mode, sun in dark mode. */
.pd-theme-btn .pd-icon { display: inline-flex; align-items: center; justify-content: center; }
.pd-theme-btn .pd-icon-sun { display: none; }
html[data-theme="dark"] .pd-theme-btn .pd-icon-moon { display: none; }
html[data-theme="dark"] .pd-theme-btn .pd-icon-sun { display: inline-flex; }

/* Pagination for the gallery / bhajan collections. */
.pd-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; padding: 0; margin: 0; }
.pd-pagination a,
.pd-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.4rem; padding: .45rem .7rem;
	border: 1px solid rgba(184, 134, 11, .35);
	border-radius: 10px;
	color: var(--pd-ink, #3a2d1f);
	text-decoration: none;
	transition: var(--pd-transition, all .25s ease);
}
.pd-pagination a:hover { border-color: rgba(184, 134, 11, .8); }
.pd-pagination .current {
	background: linear-gradient(135deg, #b8860b, #d4a017);
	border-color: transparent; color: #fff; font-weight: 600;
}

/* While the light/dark switch is being applied, transitions are suppressed so
   the browser re-resolves var()-based colours immediately (see setTheme in
   site.js). Restored on the next frame. */
html.pd-theming,
html.pd-theming *,
html.pd-theming *::before,
html.pd-theming *::after {
	transition: none !important;
}

/* ── Sticky navbar on phones and tablets ──────────────────────────────
   The bar is position:fixed at every width, but on mobile GPUs a fixed
   element that also paints a backdrop-filter is often repainted only when
   scrolling stops, so it lags behind or flickers and reads as "not sticky".
   Below the xl breakpoint we give it its own compositor layer and swap the
   blur for an opaque background, which keeps it glued to the top. */
@media (max-width: 1199.98px) {
	.pd-navbar {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		will-change: transform;
	}

	.pd-navbar.pd-navbar--solid {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: linear-gradient(
			135deg,
			rgba(217, 119, 6, 0.08) 0%,
			#fffdf7 45%,
			rgba(184, 134, 11, 0.1) 100%
		);
	}

	html[data-theme="dark"] .pd-navbar.pd-navbar--solid {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: linear-gradient(135deg, #4a1f16 0%, #2b1410 60%, #3a221b 100%);
	}
}

/* Readable links on the solid bar.
   The solid state only re-points the Bootstrap colour variable, and a browser
   will not re-resolve var() for a property that carries a transition when just
   the variable changed — the links kept their transparent-state white and
   vanished against the cream bar. Setting colour directly on the class makes
   the declaration itself change, so it applies (and animates) every time.
   var(--pd-dark) is dark ink in the light theme and cream in the dark theme,
   so one rule serves both. */
.pd-navbar.pd-navbar--solid .pd-nav-link,
.pd-navbar.pd-navbar--solid .pd-nav-dropdown-toggle {
	color: var(--pd-dark);
}

/* Colour must not be transitioned here: when the bar turns solid the new
   colour comes from a variable, and a transitioned property is not
   re-resolved when only the variable changed — the links would stay white
   against the cream bar. Everything else still animates. */
.pd-navbar .pd-nav-link,
.pd-navbar .pd-nav-dropdown-toggle,
.pd-navbar .pd-brand-text,
.pd-navbar .pd-submenu-link {
	transition-property: background-color, border-color, opacity, transform;
}

.pd-navbar.pd-navbar--solid .pd-nav-link:hover,
.pd-navbar.pd-navbar--solid .pd-nav-link:focus,
.pd-navbar.pd-navbar--solid .pd-nav-link.active,
.pd-navbar.pd-navbar--solid .pd-nav-dropdown-toggle:hover,
.pd-navbar.pd-navbar--solid .pd-nav-dropdown-toggle:focus {
	color: var(--pd-primary);
}

/* Opening the mobile menu adopts the scrolled styling so the links stay
   readable, but the bar itself must keep its height — otherwise the logo and
   hamburger jump upwards as the menu opens. */
.pd-navbar.pd-navbar--no-shrink {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* In-page anchors must clear the fixed bar. */
html { scroll-padding-top: 84px; }

/* Mobile menu: keep it within the screen and scrollable.
   The navbar is fixed, so once the ઇતિહાસ dropdown opens it can grow taller
   than the viewport — without this the language and theme buttons at the
   bottom are unreachable on shorter phones and in landscape. */
@media (max-width: 1199.98px) {
	.pd-navbar .navbar-collapse {
		max-height: calc(100vh - 74px);
		max-height: calc(100dvh - 74px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
}

/* Keep the fixed navbar clear of the WordPress admin bar. */
.admin-bar .pd-navbar { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .pd-navbar { top: 46px; }
}