/* Theme overrides for Shree Krishana Dharamshala Trust. */

/* The hero trust badge is intentionally omitted for this site. */
section.relative > div > span:last-child { display: none; }

/* Self-hosted variable fonts (latin subset). */
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/cormorant-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/cormorant-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/manrope-var.woff2') format('woff2');
}

/* Swap the compiled font tokens to the dharamshala pairing. */
:root {
	--font-inter: 'Manrope', system-ui, -apple-system, sans-serif;
	--font-playfair: 'Cormorant Garamond', Georgia, serif;
}

/* Cormorant renders light, so give display headings a little more presence. */
.font-display {
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Warm, soft shapes instead of crisp squared corners. */
.rounded-sm {
	border-radius: 12px;
}

/* Pill-shaped buttons. */
.btn-primary,
.btn-outline {
	border-radius: 9999px;
}

/* --- Saffron palette -----------------------------------------------------
   The compiled theme.css ships the orchid-teal tokens as hardcoded utility
   classes. These later-loading rules (equal specificity) remap them to the
   warm saffron/maroon scheme of the dharamshala. */

/* Accent: saffron. */
.text-orchid-gold,
.group:hover .group-hover\:text-orchid-gold {
	color: #f97316;
}
.bg-orchid-gold {
	background-color: #f97316;
}
.border-orchid-gold {
	border-color: #f97316;
}
.hover\:text-orchid-gold:hover {
	color: #f97316;
}
.hover\:bg-orchid-gold:hover {
	background-color: #ea580c;
}
.hover\:border-orchid-gold:hover {
	border-color: #f97316;
}
.focus\:border-orchid-gold:focus {
	border-color: #f97316;
}
.fill-orchid-gold {
	fill: #f97316;
}

/* Accent alpha variants. */
.bg-orchid-gold\/10 {
	background-color: rgba(249, 115, 22, 0.1);
}
.bg-orchid-gold\/20 {
	background-color: rgba(249, 115, 22, 0.2);
}
.text-orchid-gold\/20 {
	color: rgba(249, 115, 22, 0.2);
}
.border-orchid-gold\/20 {
	border-color: rgba(249, 115, 22, 0.2);
}
.border-orchid-gold\/30 {
	border-color: rgba(249, 115, 22, 0.3);
}
.hover\:bg-orchid-gold\/10:hover {
	background-color: rgba(249, 115, 22, 0.1);
}

/* Dark: deep maroon-brown. */
.text-orchid-charcoal {
	color: #2b1a12;
}
.text-orchid-charcoal\/50 {
	color: rgba(43, 26, 18, 0.5);
}
.text-orchid-charcoal\/60 {
	color: rgba(43, 26, 18, 0.6);
}
.text-orchid-charcoal\/70 {
	color: rgba(43, 26, 18, 0.7);
}
.text-orchid-charcoal\/80 {
	color: rgba(43, 26, 18, 0.8);
}
.hover\:text-orchid-charcoal:hover {
	color: #2b1a12;
}
.bg-orchid-charcoal {
	background-color: #2b1a12;
}
.bg-orchid-charcoal\/80 {
	background-color: rgba(43, 26, 18, 0.8);
}
.bg-orchid-charcoal\/95 {
	background-color: rgba(43, 26, 18, 0.95);
}
.bg-orchid-charcoal\/98 {
	background-color: rgba(43, 26, 18, 0.98);
}

/* Light: warm cream. */
.bg-orchid-cream {
	background-color: #fbf3e4;
}
.bg-orchid-cream-dark {
	background-color: #f1e2c4;
}
.border-orchid-cream-dark {
	border-color: #e6d3ac;
}

/* Deep bands: maroon-brown. */
.bg-orchid-ocean {
	background-color: #7c2d12;
}
.bg-orchid-ocean-dark {
	background-color: #4a1a08;
}
.bg-orchid-navy {
	background-color: #3b1507;
}
.hover\:text-orchid-navy:hover {
	color: #3b1507;
}

/* Gentle warm shadows that suit the palette. */
.shadow-sm {
	box-shadow: 0 2px 12px rgba(90, 40, 15, 0.06);
}
.shadow-lg {
	box-shadow: 0 12px 32px rgba(90, 40, 15, 0.14);
}

/* Desktop dropdown menus open on hover (the compiled utility CSS hides them by default). */
#desktop-nav li:hover > .dropdown-menu,
#desktop-nav li:focus-within > .dropdown-menu {
	display: block;
}

/* Keep dropdowns above page content. */
#desktop-nav .dropdown-menu {
	z-index: 60;
}

/* Mobile menu panel sits below the fixed header. */
#mobile-menu {
	z-index: 55;
}

