/**
 * HLV landing page — brand alignment with login/book
 * Load after inline styles in hidden-leaf-village.html
 */

@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.1.0/files/mona-sans-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --white: #ffffff;
  --surface: #fafbfc;
  --mint: #60ce80;
  --mint-light: #78d89a;
  --mint-deep: #4fb86e;
  --navy: #001540;
  --navy-soft: #0a2558;
  --navy-deep: #000f30;
  --forest-deep: #001540;
  --forest-mid: #001a4d;
  --forest-light: #60ce80;
  --cream: #ffffff;
  --stone: rgba(0, 21, 64, 0.55);
  --terracotta: #60ce80;
  --gold: #60ce80;
  --earth: #4a9e6a;
  --sage: rgba(96, 206, 128, 0.45);
  --sheen-top: rgba(255, 255, 255, 0.72);
  --sheen-edge: rgba(255, 255, 255, 0.35);
}

body,
h1, h2, h3, h4,
.logo,
.footer-title,
.property-title,
.modal-header h2,
.form-group label,
.collection-intro h2 {
  font-family: 'Mona Sans', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--navy);
  background:
    radial-gradient(ellipse 110% 70% at 50% -15%, rgba(96, 206, 128, 0.045) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(0, 21, 64, 0.025) 0%, transparent 50%),
    linear-gradient(180deg, var(--surface) 0%, var(--white) 35%, var(--white) 100%);
}

/* Nav */
nav {
  background: linear-gradient(180deg, rgba(0, 21, 64, 0.98) 0%, rgba(0, 15, 48, 0.94) 100%) !important;
  border-bottom-color: rgba(96, 206, 128, 0.15) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 24px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

/* Village tour: fixed nav + archive banner clearance */
body:has(.vt-archive-banner) .hero {
  min-height: calc(100dvh - var(--vt-banner-height, 2.75rem)) !important;
}

.mobile-menu {
  background: rgba(0, 21, 64, 0.98) !important;
}

.nav-links a:hover {
  color: var(--mint) !important;
}

.logo span {
  background: linear-gradient(168deg, var(--mint-light) 0%, var(--mint) 42%, var(--mint-deep) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 600 !important;
}

.nav-cta {
  background: linear-gradient(180deg, var(--mint-light) 0%, var(--mint) 48%, var(--mint-deep) 100%) !important;
  color: var(--navy-deep) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 0 var(--sheen-edge) inset, 0 4px 18px rgba(96, 206, 128, 0.35) !important;
}

.nav-cta:hover {
  background: linear-gradient(180deg, var(--white) 0%, var(--surface) 100%) !important;
  color: var(--navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 20px rgba(96, 206, 128, 0.35) !important;
}

/* Hero overlay */
.hero-image-wrapper::after,
.hero-image-loading,
.hero-image-wrapper {
  background: linear-gradient(
    135deg,
    rgba(0, 21, 64, 0.88) 0%,
    rgba(0, 21, 64, 0.78) 45%,
    rgba(96, 206, 128, 0.25) 100%
  ) !important;
}

.hero-image-wrapper::after {
  background: linear-gradient(
    135deg,
    rgba(0, 21, 64, 0.85) 0%,
    rgba(0, 26, 77, 0.75) 50%,
    rgba(96, 206, 128, 0.35) 100%
  ) !important;
}

@media (max-width: 768px) {
  .hero-image-wrapper {
    background: linear-gradient(
      135deg,
      rgba(0, 21, 64, 0.9) 0%,
      rgba(0, 21, 64, 0.82) 50%,
      rgba(96, 206, 128, 0.3) 100%
    ) !important;
  }
}

.hero::before {
  background:
    radial-gradient(circle at 30% 70%, rgba(96, 206, 128, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.06) 0%, transparent 32%) !important;
}

.hero h1,
.hero .hero-title,
.hero-content h1 {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 40px rgba(96, 206, 128, 0.08) !important;
}

.hero-tagline {
  background: linear-gradient(168deg, var(--mint-light) 0%, var(--mint) 42%, var(--mint-deep) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.btn-primary {
  background: linear-gradient(180deg, var(--mint-light) 0%, var(--mint) 48%, var(--mint-deep) 100%) !important;
  color: var(--navy-deep) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 0 var(--sheen-edge) inset, 0 4px 18px rgba(96, 206, 128, 0.35) !important;
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--white) 0%, var(--surface) 100%) !important;
  color: var(--navy) !important;
  border-color: var(--white) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 22px rgba(96, 206, 128, 0.38) !important;
}

.btn-secondary {
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.btn-secondary:hover {
  background: var(--mint) !important;
  color: var(--navy) !important;
  border-color: var(--mint) !important;
}

/* Sections */
.section-tag,
.collection-name {
  background: linear-gradient(168deg, var(--mint-light) 0%, var(--mint) 42%, var(--mint-deep) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 700 !important;
}

.collection-section:nth-child(even) {
  background: linear-gradient(180deg, rgba(96, 206, 128, 0.07) 0%, rgba(96, 206, 128, 0.04) 100%) !important;
}

.explore-btn {
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

.explore-btn:hover {
  background: linear-gradient(180deg, var(--mint-light) 0%, var(--mint) 100%) !important;
  color: var(--navy-deep) !important;
  box-shadow: 0 1px 0 var(--sheen-edge) inset !important;
}

.booking-btn {
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%) !important;
  border-radius: 999px !important;
  color: var(--white) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

.booking-btn:hover {
  background: linear-gradient(180deg, var(--mint-light) 0%, var(--mint) 100%) !important;
  color: var(--navy-deep) !important;
  box-shadow: 0 1px 0 var(--sheen-edge) inset !important;
}

.booking-icon svg {
  fill: var(--navy) !important;
}

.amenity-icon svg {
  fill: var(--navy) !important;
}

.property-detail-btn,
.carousel-btn {
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

.property-detail-btn:hover,
.carousel-btn:hover {
  background: linear-gradient(180deg, var(--mint-light) 0%, var(--mint) 100%) !important;
  color: var(--navy-deep) !important;
  box-shadow: 0 1px 0 var(--sheen-edge) inset !important;
}

.form-submit {
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

.form-submit:hover {
  background: linear-gradient(180deg, var(--mint-light) 0%, var(--mint) 100%) !important;
  color: var(--navy-deep) !important;
  box-shadow: 0 1px 0 var(--sheen-edge) inset !important;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--mint) !important;
}

.success-icon {
  background: linear-gradient(180deg, var(--mint-light) 0%, var(--mint) 100%) !important;
  color: var(--navy-deep) !important;
  box-shadow: 0 1px 0 var(--sheen-edge) inset !important;
}

.success-modal-content .btn {
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

.success-modal-content .btn:hover {
  background: linear-gradient(180deg, var(--mint-light) 0%, var(--mint) 100%) !important;
  color: var(--navy-deep) !important;
  box-shadow: 0 1px 0 var(--sheen-edge) inset !important;
}

/* Footer */
footer {
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}

.footer-brand span {
  background: linear-gradient(168deg, var(--mint-light) 0%, var(--mint) 42%, var(--mint-deep) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-style: normal !important;
}

.footer-links a:hover {
  color: var(--mint) !important;
}

/* Accordion / property accents */
.toggle-icon.active,
.section-header-toggle.active {
  color: var(--mint);
}

.property-price {
  color: var(--navy) !important;
}