/* ══════════════════════════════════════════════════════════════════════
   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; }
}

/* ── Light-mode navbar & menus: solid premium ivory, no glassmorphism ──
   The blurred glass let scrolling page text ghost through the bar. In light
   mode the scrolled navbar, the open mobile menu and the ઇતિહાસ dropdown now
   sit on opaque warm ivory with a soft elevated shadow; the existing golden
   gradient hairline under the bar stays as the saffron bottom border.
   Dark mode is untouched. */
html:not([data-theme="dark"]) .pd-navbar.pd-navbar--solid {
	background: #fff9f0; /* warm ivory */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow:
		0 10px 30px rgba(74, 31, 22, 0.10),
		0 2px 8px rgba(74, 31, 22, 0.06);
}

/* The dropdown panel (desktop) — same solid ivory, gentle golden frame. */
@media (min-width: 1200px) {
	html:not([data-theme="dark"]) .pd-submenu {
		background: #fff9f0;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-color: rgba(217, 119, 6, 0.26);
		box-shadow:
			0 20px 48px rgba(74, 31, 22, 0.14),
			0 4px 12px rgba(74, 31, 22, 0.08);
	}
}

/* ── Topic-wise jump filter (history chapters / darshan places) ────────
   Reuses the Bhajan Santvani filter styling; stays gently sticky under the
   fixed navbar so a topic can be picked from anywhere on the page. */
.pd-topic-filter {
	position: sticky;
	top: 96px;
	z-index: 900;
	max-width: 560px;
	margin: 0 auto 34px;
}
.pd-topic-filter select {
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(74, 31, 22, 0.08);
}
html[data-theme="dark"] .pd-topic-filter select,
html[data-theme="dark"] .pd-filters__row select,
html[data-theme="dark"] .pd-filters__row input {
	background: #2b1410;
	color: #f8f3e7;
	border-color: rgba(212, 175, 55, 0.35);
}

/* Scroll targets clear the fixed navbar + the sticky filter. */
[id^="pd-topic-"] { scroll-margin-top: 168px; }

/* Golden glow when a chosen section arrives. */
.pd-topic-hit {
	animation: pd-topic-glow 1.6s ease;
	border-radius: 18px;
}
@keyframes pd-topic-glow {
	0%   { box-shadow: 0 0 0 0 rgba(244, 196, 48, 0); }
	25%  { box-shadow: 0 0 0 4px rgba(244, 196, 48, 0.45), 0 0 42px rgba(232, 162, 58, 0.35); }
	100% { box-shadow: 0 0 0 0 rgba(244, 196, 48, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.pd-topic-hit { animation: none; }
}
@media (max-width: 767.98px) {
	.pd-topic-filter { top: 84px; margin-bottom: 24px; }
	[id^="pd-topic-"] { scroll-margin-top: 150px; }
}

/* An element whose active-language translation is empty (untranslated item)
   is removed from the flow — the language toggle applies/removes this. */
.pd-i18n-empty { display: none !important; }

/* ── Gujarati-only history entries ────────────────────────────────────
   The story body renders normally in Gujarati; switching to Hindi hides it
   and shows the notice instead (single-pd_history.php emits both, and the
   navbar toggle sets data-lang on <html>). */
.pd-gu-only-note { display: none; }
html[data-lang="hi"] .pd-gu-only-note { display: block; }
html[data-lang="hi"] .pd-gu-only-body { display: none; }
.pd-gu-only-note__box {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--pd-font-head);
	font-weight: 600;
}

/* Verse and pad stanzas inside story chapters keep their line breaks —
   the editor stores them as one paragraph with single newlines. */
.pd-story-para,
.pd-story-quote { white-space: pre-line; }

/* ══════════════════════════════════════════════════════════════════════
   Album-based gallery — an album grid on the index, a media grid inside an
   album. Premium devotional cards, responsive (Desktop → small mobile),
   themed for light & dark. No individual media appears on the index.
   ══════════════════════════════════════════════════════════════════════ */
.pd-album-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 24px;
}
.pd-album-card {
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	overflow: hidden;
	background: var(--pd-cream-white);
	border: 1px solid var(--pd-divider);
	box-shadow: var(--pd-shadow-sm);
	text-decoration: none;
	color: var(--pd-dark);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease, border-color 0.3s ease;
}
.pd-album-card:hover,
.pd-album-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--pd-shadow-lg);
	border-color: rgba(184, 134, 11, 0.45);
	outline: none;
}
.pd-album-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(135deg, #f0e6d2, #e6d4b8);
}
.pd-album-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.pd-album-card:hover .pd-album-card__media img { transform: scale(1.06); }
.pd-album-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(184, 134, 11, 0.5);
}
.pd-album-card__placeholder svg { width: 58px; height: 58px; }
.pd-album-card__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(43, 20, 16, 0.3), rgba(43, 20, 16, 0) 46%);
	pointer-events: none;
}
/* Media-count badges — photo & video pills over the top of the cover.
   Counts are server-rendered from the album's actual media; a zero count
   renders no pill. Numerals carry data-i18n-digits (૧૮ ⇄ १८) and labels a
   data-i18n key, so the ગુ ⇄ हिं toggle relabels them like everything else. */
.pd-album-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}
.pd-album-card__mediabadge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px;
	border-radius: 50rem;
	border: 1px solid rgba(244, 196, 48, 0.28);
	background: rgba(43, 20, 16, 0.72);
	color: #fdf8ec;
	font-family: var(--pd-font-ui);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.pd-album-card__mediabadge svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	color: var(--pd-gold);
}
html[data-theme="dark"] .pd-album-card__mediabadge {
	background: rgba(30, 13, 10, 0.78);
	border-color: rgba(212, 175, 55, 0.4);
}
@media (max-width: 575.98px) {
	.pd-album-card__badges { top: 8px; left: 8px; right: 8px; gap: 5px; }
	.pd-album-card__mediabadge { padding: 3px 9px; font-size: 0.67rem; gap: 4px; }
	.pd-album-card__mediabadge svg { width: 11px; height: 11px; }
}
.pd-album-card__body { padding: 15px 18px 17px; }
.pd-album-card__title {
	display: block;
	font-family: var(--pd-font-head);
	font-size: 1.04rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--pd-maroon);
	overflow-wrap: anywhere;
}

