/* ============================================================
   SHS — Premium Alpine Cinematic Effects
   Additive layer — always loads after style.css
   ============================================================ */

/* ---- HEADER BRAND ---- */

.brand-logo { height: 80px !important; }
.footer-brand-logo { height: 72px !important; }
@media (max-width: 600px) {
  .brand-logo { height: 60px !important; }
  .footer-brand-logo { height: 56px !important; }
}
.brand,
.site-header:not(.scrolled) .brand,
body.light-header .site-header:not(.scrolled) .brand { color: var(--ink) !important; }
.brand .name,
.brand .sub {
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.brand .it-mark { font-style: normal !important; color: var(--ink) !important; }
.site-header:not(.scrolled) .brand .it-mark,
.site-header:not(.scrolled) .brand .sub { color: var(--ink) !important; }

/* ---- ABOUT PAGE ---- */
.about-facts--bar {
  margin: 0 var(--px) clamp(44px,9vw,72px);
  max-width: calc(760px + 2 * var(--px));
}

/* ---- CONTENT TYPOGRAPHY — Inter Tight throughout (excl. header/footer) ---- */
h1, h2, h3, h4 {
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}
footer h4 {
  font-family: 'Cormorant Garamond', serif !important;
  letter-spacing: 0 !important;
}

/* ---- HERO ATMOSPHERE ---- */

/* Warm sunrise glow using the hero's ::after pseudo-element */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 85% 65% at 28% 76%,
    rgba(217, 148, 104, 0.11) 0%,
    rgba(185, 91, 58,  0.05) 42%,
    transparent 66%
  );
  animation: heroGlowPulse 13s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* Layered mist on the background image */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    176deg,
    transparent            40%,
    rgba(18, 28, 24, 0.17) 62%,
    rgba(170,145,115, 0.07) 80%,
    transparent            100%
  );
  animation: mistDrift 23s ease-in-out infinite alternate;
}

