/* ==================================================
   HEADER
================================================== */

.site-header {

    position: sticky;
    top: 0;
    z-index: 1000;

    background: white;

    box-shadow: var(--shadow-sm);

    transition: all .3s ease;

}

/* ---------------------------------
   GRID LAYOUT
--------------------------------- */

.header-grid {

    display: grid;

    grid-template-columns: 360px 1fr;

    grid-template-rows: auto auto;

    grid-template-areas:
        "logo search"
        "logo nav";

    gap: 1rem 2rem;

    padding: 1rem 0;

    transition: all .3s ease;

}

/* ---------------------------------
   LOGO
--------------------------------- */

.site-logo {

    grid-area: logo;

    display: flex;

    align-items: center;

}

.site-logo img {

    width: 100%;

    max-width: 300px;

    height: auto;

    transition: all .3s ease;

}

/* ---------------------------------
   SEARCH
--------------------------------- */

.header-search {

    grid-area: search;

    display: flex;

    justify-content: flex-end;

    align-items: center;

}

.header-search .site-search {

    display: flex;

    width: 100%;

    max-width: 450px;

    gap: .5rem;

}

.header-search input {

    flex: 1;

    padding: .85rem 1rem;

    border: 1px solid var(--gray-300);

    border-radius: var(--radius-md);

}

.header-search button {

    background: var(--primary);

    color: white;

    border: none;

    padding: .85rem 1.25rem;

    border-radius: var(--radius-md);

    cursor: pointer;

}

/* ---------------------------------
   NAVIGATION
--------------------------------- */

.main-nav {

    grid-area: nav;

    border-top: 1px solid var(--gray-200);

}

.main-nav ul {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem;

    list-style: none;

    margin: 0;

    padding: 1rem 0;

}

.main-nav a {

    display: block;

    text-decoration: none;

    color: var(--primary-dark);

    font-weight: 600;

    font-size: 1.05rem;

    padding: .75rem 1rem;

    border-radius: var(--radius-sm);

    transition: .2s ease;

}

.main-nav a:hover {

    background: var(--gold-light);

}




@media (max-width: 900px) {

    .header-grid {

        grid-template-columns: 1fr;

        grid-template-areas:
            "logo"
            "search"
            "nav";

    }

    .site-logo {

        justify-content: center;

    }

    .header-search {

        justify-content: center;

    }

    .main-nav ul {

        justify-content: center;

    }

}




/* ======================================
   SHRINK HEADER
====================================== */

.site-header.scrolled .header-grid {

    grid-template-columns: 240px 1fr;

    padding: .5rem 0;

}

.site-header.scrolled .site-logo img {

    max-width: 200px;

}

.site-header.scrolled .main-nav a {

    padding: .5rem .75rem;

    font-size: .95rem;

}

.site-header.scrolled .header-search input {

    padding: .65rem .85rem;

}

.site-header.scrolled .header-search button {

    padding: .65rem 1rem;

}



.site-header.scrolled {

    background: rgba(
        255,
        255,
        255,
        0.55
    );

    backdrop-filter: blur(10px);

}