/* ════════════════════════════════════════════════════════════════════
   3bids — delt public-navbar burger-menu (mobile)
   ════════════════════════════════════════════════════════════════════
   Loades fra alle public sider (forside, prisberegner, SEO fag-sider)
   så de har EN konsistent navbar med burger på mobil. CSS-reglerne her
   antager at siden bruger den fælles HTML-struktur:

     <nav class="nav">
       <div class="nav-inner">
         <a class="nav-brand">...</a>
         <div class="nav-links">...</div>     ← skjules <640px
         <div class="nav-cta">...</div>       ← skjules <640px
         <button class="nav-burger" id="navBurger">...</button>  ← vises <640px
       </div>
       <div class="nav-mobile" id="navMobile" hidden>...</div>
     </nav>

   Side-CSS-filer (home.css, prisberegner.css, seo-fag.css) SKAL IKKE
   indeholde regler for .nav-burger eller .nav-mobile — det hører hjemme her.
   ════════════════════════════════════════════════════════════════════ */

/* Burger-knap — skjult på desktop, vises kun <640px */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 24px; height: 2px;
  background: #1f2937;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
/* Animation til X når menuen er åben */
.nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobil-dropdown — skjult by default, vises kun naar .nav-open */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.5rem 1.5rem;
  background: white;
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}
.nav-mobile a {
  color: #1f2937;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.85rem 0.5rem;
  border-radius: 8px;
  border-bottom: 1px solid #f3f4f6;
}
.nav-mobile a:last-of-type { border-bottom: none; }
.nav-mobile-cta {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
}
.nav-mobile-cta .btn-nav { text-align: center; padding: 0.75rem 1.25rem; }
.nav.nav-open .nav-mobile { display: flex; }

/* Mobil-breakpoint — skjul desktop-links + CTA, vis burger */
@media (max-width: 640px) {
  .nav .nav-links,
  .nav .nav-cta { display: none !important; }
  .nav .nav-burger { display: flex; }
  .nav-inner { padding: 0.6rem 1rem !important; }
}