/* Menuen: sidepanelet (.menu-top) og footerens menu. Gælder på alle sider. */

/* 1 · Panelets bredde. Kun så bredt som menuen, ikke længere midt ind på
   siden. Krydset glider med ud i panelets øverste højre hjørne, med samme
   afstand til kanten som til toppen (33px), og tilbage når menuen lukkes.
   Knappen sidder ellers ved indholdskanten: 1200px centreret, 90 % under 1300px. */
@media screen and (min-width: 992px) {
  .menu-top {
    width: 440px;
  }
  .menu-top .content {
    padding-right: 40px;
  }
  .menu-top .content > div {
    padding-left: 72px;
  }
  body.menu-open header .menu-button {
    transform: translateX(calc((100vw - 1200px) / 2 - 33px));
  }
}
@media screen and (min-width: 992px) and (max-width: 1300px) {
  body.menu-open header .menu-button {
    transform: translateX(calc(5vw - 33px));
  }
}

/* 2 · Underpunkter (fx Generationsskifte under Investeringer). Samme skrift
   og venstrekant som de andre punkter; kun den tættere afstand op til
   forælderen viser, at det hører under. */
.menu-top .menu-menu-container .sub-menu {
  margin: 6px 0 0;
}
.menu-top .menu-menu-container .sub-menu a:before {
  height: 30px;
}
@media screen and (max-width: 767px) {
  .menu-top .menu-menu-container .sub-menu a:before {
    height: 16px;
  }
}

/* 3 · Panelets højde: skal kunne være på en almindelig skærm uden
   scrollbar. Adressen fik 45 % af en smal kolonne og knækkede i syv
   linjer; med fuld bredde er den fire. Luften om LOGIN skrumper kun på
   lave skærme, så designet er uændret på store skærme. */
@media screen and (min-width: 992px) {
  .menu-top .contact-block .address {
    flex: 0 0 100%;
  }
  .menu-top .contact-block .address:nth-child(1) {
    margin-right: 0;
  }
}
@media screen and (min-width: 992px) and (max-height: 860px) {
  .menu-top .login-block {
    margin: 40px 0;
  }
}
@media screen and (min-width: 992px) and (max-height: 740px) {
  .menu-top .content {
    padding-bottom: 30px;
  }
  .menu-top .login-block {
    margin: 20px 0;
  }
  .menu-top .menu-menu-container li:not(:last-child) {
    margin-bottom: 10px;
  }
  .menu-top .menu-menu-container ul a:before {
    height: 36px;
  }
  .menu-top .menu-menu-container .sub-menu a:before {
    height: 26px;
  }
}
/* Er skærmen endnu lavere, scroller panelet med en diskret scrollbar */
.menu-top .content > div {
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 186, 136, .4) transparent;
}

/* 4 · Hover. Guldstregen, som ellers kun markerer siden man er på, vokser
   frem fra midten, og teksten bliver guld og rykker en anelse ind. Kun med
   mus (ingen hængende hover efter et tryk på mobil); tastaturfokus får det
   samme. */
.menu-top .menu-menu-container li a {
  transition: color .3s ease, transform .3s ease;
}
.menu-top .menu-menu-container li a:before {
  visibility: visible;
  transform: scaleY(0);
  transition: transform .35s ease;
}
.menu-top .menu-menu-container li a.active:before,
.menu-top .menu-menu-container li a:focus-visible:before {
  transform: scaleY(1);
}
.menu-top .menu-menu-container li a:not(.active):focus-visible {
  color: #D8BA88;
  transform: translateX(6px);
}
.menu-top .login-block .login {
  border-color: #D8BA88;
  transition: background-color .3s ease, color .3s ease;
}
footer .menu-block a {
  transition: color .3s ease;
}
@media (hover: hover) {
  .menu-top .menu-menu-container li a:hover:before {
    transform: scaleY(1);
  }
  .menu-top .menu-menu-container li a:not(.active):hover {
    color: #D8BA88;
    transform: translateX(6px);
  }
  .menu-top .login-block .login:hover {
    background-color: #D8BA88;
    color: #0D0D0D;
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu-top .menu-menu-container li a,
  .menu-top .menu-menu-container li a:before {
    transition: none;
  }
  .menu-top .menu-menu-container li a:not(.active):hover,
  .menu-top .menu-menu-container li a:not(.active):focus-visible {
    transform: none;
  }
}

/* 5 · Footerens menu: guld ved hover (underpunktet flugter med resten) */
@media (hover: hover) {
  footer .menu-block a:hover {
    color: #D8BA88;
  }
}