/* ============================================================================
   Site-wide mobile fixes for the Vercel mirror of respond.co.il.
   Elementor's own per-page CSS handles the modern .e-con / flex layout.
   We only fix what's actually missing on the static mirror.
   ============================================================================ */

/* ---------- Universal: no horizontal scroll ---------- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
img, video, iframe, picture, svg {
  max-width: 100%;
  height: auto;
}

/* ---------- Hide GTranslate widget + Google Translate banner ---------- */
[id^="gt-wrapper-"],
.gtranslate_wrapper,
.gt_floater,
.gt_float_switcher,
.gt_options,
.gt-current-lang,
.gt-lang-code,
.skiptranslate,
.goog-te-banner-frame,
.goog-te-gadget,
iframe.skiptranslate { display: none !important; visibility: hidden !important; pointer-events: none !important; }
body { top: 0 !important; position: static !important; }
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[face="arial"] { font-family: inherit !important; }

/* ---------- Button alignment fix for LTR languages ---------- */
html[lang="en"] .elementor-widget-button.elementor-align-right,
html[lang="en"] .elementor-widget-button.elementor-align-left,
html[lang="ar"] .elementor-widget-button.elementor-align-right,
html[lang="ar"] .elementor-widget-button.elementor-align-left {
  text-align: center !important;
}

/* ============================================================================
   TABLET / MOBILE (≤ 1024px) — covers iPad portrait and below
   The mega-menu widget has class .e-n-menu-tablet so it switches to mobile
   behavior at this breakpoint.
   ============================================================================ */
@media (max-width: 1024px) {
  /* ===== Legacy Elementor columns stack to full width ============
     The old Elementor section/column layout uses .elementor-col-N classes.
     Without an explicit .elementor-sm-100, those columns stay at their
     desktop width on mobile (e.g. 33% × 3 side-by-side). Force them full. */
  .elementor-row {
    flex-wrap: wrap !important;
  }
  .elementor-column.elementor-col-10,
  .elementor-column.elementor-col-11,
  .elementor-column.elementor-col-12,
  .elementor-column.elementor-col-14,
  .elementor-column.elementor-col-16,
  .elementor-column.elementor-col-20,
  .elementor-column.elementor-col-25,
  .elementor-column.elementor-col-30,
  .elementor-column.elementor-col-33,
  .elementor-column.elementor-col-40,
  .elementor-column.elementor-col-50,
  .elementor-column.elementor-col-60,
  .elementor-column.elementor-col-66,
  .elementor-column.elementor-col-70,
  .elementor-column.elementor-col-75,
  .elementor-column.elementor-col-80,
  .elementor-column.elementor-col-83,
  .elementor-column.elementor-col-90 {
    width: 100% !important;
    margin-bottom: 16px;
  }

  /* ===== Mobile hamburger menu overlay (controlled by mobile-menu.js) ===== */
  .e-n-menu-wrapper.respond-menu-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    background: #273240 !important;
    padding: 16px !important;
    z-index: 9999 !important;
    max-height: calc(100dvh - 64px) !important;
    overflow-y: auto !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.35) !important;
  }
  .e-n-menu-wrapper.respond-menu-open .e-n-menu-heading {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
  }
  .e-n-menu-wrapper.respond-menu-open .e-n-menu-item {
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  .e-n-menu-wrapper.respond-menu-open .e-n-menu-title-container {
    padding: 14px 12px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    font-size: 16px !important;
    color: #ffffff !important;
  }
  .e-n-menu-wrapper.respond-menu-open .e-n-menu-title-text {
    color: #ffffff !important;
    font-size: 16px !important;
  }
  body.respond-menu-locked {
    overflow: hidden;
  }

  /* Toggle button: make sure it's actually tappable */
  .e-n-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }
}

/* ============================================================================
   MOBILE (≤ 767px) — additional fixes
   ============================================================================ */
@media (max-width: 767px) {
  /* Buttons: center every button regardless of original alignment.
     Elementor saves per-button alignment (right/left/center) per design.
     On phone width that creates an inconsistent zig-zag — center them all. */
  .elementor-widget-button,
  .elementor-widget-button.elementor-align-right,
  .elementor-widget-button.elementor-align-left,
  .elementor-widget-button.elementor-align-center {
    text-align: center !important;
  }
  .elementor-widget-button .elementor-button-wrapper {
    display: flex !important;
    justify-content: center !important;
  }
  .elementor-button {
    margin-inline: auto !important;
  }

  /* Form fields: prevent iOS zoom on focus + full width */
  .elementor-form .elementor-field,
  .elementor-form input,
  .elementor-form textarea,
  .elementor-form select {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .elementor-field-group {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  .elementor-form button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Tables don't break page width */
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  /* Language switcher: compact */
  #respond-lang-switcher .rls-trigger {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
  #respond-lang-switcher .rls-label { display: none !important; }

  /* WhatsApp / accessibility widgets: less intrusive */
  .ht-ctc-style-1, .ht-ctc-chat-style {
    bottom: 14px !important;
    right: 14px !important;
  }
  #acwp-toolbar-btn-wrap,
  .userway_buttons_wrapper {
    transform: scale(0.85);
    transform-origin: top left;
  }
  [dir="rtl"] #acwp-toolbar-btn-wrap,
  [dir="rtl"] .userway_buttons_wrapper { transform-origin: top right; }
}