/* PRQNO – jen vycentrování menu ve STÁVAJÍCÍM (nativním) headeru Shoptetu.
   Header-Footer/header.js se NEPOUŽÍVÁ (na přání zákazníka zůstává starý
   vzhled headeru beze změny) — tohle je jediná úprava: vycentrovat
   #navigation .menu-level-1, nic jiného na headeru se nemění.

   DŮLEŽITÉ: nativně je #navigation na mobilu (max-width:767px, viz
   main-13.less) skryté zasouvací "off-canvas" menu (position:fixed;
   width:0, otevře se přes hamburger na width:100%). Centrovací
   display:flex!important bez media query tohle rozbilo (menu bylo
   pořád "otevřené"/flex, ukazovalo i věci jako Přihlášení, co má být
   schované) — proto je teď všechno tady zabalené v
   @media (min-width:768px), na mobilu je #navigation 100% nativní. */
@media (min-width:768px){
  #navigation .navigation-in{
    display:flex!important;
    justify-content:center!important;
    width:100%!important;
  }
  #navigation .menu-level-1{
    display:flex!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
  }

  /* Rozbalovací "mega menu" panel (najetí na Nábytek apod.) — zaoblit
     jen spodní dva rohy, nahoře navazuje přímo na lištu menu. */
  #navigation .menu-level-2{
    border-bottom-left-radius:16px!important;
    border-bottom-right-radius:16px!important;
    overflow:hidden!important;
  }
}

/* Mobil — otevřené fullscreen hamburger menu: položky (Nábytek,
   Zakázková výroba, Pro firmy, Blog, O nás) nativně zabírají jen
   tolik místa, kolik potřebuje jejich text (zarovnané doleva nahoře),
   zbytek obrazovky zůstává prázdný. Roztaženo na celou výšku a
   vycentrováno, ať je snadné trefit položku kdekoliv na obrazovce. */
@media (max-width:767px){
  #navigation .menu-level-1{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
  }
  #navigation .menu-level-1 > li{
    flex:1 1 0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
  #navigation .menu-level-1 > li > a{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:22px!important;
  }
  /* Rozbalené "Nábytek" (submenu s kategoriemi) — vrátit na sloupec,
     ať kategorie vyjedou POD odkazem, ne vedle něj (to by udělalo
     výše zarovnání "na řádek", co platí pro zavřený stav). Přestává
     mít pevný 1/5 podíl výšky, ať se přizpůsobí opravdu dlouhému
     seznamu kategorií. */
  #navigation .menu-level-1 > li.ext.exp{
    flex:none!important;
    flex-direction:column!important;
    height:auto!important;
  }
}

/* Detail do tmavé lišty headeru — SKUTEČNÉ letokruhy (soustředné,
   mírně nepravidelné kruhy jako na řezu dřeva — viz
   Header-Footer/obrazky/letokruhy.svg), ne vlnky. 6 kousků různých
   velikostí PO CELÉ LIŠTĚ, každý na jiné vodorovné I SVISLÉ pozici,
   ať to působí náhodně rozmístěné, ne jako řada na jedné lince.
   Jemný stín pod lištou pro trochu hloubky. */
#header .header-top{
  background-image:
    url("/user/documents/Scripts/novy-web/Header-Footer/obrazky/letokruhy.svg"),
    url("/user/documents/Scripts/novy-web/Header-Footer/obrazky/letokruhy.svg"),
    url("/user/documents/Scripts/novy-web/Header-Footer/obrazky/letokruhy.svg"),
    url("/user/documents/Scripts/novy-web/Header-Footer/obrazky/letokruhy.svg"),
    url("/user/documents/Scripts/novy-web/Header-Footer/obrazky/letokruhy.svg"),
    url("/user/documents/Scripts/novy-web/Header-Footer/obrazky/letokruhy.svg") !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position:
    -110px 15%,
    14% 82%,
    34% 8%,
    58% 68%,
    80% 25%,
    calc(100% + 100px) 78% !important;
  background-size:
    260px 260px,
    120px 120px,
    170px 170px,
    140px 140px,
    155px 155px,
    220px 220px !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.12) !important;
}

/* Mobil — 6 kruhů ve stejné velikosti jako na desktopu by na úzké
   liště vypadalo přeplácaně. Redukováno na 3 menší, proporčně
   zmenšené kousky. */
@media (max-width:767px){
  #header .header-top{
    background-image:
      url("/user/documents/Scripts/novy-web/Header-Footer/obrazky/letokruhy.svg"),
      url("/user/documents/Scripts/novy-web/Header-Footer/obrazky/letokruhy.svg"),
      url("/user/documents/Scripts/novy-web/Header-Footer/obrazky/letokruhy.svg") !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position:
      -50px 20%,
      50% 85%,
      calc(100% + 45px) 30% !important;
    background-size:
      120px 120px,
      75px 75px,
      100px 100px !important;
  }
}

/* Desktop — stejné "schovat při scrollu dolů, ukázat při scrollu
   nahoru" chování, jaké header nativně má JEN na mobilu (do 767px).
   Shoptet už sám přepíná třídy "scrolled-down"/"scrolled-up" na
   <html> úplně všude na webu (viz main-3g.js) — jen mu chybí tohle
   CSS pravidlo nad 768px, aby to mělo vizuální efekt. Position:sticky
   (ne fixed) záměrně — chová se v layoutu normálně, dokud se
   nedostane na horní hranu obrazovky, takže nikde nemusíme dopočítávat
   žádný kompenzační odstup obsahu stránky (na rozdíl od position:fixed).

   OPRAVA (1. pokus rozbil celý web — nešlo nikam kliknout, všechno
   ztmavené): position:sticky + JAKÝKOLIV vlastní z-index na #header
   založí nový "stacking context" — nativní rozbalovací menu "Nábytek"
   (mega-menu) si při najetí myší nastavuje z-index:1003 na #navigation,
   aby přebilo tmavý podklad za sebou (ten má z-index:1002) — jenže
   tahle hodnota 1003 pak platí jen DOVNITŘ #header, ne navenek. Zvenku
   (z pohledu zbytku stránky) celý #header i s menu uvnitř reprezentuje
   jen ten náš nižší z-index (měl jsem 56) — takže tmavý podklad
   (1002, mimo #header) se vykreslil NAD celým headerem i menu a
   blokoval úplně všechny kliky na webu. Řešeno tak, že #header dostal
   z-index vyšší než ten tmavý podklad (1002) — ověřeno živým testem
   (Playwright): s tímhle vyšším z-index se dá na položky menu znovu
   normálně najet i kliknout, tmavý podklad zůstává tam, kam patří
   (pod menu, ne nad ním).

   DOLADĚNÍ: position:sticky/vyšší z-index se aplikuje jen POTÉ, co se
   od úplného vrcholu stránky skutečně odscrolluje (třída "scrolled" na
   <html>) — ne pořád. Shoptet sám tuhle třídu přidává, jakmile
   window.scrollY přesáhne malý práh nad 0, a úplně ji zase odebere,
   jakmile se vrátíte zpátky navrch (viz main-3g.js) — takže header má
   nahoře na stránce svoje úplně původní, nedotčené chování/z-index, a
   sticky + vyšší z-index se zapne jen ve chvíli, kdy by header jinak
   zmizel ze zobrazení nahoře. */
@media (min-width:768px){
  html.scrolled #header{
    position:sticky !important;
    top:0;
    z-index:1010;
    transition:transform .15s;
  }
  .scrolled-down body:not(.ordering-process):not(.search-window-visible) #header{
    transform:translateY(-100%);
  }
}