/* Phone / tablet menu (< 1024px): the links as buttons in two columns, so every item fits on one screen without scrolling
   (client change list, 28 Oct 2026). Loaded after style.css by app/layout/layout.php. */

@media (max-width: 1023px) {
    .header__navbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-content: start;
        padding: 0 0 16px;
    }

    .header__navbar > .header__link,
    .header__navbar > .header__dropdown-box > .header__label {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        margin: 0 !important;
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 8px;
        background: rgba(6, 22, 84, .55);
        color: var(--cl-white);
        font-size: 16px;
        line-height: 1.2;
        text-align: center;
    }
    .header__navbar > .header__link:hover,
    .header__navbar > .header__dropdown-box > .header__label:hover {
        border-color: var(--cl-yellow);
        color: var(--cl-yellow);
    }

    /* "Countries" is a button too; open, its list takes the full width */
    .header__navbar > .header__dropdown-box { margin: 0; }
    .header__navbar > .header__dropdown-box:has(input:checked) { grid-column: 1 / -1; }
    .header__navbar > .header__dropdown-box:has(input:checked) .header__dropdown { margin-top: 8px; }
}