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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: var(--header-height);

    z-index: 999;

    transition: var(--transition);

    background: transparent;

}

.header-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: var(--header-height);

}


.site-branding img {

    max-height: 52px;
    width: auto;
    background: rgb(246, 251, 255);
    border-radius: 8px;
    padding: 4px 8px;

}

.site-title {

    font-size: 28px;

    font-weight: 700;

    color: white;

}

.primary-menu {

    display: flex;

    align-items: center;

    gap: 36px;

}

.primary-menu li {

    position: relative;

}

.primary-menu a {

    color: white;

    font-size: 16px;

    font-weight: 500;

    transition: var(--transition);

    position: relative;

}

.primary-menu a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0;

    height: 2px;

    background: var(--color-secondary);

    transition: var(--transition);

}

.primary-menu a:hover::after {

    width: 100%;

}

.primary-menu a:hover {

    color: var(--color-secondary);

}

.header-actions {

    display: flex;

    align-items: center;

    gap: 20px;

}

.btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 28px;

    background: var(--color-primary);

    color: white;

    border-radius: var(--radius);

    font-weight: 600;

    transition: var(--transition);

}

.btn-primary:hover {

    background: var(--color-primary-dark);

    transform: translateY(-2px);

}

.menu-toggle {

    display: none;

    background: transparent;

    border: none;

    cursor: pointer;

    flex-direction: column;

    gap: 6px;

}

.menu-toggle span {

    width: 28px;

    height: 2px;

    background: white;

    transition: var(--transition);

}

@media(max-width:991px){

.primary-navigation{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100vh;

    background:#fff;

    transition:.35s ease;

    padding:120px 40px;

    z-index:999;

}

.primary-navigation.active{

    right:0;

}

.primary-menu{

    flex-direction:column;

    align-items:flex-start;

    gap:24px;

}

.primary-menu a{

    color:#222;

    font-size:18px;

}

.menu-toggle{

    display:flex;

    z-index:1001;

}

.header-actions .btn-primary{
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all .3s ease;
}

.site-header.mobile-scrolled .header-actions .btn-primary{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

}

/* Sticky Header */

.site-header.scrolled{

    background:#ffffff;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

/* Navigation Color */

.site-header.scrolled .primary-menu a{

    color:var(--color-black);

}

.site-header.scrolled .site-title{

    color:var(--color-black);

}

.site-header.scrolled .menu-toggle span{

    background:var(--color-black);

}

.current-menu-item > a{

    color:var(--color-primary);

}

.current-menu-item > a::after{

    width:100%;

}

.primary-menu li{

    position:relative;

}

.primary-menu .sub-menu{

    position:absolute;

    top:120%;

    left:0;

    min-width:220px;

    background:#fff;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    border-radius:8px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.primary-menu li:hover>.sub-menu{

    opacity:1;

    visibility:visible;

    top:100%;

}

.sub-menu li{

    width:100%;

}

.sub-menu a{

    display:block;

    padding:14px 20px;

    color:#222 !important;

}

.menu-toggle.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}


/* Internal Pages */
body:not(.home) .site-header{

    background:#fff;

    box-shadow:0 5px 20px rgba(0,0,0,.06);

}

body:not(.home) .primary-menu a{

    color:var(--color-black);

}

body:not(.home) .site-title{

    color:var(--color-black);

}

body:not(.home) .menu-toggle span{

    background:var(--color-black);

}