/* Verdant Stay Custom Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --brand-forest: #2E5E3B;
  --brand-sage: #4A6B50;
  --brand-offWhite: #F8F9F5;
  --brand-grayGreen: #4B5D52;
  --brand-gray: #E5E7EB;
  --brand-white: #FFFFFF;
}

body {
  font-family: 'Outfit', 'Inter', sans-serif;
  background-color: var(--brand-offWhite);
  color: #000000;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--brand-offWhite);
}
::-webkit-scrollbar-thumb {
  background: var(--brand-forest);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-sage);
}

/* Luxury Glassmorphism elements */
.glass-nav {
  position: relative;
  z-index: 100;
  width: 100%;
  background: rgba(255, 255, 255, 0.95); /* White frosted backdrop */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.5); /* Soft gray */
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-nav.sticky-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 40 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
}

/* Sticky Navbar state (Activated ONLY after scrolling past hero section) */
.glass-nav.is-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
  animation: slideDownNav 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDownNav {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Journey Log Category Pill Hover Fix */
.journey-cat-pill {
  transition: all 0.2s ease-in-out;
}

.journey-cat-pill:not(.bg-brand-forest):hover {
  border-color: var(--brand-forest, #2E5E3B) !important;
  background-color: rgba(46, 94, 59, 0.05) !important;
  color: var(--brand-forest, #2E5E3B) !important;
}

.journey-cat-pill.bg-brand-forest {
  background-color: var(--brand-forest, #2E5E3B) !important;
  color: #ffffff !important;
  border-color: var(--brand-forest, #2E5E3B) !important;
}

.journey-cat-pill.bg-brand-forest:hover {
  background-color: var(--brand-forest, #2E5E3B) !important;
  color: #ffffff !important;
  border-color: var(--brand-forest, #2E5E3B) !important;
  opacity: 0.92;
}

.glass-card {
  background: rgba(255, 255, 255, 0.8); /* White translucent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(229, 231, 235, 0.8); /* Soft gray */
  box-shadow: 0 4px 6px -1px rgba(46, 94, 59, 0.05), 0 2px 4px -1px rgba(46, 94, 59, 0.03);
}

.glass-card-dark {
  background: rgba(248, 249, 245, 0.95); /* OffWhite */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(229, 231, 235, 1);
  box-shadow: 0 10px 15px -3px rgba(46, 94, 59, 0.1), 0 4px 6px -2px rgba(46, 94, 59, 0.05);
}

/* Custom cursor outer ring transition parameters (Removed custom cursor styling to restore default browser cursor) */

/* ==========================================
   CINEMATIC 3D ENTRANCE ANIMATION & VFX
   ========================================== */

/* 3D Scene viewport */
.scene-3d {
  perspective: 1200px;
}

/* Volumetric Card Box */
.card-3d-box {
  width: 140px;
  height: 140px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg) scale(0.3);
  animation: logoIntroSpin 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Z-stacked volumetric layers */
.card-3d-face {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Increment layers along Z axis to simulate thickness */
.face-layer-0 { transform: translateZ(0px); background: #967C27; border: 1px solid rgba(255,255,255,0.1); }
.face-layer-1 { transform: translateZ(1px); background: #AA8C2C; }
.face-layer-2 { transform: translateZ(2px); background: #BE9D32; }
.face-layer-3 { transform: translateZ(3px); background: #D4AF37; }
.face-layer-4 { transform: translateZ(4px); background: #D4AF37; }
.face-layer-5 { 
  transform: translateZ(5px); 
  background: var(--brand-gold);
  border: 2px solid white;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Gold Halo Aura glow keyframes */
@keyframes glowPulse {
  0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.4; }
  50% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.4; }
}

.halo-glow {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(212,175,55,0.45) 0%, rgba(212,175,55,0) 70%);
  filter: blur(15px);
  border-radius: 50%;
  animation: glowPulse 2.5s ease-in-out infinite;
  z-index: -1;
}

/* Logo spin and scaling entry */
@keyframes logoIntroSpin {
  0% {
    transform: rotateY(0deg) scale(0.4);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: rotateY(360deg) scale(1.1);
  }
}

/* Typography fade-in sequence */
@keyframes textBloom {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.intro-text-bloom {
  opacity: 0;
  animation: textBloom 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

/* Handoff transition container classes */
#intro-logo-container {
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%) scale(1);
}

/* Glide trajectory coordinates targeting the navbar logo */
#intro-logo-container.handoff-glide {
  top: 40px;
  left: 110px; /* Aligns to desktop logo horizontal bounds */
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Adjust mobile glide horizontal target center */
@media (max-width: 1024px) {
  #intro-logo-container.handoff-glide {
    left: 100px;
    top: 40px;
  }
}

/* Main Site Content fade-in control */
#main-site-content {
  transition: opacity 0.6s ease;
}

/* Homepage Only Entrance Animations */
@keyframes homeFadeInUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-animate-fade-in-up {
  animation: homeFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Micro-interaction: Nav link hover line */
.nav-link-underline {
  position: relative;
}
.nav-link-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--brand-gold);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}
.nav-link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Active Nav State */
.nav-link-active {
  color: var(--brand-gold) !important;
}
.nav-link-active::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(1);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--brand-gold);
}

/* Heart icon pulsing scale */
@keyframes heartPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.heart-pulse {
  animation: heartPulse 0.4s ease-in-out;
}

/* Button Shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.btn-shimmer {
  background: linear-gradient(90deg, var(--brand-gold) 25%, #E5C054 50%, var(--brand-gold) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Pricing Range slider adjustments */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #E5DDF0;
  border-radius: 9999px;
  height: 6px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-gold);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: var(--brand-gold-dark);
}

/* Hide scrollbar utility */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Date picker customization */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.3);
  cursor: pointer;
}

/* Global mobile responsiveness constraints — prevents real-device viewport zoom */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  /* Prevent iOS overscroll zoom */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  /* Prevent iOS bounce and scale glitch */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
}

/* Mobile drawer overlay pointer events helper */
#mobile-drawer-overlay {
  pointer-events: none;
}
#mobile-drawer-overlay.opacity-100 {
  pointer-events: auto;
}

