/*
=========================================
TemperWorks Navigation System
=========================================
*/


/* =========================
   TOP BAR
========================= */


.top-bar {

    width: 100%;

    background: var(--bg-panel);

    border-bottom: 1px solid var(--bg-panel-2);

    color: var(--text-primary);

}


.top-bar-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: .65rem 0;

}


.top-message {

    color: var(--text-secondary);

    font-size: .9rem;

    font-weight: 600;

}


.social-links {

    display: flex;

    gap: 1.25rem;

}


.social-links a {

    color: var(--text-primary);

    text-decoration: none;

    font-weight: 600;

    transition: color .2s ease;

}


.social-links a:hover {

    color: var(--accent-blue);

}



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


.site-header {

    width: 100%;

    background: var(--bg-panel);

    border-bottom: 1px solid var(--bg-panel-2);

}



.header-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    padding: 1.25rem 0;

    background: var(--bg-panel);

}



/* =========================
   LOGO
========================= */


.site-branding {

    flex-shrink: 0;

}


.site-logo {

    color: var(--text-primary);

    font-size: 2rem;

    font-weight: 800;

    letter-spacing: .5px;

    text-decoration: none;

    transition: color .2s ease;

}


.site-logo:hover {

    color: var(--accent-gold);

}



/* =========================
   NAVIGATION MENU
========================= */


.main-navigation {

    flex: 1;

    background: var(--bg-panel);

}


.primary-menu {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 2rem;

    list-style: none;

    margin: 0;

    padding: 0;

    background: var(--bg-panel);

}



.primary-menu li {

    margin: 0;

    padding: 0;

}



.primary-menu a {

    display: block;

    color: var(--text-primary);

    text-decoration: none;

    font-weight: 600;

    padding: .5rem 0;

    transition: all .2s ease;

}



.primary-menu a:hover {

    color: var(--accent-gold);

}



/* Active Menu Item */

.current-menu-item a {

    color: var(--accent-gold);

}



/* =========================
   HEADER ACTION BUTTONS
========================= */


.header-actions {

    display: flex;

    align-items: center;

    gap: .75rem;

}



.header-actions .button {

    display: inline-block;

    padding: .7rem 1.25rem;

    border-radius: 8px;

    font-weight: 700;

    text-decoration: none;

}



.header-actions .button-primary {

    background: var(--accent-gold);

    color: var(--bg-primary);

}



.header-actions .button-primary:hover {

    opacity: .85;

}



.header-actions .button-secondary {

    border: 2px solid var(--accent-blue);

    color: var(--accent-blue);

}



.header-actions .button-secondary:hover {

    background: var(--accent-blue);

    color: var(--bg-primary);

}



/* =========================
   MOBILE
========================= */


@media (max-width: 1000px) {


    .header-container {

        flex-wrap: wrap;

    }


    .main-navigation {

        width: 100%;

        order: 3;

    }


    .primary-menu {

        flex-wrap: wrap;

    }


}



@media (max-width: 700px) {


    .top-bar-container {

        flex-direction: column;

        gap: .5rem;

    }


    .header-container {

        flex-direction: column;

    }


    .primary-menu {

        flex-direction: column;

        gap: 1rem;

    }


    .header-actions {

        width: 100%;

        justify-content: center;

    }


}
.site-branding-container {
    padding: 1rem 0;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.custom-logo {
    width: 90px;
    height: auto;
}

.site-title a {
    color: white;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
}

.site-title p {
    margin: 0;
    font-size: .95rem;
    opacity: .8;
}