/* Fælles header på hele synbar.dk. Indlæses efter sidernes lokale styles. */
#nav[data-sb-header] {
  position:sticky;
  z-index:1000;
  top:0;
  width:100%;
  margin:0;
  overflow:visible;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  font-family:'Plus Jakarta Sans','PJS Fallback',Arial,sans-serif;
  transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,backdrop-filter .22s ease;
}
#nav[data-sb-header].scrolled {
  border-bottom-color:rgba(15,23,42,.09);
  background:rgba(250,250,248,.9);
  box-shadow:0 6px 22px rgba(15,23,42,.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
#nav[data-sb-header] .nav-inner {
  display:grid;
  grid-template-columns:minmax(150px,1fr) auto minmax(250px,1fr);
  width:100%;
  max-width:1280px;
  height:76px;
  align-items:center;
  gap:28px;
  margin:0 auto;
  padding:0 32px;
}
/* Hold sticky-headerens layouthøjde stabil. En højdeændring ved samme
   scrolltærskel som .scrolled skaber ellers et scroll-anchoring-loop. */
#nav[data-sb-header].scrolled .nav-inner { height:76px; }
#nav[data-sb-header] .logo { display:flex; width:fit-content; align-items:center; text-decoration:none; }
#nav[data-sb-header] .logo-img-full { display:block; width:auto; height:42px; mix-blend-mode:normal; filter:none; }
#nav[data-sb-header] .logo-img-icon { display:none; width:auto; height:42px; mix-blend-mode:normal; filter:none; }

#nav[data-sb-header] #nav-links-d {
  display:flex !important;
  height:100%;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
}
#nav[data-sb-header] #nav-links-d > li { display:flex; height:100%; align-items:center; }
#nav[data-sb-header] #nav-links-d a { font-family:inherit; text-decoration:none; }
#nav[data-sb-header] .mega-nav-item { position:static; }
#nav[data-sb-header] .mega-nav-toggle,
#nav[data-sb-header] .mega-nav-link {
  display:inline-flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:#475569;
  font:inherit;
  font-size:14px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}
#nav[data-sb-header] .mega-nav-toggle:hover,
#nav[data-sb-header] .mega-nav-link:hover,
#nav[data-sb-header] .mega-nav-item.is-open > .mega-nav-toggle {
  border-color:rgba(15,23,42,.12);
  background:#F8FAFC;
  color:#0F172A;
}
#nav[data-sb-header] .mega-nav-toggle:focus-visible,
#nav[data-sb-header] .mega-nav-link:focus-visible,
#nav[data-sb-header] .product-nav-button:focus-visible,
#nav[data-sb-header] #hamburger:focus-visible {
  border-radius:7px;
  outline:3px solid rgba(27,42,74,.28);
  outline-offset:2px;
}
#nav[data-sb-header] .mega-nav-toggle:focus-visible,
#nav[data-sb-header] .mega-nav-link:focus-visible { border-radius:999px; }
#nav[data-sb-header] .mega-nav-toggle svg,
#nav[data-sb-header] .mobile-nav-toggle svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .2s ease;
}
#nav[data-sb-header] .mega-nav-item.is-open .mega-nav-toggle svg,
#nav[data-sb-header] .mobile-nav-toggle[aria-expanded='true'] svg { transform:rotate(180deg); }

