/* ==========================================================================
   AUME – 6) Hlavní menu bez problikávání                            [v1]

   Shoptet vyrenderuje na serveru všech 9 položek hlavního menu a teprve
   potom je v bundlu main-3g.js funkce shoptet.menu.splitMenu(), která změří
   pravou hranu každé položky proti levé hraně tlačítka "Více" a přetečeným
   přidá třídu .splitted (v šabloně = visibility: hidden). Na konci si na
   #navigation přidá třídu .visible.

   Do té chvíle jsou vidět všechny – a to je to problikávání. Naměřeno na
   /bestsellery/:
       rychlý desktop                     ~840 ms
       4× zpomalené CPU, 1,6 Mbps        ~5 500 ms   (reálný mobil)

   Řešení: schováme dopředu ten "ocas", který stejně spadne do "Více", a to
   přesně do chvíle, než si Shoptet přidá .visible. Menu tak naskočí rovnou
   v konečné podobě – viditelné položky hned, zbytek se neukáže vůbec.

   PROČ NE ČASOVAČ: pevné dvě sekundy by na pomalém mobilu položky odkryly
   dřív, než Shoptet doměří (5,5 s), a on by je vzápětí zase schoval –
   problik by se vrátil, jen později. Třída .visible je přesně ten okamžik,
   kdy je bezpečné je pustit.

   PROČ visibility A NE display: .splitted v šabloně používá visibility,
   protože splitMenu() počítá s tím, že si položky drží své rozměry.
   Ověřeno, že naše závora Shoptetu měření nerozbije:
       jQuery ":visible" napočítá 9 z 9 položek
       splitted bez závory: 4, se závorou: 4  → identické

   POZOR PŘI ZMĚNĚ MENU: čísla níž platí pro současný obsah hlavního menu.
   Když přibude, ubude nebo se přejmenuje položka, je potřeba přeměřit,
   kolik se jich na které šířce vejde – jinak může jedna zase probliknout.
   ========================================================================== */

/* Naměřeno (desktopové menu začíná na 768 px, navigation_breakpoint = 767):

       768–991 px    vejdou se 3   → schovat od 4. položky
       992–1199 px   vejdou se 4   → schovat od 5. položky
       1200 px a víc vejde se 5    → schovat od 6. položky

   Nad 1200 px se to už nemění ani na 2560 px – kontejner menu je shora
   omezený, širší monitor nepomůže.

   Míříme na pozici, ne na konkrétní kategorie: Shoptet vždycky ořezává od
   konce, takže se pravidlo samo přizpůsobí i po přeskládání menu. */

@media (min-width: 768px) {
    #navigation:not(.visible) .menu-level-1 > li:nth-child(n+4) {
        visibility: hidden;
    }
}

@media (min-width: 992px) {
    #navigation:not(.visible) .menu-level-1 > li:nth-child(4) {
        visibility: visible;
    }
}

@media (min-width: 1200px) {
    #navigation:not(.visible) .menu-level-1 > li:nth-child(5) {
        visibility: visible;
    }
}

/* --- Pojistka ------------------------------------------------------------
   Kdyby se Shoptetu JS nespustil (chyba, blokátor, výpadek CDN), třída
   .visible by nikdy nepřišla. Bez pojistky by položky zůstaly schované
   natrvalo – a protože tlačítko "Více" je do té doby taky skryté
   (.menu-helper.visible{visibility:visible}), byly by ty kategorie úplně
   nedostupné.

   Animace s nulovou délkou a odloženým startem je odkryje po 10 s. Deset
   sekund je s rezervou za nejpomalejším naměřeným během (5,5 s), takže při
   běžném provozu se k slovu nikdy nedostane. Jakmile .visible dorazí,
   pravidlo přestane platit i s animací. */

@media (min-width: 768px) {
    #navigation:not(.visible) .menu-level-1 > li {
        animation: aume-nav-pojistka 0s linear 10s forwards;
    }
}

@keyframes aume-nav-pojistka {
    to {
        visibility: visible;
    }
}