/* Album detail — back link + album title above the media grid. */
.pd-album-detail-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 28px;
}
.pd-album-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 50rem;
	border: 1px solid var(--pd-divider);
	background: var(--pd-cream-white);
	color: var(--pd-primary);
	font-family: var(--pd-font-head);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	box-shadow: var(--pd-shadow-sm);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.pd-album-back:hover,
.pd-album-back:focus-visible {
	transform: translateY(-2px);
	border-color: var(--pd-gold);
	box-shadow: 0 6px 18px rgba(184, 134, 11, 0.2);
	color: var(--pd-maroon);
	outline: none;
}
.pd-album-detail-title {
	margin: 0;
	font-family: var(--pd-font-display);
	font-size: 1.7rem;
	line-height: 1.2;
	color: var(--pd-maroon);
}

/* Empty states (no albums yet / an album with no media). */
.pd-album-emptystate {
	max-width: 540px;
	margin: 0 auto;
	text-align: center;
	padding: 34px 20px;
}
.pd-album-emptystate__icon {
	display: inline-flex;
	color: rgba(184, 134, 11, 0.55);
	margin-bottom: 16px;
}
.pd-album-emptystate__icon svg { width: 66px; height: 66px; }
.pd-album-emptystate__title {
	font-family: var(--pd-font-head);
	font-size: 1.5rem;
	color: var(--pd-maroon);
	margin: 0 0 10px;
}
.pd-album-emptystate__text,
.pd-album-empty-line {
	color: var(--pd-dark);
	opacity: 0.82;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0;
}
.pd-album-empty-line { text-align: center; padding: 22px 0; }

/* ── Dark mode ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .pd-album-card {
	background: #2b1410;
	border-color: rgba(212, 175, 55, 0.28);
}
html[data-theme="dark"] .pd-album-card:hover,
html[data-theme="dark"] .pd-album-card:focus-visible { border-color: rgba(212, 175, 55, 0.55); }
html[data-theme="dark"] .pd-album-card__media { background: linear-gradient(135deg, #3a221b, #2b1410); }
html[data-theme="dark"] .pd-album-card__title { color: var(--pd-gold); }
html[data-theme="dark"] .pd-album-card__placeholder,
html[data-theme="dark"] .pd-album-emptystate__icon { color: rgba(212, 175, 55, 0.5); }
html[data-theme="dark"] .pd-album-back {
	background: #2b1410;
	border-color: rgba(212, 175, 55, 0.28);
	color: var(--pd-gold);
}
html[data-theme="dark"] .pd-album-back:hover,
html[data-theme="dark"] .pd-album-back:focus-visible { border-color: var(--pd-gold); color: #fff; }
html[data-theme="dark"] .pd-album-detail-title,
html[data-theme="dark"] .pd-album-emptystate__title { color: var(--pd-gold); }
html[data-theme="dark"] .pd-album-emptystate__text,
html[data-theme="dark"] .pd-album-empty-line { color: #e7d9c4; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
	.pd-album-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
	.pd-album-detail-title { font-size: 1.5rem; }
}
@media (max-width: 575.98px) {
	.pd-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.pd-album-card__body { padding: 12px 13px 14px; }
	.pd-album-card__title { font-size: 0.92rem; }
	.pd-album-detail-title { font-size: 1.3rem; }
	.pd-album-emptystate__title { font-size: 1.3rem; }
}

/* ── Gallery closing note ──────────────────────────────────────────────
   A subtle, compact closing line rendered INSIDE the gallery section, right
   below the last album/media — so the albums and the note read as one
   continuous section (no second section, no scalloped divider between them).
   Golden left accent, soft background, minimal shadow; wraps gracefully and
   goes near-full-width on phones. */
.pd-gallery-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 760px;
	margin: 40px auto 0;
	padding: 15px 20px;
	background: rgba(255, 255, 255, 0.62);
	border: 1px solid var(--pd-divider);
	border-left: 4px solid var(--pd-gold);
	border-radius: 4px 14px 14px 4px;
	box-shadow: 0 2px 10px rgba(74, 31, 22, 0.05);
}
.pd-gallery-note__icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--pd-gold-deep);
	line-height: 0;
}
.pd-gallery-note__icon svg { width: 19px; height: 19px; display: block; }
.pd-gallery-note__text {
	margin: 0;
	font-family: var(--pd-font-body);
	font-size: 0.95rem;
	line-height: 1.7;
	color: #6b5410;
	overflow-wrap: anywhere;
}
html[data-theme="dark"] .pd-gallery-note {
	background: rgba(212, 175, 55, 0.06);
	border-color: rgba(212, 175, 55, 0.22);
	border-left-color: var(--pd-gold);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .pd-gallery-note__icon { color: var(--pd-gold); }
html[data-theme="dark"] .pd-gallery-note__text { color: #f2d48a; }
@media (max-width: 575.98px) {
	.pd-gallery-note { margin-top: 32px; padding: 13px 15px; gap: 10px; }
	.pd-gallery-note__text { font-size: 0.9rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   Reusable responsive dropdown (pd-select)
   ─────────────────────────────────────────────────────────────────────
   Progressive enhancement of every native <select> filter (Bhajan Santvani,
   Darshaniy Sthan / History topic jump-filter, any [data-pd-select]). The
   native select is kept as an invisible source-of-truth; this styles the
   themed trigger + the body-portalled popup that pd-select.js positions.
   Works for Desktop / Laptop / Tablet / Mobile / Small mobile in both themes.
   ══════════════════════════════════════════════════════════════════════ */

/* Wrapper takes the native select's exact slot (grid cell / sticky row). */
.pd-select {
	position: relative;
	width: 100%;
	min-width: 0;
}

/* The native <select> stays for value + existing change-listeners, hidden. */
.pd-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
}

/* Trigger — mirrors the look of the field it replaces. */
.pd-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--pd-divider);
	border-radius: 10px;
	background: var(--pd-cream-white);
	font-family: var(--pd-font-ui);
	font-size: 0.88rem;
	line-height: 1.35;
	color: var(--pd-dark);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}
.pd-select__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pd-select__trigger.is-placeholder .pd-select__label { color: rgba(58, 46, 31, 0.6); }
.pd-select__caret {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--pd-gold-deep);
	border-bottom: 2px solid var(--pd-gold-deep);
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.25s ease;
}
.pd-select.is-open .pd-select__caret { transform: translateY(1px) rotate(-135deg); }
.pd-select__trigger:hover { border-color: var(--pd-gold); }
.pd-select__trigger:focus-visible,
.pd-select.is-open .pd-select__trigger {
	outline: none;
	border-color: var(--pd-gold);
	background: #fff;
	box-shadow: 0 0 0 0.22rem rgba(244, 196, 48, 0.22), 0 4px 16px rgba(184, 134, 11, 0.1);
}
/* Topic filter carried a soft lift on its field — keep it on the trigger. */
.pd-topic-filter .pd-select__trigger { box-shadow: 0 8px 24px rgba(74, 31, 22, 0.08); }