/* Force solid premium background for mobile drawer navigation */
#mobile-drawer {
  background-color: var(--brand-offWhite) !important;
  box-shadow: -10px 0 25px -5px rgba(46, 94, 59, 0.15), -4px 0 10px -5px rgba(46, 94, 59, 0.1) !important;
}

/* Guest Selector Dropdown Layering Fix */
#hero-search-card {
  position: relative !important;
  z-index: 40 !important;
}

#hero-guests-dropdown {
  z-index: 9999 !important;
}

/* Homepage Hero Slider dark premium overlay styling */
.hero-slider-container {
  background-color: #121212 !important; /* Dark background behind image to prevent light bleed through */
}
.hero-slider-overlay {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%) !important; /* Soft light overlay for readability on left-aligned text */
}

.font-serif {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* =========================================================
   GLOBAL TEXT COLOR CHANGE: Green Text → Black Text Only
   ========================================================= */

/* Body default text color */
body {
  color: #000000 !important;
}

/* Global override for green text classes to black (excluding buttons, button contents, icons, site title) */
.text-brand-forest:not(button):not(button *):not(.btn):not(a[class*="btn"]):not(input[type="button"]):not(input[type="submit"]):not(i):not(svg):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.fa):not(#navbar-logo-wrapper *):not(#intro-logo-text *):not(.brand-title *):not(.site-title *):not(.brand-logo *),
.text-brand-sage:not(button):not(button *):not(.btn):not(a[class*="btn"]):not(input[type="button"]):not(input[type="submit"]):not(i):not(svg):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.fa):not(#navbar-logo-wrapper *):not(#intro-logo-text *):not(.brand-title *):not(.site-title *):not(.brand-logo *),
.text-brand-grayGreen:not(button):not(button *):not(.btn):not(a[class*="btn"]):not(input[type="button"]):not(input[type="submit"]):not(i):not(svg):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.fa):not(#navbar-logo-wrapper *):not(#intro-logo-text *):not(.brand-title *):not(.site-title *):not(.brand-logo *),
[class*="text-green-"]:not(button):not(button *):not(.btn):not(a[class*="btn"]):not(input[type="button"]):not(input[type="submit"]):not(i):not(svg):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.fa):not(#navbar-logo-wrapper *):not(#intro-logo-text *):not(.brand-title *):not(.site-title *):not(.brand-logo *),
[class*="text-emerald-"]:not(button):not(button *):not(.btn):not(a[class*="btn"]):not(input[type="button"]):not(input[type="submit"]):not(i):not(svg):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.fa):not(#navbar-logo-wrapper *):not(#intro-logo-text *):not(.brand-title *):not(.site-title *):not(.brand-logo *) {
  color: #000000 !important;
}

