/* WebX VerticalsDemo Mobile Hotfix v0.1.0
   Front-end only. Primary breakpoint: tablet/phone.
*/

/* Safe global foundations */
html,
body {
  max-width: 100%;
}

body.webx-mobile-hotfix-active {
  overflow-x: hidden;
}

body.webx-mobile-hotfix-active *,
body.webx-mobile-hotfix-active *::before,
body.webx-mobile-hotfix-active *::after {
  box-sizing: border-box;
}

body.webx-mobile-hotfix-active img,
body.webx-mobile-hotfix-active svg,
body.webx-mobile-hotfix-active video,
body.webx-mobile-hotfix-active canvas,
body.webx-mobile-hotfix-active iframe {
  max-width: 100%;
}

body.webx-mobile-hotfix-active img,
body.webx-mobile-hotfix-active video {
  height: auto;
}

body.webx-mobile-hotfix-active input,
body.webx-mobile-hotfix-active select,
body.webx-mobile-hotfix-active textarea,
body.webx-mobile-hotfix-active button {
  max-width: 100%;
}

body.webx-mobile-hotfix-active table {
  max-width: 100%;
}

body.webx-mobile-hotfix-active pre,
body.webx-mobile-hotfix-active code,
body.webx-mobile-hotfix-active .wdlb-prompt-preview,
body.webx-mobile-hotfix-active [class*="prompt-preview"] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Common WebX container safety */
body.webx-mobile-hotfix-active .wdlb-app,
body.webx-mobile-hotfix-active .wdlb-shell,
body.webx-mobile-hotfix-active .wxdr,
body.webx-mobile-hotfix-active .wxdr-shell,
body.webx-mobile-hotfix-active [class*="demo-center"],
body.webx-mobile-hotfix-active [class*="verticals-demo"],
body.webx-mobile-hotfix-active [class*="webx-demo"],
body.webx-mobile-hotfix-active main,
body.webx-mobile-hotfix-active article {
  max-width: 100%;
}

