/* ==========================================================================
   Mobile (burger) menu — restyle only, no markup change.
   .menu-fon is also the desktop nav bar, so every rule lives inside the same
   breakpoint where style.css turns it into the burger panel (≤1200px).
   Order inside the panel: language → navigation → phones.
   ========================================================================== */

@media only screen and (max-width: 1200px) {

    .menu-fon {
        --mm-asphalt: #2a2e33;
        --mm-concrete: #eceef0;
        --mm-line: #d5d9dd;
        --mm-steel: #5f676e;
        --mm-red: #fc3232;
        --mm-red-ink: #d4232a;
        --mm-display: "Fira Sans Extra Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;

        padding: 0 0 32px;
        color: var(--mm-asphalt);
    }

    /* style.css centres .menu-fon; in a scrolling column that pushes the top
       block out of reach, so start from the top. */
    .menu-fon.active {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* The panel has a fixed height (top/bottom 0), so without this the column
       flex would squash the blocks instead of letting the panel scroll. */
    .menu-fon.active > * {
        flex-shrink: 0;
    }

    /* Tagline + RO/RU. style.css stacks these at 100% width below 550px. */
    .menu-fon > .mob-menu-block:first-child {
        order: 1;
        flex-wrap: nowrap;
        align-items: center !important;
        gap: 12px;
        padding: 16px 16px;
        border-bottom: 1px solid var(--mm-line);
    }

    .menu-fon > .mob-menu-block:first-child > div:first-child {
        width: auto;
        min-width: 0;
    }

    .menu-fon > .mob-menu-block:first-child > .mob-menu-lang {
        width: auto;
    }

    .menu-fon > .mob-menu-block:first-child .tel {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: var(--mm-steel) !important;
        line-height: 1.35;
    }

    .menu-fon .mob-menu-lang {
        flex: none;
        padding: 3px;
        border: 1px solid var(--mm-line);
        border-radius: 999px;
        font-size: 14px;
    }

    .menu-fon .mob-menu-lang > * {
        display: inline-block;
        min-width: 40px;
        margin: 0 !important;
        padding: 5px 10px;
        border-radius: 999px;
        text-align: center;
        line-height: 1.2;
    }

    .menu-fon .mob-menu-lang .active {
        background: var(--mm-asphalt);
        color: #fff;
    }

    .menu-fon .mob-menu-lang a {
        color: var(--mm-steel) !important;
        text-decoration: none;
    }

    /* Navigation. */
    .menu-fon > .main-menu {
        order: 2;
        height: auto;
        padding: 0;
    }

    .menu-fon .main-menu > li {
        border-bottom: 1px solid var(--mm-line);
    }

    .menu-fon .main-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
        padding: 0 16px;
        line-height: 1.2;
        font-family: var(--mm-display);
        font-size: 22px;
        font-weight: 700;
        text-transform: none;
        color: var(--mm-asphalt);
    }

    .menu-fon .main-menu > li > a:hover,
    .menu-fon .main-menu > li > a:focus-visible {
        background: var(--mm-concrete);
        color: var(--mm-asphalt);
    }

    .menu-fon .main-menu > li > a.active {
        color: var(--mm-red-ink);
        box-shadow: inset 3px 0 0 var(--mm-red);
    }

    /* "Catalog" keeps its open state colours from style.css otherwise. */
    .menu-fon .main-menu li a.catalog,
    .menu-fon .main-menu li a.catalog:hover {
        background: transparent !important;
        color: var(--mm-asphalt) !important;
        margin: 0;
    }

    /* The "+" scripts.js appends becomes a chevron that flips when open. */
    .menu-fon .main-menu a .plus {
        float: none;
        width: 10px;
        height: 10px;
        margin: -4px 4px 0 0;
        font-size: 0;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s ease;
    }

    .menu-fon .main-menu a .plus.rot {
        margin-top: 6px;
        transform: rotate(-135deg);
    }

    /* Catalog groups: title, then the categories as tappable pills. */
    .menu-fon .sub-menu {
        padding: 4px 16px 20px;
    }

    .menu-fon .sub-menu > li {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px 0 0;
        border: 0;
        font-family: var(--mm-display);
        font-size: 17px;
        font-weight: 500;
        text-transform: none;
        color: var(--mm-steel);
    }

    /* Forces the pills onto the line below the group title (a bare text node). */
    .menu-fon .sub-menu > li::before {
        content: "";
        order: 1;
        flex-basis: 100%;
        height: 0;
    }

    .menu-fon .sub-menu > li > a {
        order: 2;
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--mm-line);
        border-radius: 999px;
        font-family: "Roboto", sans-serif;
        font-size: 15px;
        line-height: 1.2;
        color: var(--mm-asphalt);
    }

    .menu-fon .sub-menu > li > a:hover,
    .menu-fon .sub-menu > li > a.active {
        border-color: var(--mm-red);
        color: var(--mm-red-ink);
    }

    /* Phones: a contact block at the end, each number a full-width tap target. */
    .menu-fon > .mob-menu-block:nth-child(2) {
        order: 3;
        flex-direction: column;
        gap: 0;
        margin: 24px 16px 0;
        padding: 4px 16px !important;
        border: 0;
        border-radius: 8px;
        background: var(--mm-concrete);
    }

    .menu-fon > .mob-menu-block:nth-child(2) > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 52px;
        border-bottom: 1px solid var(--mm-line);
    }

    .menu-fon > .mob-menu-block:nth-child(2) > div:last-child {
        border-bottom: 0;
    }

    .menu-fon > .mob-menu-block:nth-child(2) .tel-title {
        font-size: 15px;
        color: var(--mm-steel);
    }

    .menu-fon > .mob-menu-block:nth-child(2) .tel,
    .menu-fon > .mob-menu-block:nth-child(2) .tel a {
        margin: 0;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--mm-asphalt) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-fon .main-menu a .plus {
        transition: none;
    }
}