/* ============================================================
   mobile-first.css — Global mobile optimization (RTL Hebrew)
   Loaded on all funnel pages. Mobile-first base, scaled up.
   ============================================================ */

:root {
  --tap-min: 48px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --fs-h1-m: clamp(1.75rem, 7vw, 3.5rem);
  --fs-h2-m: clamp(1.4rem, 5vw, 2.5rem);
  --fs-h3-m: clamp(1.15rem, 4vw, 1.75rem);
  --fs-body-m: clamp(1rem, 2.6vw, 1.125rem);
  --fs-small-m: clamp(0.875rem, 2.2vw, 1rem);

  --pad-inline: clamp(14px, 4vw, 32px);
  --section-pad: clamp(40px, 8vh, 120px);
}

/* Kill horizontal scroll globally */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Responsive media */
img, video, svg, canvas, iframe, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Touch target enforcement — anything tappable ≥48px */
button,
.btn,
[role="button"],
a.btn, a.button, a.cta, a.nav-link,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  touch-action: manipulation;
}

/* Form inputs — prevent iOS auto-zoom (font-size must be ≥16px) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
  font-size: 16px;
  min-height: var(--tap-min);
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

/* RTL punctuation helper — wrap trailing "." in .ltr-punct */
.ltr-punct {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

/* Heading wrap control — prevent ugly orphans */
h1, h2, h3, .hero-title, .section-title {
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Utility classes */
.mf-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  box-sizing: border-box;
}

.mf-stack-mobile > * + * { margin-top: 12px; }

.mf-cta-full-mobile { width: 100%; }

/* ============================================================
   MOBILE (default base) — ≤640px
   ============================================================ */

@media (max-width: 640px) {
  /* Global padding */
  body {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }

  /* Section padding shrink */
  section, .section {
    padding-block: var(--section-pad);
    padding-inline: var(--pad-inline);
  }

  /* Headings scale down */
  h1, .h1, .hero-title { font-size: var(--fs-h1-m); line-height: 1.15; }
  h2, .h2, .section-title { font-size: var(--fs-h2-m); line-height: 1.2; }
  h3, .h3 { font-size: var(--fs-h3-m); line-height: 1.25; }
  p, .body, li { font-size: var(--fs-body-m); line-height: 1.6; }
  small, .small, .caption { font-size: var(--fs-small-m); }

  /* Containers full width */
  .container,
  .wrapper,
  .content,
  .main-content {
    max-width: 100% !important;
    padding-inline: var(--pad-inline) !important;
  }

  /* Grids → 1 col */
  .grid,
  .cards,
  .features-grid,
  .pricing-grid,
  .lessons-grid,
  .stats-grid,
  .niche-grid,
  .testimonials-grid,
  .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Cards — reduce padding */
  .card,
  .feature-card,
  .pricing-card,
  .lesson-card,
  .niche-card,
  .skill-card {
    padding: 20px !important;
    border-radius: 14px !important;
  }

  /* Buttons — full width primary CTAs */
  .btn-primary,
  .cta-primary,
  .btn-cta,
  .btn-large,
  button[type="submit"] {
    width: 100%;
    min-height: 52px;
    font-size: 1.05rem;
    padding-inline: 20px;
  }

  /* Button groups — stack */
  .btn-group,
  .actions,
  .cta-group {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
  }
  .btn-group > *,
  .actions > *,
  .cta-group > * {
    width: 100%;
  }

  /* Hide heavy decorations */
  .decoration,
  .bg-orbs,
  .floating-particles,
  .hero-decoration,
  .floating-emoji,
  .bg-blob {
    display: none !important;
  }

  /* Faded ghost headings fix */
  .ghost-heading,
  .section-bg-text,
  .watermark-text,
  .section-watermark {
    display: none !important;
  }

  /* Section titles — force solid high-contrast color on mobile (gradient text fails on dark bg) */
  .section-title,
  .section-header h2,
  h2.section-title {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
    background: none !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    opacity: 1 !important;
    line-height: 1.2 !important;
    text-shadow: 0 0 30px rgba(232,160,32,0.35), 0 2px 8px rgba(0,0,0,0.5);
  }
  .section-subtitle {
    font-size: clamp(0.95rem, 3vw, 1.1rem) !important;
    color: rgba(255,255,255,0.85) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
    padding-inline: 8px;
  }

  /* Stats chip — wrap */
  .stats-chip,
  .hero-stats,
  .trust-badges {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    font-size: var(--fs-small-m);
  }

  /* Tables → horizontal scroll inside container */
  .table-wrap, table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Video aspect ratio */
  .video-wrap, .video-container {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto !important;
  }
  .video-wrap iframe,
  .video-wrap video,
  .video-container iframe,
  .video-container video {
    width: 100% !important;
    height: 100% !important;
  }

  /* Forms centered */
  form.auth-form,
  form.contact-form,
  form.signup-form {
    max-width: 100%;
    padding: 16px;
  }
}

/* ============================================================
   SMALL PHONE — ≤380px tweaks
   ============================================================ */
@media (max-width: 380px) {
  :root {
    --pad-inline: 12px;
  }
  h1, .h1, .hero-title { font-size: clamp(1.5rem, 8vw, 2rem); }
  .btn-primary, .cta-primary { font-size: 1rem; min-height: 48px; }
}

/* ============================================================
   Motion / accessibility
   ============================================================ */
@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;
  }
}

/* Focus visible — accessibility */
:focus-visible {
  outline: 2px solid #ffb300;
  outline-offset: 2px;
}

/* Tap highlight — subtle */
* {
  -webkit-tap-highlight-color: rgba(255, 179, 0, 0.15);
}

/* Theme toggle TEMPORARILY HIDDEN — light mode disabled until audit complete */
.theme-toggle,
#theme-toggle,
#theme-toggle-header,
.theme-toggle-header,
.theme-toggle-floating,
.theme-fab,
#theme-toggle-fab,
.floating-theme-toggle {
  display: none !important;
}