/* Tablet and down */
@media (max-width: 980px) {
  body.webx-mobile-hotfix-active .wdlb-results-columns,
  body.webx-mobile-hotfix-active .wdlb-mode-grid,
  body.webx-mobile-hotfix-active .wdlb-number-grid,
  body.webx-mobile-hotfix-active .wdlb-cost-grid,
  body.webx-mobile-hotfix-active .wdlb-option-grid,
  body.webx-mobile-hotfix-active .wdlb-radio-grid,
  body.webx-mobile-hotfix-active .wdv-check-grid,
  body.webx-mobile-hotfix-active .wdw-baseline-grid,
  body.webx-mobile-hotfix-active .wdw-coaching-grid,
  body.webx-mobile-hotfix-active .wdw-action-detail-grid,
  body.webx-mobile-hotfix-active .wdl-pillar-grid,
  body.webx-mobile-hotfix-active .wxdr-grid,
  body.webx-mobile-hotfix-active .wxdr-inline-results,
  body.webx-mobile-hotfix-active .wxdr-number-grid,
  body.webx-mobile-hotfix-active .wxdr-results-grid,
  body.webx-mobile-hotfix-active [class*="vertical-grid"],
  body.webx-mobile-hotfix-active [class*="demo-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.webx-mobile-hotfix-active .wdlb-hero,
  body.webx-mobile-hotfix-active .wdlb-home-hero,
  body.webx-mobile-hotfix-active .wdlb-wellness-hero,
  body.webx-mobile-hotfix-active .wdv-hero {
    gap: 24px;
  }

  body.webx-mobile-hotfix-active .wdlb-shell,
  body.webx-mobile-hotfix-active .wxdr-shell,
  body.webx-mobile-hotfix-active main {
    width: 100%;
  }
}

/* Phone */
@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body.webx-mobile-hotfix-active {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  body.webx-mobile-hotfix-active .wdlb-shell,
  body.webx-mobile-hotfix-active .wxdr-shell,
  body.webx-mobile-hotfix-active [class*="demo-shell"],
  body.webx-mobile-hotfix-active [class*="demo-wrap"],
  body.webx-mobile-hotfix-active [class*="verticals-wrap"],
  body.webx-mobile-hotfix-active main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Collapse WebX grids to one column */
  body.webx-mobile-hotfix-active .wdlb-results-columns,
  body.webx-mobile-hotfix-active .wdlb-mode-grid,
  body.webx-mobile-hotfix-active .wdlb-number-grid,
  body.webx-mobile-hotfix-active .wdlb-cost-grid,
  body.webx-mobile-hotfix-active .wdlb-option-grid,
  body.webx-mobile-hotfix-active .wdlb-radio-grid,
  body.webx-mobile-hotfix-active .wdv-check-grid,
  body.webx-mobile-hotfix-active .wdw-baseline-grid,
  body.webx-mobile-hotfix-active .wdw-coaching-grid,
  body.webx-mobile-hotfix-active .wdw-action-detail-grid,
  body.webx-mobile-hotfix-active .wdl-pillar-grid,
  body.webx-mobile-hotfix-active .wxdr-grid,
  body.webx-mobile-hotfix-active .wxdr-inline-results,
  body.webx-mobile-hotfix-active .wxdr-number-grid,
  body.webx-mobile-hotfix-active .wxdr-results-grid,
  body.webx-mobile-hotfix-active .wxdr-repeat-row,
  body.webx-mobile-hotfix-active [class*="vertical-grid"],
  body.webx-mobile-hotfix-active [class*="demo-grid"],
  body.webx-mobile-hotfix-active [class*="card-grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Remove desktop fixed/min widths from WebX descendants */
  body.webx-mobile-hotfix-active .wdlb-app *,
  body.webx-mobile-hotfix-active .wxdr *,
  body.webx-mobile-hotfix-active [class*="demo-center"] *,
  body.webx-mobile-hotfix-active [class*="verticals-demo"] * {
    min-width: 0;
  }

  /* Hero sections stack */
  body.webx-mobile-hotfix-active .wdlb-hero,
  body.webx-mobile-hotfix-active .wdlb-home-hero,
  body.webx-mobile-hotfix-active .wdlb-wellness-hero,
  body.webx-mobile-hotfix-active .wdv-hero,
  body.webx-mobile-hotfix-active [class*="demo-hero"],
  body.webx-mobile-hotfix-active [class*="vertical-hero"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  /* Keep heading text inside viewport */
  body.webx-mobile-hotfix-active h1,
  body.webx-mobile-hotfix-active h2,
  body.webx-mobile-hotfix-active h3,
  body.webx-mobile-hotfix-active p,
  body.webx-mobile-hotfix-active li,
  body.webx-mobile-hotfix-active strong,
  body.webx-mobile-hotfix-active span {
    overflow-wrap: anywhere;
  }

  body.webx-mobile-hotfix-active .wdlb-hero h1,
  body.webx-mobile-hotfix-active .wdlb-results-head h2,
  body.webx-mobile-hotfix-active [class*="demo-hero"] h1 {
    font-size: clamp(30px, 10vw, 48px) !important;
    line-height: 1.03 !important;
  }

  body.webx-mobile-hotfix-active h2 {
    line-height: 1.08;
  }

  /* Forms */
  body.webx-mobile-hotfix-active label,
  body.webx-mobile-hotfix-active input,
  body.webx-mobile-hotfix-active select,
  body.webx-mobile-hotfix-active textarea {
    width: 100%;
    max-width: 100%;
  }

  body.webx-mobile-hotfix-active input,
  body.webx-mobile-hotfix-active select,
  body.webx-mobile-hotfix-active textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }

  /* Buttons: easy to tap without forcing text off-screen */
  body.webx-mobile-hotfix-active .wdlb-action-buttons,
  body.webx-mobile-hotfix-active .wdlb-welcome-actions,
  body.webx-mobile-hotfix-active [class*="button-row"],
  body.webx-mobile-hotfix-active [class*="actions"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body.webx-mobile-hotfix-active .wdlb-btn,
  body.webx-mobile-hotfix-active .wxdr button,
  body.webx-mobile-hotfix-active [class*="demo"] a[class*="btn"],
  body.webx-mobile-hotfix-active [class*="demo"] button {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  /* Cards */
  body.webx-mobile-hotfix-active .wdlb-question-card,
  body.webx-mobile-hotfix-active .wdlb-summary-card,
  body.webx-mobile-hotfix-active .wdlb-mode-card,
  body.webx-mobile-hotfix-active .wdlb-action-panel,
  body.webx-mobile-hotfix-active .wxdr-section,
  body.webx-mobile-hotfix-active [class*="demo-card"],
  body.webx-mobile-hotfix-active [class*="vertical-card"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tables/scrollers */
  body.webx-mobile-hotfix-active table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Canvas/graphics shouldn't force page wider */
  body.webx-mobile-hotfix-active canvas,
  body.webx-mobile-hotfix-active .wdw-canvas-stage,
  body.webx-mobile-hotfix-active [class*="canvas-stage"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  /* Common WordPress/theme wrappers */
  body.webx-mobile-hotfix-active .site,
  body.webx-mobile-hotfix-active .site-content,
  body.webx-mobile-hotfix-active .content-area,
  body.webx-mobile-hotfix-active .entry-content,
  body.webx-mobile-hotfix-active .wp-site-blocks,
  body.webx-mobile-hotfix-active .wp-block-group,
  body.webx-mobile-hotfix-active .wp-block-columns {
    max-width: 100%;
    min-width: 0;
  }

  body.webx-mobile-hotfix-active .wp-block-columns {
    flex-wrap: wrap !important;
  }

  body.webx-mobile-hotfix-active .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Small phones */
@media (max-width: 420px) {
  body.webx-mobile-hotfix-active .wdlb-shell,
  body.webx-mobile-hotfix-active .wxdr-shell,
  body.webx-mobile-hotfix-active [class*="demo-shell"],
  body.webx-mobile-hotfix-active main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.webx-mobile-hotfix-active .wdlb-section,
  body.webx-mobile-hotfix-active .wxdr-section,
  body.webx-mobile-hotfix-active .wdlb-question-card,
  body.webx-mobile-hotfix-active .wdlb-summary-card,
  body.webx-mobile-hotfix-active .wdlb-mode-card {
    border-radius: 12px;
  }
}