/* =====================================================================
   Homepage Mobile Fixes — prisha-misuy.co.il
   Created 2026-05-09
   Focused fixes for the homepage rendering on mobile (≤768px) and
   small-mobile (≤480px) viewports.
   Loaded site-wide so it ALSO improves all other pages with hero/CTA.
   ===================================================================== */

/* ============================================================
   1. HERO COMPRESSION — fit more above the fold
   ============================================================ */
@media (max-width: 768px) {
  /* Tighter padding all around */
  .igtax-service-hero {
    padding: 22px 14px 26px !important;
    gap: 14px !important;
  }
  .igtax-service-hero h1 {
    font-size: clamp(20px, 5.4vw, 24px) !important;
    line-height: 1.22 !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.3px !important;
  }
  .igtax-hero-subtitle {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 0 14px !important;
  }
  .hero-eyebrow {
    font-size: 11px !important;
    padding: 4px 12px !important;
    margin: 0 0 10px !important;
  }
  /* Smaller portrait so form is closer to top */
  .hero-image img,
  .hero-image-home img {
    max-width: 150px !important;
    margin: 0 auto 4px !important;
  }
  /* Hide animated decorative blobs on mobile (perf + cleaner) */
  .igtax-service-hero::before,
  .igtax-service-hero::after { display: none !important; }
  /* Lighter background SVG */
  .hero-bg-svg { opacity: 0.3 !important; }

  /* Byline more compact */
  .igtax-byline {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 0 10px !important;
  }
}
@media (max-width: 480px) {
  .igtax-service-hero { padding: 18px 12px 22px !important; }
  .igtax-service-hero h1 { font-size: 21px !important; }
  .igtax-hero-subtitle { font-size: 13.5px !important; }
  .hero-image img, .hero-image-home img { max-width: 130px !important; }
}

/* ============================================================
   2. TRUST BADGES — single line max on mobile
   ============================================================ */
@media (max-width: 768px) {
  .igtax-hero-trust {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin: 0 0 14px !important;
  }
  .igtax-hero-trust .trust-badge {
    font-size: 11.5px !important;
    padding: 4px 10px !important;
    gap: 4px !important;
    line-height: 1.2 !important;
  }
  .igtax-hero-trust .trust-badge svg {
    width: 12px !important;
    height: 12px !important;
  }
}
@media (max-width: 360px) {
  .igtax-hero-trust .trust-badge { font-size: 10.5px !important; padding: 3px 8px !important; }
}

/* ============================================================
   3. HERO LEAD FORM CARD — tighter, larger touch targets
   ============================================================ */
