/* ─────────────────────────────────────────────────────────────
   UNLOCKMYJOB — SOFT LAUNCH  |  ios-fixes.css
   Target: iPhone 15 / 15 Pro / 14 series, modern Safari.
   Loaded AFTER styles.css. Zero design changes.
───────────────────────────────────────────────────────────── */

/* ── Reset tap highlight + anti-aliasing ── */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Root overflow lock ── */
html {
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: hidden;
  max-width: 100%;
  min-width: 0;
}

/* Allow flex/grid children to shrink below content width */
.split, .split-left, .split-right, .split-left-inner,
.slide-inner, .slide-art {
  min-width: 0;
}

/* ── Stage + slides: GPU compositing + hard clip ── */
#stage {
  overflow: hidden;
  max-width: 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide {
  overflow: hidden;
  max-width: 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ── Split layout: flexbox override for iOS Safari grid bug ─
   iOS Safari has a known CSS Grid bug where grid-column:auto
   in a media query does not reliably clear explicit placement.
   The browser creates implicit extra columns, making the grid
   wider than the viewport. Flex column bypass fixes this.
─────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .split {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .split-left,
  .split-right {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  .split-left-inner {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .split-right::before {
    max-width: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }
}

/* ── Safe-area: Dynamic Island / notch / home indicator ── */
@supports (padding: env(safe-area-inset-top)) {

  #NAV {
    padding-left:  max(14px, calc(14px + env(safe-area-inset-left)));
    padding-right: max(14px, calc(14px + env(safe-area-inset-right)));
    padding-top:   max(0px,  env(safe-area-inset-top));
    height:        calc(var(--NAV-H) + env(safe-area-inset-top));
  }

  /* Slide top padding grows with notch so content never hides under the nav */
  .slide {
    padding-top: calc(var(--NAV-H) + env(safe-area-inset-top) + 16px);
  }

  #CNT {
    left:   max(10px, calc(10px + env(safe-area-inset-left)));
    bottom: max(14px, calc(14px + env(safe-area-inset-bottom)));
  }

  #ARROWS {
    right:  max(10px, calc(10px + env(safe-area-inset-right)));
    bottom: max(14px, calc(14px + env(safe-area-inset-bottom)));
  }

  #NEX {
    left:   max(8px, calc(8px  + env(safe-area-inset-left)));
    bottom: max(8px, calc(8px  + env(safe-area-inset-bottom)));
  }

  #BUBBLE {
    left:   max(24px, calc(24px + env(safe-area-inset-left)));
    bottom: max(280px, calc(280px + env(safe-area-inset-bottom)));
  }

  @media (max-width: 640px) {
    #BUBBLE {
      left:   max(6px, calc(6px + env(safe-area-inset-left)));
      bottom: max(210px, calc(210px + env(safe-area-inset-bottom)));
    }
  }

  .s10-content {
    padding-bottom: max(
      clamp(96px, 16vh, 140px),
      calc(clamp(96px, 16vh, 140px) + env(safe-area-inset-bottom))
    );
  }

  .ftr {
    padding-left:  max(clamp(20px, 3vw, 48px), calc(clamp(20px, 3vw, 48px) + env(safe-area-inset-left)));
    padding-right: max(clamp(20px, 3vw, 48px), calc(clamp(20px, 3vw, 48px) + env(safe-area-inset-right)));
    padding-bottom: env(safe-area-inset-bottom);
  }

  .thank-you-panel {
    padding-left:  max(24px, calc(24px + env(safe-area-inset-left)));
    padding-right: max(24px, calc(24px + env(safe-area-inset-right)));
    padding-bottom: max(var(--FTR-H, 60px), calc(var(--FTR-H, 60px) + env(safe-area-inset-bottom)));
  }
}

/* ── Bubble: lift above mascot ── */
#BUBBLE { bottom: 280px; }

@media (max-width: 980px) { #BUBBLE { bottom: 210px; } }
@media (max-width: 640px) { #BUBBLE { bottom: 210px; } }

/* ── Glow / blur containment ── */
.thank-you-panel {
  isolation: isolate;
  overflow: hidden;
}

.ty-orb {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  overflow: hidden;
}

/* ── Prevent horizontal touch-scroll bounce ── */
html, body {
  overscroll-behavior-x: none;
  -ms-scroll-chaining: none;
  touch-action: pan-y;
}

#stage, .slide {
  overscroll-behavior: none;
  touch-action: pan-y;
}

/* ── Input font-size: prevent iOS auto-zoom on focus ── */
input,
textarea,
select {
  font-size: 16px !important;
}

/* Restore visual size — match styles.css base (16px floor on mobile prevents iOS zoom) */
@media (min-width: 600px) {
  input.wl-inp,
  textarea.wl-inp,
  select.wl-inp {
    font-size: 15px !important;
  }
}

/* ── Landscape: reduce height-sensitive elements ── */
@media (max-height: 500px) and (orientation: landscape) {
  #NEX         { display: none; }
  #BUBBLE      { display: none; }
  .nex-label   { display: none; }
  .sc-hint     { display: none; }
  .hero-inner  { min-height: unset; padding-top: 70px; }
}

/* ── Content width safety net (mobile) ── */
@media (max-width: 768px) {

  .hero-inner,
  .hero-ed,
  .s8-inner,
  .s10-content,
  .wl-form,
  .thank-you-content {
    max-width: 100%;
    box-sizing: border-box;
  }

  input.wl-inp,
  textarea.wl-inp,
  select.wl-inp,
  .pain-select-wrap,
  .pain-select-wrap select {
    max-width: 100%;
    box-sizing: border-box;
  }

  .p-tx,
  .p-list li,
  .thank-you-copy,
  .final-h,
  .he-q,
  .p-title {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  /* "unlockmyjob" is one unbreakable word — never let it split mid-word.
     responsive.css scales its font-size down enough to fit on one line. */
  .he-l1 {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

/* ── NEX / Three.js canvas overshoot guard ── */
#NEX {
  overflow: hidden;
  max-width: 100%;
}

#nex3d,
#nex3d canvas {
  max-width: 100% !important;
  max-height: 100% !important;
}