/* ==========================================================================
   AUME – 12) Mobilní menu: menší písmo + telefon s fotkou dole
   Zmenší písmo položek, aby v panelu zbylo místo, a nastyluje telefonní
   blok, který na konec menu vkládá 12-mobilni-menu.js.
   Platí jen do 767 px – nad tím je menu vodorovná lišta a lupa/hamburger
   se vůbec nezobrazují.
   ========================================================================== */

/* --- Menší písmo položek ------------------------------------------------- */
/* Výšku položky nedělá line-height, ale odsazení uvnitř <b> (resp. <span>),
   které šablona nastavuje na 20px nahoře i dole. 18px + 2×20px = 58 px.
   S 15px a 13px odsazením vyjde 44 px, na deseti položkách je to 140 px
   místa navíc. Rozpal zmenšujeme z 0,09em na 0,07em, aby verzálky při
   menším stupni nepůsobily roztrhaně.
   Pravidla mají stejnou specificitu jako ta v custom.css, takže vyhrávají
   jen díky pořadí – tento soubor musí být v hlavičce až za custom.css. */
@media (max-width: 767px) {

    .navigation-in>ul>li>a {
        font-size: 15px;
    }

    .navigation-in>ul>li>a>b,
    .navigation-in>ul>li>a>span {
        padding-top: 13px;
        padding-bottom: 13px;
        letter-spacing: .07em;
    }

    /* rozbalené podmenu */
    .navigation-in ul.menu-level-2 a {
        font-size: 14px;
    }

    .navigation-in ul.menu-level-2 li a {
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    /* spodní řádky CZK / jazyk / přihlášení */
    #navigation .navigationActions>li>a {
        font-size: 14px;
    }

    #navigation .navigationActions {
        margin-bottom: 16px !important;
    }
}

/* --- Telefon s fotkou na konci menu -------------------------------------- */
/* Blok vkládá JS jako poslední prvek .navigation-in. Na desktopu je
   .navigation-in vodorovná lišta, tam blok nemá co dělat – proto je skrytý
   napevno a zobrazuje se až v mobilní šířce.

   Fotka je background-image, ne <img>: je čistě dekorativní, nepotřebuje
   alt a takhle se nedostane do žádného lazy-loadingu šablony. Soubor je
   zmenšená kopie help-avatar1.png (144 px, ~30 kB) – originál má 1131 px
   a 1 MB, což by se na mobilu stahovalo na každé stránce zbytečně. */
.aume-tel {
    display: none;
}

@media (max-width: 767px) {

    .aume-tel {
        display: block;
        margin: 8px 20px 24px;
        padding-left: 60px;
        min-height: 48px;
        background: url("/user/documents/upload/assets/help-avatar1.png") no-repeat left center / 48px 48px;
        line-height: 1.3;
        text-decoration: none !important;
    }

    .aume-tel__cislo {
        display: block;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: .01em;
        color: #222222;
    }

    .aume-tel__hodiny {
        display: block;
        font-size: 12px;
        color: #6B6B6B;
    }

    .aume-tel:hover .aume-tel__cislo,
    .aume-tel:focus-visible .aume-tel__cislo {
        color: #CFB388;
        /* champagne akcent webu */
    }

    .aume-tel:focus-visible {
        outline: 2px solid #CFB388;
        outline-offset: 2px;
    }
}