/* SITE NAV CSS - component for index.html, description.html, video.html */

/* --- Language switching: <span data-l="pl"> / <span data-l="en"> --- */
html[data-lang="pl"] [data-l="en"],
html[data-lang="en"] [data-l="pl"] {
  display: none !important;
}

/* --- TOP BAR --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  align-self: stretch; /* full width also inside the flex body of index.html */
  min-height: 6.5rem; /* space reserved before the component loads */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(16, 15, 40, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: "Rajdhani", sans-serif;
  color: #fff;
}

.topbar .wrap {
  width: 100%;
  max-width: 112rem;
  margin: 0 auto;
  padding: 0 2.4rem;
  display: flex;
  align-items: center;
  gap: 2.4rem;
  height: 6.4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
  text-decoration: none;
  font-family: "Orbitron", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

.brand svg {
  width: 4rem; /* bigger than before so the 3 rings stay readable */
  height: 3rem;
  overflow: visible;
}

.topnav {
  display: flex;
  gap: 2.4rem;
  margin-left: auto;
}

.topnav a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.2s;
}

.topnav a:hover,
.topnav a[aria-current="page"] {
  color: #36d6ff;
}

.lang-switch {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  overflow: hidden;
}

.lang-switch button {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font: 600 1.3rem "Rajdhani", sans-serif;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
}

.lang-switch button[aria-pressed="true"] {
  background: rgba(54, 214, 255, 0.15);
  color: #fff;
}

.mobile-nav {
  display: none;
  gap: 0.8rem;
  overflow-x: auto;
  padding: 1rem 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav a {
  flex: 0 0 auto;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.5rem;
  text-transform: uppercase;
  padding: 0.5rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  color: rgba(255, 255, 255, 0.78);
}

.mobile-nav a[aria-current="page"] {
  color: #fff;
  border-color: rgba(54, 214, 255, 0.6);
}

@media (max-width: 48em) {
  .topbar {
    min-height: 11.6rem;
  }
  .topbar .wrap {
    padding: 0 1.6rem;
  }
  .topnav {
    display: none;
  }
  .lang-switch {
    margin-left: auto;
  }
  .mobile-nav {
    display: flex;
  }
}