/* ============================================================================
 * super-theme-pro — mobile-fix.css  (2026-07-19)
 * ----------------------------------------------------------------------------
 * Purpose: mobile responsive safety net + targeted overflow fixes for the
 * public storefront. Loaded AFTER theme.css so it wins on specificity. Plain
 * CSS — never touched by the tailwind build, ships as-is with the theme.
 *
 * Scope:
 *   1) Global overflow-x guard on the document (root + body)
 *   2) Elastic media (img/video/iframe)
 *   3) Container safety: shrink padding on small viewports
 *   4) Hero: title/subtitle/CTA row/stats row overflow on iPhone-SE class
 *   5) Section/card padding tune-down on ≤480px
 *   6) Stats bands: cap oversize numeric type
 *   7) Trust strip, portfolio grids, footer form: wrap gracefully
 *
 * RTL: uses logical properties (padding-inline, margin-inline) — no LTR-only
 * side properties introduced.
 * ========================================================================== */

/* ─── 1) Root overflow guard ────────────────────────────────────────────── */
/* Prevents any single overflowing child from producing a horizontal
   scrollbar on the whole page. Any legitimate horizontally-scrolling area
   (tables, code blocks, .no-scrollbar strips) provides its own wrapper. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Anything that lays out via flex/grid must be allowed to shrink below its
   intrinsic content width — the classic min-width:auto default is the root
   cause of most horizontal-overflow bugs in flex/grid layouts. */
main, section, header, footer, nav, article, aside,
main *, section *, header *, footer *, nav *, article *, aside * {
  min-width: 0;
}

/* ─── 2) Elastic media ──────────────────────────────────────────────────── */
img, video, iframe, svg, canvas, picture, object, embed {
  max-width: 100%;
}
img, video { height: auto; }

/* ─── 3) Container safety on small viewports ─────────────────────────────── */
/* .container-wide default padding is 1.25rem (px-5) → 2rem @ lg. On very
   narrow phones the 1.25rem still leaves plenty; but if a merchant swaps
   containers we cap it to prevent runaway. */
@media (max-width: 480px) {
  .container-wide {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }
}

