/* =============================================================
   Global stylesheet - loaded by every page.
   Performance & stability rules (GPU promotion, lazy rendering,
   scroll behaviour) plus styles for components injected by the
   shared scripts (tour-photo lightbox).
   ============================================================= */

/* Visible focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid #1DA5B4;
  outline-offset: 2px;
}

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

/* iOS: prevent double-tap zoom on interactive elements without blocking pinch-zoom */
a, button, .btn, [role="button"], input[type="button"], input[type="submit"] {
  touch-action: manipulation;
}

/* The per-page stylesheets hide the nav's Book Now pill on phones
   (.nav-cta{display:none} + re-shown ≥768px), but their later generic
   .btn{display:inline-flex} rule accidentally re-enabled it, overlapping the
   logo on narrow screens. Enforce the intended behaviour with a stronger
   selector - the mobile menu carries the booking CTA instead. */
@media (max-width: 767px) {
  .nav .nav-cta { display: none; }
}

/* Touch targets (WCAG 2.5.5 / 2.5.8): give the small round controls and the
   footer text links a comfortable ≥44px tap area on touch devices. Selectors
   are intentionally a notch more specific than the per-page rules they refine
   so they win regardless of stylesheet order. */
@media (pointer: coarse) {
  .nav .ham,
  .mob-menu .mob-close,
  .hero-ctrl .hc-btn,
  .sl-controls .sl-btn,
  footer .ft-soc {
    width: 44px;
    height: 44px;
  }
  footer .ft-links a {
    display: inline-block;
    padding-block: 6px;
  }
}

/* Promote fixed floating buttons & nav to GPU compositor layers */
.float-ig,
.float-wa {
  will-change: transform;
  transform: translateZ(0);
}

.nav,
.mob-menu {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Scroll-reveal: keep on GPU, release hint once visible */
.rv {
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.rv.vis {
  will-change: auto;
}

/* Prevent the wide flex-track from causing layout recalculations
   outside .ps; also isolates the repaint/composite zone */
.ps {
  contain: layout;
}

/* Stable height for the arrow bar - prevents CLS during font-swap */
.ps-nav {
  min-height: 64px;
}

.sl-track,
.ps-track {
  touch-action: pan-y pinch-zoom;
}

/* Defer rendering of the site's footer (below the fold on every page) until
   the user scrolls near - saves paint & layout work on initial load.
   Intentionally conservative: we only skip elements that are safe to skip
   (no anchor targets inside) to avoid scroll-jumps. */
footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 500px;
}

/* Hardware-accelerated sliders - avoids mid-scroll flicker on low-end Android.
   Note: deliberately NOT applied to every .hs-img - forcing all 40 hero slides
   onto their own compositor layers costs hundreds of MB of GPU memory on
   phones. Only the visible/fading slide needs a layer, and the opacity
   transition promotes it automatically for the duration of the fade. */
.sl-track,
.ps-track {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Cheaper frosted glass on phones: halve the backdrop blur radii on the large
   glass surfaces. Visually near-identical at mobile sizes, but dramatically
   less GPU resampling per scrolled frame - the main source of scroll jank on
   mid-range Android devices. (Small chips/buttons keep their blur: tiny areas
   are cheap.) */
@media (max-width: 767px) {
  .wc, .tc, .lens-card, .copt, .build-layout, .rc,
  .cb, .bk-card, .rel-a,
  .rv-card, .os-card, .os-why-card, .bx-card {
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
  }
  #mobMenu {
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
  }
}

/* Print stability */
@media print {
  .float-ig, .float-wa, .nav, .mob-menu { display: none !important; }
}

/* =============================================================
   Tour photo slider - enlarge images & signal clickability.
   Higher-specificity selectors override the inline <style> rules
   that ship in each tour page (`.ps`, `.ps-slide img`).
   ============================================================= */
.ps#photoSlider {
  height: min(620px, 78vw);
  min-height: 280px;
  cursor: zoom-in;
}
@media (min-width: 1024px) {
  .ps#photoSlider { height: min(720px, 68vh); }
}
.ps .ps-slide img {
  cursor: zoom-in;
}

/* =============================================================
   Lightbox - fullscreen centered photo viewer for tour sliders.
   Injected dynamically by tour.js; styled here to avoid FOUC.
   ============================================================= */
.btr-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
.btr-lb.open {
  opacity: 1;
  visibility: visible;
}
.btr-lb-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 12px;
  box-sizing: border-box;
}
.btr-lb-img {
  max-width: 95vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .2s ease;
  background: #0E2A45;
}
.btr-lb-img.loading { opacity: .35; }
.btr-lb-close,
.btr-lb-prev,
.btr-lb-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background .18s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btr-lb-close:hover,
.btr-lb-prev:hover,
.btr-lb-next:hover { background: rgba(255, 255, 255, 0.24); }
.btr-lb-close:active,
.btr-lb-prev:active,
.btr-lb-next:active { transform: scale(.92); }
.btr-lb-close {
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  font-weight: 300;
}
.btr-lb-prev,
.btr-lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 26px;
  line-height: 1;
}
.btr-lb-prev:active,
.btr-lb-next:active { transform: translateY(-50%) scale(.92); }
.btr-lb-prev { left: 16px; }
.btr-lb-next { right: 16px; }
.btr-lb-ctr {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-montserrat),'Montserrat', sans-serif;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 640px) {
  .btr-lb-stage { padding: 56px 4px; }
  .btr-lb-img { max-width: 100vw; max-height: 82vh; }
  .btr-lb-close { top: 10px; right: 10px; width: 40px; height: 40px; font-size: 24px; }
  .btr-lb-prev, .btr-lb-next { width: 42px; height: 42px; font-size: 22px; }
  .btr-lb-prev { left: 8px; }
  .btr-lb-next { right: 8px; }
}
/* Hide prev/next arrows if only one slide (class toggled by tour.js) */
.btr-lb.single .btr-lb-prev,
.btr-lb.single .btr-lb-next { display: none; }
/* Lock page scroll while lightbox is open */
html.btr-lb-lock,
body.btr-lb-lock {
  overflow: hidden !important;
  touch-action: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}