/* ==========================================================================
   CROSS-BROWSER COMPATIBILITY LAYER
   Loaded on every page AFTER theme.css. Adds vendor prefixes and safe
   fallbacks so the design keeps its integrity across:
   Chrome, Edge, Brave, Opera (Blink) · Safari / iOS (WebKit) · Firefox (Gecko)
   Nothing here changes the visual design — it only broadens support.
   ========================================================================== */

/* --- Consistent box model & text rendering everywhere --- */
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     text-rendering:optimizeLegibility;}

/* --- Backdrop blur: Safari needs -webkit-; give a solid fallback first --- */
#st-loading{background:rgba(10,24,10,0.94);            /* fallback if no blur */
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
@supports ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  #st-loading{background:rgba(10,24,10,0.88);}
}

/* --- Flexbox: legacy WebKit/older Firefox safety ---
   NOTE: .st-nav-links is intentionally EXCLUDED here — its display is
   controlled by the responsive rules in style.css (hidden on mobile until the
   hamburger opens it). Forcing display:flex here would pin the mobile menu
   open and cover the page. Prefixed flex for the menu is applied desktop-only
   in the min-width block below. */
.st-topbar,.st-nav,.st-nav-brand,.hp-steps,.hp-map-bar,
.st-btn,.st-btn-row,.st-place-actions,.st-footer-links,.hp-pills,.hp-area-tags{
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.st-nav,.st-topbar{-webkit-box-pack:justify;-webkit-justify-content:space-between;
  -ms-flex-pack:justify;justify-content:space-between;
  -webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.hp-pills,.hp-area-tags,.st-footer-links{
  -webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
/* Desktop-only: give the horizontal nav bar its legacy flex prefixes. */
@media(min-width:769px){
  .st-nav-links{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
}
/* Mobile: keep the dropdown hidden until opened (prefixed, wins as last rule). */
@media(max-width:768px){
  .st-nav-links{display:none;}
  .st-nav-links.st-nav-open{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
}

/* --- Grid fallback: very old browsers ignore grid; keep content readable --- */
@supports not (display:grid){
  .hp-grid,.hp-why-grid,.hp-links-inner,.st-places-grid{display:block;}
  .hp-why-card,.hp-link-card,.st-place-card{margin-bottom:16px;}
}

/* --- Sticky nav: Safari prefix --- */
.st-nav{position:-webkit-sticky;position:sticky;}

/* --- Inputs: normalize appearance across engines --- */
input,select,textarea,button{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  font-family:inherit;border-radius:0;}
.st-field input,.st-field select,.st-field textarea,
.st-form-group input{border-radius:8px;} /* restore intended radius */
select{background-image:none;}
/* Keep native date/time pickers usable in WebKit */
input[type="date"],input[type="time"]{-webkit-appearance:none;min-height:2.6em;}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.6;}

/* --- Remove tap-highlight flash on iOS, keep focus visible for a11y --- */
a,button,.st-pay-opt,.hp-step{-webkit-tap-highlight-color:transparent;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* --- Gradient text safety (fallback to gold if clip unsupported) --- */
.hp-h1 span{color:var(--gold);}

/* --- Smooth scrolling where supported, harmless elsewhere --- */
html{scroll-behavior:smooth;}

/* --- Firefox scrollbar tint for the dark theme --- */
*{scrollbar-color:rgba(240,184,0,.4) transparent;scrollbar-width:thin;}
/* WebKit scrollbars */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:rgba(240,184,0,.35);border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}

/* --- Prefer reduced motion: disable animations for users who ask --- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ==========================================================================
   MOBILE BROWSERS — iOS Safari, Chrome/Android, Samsung Internet, Firefox
   mobile, Edge mobile, Opera Mobile, Brave mobile. Keeps design integrity
   while fixing touch/zoom quirks.
   ========================================================================== */
/* Momentum scrolling on iOS + contain overscroll bounce */
body{-webkit-overflow-scrolling:touch;overscroll-behavior-y:none;}
/* Respect the notch / safe areas on modern phones */
.st-topbar{padding-left:calc(20px + env(safe-area-inset-left));
           padding-right:calc(20px + env(safe-area-inset-right));}
.st-footer{padding-bottom:calc(24px + env(safe-area-inset-bottom));}
/* Make tap targets comfortable */
.st-nav-links a,.hp-step,.st-pay-opt,.st-btn,.st-place-book,.st-place-map{touch-action:manipulation;}

@media(max-width:768px){
  /* iOS zooms in on any input with font-size < 16px on focus. Force >=16px
     ONLY on phones so the layout keeps its intended proportions. */
  .st-field input,.st-field select,.st-field textarea,
  .st-form-group input{font-size:16px;}
  /* Long addresses / tables shouldn't blow out the viewport */
  .st-gas-table-wrap,.st-booking-table-wrap{-webkit-overflow-scrolling:touch;}
  /* Keep the sticky nav from eating the screen on small devices */
  .st-nav{padding:11px 16px;}
}
/* Fine-pointer vs coarse-pointer: only apply hover lift on real pointers */
@media(hover:none){
  .hp-why-card:hover,.hp-link-card:hover,.st-place-card:hover,
  .hp-step:hover{transform:none;}
}