/* IPWeb3 shared mobile fixes for the static /m mockup pages.
   Two design systems are covered:
     System A (styles.css pages): nav > .nav-in > .nav-links + .nav-right
     System B (creators/studio/pricing): header > .header-inner > .site-nav + .header-actions
   The hamburger button + slide-in panel are built at runtime by mobile-fix.js;
   this file only styles them and fixes layout overflow on small screens.
   Breakpoint 860px = phones + small tablets. */

/* ---------- global overflow guard ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }

/* Hide the "Two ways to protect your work / Choose the way that fits you"
   chooser section on the landing page (all viewports). */
#choose { display: none !important; }

/* ---------- hamburger button (hidden on desktop) ---------- */
.mnav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px; flex: none; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #eaf0ff;
}
.mnav-toggle:active { transform: scale(.94); }
.mnav-toggle svg { width: 24px; height: 24px; display: block; }

/* ---------- slide-in panel + scrim ---------- */
.mnav-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 2000;
  width: min(85vw, 340px); transform: translateX(100%); transition: transform .28s ease;
  background: #0a1330; border-left: 1px solid rgba(255,255,255,.1);
  padding: 78px 22px 32px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  font-family: 'Hanken Grotesk', 'DM Sans', system-ui, sans-serif;
}
body.mnav-open .mnav-panel { transform: translateX(0); }
.mnav-scrim {
  position: fixed; inset: 0; z-index: 1999; background: rgba(2,6,18,.62);
  opacity: 0; visibility: hidden; transition: opacity .28s;
}
body.mnav-open .mnav-scrim { opacity: 1; visibility: visible; }
body.mnav-open { overflow: hidden; }
.mnav-panel a {
  display: block; padding: 13px 14px; border-radius: 10px;
  color: #cdd8f5; font-size: 16px; font-weight: 600; text-decoration: none;
}
.mnav-panel a:hover, .mnav-panel a:active { background: rgba(255,255,255,.06); color: #fff; }
.mnav-panel .mnav-cta {
  margin-top: 12px; background: #35e2b0; color: #04231a; text-align: center; font-weight: 700;
}
.mnav-panel .mnav-signin { color: #fff; }
.mnav-sep { height: 1px; background: rgba(255,255,255,.1); margin: 14px 4px; }
.mnav-lang { display: flex; gap: 8px; margin-top: 4px; }
.mnav-lang a { flex: 1; text-align: center; border: 1px solid rgba(255,255,255,.14); padding: 11px 0; }
.mnav-lang a.on { border-color: #35e2b0; color: #fff; }
.mnav-close {
  position: absolute; top: 20px; right: 16px; width: 42px; height: 42px;
  border: 0; background: none; color: #cdd8f5; cursor: pointer;
}
.mnav-close svg { width: 26px; height: 26px; display: block; margin: 0 auto; }

/* ---------- <=860px: reveal hamburger, hide desktop clusters, fix layout ---------- */
@media (max-width: 860px) {
  .mnav-toggle { display: inline-flex; margin-left: auto; }
  .nav-links, .site-nav, .nav-right, .header-actions { display: none !important; }

  /* hero: text first, secondary column (proof card / form) below, single column.
     styles.css floats .proof-card above the hero with order:-1 on mobile; the
     brief is hero-first, so re-order the children explicitly. */
  .hero-grid { display: flex !important; flex-direction: column; gap: 30px; }
  /* Landing floats .proof-card above the hero via styles.css `.proof-card{order:-1}`.
     Cancel that so the DOM order (hero text first, card below) is respected.
     Other pages (e.g. studios .cert-card) already have text first in the DOM,
     so no per-child ordering is needed here. */
  .hero-grid > .proof-card { order: 0 !important; }

  /* System B: collapse every multi-column content grid to one column */
  .steps-grid, .steps, .uses-grid, .market-grid, .plans, .plans-grid, .pricing,
  .stats-grid, .eu-metrics, .eu-box, .benefits-grid, .trust-grid, .features-grid,
  .benefit-row, .cert-cards, .final-box, .leads {
    grid-template-columns: 1fr !important;
  }

  /* Footer: keep it 2-column on every page. System A (.foot-top) already goes
     1fr 1fr via styles.css; match System B (.foot-grid) so all footers look the same. */
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 24px !important; }

  /* System B hero email form: stack input above button, both full width */
  .hero-form { flex-direction: column !important; max-width: 420px; }
  .hero-form input, .hero-form .btn-green, .hero-form button { width: 100% !important; }

  .benefit-row { gap: 14px !important; text-align: left; }

  /* Final CTA section (creators/studios "The day you create it..." / "Your IP...").
     The wrapper is .final-box; the mockup's tablet rule mistakenly targets a
     non-existent .fcta-box, so .final-box keeps desktop padding:64px and the
     fixed 280px .fcta-photo (flex-shrink:0) overflows the padded box and gets
     clipped by overflow:hidden. Shrink padding and let the children fit. */
  .final-box, .cta-box { padding: 30px 22px !important; }
  .fcta-inner { flex-direction: column !important; text-align: center; gap: 28px !important; width: 100%; }
  .fcta-content, .fcta-photo-col { width: 100% !important; max-width: 100% !important; }
  .fcta-content p { max-width: 100% !important; margin-left: auto; margin-right: auto; }
  .fcta-photo { width: 100% !important; max-width: 320px !important; height: auto !important; aspect-ratio: 1 / 1; }

  /* --- background gradient fix ---
     styles.css paints the page gradient with background-attachment:fixed, which
     iOS Safari ignores. On a tall phone page the near-black top of the gradient
     then fills the whole hero (shows as black). Re-map the gradient to span the
     full document (scroll + size 100% 100%) so it degrades navy -> blue on every
     device, and start it at navy (not near-black) so the blue actually shows. */
  body {
    background:
      radial-gradient(600px 460px at 86% 1%, rgba(53,226,176,.10), transparent 60%),
      radial-gradient(760px 560px at 8% 5%, rgba(95,200,255,.10), transparent 55%),
      linear-gradient(180deg, #071232 0%, #0b2569 34%, #1546b4 74%, #1c58d6 100%) !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }
  /* soften the dark landing hero photo so the blue gradient reads through */
  .hero-bg { opacity: .14 !important; }

  /* Landing hero: pull the eyebrow + headline up closer to the nav on mobile.
     styles.css sets header{padding:120px 0 40px}; the desktop -72px hero-top
     lift only applies at >=901px, so on phones the full 120px leaves a big
     empty gap under the menu. Scoped to the landing hero via #top. */
  header#top { padding-top: 56px !important; }
}

/* ---------- small phones: tighten gutters ---------- */
@media (max-width: 480px) {
  .wrap, .header-inner, .hero-inner { padding-left: 18px !important; padding-right: 18px !important; }
}