/* eg-mobile.css — mobile fix for the static Duda export.
   ROOT CAUSE: Duda's responsive CSS keys off body.dmMobileBody, a class its
   hosted runtime injects on phones. The static export lacks that runtime, so
   .small-12/.large-*/.medium-* column rules never apply and the 768px desktop
   layout renders overlapping at phone width. We apply the class equivalents
   directly under a media query instead. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; }

  /* Kill the hard 768px canvas */
  #dmStyle_innerContainer, .dmInner, #dm .dmInner {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Duda column system, un-gated from .dmMobileBody.
     small-12 = full width on mobile; medium/large columns stack. */
  .dmRespRow .dmRespCol.small-12,
  .dmRespDesignRow .dmRespCol.small-12 {
    position: relative !important;
    width: 100% !important;
  }
  .dmRespRow .dmRespCol,
  .dmRespDesignRow .dmRespCol {
    float: none !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .dmRespRow, .dmRespDesignRow {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  .dmRespColsWrapper { width: 100% !important; }

  /* Duda mobile font utilities (markup has them, export dropped the rules) */
  .m-font-size-14 { font-size: 14px !important; }
  .m-font-size-15 { font-size: 15px !important; }
  .m-font-size-16 { font-size: 16px !important; }
  .m-font-size-17 { font-size: 17px !important; }
  .m-font-size-18 { font-size: 18px !important; }
  .m-font-size-20 { font-size: 20px !important; }
  .m-font-size-22 { font-size: 22px !important; }
  .m-font-size-24 { font-size: 24px !important; }
  .m-font-size-26 { font-size: 26px !important; }
  .m-font-size-28 { font-size: 28px !important; }
  .m-font-size-30 { font-size: 30px !important; }

  /* Media must never overflow */
  img, video, iframe { max-width: 100% !important; height: auto !important; }

  /* The hamburger drawer must not reserve layout width when closed.
     Duda's closed state is a transform/left offset; keep it off-canvas. */
  #hamburger-drawer.hamburger-drawer,
  .layout-drawer {
    width: 0 !important;
    overflow: hidden !important;
  }
  /* The hamburger header container is fixed and full-viewport in the export;
     it must shrink to just the header bar or it overlays content. */
  .hamburger-header-container {
    height: auto !important;
    pointer-events: none !important;
  }
  .hamburger-header-container > * {
    pointer-events: auto !important;
  }

  /* Touch targets (44px Apple HIG) */
  a, button, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px !important;
  }
  p a, li a, span a { min-height: 0 !important; } /* inline links stay inline */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* stop iOS focus zoom */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Desktop-sized spacers collapse */
  .dmSpacer { max-height: 40px !important; }

  /* Headings wrap, don't blow out */
  h1 { font-size: 1.8em !important; line-height: 1.25 !important; overflow-wrap: break-word !important; }
  h2 { font-size: 1.5em !important; line-height: 1.3 !important; overflow-wrap: break-word !important; }
  h3 { font-size: 1.25em !important; line-height: 1.35 !important; }

  /* Absolute-positioned decorative layers must not escape the viewport */
  [style*="position: absolute"], [style*="position:absolute"] {
    max-width: 100% !important;
  }
}