/* Glassmorphism top nav: transparent, sticky, readable */

/* Try common nav containers; kept minimal to avoid layout shifts */
header, .header, nav, .nav, .navbar, .topbar {
  position: sticky;
  top: 0;
  z-index: 100; /* above content; our 3D bg is z-index -1 */
  background: rgba(255, 255, 255, 0.04); /* ~bg-white/5 */
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Spacing so the bar breathes without changing structure */
header .container, .header .container, nav .container, .navbar .container, .topbar .container,
header > div, nav > div, .navbar > div, .topbar > div {
  padding: 12px 20px;
}

/* Typography + links for readability */
header, .header, nav, .nav, .navbar, .topbar { color: #f8fafc; }
header a, .header a, nav a, .nav a, .navbar a, .topbar a { color: #f8fafc; text-decoration: none; }
header a:hover, .header a:hover, nav a:hover, .nav a:hover, .navbar a:hover, .topbar a:hover { color: #ffffff; opacity: 0.95; }

/* Make sure interactive elements have a subtle focus ring */
header a:focus-visible, nav a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(167,123,246,.45);
  border-radius: 10px;
}

/* Footer glassmorphism: same blur/tint as navbar */
footer, .footer, .bottombar {
  position: relative;
  z-index: 10; /* above wallpaper */
  background: rgba(255, 255, 255, 0.04) !important; /* override neutralizer */
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Footer spacing aligned with nav */
footer .container, .footer .container, footer > div, .footer > div { padding: 12px 20px; }

@media (min-width: 1024px) {
  /* Desktop navbar: brand left, menu right */
  .nav > .container, header > .container, .header > .container, .navbar > .container, .topbar > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
    width: 100%;
  }
  /* Fallback if there is no .container wrapper */
  .nav, header, .header, .navbar, .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  /* Brand block */
  .brand { display: flex !important; align-items: center !important; }
  .brand img { height: 1.25em; width: auto; margin-right: 8px; vertical-align: middle; }
  /* Menu block */
  nav.menu, .nav .menu, .navbar .menu, .topbar .menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    margin-left: auto !important;
  }
}


@media (min-width: 1024px) {
  /* Tighter edge padding for navbar containers on desktop */
  header .container, .header .container, nav .container, .nav .container, .navbar .container, .topbar .container,
  header > div, nav > div, .navbar > div, .topbar > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


@media (min-width: 1024px) {
  /* Even tighter edge padding for navbar containers on desktop */
  header .container, .header .container, nav .container, .nav .container, .navbar .container, .topbar .container,
  header > div, nav > div, .navbar > div, .topbar > div {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* Universal navbar layout: brand left, menu right */
header .container, .header .container, nav .container, .nav .container, .navbar .container, .topbar .container,
header > div, nav > div, .navbar > div, .topbar > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  width: 100%;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.brand { display: flex !important; align-items: center !important; }
.brand img { height: 1.2em; width: auto; margin-right: 8px; vertical-align: middle; }
.brand .variable-proximity { white-space: nowrap !important; }

nav.menu, .nav .menu, .navbar .menu, .topbar .menu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  margin-left: auto !important;
  min-width: 0 !important;
}

nav.menu a { white-space: nowrap !important; }

/* Mobile hamburger styles */
.nav-hamburger { display: none; background: transparent; border: 0; color: #f8fafc; padding: 8px; margin-left: auto; cursor: pointer; }
.nav-hamburger .nav-burger-bars,
.nav-hamburger .nav-burger-bars::before,
.nav-hamburger .nav-burger-bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: #f8fafc;
  border-radius: 2px;
  position: relative;
}
.nav-hamburger .nav-burger-bars::before { position: absolute; top: -6px; left: 0; }
.nav-hamburger .nav-burger-bars::after { position: absolute; top: 6px; left: 0; }

@media (max-width: 1024px) {
  /* Hide inline menu, show hamburger */
  nav.menu, .nav .menu, .navbar .menu, .topbar .menu { display: none !important; }
  .nav-hamburger { display: inline-flex !important; }

  /* Ensure positioning for dropdown */
  .nav, header, .navbar, .topbar { position: sticky; top: 0; }

  /* Dropdown panel when open */
  .nav.is-open nav.menu, header.is-open .menu, .navbar.is-open .menu, .topbar.is-open .menu {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    right: 10px;
    top: 100%;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px;
    gap: 10px;
    min-width: 220px;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
  .nav.is-open nav.menu a, header.is-open .menu a, .navbar.is-open .menu a, .topbar.is-open .menu a { white-space: nowrap; }
}