/* responsive.css — Mobile & tablet overrides for activtherapie.ch
   Loaded LAST to override Duda's fixed-width desktop CSS.
   Breakpoints: mobile (<768px), tablet (768-1024px)
   ------------------------------------------------------------ */

/* ============================================================
   GLOBAL — Unlock the responsive framework
   ============================================================ */

.dmInner,
.dmDesktopBody .dmInner {
  min-width: 0 !important;
}

body.dmRoot {
  overflow-x: hidden !important;
}

#dm, .dm_wrapper, .dmOuter, #allWrapper {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Nav and map containers — 100% width at all breakpoints */
#dm .p_hfcontainer nav.u_1112353738,
nav.u_1785477155,
#dm .p_hfcontainer nav.u_1785477155 {
  width: 100% !important;
  max-width: 100% !important;
}


/* ============================================================
   MOBILE — max-width: 767px
   ============================================================ */

@media (max-width: 767px) {

  /* --- Layout rows --- */
  .dmRespRow,
  .dmLargeBody .dmRespRow {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .dmRespRow .dmRespColsWrapper {
    max-width: 100% !important;
    flex-direction: column !important;
  }

  /* Stack all columns */
  .dmRespRow .dmRespCol,
  .dmDesktopBody .dmRespRow .large-12,
  .dmRespCol[class*="large-"],
  .dmRespCol[class*="medium-"] {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Header --- */
  #dm .dmInner div.dmHeader.u_hcontainer,
  #dm .dmInner div.u_hcontainer {
    padding: 15px 10px 10px !important;
  }

  /* Logo — boost specificity with body.dmRoot to beat async-loaded Duda CSS */
  body.dmRoot #dm .p_hfcontainer .u_1011018909,
  body.dmRoot #dm .p_hfcontainer div.u_1011018909,
  body.dmRoot #dm .p_hfcontainer .u_1331484966,
  body.dmRoot #dm .p_hfcontainer div.u_1331484966 {
    width: 120px !important;
    height: auto !important;
    max-height: 120px !important;
    margin: 8px auto 0 !important;
  }

  .imageWidget img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Divider under logo — compact */
  body.dmRoot #dm .p_hfcontainer div.u_1792998365,
  body.dmRoot div.u_1595580364 {
    width: 50% !important;
    margin: 4px auto !important;
  }

  /* --- Navigation — stack vertically --- */
  .main-navigation.unifiednav .unifiednav__container,
  .main-navigation.unifiednav:not(.unifiednav_vertical) > .unifiednav__container {
    flex-direction: column !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .main-navigation.unifiednav .unifiednav__container > .unifiednav__item-wrap {
    width: 100% !important;
    justify-content: center !important;
  }

  .main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item,
  #dm .p_hfcontainer .u_1112353738.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item,
  #dm .p_hfcontainer .u_1785477155.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item,
  nav.u_1785477155.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item {
    padding: 6px 15px !important;
    margin: 0 !important;
    font-size: 17px !important;
    justify-content: center !important;
  }

  /* Submenu parent — force column layout so submenu drops BELOW the link */
  body.dmRoot .main-navigation.unifiednav .unifiednav__container > .unifiednav__item-wrap[data-sub-nav-menu] {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Submenu container — inline flow, full width, but let Duda JS control visibility via opacity */
  body.dmRoot .main-navigation.unifiednav .unifiednav__container[data-depth],
  body.dmRoot .main-navigation.unifiednav .unifiednav__container[data-depth="0"],
  body.dmRoot #dm .p_hfcontainer .u_1112353738.main-navigation.unifiednav .unifiednav__container[data-depth="0"],
  body.dmRoot #dm .p_hfcontainer .u_1112353738.main-navigation.unifiednav:not([image]) .unifiednav__container[data-depth="0"],
  body.dmRoot #dm .p_hfcontainer .u_1785477155.main-navigation.unifiednav .unifiednav__container[data-depth="0"],
  body.dmRoot #dm .p_hfcontainer .u_1785477155.main-navigation.unifiednav:not([image]) .unifiednav__container[data-depth="0"],
  body.dmRoot #dm .p_hfcontainer .u_1112353738.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap:not(:last-child) .unifiednav__container[data-depth="0"],
  body.dmRoot #dm .p_hfcontainer .u_1785477155.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap:not(:last-child) .unifiednav__container[data-depth="0"] {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: rgba(241, 241, 241, 0.8) !important;
  }

  /* Submenu items — centered, readable */
  body.dmRoot .main-navigation.unifiednav .unifiednav__container[data-depth] > .unifiednav__item-wrap .unifiednav__item,
  body.dmRoot #dm .p_hfcontainer nav.u_1112353738.main-navigation.unifiednav .unifiednav__container[data-depth] .unifiednav__item {
    padding: 8px 20px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }

  /* Nav separators and dropdown chevrons — hide on mobile */
  #dm .p_hfcontainer .main-navigation.unifiednav:not(.unifiednav_vertical) .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap:not(:last-child)::after,
  #dm .p_hfcontainer .main-navigation.unifiednav:not(.unifiednav_vertical) .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap:not(:last-child)::before {
    display: none !important;
  }

  /* Hide dropdown arrow since submenu is always expanded on mobile */
  body.dmRoot .main-navigation.unifiednav .unifiednav__item_has-sub-nav .icon {
    display: none !important;
  }

  /* --- Hero section --- */
  #dm .dmBody div.u_1904103558 {
    padding: 40px 15px 60px !important;
  }

  #dm .dmContent .dmRespRow {
    padding: 30px 15px 15px !important;
  }

  /* --- Buttons (scoped to button links only) --- */
  #dm .dmBody a.dmButtonLink,
  #dm .dmBody a.u_1666661687 {
    width: auto !important;
    max-width: 90% !important;
    min-height: 44px !important;
  }

  #dm .dmBody a.dmButtonLink .text {
    font-size: 16px !important;
    padding: 12px 20px !important;
  }

  /* --- Photo gallery — 2 columns on mobile --- */
  .photogallery-column.column-4 {
    width: 50% !important;
    float: left !important;
  }

  /* --- Footer — stack columns --- */
  .dmFooterContainer .dmRespCol {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    padding: 10px 0 !important;
  }

  #dm .dmFooterContainer .dmNewParagraph p,
  #dm .dmFooterContainer .u_1907850233 p {
    text-align: center !important;
  }

  /* --- Map (contact page) --- */
  .dmMap,
  [data-element-type="map_widget"],
  .leaflet-container {
    width: 100% !important;
    min-height: 250px !important;
  }

  /* --- Scroll-to-top button --- */
  div.u_1256868770 {
    width: 40px !important;
    height: 40px !important;
    margin: 0 15px 15px 0 !important;
  }

  /* --- Typography — ensure readability --- */
  #dm div.dmNewParagraph p {
    font-size: 16px !important;
  }

  .font-size-39, .size-39,
  .m-font-size-33, .m-size-33 {
    font-size: 28px !important;
  }

  .font-size-31, .size-31,
  .m-font-size-27, .m-size-27 {
    font-size: 24px !important;
  }

  .font-size-20, .size-20 {
    font-size: 17px !important;
  }

  .dmSpacer {
    height: 10px !important;
  }

  #dm .dmContent .dmRespRow .dmRespCol {
    padding: 0 5px !important;
  }
}


