/* =========================
   NAVBAR (MAIN)
   ========================= */

#mainNav {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  margin: 0;
  padding: 25px 0;
  background: transparent;
  box-shadow: none;
  z-index: 9999;
  transition: padding 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

#mainNav .navbar-nav {
  gap: 17px;
}

@media (min-width: 992px) {
  #mainNav .navbar-nav #stillfoto margin-left: 80px; {
  }
}

/* Flytt navbar-innholdet (inkl. toggler) slik at det følger hero */

#mainNav .container-fluid {
  --bs-gutter-x: 0 !important;
  padding-left: var(--nav-left) !important;
  padding-right: 0 !important;
}

@media (max-width: 767.98px) {
  #mainNav .navbar-toggler {
    margin-left: auto;
  }
}

/* Sørg for at collapse ligger til venstre */

#mainNav .navbar-collapse {
  justify-content: flex-start !important;
}

/* ms-auto er låst i HTML → vi nøytraliserer høyre-dyttingen */

#mainNav .navbar-nav.ms-auto {
  margin-left: 0 !important;
}

/* =========================
   GLASS STATE
   ========================= */

#mainNav.navbar-shrink {
  padding: 6px 0;
  background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(10,10,30,0.75));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

#mainNav.navbar-shrink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient( to right, rgba(255,255,255,0.05), rgba(255,255,255,0.4), rgba(255,255,255,0.05) );
  pointer-events: none;
}

/* =========================
   TOGGLER (WHITE)
   ========================= */

#mainNav .navbar-toggler {
  border: 0;
  box-shadow: none;
  padding: 8px 10px;
}

#mainNav .navbar-toggler:focus {
  box-shadow: none;
}

/* Du bruker <i class="fa fa-bars"></i> */

#mainNav .navbar-toggler i {
  color: rgba(255,255,255,0.95);
  font-size: 24px;
}

/* (Valgfritt) litt “glass-knapp” i hero */

#mainNav:not(.navbar-shrink) .navbar-toggler {
  background: rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
}

/* =========================
   NAV LINKS + UNDERLINE GLOW
   ========================= */

#mainNav .nav-link {
  white-space: nowrap;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.85);
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.75;
}

#mainNav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(255,215,0,0), rgba(255,215,0,0.95), rgba(255,215,0,0) );
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.65));
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#mainNav .nav-link:hover, #mainNav .nav-link.active, #mainNav .nav-link[aria-current="page"] {
  color: #ffd700 !important;
  text-shadow: 0 0 6px rgba(255,215,0,0.6);
  transform: translateY(-1px);
}

#mainNav .nav-link:hover::after, #mainNav .nav-link.active::after, #mainNav .nav-link[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Midtstill navbar-links når body har .nav-center */

/* =========================
   MOBILE
   ========================= */

@media (max-width: 991.98px) {
  #mainNav {
    padding: 12px 0;
  }
}

/* På mobil: ikke bruk hero-innrykk */

@media (max-width: 991.98px) {
  #mainNav .nav-link {
    font-size: 1rem;
    padding-bottom: 8px;
  }
}

/* Unngå “hover lift” på touch */

@media (max-width: 991.98px) {
  #mainNav .nav-link:hover {
    transform: none;
  }
}

@media (max-width: 767.98px) {
  #mainNav .nav-link::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  #mainNav:has(#navbarResponsive.show), #mainNav:has(#navbarResponsive.collapsing) {
    padding: 6px 0;
    background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(10,10,30,0.75));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  }
}

@media (max-width: 767.98px) {
  #mainNav:has(#navbarResponsive.show)::after, #mainNav:has(#navbarResponsive.collapsing)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0.05), rgba(255,255,255,0.4), rgba(255,255,255,0.05) );
    pointer-events: none;
  }
}

@media (min-width: 768px) {
  body.nav-center #mainNav .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 768px) {
  body.nav-center #mainNav .navbar-collapse {
    justify-content: center !important;
  }
}

@media (max-width: 767.98px) {
  #mainNav .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 768px) {
  #stillfoto {
    margin-left: 80px;
  }
}

@media (max-width: 767.98px) {
  #mainNav .navbar-nav {
    gap: 0px;
  }
}