/* ==========================================================================
   MEDZIPREHLIADAČOVÉ ZJEDNOTENIE (bod 10 zadania)
   ==========================================================================
   Všetky odchýlky medzi prehliadačmi na jednom mieste - Safari, Chrome,
   Firefox, Opera, Edge aj prehliadače na Linuxe.

   Prečo samostatný modul a nie roztrúsené v ostatných súboroch:
   keď sa o rok objaví hlásenie "v Safari to vyzerá inak", odpoveď na otázku
   "čo všetko kvôli prehliadačom robíme" je v jednom súbore. Zamiešané medzi
   bežné pravidlá sa takéto veci nedajú nájsť ani auditovať.

   Načítava sa HNEĎ ZA base.css - normalizuje správanie prehliadača ešte pred
   tým, než sa nanesú pravidlá layoutu a komponentov.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VEĽKOSŤ TEXTU NA MOBILE (iOS Safari)
   --------------------------------------------------------------------------
   iOS Safari po otočení telefónu do šírky sám zväčší text, aby "lepšie
   vyplnil" obrazovku. Layout sa tým rozsype a vyzerá to ako chyba v CSS,
   pritom je to správanie prehliadača. Vypína sa takto.

   Ponechaný aj neprefixovaný zápis - Chrome a Edge ho už podporujú.
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   2. FORMULÁROVÉ PRVKY DEDIA PÍSMO
   --------------------------------------------------------------------------
   Safari a Firefox NEDEDIA font-family na <button>, <input>, <select>
   a <textarea> - vykreslia ich systémovým písmom prehliadača. Tlačidlo
   "Do košíka" tak má v Safari iné písmo než zvyšok stránky.

   Toto je najčastejšia príčina toho, že "v Safari to vyzerá inak".
   -------------------------------------------------------------------------- */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    /* Safari dáva formulárovým prvkom vlastné okraje. */
    margin: 0;
}

/* --------------------------------------------------------------------------
   3. VIDITEĽNÝ FOKUS PRI OVLÁDANÍ KLÁVESNICOU
   --------------------------------------------------------------------------
   TOTO NIE JE KOZMETIKA. Bez toho človek, ktorý sa po e-shope pohybuje
   tabulátorom, nevidí, na ktorom prvku stojí - a nákup sa dokončiť nedá.
   Týka sa to aj čítačiek obrazovky a je to jedna z požiadaviek WCAG.

   :focus-visible namiesto :focus je podstatné: prehliadač obrámuje prvok len
   pri ovládaní klávesnicou, nie po kliknutí myšou. Rámik okolo práve
   kliknutého tlačidla väčšina zadávateľov považuje za chybu dizajnu, takže
   samotné :focus by skončilo tým, že to niekto vypne úplne.

   Prvé pravidlo je záloha pre staršie prehliadače bez :focus-visible; druhé
   ju v moderných zruší a nahradí presnejším správaním.
   -------------------------------------------------------------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Moderné prehliadače: fokus len z klávesnice. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. FIREFOX - VNÚTORNÝ RÁMIK TLAČIDIEL
   --------------------------------------------------------------------------
   Firefox pridáva tlačidlám a odosielacím vstupom vnútorný rámik s odsadením,
   ktorý sa objaví až po kliknutí. Vyzerá to ako preblik.
   -------------------------------------------------------------------------- */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* --------------------------------------------------------------------------
   5. VYHĽADÁVACIE POLE (Safari)
   --------------------------------------------------------------------------
   Safari vykresľuje input[type="search"] ako natívne pole so zaoblenými
   rohmi, vlastným vnútorným odsadením a krížikom na vymazanie - a ignoruje
   pritom border-radius z nášho CSS. V hlavičke to znamená, že pole nesedí
   s tlačidlom "Hľadať" hneď vedľa neho.
   -------------------------------------------------------------------------- */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    /* Safari inak nerešpektuje výšku danú paddingom. */
    box-sizing: border-box;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* --------------------------------------------------------------------------
   6. ROZBAĽOVACÍ ZOZNAM
   --------------------------------------------------------------------------
   <select> vykresľuje každý prehliadač inak - Safari zaoblene a s gradientom,
   Firefox s vlastnou šipkou, Chrome inak. Zjednotenie znamená vypnúť natívny
   vzhľad a nakresliť šipku sami.

   Šipka je vložená ako data URI s SVG, aby nevznikla ďalšia HTTP požiadavka
   a aby fungovala aj bez prístupu na internet.

   padding-right musí byť dosť veľký, aby text nešiel pod šipku.
   -------------------------------------------------------------------------- */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    padding-right: 32px;
    background-color: var(--color-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23656d76' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;

    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    padding-left: var(--space-3);
}

/* Firefox pridáva vybranej položke bodkovaný rámik. */
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--color-text);
}

/* --------------------------------------------------------------------------
   7. ČÍSELNÉ POLIA
   --------------------------------------------------------------------------
   Prehliadače pridávajú číselným poliam šipky na krokovanie. Vo filtri ceny
   a pri počte kusov zaberajú miesto a v úzkych poliach prekryjú hodnotu.

   Vypína sa to inak vo WebKite a inak vo Firefoxe.
   -------------------------------------------------------------------------- */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   8. SKRÁTENIE TEXTU NA DVA RIADKY
   --------------------------------------------------------------------------
   Názov produktu na karte sa skracuje na dva riadky. Robí to zatiaľ len
   prefixovaná vlastnosť -webkit-line-clamp (ktorú však podporujú aj Firefox
   a Edge), takže sa dopĺňa neprefixovaný zápis pre budúcnosť.
   -------------------------------------------------------------------------- */
.product-card .name {
    line-clamp: 2;
}

/* --------------------------------------------------------------------------
   9. DOTYKOVÉ OVLÁDANIE
   --------------------------------------------------------------------------
   Mobilné WebKit prehliadače pri klepnutí zablikajú šedý prekryv. Pri kartách
   produktov to pôsobí ako chyba.
   -------------------------------------------------------------------------- */
a,
button,
label,
[role="button"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* --------------------------------------------------------------------------
   10. LEPKAVÁ HLAVIČKA A ODKAZY NA KOTVY
   --------------------------------------------------------------------------
   Hlavička je position: sticky. Bez tohto by odkaz na kotvu posunul cieľ presne
   pod hlavičku, takže by ho hlavička prekryla.

   Boli tu natvrdo napísané 140 px, čo bol odhad výšky hlavičky.
   --vyska-hlavicky drží jej skutočnú nameranú hodnotu (viď base.css).
   -------------------------------------------------------------------------- */
:target {
    scroll-margin-top: calc(var(--vyska-hlavicky) + var(--space-5));
}

/* --------------------------------------------------------------------------
   11. OBMEDZENIE ANIMÁCIÍ
   --------------------------------------------------------------------------
   Kto si v systéme zapne "obmedziť pohyb" (kvôli nevoľnosti z animácií alebo
   vestibulárnym poruchám), nemá dostať naše prechody. Rešpektujú to všetky
   moderné prehliadače vrátane Safari.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   12. TLAČ
   --------------------------------------------------------------------------
   Zákazníci si tlačia potvrdenie objednávky. Bez tohto sa vytlačí aj
   navigácia, filtre a pätička - a potvrdenie zaberie tri strany.
   -------------------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .filters,
    .sort-form,
    .btn {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    /* Odkazy v tlači nie sú klikateľné, takže sa vypíše ich adresa. */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 11px;
    }
}