/* Atmosphere container (added in index.php) */
.hero-atmo {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-atmo-glow {
  position: absolute;
  top: 18%; left: 0; width: 62%; height: 72%;
  background: radial-gradient(
    ellipse at 36% 62%,
    rgba(255, 210, 175, 0.10) 0%,
    rgba(185,  91,  58, 0.04) 46%,
    transparent 68%
  );
  animation: heroGlowPulse 15s ease-in-out 2s infinite alternate;
  mix-blend-mode: screen;
}
.hero-atmo-mist {
  position: absolute;
  bottom: 0; left: -5%; right: -5%; height: 52%;
  background: linear-gradient(
    0deg,
    rgba(16, 26, 22, 0.24) 0%,
    rgba(140,120,100, 0.06) 45%,
    transparent 100%
  );
  animation: mistDrift 28s ease-in-out 4s infinite alternate;
  transform-origin: bottom center;
}
.hero-atmo-mist-2 {
  position: absolute;
  bottom: 20%; left: -8%; right: -8%; height: 30%;
  background: radial-gradient(
    ellipse 100% 58% at 50% 100%,
    rgba(185, 91, 58, 0.06) 0%,
    transparent 72%
  );
  animation: mistDrift2 34s ease-in-out infinite alternate;
}

@keyframes heroGlowPulse {
  from { opacity: 0.55; transform: scale(1)    translate(0,   0); }
  to   { opacity: 1;    transform: scale(1.07) translate(2%, -1%); }
}
@keyframes mistDrift {
  from { transform: translateX(-2%) scaleX(1.03); opacity: 0.78; }
  to   { transform: translateX( 2%) scaleX(0.97); opacity: 1; }
}
@keyframes mistDrift2 {
  from { transform: translateX( 1%) scale(1);    opacity: 0.65; }
  to   { transform: translateX(-2%) scale(1.05); opacity: 1; }
}

/* ---- HERO STATS — GLASS PANELS ---- */

/* Override the existing plain border-top separator style */
.hero-meta {
  padding-top: 0;
  border-top: none;
  gap: 10px;
  margin-top: 34px;
}
.hero-meta > div {
  background: rgba(12, 22, 18, 0.32);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(245, 241, 234, 0.15);
  border-radius: 14px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition:
    background     0.45s ease,
    border-color   0.45s ease,
    transform      0.5s  cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Top-edge shimmer */
.hero-meta > div::before {
  content: '';
  position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 241, 234, 0.32), transparent);
  pointer-events: none;
}
/* Warm glow that appears on hover */
.hero-meta > div::after {
  content: '';
  position: absolute; bottom: -35%; left: -15%; right: -15%; height: 65%;
  background: radial-gradient(ellipse, rgba(185, 91, 58, 0.10) 0%, transparent 72%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.hero-meta > div:hover {
  background: rgba(12, 22, 18, 0.46);
  border-color: rgba(245, 241, 234, 0.26);
  transform: translateY(-5px);
}
.hero-meta > div:hover::after { opacity: 1; }

@media (min-width: 900px) {
  .hero-meta { gap: 14px; }
  .hero-meta > div { padding: 24px 30px; }
}

/* ---- SECTION AMBIENT BACKGROUND — REVIEWS ---- */

.reviews { position: relative; overflow: hidden; }
.reviews > * { position: relative; z-index: 1; }

.reviews::before {
  content: '';
  position: absolute;
  top: -12%; left: -4%; width: 54%; height: 58%;
  background: radial-gradient(ellipse, rgba(185, 91, 58, 0.055) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  animation: ambientFloat 26s ease-in-out infinite alternate;
}
.reviews::after {
  content: '';
  position: absolute;
  bottom: -8%; right: -4%; width: 48%; height: 54%;
  background: radial-gradient(ellipse, rgba(31, 43, 36, 0.08) 0%, transparent 62%);
  pointer-events: none; z-index: 0;
  animation: ambientFloat 32s ease-in-out 7s infinite alternate;
}
@keyframes ambientFloat {
  from { transform: translate(0,   0  ) scale(1); }
  to   { transform: translate(4%,  5% ) scale(1.10); }
}

/* ---- REVIEW CARDS — GLASS DEPTH ---- */

.review-card {
  background: rgba(248, 245, 240, 0.88);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.60);
  border-radius: 20px;
  box-shadow:
    0 2px 12px rgba(31, 43, 36, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  transform-style: preserve-3d;
  will-change: transform;
  /* JS will override this on tilt; keep as fallback for touch */
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s ease;
}
.review-card:hover {
  box-shadow:
    0 22px 70px rgba(31, 43, 36, 0.13),
    0  4px 20px rgba(31, 43, 36, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  transform: translateY(-6px);
}
/* Top-edge shimmer */
.review-card::before {
  content: '';
  position: absolute; top: 0; left: 22%; right: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.88), transparent);
  pointer-events: none;
}

/* ---- REVIEW STARS ---- */
.stars-sm {
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

/* ---- LOCATION GALLERY DEPTH ---- */

.locations-gallery { overflow: hidden; }

/* Gallery slides get scale-active class from JS */
.gallery-slide {
  transition: opacity 1.2s ease, transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform: scale(1);
}
.gallery-slide.scale-active { transform: scale(1.045); }

/* Inner vignette depth */
.locations-gallery::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(31, 43, 36, 0.18) 0%,
      transparent 22%,
      transparent 78%,
      rgba(31, 43, 36, 0.22) 100%),
    linear-gradient(90deg,
      rgba(31, 43, 36, 0.12) 0%,
      transparent 18%,
      transparent 82%,
      rgba(31, 43, 36, 0.10) 100%);
}

/* ---- LOCATION LINKS — REFINED HOVER ---- */

.location-link {
  border-radius: 4px;
  transition:
    padding     0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    background  0.4s ease;
}
.location-link:hover { background: rgba(31, 43, 36, 0.04); }

/* ---- APARTMENT MEDIA — IMAGE DEPTH ON HOVER ---- */

.apt-media { overflow: hidden; }
.apt-media .slider-slide {
  transition: opacity 1s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.apt-section:hover .apt-media .slider-slide.active { transform: scale(1.04); }

/* ---- SERVICES CARDS ENHANCED ---- */

.svc-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.svc-card:hover {
  transform: translateY(-7px) scale(1.008) rotate(0.2deg);
  box-shadow:
    0 32px 80px -16px rgba(185, 91, 58, 0.27),
    0  0   0    1px  rgba(185, 91, 58, 0.22);
}

/* ---- CTA STRIP — ALPINE GLOW ---- */

.cta-strip { position: relative; overflow: hidden; }
.cta-strip::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 90% at 50% 115%, rgba(185, 91, 58, 0.26) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 16% 45%,  rgba(185, 91, 58, 0.07) 0%, transparent 62%);
  animation: ctaGlowMove 20s ease-in-out infinite alternate;
}
.cta-strip > * { position: relative; z-index: 1; }
@keyframes ctaGlowMove {
  from { opacity: 0.65; transform: scale(1)    rotate(-1.5deg); }
  to   { opacity: 1;    transform: scale(1.12) rotate( 1.5deg); }
}
/* Enhanced CTA button */
.cta-strip .btn-hero {
  box-shadow: 0 8px 32px rgba(245, 241, 234, 0.14);
  transition:
    transform   0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    background  0.3s,
    color       0.3s,
    box-shadow  0.35s;
}
.cta-strip .btn-hero:hover {
  box-shadow: 0 16px 48px rgba(185, 91, 58, 0.30);
}

/* ---- MAGNETIC BUTTONS — remove CSS hover translateY on pointer devices ---- */
/* JS magnetic effect replaces the lift; keep translateY for touch-only */
@media (hover: hover) {
  .btn-hero:hover,
  .btn-book:hover { transform: none; }
}
/* Arrow still moves within any transform context */
.btn-hero:hover .arrow,
.btn-book:hover .arrow { transform: translateX(5px); }

