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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all .3s ease;
}

.site-header::before {
    content: "";
    display: block;
    height: 4px;
    background: #b18024;
}

/* Homepage */

.site-header.header-home {
    background: #ffffff;
    border-bottom: 1px solid #e8ebef;
}

/* Interior Pages */

.site-header.header-inner {
    background: #051f45;
    border-bottom: none;
}


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

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


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

.logo {
    flex-shrink: 0;
}

.logo img {
    display: block;
    height: 80px;
    width: auto;
}


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

.main-nav {
    flex: 1;

    display: flex;
    justify-content: center;
}


/* Menu */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 38px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu li {
    position: relative;
    list-style: none;
    white-space: nowrap;
}


/* Links */

.nav-menu a {
    position: relative;
    display: block;

    padding: 12px 0;

    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;

    transition: color .25s ease;
}


/* Homepage Colors */

.header-home .nav-menu a {
    color: #051f45;
}


/* Interior Colors */

.header-inner .nav-menu a {
    color: #ffffff;
}


/* Active Page */

.header-home .current-menu-item>a,
.header-home .current-page-ancestor>a,
.header-inner .current-menu-item>a,
.header-inner .current-page-ancestor>a {
    color: #b18024;
}


/* Hover */

.nav-menu a:hover {
    color: #b18024;
}


/* Underline */

.nav-menu a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0;
    height: 2px;

    background: #b18024;

    transition: width .3s ease;
}

.nav-menu a:hover::after,
.current-menu-item>a::after,
.current-page-ancestor>a::after {

    width: 100%;
}


/* =====================================================
   DROPDOWNS
===================================================== */

.nav-menu .sub-menu {

    display: none;

    position: absolute;

    top: 100%;
    left: 0;

    min-width: 280px;

    margin: 0;
    padding: 12px 0;

    list-style: none;

    background: #ffffff;

    border: 1px solid #e4e7eb;

    border-radius: 8px;

    box-shadow:
        0 12px 28px rgba(0,0,0,.12);

    z-index: 9999;
}

.nav-menu li:hover>.sub-menu {
    display: block;
}

.sub-menu li {
    width: 100%;
}

.sub-menu a {

    color: #051f45 !important;

    padding: 12px 20px;

    font-weight: 600;
}

.sub-menu a:hover {

    background: #f5f7fa;

    color: #b18024 !important;
}


/* =====================================================
   CTA
===================================================== */

.header-cta {
    flex-shrink: 0;
}

.btn-header {

    display: inline-block;

    background: #b18024;
    color: #ffffff;

    padding: 14px 28px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: 700;

    transition: all .3s ease;
}

.btn-header:hover {

    background: #8f6518;

    color: #ffffff;

    transform: translateY(-2px);
}

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

.menu-toggle{
    display:none;
    width:52px;
    height:52px;
    margin:12px auto 0;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
    transition:.3s;
}

.menu-toggle span{
    display:block;
    width:30px;
    height:3px;
    margin:6px auto;
    border-radius:2px;
    background:#051f45;
    transition:.3s ease;
}

.header-inner .menu-toggle span{
    background:#ffffff;
}


/* =====================================================
   Mobile Submenu Toggle
===================================================== */

.submenu-toggle{
    display:none;
}


/* =====================================================
   Tablet / Mobile
===================================================== */

@media (max-width:1200px){

    /* ---------------------------------
       Header Layout
    --------------------------------- */

    .header-container{

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:12px;

        padding:18px 20px;

        position:relative;

    }

    .logo{

        text-align:center;

    }

    .logo img{

        height:70px;

    }

    .header-cta{

        display:none;

    }

    /* ---------------------------------
       Hamburger
    --------------------------------- */

    .menu-toggle{

        display:block;

    }

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

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

    }

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

        opacity:0;

    }

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

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

    }

    /* ---------------------------------
       Navigation
    --------------------------------- */

    .main-nav{

        display:none;

        width:100%;

        background:#ffffff;

        border-radius:12px;

        box-shadow:
            0 18px 40px rgba(5,31,69,.10);

        overflow:hidden;

    }

    .main-nav.is-open{

        display:block;

    }

    .nav-menu{

        display:block;

        margin:0;

        padding:0;

    }

    .nav-menu > li{

        position:relative;

        border-bottom:1px solid #edf1f6;

    }

    .nav-menu > li:last-child{

        border-bottom:none;

    }

    .nav-menu > li > a{

        display:block;

        padding:18px 22px;

        color:#051f45 !important;

        font-size:1rem;

        font-weight:700;

    }

    /* Remove desktop underline */

    .nav-menu a::after{

        display:none;

    }

    /* ---------------------------------
       Submenu Toggle
    --------------------------------- */

    .submenu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        position:absolute;

        top:8px;

        right:10px;

        width:42px;

        height:42px;

        border:none;

        background:none;

        color:#051f45;

        font-size:18px;

        cursor:pointer;

        transition:.3s;

    }

    .menu-item-has-children.submenu-open
    > .submenu-toggle{

        transform:rotate(180deg);

    }

    /* ---------------------------------
       Submenu
    --------------------------------- */

    .menu-item-has-children > .sub-menu{

        display:none !important;

        position:static;

        margin:0;

        padding:0;

        border:none;

        border-radius:0;

        background:#f8fafc;

        box-shadow:none;

    }

    .menu-item-has-children.submenu-open
    > .sub-menu{

        display:block !important;

    }

    .sub-menu li{

        border-top:1px solid #e8edf3;

    }

    .sub-menu a{

        display:block;

        padding:14px 40px;

        color:#5a6178 !important;

        font-size:.95rem;

        font-weight:600;

    }

    .sub-menu a:hover{

        background:#eef3f8;

        color:#b18024 !important;

    }

}


/* =====================================================
   Small Phones
===================================================== */

@media (max-width:576px){

    .header-container{

        padding:16px;

    }

    .logo img{

        height:60px;

    }

    .nav-menu > li > a{

        padding:16px 18px;

    }

    .sub-menu a{

        padding:14px 30px;

    }

}