:root {
    --width-step-1: 72rem;
    --width-step-2: 48rem;
    --width-step-3: 38rem;
    --width-step-4: 32rem;
    --width-step-5: 26rem;
    --width-step-6: 22.5rem;

    --block-padding-x-step-1: 3rem;
    --block-padding-x-step-2: 3rem;
    --block-padding-x-step-3: 3rem;
    --block-padding-x-step-4: 3rem;
    --block-padding-x-step-5: 1rem;
    --block-padding-x-step-6: 1rem;

    /* vaikimisi aktiivne aste */
    --max-width: var(--width-step-1);
    --block-padding-x: var(--block-padding-x-step-1);
}

/* 1→2 */
@media (max-width: 78rem) {
    :root {
        --max-width: var(--width-step-2);
        --block-padding-x: var(--block-padding-x-step-2);
    }
    .header-brand__logo-link { flex: 0 0 auto; }
    .header-brand__info { flex: 0 1 auto; margin-left: auto; padding-left: 0; }
}

/* 2→3 */
@media (max-width: 54rem) {
    :root {
        --max-width: var(--width-step-3);
        --block-padding-x: var(--block-padding-x-step-3);
    }
}

/* 3→4 */
@media (max-width: 44rem) {
    :root {
        --max-width: var(--width-step-4);
        --block-padding-x: var(--block-padding-x-step-4);
    }
}

/* 4→5 */
@media (max-width: 38rem) {
    :root {
        --max-width: var(--width-step-5);
        --block-padding-x: var(--block-padding-x-step-5);
    }
    .nav__item--home { display: none; }   /* logo täidab Avalehe nupu rolli */
}

/* 5→6 */
@media (max-width: 32rem) {
    :root {
        --max-width: var(--width-step-6);
        --block-padding-x: var(--block-padding-x-step-6);
    }
    /* tekstikast kitsam (pikk aadress murdub mitmele reale) ja paremasse äärde.
       flex:0 1 auto + margin-left:auto (78rem astmest) lükkab kasti vastu
       paremat äärt. Tekst ise jääb kasti sees vasakule joondatuks.

       width: min-content — kast kahaneb sisu järgi, kõige pikema murdmatu sõna
       (praegu "info@contactus.ee" ≈ 8.5rem) laiuseks. Ette antud laius (varem
       13rem) ei tööta: CSS ei mõõda kunagi ümber, kui lai murtud tekst
       TEGELIKULT on, nii et pikim päris rida jäi kastist kitsamaks ja paremale
       tekkis nähtav lünk. max-width jääb turvapiiriks, kui mõni sõna kasvab. */
    .header-brand__info {
        width: min-content;
        max-width: 13rem;
        flex: 0 1 auto;
        text-align: left;
    }
}