/* Base elements */
nav {
    z-index: 10;

    margin: 0;
    width: 100%;

    background-color: var(--fwdekker-theme-color);
    border-bottom: 1px solid #cccccc;
    font-size: 120%;

    --padding: calc(2em / 3);
}

nav * {
    vertical-align: middle;
}

nav a, nav a:link, nav a:visited, nav a:hover, nav a:active {
    width: 100%;  /* Ensures whole li is clickable */
}

nav a, nav a:link, nav a:visited, nav a:hover, nav a:active, nav #nav-hamburger-label {
    display: inline-block;
    margin: 0;
    padding: calc(var(--padding)) calc(var(--padding));
    height: 100%;

    color: white;
}

nav #nav-hamburger-label {
    float: right;
    font-size: unset;
    cursor: pointer;
}


/* Logo */
nav .logo {
    width: calc(1em + var(--padding));
    height: calc(1em + var(--padding));

    vertical-align: middle;
    filter: brightness(0) invert(1);
}

nav div.logo {
    display: inline-block;
    margin-right: calc(1em / 3);
}


/* First level nesting */
nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0;

    position: relative;
    background-color: var(--fwdekker-theme-color);
}

nav ul li:hover,
nav ul li:focus-within,
nav #nav-hamburger-label:hover,
nav #nav-hamburger-label:focus-within {
    cursor: pointer;
    background-color: var(--fwdekker-theme-color-very-dark);
}

nav li.currentPage {
    background-color: var(--fwdekker-theme-color-dark);
}


/* Second level nesting */
nav ul li ul {
    z-index: 11;

    display: none;
    position: absolute;
    left: 0;
}

nav ul li ul li ul {
    left: 100%;
    top: 0;
}

nav ul li:hover > ul,
nav ul li:focus-within > ul,
nav ul li ul:hover {
    display: block;
}

nav ul li ul li {
    min-width: 7em;
    width: 100%;
    white-space: nowrap;
}


/* Hide hamburger-related elements */
nav input[type="checkbox"] {
    display: none;
}

@media (min-width: 600px) {
    nav #nav-hamburger-label {
        display: none;
    }
}

@media (max-width: 600px) {
    nav input[type="checkbox"]:not(:checked) ~ ul li:not(:first-child) {
        display: none;
    }
}