#nav[data-sb-header] .mega-nav-panel {
  position:absolute;
  z-index:20;
  top:100%;
  left:50%;
  width:min(900px,calc(100vw - 48px));
  padding-top:10px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-8px);
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
}
#nav[data-sb-header] .mega-nav-item.is-open .mega-nav-panel {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
/* Alle paneler deler bredde og placering fra .mega-nav-panel. */
#nav[data-sb-header] .mega-nav-surface {
  overflow:hidden;
  border:1px solid #E8E8E4;
  border-radius:18px;
  background-color:#FFFFFF;
  background-image:radial-gradient(circle,rgba(27,42,74,.05) .75px,transparent .85px);
  background-size:20px 20px;
  box-shadow:0 24px 64px rgba(15,23,42,.14),0 4px 14px rgba(15,23,42,.06);
}
#nav[data-sb-header] .mega-nav-content { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; padding:28px; }
#nav[data-sb-header] .mega-nav-content-split { grid-template-columns:1.35fr 1fr; gap:0; }
#nav[data-sb-header] .mega-nav-group-divided { padding-left:28px; border-left:1px solid #EDEDEA; }
#nav[data-sb-header] .mega-nav-entry.is-soon { cursor:default; }
#nav[data-sb-header] .mega-nav-heading { margin:0 0 12px; color:#64748B; font-size:11px; font-weight:600; letter-spacing:.08em; line-height:1.2; text-transform:uppercase; }
#nav[data-sb-header] .mega-nav-links { display:grid; gap:4px; }
#nav[data-sb-header] .mega-nav-entry { display:flex; align-items:flex-start; gap:11px; padding:9px 10px; border-radius:10px; color:#111111; line-height:1.35; transition:background-color .16s ease; }
#nav[data-sb-header] .mega-nav-entry-text { display:block; min-width:0; }
#nav[data-sb-header] .mega-nav-entry:hover,
#nav[data-sb-header] .mega-nav-entry:focus-visible { background:#F6F6F3; color:#111111; }
#nav[data-sb-header] .mega-nav-entry:focus-visible { outline:2px solid rgba(27,42,74,.3); outline-offset:1px; }
#nav[data-sb-header] .mega-nav-entry-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#nav[data-sb-header] .mega-nav-entry-title { display:block; color:#111111; font-size:14px; font-weight:600; letter-spacing:-.01em; }
#nav[data-sb-header] .mega-nav-entry-copy { display:block; margin-top:4px; color:#6B7280; font-size:12.5px; font-weight:400; line-height:1.45; }
#nav[data-sb-header] .mega-nav-badge { display:inline-flex; min-height:20px; align-items:center; padding:3px 7px; border-radius:999px; background:#1B2A4A; color:#FFFFFF; font-size:10px; font-weight:600; letter-spacing:.04em; line-height:1; text-transform:uppercase; }
#nav[data-sb-header] .mega-nav-featured { border:1px solid #E8E8E4; border-radius:13px; background:#FAFAF8; }
#nav[data-sb-header] .mega-nav-featured .mega-nav-entry { padding:14px; }
#nav[data-sb-header] .mega-nav-visual { min-height:112px; margin:0 14px 14px; border:1px solid #E8E8E4; border-radius:10px; background-color:#F1F2EF; background-image:radial-gradient(circle,rgba(27,42,74,.09) .7px,transparent .8px); background-size:15px 15px; }
#nav[data-sb-header] .mega-nav-footer { display:flex; min-height:49px; align-items:center; justify-content:space-between; gap:20px; padding:0 28px; border-top:1px solid #E8E8E4; background:#FAFAF8; color:#6B7280; font-size:12px; }
#nav[data-sb-header] .mega-nav-footer-link { color:#1B2A4A; font-size:12px; font-weight:600; text-decoration:none; }
#nav[data-sb-header] .mega-nav-footer-link:hover { text-decoration:underline; text-underline-offset:3px; }

#nav[data-sb-header] #nav-actions-d { display:flex !important; align-items:center; justify-content:flex-end; gap:10px; }
#nav[data-sb-header] .product-nav-button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 18px; border:1px solid rgba(15,23,42,.12); border-radius:10px; background:rgba(255,255,255,.72); color:#0F172A; font-size:14px; font-weight:600; text-decoration:none; transition:background-color .18s ease,border-color .18s ease,color .18s ease; }
#nav[data-sb-header] .product-nav-button:hover { border-color:rgba(15,23,42,.2); background:#FFFFFF; }
#nav[data-sb-header] .product-nav-button.is-primary { border-color:#1B2A4A; background:#1B2A4A; color:#FFFFFF; }
#nav[data-sb-header] .product-nav-button.is-primary:hover { border-color:#111C32; background:#111C32; }
#nav[data-sb-header] #hamburger { display:none !important; width:44px; height:44px; align-items:center; justify-content:center; justify-self:end; padding:0; border:1px solid rgba(15,23,42,.1); border-radius:10px; background:rgba(255,255,255,.76); color:#0F172A; cursor:pointer; }
#nav[data-sb-header] #hamburger svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

