/* CM Klara navigation v14 — desktop full-bleed isolation for Visual Composer headers. */

@media (min-width: 1025px) {
    /*
     * The shortcode can live inside a constrained VC/header column.  The visible
     * desktop strip must still span the viewport, while its inner list remains
     * centred and capped.  The standard full-bleed formula keeps the shortcode's
     * document position without depending on the parent column width.
     */
    .cmk-nav:not(.cmk-nav--fixed) {
        overflow: visible !important;
    }

    .cmk-nav:not(.cmk-nav--fixed) > .cmk-nav__desktop {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        overflow: visible !important;
    }

    /* Sticky navigation is already portalled to body; keep it viewport-safe. */
    .cmk-nav.cmk-nav--fixed,
    .cmk-nav.cmk-nav--fixed > .cmk-nav__desktop {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
    }

    /*
     * Hard reset for flex items.  Some header/VC themes apply generic widths,
     * floats or flex-grow to menu list items; those rules made one CMK item
     * consume most of the bar when the shortcode was placed in the real header.
     */
    .cmk-nav .cmk-nav__root {
        width: min(1240px, calc(100% - 32px)) !important;
        max-width: 1240px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        float: none !important;
        overflow: visible !important;
    }

    .cmk-nav .cmk-nav__root > .cmk-nav__root-item {
        position: relative !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: none !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
    }

    .cmk-nav .cmk-nav__root > .cmk-nav__root-item.is-mega {
        position: static !important;
    }

    .cmk-nav .cmk-nav__root > .cmk-nav__root-item.is-search {
        width: 96px !important;
        flex: 0 0 96px !important;
    }

    .cmk-nav .cmk-nav__root > .cmk-nav__root-item.is-search-open {
        width: 320px !important;
        flex: 0 0 320px !important;
    }

    .cmk-nav .cmk-nav__root-link {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        float: none !important;
        white-space: nowrap !important;
    }

    /* Mega dropdown is positioned against the full-width desktop strip. */
    .cmk-nav .cmk-nav__mega {
        left: 50% !important;
        right: auto !important;
        width: min(1280px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        transform: translate(-50%, 4px) !important;
        overflow: visible !important;
    }

    .cmk-nav .cmk-nav__root-item:hover > .cmk-nav__mega,
    .cmk-nav .cmk-nav__root-item:focus-within > .cmk-nav__mega,
    .cmk-nav .cmk-nav__root-item.is-open > .cmk-nav__mega {
        transform: translate(-50%, 0) !important;
    }

    /* Keep ordinary submenus anchored to their own root item. */
    .cmk-nav .cmk-nav__root-item:not(.is-mega) > .cmk-nav__submenu {
        left: 0 !important;
        right: auto !important;
        width: auto !important;
        min-width: 285px !important;
        max-width: min(420px, calc(100vw - 32px)) !important;
    }
}