/**
 * Header listing search layout — loaded LAST in layouts/frontend.blade.php
 *
 * Intermittent broken header (search drops to a second row): style.css sets
 * .mainmenu { display:flex; flex-wrap:wrap }. When the grid rules below fail
 * to apply (narrow desktop, cache, resize), megamenu + search wrap — search
 * spans full width and looks "centered" below logo/actions. Grid + nowrap fixes it.
 */

@media (min-width: 992px) {
    .haeder-default .header-inner {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .haeder-default .header-left .mainmenu-nav {
        flex-direction: row !important;
        align-items: center !important;
    }

    /* [ All categories (auto) | Search (fills rest) ] — single row, never flex-wrap */
    .haeder-default .header-left .mainmenu-nav .mainmenu {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 0 8px;
        flex-wrap: nowrap !important;
    }

    .haeder-default .header-left .mainmenu-nav .mainmenu > li.with-megamenu {
        flex: unset !important;
        width: auto !important;
        max-width: none !important;
        grid-row: 1 !important;
    }

    .haeder-default .header-left .mainmenu-nav .mainmenu > li.sq-mainmenu-search-item {
        flex: unset !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        grid-row: 1 !important;
    }

    .haeder-default .header-left .mainmenu-nav .mainmenu > li.sq-mainmenu-search-item > .sq-header-search-with-icon {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        align-self: center !important;
    }

    .haeder-default .header-left .mainmenu-nav .mainmenu > li.sq-mainmenu-search-item .sq-header-search-input-wrap {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* ID beats stray theme rules on input[type=search] */
#sq-listing-search-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* RTL: keep megamenu at outer edge, search still grows — swap columns */
@media (min-width: 992px) {
    [dir="rtl"] .haeder-default .header-left .mainmenu-nav .mainmenu {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    [dir="rtl"] .haeder-default .header-left .mainmenu-nav .mainmenu > li.with-megamenu {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    [dir="rtl"] .haeder-default .header-left .mainmenu-nav .mainmenu > li.sq-mainmenu-search-item {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
}

/* 992–1199: theme shrinks .header-left to 35% — keep full flex growth from custom.css */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .haeder-default .header-left {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }

    .haeder-default .header-right.sq-header-actions {
        flex: 0 0 auto !important;
    }
}