#nav[data-sb-header] #mobile-menu { display:none; overflow:auto; border-top:1px solid rgba(15,23,42,.07); background:rgba(250,250,248,.98); }
#nav[data-sb-header] #mobile-menu.open { display:block; }
#nav[data-sb-header] .mobile-links { display:flex; max-width:720px; flex-direction:column; gap:4px; margin:0 auto; padding:18px 24px 26px; }
#nav[data-sb-header] .mobile-nav-group { border-bottom:1px solid rgba(15,23,42,.08); }
#nav[data-sb-header] .mobile-nav-toggle { display:flex; width:100%; min-height:48px; align-items:center; justify-content:space-between; gap:16px; padding:0; border:0; background:transparent; color:#0F172A; font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
#nav[data-sb-header] .mobile-nav-toggle:focus-visible,
#nav[data-sb-header] .mobile-nav-single:focus-visible { border-radius:7px; outline:3px solid rgba(27,42,74,.25); outline-offset:1px; }
#nav[data-sb-header] .mobile-nav-submenu { display:grid; gap:3px; padding:0 0 14px 12px; }
#nav[data-sb-header] .mobile-nav-submenu[hidden] { display:none; }
#nav[data-sb-header] .mobile-nav-entry { display:block !important; min-height:0 !important; padding:10px 12px !important; border-left:1px solid #E8E8E4; color:#0F172A !important; text-decoration:none; }
#nav[data-sb-header] .mobile-nav-entry-title { display:block; color:#0F172A; font-size:13.5px; font-weight:600; }
#nav[data-sb-header] .mobile-nav-entry-copy { display:block; margin-top:3px; color:#6B7280; font-size:12px; font-weight:400; line-height:1.4; }
#nav[data-sb-header] .mobile-nav-single { display:flex; min-height:49px; align-items:center; color:#0F172A; font-size:15px; font-weight:600; text-decoration:none; }
#nav[data-sb-header] .mobile-nav-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }

[data-theme='dark'] #nav[data-sb-header] { border-bottom-color:rgba(255,255,255,.08); background:rgba(15,23,42,.96); }
[data-theme='dark'] #nav[data-sb-header].scrolled { background:rgba(15,23,42,.94); box-shadow:0 6px 24px rgba(0,0,0,.24); }
[data-theme='dark'] #nav[data-sb-header] .logo-img-full,
[data-theme='dark'] #nav[data-sb-header] .logo-img-icon { filter: brightness(0) invert(1); }
[data-theme='dark'] #nav[data-sb-header] .mega-nav-toggle,
[data-theme='dark'] #nav[data-sb-header] .mega-nav-link { color:#CBD5E1; }
[data-theme='dark'] #nav[data-sb-header] .mega-nav-toggle:hover,
[data-theme='dark'] #nav[data-sb-header] .mega-nav-link:hover,
[data-theme='dark'] #nav[data-sb-header] .mega-nav-item.is-open > .mega-nav-toggle {
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.09);
  color:#FFFFFF;
}
[data-theme='dark'] #nav[data-sb-header] #hamburger { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#FFFFFF; }
[data-theme='dark'] #nav[data-sb-header] #mobile-menu { border-top-color:rgba(255,255,255,.08); background:#0F172A; }
[data-theme='dark'] #nav[data-sb-header] .mobile-nav-group { border-color:rgba(255,255,255,.09); }
[data-theme='dark'] #nav[data-sb-header] .mobile-nav-toggle,
[data-theme='dark'] #nav[data-sb-header] .mobile-nav-single { color:#F8FAFC; }
[data-theme='dark'] #nav[data-sb-header] .mobile-nav-entry { border-color:rgba(255,255,255,.12); color:#E2E8F0 !important; }
[data-theme='dark'] #nav[data-sb-header] .mobile-nav-entry-title { color:#E2E8F0; }
[data-theme='dark'] #nav[data-sb-header] .mobile-nav-entry-copy { color:#94A3B8; }