/* ─── 4) HERO fixes (home.gohtml section 1) ─────────────────────────────── */
@media (max-width: 640px) {
  /* Hero display title — theme sets clamp(2.5rem, 1.6rem+4vw, 4.75rem) which
     is 2.5rem = 40px minimum. On 320-375px viewports with bold Arabic weight
     and letter-spacing:-0.02em, "ابنِ مستقبلك الرقميّ" can just barely
     overflow. Rein in the minimum + guarantee wrapping. */
  .text-display {
    font-size: clamp(1.9rem, 7.2vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  .text-h1 {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .text-h2 {
    font-size: clamp(1.25rem, 5vw, 2rem);
    line-height: 1.22;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Vertical rhythm — the desktop hero pads 5rem top/bottom (py-20). Trim
     for phones so first-fold shows CTA + stats. */
  section > .container-wide.grid.items-center {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    gap: 2rem !important; /* was gap-14 = 3.5rem */
  }

  /* Hero CTA row — two btn-lg side-by-side + gap-3 blows past 375px. Force
     each to fill the row while still wrapping in flex order. */
  .btn-lg {
    padding-inline-start: 1.25rem;
    padding-inline-end: 1.25rem;
    font-size: 0.95rem;
  }
  .btn, .btn-lg, .btn-primary, .btn-outline, .btn-ghost {
    max-width: 100%;
    white-space: normal;
  }
  /* When the CTA row has just 2 buttons, let them each take a full row for
     a cleaner tap target rather than squishing side-by-side. */
  main section .flex.flex-wrap.items-center.gap-3 > .btn-primary,
  main section .flex.flex-wrap.items-center.gap-3 > .btn-outline {
    flex: 1 1 100%;
  }
}

/* ─── 5) Hero trust stats — 3-col to 3-col but readable ─────────────────── */
/* At 375px, `dl.mt-14.grid.max-w-lg.grid-cols-3.gap-6` with `text-3xl`
   (1.875rem = 30px) for "+٢٥٠ ألف" (Arabic 6-glyph) exceeds a 96px column.
   Tighten the numeric size + reduce the gap so it stays 3-across but fits. */
@media (max-width: 640px) {
  main dl.grid.grid-cols-3 { gap: 0.75rem; }
  main dl.grid.grid-cols-3 > div dt {
    font-size: clamp(1.05rem, 4.6vw, 1.75rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  main dl.grid.grid-cols-3 > div dd {
    font-size: 0.72rem;
    line-height: 1.25;
    margin-top: 0.35rem;
  }
}

/* ─── 6) Stats band (home.gohtml + portfolio) — cap 5xl numerals ────────── */
/* text-5xl (3rem = 48px) inside rounded-3xl bg-bg-soft/60 p-10 leaves ~250px
   inner width on 375px, and "+٢٥٠ ألف" bold Arabic pushes past it. */
@media (max-width: 640px) {
  section .rounded-3xl.p-10,
  section .rounded-3xl.px-8.py-16 {
    padding: 1.75rem 1.25rem;
    border-radius: 1.5rem;
  }
  section .text-5xl { font-size: clamp(1.75rem, 8vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; }
  section .text-4xl { font-size: clamp(1.5rem, 7vw, 2.25rem); line-height: 1.15; }
}

/* ─── 7) Sticky header — allow logo text to shrink, gap tighter ─────────── */
@media (max-width: 480px) {
  header .container-wide { gap: 0.5rem; }
  header .text-xl { font-size: 1rem; }
  /* icon buttons cluster: keep 44px tap but let them wrap-safe */
  header .items-center.gap-1\.5 { gap: 0.15rem; }
}

/* ─── 8) Trust strip, feature grids — safer gaps on mobile ──────────────── */
@media (max-width: 480px) {
  .flex.flex-wrap.items-center.justify-center.gap-x-12 {
    column-gap: 1.5rem;
    row-gap: 1rem;
  }
  .flex.flex-wrap.items-center.justify-center.gap-x-12 > span {
    font-size: 0.95rem;
  }
}

/* ─── 9) Card padding tune-down (home services, about values, etc.) ──────── */
@media (max-width: 480px) {
  main .card.p-7 { padding: 1.25rem; }
  main .card.p-6 { padding: 1rem; }
  main .card.p-8 { padding: 1.25rem; }
  main .card.p-6.sm\:p-8 { padding: 1rem; }
}

/* ─── 10) CTA band ("جاهز تبدأ رحلة تعلّمك؟") — fit buttons in row ───────── */
@media (max-width: 640px) {
  main section .relative.overflow-hidden.rounded-3xl .flex.flex-wrap.justify-center {
    flex-direction: column;
    align-items: stretch;
  }
  main section .relative.overflow-hidden.rounded-3xl .flex.flex-wrap.justify-center > .btn {
    width: 100%;
  }
}

/* ─── 11) Footer newsletter form: input + button wrap ───────────────────── */
@media (max-width: 480px) {
  footer form.flex.gap-2 {
    flex-direction: column;
    align-items: stretch;
  }
  footer form.flex.gap-2 > .btn-primary {
    width: 100%;
  }
}

/* ─── 12) Bottom-nav labels shrink to fit 5 items on ≤360px ─────────────── */
@media (max-width: 360px) {
  .bottom-nav-item { font-size: 10px; padding: 0.5rem 0.25rem; }
  .bn-icon { height: 2rem; width: 2rem; }
}

/* ─── 13) Portfolio + services grid gap reduction on 2-col mobile ────────── */
@media (max-width: 480px) {
  main .grid.grid-cols-2.gap-3 { gap: 0.65rem; }
}

/* ─── 14) Absolute floating cards inside hero visual — safe positioning ──── */
/* The `absolute -bottom-5 -left-4` shadow-lift card is `hidden sm:block`
   already, so it's OK on true mobile. Belt-and-braces: never let it push the
   viewport wider. */
@media (max-width: 640px) {
  section.relative.overflow-hidden .absolute.-bottom-5 { display: none !important; }
}

/* ─── 15) Prose-manhal (article body) safety on phones ──────────────────── */
@media (max-width: 640px) {
  .prose-manhal { font-size: 1rem; line-height: 1.85; }
  .prose-manhal h2 { font-size: clamp(1.35rem, 5.5vw, 1.9rem); }
  .prose-manhal h3 { font-size: clamp(1.15rem, 4.8vw, 1.55rem); }
  .prose-manhal pre { font-size: 0.82rem; }
}

/* ─── 16) Universal word-break for long unbroken tokens (URLs, IDs) ─────── */
@media (max-width: 640px) {
  main a, main p, main h1, main h2, main h3, main h4, main li, main dd, main dt {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}