/* --------------------------------------- */
/* DESKTOP START */
.screen-reader-desktop:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}
#nav-menu {
    /* --nav-bar--desktop__min-height: 12vh; */
    --nav-menu__nav-item--padding: 1.5rem;
    --nav-item__border-width: 0.33em;

    display: grid;
    column-gap: var(--gap);
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "nav_home nav_main nav_language";
}

#nav-menu svg {
    width: auto; /* 1 Prevents safari from beaking the layout */
}

#nav-menu.nav-menu--order--nav_home-nav_language-nav_main { grid-template-areas: "nav_home       nav_language   nav_main"     ; }
#nav-menu.nav-menu--order--nav_home-nav_main-nav_language { grid-template-areas: "nav_home       nav_main       nav_language" ; }
#nav-menu.nav-menu--order--nav_main-nav_home-nav_language { grid-template-areas: "nav_main       nav_home       nav_language" ; }
#nav-menu.nav-menu--order--nav_main-nav_language-nav_home { grid-template-areas: "nav_main       nav_language   nav_home"     ; }
#nav-menu.nav-menu--order--nav_language-nav_main-nav_home { grid-template-areas: "nav_language   nav_main       nav_home"     ; }
#nav-menu.nav-menu--order--nav_language-nav_home-nav_main { grid-template-areas: "nav_language   nav_home       nav_main"     ; }

#nav-home        {  grid-area: nav_home;      }
#nav-main-toggle {  grid-area: menutoggle;   }
#nav-main        {  grid-area: nav_main;      }
#nav-language    {  grid-area: nav_language;  }



/* NAV-HOME -----------------  */
#nav-home { display: grid; }
/* NAV-MAIN -----------------  */
#nav-main { display: grid; }
/* Hide subnavs on desktop */
#nav-main .nav-list .nav-list          { display: none; } 
/* Hide subnav-toggles on desktop */
#nav-main .nav-item-wrapper .toggle    { display: none; }
/* NAV-LANGUAGE -----------------  */
#nav-language { 
    display: flex; 
}
#nav-language .nav-list {
    flex-wrap: wrap; 
    justify-content: flex-end;
}
/* Desktop: Styling =================================== */
/* GLOBAL .nav-list ---------  */
#nav-menu .nav-list { 
    display: flex; 
}
#nav-menu .nav-list-item {
    display: flex;
}
#nav-menu .nav-item-wrapper  { 
    min-height: var(--nav-bar--desktop__min-height);
    display: flex;
}
#nav-menu .nav-item {
    display: flex;
}
#nav-menu .nav-item__background-image-overlay {
    /* some stuff */
}
/* DON`T CHANGE ORDER HERE!!!! start */
[data-desktop-items-alignment-horizontal="left"]   { justify-self: flex-start;   }
[data-desktop-items-alignment-horizontal="center"] { justify-self: center;       }
[data-desktop-items-alignment-horizontal="right"]  { justify-self: flex-end;     }
/* DON`T CHANGE ORDER HERE!!!! */
[data-desktop-items-alignment-vertical="top"]      .nav-item { align-items: flex-start; }
[data-desktop-items-alignment-vertical="center"]   .nav-item { align-items: center;     }
[data-desktop-items-alignment-vertical="bottom"]   .nav-item { align-items: flex-end;   }
/* DON`T CHANGE ORDER HERE!!!! */
[data-desktop-items-alignment-vertical="top"]      .nav-item-wrapper { align-items: flex-start; }
[data-desktop-items-alignment-vertical="center"]   .nav-item-wrapper { align-items: center;     }
[data-desktop-items-alignment-vertical="bottom"]   .nav-item-wrapper { align-items: flex-end;   }
/* DON`T CHANGE ORDER HERE!!!! */
[data-desktop-items-stretch="true"]                .nav-item-wrapper { align-items: stretch; }
/* DON`T CHANGE ORDER HERE!!!! end */




/* DESKTOP END */
/* --------------------------------------- */



/* Padding */
#nav-menu .nav-item,
#nav-menu .nav-list .toggle {
    padding: var(--nav-menu__nav-item--padding);
}
#nav-menu .nav-item__background-image-overlay {
    /* padding: 2px; */
}

/* Text */

/* #nav-menu .nav-item {
    color: black;
}
#nav-menu .nav-list .toggle {
    color: black;
} */



/* Background Colors  */
#nav-menu .nav-item__background-image-overlay {
    /* background-color: rgb(255, 94, 0); */
}
#nav-menu .nav-list-item { 
    background-color: none; /* <-- Create nice background-color effect for sublists */
}




/* Backgrounds Images */
#nav-menu .nav-item {
    /* background-image: repeating-linear-gradient(45deg,rgb(255, 85, 0),   rgba(0, 0, 0, 0.386) 2px,transparent 2px, transparent 4px);  */
}


/* Borders-Bottom */

/* TODO: add [data-use-border-top="true"] */
/* TODO: add [data-use-border-bottom="true"] */
/* #nav-menu .nav-item {
    padding-top: calc(var(--nav-item__border-width) + var(--nav-menu__nav-item--padding));
    padding-bottom: calc(var(--nav-item__border-width) + var(--nav-menu__nav-item--padding));
}
#nav-menu .current .nav-item {
    padding-bottom: var(--nav-menu__nav-item--padding);
    border-bottom: var(--nav-item__border-width) solid red;
}
#nav-menu .has-current-subitem .nav-item {
    padding-bottom: var(--nav-menu__nav-item--padding);
    border-bottom: var(--nav-item__border-width) dashed red;
}

#nav-language .nav-item {
    font-size: smaller;
    padding-top: calc(var(--nav-item__border-width) + var(--nav-menu__nav-item--padding));
    padding-bottom: calc(var(--nav-item__border-width) + var(--nav-menu__nav-item--padding));
    border-bottom: none;
}
#nav-language .current .nav-item {
    padding-bottom: var(--nav-menu__nav-item--padding);
    border-top: var(--nav-item__border-width) solid black;
    border-bottom: none;
}
#nav-language .has-current-subitem .nav-item {
    padding-bottom: var(--nav-menu__nav-item--padding);
    border-top: var(--nav-item__border-width) dashed black;
    border-bottom: none;
} */