/* ---------------------------------------------------------------------------- */
/* MOBILE START */
.screen-reader-mobile: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--mobile__min-height:      33mm;
    --nav-item--mobile__min-height:     15mm; */
    --sublist-indenting: 1.618rem;
    --border-color: white;

    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 
        "nav_home       nav_language_toggle   nav_main_toggle"
        "nav_main       nav_main              nav_main"
        "nav_language   nav_language          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_toggle    nav_main_toggle"
        "nav_main             nav_main               nav_main"
        "nav_language         nav_language           nav_language"
    ;
}
#nav-menu.nav-menu--order--nav_home-nav_main-nav_language {
    grid-template-areas: 
        "nav_home             nav_main_toggle        nav_language_toggle"
        "nav_main             nav_main               nav_main"
        "nav_language         nav_language           nav_language"
    ;
}
#nav-menu.nav-menu--order--nav_main-nav_home-nav_language {
    grid-template-areas: 
        "nav_main_toggle      nav_home               nav_language_toggle"
        "nav_main             nav_main               nav_main"
        "nav_language         nav_language           nav_language"
    ;
}
#nav-menu.nav-menu--order--nav_main-nav_language-nav_home {
    grid-template-areas: 
        "nav_main_toggle      nav_language_toggle    nav_home"
        "nav_main             nav_main               nav_main"
        "nav_language         nav_language           nav_language"
    ;
}
#nav-menu.nav-menu--order--nav_language-nav_main-nav_home {
    grid-template-areas: 
        "nav_language_toggle  nav_main_toggle        nav_home"
        "nav_main             nav_main               nav_main"
        "nav_language         nav_language           nav_language"
    ;
}
#nav-menu.nav-menu--order--nav_language-nav_home-nav_main {
    grid-template-areas: 
        "nav_language_toggle  nav_home               nav_main_toggle"
        "nav_main             nav_main               nav_main"
        "nav_language         nav_language           nav_language"
    ;
}


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


/* ====================================== NAV-BAR-ITEM (toggles and home-link)====================================== */
#nav-menu .nav-bar-item {
    display: flex;
    /* height: var(--nav-bar--mobile__min-height); */
}
#nav-menu .nav-bar-item .nav-item-wrapper {
    display: flex;
}
#nav-menu .nav-bar-item .nav-item-wrapper .nav-item {
    display: flex;
    align-items: center;
    /* min-height: var(--nav-item--mobile__min-height); */
}
#nav-menu .nav-bar-item .nav-item-wrapper .nav-item__background-image-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}
#nav-menu .nav-bar-item[data-mobile-item-alignment-horizontal="left"]   { justify-self: flex-start;   }
#nav-menu .nav-bar-item[data-mobile-item-alignment-horizontal="center"] { justify-self: center;       }
#nav-menu .nav-bar-item[data-mobile-item-alignment-horizontal="right"]  { justify-self: flex-end;     } 
#nav-menu .nav-bar-item[data-mobile-item-alignment-vertical="top"]    { align-items: flex-start; }
#nav-menu .nav-bar-item[data-mobile-item-alignment-vertical="center"] { align-items: center;     }
#nav-menu .nav-bar-item[data-mobile-item-alignment-vertical="bottom"] { align-items: flex-end;   }


/* TODO: NONONO!!! */
#nav-menu .nav-bar-item[data-mobile-item-alignment-vertical="top"]    { align-items: center; }
#nav-menu .nav-bar-item[data-mobile-item-alignment-vertical="center"] { align-items: center; }
#nav-menu .nav-bar-item[data-mobile-item-alignment-vertical="bottom"] { align-items: center; }


#nav-menu .nav-bar-item[data-mobile-item-stretch="true"]               { align-items: stretch; }
#nav-menu .nav-bar-item[data-mobile-item-stretch="true"][data-mobile-item-alignment-vertical="top"]    .nav-item-wrapper { align-items: flex-start; }
#nav-menu .nav-bar-item[data-mobile-item-stretch="true"][data-mobile-item-alignment-vertical="center"] .nav-item-wrapper { align-items: center;     }
#nav-menu .nav-bar-item[data-mobile-item-stretch="true"][data-mobile-item-alignment-vertical="bottom"] .nav-item-wrapper { align-items: flex-end;   }


/* ====================================== NAV-LIST (toggles and home-link)====================================== */


/* SUBLIST INDENTING */
#nav-menu .nav-list .nav-list .nav-item { padding-left: calc( var(--sublist-indenting) * 2); }
#nav-menu .nav-list .nav-list .nav-list .nav-item { padding-left: calc( var(--sublist-indenting) * 3); }
#nav-menu .nav-list .nav-list .nav-list .nav-list .nav-item { padding-left: calc( var(--sublist-indenting) * 4); }
#nav-menu .nav-list .nav-list .nav-list .nav-list .nav-list .nav-item { padding-left: calc( var(--sublist-indenting) * 5); }


#nav-menu .nav-list-item .nav-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; /* <---- Set to 'space-between' to align icon to the right -----> */
}
#nav-menu .nav-list .nav-item {
    display: flex;
    align-items: center;
    /* min-height: var(--nav-item--mobile__min-height); */
}
#nav-menu .nav-list .toggle {
    display: flex;
    align-items: center;
    /* min-height: var(--nav-item--mobile__min-height); */
}
#nav-menu .nav-list .toggle > * {
    display: flex;
}

/* Styling ------------------------------------------------------------ */




/* Padding */
#nav-menu .nav-list .nav-item {
    padding: 1.25rem;
}
#nav-menu .nav-list .toggle {
    /* padding: 1.25rem; */
}
#nav-menu .nav-item__background-image-overlay {
    /* padding: 0.5rem; */
}

/* 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 > .nav-list-item { 
    background-color:rgba(0, 0, 0, 0.125); /* <-- Create nice background-color effect for sublists */
}




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



/* Border-Top */
#nav-menu .nav-list .nav-item-wrapper { 
    border-top: 2px solid  var(--border-color); 
}
#nav-menu .nav-list .nav-list .nav-item-wrapper { 
    border-top: 1px dashed var(--border-color); 
}