/* ==========================================================================
   AUME – 13) Telefon v desktopové hlavičce                          [v1.02]
   Prokliknutelné telefonní číslo s otevírací dobou pod ním, do prázdného
   místa mezi hodnocením a košíkem (viz 13-telefon-v-hlavicce.js).

   ========================================================================== */

:root {
    --aume-htel-ico: #CFB388;
    /* champagne akcent webu */
    --aume-htel-text: #222222;
    /* barva textu webu */
    --aume-htel-hover: #B1904F;
    /* champagne ztmavená, aby byl hover znát */
    --aume-htel-sub: #6B6B6B;
    /* šedá podtitulku, stejná jako u hodnocení v souboru 01 */
}

.aume-htel {
    display: none !important;
}

@media (min-width: 768px) {

    /* --- Ochrana košíku ---------------------------------------------------- */

    .navigation-buttons .cart-count {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .aume-htel {
        display: inline-flex !important;
        /* dva řádky pod sebou: číslo, pod ním otevírací doba */
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        /* 0 1 auto – kdyby se lišta přece jen nevešla, ať se blok umí zúžit
           dřív, než šablona začne lámat řádek */
        flex: 0 1 auto;
        min-width: 0;
        /* margin i padding s !important: šablona dává odkazům v .navigation-buttons
           vlastní odsazení a bez přebití by číslo odskočilo od košíku o 40 px */
        margin: 0 16px 0 0 !important;
        padding: 0 !important;
        font-family: "Red Hat Display", sans-serif;
        /* !important i tady – šablona má na odkazy v liště 20px pravidlo
           s vyšší specificitou; bez toho by číslo bylo o dva stupně větší
           než popisek košíku vedle něj */
        font-size: 16px !important;
        font-weight: 400;
        /* !important: šablona dává odkazům v liště line-height: 50px, aby se
           svisle vystředily. U jednořádkového textu to nevadí, ale při dvou
           řádcích je každý z nich vysoký 50 px – číslo vyjede nad blok
           a doba pod něj, mezi nimi 50 px prázdna. */
        line-height: 1.15 !important;
        white-space: nowrap;
        text-decoration: none !important;
        color: var(--aume-htel-text) !important;
        transition: color .15s ease;
    }

    /* Otevírací doba. Menší a šedá stejně jako podtitulek u hodnocení vedle,
       ať spolu ty dva bloky ladí a doba nesoupeří s číslem.
       Barvu má vlastní, aby na ni neplatil hover – ten patří číslu. */
    .aume-htel__hodiny {
        font-size: 11px;
        color: var(--aume-htel-sub);
    }

    .aume-htel:hover,
    .aume-htel:focus-visible {
        color: var(--aume-htel-hover) !important;
        text-decoration: none !important;
    }

    .aume-htel:focus-visible {
        outline: 2px solid var(--aume-htel-ico);
        outline-offset: 3px;
        border-radius: 4px;
    }


}

/* --- Užší okna: 768 až 991 px ------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {

    .aume-htel__pred {
        display: none;
    }

    .aume-htel {
        margin-right: 12px !important;
    }
}