meritzones-header { display: block; min-height: 84px; }
meritzones-header:not([legal]) { min-height: 0; }
#site-navigation *, #site-navigation *::before, #site-navigation *::after { box-sizing: border-box; }
#site-navigation {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  width: 100%;
  height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: transparent;
  transition: height .25s ease, background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
#site-navigation.scrolled,
meritzones-header[legal] #site-navigation {
  height: 68px;
  background: rgba(5,5,8,.92);
  border-bottom-color: #2d2d36;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#site-navigation .brand { justify-self: start; }
#site-navigation .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font: 800 18px "Orbitron", sans-serif;
}
#site-navigation .brand > span > span { color: #ffb703; }
#site-navigation .brand-mark { display:block; width:34px; height:34px; }
#site-navigation .nav-links { justify-self: center; display:flex; gap:38px; margin:0; }
#site-navigation .nav-links a {
  width:108px;
  color:#c2c0c9;
  text-align:center;
  text-decoration:none;
  font:700 11px "Rajdhani", sans-serif;
  letter-spacing:1px;
}
#site-navigation .nav-links a:hover { color:#ffb703; }
#site-navigation .nav-actions { justify-self: end; display:flex; align-items:center; gap:10px; }
#site-navigation .lang-switch,
#site-navigation .login-btn {
  height:38px;
  border:1px solid #3a3a48;
  border-radius:6px;
  background:rgba(15,15,20,.8);
  color:#f7f6fa;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#site-navigation .lang-switch { width:76px; min-width:76px; padding:3px; gap:3px; display:grid; grid-template-columns:1fr 1fr; }
#site-navigation .lang-option { width:32px; height:30px; padding:0; border:1px solid transparent; border-radius:4px; background:transparent; display:grid; place-items:center; opacity:.45; cursor:pointer; }
#site-navigation .lang-option img { display:block; width:22px; height:auto; border-radius:2px; }
#site-navigation .lang-option:hover { opacity:.8; }
#site-navigation .lang-option.active { opacity:1; border-color:#ffb703; background:rgba(255,183,3,.07); }
#site-navigation .login-btn { width:148px; min-width:148px; gap:7px; padding:0 10px; border-color:rgba(255,183,3,.4); text-decoration:none; font:700 11px "Rajdhani",sans-serif; letter-spacing:.8px; cursor:pointer; }
#site-navigation .login-btn:hover { border-color:#ffb703; color:#ffb703; }
#site-navigation .login-icon { color:#ffb703; font-size:14px; }

@media (max-width: 800px) {
  meritzones-header { min-height: 112px; }
  #site-navigation,
  #site-navigation.scrolled,
  meritzones-header[legal] #site-navigation {
    height: 112px;
    grid-template-columns: 1fr auto;
    grid-template-rows: 62px 50px;
    padding-inline: 15px;
  }
  #site-navigation .brand { grid-column: 1; grid-row: 1; }
  #site-navigation .nav-actions { grid-column: 2; grid-row: 1; }
  #site-navigation .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    gap: clamp(18px, 7vw, 42px);
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 0;
    align-self: stretch;
  }
  #site-navigation .nav-links a {
    display: inline-flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  #site-navigation .login-btn { width: 38px; min-width: 38px; padding: 0; }
  #site-navigation .login-btn > span:last-child { display: none; }
}

@media (max-width: 420px) {
  #site-navigation { padding-inline: 12px; }
  #site-navigation .nav-links { gap: 15px; }
  #site-navigation .nav-links a { font-size: 9px; }
}