/*
 * Pływający przycisk telefonu na urządzeniach mobilnych.
 *
 * Prawy dolny róg jest zajęty przez przycisk powrotu na górę (bottom 60px,
 * right 60px), a lewy przez komunikat o plikach cookie. Przycisk telefonu
 * siada niżej i bliżej krawędzi, więc nie nachodzi na żaden z nich.
 *
 * Domyślnie ukryty. Pokazujemy go wyłącznie poniżej 768 pikseli szerokości,
 * bo na komputerze numer jest widoczny w nagłówku i w stopce.
 */

.cdx-tel-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    /* Selektor z klasą i pseudoklasami stanu, bo szablon ustawia kolor
       odsyłaczy regułą "html, body a:link", która ma wyższą specyficzność
       niż sama klasa i zabarwiała napis na kolor tła przycisku. */
    a.cdx-tel-mobile,
    a.cdx-tel-mobile:link,
    a.cdx-tel-mobile:visited,
    a.cdx-tel-mobile:hover,
    a.cdx-tel-mobile:active {
        color: #fff;
        text-decoration: none;
    }

    .cdx-tel-mobile {
        position: fixed;
        right: 14px;
        bottom: 14px;
        z-index: 99993;          /* nad komunikatem cookie, pod menu mobilnym */

        display: inline-flex;
        align-items: center;
        gap: 8px;

        /* wysokość i odstępy dają pole dotyku znacznie powyżej zalecanych 48px */
        min-height: 54px;
        padding: 0 20px 0 18px;

        /* ciemniejszy odcień firmowego błękitu: biel na #00a2dc daje kontrast
           2,9:1, czyli poniżej wymaganych 4,5:1. Poniższy daje 6,2:1. */
        background: #00688f;
        color: #fff;
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .28);

        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .01em;
        text-decoration: none;

        transition: background-color .18s ease, transform .18s ease;
    }

    .cdx-tel-mobile:hover,
    .cdx-tel-mobile:focus-visible {
        background: #005273;
        color: #fff;
        text-decoration: none;
    }

    .cdx-tel-mobile:active {
        transform: scale(.97);
    }

    .cdx-tel-mobile:focus-visible {
        outline: 3px solid #29407a;
        outline-offset: 3px;
    }

    .cdx-tel-mobile__ikona {
        display: inline-flex;
        align-items: center;
        font-size: 20px;
    }

    /* ikona jest maską SVG dziedziczącą kolor tekstu */
    .cdx-tel-mobile__ikona [class*="fa-"],
    .cdx-tel-mobile__ikona svg {
        width: 1em;
        height: 1em;
        background-color: currentColor;
    }

    /* na bardzo wąskich ekranach zostaje sama ikona */
    @media (max-width: 359.98px) {
        .cdx-tel-mobile {
            padding: 0;
            width: 54px;
            justify-content: center;
        }
        .cdx-tel-mobile__tekst {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }
    }

    /* Komunikat o plikach cookie zajmuje na telefonie prawie całą szerokość dołu,
       więc dopóki jest widoczny, przycisk siada nad nim. Po zamknięciu skrypt
       ustawia na banerze display:none i przycisk wraca na swoje miejsce. */
    body:has(.cookie:not([style*="display: none"])) .cdx-tel-mobile {
        bottom: 112px;
    }

    /* stopka dostaje zapas miejsca, żeby przycisk nie zasłaniał jej treści */
    body {
        padding-bottom: 74px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdx-tel-mobile {
        transition: none;
    }
    .cdx-tel-mobile:active {
        transform: none;
    }
}