/* Popup — fixed-positioned by JS; only look & internal scroll live here. */
.pd-select__panel {
	position: fixed;
	z-index: 999; /* under the fixed navbar (1000); JS clamps it below the bar */
	display: flex;
	flex-direction: column;
	min-height: 0;
	border: 1px solid var(--pd-divider);
	border-radius: 14px;
	background: var(--pd-cream-white);
	box-shadow: 0 18px 44px rgba(74, 31, 22, 0.18), 0 4px 12px rgba(74, 31, 22, 0.1);
	overflow: hidden;
	transform-origin: top center;
	animation: pd-select-in 0.16s ease;
}
.pd-select__panel--up { transform-origin: bottom center; }
@keyframes pd-select-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pd-select__panel--up { animation-name: pd-select-in-up; }
@keyframes pd-select-in-up {
	from { opacity: 0; transform: translateY(4px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sticky search for long lists (Darshaniy Sthan). */
.pd-select__search {
	flex: 0 0 auto;
	padding: 10px;
	border-bottom: 1px solid var(--pd-divider);
	background: var(--pd-cream-white);
}
.pd-select__search-input {
	width: 100%;
	padding: 8px 11px;
	border: 1px solid var(--pd-divider);
	border-radius: 9px;
	background: #fff;
	font-family: var(--pd-font-ui);
	font-size: 0.86rem;
	color: var(--pd-dark);
}
.pd-select__search-input:focus {
	outline: none;
	border-color: var(--pd-gold);
	box-shadow: 0 0 0 0.18rem rgba(244, 196, 48, 0.2);
}

/* Scroll region — subtle, theme-aware scrollbar. */
.pd-select__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 6px;
	scrollbar-width: thin;
	scrollbar-color: rgba(184, 134, 11, 0.45) transparent;
}
.pd-select__list::-webkit-scrollbar { width: 8px; }
.pd-select__list::-webkit-scrollbar-track { background: transparent; }
.pd-select__list::-webkit-scrollbar-thumb {
	background: rgba(184, 134, 11, 0.4);
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: content-box;
}
.pd-select__list::-webkit-scrollbar-thumb:hover { background: rgba(184, 134, 11, 0.65); background-clip: content-box; }

/* Options — long ગુ/हिं text wraps gracefully instead of breaking layout. */
.pd-select__option {
	padding: 10px 12px;
	border-radius: 9px;
	font-family: var(--pd-font-ui);
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--pd-dark);
	cursor: pointer;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	transition: background 0.15s ease, color 0.15s ease;
}
.pd-select__option + .pd-select__option { margin-top: 2px; }
.pd-select__option--placeholder { color: rgba(58, 46, 31, 0.6); }
.pd-select__option:hover,
.pd-select__option.is-active {
	background: rgba(244, 196, 48, 0.18);
	color: var(--pd-maroon);
}
.pd-select__option.is-selected {
	background: rgba(184, 134, 11, 0.16);
	color: var(--pd-maroon);
	font-weight: 600;
}
.pd-select__option.is-selected.is-active { background: rgba(184, 134, 11, 0.26); }
.pd-select__empty {
	padding: 14px 12px;
	text-align: center;
	color: rgba(58, 46, 31, 0.55);
	font-family: var(--pd-font-ui);
	font-size: 0.86rem;
}

/* ── Dark mode: deep maroon field, golden accents, ivory text ────────── */
html[data-theme="dark"] .pd-select__trigger {
	background: #2b1410;
	border-color: rgba(212, 175, 55, 0.35);
	color: #f8f3e7;
}
html[data-theme="dark"] .pd-select__trigger.is-placeholder .pd-select__label { color: rgba(248, 243, 231, 0.6); }
html[data-theme="dark"] .pd-select__caret { border-color: var(--pd-gold); }
html[data-theme="dark"] .pd-select__trigger:hover { border-color: rgba(212, 175, 55, 0.7); }
html[data-theme="dark"] .pd-select__trigger:focus-visible,
html[data-theme="dark"] .pd-select.is-open .pd-select__trigger {
	background: #331d15;
	border-color: var(--pd-gold);
	box-shadow: 0 0 0 0.22rem rgba(212, 175, 55, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .pd-select__panel {
	background: #331d15;
	border-color: rgba(212, 175, 55, 0.3);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .pd-select__search {
	background: #331d15;
	border-bottom-color: rgba(212, 175, 55, 0.2);
}
html[data-theme="dark"] .pd-select__search-input {
	background: #2b1410;
	border-color: rgba(212, 175, 55, 0.3);
	color: #f8f3e7;
}
html[data-theme="dark"] .pd-select__search-input:focus {
	border-color: var(--pd-gold);
	box-shadow: 0 0 0 0.18rem rgba(212, 175, 55, 0.25);
}
html[data-theme="dark"] .pd-select__list { scrollbar-color: rgba(212, 175, 55, 0.5) transparent; }
html[data-theme="dark"] .pd-select__list::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.45); background-clip: content-box; }
html[data-theme="dark"] .pd-select__list::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.7); background-clip: content-box; }
html[data-theme="dark"] .pd-select__option { color: #f0e6d2; }
html[data-theme="dark"] .pd-select__option--placeholder { color: rgba(240, 230, 210, 0.55); }
html[data-theme="dark"] .pd-select__option:hover,
html[data-theme="dark"] .pd-select__option.is-active {
	background: rgba(212, 175, 55, 0.16);
	color: var(--pd-gold);
}
html[data-theme="dark"] .pd-select__option.is-selected {
	background: rgba(212, 175, 55, 0.22);
	color: var(--pd-gold);
}
html[data-theme="dark"] .pd-select__option.is-selected.is-active { background: rgba(212, 175, 55, 0.32); }
html[data-theme="dark"] .pd-select__empty { color: rgba(240, 230, 210, 0.5); }

/* Tablet: comfortable touch targets. */
@media (max-width: 991.98px) {
	.pd-select__option { padding: 12px 14px; }
	.pd-select__trigger { padding: 10px 13px; }
}
/* Mobile / small mobile: roomy taps, full-width popup handled by JS clamps. */
@media (max-width: 575.98px) {
	.pd-select__option { padding: 13px 14px; font-size: 0.92rem; }
	.pd-select__search-input { padding: 10px 12px; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
	.pd-select__panel { animation: none; }
	.pd-select__caret { transition: none; }
}

/* ── Sticky topic filter: scroll-linked fade ───────────────────────────
   site.js drives --pd-topic-fade from 1 down to a floor as the visitor
   reads past the pinned filter, and back up in reverse. Any interaction —
   hover, keyboard focus, or the open popup — restores full opacity so the
   filter is never hard to use. */
.pd-topic-filter {
	opacity: var(--pd-topic-fade, 1);
	transition: opacity 180ms ease;
}
.pd-topic-filter:hover,
.pd-topic-filter:focus-within,
.pd-topic-filter:has(.pd-select.is-open) {
	opacity: 1;
}

/* ── Sticky topic filter: glass effect while pinned ────────────────────
   site.js adds `.is-scrolled` to .pd-topic-filter once the sticky filter is
   stuck under the navbar. Only the trigger's BACKGROUND becomes translucent
   (with a soft backdrop blur) — text, caret and borders stay fully opaque,
   so the selected topic remains readable over the passing content. Scrolling
   back up removes the class and the same transition restores full opacity. */
.pd-topic-filter .pd-select__trigger {
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition:
		background-color 320ms ease,
		border-color 320ms ease,
		box-shadow 320ms ease,
		-webkit-backdrop-filter 320ms ease,
		backdrop-filter 320ms ease;
}
.pd-topic-filter.is-scrolled .pd-select__trigger {
	background: rgba(255, 253, 247, 0.72);
	border-color: rgba(184, 134, 11, 0.4);
	box-shadow: 0 8px 24px rgba(74, 31, 22, 0.12);
	-webkit-backdrop-filter: blur(9px) saturate(1.15);
	backdrop-filter: blur(9px) saturate(1.15);
}
html[data-theme="dark"] .pd-topic-filter.is-scrolled .pd-select__trigger {
	background: rgba(43, 20, 16, 0.72);
	border-color: rgba(212, 175, 55, 0.45);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* Full opacity returns the moment the visitor interacts with the filter. */
.pd-topic-filter.is-scrolled .pd-select__trigger:hover,
.pd-topic-filter.is-scrolled .pd-select__trigger:focus-visible,
.pd-topic-filter.is-scrolled .pd-select.is-open .pd-select__trigger {
	background: var(--pd-cream-white);
}
html[data-theme="dark"] .pd-topic-filter.is-scrolled .pd-select__trigger:hover,
html[data-theme="dark"] .pd-topic-filter.is-scrolled .pd-select__trigger:focus-visible,
html[data-theme="dark"] .pd-topic-filter.is-scrolled .pd-select.is-open .pd-select__trigger {
	background: #2b1410;
}
/* No backdrop-filter support (older browsers): keep the glass more solid so
   the passing content never fights the label. */
@supports not (backdrop-filter: blur(1px)) {
	.pd-topic-filter.is-scrolled .pd-select__trigger { background: rgba(255, 253, 247, 0.88); }
	html[data-theme="dark"] .pd-topic-filter.is-scrolled .pd-select__trigger { background: rgba(43, 20, 16, 0.88); }
}
/* The no-JS fallback (native select, no .pd-select wrapper) gets the same
   treatment on its own element. */
.pd-topic-filter.is-scrolled > .pd-filters__row > select {
	background: rgba(255, 253, 247, 0.72);
	-webkit-backdrop-filter: blur(9px) saturate(1.15);
	backdrop-filter: blur(9px) saturate(1.15);
}
html[data-theme="dark"] .pd-topic-filter.is-scrolled > .pd-filters__row > select {
	background: rgba(43, 20, 16, 0.72);
}

/* ── 404 — પૃષ્ઠ મળ્યું નથી ───────────────────────────────────────────
   Centered devotional composition in the standard chrome: lotus ring,
   display-font ૪૦૪ with a soft golden halo, ornament lines, the usual
   buttons. Faint ॐ marks drift behind, like the hero's accents. */
.pd-notfound {
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(100vh - 340px);
	padding: 150px 0 80px; /* clears the fixed navbar */
	text-align: center;
}
.pd-notfound-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 640px;
	margin: 0 auto;
}
.pd-notfound-icon { margin-bottom: 18px; }
.pd-notfound-code {
	margin: 0;
	font-family: var(--pd-font-display);
	font-size: clamp(4.6rem, 14vw, 7.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--pd-maroon);
	text-shadow: 0 0 34px rgba(244, 196, 48, 0.4), 0 4px 10px rgba(74, 31, 22, 0.12);
}
.pd-notfound-title { margin: 10px 0 12px; }
.pd-notfound-text {
	max-width: 54ch;
	margin: 18px 0 0;
	font-family: var(--pd-font-body);
	font-size: 1.02rem;
	line-height: 1.85;
	color: var(--pd-dark);
	opacity: 0.85;
}
.pd-notfound-actions { margin-top: 30px; }

/* The outline button was drawn for dark hero banners (white text) — over
   the 404's cream backdrop it needs the ink/gold treatment instead. Its
   golden hover/focus fill already works on both themes. */
.pd-notfound .pd-btn-outline {
	color: var(--pd-maroon);
	border-color: rgba(184, 134, 11, 0.65);
}
html[data-theme="dark"] .pd-notfound .pd-btn-outline {
	color: var(--pd-gold);
	border-color: rgba(212, 175, 55, 0.6);
}

/* The drifting sacred marks — decorative only, faint by design. */
.pd-notfound-om {
	position: absolute;
	font-family: var(--pd-font-display);
	color: var(--pd-gold-deep);
	opacity: 0.1;
	pointer-events: none;
	user-select: none;
}
.pd-notfound-om--1 { top: 24%; left: 8%; font-size: 4.5rem; transform: rotate(-8deg); }
.pd-notfound-om--2 { bottom: 16%; right: 9%; font-size: 3.4rem; transform: rotate(10deg); }

html[data-theme="dark"] .pd-notfound-code {
	color: var(--pd-gold);
	text-shadow: 0 0 34px rgba(212, 175, 55, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .pd-notfound-text { color: #e7d9c4; }
html[data-theme="dark"] .pd-notfound-om { opacity: 0.14; }

@media (max-width: 767.98px) {
	.pd-notfound { padding: 120px 0 60px; min-height: calc(100vh - 420px); }
	.pd-notfound-om--1 { left: 4%; font-size: 3.2rem; }
	.pd-notfound-om--2 { right: 5%; font-size: 2.6rem; }
}
@media (max-width: 575.98px) {
	.pd-notfound-actions { width: 100%; max-width: 320px; }
	.pd-notfound-actions .btn { width: 100%; }
}

/* ── Inline section loader ─────────────────────────────────────────────
   For section-level waits (small async work that should NOT raise the
   full-screen veil): drop <span class="pd-inline-spinner"></span> into the
   section, or call window.PDLoader.start()/stop() when the whole page must
   wait. A quiet golden ring in the site's own palette. */
.pd-inline-spinner {
	display: inline-block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 3px solid rgba(184, 134, 11, 0.2);
	border-top-color: var(--pd-gold-deep);
	animation: pd-inline-spin 0.8s linear infinite;
	vertical-align: middle;
}
html[data-theme="dark"] .pd-inline-spinner {
	border-color: rgba(212, 175, 55, 0.2);
	border-top-color: var(--pd-gold);
}
@keyframes pd-inline-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.pd-inline-spinner { animation-duration: 1.6s; }
}

/* ── Content-sync toast ────────────────────────────────────────────────
   A quiet "નવી માહિતી ઉપલબ્ધ છે…" pill shown for a moment before the page
   refreshes itself with the admin's latest content (pd-sync.js). */
.pd-sync-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 1200;
	transform: translateX(-50%) translateY(12px);
	padding: 10px 22px;
	border-radius: 50rem;
	border: 1px solid rgba(244, 196, 48, 0.45);
	background: rgba(43, 20, 16, 0.92);
	color: #fdf8ec;
	font-family: var(--pd-font-ui);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: 0 10px 26px rgba(74, 31, 22, 0.28);
	opacity: 0;
	pointer-events: none;
	transition: opacity 260ms ease, transform 260ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
.pd-sync-toast.is-on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
html[data-theme="dark"] .pd-sync-toast {
	background: rgba(30, 13, 10, 0.94);
	border-color: rgba(212, 175, 55, 0.5);
	color: #f2d48a;
}
@media (prefers-reduced-motion: reduce) {
	.pd-sync-toast { transition: opacity 150ms linear; transform: translateX(-50%); }
	.pd-sync-toast.is-on { transform: translateX(-50%); }
}

/* ── Floating back-to-top button ───────────────────────────────────────
   Hidden while reading the top of a page; fades in with a small rise once
   the visitor has scrolled, and floats back out when they return. Only
   opacity/transform animate, so it stays on the compositor. */
.pd-back-top {
	position: fixed;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 950; /* under the navbar (1000+) and lightbox */
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #d97706, #b8860b);
	color: #fff;
	cursor: pointer;
	box-shadow:
		0 10px 26px rgba(74, 31, 22, 0.28),
		0 3px 8px rgba(74, 31, 22, 0.18);
	opacity: 0;
	transform: translateY(14px) scale(0.85);
	pointer-events: none;
	transition: opacity 280ms ease-in-out, transform 280ms cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 200ms ease;
}
.pd-back-top svg { width: 18px; height: 18px; }
.pd-back-top.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.pd-back-top:hover {
	transform: translateY(-2px) scale(1.07);
	box-shadow:
		0 14px 32px rgba(74, 31, 22, 0.34),
		0 0 22px rgba(244, 196, 48, 0.45);
}
.pd-back-top:active { transform: translateY(0) scale(0.96); }
.pd-back-top:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px #fffdf7,
		0 0 0 6px rgba(217, 119, 6, 0.85);
}
html[data-theme="dark"] .pd-back-top {
	background: linear-gradient(135deg, #e8a23a, #d4af37);
	color: #2b1410;
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.45),
		0 0 18px rgba(212, 175, 55, 0.25);
}
@media (max-width: 991.98px) {
	.pd-back-top { right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 575.98px) {
	.pd-back-top { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.pd-back-top { transition: opacity 150ms linear; transform: none; }
	.pd-back-top.is-visible { transform: none; }
}

/* ── Full-viewport banners, site-wide ──────────────────────────────────
   Every page's hero/banner (the home hero AND the shared page banner)
   fills the whole visible screen; the content below begins after one
   scroll. Each page keeps its own title, lead, image and buttons — only
   the banner's height is unified. min-height (not a fixed height) so
   unusually tall content can never clip; svh so mobile browser bars don't
   cut the banner short. The existing flex centering, cover background,
   focal-point tweaks, overlays and entrance animations simply stretch. */
.pd-hero {
	min-height: 100vh;  /* fallback for browsers without svh */
	min-height: 100svh;
}

/* ── Home navbar: the brand arrives with the scroll ────────────────────
   On the home page the logo + પીપળીધામ text stay hidden while the bar
   rides transparently over the hero (scroll top), and fade/slide in the
   moment the bar turns solid — the SAME pd-navbar--solid state site.js
   already toggles (scroll > 40px, or the mobile menu opening), so the
   brand and the solid backdrop always appear together. The brand's slot
   collapses too (max-width/margin → 0), so the nav never shows a gap.
   Inner pages keep the brand always visible: this is scoped to .home. */
.home .pd-navbar .navbar-brand {
	max-width: 340px;
	overflow: hidden;
	white-space: nowrap;
	transition:
		opacity 280ms ease,
		transform 280ms ease,
		max-width 280ms ease,
		margin-right 280ms ease,
		visibility 0s linear 0s;
}
.home .pd-navbar:not(.pd-navbar--solid) .navbar-brand {
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	max-width: 0;
	margin-right: 0;
	pointer-events: none;
	/* let the fade-out finish before visibility flips */
	transition-delay: 0s, 0s, 0s, 0s, 280ms;
}
@media (prefers-reduced-motion: reduce) {
	.home .pd-navbar .navbar-brand { transition: none; }
}

/* Desktop home: the menu holds the TRUE center of the bar in both states —
   at the top it is centered with no brand beside it, and when the brand
   fades in on scroll the links do not move at all (no layout jump), with
   દર્શને પધારો and the controls staying pinned right. Scoped to xl+ where
   the row layout exists; the mobile hamburger flow is untouched. */
@media (min-width: 1200px) {
	.home .pd-navbar .container { position: relative; }
	.home .pd-navbar .navbar-nav {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}
	/* The CTA keeps its right-side seat now that the list is out of flow. */
	.home .pd-navbar .navbar-collapse > .d-flex { margin-left: auto; }
}

/* ── Navbar controls (language + theme) in the bar itself ─────────────
   Mobile/tablet: logo · controls · hamburger on one row, always visible.
   Desktop: flex order tucks the controls after the menu + CTA, restoring
   the original right-edge placement. */
.pd-nav-controls { order: 1; }
.pd-toggler { order: 2; }
.pd-navbar .navbar-collapse { order: 3; }
@media (min-width: 1200px) {
	.pd-navbar .navbar-brand { order: 0; }
	.pd-navbar .navbar-collapse { order: 1; }
	.pd-nav-controls { order: 2; margin-left: 12px; }
}
@media (max-width: 1199.98px) {
	.pd-nav-controls { margin-left: auto; margin-right: 12px; }
	.pd-nav-controls .pd-lang-btn { padding: 6px 14px; }
}
@media (max-width: 400px) {
	/* Small phones: keep one clean row — tighter brand + controls. */
	.pd-brand-text { font-size: 1.05rem; }
	.pd-brand-logo { width: 40px; }
	.pd-nav-controls { margin-right: 8px; gap: 6px !important; }
	.pd-nav-controls .pd-lang-btn { padding: 5px 10px; font-size: 0.72rem; }
}

/* ── Footer legal links (Privacy · Terms) ──────────────────────────── */
.pd-footer-legal {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 14px 0 4px;
	font-family: var(--pd-font-ui);
	font-size: 0.82rem;
}
.pd-footer-legal a {
	color: inherit;
	opacity: 0.85;
	text-decoration: none;
	transition: color 0.25s ease, opacity 0.25s ease;
}
.pd-footer-legal a:hover { color: var(--pd-gold); opacity: 1; }
.pd-footer-legal__sep { opacity: 0.4; }

/* ── Legal / policy pages ──────────────────────────────────────────── */
.pd-legal__body { max-width: 880px; }

/* Privacy Policy · Terms & Conditions read as ONE continuous document:
   the per-topic card dressing (panel background, golden border, top
   gradient bar, hover lift) is stripped and only spacing plus each
   heading's own gradient underline separate the topics. The topic-jump
   dropdown and its golden arrival glow keep working on the same ids. */
.pd-legal .pd-content-block {
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin-bottom: 40px;
	overflow: visible;
}
.pd-legal .pd-content-block::before { display: none; }
.pd-legal .pd-content-block:hover {
	transform: none;
	box-shadow: none;
}
.pd-legal .pd-content-block:last-of-type { margin-bottom: 8px; }
@media (max-width: 575.98px) {
	.pd-legal .pd-content-block { margin-bottom: 30px; }
}
.pd-legal-updated {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 30px 0 6px;
	font-family: var(--pd-font-ui);
	font-size: 0.88rem;
	color: var(--pd-dark);
	opacity: 0.8;
}
.pd-legal-updated__icon { display: inline-flex; color: var(--pd-gold-deep); }
.pd-legal-updated__icon svg { width: 18px; height: 18px; }
.pd-legal-updated time { font-weight: 600; letter-spacing: 0.02em; }
html[data-theme="dark"] .pd-legal-updated { color: #e7d9c4; }
html[data-theme="dark"] .pd-legal-updated__icon { color: var(--pd-gold); }
@media (max-width: 575.98px) {
	.pd-legal-updated { font-size: 0.82rem; margin-top: 24px; }
}

/* ── Footer social buttons ─────────────────────────────────────────── */
.pd-footer-social {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 26px 0 6px;
}
.pd-social-btn {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(212, 175, 55, 0.45);
	color: #e8d9b8;
	background: rgba(255, 255, 255, 0.05);
	transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 220ms ease, color 180ms ease, border-color 180ms ease;
}
.pd-social-btn svg { width: 18px; height: 18px; }
.pd-social-btn:hover,
.pd-social-btn:focus-visible {
	transform: translateY(-3px) scale(1.08);
	color: #fff;
	border-color: rgba(244, 196, 48, 0.9);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), 0 0 18px rgba(244, 196, 48, 0.35);
	outline: none;
}
.pd-social-btn--youtube:hover  { color: #ff4a45; }
.pd-social-btn--instagram:hover { color: #ff77a9; }
.pd-social-btn--facebook:hover { color: #7aa7ff; }
@media (prefers-reduced-motion: reduce) {
	.pd-social-btn { transition: none; }
	.pd-social-btn:hover { transform: none; }
}

/* ── Hero focal point: keep the mandir centered on small screens ───────
   The hero photo is a wide panorama with the temple at ~31% from the left.
   On phones/tablets only a narrow slice is visible, so these focal points
   place the shikhar (with its flag) in the middle of the frame. Computed
   from the image geometry per breakpoint; desktop stays as designed. */
@media (max-width: 575.98px) {
	.pd-hero-bg { background-position: 27% 50% !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
	.pd-hero-bg { background-position: 24% 50% !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.pd-hero-bg { background-position: 18% 50% !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Home timings — three devotional visual panels.
   મંગળા આરતી · મંદિર દર્શન (center, featured — open 24 hours) · સંધ્યા
   આરતી. Each panel is an admin-managed photo in the theme's standard card
   frame (golden border, 22px radius, --pd-shadow-md, dark veil for text,
   slow hover zoom — the gallery/bhajan card language). Small lit diyas
   (the hero's flame on a golden bowl) mark the aarti panels; the featured
   center panel carries the golden-ring lotus and a soft gold halo.
   ══════════════════════════════════════════════════════════════════════ */
.pd-timings-panels {
	display: grid;
	grid-template-columns: 1fr 1.18fr 1fr;
	gap: 26px;
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
}
.pd-timings-panel {
	position: relative;
	overflow: hidden;
	min-height: 280px;
	border-radius: 22px;
	border: 1px solid rgba(184, 134, 11, 0.3);
	box-shadow: var(--pd-shadow-md);
	/* The bhajan-thumb dusk gradient shows until a photo is set. */
	background: linear-gradient(135deg, #2a1a10, #4a2c17);
	transition: var(--pd-transition);
}
.pd-timings-panel:hover {
	transform: translateY(-6px);
	border-color: rgba(184, 134, 11, 0.55);
	box-shadow: var(--pd-shadow-gold);
}
.pd-timings-panel--featured {
	min-height: 336px;
	border-color: rgba(244, 196, 48, 0.5);
	box-shadow: 0 0 0 5px rgba(244, 196, 48, 0.18), var(--pd-shadow-gold);
}
.pd-timings-panel--featured:hover {
	border-color: rgba(244, 196, 48, 0.8);
	box-shadow: 0 0 0 7px rgba(244, 196, 48, 0.14), var(--pd-shadow-gold);
}

.pd-timings-panel-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.pd-timings-panel:hover .pd-timings-panel-img { transform: scale(1.06); }

/* Readability veil — the album-card veil, deepened toward the text. */
.pd-timings-panel-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(43, 20, 16, 0.9), rgba(43, 20, 16, 0.35) 52%, rgba(43, 20, 16, 0.06));
	pointer-events: none;
}

.pd-timings-panel-body {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	padding: 22px 24px;
	color: #fdf8ec;
}
.pd-timings-panel--featured .pd-timings-panel-body {
	align-items: center;
	text-align: center;
	padding-bottom: 26px;
}

/* A small standing diya: the hero's floating flame, resting on a golden
   bowl. Decorative only. */
.pd-timings-diya {
	position: relative;
	width: 44px;
	height: 42px;
	flex: none;
	margin-bottom: 4px;
}
.pd-timings-diya-flame {
	position: absolute;
	left: 50%;
	top: 2px;
	width: 12px;
	height: 17px;
	transform: translateX(-50%);
	border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
	background: radial-gradient(circle at 50% 72%, #fff7d6 0 22%, #f4c430 45%, rgba(217, 119, 6, 0.85) 78%, transparent);
	box-shadow: 0 0 12px 3px rgba(244, 196, 48, 0.5), 0 0 30px 9px rgba(217, 119, 6, 0.2);
	animation: pd-timings-flame 2.8s ease-in-out infinite;
	transform-origin: 50% 100%;
}
.pd-timings-diya-bowl {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 34px;
	height: 14px;
	transform: translateX(-50%);
	border-radius: 0 0 34px 34px / 0 0 24px 24px;
	background: var(--pd-grad-gold);
	box-shadow: 0 4px 10px rgba(184, 134, 11, 0.35);
}
.pd-timings-diya-bowl::before {
	content: "";
	position: absolute;
	top: 0;
	left: -3px;
	right: -3px;
	height: 2px;
	border-radius: 2px;
	background: var(--pd-gold-deep);
}
@keyframes pd-timings-flame {
	0%, 100% { transform: translateX(-50%) scale(1); }
	50%      { transform: translateX(-50%) scale(1.06, 0.94); }
}

.pd-timings-panel-name {
	margin: 0;
	font-family: var(--pd-font-head);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-shadow: 0 2px 12px rgba(43, 20, 16, 0.6);
}
.pd-timings-panel--featured .pd-timings-panel-name { font-size: 1.45rem; }

/* Time — the album media-badge pill: dark glass, golden hairline. */
.pd-timings-panel-time {
	display: inline-flex;
	align-items: center;
	padding: 5px 15px;
	border-radius: 50rem;
	border: 1px solid rgba(244, 196, 48, 0.28);
	background: rgba(43, 20, 16, 0.72);
	color: var(--pd-gold);
	font-family: var(--pd-font-head);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* The 24-hour darshan message. */
.pd-timings-panel-note {
	margin: 0;
	max-width: 36ch;
	font-family: var(--pd-font-body);
	font-size: 0.98rem;
	line-height: 1.7;
	color: #fdf8ec;
	text-shadow: 0 1px 8px rgba(43, 20, 16, 0.65);
}

/* Featured lotus in the golden ring (the fest-ledger-icon dressing). */
.pd-timings-panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	background: hsla(0, 0%, 100%, 0.14);
	border: 1px solid rgba(244, 196, 48, 0.45);
	color: var(--pd-gold);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.pd-timings-panel-icon svg {
	width: 24px;
	height: 24px;
}

/* Dark mode — golden borders deepen, shadows go night-dark; the photos
   and veils already carry the evening palette. */
html[data-theme="dark"] .pd-timings-panel {
	border-color: rgba(212, 175, 55, 0.32);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .pd-timings-panel:hover { border-color: rgba(212, 175, 55, 0.6); }
html[data-theme="dark"] .pd-timings-panel--featured {
	border-color: rgba(212, 175, 55, 0.55);
	box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.16), 0 10px 30px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .pd-timings-panel--featured:hover { border-color: rgba(212, 175, 55, 0.85); }

/* Tablet: મંદિર દર્શન keeps its prominence as a full-width panel above the
   two aarti panels (the natural 2+1). */
@media (max-width: 991.98px) {
	.pd-timings-panels {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		align-items: stretch;
	}
	.pd-timings-panel { min-height: 250px; }
	.pd-timings-panel--featured {
		order: -1;
		grid-column: 1 / -1;
		min-height: 264px;
	}
}

/* Mobile: stacked in schedule order — મંગળા આરતી, મંદિર દર્શન, સંધ્યા
   આરતી. Compact spacing, no horizontal overflow. */
@media (max-width: 767.98px) {
	.pd-timings-panels { grid-template-columns: 1fr; gap: 18px; }
	.pd-timings-panel { min-height: 230px; }
	.pd-timings-panel--featured {
		order: 0;
		grid-column: auto;
		min-height: 262px;
	}
	.pd-timings-panel-body { padding: 18px 18px 20px; }
	.pd-timings-panel-name { font-size: 1.18rem; }
	.pd-timings-panel--featured .pd-timings-panel-name { font-size: 1.32rem; }
}
@media (max-width: 575.98px) {
	.pd-timings-panel-time { white-space: normal; }
	.pd-timings-panel-note { font-size: 0.94rem; }
}
@media (prefers-reduced-motion: reduce) {
	.pd-timings-diya-flame { animation: none; }
	.pd-timings-panel-img { transition: none; }
	.pd-timings-panel:hover .pd-timings-panel-img { transform: none; }
}

/* 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;
	}
}

/* Hero/banner: no sun-ray shine from the top edge. */
.pd-hero::after { content: none; }

/* 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; }
}

/* ==========================================================================
   ગૂગલ લોકેશન — the map block on "કેવી રીતે પહોંચવું".

   The section inside is the home page's location part verbatim, so it needs no
   layout rules of its own; these only turn the surrounding content card into a
   cream panel that lets the white map frame read against it.
   ========================================================================== */

.pd-map-block {
	position: relative;
	overflow: hidden;
	padding: clamp(20px, 2.6vw, 40px);
	border: 1px solid rgba(184, 134, 11, 0.3);
	border-radius: 28px;
	background:
		radial-gradient(ellipse 70% 60% at 88% 8%, rgba(244, 196, 48, 0.16), transparent 68%),
		radial-gradient(ellipse 60% 50% at 6% 96%, rgba(217, 119, 6, 0.09), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23b8860b' stroke-width='1' opacity='0.16'%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3Cpath d='M60 30c6 10 6 20 0 30-6-10-6-20 0-30zM60 90c6-10 6-20 0-30-6 10-6 20 0 30zM30 60c10-6 20-6 30 0-10 6-20 6-30 0zM90 60c-10-6-20-6-30 0 10 6 20 6 30 0zM39 39c11-3 18 4 21 21-17-3-24-10-21-21zM81 81c-11 3-18-4-21-21 17 3 24 10 21 21zM81 39c3 11-4 18-21 21 3-17 10-24 21-21zM39 81c-3-11 4-18 21-21-3 17-10 24-21 21z'/%3E%3C/g%3E%3C/svg%3E") center / 120px 120px repeat,
		var(--pd-bg);
	box-shadow: var(--pd-shadow-md);
}

/* No accent bar and no hover lift — this panel reads as a section, not a card. */
.pd-map-block::before { content: none; }

.pd-map-block:hover {
	transform: none;
	border-color: rgba(184, 134, 11, 0.42);
	box-shadow: var(--pd-shadow-lg);
}

/* A soft golden bloom behind the map, kept inside the rounded corners. */
.pd-map-block__glow {
	position: absolute;
	inset: auto auto -30% -18%;
	width: 55%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 196, 48, 0.22), transparent 68%);
	pointer-events: none;
}

/* The row sits above the bloom. */
.pd-map-block > .row { position: relative; }

@media (max-width: 991.98px) {
	.pd-map-block {
		padding: clamp(16px, 4vw, 26px);
		border-radius: 22px;
	}

	.pd-map-block__glow { display: none; }
}

html[data-theme=dark] .pd-map-block {
	border-color: rgba(212, 175, 55, 0.32);
	background:
		radial-gradient(ellipse 70% 60% at 88% 8%, rgba(244, 196, 48, 0.1), transparent 68%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d97706' stroke-width='1' opacity='0.28'%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3Cpath d='M60 30c6 10 6 20 0 30-6-10-6-20 0-30zM60 90c6-10 6-20 0-30-6 10-6 20 0 30zM30 60c10-6 20-6 30 0-10 6-20 6-30 0zM90 60c-10-6-20-6-30 0 10 6 20 6 30 0zM39 39c11-3 18 4 21 21-17-3-24-10-21-21zM81 81c-11 3-18-4-21-21 17 3 24 10 21 21zM81 39c3 11-4 18-21 21 3-17 10-24 21-21zM39 81c-3-11 4-18 21-21-3 17-10 24-21 21z'/%3E%3C/g%3E%3C/svg%3E") center / 120px 120px repeat,
		#331d15;
}

/* ===== Audit fixes (2026-08) ===== */
/* WCAG 2.5.5: minimum 44x44 interactive targets for header controls & back-to-top. */
.pd-lang-btn,.pd-theme-btn,.navbar-toggler.pd-toggler{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.pd-back-top{width:44px;height:44px}
/* Clear BOTH the fixed nav and the sticky topic filter when jumping to a darshan place. */
[id^="pd-topic-"]{scroll-margin-top:165px}
/* Comfortable reading measure so long history prose doesn't run edge-to-edge on wide screens. */
.pd-story-para,.pd-story-list,.pd-story-quote,.pd-closing{max-width:46rem}