/*
 * Header layout fix for the desktop menu (>= 1300px, i.e. above the burger
 * breakpoint).
 *
 * The original layout pins the "choose an apartment" button, the last menu
 * item and the language block with `position: absolute` at percentage offsets.
 * Those elements are out of flow, so the menu row that flows from the left can
 * slide underneath them: with long labels (Armenian) items end up hidden below
 * the orange button.
 *
 * Here the whole bar becomes one flex row instead: logo against the left
 * padding, the language block against the right one, and the menu in between.
 * Overlap becomes impossible regardless of how many items the menu has or how
 * long their labels are.
 *
 * Loaded as a standalone file from layouts/guest.blade.php so that nothing
 * depends on the Laravel Mix build.
 */

@media all and (min-width: 1300px) {
    /* Keep the bar off the window edges without relying on .container's own
       padding, which is 0 above 1500px. */
    header > .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    header > .container > nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    /* Logo hugs the left padding. */
    header .header-logo {
        margin-left: 0;
        margin-right: 0;
        flex-shrink: 0;
    }

    /* Everything else shares the remaining width and is pushed right. */
    header .menu_block {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    header .nav-main {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: flex-start;
    }

    /* Menu items stay left, right after the logo, as in the original design. */
    header .main_menu {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
    }

    /* Back into the flow: these three were the source of the overlap. */
    header .menu_block li:nth-last-of-type(2),
    header .menu_block li:nth-last-of-type(1),
    header .globus-lang {
        position: static;
        right: auto;
        bottom: auto;
        top: auto;
    }

    /* Tighter gaps between menu items to win back horizontal room. */
    header .main_menu_link {
        padding: 0 9px;
        white-space: nowrap;
    }

    /* The orange button keeps a comfortable box of its own. */
    /* `auto` pushes the button and the items after it to the right edge, and
       collapses to zero once the row runs out of slack — so tight widths pack
       together instead of overlapping. */
    header .menu_block li:nth-last-of-type(2) {
        margin: 0 4px 0 auto;
        padding: 12px 0 14px;
        flex-shrink: 0;
    }

    header .menu_block li:nth-last-of-type(2) .main_menu_link {
        padding: 0 18px;
    }

    header .menu_block li:nth-last-of-type(1) {
        margin-left: 6px;
        flex-shrink: 0;
    }

    /* Language + WhatsApp block sits against the right padding. */
    header .globus-lang {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: 22px;
        padding: 0;
    }

    header .header-whatsapp-icon {
        margin-right: 18px;
        margin-top: 0;
        display: flex;
        align-items: center;
    }
}

/*
 * Narrow end of the desktop range: the labels of the longest locale (Armenian)
 * only just fit, so gaps, type size and the outer padding all tighten a step.
 */
@media all and (min-width: 1300px) and (max-width: 1520px) {
    header > .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    header > .container > nav {
        gap: 12px;
    }

    header .main_menu_link {
        padding: 0 5px;
        font-size: 14px;
    }

    header .menu_block li:nth-last-of-type(2) .main_menu_link {
        padding: 0 13px;
    }

    header .menu_block li:nth-last-of-type(2) {
        margin: 0 2px 0 auto;
    }

    header .globus-lang {
        margin-left: 12px;
    }

    header .header-whatsapp-icon {
        margin-right: 12px;
    }
}