/* Theme overrides for Arayal Resorts. */

/* 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 Cormorant Garamond and Manrope. */
:root {
	--font-inter: 'Manrope', system-ui, -apple-system, sans-serif;
	--font-playfair: 'Cormorant Garamond', Georgia, serif;
}

body, button, input, select, textarea {
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6, .font-display {
	font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Give display headings a clean architectural presence. */
.font-display {
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Sharp, square corners for a distinctive editorial look. */
.rounded-sm,
.rounded-full,
.btn-primary,
.btn-outline {
	border-radius: 0 !important;
}

/* Premium reciprocal button styling */
.btn-primary {
	background-color: #b89047 !important;
	color: #ffffff !important;
	border: 1.5px solid #b89047 !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	letter-spacing: 0.15em !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
}
.btn-primary:hover {
	background-color: transparent !important;
	color: #b89047 !important;
	border-color: #b89047 !important;
}
.btn-outline {
	background-color: transparent !important;
	color: #b89047 !important;
	border: 1.5px solid #b89047 !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	letter-spacing: 0.15em !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
}
.btn-outline:hover {
	background-color: #b89047 !important;
	color: #ffffff !important;
}

/* --- Pristine Gold & White palette ---------------------------------------
   The compiled theme.css ships the orchid-teal tokens as hardcoded utility
   classes. These later-loading rules (equal specificity) remap them to the
   pristine luxury white-level gold/charcoal theme of Arayal Resorts. */

/* Accent: warm gold/brass. */
.text-orchid-gold,
.group:hover .group-hover\:text-orchid-gold {
	color: #b89047;
}
.bg-orchid-gold {
	background-color: #b89047;
}
.border-orchid-gold {
	border-color: #b89047;
}
.hover\:text-orchid-gold:hover {
	color: #b89047;
}
.hover\:bg-orchid-gold:hover {
	background-color: #a47e3a;
}
.hover\:border-orchid-gold:hover {
	border-color: #b89047;
}
.focus\:border-orchid-gold:focus {
	border-color: #b89047;
}
.fill-orchid-gold {
	fill: #b89047;
}

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

/* Dark: soft charcoal/zinc. */
.text-orchid-charcoal {
	color: #18181b;
}
.text-orchid-charcoal\/50 {
	color: rgba(24, 24, 27, 0.5);
}
.text-orchid-charcoal\/60 {
	color: rgba(24, 24, 27, 0.6);
}
.text-orchid-charcoal\/70 {
	color: rgba(24, 24, 27, 0.7);
}
.text-orchid-charcoal\/80 {
	color: rgba(24, 24, 27, 0.8);
}
.hover\:text-orchid-charcoal:hover {
	color: #18181b;
}
.bg-orchid-charcoal {
	background-color: #18181b;
}
.bg-orchid-charcoal\/80 {
	background-color: rgba(24, 24, 27, 0.8);
}
.bg-orchid-charcoal\/95 {
	background-color: rgba(24, 24, 27, 0.95);
}
.bg-orchid-charcoal\/98 {
	background-color: rgba(24, 24, 27, 0.98);
}

/* Light: clean white. */
.bg-orchid-cream {
	background-color: #ffffff;
}
.bg-orchid-cream-dark {
	background-color: #fafaf9;
}
.border-orchid-cream-dark {
	border-color: #e7e5e4;
}

/* Kill the leftover light-gray body background. */
html {
	background-color: #ffffff;
}
body {
	background-color: #ffffff;
}

/* Fixed header admin offset */
body.admin-bar #site-header {
	top: 0;
}
@media screen and (max-width: 782px) {
	body.admin-bar #site-header {
		top: 0;
	}
}

/* Custom header Book Now button to match the mockup */
.btn-header-book {
	border-radius: 0 !important;
	background-color: #b89047 !important;
	color: #ffffff !important;
	padding: 10px 24px !important;
	font-size: 13px !important;
	border: 1.5px solid #b89047 !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-header-book:hover {
	background-color: transparent !important;
	color: #b89047 !important;
	border-color: #b89047 !important;
}

/* Deep bands: warm charcoal. */
.bg-orchid-ocean {
	background-color: #18181b;
}
.bg-orchid-ocean-dark {
	background-color: #0f0f11;
}
.bg-orchid-navy {
	background-color: #18181b;
}
.hover\:text-orchid-navy:hover {
	color: #18181b;
}

/* Soft neutral shadows. */
.shadow-sm {
	box-shadow: 0 2px 12px rgba(24, 24, 27, 0.05);
}
.shadow-lg {
	box-shadow: 0 12px 32px rgba(24, 24, 27, 0.1);
}

/* Desktop dropdown menus open on hover. */
#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 scrolled. */
#site-header.is-scrolled {
	border-bottom: 1px solid rgba(184, 144, 71, 0.28);
}

/* Reveal-on-scroll */
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 delay. */
.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; }

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

@keyframes hotelFadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* --- Identity touches --- */

/* Selection + scrollbar. */
::selection {
	background: rgba(184, 144, 71, 0.22);
}
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: #ffffff;
}
::-webkit-scrollbar-thumb {
	background: #b89047;
}

/* Subtle gold line divider under section headings. */
.valley-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 22px auto 0;
	max-width: 280px;
}
.valley-divider::before,
.valley-divider::after {
	content: '';
	flex: 1 1 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(184, 144, 71, 0.6));
}
.valley-divider::after {
	background: linear-gradient(to left, transparent, rgba(184, 144, 71, 0.6));
}
.valley-divider svg {
	width: 22px;
	height: 22px;
	color: #b89047;
	flex: 0 0 auto;
}

/* --- Room Card Slider Styles --- */
.room-card-slider .slider-arrow,
.room-image-slider .slider-arrow {
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.2s ease, background-color 0.2s ease;
}
.room-card-slider:hover .slider-arrow,
.room-image-slider:hover .slider-arrow,
.room-image-slider:focus-within .slider-arrow {
	opacity: 1;
}

/* JIT-proof spacing to prevent fixed header from covering top of secondary pages */
body:not(.home) main > section:first-of-type {
	padding-top: 7rem !important;
}
@media (min-width: 1024px) {
	body:not(.home) main > section:first-of-type {
		padding-top: 9.5rem !important;
	}
}

/* Elegant header link underlines on hover */
#desktop-nav a {
	position: relative;
	transition: color 0.3s ease;
}
#desktop-nav a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 1.5px;
	background-color: #b89047;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}
#desktop-nav a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Solid solid header background on secondary pages for readability */
body:not(.home) #site-header {
	background-color: #18181b !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* --- Premium Room Card hover actions --- */
article.group,
article.reveal {
	transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
	border: 1px solid #e7e5e4 !important;
}
article.group:hover,
article.reveal:hover {
	border-color: #b89047 !important;
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(24, 24, 27, 0.08) !important;
}

/* --- Gallery Filter Tabs --- */
.gallery-filters {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 48px;
}
.gallery-filter-btn {
	background: transparent;
	border: 1.5px solid #e7e5e4;
	color: #18181b;
	padding: 10px 24px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	border-radius: 0;
}
.gallery-filter-btn:hover,
.gallery-filter-btn.active {
	border-color: #b89047;
	color: #b89047;
}

/* --- Gallery grid items filtering transition --- */
.gallery-grid-item {
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	transform: scale(1);
	opacity: 1;
}
.gallery-grid-item.fade-out {
	transform: scale(0.9);
	opacity: 0;
	position: absolute;
	pointer-events: none;
	width: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
}