/* ════════════════════════════════════════════════════════════════════
   C.U.L.T. MOBILE · universal mobile-foundation layer
   Drop into every page across all 5 tiers. Loaded LAST so it overrides.
   Handles iOS Safari quirks, touch targets, safe-area-inset, font sizing.
   Reduced-motion respected. Zero dependencies.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Box-sizing reset (already in most pages, defensive) ─────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── 2. iOS Safari 100vh + safe-area-inset support ──────────────────── */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

@supports (height: 100dvh) {
  .cult-fullscreen { min-height: 100dvh !important; }
}
@supports not (height: 100dvh) {
  .cult-fullscreen { min-height: 100vh !important; }
}

/* Safe-area padding for notched devices (iPhone X+) */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* ── 3. Touch targets — Apple HIG minimum is 44x44px ────────────────── */
button, a, input[type="button"], input[type="submit"], .btn, .cta {
  min-height: 44px;
  touch-action: manipulation; /* removes 300ms tap delay on iOS */
}

/* Don't force min-height on inline links inside paragraphs */
p a, span a, li a { min-height: 0; }

/* ── 4. Inputs — 16px minimum prevents iOS auto-zoom on focus ───────── */
input, select, textarea {
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
}

/* ── 5. Scrolling — momentum on iOS ────────────────────────────────── */
.cult-scroll, .scroll-container { -webkit-overflow-scrolling: touch; }

/* ── 6. Images responsive by default ────────────────────────────────── */
img, video, svg {
  max-width: 100%;
  height: auto;
}

/* ── 7. Tables — horizontal scroll instead of overflow ──────────────── */
table { max-width: 100%; }

/* ── 8. Disable text-selection on UI chrome (buttons, nav, etc.) ────── */
button, .btn, .cta, nav, header, footer {
  -webkit-user-select: none;
  user-select: none;
}
/* But ALLOW selection in content areas */
p, h1, h2, h3, h4, h5, h6, article, .content, main { user-select: text; -webkit-user-select: text; }

/* ── 9. Tap-highlight color overrides (default iOS blue is ugly) ────── */
a:active, button:active { -webkit-tap-highlight-color: rgba(255, 214, 107, 0.25); }

/* ── 10. Force max-width on overflowing legacy elements ─────────────── */
[style*="width:"][style*="px"]:not(.cult-allow-fixed) {
  max-width: 100% !important;
}

/* ── 11. Small-screen breakpoint (≤540px — phones) ──────────────────── */
@media (max-width: 540px) {
  body { font-size: 16px; }

  /* Tighter padding on common containers */
  .ck-wrap, .wrap, .st-wrap, .nb-wrap, .ws-wrap, .wn-wrap, .tool-wrap, .sp-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero typography — scale down */
  h1, .hero__title, .ck-hero__title, .st-hero__title, .wn-hero__title {
    font-size: clamp(32px, 9vw, 56px) !important;
    line-height: 1.05 !important;
  }
  h2, .section__h, .ck-section__head, .st-section__h, .hl-more__h {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.2 !important;
  }

  /* Stack flex-row CTAs vertically */
  .hero__ctas, .ck-hero__ctas, .st-ctas, .nb-toolbar, .tool-toolbar, .top {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Make CTAs full-width on small screens */
  .btn, .cta, .ck-cta, .st-cta {
    width: auto;
    min-width: 0;
  }

  /* Tables — let them scroll horizontally rather than overflow */
  .scroll-wrap-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Grids — single column on tiny screens */
  .ck-planet-grid, .features, .se-row, .td-tools, .ad-tools,
  .rings, .st-three, .cm-choices {
    grid-template-columns: 1fr !important;
  }

  /* Nav links — wrap nicely */
  nav, .ck-header, .st-head, .head, .tn-mast__nav, .sp-masthead__nav {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── 12. Bottom-corner widgets respect safe-area (notch / home-bar) ── */
.ny-trigger, .nathan-orb, .ny-modal {
  bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 540px) {
  .ny-trigger, .nathan-orb {
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── 13. Modal/overlay scroll on small screens ─────────────────────── */
.ny-modal, .modal, [role="dialog"] {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 14. Hide oversize decorative SVGs on tiny screens ─────────────── */
@media (max-width: 380px) {
  .hide-on-tiny { display: none !important; }
}

/* ── 15. Reduced-motion override (sensory-safe) ─────────────────────── */
@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;
  }
}

/* ── 16. Print stylesheet (if anyone prints a planet) ──────────────── */
@media print {
  .ny-trigger, .nathan-orb, .ny-modal, nav, footer { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}