/* ========================================================
   MENU 
   ======================================================== */

/* ============================================================
   1. STYRING
   ============================================================ */
:root{
    --menu-bg: #e82529;  /* panelets farve */
    --menu-fg: #ffffff;   /* tekst i panelet */

    --menu-ease:  cubic-bezier(0.86, 0.1, 0.14, 0.9);
    --menu-slide: .4s;    /* panelet glider ned */
    --menu-fade:  .4s;    /* indholdet fader ind */

    /* Højden af jeres header: 25px + logoets line-height + 25px */
    --menu-header-height: 80px;

    /* UZIKs spacing-skala, kun de trin menuen bruger */
    --menu-space-05: 1rem;
    --menu-space-06: 1.5rem;
    --menu-space-08: 3rem;
    --menu-space-09: 4rem;

    /* Luft under punkterne på desktop */
    --menu-bottom: 5.5rem;

    /* Ikonets mål — 1:1 med Salient */
    --burger-width:       22px;   /* de to lange streger */
    --burger-width-short: 16px;   /* den nederste, korte */
    --burger-thickness:    2px;
    --burger-gap:          6px;   /* afstand fra midterstregen */

    /* iOS-fix: rigtig skærmhøjde uden adresselinjens hop */
    --window-height: calc(var(--vh, 1vh) * 100);
}

@media screen and (min-width: 768px){
    :root{
        --menu-header-height: 90px;
        --menu-space-05: 1.5rem;
        --menu-space-06: 2rem;
        --menu-space-08: 4rem;
        --menu-space-09: 6rem;

        /* Ikonet fra laptop og op */
        --burger-width:       28px;
        --burger-width-short: 20px;
        --burger-gap:          8px;
    }
}


/* ============================================================
   2. BURGER-IKONET
   Tre streger: øverst og midt er fulde, nederst er kortere.
   Ved åbning skrumper hele ikonet til 80%, midterstregen
   klapper sammen vandret, og de to andre kører ind i midten
   og roterer 45 grader hver sin vej.
   ============================================================ */
.header-menu-btn{
    -webkit-appearance: none;
    appearance: none;
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 0;
    font-size: 0;
    color: inherit;                  /* følger sidens tema */
    transition: color .2s ease;
}

.header-menu-btn:focus-visible{
    outline: 1px solid currentColor;
    outline-offset: 6px;
}

.lines-button{
    position: relative;
    display: block;
    width: var(--burger-width);
    height: calc(var(--burger-gap) * 2 + var(--burger-thickness));
    transition: transform .3s ease;
}

/* Midterstregen */
.lines-button::after{
    content: '';
    position: absolute;
    left: 0;
    top: var(--burger-gap);
    width: var(--burger-width);
    height: var(--burger-thickness);
    background-color: currentColor;
    transform: scale(1, 1);
    transition: transform .45s ease, opacity .2s ease;
}

/* Bærer for de to ydre streger — selv usynlig */
.lines{
    position: absolute;
    left: 0;
    top: var(--burger-gap);
    display: block;
    width: var(--burger-width);
    height: var(--burger-thickness);
    background: transparent;
}

.lines::before,
.lines::after{
    content: '';
    position: absolute;
    left: 0;
    height: var(--burger-thickness);
    background-color: currentColor;
    transform-origin: 50% 50%;
    transition: transform .45s ease, width .45s ease, opacity .2s ease;
}

.lines::after{                       /* øverste — fuld længde */
    top: calc(var(--burger-gap) * -1);
    width: var(--burger-width);
}

.lines::before{                      /* nederste — den korte */
    top: var(--burger-gap);
    width: var(--burger-width-short);
}

/* ---------- Åben: krydset ---------- */
html.is-menu-open .lines-button{
    transform: scale3d(.8, .8, .8);
}

html.is-menu-open .lines-button::after{
    transform: scale(0, 1);          /* midterstregen klapper sammen */
}

html.is-menu-open .lines::before{
    width: var(--burger-width);
    transform: translateY(calc(var(--burger-gap) * -1)) rotateZ(-45deg);
}

html.is-menu-open .lines::after{
    transform: translateY(var(--burger-gap)) rotateZ(45deg);
}


/* ============================================================
   3. HEADEREN LØFTES OVER PANELET NÅR MENUEN ER ÅBEN
   Så bliver logo og ikon stående på samme plads, og ikonet
   kan morphe i stedet for at blive skiftet ud.
   ============================================================ */
