/* ===== Toppmenyen med nedtrekk (alle sidene) =====
   Gruppene er knapper i samme stil som de gamle menylenkene, og nedtrekket bruker sidens egne farger og skrift:
   gruppenavnet som i bunnteksten, så valgene med en kort forklaring. Lastes etter sidens egen stil. */

.navlinks{position:relative;display:flex;align-items:center;gap:2px;margin:0 auto;isolation:isolate}
.nav-grp{position:relative}
.nav-top{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 15px;border:0;border-radius:999px;background:none;cursor:pointer;color:inherit;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;font-size:14px;font-weight:600;white-space:nowrap;
  opacity:.74;transition:opacity .2s ease}
.nav-top[aria-current],.nav-grp.open .nav-top{opacity:1}
@media (hover:hover) and (pointer:fine){.nav-top:hover{opacity:1}}
.nav-top .chev{width:13px;height:13px;opacity:.6;transition:transform .25s cubic-bezier(.23,1,.32,1)}
.nav-grp.open .chev{transform:rotate(180deg)}

/* Pillen bak gruppen man er i */
.nav-ind{position:absolute;left:0;top:50%;height:38px;margin-top:-19px;width:var(--w,0);border-radius:999px;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--accent) 11%,transparent);opacity:0;transform:translateX(var(--x,0));
  transition:transform .42s cubic-bezier(.77,0,.175,1),width .42s cubic-bezier(.77,0,.175,1),opacity .25s ease}
.nav-ind.show{opacity:1}
.nav-ind.instant{transition:opacity .25s ease}
:root[data-theme="dark"] .nav-ind{background:color-mix(in srgb,var(--accent) 20%,transparent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nav-ind{background:color-mix(in srgb,var(--accent) 20%,transparent)}}

/* Nedtrekket */
.nav-dd{position:absolute;top:calc(100% + 12px);left:-8px;z-index:60;width:350px;padding:8px;border-radius:16px;background:var(--card);color:var(--fg);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent),0 28px 56px -24px rgba(6,30,66,.45),0 6px 16px -8px rgba(6,30,66,.18);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:20% 0;
  transition:opacity .16s ease,transform .2s cubic-bezier(.23,1,.32,1),visibility 0s .2s}
.nav-dd::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}  /* bro, så musen ikke mister menyen */
.nav-grp:last-child .nav-dd{left:auto;right:-8px;transform-origin:80% 0}
.nav-grp.open .nav-dd{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .24s cubic-bezier(.23,1,.32,1),visibility 0s}
.dd-head{margin:6px 12px 6px;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;color:var(--accent)}
.nav-dd a{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:10px;color:var(--fg);transition:background .15s ease}
.dd-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dd-t b{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.01em;line-height:1.25}
.dd-t small{font-size:13px;color:var(--muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-arr{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .2s cubic-bezier(.23,1,.32,1),color .15s}
.nav-dd a:hover,.nav-dd a:focus-visible{background:var(--bg-alt);outline:none}
.nav-dd a:hover .dd-arr,.nav-dd a:focus-visible .dd-arr{color:var(--accent);transform:translateX(3px)}
.nav-dd a:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
nav.top .nav-dd :focus-visible{outline:none}

@media (max-width:1180px){.nav-top{padding:0 10px 0 12px;font-size:13.5px}}

/* Mobilmenyen: gruppene som i bunnteksten */
.mm-grp{padding:16px 0 8px;border-bottom:1px solid var(--line)}
.mm-grp h4{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:2px}
.mobile-menu .mm-grp a{display:block;padding:8px 0;font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  font-size:clamp(20px,6vw,26px);line-height:1.15;transition:color .2s ease}
.mobile-menu .mm-grp a:active{color:var(--accent)}
.mm-grp.current h4{color:var(--fg)}

@media (prefers-reduced-motion:reduce){.nav-dd,.dd-arr,.chev,.nav-ind{transition:none}}
@media (max-width:900px){.navlinks{display:none}}
a.nav-top{padding:0 15px}
@media (max-width:1180px){a.nav-top{padding:0 12px}}