/*
 * Site header: infobar, logo, main menu, sticky bar and mobile menu.
 * Values measured on the live site at 375 / 768 / 1024 / 1366 / 1920 px.
 */

/* ---------- Infobar (dark strip at the top) ---------- */

.infobar {
  background: var(--color-dark);
  color: var(--color-white);
}

.infobar-inner {
  max-width: var(--layout-inner-container);
  margin: 0 auto;
}

/* two columns 60% / 40% with a 25px gutter (35px from 1220px), as the live grid */
.infobar-row {
  display: flex;
  margin-left: -25px;
}

.infobar-left,
.infobar-right {
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 25px;
  box-sizing: border-box;
}

.infobar-left {
  width: 60%;
}

.infobar-right {
  width: 40%;
  justify-content: flex-end;
}

/* the items wrap to a second line when they do not fit, as on the live site */
.infobar-items {
  display: flex;
  flex-wrap: wrap;
}

.infobar-address,
.infobar-phone {
  display: flex;
  align-items: flex-start;
}

/* only the first address has space on its right on the live site */
.infobar-address:first-child {
  padding-right: 10px;
}

.infobar .fa {
  font-size: 20px;
  line-height: 20px;
  margin-top: 2px;
}

.infobar-phone .fa {
  margin-top: 4px;
  margin-left: 10px;
}

.infobar-address span,
.infobar-phone a {
  margin-left: 5px;
  color: var(--color-white);
}

/* the icons are inline: the space between them is the gap */
.infobar-right img {
  width: 25px;
  margin-bottom: 5px;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .infobar {
    padding: 0 30px;
  }
}

@media (min-width: 1220px) {
  .infobar-row {
    margin-left: -35px;
  }

  .infobar-left,
  .infobar-right {
    padding-left: 35px;
  }
}

@media (max-width: 1024px) {
  .infobar-address,
  .infobar-right {
    display: none;
  }
}

@media (max-width: 768px) {
  .infobar-left {
    width: 90%;
    height: auto;
  }

  .infobar-items {
    flex-direction: column;
  }
}

/* ---------- Header bar: transparent over the page image, dark when sticky ---------- */

.header-bar {
  position: relative;
}

.main-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  height: 95px;
  background: var(--color-header-gradient);
}

.main-nav-inner {
  max-width: var(--layout-inner-container);
  margin: 0 auto;
}

/* Logo: the image is taller than the bar and hangs over the page image */
.logo {
  float: left;
  height: 95px;
  margin: 0 30px 0 -30px;
  padding: 0 30px;
}

.logo::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/* Desktop menu */
.main-nav-panel {
  float: right;
}

.main-nav-menu {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav-menu li {
  position: relative;
  margin-right: 30px;
}

.main-nav-menu a {
  display: block;
  box-sizing: border-box;
  height: 95px;
  line-height: 95px;
  font-size: var(--size-base);
  font-weight: var(--weight-regular);
  color: var(--color-white);
}

.main-nav-menu a:hover,
.main-nav-menu a:focus {
  color: var(--color-white);
}

/* gold line under the link: grows on hover and stays on the current page */
.main-nav-menu a::after {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-gold-line);
  transition: width 0.5s;
}

.main-nav-menu a:hover::after,
.main-nav-menu .is-active a::after {
  width: 100%;
}

/* "B2B": link with a white frame */
.main-nav-menu .is-boxed {
  display: flex;
  align-items: center;
  height: 100%;
}

.main-nav-menu .is-boxed a {
  display: flex;
  height: auto;
  line-height: var(--leading-base);
  padding: 5px 10px;
  border: 1px solid var(--color-white);
}

.main-nav-menu .is-boxed a::after {
  bottom: 8px;
}

@media (min-width: 1024px) {
  .main-nav {
    padding: 0 30px;
  }
}

@media (max-width: 1150px) {
  .logo,
  .main-nav-menu li {
    margin-right: 20px;
  }
}

@media (max-width: 960px) {
  .logo {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .logo {
    padding-left: 15px;
  }
}

/* Sticky: after 100px of scrolling (assets/js/header.js adds .is-sticky) */
.header-bar.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  height: 80px;
  background: var(--color-dark);
}

