/* Base elements */
nav.fwd-nav {
    border-bottom: 1px solid #ccc;
}

nav.fwd-nav > ul {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
}

nav.fwd-nav > ul > li {
    flex-grow: 0;
    flex-basis: 0;
}

nav.fwd-nav li {
    position: relative;
    width: 100%;
    padding: var(--nav-element-spacing-horizontal);

    white-space: nowrap;
}

nav.fwd-nav li > :first-child {
    display: inline-block;
    width: 100%;
    margin: 0;
}

nav.fwd-nav ul ul {
    display: none;

    position: absolute;
    top: 100%;
    left: 0;

    margin: 0;
}

nav.fwd-nav li:where(:active, :focus-within, :hover) > ul {
    display: flex;
    flex-direction: column;
    align-items: start;
}

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

/* z-index */
nav.fwd-nav a {
    position: relative;
}

nav.fwd-nav > ul > li > ul {
    z-index: 10;
}

/* Colors and optional styling */
nav.fwd-nav,
nav.fwd-nav ul {
    background-color: var(--primary);
}

nav.fwd-nav li.border-above {
    border-top: 1px solid #ccc;
}

nav.fwd-nav li:where(:active, :focus-within, :hover) {
    background-color: var(--primary-focus-dark);
}

nav.fwd-nav li.current-page:not(:where(:active, :focus-within, :hover)) {
    background-color: var(--primary-focus-opaque);
}

nav.fwd-nav a {
    color: var(--primary-inverse);
}

nav.fwd-nav a::after {
    background-color: var(--primary-inverse);
}

/* Logo */
nav.fwd-nav #logo {
    font-weight: bold;
}

nav.fwd-nav #logo::before {
    display: inline-block;

    width: calc(1em * var(--line-height));
    height: calc(1em * var(--line-height));
    margin-right: 0.25rem;
    vertical-align: top;

    --mask-image: url("https://fwdekker.com/favicon.png");
    -webkit-mask-image: var(--mask-image);
    -webkit-mask-size: cover;
    mask-image: var(--mask-image);
    mask-size: cover;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: var(--primary-inverse);

    content: "";
}

/* Hamburger */
nav.fwd-nav #nav-hamburger-label {
    height: fit-content;
    margin: 0;
    padding: calc(var(--nav-element-spacing-horizontal) + var(--nav-link-spacing-vertical));

    color: var(--primary-inverse);
}

nav.fwd-nav #nav-hamburger-label:where(:active, :focus-within, :hover) {
    background-color: var(--primary-focus-dark);
}

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

@media (max-width: 576px) {
    nav.fwd-nav #nav-hamburger-checkbox:not(:checked) ~ ul li:not(:first-child) {
        display: none;
    }
}