/* ========================================
            Header {DESKTOP}
                [START]
========================================= */
@media (min-width: 1200px) {
    
    .header--sticky {
        position: fixed;
        top: 0;
        z-index: 9999;
    }

    .header--sticky .l-header__inner {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .header--sticky.active {
        display: block;
    }

    .l-nav__btn,
    .header__nav.header__nav--not-active {
        display: none;
    }

    .l-header__inner {
        width: 90%;
        flex-direction: row;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .header__logo {
        max-width: 300px;
    }

    .header__social-buttons {
        margin-top: 0;
        align-items: center;
    }

    .header__social-buttons .social-button {
        height: 30px;
        width: 30px;
    }


    
    /* ========================================
                    Header->
                    Navigation
                    [START]
    ========================================= */
    .header__nav--desktop {
        display: initial;
        width: 100%;
        background-color: transparent;
        align-content: center; /* Center vertically */
    }

    .header__nav--desktop > .menu {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .header__nav--desktop .sub-menu li {
        padding: 5px;
    }
    
    .header__nav--desktop a {
        position: relative; /* Set to 'relative' for underline */
        padding: 5px;
        color: var(--header-navigation-text-color);
        font-size: var(--header-navigation-text-font-size);
        font-weight: var(--header-navigation-text-font-weight);
        text-transform: uppercase;
        text-decoration: none;
        border-radius: var(--button-border-radius);
        background-color: transparent;
    }
    
    /* Add hover effect on menu items */
    .header__nav--desktop .menu li > a:hover {
        color: var(--header-navigation-hover-text-color);
        background-color: var(--header-navigation-hover-bg-color);
        cursor: pointer;

        transition: all .4s var(--block-zoom-transition-curves);
    }

    .header__nav--desktop .menu li > a:not([href]) {
        cursor: default;
    }

    /* Add drop-down arrow at parent item with children */
    .header__nav--desktop .menu > li.menu-item-has-children > a::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: #fff;
        padding-left: 7px;
    }

    /* Include drop-down arrow in hover effect */
    .header__nav--desktop .menu > li.menu-item-has-children:not(.current-menu-item) > a:hover::after {
        color: var(--header-navigation-hover-text-color);
    }

    /* Set the current active navigation item text color */
    .header__nav--desktop .current-menu-item > a {
        color: var(--header-navigation-current-page-text-color) !important;
        background-color: var(--header-navigation-current-page-bg-color);
    }




    /* ========================================
                    Header->
                    Navigation->
                    Sub-menu
                    [START]
    ========================================= */
    .header__nav--desktop .sub-menu {
        display: none; /* Hide sub-menu by default */
        position: absolute;
        z-index: 9999;
        padding-top: 15px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 15px;
        /* transform: translateY(5px); Place 5px down to include parent item padding */
        background-color: var(--header-bg-color);
    }

    /* Show sub-menu on hover */
    .header__nav--desktop li.menu-item-has-children:hover > .sub-menu {
        display: block;
    }
    
    /* Add aditional padding to first sub-menu item */
    /* .header__nav--desktop .sub-menu li:first-of-type {
        padding-top: 20px;
    } */
    
    /* ========================================
                    Header->
                    Navigation->
                    Sub-menu
                    [END]
    ========================================= */
    /* ========================================
                    Header->
                    Navigation
                    [END]
    ========================================= */
}

@media (min-width: 1544px) {
    
    .l-header__inner {
        width: 80%;
    }

    .header__nav--desktop > .menu {
        gap: 30px;
    }

}

/* ========================================
                Header {DESKTOP}
                [END]
========================================= */