/*
 * Mobile fit fixes - global anti-overflow guards.
 * Loaded on landing pages, docs, faq, blog, privacy, tos, app.html, pay.php.
 * Goal: no horizontal scroll on phones, all content fits viewport.
 *
 * Strategy:
 *   1. Hard-clip horizontal overflow at html/body (last line of defense).
 *   2. Force long inline content (URLs, code, words) to wrap on small screens.
 *   3. Cap aurora-style decorative blurred boxes so they don't extend viewport.
 *   4. Make pre/code blocks scrollable inside their container, never push parent.
 *   5. Tables wrappable on mobile.
 */

/* ── Layer 0: viewport hard-clip ──────────────────────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Layer 1: long-content wrap (URLs, tokens, codeblocks) ────── */
@media (max-width: 768px) {
  /* Inline code - break long unbreakable strings */
  code, kbd, samp {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Block code: keep horizontal scroll inside the block, not the page */
  pre, .code, .code-editor {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  pre code {
    /* Block code shouldn't break - let the parent <pre> scroll */
    word-break: normal;
    overflow-wrap: normal;
    white-space: pre;
  }
  /* Long URLs in regular paragraphs */
  p a, li a, .article a {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Plain paragraphs with long phrases */
  p, li, td, th, dd, dt {
    overflow-wrap: anywhere;
  }
}

/* ── Layer 2: cap decorative blur shapes ──────────────────────── */
/* Aurora circles often have w-[700px] which exceed phone width.
   On mobile they should still display but never widen the viewport. */
@media (max-width: 768px) {
  .aurora {
    max-width: 100vw !important;
    /* Keep their height/opacity for visual mood; just clip horizontally */
  }
}

/* ── Layer 3: tables responsive ───────────────────────────────── */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Layer 4: images fit ──────────────────────────────────────── */
img, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}

/* ── Layer 5: prevent fixed-width buttons / forms overflow ────── */
@media (max-width: 480px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], textarea, select {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── Layer 6: container padding safety ────────────────────────── */
@media (max-width: 480px) {
  /* Tailwind classes used: px-6 = 1.5rem each side = 3rem total.
     On phones < 480px, that's 3rem of 23.4rem viewport = 12% wasted.
     Reduce to px-4 (1rem each side) instead. */
  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ── Layer 7: long unbreakable strings in headings ────────────── */
@media (max-width: 768px) {
  h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}