:root {
  --asta-mobile-bottom-nav-space: calc(4.5rem + env(safe-area-inset-bottom));
}

.asta-mobile-bottom-nav {
  display: none;
}

@media (max-width: 860px) {
  html {
    scroll-padding-bottom: var(--asta-mobile-bottom-nav-space);
  }

  body {
    padding-bottom: var(--asta-mobile-bottom-nav-space);
  }

  .asta-mobile-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.25rem;
    min-height: 4.5rem;
    padding: 0.5rem 0.5rem max(0.5rem, env(safe-area-inset-bottom));
    background: var(--wp--preset--color--contrast-alt);
    border-top: 1px solid var(--wp--preset--color--primary-mixed);
    color: var(--wp--preset--color--base-alt);
  }

  .asta-mobile-bottom-nav__item,
  .asta-mobile-bottom-nav__language {
    min-width: 0;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.35rem;
    color: var(--wp--preset--color--base-alt);
    display: inline-flex;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.35rem 0.25rem;
    text-align: center;
    text-decoration: none;
  }

  .asta-mobile-bottom-nav__item:hover,
  .asta-mobile-bottom-nav__item:focus-visible,
  .asta-mobile-bottom-nav__language:hover,
  .asta-mobile-bottom-nav__language:focus-visible,
  .asta-mobile-bottom-nav__item[aria-current="page"] {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base-alt);
  }

  .asta-mobile-bottom-nav__item:active,
  .asta-mobile-bottom-nav__language:active {
    background: var(--wp--preset--color--secondary);
  }

  .asta-mobile-bottom-nav__languages {
    display: block;
    min-width: 0;
  }

  .asta-mobile-language-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.25rem;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .asta-mobile-language-switcher .lang-item {
    display: block;
    min-width: 0;
  }

  .asta-mobile-language-switcher .lang-item > a {
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.35rem;
    color: var(--wp--preset--color--base-alt);
    display: inline-flex;
    font-size: 0;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    width: 100%;
  }

  .asta-mobile-language-switcher .lang-item-de > a::after,
  .asta-mobile-language-switcher .lang-item-en > a::after {
    font-size: 0.75rem;
  }

  .asta-mobile-language-switcher .lang-item-de > a::after {
    content: "DE";
  }

  .asta-mobile-language-switcher .lang-item-en > a::after {
    content: "EN";
  }

  .asta-mobile-language-switcher .lang-item > a:hover,
  .asta-mobile-language-switcher .lang-item > a:focus-visible,
  .asta-mobile-language-switcher .lang-item.current-lang > a {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base-alt);
  }

  .asta-mobile-bottom-nav__search-panel {
    position: absolute;
    inset-inline: 0.5rem;
    bottom: calc(100% + 0.35rem);
    padding: 0.5rem;
    background: var(--wp--preset--color--contrast-alt);
    border: 1px solid var(--wp--preset--color--primary-mixed);
    border-radius: 0.35rem;
  }

  .asta-mobile-bottom-nav__search-panel form {
    display: flex;
    gap: 0.5rem;
  }

  .asta-mobile-bottom-nav__search-panel input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--wp--preset--color--primary-mixed);
    border-radius: 0.35rem;
    background-color: var(--wp--preset--color--base-alt);
    color: var(--wp--preset--color--contrast-alt);
    font: inherit;
    padding: 0.6rem 0.7rem;
  }

  .asta-mobile-bottom-nav__search-panel button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 0.35rem;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base-alt);
    font: inherit;
    font-weight: 700;
    padding: 0.6rem 0.7rem;
  }

  #mega-menu-wrap-topbar #mega-menu-topbar > li.mega-menu-item > ul.mega-sub-menu {
    padding-bottom: var(--asta-mobile-bottom-nav-space) !important;
  }

  #mega-menu-wrap-topbar .cta-anchor-row {
    scroll-margin-bottom: var(--asta-mobile-bottom-nav-space);
  }

  /* Complianz renders its "manage consent" button at `bottom: 0` with
     z-index 9998, so it lands on top of the fixed bottom nav and swallows taps
     on the nav controls. Lift it clear of the nav with the same clearance
     token the nav already reserves. */
  #cmplz-manage-consent .cmplz-btn.cmplz-manage-consent {
    bottom: var(--asta-mobile-bottom-nav-space) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asta-mobile-bottom-nav__search-panel {
    transition: none;
  }
}