/* Header navigation styles */

:root{
  --topbar-h: 32px;
  --topbar-h-mobile: 0px;
  --header-h: clamp(56px, 7vw, 76px);
}

/* Top bar */
.top-bar{
  position: sticky;
  top: 0;
  z-index: 110;
  background: #01090b;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  height: var(--topbar-h);
  transition: transform .25s ease, opacity .2s ease;
}
body.no-topbar .top-bar{ height: 0; }
@media (max-width: 768px){
  body.has-topbar .top-bar{ height: var(--topbar-h-mobile); }
}
.top-bar .container{ height:100%; display:flex; align-items:center; justify-content:space-between; }
.top-bar.is-hidden{ opacity:0; transform: translateY(-100%); }
.top-bar.is-visible{ opacity:1; transform: translateY(0); }

/* Header container */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7,12,14,.8);
  backdrop-filter: blur(6px);
  margin-top: 0;
}

.header-container{
  min-height: var(--header-h);
  display:flex;
  align-items:center;
  gap:16px;
}

.header-logo img{
  max-height: calc(var(--header-h) - 18px);
  width:auto;
  height:auto;
  display:block;
}

@media (min-width: 783px){
  .admin-bar .site-header{ top:32px; }
  .admin-bar .top-bar{ top:32px; }
}
@media (max-width: 782px){
  .admin-bar .site-header{ top:46px; }
  .admin-bar .top-bar{ top:46px; }
}

/* Navigation */

.main-navigation a {
  position: relative;
  display: inline-block;
  padding: .6em 1.2em;
  border-radius: 14px;
  font-weight: 500;
  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color: #e6ffff;
  text-decoration: none;
  transition: color .3s ease, text-shadow .3s ease, background-color .3s ease;
}

.main-navigation a::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 0%;
  height: 2px;
  background: #00f5ff;
  transition: width .3s ease, left .3s ease;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
  color: #00f5ff;
  text-shadow: 0 0 8px rgba(0,245,255,.55);
}

.main-navigation a:hover::after,
.main-navigation a:focus::after,
.main-navigation .current-menu-item > a::after {
  width: 80%;
  left: 10%;
}

.main-navigation a:focus-visible {
  outline: 2px dashed #00f5ff;
  outline-offset: 4px;
  border-radius: 8px;
}

.main-navigation .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.nav-toggle {
  display: none;
}

@media (max-width:1024px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.08);
    color: #e6ffff;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
  }

  .nav-toggle:hover {
    background: rgba(0,245,255,.08);
    border-color: rgba(0,245,255,.25);
  }

  .nav-toggle-box {
    width: 22px;
    height: 2px;
    background: #e6ffff;
    position: relative;
  }

  .nav-toggle-box::before,
  .nav-toggle-box::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #e6ffff;
    transition: transform .25s ease, top .25s ease, opacity .2s ease;
  }

  .nav-toggle-box::before { top: -7px; }
  .nav-toggle-box::after { top: 7px; }

  .main-navigation {
    position: relative;
  }

  .main-navigation .menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    margin: 8px 0 0;
    background: rgba(7,12,14,.9);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    transform-origin: top right;
    transform: scale(.98);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }

  .main-navigation.is-open .menu {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .main-navigation.is-open .nav-toggle-box {
    background: transparent;
  }

  .main-navigation.is-open .nav-toggle-box::before {
    top: 0;
    transform: rotate(45deg);
  }

  .main-navigation.is-open .nav-toggle-box::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .main-navigation .menu a {
    padding: .9em 1rem;
    border-radius: 10px;
  }

  .main-navigation .menu a::after {
    bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-navigation a,
  .main-navigation a::after,
  .main-navigation .menu,
  .nav-toggle-box::before,
  .nav-toggle-box::after {
    transition: none !important;
  }
}