.hover\:text-brand-forest:hover:not(button):not(button *):not(.btn):not(a[class*="btn"]):not(input[type="button"]):not(input[type="submit"]):not(i):not(svg):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.fa):not(#navbar-logo-wrapper *):not(#intro-logo-text *):not(.brand-title *):not(.site-title *):not(.brand-logo *),
.hover\:text-brand-sage:hover:not(button):not(button *):not(.btn):not(a[class*="btn"]):not(input[type="button"]):not(input[type="submit"]):not(i):not(svg):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.fa):not(#navbar-logo-wrapper *):not(#intro-logo-text *):not(.brand-title *):not(.site-title *):not(.brand-logo *),
.hover\:text-brand-grayGreen:hover:not(button):not(button *):not(.btn):not(a[class*="btn"]):not(input[type="button"]):not(input[type="submit"]):not(i):not(svg):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.fa):not(#navbar-logo-wrapper *):not(#intro-logo-text *):not(.brand-title *):not(.site-title *):not(.brand-logo *),
[class*="hover:text-green-"]:hover:not(button):not(button *):not(.btn):not(a[class*="btn"]):not(input[type="button"]):not(input[type="submit"]):not(i):not(svg):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.fa):not(#navbar-logo-wrapper *):not(#intro-logo-text *):not(.brand-title *):not(.site-title *):not(.brand-logo *),
[class*="hover:text-emerald-"]:hover:not(button):not(button *):not(.btn):not(a[class*="btn"]):not(input[type="button"]):not(input[type="submit"]):not(i):not(svg):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.fa):not(#navbar-logo-wrapper *):not(#intro-logo-text *):not(.brand-title *):not(.site-title *):not(.brand-logo *) {
  color: #000000 !important;
}

/* Explicit Protection for Site Title / Brand Title */
#navbar-logo-wrapper span,
#intro-logo-text h2,
.brand-title,
.site-title,
.brand-logo {
  color: #4B5D52 !important;
}
#navbar-logo-wrapper span .text-\[\#B23A3A\],
#intro-logo-text h2 .text-\[\#B23A3A\],
.brand-title .text-\[\#B23A3A\],
.site-title .text-\[\#B23A3A\],
.brand-logo .text-\[\#B23A3A\] {
  color: #B23A3A !important;
}



/* =========================================================
   FLUID RESPONSIVE HERO TYPOGRAPHY & LAYOUT (MOBILE & DESKTOP)
   ========================================================= */
.hero-title-fluid {
  font-size: clamp(1.65rem, 5.2vw + 0.2rem, 4.75rem) !important;
  line-height: 1.12 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: manual !important;
}

.hero-subtitle-fluid {
  font-size: clamp(0.875rem, 1.8vw + 0.2rem, 1.35rem) !important;
  line-height: 1.45 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 640px) {
  .hero-text-slide {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}