@media (max-width: 768px) {
  .hero-lead-form-card {
    padding: 16px 14px !important;
    margin: 8px 0 0 !important;
    border-radius: 12px !important;
  }
  .hero-lead-form-card h3,
  .hero-lead-form-title {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
  }
  .hero-lead-form-subtitle {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin: 0 0 12px !important;
  }
  .hero-lead-form input,
  .hero-lead-form select,
  .hero-lead-form textarea,
  .crov2-quiz input,
  .crov2-quiz select,
  .pdfgate-form input {
    min-height: 44px !important;  /* iOS touch target standard */
    font-size: 16px !important;   /* prevents iOS zoom on focus */
    padding: 10px 14px !important;
  }
  .hero-lead-form button[type="submit"],
  .crov2-quiz button[type="submit"],
  .pdfgate-form button[type="submit"] {
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px 20px !important;
  }
  .hero-lead-terms,
  .hero-lead-form label.hero-lead-terms {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

/* ============================================================
   4. CRO v2 QUIZ FUNNEL — mobile spacing
   ============================================================ */
@media (max-width: 768px) {
  .crov2-quiz {
    padding: 16px 16px !important;
    border-radius: 12px !important;
    margin: 0 !important;
  }
  .crov2-quiz-step h4 {
    font-size: 1rem !important;
    margin: 0 0 12px !important;
    line-height: 1.4 !important;
  }
  .crov2-quiz-option {
    padding: 11px 14px !important;
    font-size: 14.5px !important;
    min-height: 44px !important;
  }
  .crov2-quiz button.crov2-quiz-back,
  .crov2-quiz button.crov2-quiz-next,
  .crov2-quiz button.crov2-quiz-submit {
    min-height: 46px !important;
    padding: 12px 14px !important;
    font-size: 14.5px !important;
  }
  .crov2-quiz-step-counter { font-size: 0.74rem !important; }
}

/* ============================================================
   5. CRO v2 LOSS-AVERSION CALCULATOR — mobile
   ============================================================ */
@media (max-width: 768px) {
  .crov2-loss-calc {
    padding: 16px 16px !important;
    margin: 16px 0 !important;
    border-radius: 12px !important;
  }
  .crov2-loss-calc h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    gap: 6px !important;
  }
  .crov2-loss-calc p.crov2-loss-subtitle {
    font-size: 13px !important;
    margin: 0 0 12px !important;
  }
  .crov2-loss-calc-fields {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }
  .crov2-loss-field input,
  .crov2-loss-field select {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  .crov2-loss-result-amount {
    font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
  }
  .crov2-loss-result {
    padding: 14px 16px !important;
  }
  .crov2-loss-result-cta {
    padding: 11px 22px !important;
    font-size: 0.95rem !important;
  }
}

/* ============================================================
   6. STICKY BOTTOM CTA BAR — collision avoidance
   ============================================================ */
@media (max-width: 768px) {
  /* Make sure body has correct padding so content doesn't hide under bar */
  body.has-crov2-bottom-bar { padding-bottom: 82px !important; }
  body.has-crov2-bottom-bar .igchat-trigger,
  body.has-crov2-bottom-bar .floating-whatsapp {
    bottom: 92px !important;  /* above the sticky bar */
  }
  /* Hide existing fixed WhatsApp button if both visible (avoid duplication) */
  body.has-crov2-bottom-bar .floating-whatsapp { display: none !important; }
  /* Tighter bottom bar */
  .crov2-bottom-bar {
    padding: 6px !important;
    gap: 5px !important;
  }
  .crov2-btn {
    padding: 8px 4px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  .crov2-btn small { font-size: 9.5px !important; }
  .crov2-btn svg { width: 18px !important; height: 18px !important; }
}

/* ============================================================
   7. LIVE TICKER — less intrusive on mobile
   ============================================================ */
@media (max-width: 768px) {
  .crov2-ticker {
    bottom: 92px !important;  /* above sticky bar */
    left: 6px !important;
    right: auto !important;
    max-width: 280px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  .crov2-ticker-time { font-size: 11px !important; }
  .crov2-ticker-close { padding: 2px 6px !important; font-size: 16px !important; }
}
@media (max-width: 380px) {
  .crov2-ticker {
    max-width: calc(100vw - 76px) !important;
    font-size: 12.5px !important;
  }
}

/* ============================================================
   8. CONTENT SECTIONS — mobile spacing
   ============================================================ */
@media (max-width: 768px) {
  .content-section {
    margin: 28px auto !important;
    padding: 0 14px !important;
  }
  .content-section h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
  }
  .content-section h3 { font-size: 17px !important; }
  .content-section p, .content-section li {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
  /* h2-with-icon balance */
  .igtax-h2-with-icon {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }
  .igtax-h2-with-icon svg.h2-vivid,
  .igtax-h2-with-icon .h2-vivid {
    width: 32px !important;
    height: 32px !important;
  }
  .igtax-h2-with-icon .h2-text { display: block !important; }
}

/* ============================================================
   9. TABLES — horizontal scroll wrapper enforcement
   ============================================================ */
@media (max-width: 768px) {
  .table-wrap, .data-table-section .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -14px 14px !important;
    padding: 0 14px !important;
  }
  .data-table, .igtax-data-table {
    font-size: 13.5px !important;
    min-width: 480px !important;  /* allow horizontal scroll, no squish */
  }
  .data-table th, .data-table td,
  .igtax-data-table th, .igtax-data-table td {
    padding: 8px 10px !important;
  }
}

/* ============================================================
   10. CALCULATOR FORMS — mobile
   ============================================================ */
@media (max-width: 768px) {
  .calc-form,
  .calculator-section .calc-form {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .calc-form select,
  .calc-form input[type="number"],
  .calc-form input[type="text"] {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  .calc-submit {
    min-height: 48px !important;
    font-size: 16px !important;
  }
  .calc-result {
    font-size: 14.5px !important;
    padding: 14px !important;
  }
}

/* ============================================================
   11. PROGRESS BAR — slightly thicker on mobile (more visible)
   ============================================================ */
@media (max-width: 768px) {
  .uxe-progress-bar { height: 4px !important; }
}

/* ============================================================
   12. UX META PILL — wraps cleanly
   ============================================================ */
@media (max-width: 480px) {
  .uxe-meta-pill {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
  }
  .uxe-meta-pill .uxe-meta-divider { display: none !important; }
  .uxe-meta-pill .uxe-print-btn {
    align-self: flex-start;
    margin-top: 4px;
  }
}

/* ============================================================
   13. ILLUSTRATION BREAKS — smaller on mobile
   ============================================================ */
@media (max-width: 768px) {
  .igtax-illustration-break {
    margin: 18px auto !important;
    max-width: 280px !important;
  }
  .igtax-illustration-break img { max-height: 160px !important; }
  .igtax-illustration-break figcaption {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 6px !important;
  }
}

/* ============================================================
   14. SPECIALIZATIONS / SERVICE CARD GRIDS
   ============================================================ */
@media (max-width: 768px) {
  .specializations-grid,
  .related-services-grid,
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .specialization-card,
  .related-service-card {
    padding: 16px 18px !important;
  }
}

/* ============================================================
   15. BOTTOM LEAD SECTION — full-bleed on mobile
   ============================================================ */
@media (max-width: 768px) {
  .bottom-lead-section {
    padding: 32px 16px !important;
  }
  .bottom-lead-section h2 {
    font-size: 22px !important;
    margin: 0 0 12px !important;
  }
  .bottom-lead-card {
    padding: 18px 16px !important;
    border-radius: 12px !important;
  }
  .bottom-lead-card .form-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .bottom-lead-card input {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  .bottom-lead-card button[type="submit"] {
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

/* ============================================================
   16. GOOGLE REVIEWS WIDGET — mobile readability
   ============================================================ */
@media (max-width: 768px) {
  .google-reviews-widget,
  .gr-carousel-wrap {
    padding: 24px 14px !important;
  }
  .gr-card,
  .google-review-card {
    padding: 16px 14px !important;
  }
  .gr-card-text,
  .google-review-text {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }
}

/* ============================================================
   17. SITEWIDE DISCLAIMER — readable on mobile
   ============================================================ */
@media (max-width: 768px) {
  .igtax-disclaimer,
  .site-disclaimer {
    padding: 16px 14px !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }
}

/* ============================================================
   18. SCROLL-LOCK FIXES — prevent horizontal scroll site-wide
   ============================================================ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body > * { max-width: 100vw !important; }
  /* Common offenders that break layout */
  img, video, svg, iframe, table { max-width: 100% !important; }
}

/* ============================================================
   19. FLOATING CHAT TRIGGER — keep it accessible above sticky bar
   ============================================================ */
@media (max-width: 768px) {
  body.has-crov2-bottom-bar #igchat-trigger,
  body.has-crov2-bottom-bar .igchat-trigger {
    bottom: 92px !important;
    right: 12px !important;
    width: 52px !important;
    height: 52px !important;
  }
}

/* ============================================================
   20. QUIZ THANKS state — bigger, brighter on mobile
   ============================================================ */
@media (max-width: 768px) {
  .crov2-quiz-thanks { padding: 18px 12px !important; }
  .crov2-quiz-thanks h4 { font-size: 1.2rem !important; }
  .crov2-quiz-thanks svg { width: 50px !important; height: 50px !important; }
}