/* ==========================================================================
   CCI Custom Overrides
   ==========================================================================
   Only layout behaviour the template can't handle natively and site-specific
   design choices. Logo sizing, header height, and sticky behaviour are all
   controlled by template parameters — nothing here overrides those.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Header row: never wrap (logo + menu stay side-by-side)
   -------------------------------------------------------------------------- */

#sp-header .container-inner > .row {
    flex-wrap: nowrap !important;
}

/* Use full viewport width below xl to avoid the Bootstrap container
   snapping from 1140px → 960px and cramping the menu. */
@media (max-width: 1399px) {
    #sp-header > .container,
    #sp-header .container {
        max-width: 100% !important;
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* --------------------------------------------------------------------------
   2. Menu: never wrap, large font that shrinks only when constrained
   -------------------------------------------------------------------------- */

.sp-megamenu-parent,
.sp-megamenu-parent > li {
    white-space: nowrap;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    white-space: nowrap;
    font-size: 18px !important;
    font-weight: 500;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

@media (max-width: 1399px) {
    .sp-megamenu-parent > li > a,
    .sp-megamenu-parent > li > span {
        font-size: 16px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .sp-megamenu-parent > li > a,
    .sp-megamenu-parent > li > span {
        font-size: 14px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    #sp-header #sp-menu .sp-megamenu-wrapper,
    #sp-header #sp-menu .sp-megamenu-parent {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    #sp-header #sp-menu .sp-megamenu-parent > li {
        flex: 0 0 auto;
    }
}


/* --------------------------------------------------------------------------
   3. Responsive: offcanvas below lg (992px), mega-menu at lg+
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    #sp-header #sp-menu .sp-megamenu-wrapper,
    #sp-header #sp-menu nav,
    #sp-header #sp-menu .sp-megamenu-parent,
    #sp-header .header-modules {
        display: none !important;
    }

    #sp-header #offcanvas-toggler,
    #sp-header .offcanvas-toggler-custom,
    #sp-header .offcanvas-toggler-secondary {
        display: inline-flex !important;
        align-items: center !important;
    }
}


/* --------------------------------------------------------------------------
   4. Logo deduplication
   --------------------------------------------------------------------------
   Helix renders renderFeature() AND a jdoc module include at the "logo"
   position. Hide anything after the primary .logo in the sp-column.       */

#sp-header #sp-logo > .sp-column > *:not(.logo),
#sp-header #sp-logo > .sp-column > .logo ~ * {
    display: none !important;
}

/* Last-resort fallback: hide duplicate logos, but preserve the mobile logo
   (.logo-image-phone) which is a legitimate second <img> inside the <a>. */
#sp-header .logo a img.logo-image ~ img.logo-image,
#sp-header .logo a img.logo-sticky ~ img.logo-sticky {
    display: none !important;
}