/* || GENERAL STYLES || */

/**
 * Set the style for the overall navbar, so it appears distinctly in the page
 */
.navbar {
    /**
     * Mix the background color set in main to work for light and dark mode
     */
    background-color: color-mix(in srgb, var(--background-color) 30%, #555555 70%);
    padding: 0 5%;

    /**
     * Make the navbar stick to the top of the screen if below the banner
     */
    width: 90%;
    height: 44pt;

    /**
     * Ensure the navbar is able to get pointer events for link functionality
     */
    pointer-events: all;

    /**
     * Make the navbar a grid with aligned items with an automatically sized space for the hidden checkbox
     */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;

    font-size: 200%;
}

/**
 * Group the links into an unordered list
 */
.nav-links {
    list-style: none;
    display: inline-flex;
    overflow: hidden;
    height: 100%;
    align-items: center;
    margin: 0;
    padding: 0;
}

/**
 * Align links on the right of their spaces and center them vertically
 */
.link {
    display: flex;
    padding: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

/**
 * Make links, including the icon, darken when hovered over for visual feedback
 */
.a:hover, .a:hover .navbar-icon {
    opacity: 0.5;
}

.a {
    width: 100%;
    height: 100%;
    text-align: center;
    align-content: center;
}

/**
 * Set the image style for the LinkedIn icon
 */
.navbar-icon {
    max-width: 3em;
    max-height: 3em;
}

/* || UTILITIES || */

/**
 * Scale the menu label to the appropriate size to fit, maintaining the aspect ratio
 */
#menu-label {
    object-fit: cover;
}

/**
 * Hide the menu elements, since they are not generally needed
 */
#menu-icon, #menu, .menu-button {
    display: none;
}

/**
 * Move the links into a menu and convert the LinkedIn logo to text if too narrow
 */
@media not screen and (min-width: 650px) {
    /**
     * Set the navbar to two automatically sized columns
     */
    .navbar {
        grid-template-columns: auto auto;
    }

    /**
     * Align link text to the left
     */
    .link {
        display: block;
        padding: 2vh 0;
        width: 100%;
        text-align: left;
    }

    /**
     * Set the link heights to 0 so they are initially hidden
     * Also set a transition when the height is changed and make into a column
     */
    .nav-links {
        max-height: 0;
        transition: max-height 0.3s ease-in-out;
        flex-direction: column;
    }

    /**
     * Display the menu icon at the same size as the LinkedIn logo and float it to the right
     */
    #menu-icon {
        cursor: pointer;
        float: right;
        display: inline-block;
        user-select: none;
        max-height: 3em;
        max-width: 3em;
    }

    /**
     * Hide the LinkedIn logo
     */
    .navbar-icon {
        display: none;
    }

    /**
     * Set the text to replace the LinkedIn logo and make it visible
     */
    #linkedin::after {
        position: relative;
        top: 0;
        left: 0;
        visibility: visible;
        content: "LinkedIn";
    }

    /**
     * Toggle expanding the link menu when the menu-bar icon is clicked
     */
    .menu-button:checked ~ .nav-links {
        max-height: 50vh;
    }
}