/* =========================================================
   MENU 2026 — "Sticky / Shrink header"
   Genbruger original 2026-markup. Selvstændig (ingen jQuery).
   Adfærd: headeren (#top) krymper + får baggrund/skygge ved scroll.
   Desktop = ren CSS-hover. Mobil styres af menu2026-sticky.js.
   ========================================================= */

#mainmenu1_ul{
  --nav-ink:        #1f2417;
  --nav-ink-soft:   #4d5340;
  --nav-accent:     var(--primaerfarve, #90ab44);
  --nav-accent-dark:var(--color-primary-900, #68751b);
  --nav-tint:       rgba(144,171,68,.14);
  --nav-card:       #ffffff;
  --nav-border:     rgba(20,30,5,.08);
  --nav-radius:     14px;
  --nav-radius-row: 10px;
  --nav-card-shadow:0 16px 38px rgba(40,50,15,.16);
  --dur:            .22s;

  font-family: 'Inter', 'Roboto', system-ui, sans-serif;
  list-style: none;
}

/* ---------- Sticky / shrink header ----------
   Headerhøjden styres af --header-height. Stor som udgangspunkt,
   mindre når .is-shrunk sættes på #top (af JS ved scroll).
   Hvis dit site allerede har en --header-height-variabel, hooker
   dette direkte ind i den. */
#top{
  --header-height: 88px;
  transition: box-shadow .28s ease, background-color .28s ease, padding .28s ease;
}
#top.is-shrunk{
  --header-height: 58px;
  background-color: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(30,40,10,.12);
}
/* logoet krymper med — TILPAS selektoren til dit logo om nødvendigt */
#top .logo img, #top #logo img, #top a.logo img, #top img.logo{
  height: calc(var(--header-height) - 30px);
  width: auto;
  transition: height .28s ease;
}

/* container */
nav     { max-width: 1200px; margin-left: auto; }
#menu   { display: flex; align-items: center; padding: 0; }
#menu a { text-decoration: none; }
#mainmenu1_ul li{ position: relative; list-style: none; }
#mainmenu1_ul .link > i:not(.fa-chevron-down){ color: var(--nav-accent); flex: 0 0 auto; }
#mainmenu1_ul i[class=""]{ display: none; }
.submenu{ display: none; margin: 0; padding: 0; list-style: none; }

/* burger */
#open_close_con{ display: none; }
#menu_open{ display: block; }
#menu_close{ display: none; }
#menu_open svg, #menu_close svg{ display: none; }


/* =========================================================================
   DESKTOP (≥ 1024px) — vandret, underline-signatur, CSS-hover
   ========================================================================= */
@media screen and (min-width: 1024px){

  #top nav { margin-left: auto; }
  #menu    { display: flex; align-items: center; }
  #mainmenu1_ul{ display: flex; gap: 2px; margin: 0; padding: 0; }

  #mainmenu1_ul > li > .link{
    position: relative; display: flex; align-items: center; gap: 8px;
    padding: 0 18px;
    min-height: var(--header-height, 72px);
    cursor: pointer;
    transition: min-height .28s ease;
  }
  #mainmenu1_ul > li > .link > a{
    color: var(--nav-ink-soft);
    font-weight: 600; font-size: 15px; letter-spacing: .1px;
    text-decoration: none; white-space: nowrap;
    transition: color var(--dur) ease;
  }

  /* signatur: glidende understregning */
  #mainmenu1_ul > li > .link::after{
    content: ""; position: absolute; left: 18px; right: 18px; bottom: 16px; height: 2px;
    background: var(--nav-accent); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur) cubic-bezier(.4,0,.2,1);
  }
  #mainmenu1_ul > li:hover > .link::after,
  #mainmenu1_ul > li:focus-within > .link::after,
  #mainmenu1_ul > li.menuChosen > .link::after{ transform: scaleX(1); }

  #mainmenu1_ul > li:hover > .link > a,
  #mainmenu1_ul > li:focus-within > .link > a,
  #mainmenu1_ul > li.menuChosen > .link > a{ color: var(--nav-ink); }

  #mainmenu1_ul .link > i.fa-chevron-down{ font-size: 11px; color: var(--nav-accent); transition: transform .2s ease; }
  #mainmenu1_ul > li:hover > .link > i.fa-chevron-down,
  #mainmenu1_ul > li:focus-within > .link > i.fa-chevron-down{ transform: rotate(180deg); }

  /* dropdown-kort på CSS-hover */
  .submenu{
    display: block; position: absolute; top: 100%; left: 0;
    min-width: 230px; padding: 8px;
    background: var(--nav-card); border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius); box-shadow: var(--nav-card-shadow); z-index: 1000;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(8px) scale(.98); transform-origin: top center;
    transition: opacity var(--dur) ease,
                transform var(--dur) cubic-bezier(.34,1.2,.5,1),
                visibility var(--dur);
  }
  #mainmenu1_ul > li:hover > .submenu,
  #mainmenu1_ul > li:focus-within > .submenu,
  .submenu li:hover > .submenu,
  .submenu li:focus-within > .submenu{ opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

  .submenu li{ border: 0; width: 100%; }
  .submenu li > a,
  .submenu li > .link{
    display: flex; align-items: center; gap: 10px; width: auto; padding: 11px 13px;
    border-radius: var(--nav-radius-row);
    color: var(--nav-ink-soft); font-weight: 500; font-size: 14px; text-decoration: none;
    transition: background var(--dur) ease, color var(--dur) ease;
  }
  .submenu li > .link{ cursor: pointer; }
  .submenu li > .link > a{ flex: 1 1 auto; width: auto; padding: 0; color: inherit; text-decoration: none; }
  .submenu li > .link > i.fa-chevron-down{ margin-left: auto; }
  .submenu li:hover > a,
  .submenu li:hover > .link,
  .submenu li > a:hover{ background: var(--nav-tint); color: var(--nav-ink); }
  .submenu .menuChosen > a,
  .submenu .menuChosen > .link,
  .submenu a.menuChosen{ background: var(--nav-tint); color: var(--nav-ink); font-weight: 700; }

  .submenu .submenu{ top: -8px; left: 100%; min-width: 230px; }
}