/* ---- MAP SECTION TOP-BLEND ---- */

.map-section { position: relative; }
.map-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 80px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, var(--cream) 0%, transparent 100%);
}

/* ---- FOOTER BOTTOM — 3-col layout ---- */
.footer-bottom {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
}
.footer-legal { justify-self: end; }

/* ---- FOOTER CREDIT — matches .footer-copy typography ---- */
.footer-credit {
  justify-self: center;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(245,241,234,.5);
  white-space: nowrap;
}
.footer-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.footer-credit a:hover { color: var(--cream); border-bottom-color: currentColor; }

/* ---- FOOTER LEGAL — right padding to clear WhatsApp button ---- */
.footer-legal { padding-right: 76px; }
@media (min-width: 720px) { .footer-legal { padding-right: 92px; } }

@media (max-width: 600px) {
  .footer-bottom { grid-template-columns: 1fr 1fr !important; row-gap: 8px; }
  .footer-credit { grid-column: 1 / -1; justify-self: center; }
  .footer-legal { padding-right: 76px; }
}

/* ---- FOOTER AMBIENT DEPTH ---- */

footer { position: relative; overflow: hidden; }
footer::before {
  content: '';
  position: absolute; top: -28%; left: -8%; width: 52%; height: 52%;
  background: radial-gradient(ellipse, rgba(185, 91, 58, 0.065) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  animation: ambientFloat 30s ease-in-out 4s infinite alternate;
}
footer > * { position: relative; z-index: 1; }

/* ---- ENHANCED REVEAL MOTION ---- */
.section-title.reveal { transform: translateY(22px); }
.section-label.reveal { transform: translateY(14px); }

/* ---- LOCAL GUIDE SPACING FIX ---- */
.local-guide .section-title { margin-bottom: clamp(36px, 5vw, 56px) !important; }

/* ---- PARALLAX PERFORMANCE HINTS ---- */
.hero-bg,
.hero-inner,
.hero-tag,
.hero-atmo { will-change: transform; }

/* ---- LEAFLET MAP ---- */
#shs-map { height: 500px; width: 100%; background: #ede8e0; }
@media (max-width: 600px) { #shs-map { height: 360px; } }
.shs-marker { background: none !important; border: none !important; }
.leaflet-popup-content-wrapper {
  border-radius: 10px !important;
  box-shadow: 0 8px 40px rgba(31,43,36,.14), 0 1px 0 rgba(207,199,182,.6) !important;
  border: 1px solid rgba(207,199,182,.45) !important;
  padding: 0 !important;
  background: #faf8f4 !important;
}
.leaflet-popup-content { margin: 0 !important; }
.leaflet-popup-tip { background: #faf8f4 !important; }
.leaflet-popup-tip-container { display: none; }
.shs-popup { font-family: 'Inter Tight', sans-serif; padding: 16px 20px 14px; }
.shs-popup-name { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; margin-bottom: 3px; }
.shs-popup-desc { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.45; }
.shs-popup-link { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); text-decoration: none; transition: opacity .25s; }
.shs-popup-link:hover { opacity: .7; }
.leaflet-control-attribution { font-size: 10px !important; }

/* Permanent pin labels */
.leaflet-tooltip.shs-label {
  background: rgba(250, 248, 244, 0.94);
  border: none !important;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(31, 43, 36, 0.18);
  color: #1F2B24;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 9px;
  white-space: nowrap;
}
.leaflet-tooltip.shs-label::before { display: none !important; }

/* ---- MOBILE NAV FIXES ---- */
@media (max-width: 899px) {
  /* Remove all divider lines between menu items */
  .nav-wrap li,
  .nav-wrap li:first-child { border: none; }
  .dropdown-menu a { border-top: none; }

  /* Solid background on the drawer itself */
  .nav-wrap {
    background: #f5f1ea !important;
    z-index: 200;
  }

  /* When the nav is open, strip the header's backdrop-filter and semi-transparent
     background. iOS Safari composites .nav-wrap (a DOM child) inside the header's
     glass layer — removing backdrop-filter from the header breaks that link and
     makes the drawer fully opaque. JS toggles .nav-open on #header. */
  .site-header.nav-open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #f5f1ea !important;
    transition: none !important;
  }
}

/* ---- REDUCED MOTION OVERRIDES ---- */
@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .hero-bg::after,
  .hero-atmo-glow,
  .hero-atmo-mist,
  .hero-atmo-mist-2,
  .reviews::before,
  .reviews::after,
  footer::before,
  .cta-strip::before {
    animation: none !important;
  }
  .hero-bg,
  .hero-inner,
  .hero-tag,
  .hero-atmo {
    will-change: auto !important;
    transform: none !important;
  }
  .hero-meta > div,
  .review-card,
  .svc-card,
  .gallery-slide,
  .apt-media .slider-slide {
    transition: none !important;
  }
  .hero-meta > div:hover,
  .review-card:hover,
  .svc-card:hover { transform: none !important; }
}