/*
 * Site-wide layout fixes, loaded after every page's own styles (see BaseLayout.astro).
 */

/* --- Header (desktop): keep the whole menu on one line ---------------------------------
 * The WP custom CSS pushes the right-hand group (language, login, CTA) away with a fixed
 * `margin-right: 8.5vw` on the 4th-from-last item. With longer translated labels (DE/FR/ES),
 * or in the narrower sticky header (extra 48px side padding), that spacer overflows and
 * the CTA wraps onto a second line. Use a flex row with an auto margin instead, so the gap
 * shrinks to whatever space is left. */
@media only screen and (min-width: 1133px) {
  header .wp-block-group:has(> #mega-menu-wrap-max_mega_menu_1) {
    flex: 1 1 auto;
    min-width: 0;
    /* Keep the menu from sitting right against the logo. */
    margin-left: clamp(24px, 4vw, 72px);
  }
  header #mega-menu-wrap-max_mega_menu_1 {
    flex: 1 1 auto;
    min-width: 0;
  }
  header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  header #mega-menu-max_mega_menu_1 > li.mega-menu-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  header ul.mega-menu > li:nth-last-child(4) > a {
    margin-right: 0 !important;
  }
  header ul.mega-menu > li:nth-last-child(4) {
    margin-right: auto !important;
    padding-right: 24px;
  }
}

/* Tight desktop widths: trim the item spacing so the longest translations still fit. */
@media only screen and (min-width: 1133px) and (max-width: 1320px) {
  header #mega-menu-max_mega_menu_1 > li.mega-menu-item:not(:last-child):not(:nth-last-child(4)) {
    margin-right: 16px !important;
  }
}

/* --- Footer (tablet / mobile): show the link columns, not burger menus -----------------
 * The footer link columns are Max Mega Menu instances (3, 4, 5). Below the plugin's 1132px
 * breakpoint each one turns into an off-canvas drawer with its own hamburger toggle. They
 * are plain link lists, so keep them inline and hide the toggles. */
@media only screen and (max-width: 1132px) {
  footer .mega-menu-wrap .mega-menu-toggle,
  footer .mega-menu-wrap button.mega-close {
    display: none !important;
  }
  footer .mega-menu-wrap > ul.mega-menu {
    position: static !important;
    visibility: visible !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    transition: none !important;
    z-index: auto !important;
  }

  /* Give the four link columns the full row (logo/badges block above them) so labels such
   * as "Integrationen" or "Wissensdatenbank" are not broken mid-word. */
  footer .wp-block-columns:has(> .wp-block-column > .wp-block-columns .mega-menu-wrap) {
    flex-wrap: wrap !important;
  }
  footer .wp-block-columns:has(> .wp-block-column > .wp-block-columns .mega-menu-wrap) > .wp-block-column {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}