html.is-menu-open header{
    z-index: 1700;
    background-color: transparent;
    transform: none !important;       /* slår header-hidden fra */
}

html.is-menu-open header .header-logo,
html.is-menu-open header .header-menu-btn{
    color: var(--menu-fg);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}


/* ============================================================
   4. LAGET
   ============================================================ */
.menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--window-height);
    z-index: 1500;
    color: var(--menu-fg);
    pointer-events: none;
}

html.is-menu-open .menu{ pointer-events: auto; }

/* Panelet — parkeret sin egen højde over skærmkanten.
   Den ekstra pixel sikrer at der aldrig ses en hårlinje. */
.menu__wrapper{
    background-color: var(--menu-bg);
    transform: translate3d(0, calc(-100% - 1px), 0);
}

/* Transitionen bor på .is-ready, som JS'en sætter efter load.
   Uden det ville panelet animere ind ved første paint. */
.menu.is-ready .menu__wrapper{
    transition: transform var(--menu-slide) var(--menu-ease);
}

html.is-menu-open .menu__wrapper{
    transform: translateZ(0);
}


/* ============================================================
   5. INDHOLDET — her sker layoutskiftene
        under 768px   stak i toppen, ingen kommaer
        768–1023px    stak, lodret centreret
        1024px og op  punkterne i bunden, én kommalinje
   ============================================================ */
.menu__container{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: var(--window-height);
    opacity: 0;
    transition: opacity .2s var(--menu-ease);
}

html.is-menu-open .menu__container{
    opacity: 1;
    transition: opacity var(--menu-fade) var(--menu-ease);
}

.menu__container > .container{ width: 100%; }

@media screen and (max-width: 767px){
    .menu__container{
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (min-width: 768px){
    .menu__container{
        flex-direction: row;
        align-items: center;
    }
}

@media screen and (min-width: 1024px){
    .menu__container{
        align-items: flex-end;
        padding-bottom: var(--menu-bottom);
    }
}


/* ---------- Navigation ---------- */
.menu__nav{ width: 100%; }

@media screen and (max-width: 767px){
    .menu__nav{
        padding-top: calc(var(--menu-header-height) + var(--menu-space-09));
    }
}

@media screen and (min-width: 1280px){
    .menu__nav{ max-width: 75rem; }
}

.menu__nav-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu__nav-item{
    font-family: 'LeJeuneDeck', Arial, sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3rem;
}

@media screen and (min-width: 768px){
    .menu__nav-item{
        font-size: 5rem;
        line-height: 5.5rem;
    }
}

/* Fra 1024px flyder punkterne som én sætning der brækker */
@media screen and (min-width: 1024px){
    .menu__nav-item{ display: inline-block; }
}

@media screen and (max-width: 1023px){
    .menu__nav-comma{ display: none; }
}

.menu__nav-link{
    color: var(--menu-fg);
    text-decoration: none;
    transition: opacity .2s ease;
}

.menu__nav-link:hover,
.menu__nav-link.is-active{
    color: var(--menu-fg);
    opacity: .7;
}


/* ---------- Footer ---------- */
.menu__footer{
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    width: 100%;
    padding-bottom: var(--menu-space-06);
}

@media screen and (max-width: 767px){
    .menu__footer{ margin-top: var(--menu-space-08); }
}

@media screen and (min-width: 768px){
    .menu__footer{
        position: absolute;
        bottom: 0;
        left: 0;
        justify-content: flex-end;
    }
}

.menu__footer > .container{ width: 100%; }

.menu__footer-list{
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 768px){
    .menu__footer-list{ justify-content: flex-end; }
}

.menu__footer-item + .menu__footer-item{
    margin-left: var(--menu-space-05);
}

.menu__footer-link{
    font-family: 'HelveticaNow', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--menu-fg);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color .25s ease;
}

.menu__footer-link:hover{
    color: var(--menu-fg);
    border-bottom-color: currentColor;
}


/* ============================================================
   6. SCROLL-LÅS MENS MENUEN ER ÅBEN
   ============================================================ */
html.is-menu-open body{
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-right: var(--scrollbar-gap, 0px);
}

html.is-menu-open header{
    padding-right: var(--scrollbar-gap, 0px);
}


/* ============================================================
   7. REDUCERET BEVÆGELSE
   ============================================================ */
@media (prefers-reduced-motion: reduce){
    .menu.is-ready .menu__wrapper,
    .menu__container,
    .lines-button,
    .lines-button::after,
    .lines::before,
    .lines::after,
    html.is-menu-open .menu__container{
        transition: none !important;
    }
}