/* ==========================================================================
   SITE HEADER & NAVIGATION STYLES
   ========================================================================== */

/* Controls the entire header element. */
.site-header {
    /* Makes this a flex container. */
    display: flex;
    /* Contents should flex sideways (the default). */
    flex-direction: row;
    /* Things inside this container are centered horizontally. */
    justify-content: center;
    /* Things inside this container are centered vertically. */
    align-items: center;
    /* Add spaces between contents. */
    gap: 2.5rem;
    /* Exactly the height of my logo image. */
    height: 250px;
}

/* Controls the two containers on either side of the logo. */
.nav-left,
.nav-right {
    /* Makes these also flex containers. */
    display: flex;
    /* We want their contents to flex downward. */
    flex-direction: column;
    /* We want them to be a little smaller than the logo. */
    height: 200px;
}

/* Controls the container around everything left of the logo.
   This contains 5 40px links. */
.nav-left {
    /* Contents should be pushed against the logo (from left). */
    align-items: flex-end;
}

/* Controls the container around everything right of the logo.
   Currently just 2 40px links, with space for 3 more eventually. */
.nav-right {
    /* Start at the top. */
    justify-content: flex-start;
    /* Contents should be pushed against the logo (from right). */
    align-items: flex-start;
}

/* Controls the actual anchors within the header. */
.nav-link {
    /* Font suggested as similar to our hand-drawn logo. */
    font-family: 'Cinzel', serif;
    /* Need to be exactly this height to fit 5 of them in 200px. */
    height: 40px;
    /* Makes it so that the 40px includes any padding and border. */
    box-sizing: border-box;
    /* Makes each link its own flex-ible block-like element. */
    display: flex;
    /* Vertically centers the text. */
    align-items: center;
    /* White text on black background. */
    color: #ffffff;
    /* Removes the underline that would otherwise be added to anchors. */
    text-decoration: none;
    /* Just the right size. */
    font-size: 1.05rem;
    /* Bold text. */
    font-weight: 700;
    /* Leave a bit of space between letters. */
    letter-spacing: 0.08em;
    /* Display everything as capital letters. */
    text-transform: uppercase;
    /* Smooth animation away from hovering behavior. */
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Controls the appearance of links specifically when hovering over them. */
.nav-link:hover {
    /* A slightly less severe shade of white. */
    color: #cccccc;
    /* Very slightly bigger than usual. */
    transform: scale(1.03);
}

/* Controls the little arrows used to indicate external links. */
.nav-right .arrow {
    /* Allows us to control the margin. */
    display: inline-block;
    /* Adds a little margin between the text and it. */
    margin-left: 0.5rem;
    /* Why not? */
    font-family: sans-serif;
    /* Smooth animation away from hovering behavior. */
    transition: transform 0.2s ease;
}

/* Controls the appearance of those arrows when the link is hovered over. */
.nav-right .nav-link:hover .arrow {
    /* Moves the arrow slightly right. */
    transform: translateX(4px);
}

/* Controls the band logo image in the center of the header. */
.header-logo {
    /* I'm not sure this actually matters. */
    display: block;
    /* We want to force the image to be exactly this high. */
    height: 250px;
    /* We do not want to affect the aspect ratio. */
    width: auto;
}

/* Rules that override the standard ones when on mobile devices. */
@media (max-width: 768px) {

    /* Overriding rules for the whole header container. */
    .site-header {
        /* Stacking side-by-side takes up too much space, so switch to above-below. */
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem 1rem;
    }

    /* Overriding rules for the links to the left of the logo. */
    .nav-left {
        /* These seem unnecessary and take up too much space, so just get rid of them. */
        display: none;
    }

    /* Overriding rules for the logo in the center. */
    .header-logo {
        /* Make it smaller. */
        max-height: 80px;
        /* But keep the aspect ratio the same. */
        width: auto;
    }

    /* Overriding rules for the links to the right of the logo. */
    .nav-right {
        /* Still a flex container. */
        display: flex;
        /* But now centered because it probably won't end up beside the logo. */
        justify-content: center;
        align-items: center;
        gap: 1.25rem;
        /* Ensures no centering weirdness. */
        width: 100%;
    }

    /* Overriding rules for the individual links. */
    .nav-link {
        /* Slightly different sizes for smaller screen. */
        font-size: 1rem;
        padding: 0.35rem 0.65rem;
    }
}