/* ==================================================
   GLOBAL RESET (prevents mobile overflow bugs)
================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


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

.top-bar {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 12px 0;

}


.top-bar .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

}


.top-left,
.top-right {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

}


.top-bar,
.top-bar a,
.top-bar span {

    font-size: 14px;

    color: #0f172a;

}


/* Hide secondary top-bar info on very small phones to avoid clutter */
@media (max-width: 480px) {

    .top-bar {
        padding: 8px 0;
    }

    .top-bar,
    .top-bar a,
    .top-bar span {
        font-size: 12px;
    }

    .top-right .top-bar-extra {
        display: none;
    }
}


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


.site-header {

    position: absolute;

    top: 43px;

    left: 0;

    width: 100%;

    z-index: 999;

    transition: .35s ease;

}


/* Non-hero pages: always give the header a solid, safe background
   regardless of the chosen Header Style (Solid/Transparent/Glass),
   since transparent/glass only look right floating over a hero image.
   dynamic-css.php still colors this when Header Style = Solid. */
body:not(.has-hero) .site-header:not(.sticky) {

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

}



.header-container {

    max-width: 90%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

    padding: 8px 22px;

    border-radius: 20px;

}





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


.custom-logo-link {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


.custom-logo-link img {

    width: auto;

    max-height: 60px;

}



.logo a {

    text-decoration: none;

    font-size: 28px;

    font-weight: 700;

    color: #0f172a;

}





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


.main-nav {

    flex: 1;

}



.nav-menu {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 32px;

    list-style: none;

    padding: 0;

    margin: 0;

}


.nav-menu li {

    position: relative;

    list-style: none;

}


.nav-menu li::marker {

    display: none;

}


.nav-menu li a {

    text-decoration: none;

    color: #0f172a;

    font-size: 15px;

    font-weight: 500;

    padding: 10px 0;

    display: inline-block;

}


.nav-menu li a:hover {

    color: #14B8A6;

}



/* underline */


.nav-menu li a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background: #14B8A6;

    transition: .3s;

}


.nav-menu li:hover>a::after {

    width: 100%;

}


/* Tighten nav spacing on tablets so it doesn't crowd the logo/buttons */
@media (max-width: 1024px) and (min-width: 769px) {

    .header-container {
        gap: 16px;
        padding: 8px 16px;
    }

    .nav-menu {
        gap: 18px;
    }

    .nav-menu li a {
        font-size: 14px;
    }

}





/* ==================================================
   SEARCH
================================================== */


.header-search {

    position: relative;

    display: flex;

    align-items: center;

}



.search-btn {

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    color: #0f172a;

    background: #f1f5f9;

    transition: background .3s, transform .3s;

    flex-shrink: 0;

}


body.has-hero .site-header:not(.sticky) .search-btn {

    background: rgba(255, 255, 255, .15);

}



.search-btn:hover {

    background: #14B8A6;

    transform: translateY(-2px);

}



.search-box {

    position: absolute;

    right: 0;

    top: 55px;

    display: flex;

    align-items: center;

    gap: 10px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: .3s;

    z-index: 1200;

}



.search-box.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.search-form {

    margin: 0;

    width: 100%;

}



.search-field {

    width: 280px;

    max-width: 100%;

    height: 45px;

    border: none;

    outline: none;

    padding: 0 20px;

    border-radius: 50px;

    font-size: 15px;

    background: #fff;

    color: #0f172a;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .15);

}



.search-close {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    background: #14B8A6;

    color: #fff;

    font-size: 28px;

    cursor: pointer;

    flex-shrink: 0;

}





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


.header-actions {

    display: flex;

    align-items: center;

}


.header-btn {

    padding: 13px 28px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

    white-space: nowrap;

}



.header-btn:hover {

    transform: translateY(-3px);

}





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


.site-header.sticky {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

}


.site-header.sticky .header-container {

    background: #fff;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .10);

}


.site-header.sticky .logo a,
.site-header.sticky .nav-menu li a {

    color: #0f172a;

}


.site-header.sticky .search-btn {

    background: #f1f5f9;

    color: #0f172a;

}





/* ==================================================
   DROPDOWN
================================================== */


.nav-menu .sub-menu {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 200px;

    background: #fff;

    padding: 10px 0;

    border-radius: 12px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: .3s;

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

    z-index: 1100;

}



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

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.nav-menu .sub-menu li a {

    display: block;

    padding: 10px 20px;

    color: #0f172a;

}





/* ==================================================
   MOBILE NAV OVERLAY (backdrop behind slide-out menu)
================================================== */

.menu-overlay {

    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(15, 23, 42, .5);

    z-index: 998;

    opacity: 0;

    visibility: hidden;

    transition: opacity .3s ease;

}


.menu-overlay.active {

    display: block;

    opacity: 1;

    visibility: visible;

}


/* Prevent background scroll while mobile menu is open */
body.nav-open {

    overflow: hidden;

}





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


.mobile-toggle {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    min-width: 44px;

    min-height: 44px;

    align-items: center;

    justify-content: center;

}



@media(max-width:768px) {


    .site-header {

        top: 35px;

    }



    .header-container {

        padding: 12px 16px;

        gap: 14px;

    }


    .custom-logo-link img {

        max-height: 42px;

    }


    .logo a {

        font-size: 20px;

    }



    .main-nav {

        flex: 0;

    }



    .nav-menu {

        position: fixed;

        top: 0;

        left: -300px;

        width: 280px;

        max-width: 85vw;

        height: 100vh;

        background: #fff;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        padding: 90px 30px;

        transition: .4s;

        overflow-y: auto;

        z-index: 999;

        gap: 8px;

    }


    .nav-menu.active {

        left: 0;

    }


    .nav-menu li {

        width: 100%;

    }


    .nav-menu li a {

        color: #0f172a;

        width: 100%;

        padding: 14px 0;

        font-size: 16px;

    }


    .nav-menu .sub-menu {

        position: static;

        opacity: 1;

        visibility: visible;

        transform: none;

        box-shadow: none;

        display: none;

        padding-left: 12px;

    }


    .nav-menu .sub-menu.active {

        display: block;

    }



    .mobile-toggle {

        display: flex;

        color: #0f172a;

        font-size: 25px;

    }



    .header-actions .header-btn {

        padding: 10px 18px;

        font-size: 14px;

    }



    .search-box {

        position: fixed;

        top: 90px;

        left: 20px;

        right: 20px;

        width: auto;

    }


    .search-field {

        width: 100%;

    }


}


/* Extra-small phones */
@media (max-width: 480px) {

    .site-header {

        top: 30px;

    }

    .header-container {

        padding: 10px 12px;

        border-radius: 14px;

    }

    .custom-logo-link img {

        max-height: 36px;

    }

    .header-actions .header-btn {

        padding: 9px 14px;

        font-size: 13px;

    }

    .search-btn,
    .search-close {

        width: 38px;

        height: 38px;

    }

}






/* ==================================================
   NOTE: header text contrast is now handled generally
   above via body.has-hero, covering Solid, Transparent
   and Glass header styles on every non-hero template
   (not just the previous narrower "transparent + not
   .home" special case).
================================================== */