/* Centered header: logo + menu sit in the middle column of a 3-column grid,
   with equal side columns so the group stays centered at every width.
   Desktop (>=1200px): [ empty | logo + menu | account ]
   Mobile  (<1200px):  [ menu button | logo | account ] */

.header.-type-2 .header__container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 16px;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Separate the header from the page: hairline border plus a soft shadow.
   z-index keeps the shadow above the hero/banner that follows. */
.header.-type-2 {
  z-index: 1000;
  background-color: #fff;
  border-bottom: 1px solid #E7E6E6;
  box-shadow: 0 6px 20px -8px rgba(5, 7, 60, 0.12);
}

.header.-type-2 .header__container > .headerMobile__left {
  grid-column: 1;
  justify-self: start;
}

.header.-type-2 .header__container > .header__logo {
  grid-column: 2;
  justify-self: center;
  margin: 0 auto;
}

.header.-type-2 .header__container > .headerMobile__right,
.header.-type-2 .header__container > .header__right {
  grid-column: 3;
  justify-self: end;
}

.header.-type-2 .header__logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tighter menu on smaller desktops so everything fits on one line */
@media (min-width: 1200px) and (max-width: 1439px) {
  .header.-type-2 .header__logo img {
    width: 150px;
  }
  .header.-type-2 .header__logo .ml-30 {
    margin-left: 16px !important;
  }
  .header.-type-2 .desktopNav > * {
    padding: 8px 12px;
  }
  .header.-type-2 .header__right .headerDropdown.ml-30 {
    margin-left: 0 !important;
  }
}

@media (max-width: 1199px) {
  .header.-type-2 .header__container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .header.-type-2 .header__logo img {
    width: 150px;
  }
  .header.-type-2 .headerMobile__right .headerDropdown.ml-20 {
    margin-left: 0 !important;
  }
  .header.-type-2 .headerMobile__left,
  .header.-type-2 .headerMobile__right {
    display: flex;
    align-items: center;
  }
  /* main.css only takes the user dropdown out of the flow below 768px, so on
     tablets its hidden menu still took up space and pushed the icon up/left. */
  .header.-type-2 .headerMobile__right .headerDropdown {
    position: relative;
  }
  .header.-type-2 .headerMobile__right .headerDropdown__button {
    padding: 7px 8px;
  }
  .header.-type-2 .headerMobile__right .headerDropdown__content {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 9999;
    min-width: 160px;
    margin-top: 8px;
  }
}

@media (max-width: 575px) {
  .header.-type-2 .header__container {
    column-gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .header.-type-2 .header__logo img {
    width: 120px;
  }
}