/*
 * Avoir — menu nikdy nepřetéká.
 * Menu má 7 položek; defaultní styl (font 1.5rem, padding 2rem) potřebuje ~1610px.
 * Řešení: pro vše < 1800px aplikujeme kompaktnější styl. Pod 1200px Bootstrap default přejde na hamburger.
 */

/* Všechna rozlišení do 1800px — zmenšit padding a font položek, zmenšit padding wrappru */
@media (max-width: 1799px) {
  .horizontal-menu {
    padding-left: 18rem !important;
    padding-right: 17rem !important;
  }
  .horizontal-menu .ul-top-items .li-top-item .a-top-link {
    padding: 0 1.2rem !important;
  }
  .horizontal-menu .ul-top-items .li-top-item .a-top-link span {
    font-size: 1.3rem !important;
    letter-spacing: -0.02rem;
  }
}

/* Ještě těsněji 1200-1400px */
@media (max-width: 1400px) and (min-width: 1200px) {
  .horizontal-menu {
    padding-left: 16rem !important;
    padding-right: 15rem !important;
  }
  .horizontal-menu .ul-top-items .li-top-item .a-top-link {
    padding: 0 0.7rem !important;
  }
  .horizontal-menu .ul-top-items .li-top-item .a-top-link span {
    font-size: 1.2rem !important;
  }
}

/* Pojistka — zakázat wrap a překryt z-index nad hero */
.horizontal-menu {
  z-index: 50;
  position: relative;
}
.horizontal-menu .ul-top-items {
  white-space: nowrap;
  display: inline-block;
}
.horizontal-menu .ul-top-items > .li-top-item > .a-top-link {
  white-space: nowrap;
}