/* ==========================================================================
   Mobile & Safari/iOS optimisations
   Loaded LAST so it overrides the generated Webflow CSS.
   ========================================================================== */

/* Prevent iOS from auto-inflating text when a device is rotated to landscape */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Kill any horizontal scroll caused by full-bleed 100vw sections on mobile.
   overflow-x: clip (Safari 16+) blocks programmatic/touch panning that
   plain `hidden` still allows on iOS; keep `hidden` as the fallback. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

body {
  position: relative;
}

/* --------------------------------------------------------------------------
   Horizontal-scroll fix: several sections carry a hard min-width wider than
   a phone screen (every per-page veil backdrop = 1200px, photo-scroll
   container = 940px), which forces the page to scroll left/right. The
   attribute selector catches all nine .veil-backdrop* page variants at once.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
  [class*="veil-backdrop"] {
    min-width: 0;
    max-width: 100vw;
    width: 100%;
  }

  .container-6 {
    min-width: 0;
    max-width: 100%;
  }

  /* Full-bleed heroes: use % instead of 100vw so a scrollbar can't push
     the layout wider than the viewport. */
  .hero__content,
  .hero_home {
    width: 100%;
    max-width: 100%;
  }
}

/* Softer tap feedback instead of the default grey iOS flash */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   Header: on phones the 200px logo + 2rem side padding is oversized and
   crowds the bar. Tighten padding, shrink the logo, and let the flex
   children shrink so the header can never force the page wider.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .navbar-no-shadow {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .navbar-no-shadow-container,
  .container-regular,
  .navbar-wrapper {
    max-width: 100%;
    min-width: 0;
  }

  .navbar-brand {
    min-width: 0;
    flex: 0 1 auto;
  }

  .navbar-brand img {
    max-width: 160px;
  }
}

@media screen and (max-width: 479px) {
  .navbar-brand img {
    max-width: 140px;
  }
}

/* --------------------------------------------------------------------------
   Full-height heroes: use dynamic viewport height so the mobile Safari
   address bar no longer cuts off / jumps the hero. Falls back to 100vh
   on browsers without dvh support.
   -------------------------------------------------------------------------- */
@supports (height: 100dvh) {
  .hero__content,
  .hero_home {
    height: 100dvh;
  }
}

/* --------------------------------------------------------------------------
   Form fields: iOS Safari zooms the whole page when you focus an input
   whose font-size is < 16px. Force 16px on touch devices so tapping the
   enquiry form no longer zooms. Also normalise iOS's default inner shadow
   and rounded corners so fields keep the brand's square look.
   -------------------------------------------------------------------------- */
.w-input,
.text-field,
.text-field-3,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

@media (hover: none) and (pointer: coarse) {
  .w-input,
  .text-field,
  .text-field-3,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* iOS renders type=date shorter and top-aligned — keep it consistent with
   the other fields and vertically centred. */
input[type="date"] {
  min-height: 48px;
  line-height: 1.4;
  text-align: left;
}

/* Buttons: drop iOS's default pill styling and give a proper tap target */
.w-button,
button,
input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Smooth momentum scrolling for any internal scroll areas on iOS */
.w-input,
textarea {
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   Horizontally-scrolling photo marquees: hidden on phones (they dominate
   the small screen and drag scroll performance), still shown on desktop.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* !important needed: the base sheet forces `display: flex !important` */
  .section---rotating-images-1 {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Consistent centering on phones. Audited at 390px: these were the only
   off-centre elements — inline "Book Now" anchors that hug the left edge
   of their column, and the socials hero which carries asymmetric
   left-only padding from the desktop layout.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .btn--primary-2 {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .header_home_div_social {
    padding-left: 20px;
    padding-right: 20px;
  }

  .media_div_buttons {
    max-width: none;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Respect reduced-motion: pause the infinite image marquee for users who
   ask for less motion (also saves battery on phones).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .slide-wrap {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}