/* Push footer menu to bottom */
body > .page-wrapper {
  min-height: calc(100vh - 3rem - var(--gin-toolbar-y-offset));
}
.region-footer {

  .block-menu.menu--footer {
    min-height: 3rem;
    background: var(--gin-color-primary);

    ul.menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin: 0 var(--gin-spacing-xl) 0 0;

      li.menu-item {
        list-style: none;
        margin-top: var(--gin-spacing-s);
        margin-left: var(--gin-spacing-xl);

        a, span {
          display: inline-flex;
          align-items: center;
          font-size: var(--gin-font-size-s);
          text-decoration: none;
          color: white;
        }
        a::before,
        span:before {
          content: "";
          width: var(--gin-icon-size-toolbar);
          height: var(--gin-icon-size-toolbar);
          background-color: white;
          -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 16 16 12 12 8'%3E%3C/polyline%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 16 16 12 12 8'%3E%3C/polyline%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
          margin-right: var(--gin-spacing-xs);
        }
        .eu-cookie-withdraw-tab {
          position: relative;
          top: 0;
          left: 0;
          transform: unset;
        }
      }
    }
  }

  nav.menu--main {
    display: none;

    ul.menu {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0;
      padding: 0;
      list-style: none;
      height: 3rem;
      background: var(--gin-bg-app);
      box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      z-index: 1000;

      .menu-item {
        flex: 1;
        list-style: none;
        text-align: center;
        padding: var(--gin-spacing-xs);
        box-shadow: var(--gin-shadow-l1);

        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          color: var(--gin-color-text);
          font-size: var(--gin-font-size-s);
          padding-top: var(--gin-spacing-xs);
          height: 100%;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
        }
        a::before {
          content: "";
          display: block;
          background: var(--gin-color-primary-active);
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          -webkit-mask-position: center center;
          mask-position: center center;
          -webkit-mask-size: var(--gin-icon-size-toolbar) var(--gin-icon-size-toolbar);
          mask-size: var(--gin-icon-size-toolbar) var(--gin-icon-size-toolbar);
          width: var(--gin-icon-size-toolbar);
          height: var(--gin-icon-size-toolbar);
        }
        a::after {
          position: relative;
          display: block;
          content: "";
          height: 0.5rem;
          background: var(--gin-color-primary);
          width: 0;
        }
        a.is-active {
          color: var(--gin-color-primary);
        }
        a.is-active::after {
          width: 100%;
          -webkit-transition: width 1s;
          transition: width 1s;
        }
      }
      .menu-item--active-trail {
        a {
          color: var(--gin-color-primary);
        }
        a::after {
          width: 100%;
          -webkit-transition: width 1s;
          transition: width 1s;
        }
      }
      .menu-item.hidden {
        display: none;
      }
      .menu-item.menu-more-button a::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-menu'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-menu'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
      }
    }
  }
}

/* "More" dropdown menu */
#mobile-menu-more {
  display: none;
  position: fixed;
  bottom: 3rem;
  left: 0;
  right: 0;
  flex-direction: column;
  background: var(--gin-bg-app);
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1001;

  a {
    padding: var(--gin-spacing-s) var(--gin-spacing-m);
    display: flex;
    text-decoration: none;
    font-size: var(--gin-font-size-s);
    color: var(--gin-color-text);
    box-shadow: var(--gin-shadow-l1);
  }
  a::before {
    content: "";
    background: var(--gin-color-primary-active);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: var(--gin-icon-size-toolbar) var(--gin-icon-size-toolbar);
    mask-size: var(--gin-icon-size-toolbar) var(--gin-icon-size-toolbar);
    width: var(--gin-icon-size-toolbar);
    height: var(--gin-icon-size-toolbar);
    margin-right: var(--gin-spacing-xs);
    flex-shrink: 0;
  }
}

@media (max-width: 60.99em) {
  body > .page-wrapper {
    min-height: calc(100vh - 6rem - var(--gin-toolbar-y-offset));
  }
  main.page-content {
    margin-bottom: 2rem;
  }
  .region-footer {
    height: 6rem;
    nav.menu--main {
      display: block;
    }
  }
}
@media (max-width: 47.99em) {
  body > .page-wrapper {
    min-height: unset;
  }
  main.page-content {
    margin-bottom: 1em;
  }
  .region-footer {
    .block-menu.menu--footer ul.menu {
      display: block;
      margin: 0 1em 2rem 1em;
      li.menu-item {
        margin: 0;
        padding: 1em 0;
      }
    }
  }
}