/* mobile.css — Shared mobile-friendly overrides.
 *
 * Loaded on every public page. Each page already has some mobile media
 * queries inline, but key gaps remain (tables overflowing, info grids
 * with minmax columns, tap-target sizing). This file backstops them.
 *
 * Activates at <=640px (phones) and tightens further at <=400px.
 */

/* ── Always: belt-and-braces against horizontal overflow ──────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Wide content (tables, code blocks, image galleries) gets a horizontal
   scroll context so it never forces the body wider than the viewport.
   Visible only when the content actually overflows. */
.post-body table,
.post-body pre,
.legal-wrap table,
section table:not(.no-mobile-scroll) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Phones (≤640px) ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Force any auto-fit / multi-column grid that uses a min size to
     collapse to a single column on phones. The page CSS uses patterns
     like `repeat(auto-fit, minmax(240px, 1fr))` that don't shrink below
     the min and break at 375–420px viewports. */
  .info-grid,
  .blog-grid,
  .cars-grid,
  .stats-row,
  .feature-grid,
  .step-grid,
  .pricing-grid,
  .package-grid,
  .country-grid,
  .service-grid,
  .footer-grid,
  .form-grid,
  .two-col,
  .three-col,
  .four-col {
    grid-template-columns: 1fr !important;
  }

  /* Section padding: original is often 80px which is huge on mobile */
  section {
    padding: 48px 1.25rem !important;
  }

  /* Heroes — tighten top padding (navbar accounted for) and tighten typography */
  .page-hero,
  .post-hero,
  .hero,
  .cg-hero,
  .vat-hero,
  .legal-hero {
    padding-top: 96px !important;
    padding-bottom: 40px !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; line-height: 1.2 !important; }
  .page-hero h1, .post-hero h1, .cg-hero h1, .vat-hero h1, .legal-hero h1 {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    line-height: 1.25 !important;
  }
  .page-hero p, .post-hero p, .cg-hero p, .vat-hero p, .legal-hero p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  /* Section titles get smaller on mobile */
  .section-title { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; }
  .section-subtitle { font-size: 0.95rem !important; }

  /* Tap-target and form-field sizing */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="search"],
  input[type="date"], input[type="password"], select, textarea {
    font-size: 16px !important;  /* iOS auto-zoom kicks in below 16px */
    padding: 12px 14px !important;
  }
  button, .btn, .btn-primary, .btn-outline, .nav-cta,
  .price-btn, a.btn-primary, a.btn-outline {
    min-height: 44px;            /* Apple HIG tap target */
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 0.92rem !important;
  }

  /* Tables: shrink fonts and add scroll */
  .post-table, .vat-table, .cost-table, .data-table, .country-table {
    font-size: 0.82rem !important;
    min-width: 480px;            /* let it scroll horizontally */
  }
  .post-table th, .vat-table th, .cost-table th, .data-table th, .country-table th { padding: 10px 12px !important; }
  .post-table td, .vat-table td, .cost-table td, .data-table td, .country-table td { padding: 8px 12px !important; }

  /* Table wrappers / horizontal scroll affordance */
  .post-table-wrap, .data-table-wrap, .vat-table-wrap, .cost-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem -1.25rem;     /* bleed to viewport edges */
    padding: 0 1.25rem;
  }

  /* Footer: tighter spacing */
  footer { padding: 40px 1.25rem 24px !important; }
  .footer-bottom {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }

  /* Cards: pad less aggressively, smaller headings */
  .car-card, .blog-card, .price-card, .feature-card, .country-card,
  .service-card, .pricing-card, .info-card, .step-card, .case-study-card {
    padding: 1.25rem !important;
  }
  .car-card h3, .blog-card h2, .price-card h3, .feature-card h3 {
    font-size: 1.05rem !important;
  }

  /* Post body prose: comfortable reading width on phones */
  .post-body, .legal-wrap {
    padding: 32px 1.25rem 48px !important;
  }
  .post-body h2, .legal-wrap h2 {
    font-size: 1.25rem !important;
    margin-top: 1.75rem !important;
  }
  .post-body h3, .legal-wrap h3 {
    font-size: 1.05rem !important;
    margin-top: 1.25rem !important;
  }
  .post-body p, .post-body li, .legal-wrap p, .legal-wrap li {
    font-size: 0.95rem !important;
  }

  /* Long inline code or URL strings shouldn't push layout wider */
  .post-body, .post-body p, .post-body li, .post-body a,
  .legal-wrap, .legal-wrap p, .legal-wrap li {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* WhatsApp floating button: keep small + don't overlap CTAs */
  .wa-float {
    bottom: 16px !important;
    right: 16px !important;
    padding: 12px !important;
    border-radius: 50% !important;
  }
  .wa-float .wa-label { display: none !important; }

  /* Calculator specifics */
  .calc-inputs, .calc-breakdown, .calc-section {
    padding: 1.25rem !important;
  }
  .input-with-currency { flex-wrap: wrap; }

  /* Contact page: stack contact-grid */
  .contact-grid, .contact-options { grid-template-columns: 1fr !important; }
}

/* ── Very small phones (≤400px) ───────────────────────────────────────── */
@media (max-width: 400px) {
  .navbar { padding: 0 1rem !important; }
  .navbar .logo { font-size: 1rem !important; gap: 8px !important; }
  .navbar .logo img { height: 36px !important; width: 36px !important; }
  section { padding: 40px 1rem !important; }
  .page-hero, .post-hero, .hero { padding-left: 1rem !important; padding-right: 1rem !important; }
  .post-body, .legal-wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
}