/* ============================================================
   TABLET — 768px to 1024px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

  /* --- Layout rows --- */
  .dmRespRow,
  .dmLargeBody .dmRespRow {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  .dmRespRow .dmRespColsWrapper {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* --- Header --- */
  body.dmRoot #dm .p_hfcontainer .u_1011018909,
  body.dmRoot #dm .p_hfcontainer div.u_1011018909,
  body.dmRoot #dm .p_hfcontainer .u_1331484966,
  body.dmRoot #dm .p_hfcontainer div.u_1331484966 {
    width: 220px !important;
    height: auto !important;
  }

  /* --- Navigation --- */
  .main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item,
  #dm .p_hfcontainer .u_1112353738.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item,
  nav.u_1785477155.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item {
    font-size: 18px !important;
    padding: 5px 10px !important;
    margin: 0 8px !important;
  }

  /* --- Columns — 2-col for multi-column rows --- */
  .dmRespCol[class*="large-4"]:not([class*="large-12"]),
  .dmRespCol[class*="large-3"]:not([class*="large-12"]),
  .dmRespCol[class*="large-2."]:not([class*="large-12"]) {
    width: 50% !important;
    float: left !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
  }

  /* --- Photo gallery — 3 columns on tablet --- */
  .photogallery-column.column-4 {
    width: 33.333% !important;
  }

  /* --- Hero spacing --- */
  #dm .dmBody div.u_1904103558 {
    padding: 60px 20px 80px !important;
  }

  /* --- Footer — 2 columns on tablet --- */
  .dmFooterContainer .dmRespCol {
    width: 50% !important;
    float: left !important;
    text-align: center !important;
  }

  /* --- Buttons --- */
  #dm .dmBody a.dmButtonLink,
  #dm .dmBody a.u_1666661687 {
    width: auto !important;
    min-height: 44px !important;
  }

  /* --- Map --- */
  .dmMap,
  [data-element-type="map_widget"],
  .leaflet-container {
    width: 100% !important;
  }
}


/* ============================================================
   SMALL MOBILE — max-width: 400px (iPhone SE, small Android)
   ============================================================ */

@media (max-width: 400px) {

  .photogallery-column.column-4 {
    width: 100% !important;
  }

  /* Nav — match specificity of mobile rule to actually override */
  .main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item,
  #dm .p_hfcontainer .u_1112353738.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item,
  nav.u_1785477155.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item {
    font-size: 16px !important;
    padding: 8px 10px !important;
  }

  body.dmRoot #dm .p_hfcontainer .u_1011018909,
  body.dmRoot #dm .p_hfcontainer div.u_1011018909,
  body.dmRoot #dm .p_hfcontainer .u_1331484966,
  body.dmRoot #dm .p_hfcontainer div.u_1331484966 {
    width: 100px !important;
    max-height: 100px !important;
  }
}