@media (max-width:1080px) {
  #nav[data-sb-header] .nav-inner { grid-template-columns:1fr auto; height:68px; padding:0 22px; }
  #nav[data-sb-header].scrolled .nav-inner { height:68px; }
  #nav[data-sb-header] #nav-links-d,
  #nav[data-sb-header] #nav-actions-d { display:none !important; }
  #nav[data-sb-header] #hamburger { display:flex !important; }
  #nav[data-sb-header] #mobile-menu { max-height:0; overflow:hidden; }
  #nav[data-sb-header] #mobile-menu.open { max-height:calc(100vh - 68px); overflow-y:auto; }
}
@media (max-width:640px) {
  #nav[data-sb-header] .nav-inner { padding:0 14px; }
  #nav[data-sb-header] .logo-img-full { display:none; }
  #nav[data-sb-header] .logo-img-icon { display:block; }
  #nav[data-sb-header] .mobile-links { padding:14px 18px 22px; }
  #nav[data-sb-header] .mobile-nav-actions { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  #nav[data-sb-header],
  #nav[data-sb-header] .nav-inner,
  #nav[data-sb-header] .mega-nav-panel,
  #nav[data-sb-header] .mega-nav-toggle svg,
  #nav[data-sb-header] .mobile-nav-toggle svg { transition:none !important; }
}

/* ── Funktioner-megamenu ───────────────────────────────────────────────
   Markuppen til alle dropdowns genereres af scripts/build-nav-menus.mjs ud fra
   data/nav-menus.js. */
/* Geometrien arves fra .mega-nav-toggle, så pillen har samme størrelse og
   afstand som de øvrige triggere og aldrig overlapper naboerne. */
#nav[data-sb-header] .funk-nav-item.is-open > .funk-nav-toggle { background:#F0F2F5; }

#nav[data-sb-header] .funk-panel {
  transform:translate(-50%,-4px);
  transition:opacity .15s ease-out,visibility .15s ease-out,transform .15s ease-out;
}
#nav[data-sb-header] .funk-nav-item.is-open .funk-panel { transform:translate(-50%,0); }
#nav[data-sb-header] .funk-surface {
  border:1px solid #E8E8E4;
  border-radius:16px;
  background-color:#FFFFFF;
  background-image:none;
  box-shadow:0 18px 48px rgba(15,23,42,.10),0 2px 8px rgba(15,23,42,.05);
}
#nav[data-sb-header] .funk-content {
  display:grid;
  /* Grupperne står på én række, så kortet bliver aflangt frem for højt. */
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  padding:28px 12px;
}
#nav[data-sb-header] .funk-col { padding:0 16px; }
#nav[data-sb-header] .funk-col + .funk-col { border-left:1px solid #EDEDEA; }
#nav[data-sb-header] .funk-heading {
  margin:0 0 12px;
  padding:0 10px;
  color:#64748B;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}
#nav[data-sb-header] .funk-links { display:grid; gap:2px; }
#nav[data-sb-header] .funk-entry {
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:9px 10px;
  border-radius:10px;
  color:#1B2A4A;
  text-decoration:none;
  transition:background-color .16s ease;
}
#nav[data-sb-header] .funk-entry:hover,
#nav[data-sb-header] a.funk-entry:focus-visible { background:#F7F8FA; text-decoration:none; }
#nav[data-sb-header] a.funk-entry:focus-visible { outline:2px solid rgba(27,42,74,.3); outline-offset:1px; }
#nav[data-sb-header] .funk-entry.is-soon { cursor:default; }
#nav[data-sb-header] .funk-entry-icon {
  display:flex;
  width:34px;
  height:34px;
  flex:0 0 34px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#1B2A4A;
}
#nav[data-sb-header] .funk-entry-icon svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:#FFFFFF;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#nav[data-sb-header] .funk-entry-text { display:block; min-width:0; }
#nav[data-sb-header] .funk-entry-head { display:block; }
#nav[data-sb-header] .funk-entry-title { color:#111111; font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
#nav[data-sb-header] .funk-entry-copy { display:block; margin-top:4px; color:#6B7280; font-size:12.5px; font-weight:400; line-height:1.45; }
#nav[data-sb-header] .funk-badge {
  display:inline-block;
  margin-left:8px;
  padding:2px 6px;
  vertical-align:2px;
  white-space:nowrap;
  border-radius:4px;
  background:#EDF1F7;
  color:#1B2A4A;
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.4;
  text-transform:uppercase;
}
#nav[data-sb-header] .funk-badge.is-new { background:#15803D; color:#FFFFFF; }
#nav[data-sb-header] .funk-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 28px;
  border-top:1px solid #EDEDEA;
  border-radius:0 0 16px 16px;
  background:#FAFAF8;
}
#nav[data-sb-header] .funk-footer-text { color:#5A6272; font-size:14px; }
#nav[data-sb-header] .funk-footer-link { color:#1B2A4A; font-size:14px; font-weight:600; text-decoration:none; }
#nav[data-sb-header] .funk-footer-link:hover { text-decoration:underline; text-underline-offset:3px; }

