/* ==========================================================================
   AIWFF HEADER VISUAL REPAIR - CUSTOM CSS
   Resolves:
   1. Logo sizing & vertical alignment
   2. Main menu spacing & single-line alignment
   3. Desktop menu visible, offcanvas/hamburger hidden on desktop
   4. Search icon position at far right with clean spacing
   5. Tablet/mobile offcanvas toggler & logo scaling
   6. Header height balance & zero overlap with page content
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global Mobile Overflow Protection
   -------------------------------------------------------------------------- */
html, body {
    overflow-x: hidden !important;
}

.body-innerwrapper {
    overflow-x: hidden !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   2. Header Container & Structure - No Page Content Overlap
   -------------------------------------------------------------------------- */
#sp-top-bar + #sp-header {
    top: 0 !important;
}

#sp-header {
    position: relative !important;
    top: 0 !important;
    left: 0;
    width: 100% !important;
    height: 90px;
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    z-index: 999;
    box-sizing: border-box !important;
}

#sp-header.fixed-header {
    position: fixed !important;
    top: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

#sp-header .container {
    height: 100%;
    max-width: 1140px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

#sp-header .row {
    height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --------------------------------------------------------------------------
   3. Logo Styling & Alignment
   -------------------------------------------------------------------------- */
#sp-logo {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 35% !important;
    height: 100%;
    padding: 0 !important;
}

#sp-header .logo {
    display: flex !important;
    align-items: center !important;
    height: 100%;
    margin: 0;
    padding: 0;
}

#sp-header .logo a {
    display: flex !important;
    align-items: center !important;
    height: 100%;
    margin: 0;
    padding: 0;
}

#sp-header .logo a img,
#sp-header .logo img {
    max-height: 65px;
    width: auto;
    max-width: 100%;
    display: block;
    vertical-align: middle;
    transition: max-height 0.3s ease;
}

/* --------------------------------------------------------------------------
   4. Menu Column & Desktop Megamenu
   -------------------------------------------------------------------------- */
#sp-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
    width: auto !important;
    height: 100%;
    position: relative !important;
    padding: 0 !important;
}

#sp-menu .sp-column {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100%;
    height: 100%;
    position: relative !important;
    padding: 0 !important;
}

/* Desktop styles: >= 992px */
@media (min-width: 992px) {
    /* Hide offcanvas toggler on desktop */
    #sp-header #offcanvas-toggler {
        display: none !important;
    }

    .sp-megamenu-wrapper {
        display: flex !important;
        align-items: center !important;
        order: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .sp-megamenu-parent {
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        list-style: none !important;
        margin: 0 45px 0 0 !important; /* 45px margin to give search icon ample space */
        padding: 0 !important;
    }

    .sp-megamenu-parent > li {
        display: inline-block !important;
        position: relative !important;
    }

    .sp-megamenu-parent > li > a {
        display: block !important;
        padding: 0 14px !important;
        line-height: 90px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #222222 !important;
        letter-spacing: 0.3px !important;
        text-transform: uppercase !important;
        transition: color 0.3s ease !important;
    }

    .sp-megamenu-parent > li > a:hover,
    .sp-megamenu-parent > li.active > a {
        color: #f69322 !important;
    }

    /* Submenu dropdown fix */
    .sp-megamenu-parent .sp-dropdown {
        top: 90px !important;
    }

    /* Search Module on Desktop */
    #sp-menu .sp-column .sp-module {
        position: static !important;
        order: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #sp-menu .sp-column .sp-module .sp-module-content .top-search-wrapper {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        display: block !important;
        margin: 0 !important;
        z-index: 101 !important;
    }

    #sp-menu .sp-column .sp-module .sp-module-content .top-search-wrapper.active {
        width: 100% !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        background: #ffffff !important;
        padding: 0 20px !important;
    }

    #sp-menu .sp-column .sp-module .sp-module-content .top-search-wrapper .icon-top-wrapper {
        margin: 0 !important;
        float: none !important;
        display: inline-block !important;
    }

    #sp-menu .sp-column .sp-module .sp-module-content .top-search-wrapper .icon-top-wrapper i {
        color: #222222 !important;
        font-size: 18px !important;
        cursor: pointer !important;
        padding: 10px !important;
        transition: color 0.3s ease !important;
    }

    #sp-menu .sp-column .sp-module .sp-module-content .top-search-wrapper .icon-top-wrapper i:hover {
        color: #f69322 !important;
    }
}

/* Medium Desktop / Tablet Landscape: 992px to 1199px (e.g. 1024px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .sp-megamenu-parent {
        margin-right: 40px !important;
    }

    .sp-megamenu-parent > li > a {
        padding: 0 9px !important;
        font-size: 13.5px !important;
        letter-spacing: 0.2px !important;
    }
}

/* --------------------------------------------------------------------------
   5. Tablet & Mobile Responsive Navigation (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    #sp-header {
        height: 75px !important;
    }

    #sp-header .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #sp-header .row {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #sp-logo {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 70% !important;
    }

    #sp-menu {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 30% !important;
        justify-content: flex-end !important;
    }

    #sp-menu .sp-column {
        width: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    #sp-header .logo a img,
    #sp-header .logo img {
        max-height: 52px !important;
    }

    /* Hide desktop megamenu */
    .sp-megamenu-parent {
        display: none !important;
    }

    /* Show offcanvas hamburger trigger */
    #sp-header #offcanvas-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 75px !important;
        line-height: 75px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        color: #222222 !important;
        font-size: 26px !important;
        cursor: pointer !important;
        transition: color 0.3s ease !important;
    }

    #sp-header #offcanvas-toggler:hover {
        color: #f69322 !important;
    }

    /* Hide search icon on small screens to prevent clutter */
    #sp-menu .sp-column .sp-module .sp-module-content .top-search-wrapper {
        display: none !important;
    }
}

/* Mobile Devices (< 768px, e.g. 390px) */
@media (max-width: 767px) {
    #sp-header {
        height: 68px !important;
    }

    #sp-header .logo a img,
    #sp-header .logo img {
        max-height: 44px !important;
    }

    #sp-header #offcanvas-toggler {
        height: 68px !important;
        line-height: 68px !important;
        font-size: 24px !important;
    }
}