/* =========================================================================
   MOBIL (< 1024px) — foldemenu med scroll
   ========================================================================= */
@media screen and (max-width: 1023.98px){

  nav { width: auto; height: 60px; margin: 0; display: flex; align-items: center; gap: 1rem; }

  #open_close_con{
    display: flex; align-items: center; justify-content: center;
    order: 2; margin-left: auto; cursor: pointer; z-index: 9999;
  }

  #menu{ width: 100%; position: absolute; left: 0; right: 0; top: 100%; order: 1; z-index: 1000; }

  #mainmenu1_ul{
    display: none; width: 100%; margin: 0; padding: 10px;
    background: #fff; border-top: 1px solid var(--nav-border); box-shadow: var(--nav-card-shadow);
    max-height: calc(77vh - var(--header-height, 72px));
    max-height: calc(77dvh - var(--header-height, 72px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  #mainmenu1_ul.is-open{ display: block; }
  #mainmenu1_ul li{ float: none; }

  .accordion .link,
  .submenu li > a{
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px;
    color: var(--nav-ink); font-weight: 600; font-size: 15px; text-decoration: none;
    transition: background var(--dur) ease;
  }
  .accordion .link{ cursor: pointer; position: relative; }
  .accordion .link > a{ flex: 1 1 auto; color: inherit; text-decoration: none; }
  .accordion .link > i:not(.fa-chevron-down){ color: var(--nav-accent); }

  li.menuChosen > .link, li.menuChosen > a{ background: var(--nav-tint); }
  li.menuChosen > .link::before{
    content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px;
    width: 3px; border-radius: 3px; background: var(--nav-accent);
  }

  .accordion .link:active, .submenu li > a:active{ background: var(--nav-tint); }

  .accordion .link > i.fa-chevron-down{ margin-left: auto; font-size: 13px; color: var(--nav-accent); transition: transform .2s ease; }
  li.open > .link > i.fa-chevron-down{ transform: rotate(180deg); }

  .submenu{ display: none; }
  li.open > .submenu{
    display: block; position: static; width: auto;
    margin: 2px 0 6px 14px; padding-left: 8px;
    border-left: 2px solid var(--nav-tint);
    background: transparent; box-shadow: none; border-radius: 0;
  }
  .submenu li > a{ font-weight: 500; font-size: 14px; color: var(--nav-ink-soft); }
}


/* =========================================================================
   Burger (tegnet i CSS)
   ========================================================================= */
#menu_open, #menu_close{
  position: relative; width: 44px; height: 44px;
  border-radius: 12px; background: transparent; cursor: pointer;
  transition: background var(--dur) ease;
}
#menu_open:hover, #menu_close:hover{ background: var(--nav-tint); }
#menu_open{
  background-image: linear-gradient(var(--nav-ink), var(--nav-ink));
  background-size: 22px 2px; background-position: center; background-repeat: no-repeat;
}
#menu_open::before, #menu_open::after{
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px; border-radius: 2px; background: var(--nav-ink);
}
#menu_open::before{ top: 14px; }
#menu_open::after { bottom: 14px; }
#menu_close::before, #menu_close::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 22px; height: 2px; border-radius: 2px; background: var(--nav-ink);
}
#menu_close::before{ transform: translate(-50%,-50%) rotate(45deg); }
#menu_close::after { transform: translate(-50%,-50%) rotate(-45deg); }


/* =========================================================================
   Tilgængelighed + reduced motion
   ========================================================================= */
#mainmenu1_ul a:focus-visible,
#mainmenu1_ul .link:focus-visible{
  outline: 2px solid var(--nav-accent-dark); outline-offset: 2px; border-radius: var(--nav-radius-row);
}
#menu_open:focus-visible, #menu_close:focus-visible{
  outline: 2px solid var(--nav-accent-dark); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  #top, #top *,
  #mainmenu1_ul *, #mainmenu1_ul *::before, #mainmenu1_ul *::after{ transition: none !important; }
}