/* ========== menu.css (unified @900px) ========== */
:root{
  --bp-desktop: 900px;
  --topbar-h-desktop: 70px;
  --topbar-h-mobile: 54px;

  --hovedmenu:#fff; --submenu1-bg:#d6efd6; --submenu2-bg:#c6dfc6;
  --text:#222; --brand-green:#189d46;
  --shadow:0 2px 8px rgba(0,0,0,.12);
}

#mainMenu ul{ list-style:none; margin:0; padding:0; }

.topbar-outer{ z-index:1300; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1100px; margin:0 auto; height:100%;
}

/* burger */
.menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; background:none; border:0; cursor:pointer; z-index:1400;
  margin-top:0; align-self:flex-start; line-height:1;
}
.menu-toggle::before{
  content:""; width:28px; height:3px; background:#222; display:block; border-radius:2px;
  box-shadow:0 8px 0 #222, 0 16px 0 #222;
}

/* overlay følger topbar-højde */
#menuOverlay{ display:none; position:fixed; left:0; width:100vw; z-index:1000; background:rgba(0,0,0,.16); }
@media (max-width: 899px){ #menuOverlay{ top:var(--topbar-h-mobile);  height:calc(100vh - var(--topbar-h-mobile)); } }
@media (min-width: 900px){ #menuOverlay{ top:var(--topbar-h-desktop); height:calc(100vh - var(--topbar-h-desktop)); } }
body.menu-open #menuOverlay{ display:block; }

/* menu items */
.has-submenu{ position:relative; }
.menu-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; min-height:48px; background:#fff; pointer-events:none;
}
.menu-item > a{
  flex:1; pointer-events:auto; text-decoration:none; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600;
}

/* pil */
.submenu-toggle{
  position:relative; background:none; border:0; cursor:pointer;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; pointer-events:auto;
}
.submenu-toggle::after{
  content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px;
  background-repeat:no-repeat; background-size:16px; opacity:.85; transform:rotate(0deg);
  background-image:url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 5L13 10L7 15" stroke="%23888" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  transition: transform .2s, opacity .2s;
}
li.open > .menu-item > .submenu-toggle::after{
  transform: rotate(90deg); opacity:1;
  background-image:url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 5L13 10L7 15" stroke="%23189d46" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

#mainMenu a::before, #mainMenu a::after{ content:none !important; }

/* mobil/tablet */
@media (max-width: 899px){
  #mainMenu{
    position:fixed; left:-260px; top:var(--topbar-h-mobile); width:250px;
    background:#fff; transition:left .3s; z-index:1400; overflow-y:auto;
    border-top-right-radius:18px; border-bottom-right-radius:18px; padding:10px 0; box-sizing:border-box;
    height:calc(100vh - var(--topbar-h-mobile));
  }
  body.menu-open #mainMenu{ left:0; }

  #mainMenu ul ul{ display:none; background:var(--submenu1-bg); }
  #mainMenu li.open > ul{ display:block; }
  #mainMenu ul ul > li > .menu-item{ padding-left:38px; background:none; }
  #mainMenu ul ul ul > li > .menu-item{ padding-left:54px; background:var(--submenu2-bg); }

  #mainMenu > ul > li.open > .menu-item{ background:#fff !important; }
  #mainMenu ul ul > li.open > .menu-item{ background:var(--submenu1-bg) !important; }
  #mainMenu ul ul ul > li.open > .menu-item{ background:var(--submenu2-bg) !important; }

  #mainMenu > ul > li.active > .menu-item{ background: color-mix(in srgb, #fff 88%, #189d46 12%) !important; }
}

/* desktop */
@media (min-width: 900px){
  .menu-toggle,#menuOverlay{ display:none; }
  #mainMenu{ margin:8px 0 0 auto; }
  #mainMenu > ul{ display:flex; gap:6px; align-items:center; }
  #mainMenu > ul > li, #mainMenu ul ul li.has-submenu{ position:relative; }

  #mainMenu ul ul, #mainMenu ul ul ul{ display:none !important; }

  #mainMenu > ul > li > .menu-item{
    position:relative !important; padding:0 !important; width:auto !important; min-height:44px !important;
    justify-content:flex-start !important; gap:.5rem !important;
  }
  #mainMenu > ul > li > .menu-item > a{
    font-size:15px !important; padding:0 14px !important; color:var(--text) !important; transition:color .16s;
  }
  #mainMenu > ul > li.has-submenu > .menu-item > a{ padding-right:32px !important; }
  #mainMenu > ul > li > .menu-item > a:hover{ color:var(--brand-green) !important; }

  #mainMenu .menu-item > .submenu-toggle{
    position:absolute !important; right:4px !important; top:50% !important; transform:translateY(-50%) !important;
    width:24px !important; height:24px !important; pointer-events:none !important; cursor:default !important;
  }
  #mainMenu .menu-item > .submenu-toggle::after{ width:14px !important; height:14px !important; background-size:14px !important; }

  #mainMenu > ul > li:hover > ul{
    display:block !important; position:absolute !important; top:100% !important; left:0 !important;
    background:var(--submenu1-bg) !important; box-shadow:var(--shadow) !important; min-width:200px !important;
  }
  #mainMenu ul ul li.has-submenu:hover > ul{
    display:block !important; position:absolute !important; top:0 !important; left:100% !important;
    background:var(--submenu2-bg) !important; box-shadow:var(--shadow) !important; min-width:200px !important;
  }

  #mainMenu ul ul li > .menu-item{ position:relative !important; justify-content:flex-start !important; }
  #mainMenu ul ul li > .menu-item > a{
    font-size:14px !important; display:block !important; width:100% !important; flex:1 1 auto !important;
    padding:10px 18px !important; padding-right:34px !important; box-sizing:border-box !important; color:var(--text) !important;
  }
  #mainMenu ul ul li > .menu-item > .submenu-toggle{
    position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important;
    width:22px !important; height:22px !important;
  }

  /* aktiv underline topniveau */
  #mainMenu > ul > li.active > .menu-item > a{
    color:var(--brand-green) !important;
    text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--brand-green);
  }
}
#mainMenu ul ul li.active > .menu-item > a{ text-decoration:none !important; color:var(--brand-green) !important; }