/* Base elements */
nav.fwd-nav {
    display: block;
    z-index: 10;

    margin: 0;
    width: 100%;

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

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

nav.fwd-nav * {
    vertical-align: middle;
}

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

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

    color: white;
}

nav.fwd-nav #nav-hamburger-label {
    float: right;
}

nav.fwd-nav a[target="_blank"]::after {
    margin-bottom: 0.2rem;
    background-color: white;
}


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

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

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


/* First level nesting */
nav.fwd-nav ul {
    display: block;
    margin: 0;
    padding: 0;

    list-style: none;
}

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

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

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

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


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

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

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

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

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


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

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

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