/* Simple reveal animations (static-site parity is best-effort; no JS motion
   library is loaded, so keyframes mirror the tailwind animation tokens). */
@keyframes hotelFadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* --- Krishna / temple identity -------------------------------------------
   Distinctive motifs for Shree Krishana Dharamshala Trust: a peacock-feather
   divider, a temple-shikhara skyline and a kolam/mandala pattern. */

/* Ornamental divider: diamond-tipped rules flanking a peacock feather. */
.peacock-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 22px auto 0;
	max-width: 280px;
}
.peacock-divider::before,
.peacock-divider::after {
	content: '';
	flex: 1 1 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(201, 162, 75, 0.8));
}
.peacock-divider::after {
	background: linear-gradient(to left, transparent, rgba(201, 162, 75, 0.8));
}
.peacock-divider svg {
	width: 22px;
	height: 22px;
	color: #c9a24b;
	flex: 0 0 auto;
}

/* Temple shikhara skyline strip (pure CSS spires). */
.temple-skyline {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 46px;
	overflow: hidden;
	gap: 10px;
}
.temple-skyline .spire {
	width: 26px;
	height: 100%;
	background: linear-gradient(to top, rgba(201, 162, 75, 0.55), rgba(201, 162, 75, 0.05));
	-webkit-clip-path: polygon(50% 0%, 62% 22%, 100% 22%, 100% 100%, 0% 100%, 0% 22%, 38% 22%);
	clip-path: polygon(50% 0%, 62% 22%, 100% 22%, 100% 100%, 0% 100%, 0% 22%, 38% 22%);
}
.temple-skyline .spire.short { height: 68%; opacity: 0.7; }
.temple-skyline .spire.tall  { height: 88%; }

/* Kolam / mandala corner pattern for cream sections. */
.mandala-bg {
	background-image:
		radial-gradient(circle at 12% 20%, rgba(201, 162, 75, 0.14) 0, rgba(201, 162, 75, 0.14) 2px, transparent 2px),
		radial-gradient(circle at 88% 80%, rgba(201, 162, 75, 0.14) 0, rgba(201, 162, 75, 0.14) 2px, transparent 2px);
	background-size: 34px 34px;
}

/* Peacock-feather curl used as a flourish behind headings. */
.feather-flourish {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	margin-right: 0.35em;
	color: #c9a24b;
}

/* Warm gold hairlines around key cards for a temple-handicraft feel. */
.hem-border {
	border: 1px solid rgba(201, 162, 75, 0.35);
	border-bottom: 3px solid rgba(201, 162, 75, 0.55);
}

/* Footer crown: a faint shikhara strip sitting along the very top edge. */
.footer-skyline {
	height: 34px;
}
.footer-skyline .spire {
	width: 30px;
	background: linear-gradient(to top, rgba(201, 162, 75, 0.28), rgba(201, 162, 75, 0.02));
}

/* Selection + scrollbar tinted to the saffron/gold scheme. */
::selection {
	background: rgba(249, 115, 22, 0.25);
}
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: #fbf3e4;
}
::-webkit-scrollbar-thumb {
	background: #c9a24b;
	border-radius: 9999px;
}

/* --- Sacred phrases marquee -----------------------------------------------
   A slow, self-repeating devotional ticker that needs no JavaScript. Two
   identical groups of phrases are tiled inside one track and scrolled by the
   keyframe, so the seam is invisible and the strip loops seamlessly. */
.marquee-strip {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-bordered {
	border-top: 1px solid rgba(201, 162, 75, 0.3);
	border-bottom: 1px solid rgba(201, 162, 75, 0.3);
}
.marquee-track {
	white-space: nowrap;
	animation: marqueeScroll 46s linear infinite;
	will-change: transform;
}
.marquee-item {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: rgba(249, 115, 22, 0.85);
	padding: 0.75rem 1.25rem;
	gap: 1.25rem;
}
.marquee-om {
	color: rgba(201, 162, 75, 0.55);
}
@media (min-width: 768px) {
	.marquee-item {
		font-size: 0.875rem;
	}
}
.marquee-group {
	flex: 0 0 auto;
}
@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee-track {
		animation: none;
	}
}

/* Scroll-reveal: elements are gently eased in as they enter the viewport.
   The body gets the `js` class from main.js, so content stays visible when
   JavaScript is disabled. */
.js .reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.reveal-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Back-to-top floating button. */
.back-to-top {
	position: fixed;
	bottom: 6rem;
	right: 1.5rem;
	z-index: 40;
	width: 46px;
	height: 46px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #c9a24b;
	box-shadow: 0 10px 24px rgba(90, 40, 15, 0.28);
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.back-to-top-icon {
	transform: rotate(180deg);
}
.back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}
.back-to-top:hover {
	background: #f97316;
}