/* ================================================
   XECURA - Mobile & Tablet Global Optimization
   Applied to all pages site-wide.
   Breakpoints: mobile <=767px, tablet 768-1024px
   ================================================ */

/* ---- Base: kill horizontal overflow everywhere ---- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* Elementor containers can carry fixed min-widths; cap them */
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner,
.elementor-widget-wrap,
.elementor-widget-container {
  max-width: 100%;
}

/* Avoid iOS auto-zoom on form inputs (requires >=16px) */
input, select, textarea {
  font-size: 16px;
}

/* ============================================================
   TABLET  (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* Site paddings */
  .site-content,
  .ast-container,
  .elementor-section-boxed > .elementor-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Headings size down gently on tablet */
  h1, .elementor-heading-title.h1,
  h1.elementor-heading-title {
    font-size: clamp(28px, 4.5vw, 44px) !important;
    line-height: 1.2 !important;
  }
  h2, h2.elementor-heading-title {
    font-size: clamp(24px, 3.8vw, 36px) !important;
    line-height: 1.25 !important;
  }
  h3, h3.elementor-heading-title {
    font-size: clamp(20px, 3vw, 28px) !important;
    line-height: 1.3 !important;
  }

  /* Force full-width columns for mid-size screens (Elementor) */
  .elementor-column.elementor-col-33,
  .elementor-column.elementor-col-25 {
    width: 50% !important;
  }
}

/* ============================================================
   MOBILE  (<= 767px)
   ============================================================ */
@media (max-width: 767px) {

  /* Reduce paddings so content breathes */
  .site-content,
  .ast-container,
  .elementor-section-boxed > .elementor-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Elementor containers: remove any enforced min-width */
  .e-con,
  .e-con-inner,
  .elementor-section,
  .elementor-container,
  .elementor-column,
  .elementor-widget-wrap {
    min-width: 0 !important;
  }

  /* Stack all Elementor columns */
  .elementor-column:not([class*="stack-none"]) {
    width: 100% !important;
  }

  /* Typography: readable on small screens */
  body,
  .entry-content,
  p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  h1, h1.elementor-heading-title {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }
  h2, h2.elementor-heading-title {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    line-height: 1.25 !important;
  }
  h3, h3.elementor-heading-title {
    font-size: clamp(18px, 4.5vw, 22px) !important;
    line-height: 1.3 !important;
  }
  h4, h4.elementor-heading-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  /* Buttons: full-width, tappable (min 44x44 per WCAG) */
  .elementor-button,
  .ast-button,
  .button,
  .wp-block-button__link {
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Buttons inside a dedicated button container go full width */
  .elementor-widget-button .elementor-button-wrapper,
  .elementor-widget-button .elementor-button {
    width: 100%;
  }

  /* Menu links / navigation: enlarge tap area */
  .main-header-menu a,
  .ast-header-break-point .main-header-menu .menu-item > a,
  .elementor-nav-menu a {
    padding: 14px 16px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Mobile menu toggle visibility */
  .ast-mobile-menu-buttons .menu-toggle,
  .elementor-menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Icon-list items: breath */
  .elementor-icon-list-item {
    padding: 10px 0 !important;
  }

  /* Hero sections / banners: avoid oversized bg images */
  .elementor-section[data-settings*="background_background"] {
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Tables should scroll internally, not push the layout */
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  /* Fluent Form: inputs stack */
  .fluentform .ff-el-group,
  .fluentform .ff-t-cell {
    width: 100% !important;
    padding: 6px 0 !important;
  }

  .fluentform input,
  .fluentform select,
  .fluentform textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }

  /* Hide chat-button label on very small screens to avoid overflow */
  .simple-chat-button .scb-label {
    display: none !important;
  }

  /* Footer columns stacked */
  .site-footer .elementor-column {
    margin-bottom: 24px;
  }

  /* Reduce heavy animations on mobile */
  * {
    animation-duration: 0.4s !important;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
    }
  }
}

/* ============================================================
   VERY SMALL (<= 380px) - iPhone SE, older Androids
   ============================================================ */
@media (max-width: 380px) {
  .site-content,
  .ast-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1, h1.elementor-heading-title {
    font-size: 24px !important;
  }
  h2, h2.elementor-heading-title {
    font-size: 20px !important;
  }

  .elementor-button {
    font-size: 14px !important;
    padding: 13px 18px !important;
  }
}

/* ============================================================
   Landscape phones: avoid giant hero eating the whole viewport
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
  .elementor-section.elementor-section-height-full,
  .e-con-full.e-con-full-height {
    min-height: auto !important;
    height: auto !important;
  }
}