/*
 * Remove margin/padding from navbar and its elements
 *
 * We need manual control over these things.
 */
nav, nav * {
    padding: 0;
    margin: 0;
}

nav ul {
    /*
     * Force other content to render below the navbar
     */
    display: inline-block;
    width: 100%;

    /*
     * Stand out from the rest of the page
     */
    background: var(--bg-high);
}

nav ul li {
    /*
     * Disable bullet points
     */
    list-style: none;

    /*
     * Make each element float to the right of the previous one
     */
    float: left;

    /*
     * Use a legible text color
     */
    color: var(--fg);

    /*
     * Add a border to the right to visually separate items
     */
    border-right: 1px solid var(--fg);
}

/*
 * Don't push content down when a dropdown is expanded
 */
nav ul li {
    position: relative;
}

/*
 * Don't push content down when a dropdown is expanded
 */
nav ul li ul {
    position: absolute;

    /*
     * Still fill the parent's width
     *
     * Otherwise it just uses the smallest "appropriate" width.
     */
    width: 100%;
}

/*
 * Don't render `a` tags specially
 */
nav a {
    color: var(--fg);
    text-decoration: none;
}

/*
 * Turns the background grey when you hover over an element in the navbar
 */
nav li:hover {
    background: var(--bg-low);
}

/*
 * Visual buffer between elements
 *
 * You'll need to add a `nav ul li x` where `x` is each top-level visible item
 * you have.
 */
nav ul li > a,
nav ul li > p {
    padding: 0.5em;
}

/*
 * Make clickable elements in the navbar/dropdowns fill their parent
 *
 * This way you can click on the whole space of the element instead of just the
 * text to activate the link.
 */
nav ul li a,
nav ul li p {
    display: block;
}

/*
 * Hide dropdown children by default
 */
nav ul li ul {
    display: none;
    visibility: hidden;
}

/*
 * Show children when parent is hovered or focused via the tab key
 */
nav ul li:hover > ul,
nav ul li:focus-within > ul,
nav ul li ul:hover {
    display: block;
    visibility: visible;
}

/*
 * Make dropdown children fill the parent container in a columnar format
 */
nav ul li ul li {
    clear: both;
    width: 100%;
}