/* ============================================
   IOS-COMPAT.CSS — Safari & iOS Compatibility
   Targeted fixes for iPhone Safari
   Loaded last to override where needed
   ============================================ */

/* ---- 1. Safe Area Insets (iPhone notch / home bar) ---- */
/* Support both env() [iOS 11.2+] and constant() [iOS 11.0–11.2] */

.nav-sheet {
  /* Dual-value fallback for older iOS 11 */
  bottom: calc(12px + constant(safe-area-inset-bottom));
  bottom: calc(12px + env(safe-area-inset-bottom));
}

@media (max-width: 480px) {
  .nav-sheet {
    bottom: calc(8px + constant(safe-area-inset-bottom));
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* Ensure body padding for home indicator on full-screen apps */
body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- 2. Momentum Scrolling on Overflow Containers ---- */
/* Required for smooth touch-scroll on iOS */

.gallery__masonry,
.experiences__nav,
.nav-sheet__grid,
.why-choose__bento,
.testimonials__track,
.packages__grid,
[data-scroll-container] {
  -webkit-overflow-scrolling: touch;
}

/* ---- 3. Tap Highlight Removal ---- */
/* Remove the grey flash on tap for iOS Safari */
a,
button,
[role="button"],
.btn,
.nav-sheet__item,
.navbar__link,
.navbar__toggle,
.hero__control,
.experiences__nav-btn,
.gallery__item,
.wc-card,
.skiing__package-card,
.rentals__card,
.transport__card,
.packages__card,
.testimonials__card,
.trekking__card,
.chat-popup__btn,
.chat-popup__close {
  -webkit-tap-highlight-color: transparent;
}

/* ---- 4. Input Zoom Prevention on iOS ---- */
/* iOS zooms in if font-size < 16px on any input */
input,
select,
textarea {
  font-size: 16px !important;
}

/* ---- 5. -webkit-backdrop-filter Completeness ---- */
/* Any element using backdrop-filter must also have the -webkit- prefix */

.hero__label {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Navbar glass */
.navbar {
  -webkit-backdrop-filter: blur(32px) saturate(2) brightness(1.1);
  backdrop-filter: blur(32px) saturate(2) brightness(1.1);
}

.navbar.scrolled {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

/* Nav-sheet backdrop */
.nav-sheet-backdrop {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Mega menu backdrop */
.mega-backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Skiing hero badge */
.skiing__hero-badge {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Hero controls glass */
.hero__control {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Button glass variant */
.btn--ghost {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Hero secondary button */
.hero__buttons .btn--secondary {
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* Glass card */
.glass-card {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* ---- 6. text-wrap Fallback ---- */
/* Safari < 17.4 doesn't support text-wrap: balance or pretty */
/* Set a max-width as fallback for balanced visual */
.section-title,
.hero__title {
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ---- 7. aspect-ratio Fallback (iOS < 15) ---- */
/* For browsers that don't support aspect-ratio, provide min-height */
@supports not (aspect-ratio: 16 / 10) {
  .detail-card__image-wrap {
    height: 0;
    padding-bottom: 62.5%; /* 10/16 = 0.625 */
    position: relative;
    overflow: hidden;
  }

  .detail-card__image-wrap .detail-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* ---- 8. Hover States on Touch Devices ---- */
/* Prevent hover state sticking on touch (iOS fire hover on tap) */
@media (hover: none) and (pointer: coarse) {
  /* Reset hover transforms that look wrong when they "stick" */
  .btn:hover,
  .btn--primary:hover,
  .btn--secondary:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .glass-card:hover {
    transform: none !important;
  }

  .detail-card:hover {
    transform: none !important;
  }

  .trekking__card:hover .trekking__card-image {
    transform: none !important;
  }

  .skiing__package-card:hover {
    padding-left: 0 !important;
  }

  .skiing__package-card:hover .skiing__package-arrow {
    transform: none !important;
  }

  .activities__item:hover {
    padding-left: 0 !important;
  }
}

/* ---- 9. iOS Scroll Freeze Fix (body.no-scroll) ---- */
/* Standard overflow:hidden doesn't work on iOS body/html.
   The JS fix uses position:fixed — this CSS supports it. */
body.ios-scroll-locked {
  position: fixed;
  width: 100%;
  overflow-y: scroll; /* prevent width shift */
  /* Scroll position is restored by JS */
}

html.ios-scroll-locked {
  overflow: hidden;
}

/* ---- 10. Overscroll Behavior Fallback ---- */
/* -webkit-overflow-scrolling: auto prevents rubber-band in modals */
.nav-sheet.active,
#lightbox.active {
  overflow-y: auto;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: contain;
}

/* ---- 11. CSS Transform3D Promotion for Animations ---- */
/* Force GPU compositing on animated elements to prevent jank on iOS */
.hero__slide,
.hero__slider,
.nav-ticker__track {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* ---- 12. Font Smoothing for iOS ---- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- 13. SVG Rendering Fix for iOS ---- */
/* Prevent SVG icons from disappearing on iOS */
svg {
  overflow: visible;
}

/* ---- 14. Cursor None Fix (iOS) ---- */
/* iOS must never get cursor: none — cursor.js already guards this,
   but ensure CSS doesn't accidentally apply it */
@media (pointer: coarse) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: auto !important;
  }

  .cursor {
    display: none !important;
  }
}

/* ---- 15. Video/Image Object-fit Fallback ---- */
/* object-fit: cover is supported in Safari 10+, but ensure images don't break */
.hero__image,
.hero__video,
.trekking__card-image,
.detail-card__image {
  -o-object-fit: cover;
  object-fit: cover;
  font-family: 'object-fit: cover'; /* Polyfill hint for older IE, harmless elsewhere */
}

/* ---- 16. Writing Mode Fix ---- */
/* writing-mode: vertical-lr on hero scroll text — ensure Safari compat */
.hero__scroll-text {
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
}

/* ---- 17. Animation Performance ---- */
/* Promote animated elements to own compositor layer on iOS */
.loader__ring-progress,
.nav-ticker__track,
.hero__slide,
.chat-popup {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---- 18. Sticky Positioning iOS Fix ---- */
/* Ensure sticky works correctly — needs explicit height on parent */
.navbar {
  -webkit-position: sticky; /* not needed for fixed, but good to have */
}

/* ---- 19. Form Element iOS Reset ---- */
/* Remove iOS default styling on inputs/selects/buttons */
input,
textarea,
select,
button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0; /* iOS rounds input corners by default */
}

/* Restore border-radius for buttons explicitly */
.btn {
  border-radius: var(--radius-md);
}

.btn--icon {
  border-radius: var(--radius-full);
}

.navbar__toggle {
  border-radius: 100px;
}

.nav-sheet__btn {
  border-radius: 100px;
}

/* ---- 20. Clip-path Prefix ---- */
/* Safari supports clip-path without prefix in modern versions,
   but add -webkit-clip-path as a safety fallback */
.skiing__hero-image,
.trekking__card,
.sightseeing__map-container,
.gallery__item,
.about__portrait {
  /* These are animated by GSAP; ensure they don't break without GSAP */
  -webkit-clip-path: none;
  clip-path: none;
}

/* ---- 21. Flexbox iOS Safari Gap Fix ---- */
/* gap on flex containers is not supported in iOS < 14.5;
   Use margin as fallback for critical layouts */
@supports not (gap: 1rem) {
  .navbar__links {
    margin: 0;
  }

  .navbar__links .navbar__link {
    margin: 0 3px;
  }

  .navbar__actions {
    margin: 0;
  }

  .navbar__actions > * + * {
    margin-left: 10px;
  }

  .hero__buttons {
    gap: 0;
  }

  .hero__buttons > * + * {
    margin-left: 12px;
  }
}