/**
 * mobile-responsive.css
 * ─────────────────────
 * Mobile-first responsive overrides for all public website pages.
 * Covers: 16 EN pages + 8 language variants (120 pages) + 40 docs pages.
 * Include AFTER public-site.css in every page.
 */

/* ═══════════════════════════════════════════════════════════
 *  HAMBURGER MENU (hidden on desktop, shown on mobile)
 * ═══════════════════════════════════════════════════════════ */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
 *  TABLET (max-width: 768px)
 * ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hamburger ── */
  .hamburger { display: block; }

  /* ── Header ── */
  .header-content {
    padding: 10px 16px;
    gap: 0;
  }
  .logo-section { flex: 1; }
  .header-controls { gap: 0.5rem; }

  /* ── Nav — hidden, toggled by hamburger ── */
  .main-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    background: var(--header-bg, rgba(9, 14, 28, 0.98));
    border-top: 1px solid var(--border-color);
    padding: 8px 0;
    order: 10;
  }
  .main-nav.open { display: flex; }
  .nav-link {
    padding: 12px 20px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    width: 100%;
  }
  .nav-link:last-child { border-bottom: none; }

  /* ── CTA buttons in header ── */
  .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
  }
  .cta-buttons .btn { width: 100%; text-align: center; }

  /* ── Hero sections (all pages) ── */
  .hero-mega,
  .hero-section { padding: 28px 16px 20px; }
  .hero-mega h1 { font-size: 1.8rem !important; }
  .hero-mega .sub { font-size: 0.95rem; }
  .hero-section h1 { font-size: 1.8rem; }
  .hero-section h2 { font-size: 1.1rem; }

  /* ── Phone hero ── */
  .phone-hero { padding: 14px 20px; gap: 10px; }
  .phone-hero .num { font-size: 1.5rem; }
  .phone-hero .lbl { font-size: 0.85rem; }

  /* ── Integration bar ── */
  .integration-bar { gap: 8px 16px; padding: 16px; }
  .int-logo { font-size: 0.85rem; gap: 6px; }

  /* ── Stats ── */
  .stats-mega { grid-template-columns: 1fr 1fr; }
  .stat-m { padding: 16px 10px; }
  .stat-m .n { font-size: 1.8rem; }
  .stat-m .l { font-size: 0.75rem; }
  .stat-m:nth-child(2) { border-right: none; }

  /* ── Grids — single column ── */
  .showcase,
  .feature-grid,
  .pricing-row,
  .use-case-grid,
  .card-grid,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr !important;
    padding: 16px;
    gap: 12px;
  }

  /* ── Cards ── */
  .show-card,
  .price-card,
  .feature-card,
  .info-card { padding: 16px; }

  /* ── Section titles ── */
  .section-title { font-size: 1.4rem; padding: 24px 16px 0; }
  .section-sub { font-size: 0.85rem; padding: 0 16px; margin: 6px auto 0; }

  /* ── CTA sections ── */
  .cta-mega { padding: 28px 16px; }
  .cta-mega h2 { font-size: 1.4rem; }
  .cta-mega .btn { width: 100%; }

  /* ── Hero CTA buttons ── */
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-cta .btn { width: 100%; text-align: center; }

  /* ── Content sections ── */
  .content-section,
  .page-content,
  section { padding-left: 16px; padding-right: 16px; }

  /* ── Pricing ── */
  .price-card .amt { font-size: 1.8rem; }
  .price-card .badge { font-size: 0.65rem; padding: 3px 10px; }

  /* ── Forms ── */
  .form-group { margin-bottom: 12px; }
  form input[type="text"],
  form input[type="email"],
  form input[type="tel"],
  form input[type="password"],
  form input[type="url"],
  form textarea,
  form select {
    width: 100% !important;
    max-width: 100%;
    font-size: 16px; /* prevents iOS zoom */
    box-sizing: border-box;
  }
  form .btn,
  form button[type="submit"] {
    width: 100%;
    text-align: center;
    padding: 14px;
    font-size: 1rem;
  }

  /* ── Tables ── */
  table { font-size: 0.85rem; }
  table th, table td { padding: 8px 10px; }

  /* ── Footer ── */
  .footer-content,
  .site-footer .footer-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 24px 16px;
  }
  .footer-section { text-align: center; }
  .footer-bottom { padding: 16px; flex-direction: column; gap: 8px; }

  /* ── Docs-specific ── */
  .docs-layout {
    flex-direction: column;
  }
  .docs-sidebar {
    width: 100%;
    max-width: 100%;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    max-height: 200px;
    overflow-y: auto;
  }
  .docs-content { padding: 16px; }

  /* ── Inline styles overrides ── */
  [style*="grid-template-columns: repeat"] {
    grid-template-columns: 1fr !important;
  }
  [style*="display:grid"][style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
  [style*="padding:60px"],
  [style*="padding: 60px"] { padding: 24px 16px !important; }
  [style*="padding:40px"],
  [style*="padding: 40px"] { padding: 20px 16px !important; }

  /* ── RTL languages (Arabic) ── */
  [dir="rtl"] .main-nav.open { text-align: right; }
  [dir="rtl"] .nav-link { text-align: right; }
}

/* ═══════════════════════════════════════════════════════════
 *  SMALL PHONE (max-width: 480px)
 * ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-mega h1 { font-size: 1.5rem !important; }
  .hero-section h1 { font-size: 1.5rem; }
  .stats-mega { grid-template-columns: 1fr; }
  .stat-m { border-right: none; border-bottom: 1px solid var(--border-color); }
  .stat-m:last-child { border-bottom: none; }
  .phone-hero {
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    text-align: center;
  }
  .section-title { font-size: 1.2rem; }
  .integration-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .logo-text { font-size: 0.95rem; }

  /* Prevent text overflow */
  h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }
}

/* ═══════════════════════════════════════════════════════════
 *  TOUCH-FRIENDLY
 * ═══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .btn, button, a.nav-link {
    min-height: 44px;
    min-width: 44px;
  }
  /* Phone numbers tap-to-call */
  a[href^="tel:"] {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 600;
  }
}