/* Theme overrides for Novotel Imagicaa Khopoli. */

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

/* Rounded, premium corners for a modern luxury beach resort feel. */
.rounded-sm {
	border-radius: 12px;
}
.btn-primary,
.btn-outline {
	border-radius: 9999px; /* Premium capsule buttons */
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(197, 155, 39, 0.35);
}
.btn-outline:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}

/* --- Seaside Navy & Gold palette -----------------------------------------
   Remaps hardcoded utility classes to the new premium seaside scheme. */

/* Accent: royal gold. */
.text-orchid-gold,
.group:hover .group-hover\:text-orchid-gold {
	color: #c59b27;
}
.bg-orchid-gold {
	background-color: #c59b27;
}
.border-orchid-gold {
	border-color: #c59b27;
}
.hover\:text-orchid-gold:hover {
	color: #c59b27;
}
.hover\:bg-orchid-gold:hover {
	background-color: #a8811b;
}
.hover\:border-orchid-gold:hover {
	border-color: #c59b27;
}
.focus\:border-orchid-gold:focus {
	border-color: #c59b27;
}
.fill-orchid-gold {
	fill: #c59b27;
}

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

/* Dark: deep slate/navy. */
.text-orchid-charcoal {
	color: #0f172a;
}
.text-orchid-charcoal\/50 {
	color: rgba(15, 23, 42, 0.5);
}
.text-orchid-charcoal\/60 {
	color: rgba(15, 23, 42, 0.6);
}
.text-orchid-charcoal\/70 {
	color: rgba(15, 23, 42, 0.7);
}
.text-orchid-charcoal\/80 {
	color: rgba(15, 23, 42, 0.8);
}
.hover\:text-orchid-charcoal:hover {
	color: #0f172a;
}
.bg-orchid-charcoal {
	background-color: #0f172a;
}
.bg-orchid-charcoal\/80 {
	background-color: rgba(15, 23, 42, 0.8);
}
.bg-orchid-charcoal\/95 {
	background-color: rgba(15, 23, 42, 0.95);
}
.bg-orchid-charcoal\/98 {
	background-color: rgba(15, 23, 42, 0.98);
}

/* Light: warm sand cream. */
.bg-orchid-cream {
	background-color: #faf7f2;
}
.bg-orchid-cream-dark {
	background-color: #f0e9dd;
}
.border-orchid-cream-dark {
	border-color: #e5dac6;
}

/* Deep bands: midnight ocean. */
.bg-orchid-ocean {
	background-color: #0a1128;
}
.bg-orchid-ocean-dark {
	background-color: #050b1a;
}
.bg-orchid-navy {
	background-color: #090e1c;
}
.hover\:text-orchid-navy:hover {
	color: #090e1c;
}

/* Neutral shadows that suit the navy & gold scheme. */
.shadow-sm {
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}
.shadow-lg {
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

/* Card lift, scaling transitions, and smooth hover micro-animations */
article.group,
a.reveal.group {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
article.group:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
}
a.reveal.group:hover {
	transform: scale(1.02);
}

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

/* Gold hairline under the fixed header once the page is scrolled. */
#site-header.is-scrolled {
	border-bottom: 1px solid rgba(216, 178, 112, 0.28);
}

/* Reveal-on-scroll. Hidden only when JS is available (html.js) so the site
   is fully visible without JavaScript. */
html.js .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}
html.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Staggered cascade inside grids that carry .reveal-stagger. */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 0.48s; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 0.56s; }
.reveal-stagger > .reveal:nth-child(9) { transition-delay: 0.64s; }
.reveal-stagger > .reveal:nth-child(10) { transition-delay: 0.72s; }
.reveal-stagger > .reveal:nth-child(11) { transition-delay: 0.8s; }
.reveal-stagger > .reveal:nth-child(12) { transition-delay: 0.88s; }
.reveal-stagger > .reveal:nth-child(13) { transition-delay: 0.96s; }
.reveal-stagger > .reveal:nth-child(14) { transition-delay: 1.04s; }

@media (prefers-reduced-motion: reduce) {
	html.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

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

/* --- Blog single post content styles -------------------------------------- */
.entry-content p {
	margin-bottom: 1.5rem;
	line-height: 1.8;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--font-playfair);
	color: #0f172a;
	font-weight: 600;
	margin-top: 2.5rem;
	margin-bottom: 1.25rem;
	line-height: 1.4;
}
.entry-content h2 { font-size: 2rem; }
.entry-content h3 { font-size: 1.6rem; }
.entry-content h4 { font-size: 1.25rem; }

.entry-content blockquote {
	font-family: var(--font-playfair);
	font-style: italic;
	font-size: 1.25rem;
	border-left: 4px solid #c59b27;
	padding-left: 1.5rem;
	margin: 2.5rem 0;
	color: #0f172a;
}
.entry-content ul {
	list-style-type: disc;
	padding-left: 1.5rem;
	margin-bottom: 1.5rem;
}
.entry-content ol {
	list-style-type: decimal;
	padding-left: 1.5rem;
	margin-bottom: 1.5rem;
}
.entry-content li {
	margin-bottom: 0.5rem;
	line-height: 1.7;
}
.entry-content a {
	color: #c59b27;
	text-decoration: underline;
	transition: color 0.3s;
}
.entry-content a:hover {
	color: #a8811b;
}
.entry-content img {
	border-radius: 12px;
	margin: 2.5rem 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}