/* Mobil: accordion med kolonneoverskrifter som sektioner, uden ikonbokse. */
#nav[data-sb-header] .funk-mobile-submenu { gap:0; }
#nav[data-sb-header] .funk-mobile-section { padding:6px 0 10px; }
#nav[data-sb-header] .funk-mobile-section .funk-heading { margin:0 0 4px; padding:0 12px; font-size:11px; }
#nav[data-sb-header] .funk-mobile-entry {
  display:block;
  padding:9px 12px;
  border-left:1px solid #E8E8E4;
  color:#0F172A;
  text-decoration:none;
}
#nav[data-sb-header] .funk-mobile-entry.is-soon { cursor:default; }
#nav[data-sb-header] .funk-mobile-head { display:block; }
#nav[data-sb-header] .funk-mobile-title { color:#0F172A; font-size:13.5px; font-weight:600; }
#nav[data-sb-header] .funk-mobile-copy { display:block; margin-top:3px; color:#6B7280; font-size:12px; line-height:1.4; }
#nav[data-sb-header] .funk-mobile-footer-link {
  display:inline-flex;
  margin:6px 0 2px 12px;
  color:#1B2A4A;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}

[data-theme='dark'] #nav[data-sb-header] .funk-nav-item.is-open .funk-nav-toggle { background:rgba(255,255,255,.10); color:#FFFFFF; }
[data-theme='dark'] #nav[data-sb-header] .funk-surface { border-color:rgba(255,255,255,.12); background-color:#111C32; }
[data-theme='dark'] #nav[data-sb-header] .funk-col + .funk-col { border-left-color:rgba(255,255,255,.10); }
[data-theme='dark'] #nav[data-sb-header] .funk-heading { color:#94A3B8; }
[data-theme='dark'] #nav[data-sb-header] .funk-entry { color:#F8FAFC; }
[data-theme='dark'] #nav[data-sb-header] .funk-entry:hover { background:rgba(255,255,255,.06); }
[data-theme='dark'] #nav[data-sb-header] .funk-entry-icon { background:#2B3F66; }
[data-theme='dark'] #nav[data-sb-header] .funk-entry-title { color:#F8FAFC; }
[data-theme='dark'] #nav[data-sb-header] .funk-entry-copy { color:#94A3B8; }
[data-theme='dark'] #nav[data-sb-header] .funk-badge { background:rgba(255,255,255,.12); color:#E2E8F0; }
[data-theme='dark'] #nav[data-sb-header] .funk-badge.is-new { background:#15803D; color:#FFFFFF; }
[data-theme='dark'] #nav[data-sb-header] .funk-footer { border-top-color:rgba(255,255,255,.10); background:rgba(255,255,255,.03); }
[data-theme='dark'] #nav[data-sb-header] .funk-footer-text { color:#94A3B8; }
[data-theme='dark'] #nav[data-sb-header] .funk-footer-link,
[data-theme='dark'] #nav[data-sb-header] .funk-mobile-footer-link { color:#BFD0EC; }
[data-theme='dark'] #nav[data-sb-header] .funk-mobile-entry { border-left-color:rgba(255,255,255,.12); color:#E2E8F0; }
[data-theme='dark'] #nav[data-sb-header] .funk-mobile-title { color:#E2E8F0; }
[data-theme='dark'] #nav[data-sb-header] .funk-mobile-copy { color:#94A3B8; }

@media (max-width:1080px) {
  #nav[data-sb-header] .funk-panel { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  #nav[data-sb-header] .funk-panel,
  #nav[data-sb-header] .funk-nav-toggle,
  #nav[data-sb-header] .funk-entry { transition:none !important; }
  #nav[data-sb-header] .funk-panel,
  #nav[data-sb-header] .funk-nav-item.is-open .funk-panel { transform:translate(-50%,0); }
}
