/* ==============================================================
   Study Hub — iPhone / iPad (iOS Safari) FIT + OVERLAP REPAIR
   ==============================================================
   Loaded by every page, AFTER the page's own stylesheet, so these
   rules win without touching the individual designs.

   iOS Safari differs from desktop browsers in four ways that make a
   page look like it "does not fit" or that make regions overlap:

     1. Tapping a form control smaller than 16px zooms the whole
        viewport. The page then looks shifted and overlapping until
        the reader manually zooms back out. Every input on this site
        used 0.9rem (14.4px), so this happened on every tap.
     2. 100vh is the height WITHOUT the URL bar, so a full-height
        section ends up taller than the screen it is drawn in.
     3. Fixed bars and floating buttons sit under the notch and the
        home indicator.
     4. Wide decorative layers (blurred orbs, big offsets, long
        unbreakable strings) create a horizontal scrollbar that
        drags the whole page sideways.

   Nothing here changes the desktop design: every rule either only
   applies on touch devices, or only compacts things that were
   already overflowing on a narrow screen.
   ============================================================== */

* { -webkit-tap-highlight-color: transparent; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body { overflow-x: clip; }

/* iOS 15 and older do not know `clip`, so they get the classic guard. */
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

/* ---------- 1. No more zoom-on-focus jump (iOS / iPadOS only) ---------- */
@supports (-webkit-touch-callout: none) {
  input,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---------- 2. Real visible height instead of the URL-bar height ---------- */
@supports (height: 100dvh) {
  #hero,
  #loader,
  .mobile-menu,
  .full-height { min-height: 100dvh; }

  /* Notes pages size their reader in vh too. */
  .sn-frame { height: min(68vh, 860px); }
}

/* ---------- 3. Keep edge-anchored UI inside the safe area ---------- */
#backToTop,
.back-to-top,
.float-bottom-right,
.geo-float,
.achievement-popup {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
}

.mobile-menu {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 4. Nothing may stick out sideways ---------- */
img, svg, video, canvas, iframe { max-width: 100%; }

body { overflow-wrap: break-word; }

/* Long unbroken strings (URLs, formula strings, exam codes) were
   widening the layout and forcing the sideways scroll. */
h1, h2, h3, h4, p, li, a, span, td, th,
.sn-title, .hero-title, .section-title, .cta-title {
  overflow-wrap: break-word;
}

pre, code { max-width: 100%; overflow-x: auto; }

/* A grid/flex child defaults to min-width:auto, which refuses to
   shrink below its content and pushes the layout wider than a 360px
   iPhone screen. Zeroing it is what lets the cards actually fit. */
.hero-content > *,
.about-grid > *,
.features-grid > *,
.chapters-grid > *,
.workout-grid > *,
.nutrition-grid > *,
.results-grid > *,
.bonus-grid > *,
.footer-grid > *,
.macro-cards > *,
.big-stats > *,
.contact-grid > *,
.card-meta > *,
.detail-wrapper > *,
.stats-grid > *,
.tests-grid > *,
.test-grid > *,
.sn-grid > *,
.sn-support-box > *,
.contact-form > * { min-width: 0; }

/* ---------- Narrow-screen compaction ---------- */

/* The four-stat strip used to clip its last item off the right edge. */
@media (max-width: 560px) {
  .hero-stats { gap: 14px 0; }
  .stat-divider { display: none; }
  .stat-item { flex: 1 1 40%; padding: 0 8px; }
}

@media (max-width: 480px) {
  .sn-header { padding: 30px 18px 34px; border-radius: 0 0 26px 26px; }
  .sn-item, .sn-support-box { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 420px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero-title, .section-title, .cta-title { font-size: clamp(1.55rem, 8vw, 2.3rem); }
  .hero-desc, .about-lead { font-size: 0.94rem; }
}

/* `background-attachment: fixed` is not implemented on iOS — the
   background jumps or tiles oddly while scrolling. Let it scroll. */
@supports (-webkit-touch-callout: none) {
  body, body.sn-page { background-attachment: scroll; }
}

/* Horizontal scroll areas (result tables, chapter chips) get smooth
   iOS momentum and stop reporting a "cut off" last column. */
.scroll-x, .table-wrap, .sn-grid, .geo-tabs, .sn-frame-wrap { -webkit-overflow-scrolling: touch; }

/* The chip/tab strips scroll sideways on a phone. `scrollbar-hide`
   plus snap keeps them from looking cut off. */
.geo-tabs, .scroll-x {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.geo-tabs::-webkit-scrollbar, .scroll-x::-webkit-scrollbar { display: none; }

/* Respect the reader's motion preference on the whole site. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}