/*--- NAVIGATION ---*/
.navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--size-m);
    text-transform: uppercase;
}

/* --- LOGO --- */
.navigation .logo {
    display: flex;
    align-items: center;
    /* midnight-fix */
    /*
    height: var(--header-compact-height);
    */
    height: 100%;
    line-height: 1.25em;
    font-family: serif;
    font-weight: bold;
}

.navigation .logo svg {
    width: auto;
    height: 100%;
    margin-right: var(--size-xxs);
    padding: var(--size-xxs) 0;
    box-sizing: border-box;
}

.navigation .logo svg + br {
    display: none;
}

/* --- ICONS --- */
.navigation .menu-icon,
.navigation .submenu-icon {
    width: var(--size-xl);
    height: var(--size-xl);
    line-height: var(--size-xl);
    text-align: center;
    cursor: pointer;
    appearance: none;
}

.navigation .menu-icon {
    position: relative;
    top: var(--size-xs);
    left: var(--size-xs);
    padding: var(--size-xs);
    font-size: var(--size-xl);
}

.navigation .menu-icon::before {
    content: "\2630";
}

.navigation .menu-icon:checked::before {
    content: "\2715";
}

.navigation .submenu-icon {
    font-size: var(--size-s);
}

.navigation .submenu-icon::before {
    content: "\276F";
    display: block;
    rotate: 90deg;
    /* midnight-fix */
    /*
    transition: all var(--transition-duration);
    */
}

/* --- MENU: CONTAINERS --- */
.navigation .menu {
    display: flex;
    font-size: var(--size-s);
}

.navigation .submenu {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

/* --- MENU: ITEMS --- */
.navigation li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.navigation a {
    text-decoration: none;
}

.navigation .current > a,
.navigation .current > .submenu-icon,
.navigation li:has(.current) > a,
.navigation li:has(.current) > .submenu-icon {
    color: var(--color-brand);
}

/* --- SCREEN: SMALL --- */
@media (max-width: 1023px) {
    /* --- PAGE --- */
    body:has(.menu-icon:checked) {
        overflow: hidden;
    }
    
    body:has(.menu-icon:checked) .header-inner {
        height: 100vh;
        background: transparent;
        backdrop-filter: blur(3px);
    }
    
    body:has(.menu-icon:checked) dialog {
        z-index: -1;
    }
    
    /* --- NAVIGATION --- */
    body:has(.menu-icon:checked) .navigation {
        background: var(--color-secondary);
        color: var(--color-primary);
    }
    
    /* --- LOGO --- */
    .navigation .logo {
        flex-grow: 1;
        width: 0;     
        height: var(--header-compact-height); /* midnight-fix */
    }
    
    /* --- MENU: CONTAINERS --- */
    .navigation .menu-icon:not(:checked) + .menu,
    .navigation .submenu-icon:not(:checked) + .submenu {
        display: none;
    }
    
    .navigation .menu {
        position: fixed;
        top: var(--header-compact-height);
        left: 0;
        flex-direction: column;
        width: 100%;
        max-height: calc(100% - var(--header-compact-height));
        background-color: var(--color-gray-light);
        box-shadow: 0 5px 10px 0 rgb(0 0 0 / 0.15);
        overflow-y: auto;
        /* box-sizing: border-box; */
        border-bottom: 1px solid var(--color-gray-medium); /* midnight-fix */
    }
    
    .navigation .submenu {
        width: 100%;
    }
    
    /* --- MENU: ITEMS --- */
    .navigation li {
        border-top: 1px solid var(--color-gray-medium); /* midnight-fix */
    }
    
    .navigation li a {
        flex-grow: 1;
        padding: var(--size-m);
    }
    
    .navigation .submenu span {
        margin-left: var(--size-m);
    }
}

/* --- SCREEN: LARGE --- */
@media (min-width: 1024px) {
    /* midnight-fix */
    .navigation {
        height: 100%;
    }
    
    
    /* --- LOGO --- */
    /* midnight-fix */
    /*
    .navigation .logo {
        height: var(--header-full-height);
    }
    */
    
    /* --- ICONS --- */
    .navigation .menu-icon {
        display: none;
    }
    
    .navigation .submenu-icon {
        margin-right: calc(var(--size-xs) * -1);
    }
    
    /* --- MENU: CONTAINERS --- */
    .navigation .menu {
        gap: var(--size-l);
    }
    
    .navigation .submenu {
        position: absolute;
        top: 5.5rem;
        padding-top: var(--size-xxs);
    }
    
    .navigation li:last-child .submenu {
        right: 0;
    }
    
    /* --- MENU: ITEMS --- */    
    .navigation .submenu a {
        /* margin-top: -1px; */
        width: 100%;
        padding: var(--size-s);
    }
    
    /* midnight-fix */
    .navigation .submenu-icon,
    .navigation .submenu {
        display: none;
    }
}

/* --- MOBILE --- */
@media only screen and (hover: none) and (pointer: coarse) {
    .navigation .submenu-icon:checked::before {
        rotate: -90deg;
    }
    
    /* midnight-fix */
    /*
    .header .navigation .submenu-icon:not(:checked) + .submenu {
        display: none;
    }
    */
}

/* --- DESKTOP --- */
/* midnight-fix */
@media only screen and (hover: hover) and (pointer: fine) {
    /*
    .navigation .submenu:hover .submenu-icon::before {
        rotate: -90deg;
    }
    
    .navigation .submenu:not(:hover) > ul {
        display: none;
    }
    
    .navigation li:hover > a,
    .navigation li:hover > .submenu-icon {
        color: var(--brand-color);
    }
    */
    
    
    
    .navigation li:hover a,
    .navigation li:hover .submenu-icon {
        color: var(--color-brand);
    }
    
    /*
    .navigation li:has(.submenu):not(:hover) .submenu {
        display: none;
    }
    */
}