/* ============================================================================
   mobile.css — responsive corrections for the landing page.

   ⚠ NOT css/main.css. The Claude Design re-export overwrites index.html,
   css/main.css, js/support.js and assets/. This file sits at the site root,
   which the export never touches, so the mobile fixes survive a re-export —
   only the <link> in index.html needs re-adding (README re-export item 7).

   WHY !important IS USED HERE
   index.html is a generated export whose layout lives in INLINE style
   attributes, and inline styles beat any external rule. Overriding them from a
   stylesheet is the only way to add breakpoints without rewriting the export.
   Selectors key off the rendered style attribute (verified in-browser), so they
   keep matching as long as the export keeps the same inline values.

   DESKTOP IS UNTOUCHED: every rule is inside a max-width media query.
   ========================================================================== */

/* ── FIX: the sticky header never actually stuck (all viewports) ───────────
   The header is authored `position: sticky; top: 0; z-index: 60`, but it
   scrolled away with the page. Measured at scrollY 3000 its rect.top was
   -3000 — on desktop and mobile alike, and identically with this stylesheet
   disabled, so this is a pre-existing bug, not a regression from these fixes.

   Cause: the design's page wrapper (the div that directly contains <nav>)
   computes `overflow: hidden auto`. An ancestor whose overflow is anything
   other than `visible` becomes the sticky element's containing scroll box, so
   the nav was being asked to stick inside a container that is itself as tall
   as the whole document — meaning it never had anywhere to stick to.

   `overflow-x: clip` clips exactly like `hidden` but does NOT create a scroll
   container, so sticky positioning survives. Verified live: rect.top returned
   to 0 at scrollY 3000, with no horizontal overflow and scrolling intact.

   This is deliberately OUTSIDE the media query: the CTA must persist on
   desktop too, and this restores the behaviour the markup already asked for. */
div:has(> nav) {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ── Tablet portrait and below ─────────────────────────────────────────────
   700px is above the largest target phone (430px) and below the 2-column
   desktop layouts, so phones and small tablets get the single-column treatment
   while the desktop composition is left exactly as designed. */
@media (max-width: 700px) {

  /* ── Sticky header ──────────────────────────────────────────────────────
     The header is ALREADY position:sticky (z-index 60) — the demo CTA was
     meant to stay visible all along. It failed on mobile because the inner
     row is flex-wrap:nowrap: at 320px it needed 627px, so the CTA rendered at
     left:-307px, fully off-screen and unclickable in RTL.

     Fix: let the row wrap and drop the four in-page section anchors, which are
     secondary on a page the visitor simply scrolls. What remains — brand,
     language toggle, login, and "حجز عرض توضيحي" — fits one compact row, so
     the demo CTA is genuinely persistent while scrolling without eating
     vertical space. This refines the existing sticky CTA rather than adding a
     second floating button that would duplicate it. */
  nav {
    padding: 8px 4vw !important;
    gap: 8px !important;
  }
  /* The brand lockup must stay on ONE line — letting it wrap turned an 81px
     logo into an 87px-tall stack and pushed the sticky bar to 132px. */
  nav > div:first-child {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
  }
  nav > div:first-child span {
    white-space: nowrap !important;
  }
  nav > div:last-child {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }
  nav a[href^="#"] {
    display: none !important;
  }
  /* Comfortable, thumb-sized hit areas — measured at 26px and 39px before. */
  nav a,
  nav button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Trim the CTA so brand + language + login + CTA fit ONE row at 320px.
     Measured: the full-size trio needed ~303px against ~294px available, which
     forced a second row and a 132px-tall sticky bar. */
  nav button {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }
  nav a {
    white-space: nowrap !important;
    font-size: 12.5px !important;
  }

  /* ── Grids with a FIXED column count ────────────────────────────────────
     The auto-fit/minmax grids elsewhere already collapse on their own; these
     four do not. Measured at 320px: a 4-column stat row resolved to
     59/70/55/60px inside a 275px box, and "1.3fr 1fr" put 321px of content in
     282px — squeezed and clipped. Stat rows keep two columns (they are short
     number+label pairs and read well paired); structural splits go to one. */
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Section rhythm ─────────────────────────────────────────────────────
     Desktop uses 100–110px vertical padding, which on a phone means scrolling
     past empty space between every section. */
  section[style*="padding: 110px 6vw 90px"] { padding: 72px 5vw 56px !important; }
  section[style*="padding: 100px 6vw 120px"] { padding: 64px 5vw 72px !important; }
  section[style*="padding: 100px 6vw"]      { padding: 64px 5vw !important; }
  section[style*="padding: 40px 6vw 110px"] { padding: 32px 5vw 64px !important; }
  section[style*="padding: 20px 6vw 110px"] { padding: 20px 5vw 64px !important; }

  /* ── Type ───────────────────────────────────────────────────────────────
     The hero h1 renders 38px at 320px. Trimming it keeps the headline to a
     readable number of lines without changing the type hierarchy. */
  h1 { font-size: clamp(27px, 8.2vw, 36px) !important; line-height: 1.25 !important; }
  h2 { font-size: clamp(21px, 6vw, 27px) !important; line-height: 1.3 !important; }

  /* ── Footer ─────────────────────────────────────────────────────────────
     Legal links measured 20px tall — too small to tap reliably. */
  footer { padding: 28px 5vw !important; text-align: center !important; }
  footer a {
    padding: 12px 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
}

/* ── Small phones (320–380px) ──────────────────────────────────────────────
   At 320px the two-column stat rows still crowd; give them the full width. */
@media (max-width: 380px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Narrow phones: fit the sticky bar into ONE row ────────────────────────
   Measured at 320px: the bar needed 396px against 294px available — a 102px
   deficit that pushed "حجز عرض توضيحي" to left:-88px, off-screen.

   The wordmark beside the logo accounts for 70px of that. Dropping it (the
   logo mark stays, which is the usual mobile treatment) plus tighter type and
   gaps brings the row under budget, so brand · EN · login · demo CTA all stay
   visible and tappable on one 44px row. Nothing is removed from the page —
   only the redundant wordmark, since the mark already carries the identity. */
@media (max-width: 420px) {
  nav > div:first-child > div { display: none !important; }
  nav > div:last-child { gap: 6px !important; }
  nav a,
  nav button { font-size: 11.5px !important; }
  nav button { padding: 8px 10px !important; }
}

/* ── NO overflow-x:hidden on html/body — deliberately ──────────────────────
   An earlier revision of this file added
       html, body { overflow-x: hidden; max-width: 100%; }
   as a "safety net". It collapsed the document: scrollHeight fell from 15048px
   to 720px and the page could not be scrolled at all. Measured, not theorised —
   toggling this stylesheet off restored scrolling immediately.

   It was also unnecessary. The page has NO horizontal overflow at 320/375/390/
   430px: the oversized ambient glow decorations are already contained by their
   sections' own overflow:hidden. Do not reintroduce it. */