/* header.css contains all the styling for the header classes */

/*any object with the id of header*/
#header {
    width: 100%;
    height: 72px;

    display: flex;
    justify-content: center;

    background-color: var(--surface); 
}

.header-container {
    width: min(1440px, calc(100% - 64px)); /* makes the max size the header contant can be is 1440 and creates 32 px padding on left right right, it also adjust to other screens with media querries*/

    display: grid; /* the grid allows us to center the items, like the nav, middle button will be centered at the exact center*/
    grid-template-columns: 1fr auto 1fr; /*left grid section take 1fr unit, middle take as much as needed and right take 1fr unit*/
    align-items: center; /*center the items on the grid*/
}

/*default sizing for the left and right containers on the header*/
.header-logo, .header-right {
    width: 220px;
}

.header-logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    justify-self: start; /*place the element at the start of the grid section, overrides the centering inside the grid section*/
}

.header-right {
    justify-self: end; /* same as above but with the end of the grid section not the start*/
}

/*allows for a gap of 40px between each element inside the nav selection*/
.header-nav {
    justify-self: center;
    display: flex;
    gap: 40px;
}

.nav-button {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.2s ease; /*creates a simple animation for the hover color effect*/
}

.nav-button:hover {
    color: var(--primary-emerald)
}