/* Variabler – justér kun dem, hvis farverne skal tweakes */
:root {
  /* Gradient-baggrund (lysere end før) */
  --nav-bg-top:  #8c8c8c;   /* ~55 % lyshed */
  --nav-bg-mid:  #6e6e6e;   /* ~43 % */
  --nav-bg-btm:  #5a5a5a;   /* ~35 % */

  /* “Glossy” refleks – en lille smule stærkere, fordi baggrunden er lysere */
  --nav-gloss:   rgba(255,255,255,.45);

  /* Kant og separatorer – også lysnet en tand */
  --nav-border:  #444;      /* tidligere #1a1a1a */
  --nav-sep:     #9c9c9c;   /* tidligere #7a7a7a */

  /* Tekstfarver */
  --nav-txt:        #fcfcfc;   /* næsten hvid, men ikke helt skarp #fff */
  --nav-txt-active: #ffffff;
}


/* Mørk-tilstand overskriver blot variablerne */
body.dark-mode {
  --nav-bg-top:  #404040;
  --nav-bg-mid:  #2d2d2d;
  --nav-bg-btm:  #1f1f1f;
  --nav-gloss:   rgba(255,255,255,.22);
  --nav-border:  #000;
  --nav-sep:     #555;
  --nav-txt:     #cdcdcd;
}

/* ---------- Selve baren ---------- */
.glossy-nav {
  padding: 0 18px;
  border-radius: 12px;
  background: linear-gradient(var(--nav-bg-top), var(--nav-bg-mid) 50%, var(--nav-bg-btm));
  border: 1px solid var(--nav-border);
  box-shadow:
      0 0 0 1px rgba(255,255,255,.12) inset,
      0 2px 8px rgba(0,0,0,.35);
  position: relative;
}

/* Glansstribe */
.glossy-nav::before {
  content:'';
  position:absolute;
  left:2px; right:2px; top:1px;
  height:45%;
  border-radius:10px 10px 0 0;
  background:linear-gradient(var(--nav-gloss), transparent);
  pointer-events:none;
}

/* ---------- Primære menu ---------- */
.glossy-nav ul.menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
}

.glossy-nav ul.menu > li{
  position:relative;
}

/* lodrette separatorer */
.glossy-nav ul.menu > li + li::before{
  content:'';
  position:absolute;
  left:0; top:22%; bottom:22%;
  width:1px;
  background:var(--nav-sep);
}

.glossy-nav a{
  display:block;
  padding:10px 26px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:Roboto;
  letter-spacing:.4px;
  color:var(--nav-txt);
  transition:background .25s,color .25s;
}

.glossy-nav ul.menu > li:hover > a,
.glossy-nav ul.menu > li.active > a{
  background:rgba(255,255,255,.08);
  color:var(--nav-txt-active);
}

/* ---------- Dropdown ---------- */
.glossy-nav .dropdown-menu{
  position:absolute;
  left:0; top:100%;
  min-width:180px;
  display:none;
  flex-direction:column;
  background:linear-gradient(var(--nav-bg-mid), var(--nav-bg-btm));
  padding:6px 0;
  border-radius:0 0 8px 8px;
  box-shadow:0 6px 12px rgba(0,0,0,.3);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s, transform .25s;
  z-index:200;
}

.glossy-nav .dropdown:hover > .dropdown-menu{
  display:flex;
  opacity:1;
  transform:translateY(0);
}

.glossy-nav .dropdown-menu li + li{margin-top:4px;}

.glossy-nav .dropdown-menu a{
  padding:10px 18px;
  font-weight:500;
}

.glossy-nav .dropdown-menu a:hover{
  background:rgba(255,255,255,.10);
  color:var(--nav-txt-active);
}

/* ---------- Tema-skifter til højre ---------- */
.glossy-nav .theme-switch{
  margin-left:auto;          /* skubber den helt til højre */
}

/* === Center selve baren i headeren === */
.header-top,            /* logo-linjen */
.nav-container {        /* wrapper omkring nav */
  display: flex;
  justify-content: center;   /* centrer indhold vandret */
}

.glossy-nav {
  width: fit-content;        /* baren bliver kun så bred som dens indhold */
  max-width: 100%;           /* men må gerne wrappe på små skærme */
}

/* ----- Tema-toggle skal ligne et almindeligt menupunkt ----- */
.glossy-nav .theme-switch a {
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: underline;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  font-weight: 600;
  color: var(--nav-txt);
  background: none;
  border: none;
  box-shadow: none;
  display: block;
  border-radius: 0;
  transition: background .25s, color .25s;
}

.glossy-nav .theme-switch a:hover,
.glossy-nav .theme-switch a:focus {
  background: rgba(255,255,255,0.08);
  color: var(--nav-txt-active);
}

.glossy-nav ul.menu > li {
  display: flex;
  align-items: center;
}