.site-header{
  background:var(--cream);
  display:flex;
  justify-content:center;
  position:relative;
  z-index:5000;
  padding-top:20px;
  padding-bottom:10px;
}

.site-header__inner{
  width:min(var(--container-max),calc(100% - (var(--container-padding) * 2)));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
}

.site-logo{
  display:block;
  width:84px;
  height:84px;
  flex:0 0 84px;
  position:relative;
  z-index:120;
}

.site-logo__img{
  width:84px;
  height:84px;
  object-fit:contain;
}

.site-logo__img--white{
  display:none;
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  width:100%;
  max-width:900px;
  padding-top:5px;
}

.site-nav__link{
  font-family:var(--font-primary);
  font-size:27px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  color:var(--red);
  border:1px solid var(--red);
  padding:5px 22px 3px;
  background:transparent;
  text-decoration:none;
  white-space:nowrap;
  transition:background var(--transition),color var(--transition),transform var(--transition);
}

.site-nav__link:hover,
.site-nav__link.is-active{
  background:rgba(255,42,48,.08);
  transform:translateY(-1px);
}

.menu-toggle-container{
  display:none;
  position:relative;
  z-index:130;
}

.menu-toggle{
  width:46px;
  height:46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--red);
  background:transparent;
  color:var(--red);
  cursor:pointer;
  border-radius:0;
}

.menu-toggle__line{
  width:24px;
  height:2px;
  display:block;
  background:currentColor;
  transform-origin:center;
  transition:transform .25s ease-out,opacity .2s ease-out;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__line:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__line:nth-child(2){
  opacity:0;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__line:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

.nav-overlay{
    position:fixed;
    inset:0;
    background:var(--cream);
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
    overflow:hidden;
}

.nav-overlay::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:url('/assets/images/logo.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:260px;
    opacity:.08;
    pointer-events:none;
}

.nav-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.nav-overlay__logo{
  position:absolute;
  top:22px;
  right:22px;
  width:72px;
  height:72px;
  display:block;
}

.nav-overlay__logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.nav-overlay__nav{
  width:min(420px,calc(100% - 48px));
  display:grid;
  gap:18px;
  text-align:center;
}

.nav-overlay__link{
  font-family:var(--font-primary);
  font-size:34px;
  font-weight:700;
  line-height:1;
  color:var(--red);
  text-decoration:none;
  text-transform:uppercase;
  border:1px solid var(--red);
  padding:13px 18px 9px;
  background:transparent;
  transition:background var(--transition),transform var(--transition);
}

.nav-overlay__link:hover,
.nav-overlay__link.is-active{
  background:rgba(255,42,48,.08);
  transform:translateY(-2px);
}

@media(max-width:1024px){
  .site-header__inner{
    width:calc(100% - (var(--container-padding-tablet) * 2));
    gap:24px;
  }

  .site-logo,
  .site-logo__img{
    width:72px;
    height:72px;
    flex-basis:72px;
  }

  .site-nav{
    gap:18px;
  }

  .site-nav__link{
    font-size:22px;
    padding:5px 16px 3px;
  }
}

@media(max-width:820px){
  .site-header{
    padding-top:14px;
    padding-bottom:12px;
  }

  .site-header__inner{
    width:calc(100% - (var(--container-padding-mobile) * 2));
  }

  .site-logo,
  .site-logo__img{
    width:54px;
    height:54px;
    flex-basis:54px;
  }

  .site-nav{
    display:none;
  }

  .menu-toggle-container{
    display:block;
  }
}

@media(max-width:420px){
  .nav-overlay__logo{
    top:18px;
    right:18px;
    width:58px;
    height:58px;
  }

  .nav-overlay__link{
    font-size:27px;
    padding:12px 14px 8px;
  }
}