.is-sticky .main-nav {
  height: 80px;
  background: none;
  z-index: 999999;
}

.is-sticky .logo,
.is-sticky .main-nav-menu a {
  height: 80px;
  line-height: 80px;
}

.is-sticky .logo img {
  width: 112px;
}

.is-sticky .main-nav-menu a::after {
  bottom: 17px;
}

.is-sticky .main-nav-menu .is-boxed a {
  height: auto;
  line-height: var(--leading-base);
}

.is-sticky .main-nav-menu .is-boxed a::after {
  bottom: 8px;
}

/* ---------- Mobile menu: up to 1024px ---------- */

.burger {
  display: none;
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  /* button with three lines and the word MENU */
  .burger {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999;
    width: 56px;
    height: 80px;
    padding: 45px 10px 11px;
    border: 0;
    background: var(--color-coffee);
    color: var(--color-white);
    font: var(--weight-light) var(--size-xs) / var(--leading-base) var(--font-base);
    cursor: pointer;
    transition: 150ms linear;
  }

  .burger-line {
    position: absolute;
    left: 0;
    right: 0;
    width: 35px;
    height: 5px;
    margin: 0 auto;
    border-radius: 9px;
    background: var(--color-white);
    transform-origin: left center;
    transition: 0.25s ease-in-out;
  }

  .burger-line:nth-child(1) { top: 10px; }
  .burger-line:nth-child(2) { top: 20px; }
  .burger-line:nth-child(3) { top: 30px; }

  /* open: the lines become an X and the button moves left with the panel */
  .burger.is-active { right: 34.8%; }
  .burger.is-active .burger-line:nth-child(1) { transform: rotate(45deg); top: 10px; left: 10px; }
  .burger.is-active .burger-line:nth-child(2) { width: 0; opacity: 0; }
  .burger.is-active .burger-line:nth-child(3) { transform: rotate(-45deg); top: 35px; left: 11px; }

  /* side panel, hidden on the right until opened */
  .main-nav-panel {
    float: none;
    position: fixed;
    top: 0;
    left: 100%;
    width: 35%;
    padding: 20px 0;
    background: var(--color-coffee-light);
    transition: 150ms linear;
  }

  .main-nav.is-open .main-nav-panel {
    left: 65%;
  }

  .main-nav-menu {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 35%;
    height: 100%;
    overflow: auto;
    transition: 0.1s linear;
  }

  .main-nav.is-open .main-nav-menu {
    right: 0;
    background: var(--color-coffee-light);
  }

  /* dark layer over the page while the menu is open */
  .main-nav.is-open::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay-50);
  }

  .main-nav-menu li {
    width: 100%;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .main-nav-menu li:first-child { margin-top: 100px; }
  .main-nav-menu li:last-child { margin-bottom: 80px; }

  .main-nav-menu a,
  .main-nav-menu .is-boxed a {
    height: auto;
    line-height: 1;
    padding: 15px 25px;
    border: 0;
  }

  .main-nav-menu .is-boxed {
    display: block;
  }

  .main-nav-menu .is-boxed a {
    line-height: var(--leading-base);
  }

  .main-nav-menu a::after {
    content: none;
  }

  /* sticky on tablets/phones: the live site keeps the 80px link height inside the side menu too */
  .is-sticky .main-nav-panel {
    height: 80px;
  }

  .is-sticky .main-nav-menu a {
    line-height: 1;
  }

  .is-sticky .main-nav-menu .is-boxed a {
    line-height: var(--leading-base);
  }
}

@media (max-width: 768px) {
  .main-nav-panel,
  .main-nav-menu { width: 45%; }
  .main-nav.is-open .main-nav-panel { left: 55%; }
  .burger.is-active { right: 44.8%; }
}

@media (max-width: 414px) {
  .main-nav-panel,
  .main-nav-menu { width: 70%; }
  .main-nav.is-open .main-nav-panel { left: 30%; }
  .burger.is-active { right: 69.8%; }
}

@media (max-width: 320px) {
  .main-nav-panel,
  .main-nav-menu { width: 80%; }
  .main-nav.is-open .main-nav-panel { left: 20%; }
  .burger.is-active { right: 79.8%; }
}