/* ============================================================
   Standalone export responsive fixes
   Duda's CDN runtime JS/CSS normally handles all of this.
   ============================================================ */

/* --- Kill min-width that forces horizontal overflow ---
   desktop.css has .dmInner{min-width:768px!important} and
   .dmDesktopBody .dmInner{min-width:960px} — both blow out the
   layout on any phone. Override them on small screens. */
@media (max-width: 767px) {
  .dmInner,
  .dmDesktopBody .dmInner,
  .dmMobileBody .dmInner,
  .dmLayoutWrapper { min-width: 0 !important; max-width: 100% !important; }

  body, #dm, .dmOuter, .dmInner, .dmLayoutWrapper,
  #site_content, .site_content, .allWrapper { overflow-x: hidden; }

  img { max-width: 100%; height: auto; }
}

/* --- Column grid: force stacking on mobile ---
   Duda's grid widths are gated on dmDesktopBody/dmMobileBody classes.
   These @media rules apply the same widths independently of body class. */
@media (max-width: 767px) {
  /* Let columns wrap */
  #dm .dmRespRow .dmRespColsWrapper { flex-wrap: wrap !important; }

  /* All columns full-width by default on mobile */
  #dm .dmRespRow .dmRespCol,
  .dmRespDesignRow .dmRespDesignCol { width: 100% !important; }

  /* Explicit small-* overrides (only small-6 and small-12 are used on this site) */
  #dm .dmRespRow .dmRespCol.small-6,
  .dmRespDesignRow .small-6 { width: 50% !important; }

  #dm .dmRespRow .dmRespCol.small-12,
  .dmRespDesignRow .small-12 { width: 100% !important; }
}

/* --- Tablet column grid --- */
@media (min-width: 768px) and (max-width: 1024px) {
  #dm .dmRespRow .dmRespColsWrapper { flex-wrap: wrap !important; }

  #dm .dmRespRow .dmRespCol.medium-2  { width: 16.66667% !important; }
  #dm .dmRespRow .dmRespCol.medium-3  { width: 25% !important; }
  #dm .dmRespRow .dmRespCol.medium-4  { width: 33.33333% !important; }
  #dm .dmRespRow .dmRespCol.medium-5  { width: 41.66667% !important; }
  #dm .dmRespRow .dmRespCol.medium-6  { width: 50% !important; }
  #dm .dmRespRow .dmRespCol.medium-7  { width: 58.33333% !important; }
  #dm .dmRespRow .dmRespCol.medium-8  { width: 66.66667% !important; }
  #dm .dmRespRow .dmRespCol.medium-10 { width: 83.33333% !important; }
  #dm .dmRespRow .dmRespCol.medium-12 { width: 100% !important; }
}

/* --- Hamburger header: keep logo + CTA side-by-side on mobile ---
   The hamburger icon is position:fixed at left:10px, width:40px, so we
   pad the row left by 52px to stop it being hidden behind the icon.
   desktop.css rule #dm .p_hfcontainer a.u_1607601200 has specificity
   (1,2,1) and sets margin-left:203px, pushing the button off-screen.
   We need two IDs (#dm #hamburger-header = 2,x,x) to beat it. */
@media (max-width: 767px) {
  #hamburger-header .dmRespColsWrapper {
    flex-wrap: nowrap !important;
    padding-left: 52px !important;
    align-items: center !important;
    overflow: visible !important;
  }
  /* Logo column: grows to fill available space */
  #dm #hamburger-header .u_1505285396.dmRespCol {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* CTA column: shrinks to fit its content */
  #dm #hamburger-header .u_1922002646.dmRespCol {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  /* CTA button: desktop.css sets margin-left:203.5px and width:200px
     via #dm .p_hfcontainer (specificity 1,2,1). Two IDs beats it. */
  #dm #hamburger-header a.u_1607601200 {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 4px 8px 4px 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* --- Hamburger drawer: sub-nav in-drawer expansion ---
   The drawer nav (u_1844604317) is dark brown (--color_1) with white text
   by design. Sub-nav containers start at opacity:0/position:absolute.
   Make them expand inline below their parent when toggled. */
#dm #hamburger-drawer .unifiednav__container[data-depth] {
  position: static !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transition: max-height 0.3s ease, opacity 0.2s ease !important;
  background-color: rgba(0, 0, 0, 0.15) !important;
  transform: none !important;
}
#dm #hamburger-drawer .unifiednav__item-wrap.sub-open > .unifiednav__container[data-depth] {
  opacity: 1 !important;
  max-height: 400px !important;
  pointer-events: auto !important;
}
/* Rotate the angle-down icon when sub-menu is open */
#dm #hamburger-drawer .unifiednav__item-wrap.sub-open > a .icon-angle-down {
  display: inline-block;
  transform: rotate(180deg);
}

/* --- Mobile font-size overrides ---
   m-font-size-* / m-size-* classes are applied via Duda's runtime JS;
   we replicate them here as CSS rules. */
@media (max-width: 767px) {
  .m-font-size-11, .m-size-11 { font-size: 11px !important; }
  .m-font-size-12, .m-size-12 { font-size: 12px !important; }
  .m-font-size-14, .m-size-14 { font-size: 14px !important; }
  .m-font-size-16, .m-size-16 { font-size: 16px !important; }
  .m-font-size-18, .m-size-18 { font-size: 18px !important; }
  .m-font-size-20, .m-size-20 { font-size: 20px !important; }
  .m-font-size-40, .m-size-40 { font-size: 40px !important; }
}