/* ═══════════════════════════════════════════════════════════════════
   MOBILNÍ MENU — příkaz č. 187, výhrada V18.

   Do 27. 8. 2026 nebylo pod 1080 px v hlavičce nic než logo a „Živá
   ukázka". Šest položek menu a šest cílů uvnitř „Řešení" bylo z
   telefonu nedostupných; jedinou náhradou byla patička, která při
   390 px začíná na 28 377 px. Změřeno, viz NALEZ-pod-1080-neni-menu.

   ⛔ ZLOM JE 1080 A NEMĚNÍ SE. Je vybraný proto, že se kolem 1000 px
   odkazy lámaly do dvou řádků (site.css:107). Panel se na něj napojí.

   ⛔ ŽÁDNÉ ROZOSTŘENÍ POZADÍ. Lišta se vznáší díky backdrop-filter
   (č. 18), ale panel je plocha, na které se ČTE. Průsvitný text přes
   běžící stránku není prémiový, je nečitelný.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hamburger ───────────────────────────────────────────────────────
   Nad zlomem display:none — tím vypadne i z pořadí tabulátoru
   a z odečítače obrazovky, takže žádné aria-hidden navíc netřeba. */
.nav-ham { display: none; }

@media (max-width: 1080px) {
  .nav-ham {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* Dotyková plocha 44 × 44 px, i když kresba je 18 px široká.
       Kreslí se do ní, nezvětšuje ji — hlavička musí zůstat 68 px.
       ⛔ flex: none JE NUTNÉ. .nav-in je flex a bez něj se tlačítko
       smrskne: při 390 px vyšlo 42,6 px místo 44 a dotyková plocha
       spadla pod minimum. Změřeno, ne odhadnuto. */
    flex: none;
    width: 44px; height: 44px;
    margin: 0; padding: 0;
    background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-ham span {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--body);
    transition: transform .18s ease, opacity .18s ease;
  }
  /* Tři čárky → křížek. Stav nese aria-expanded, ne text. */
  .nav-ham[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-ham[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-ham[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-ham:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }

  /* V tmavém úvodu je hlavička na tmavém pozadí — čárky musí zesvětlat
     stejně jako odkazy vedle (site.css:612 dělá totéž s .login). */
  .uvod .nav-ham span { background: #F1F5F9; }
}

/* ── Panel ───────────────────────────────────────────────────────────
   Od spodní hrany hlavičky dolů. 100dvh, ne 100vh: na telefonu se
   adresní řádek schovává a vh by nechalo panel přerůst obrazovku. */
.nav-mobil {
  display: none;                     /* zavřeno = pryč z tabulátoru i z odečítače */
  position: fixed;
  top: var(--hlavicka);
  left: 0; right: 0;
  height: calc(100dvh - var(--hlavicka));
  z-index: 40;                       /* POD lištou — .nav má z-index 50 (site.css:85).
                                        Hlavička musí zůstat vidět i s otevřeným panelem,
                                        protože „Živá ukázka" zůstává v ní. */
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;      /* dorolování na konec se nepřenese na stránku */
  padding: 8px 20px 40px;
  animation: nav-mobil-prijezd .18s ease;
}
.nav-mobil.je-otevrene { display: block; }

@media (min-width: 640px) {
  .nav-mobil { padding-left: 40px; padding-right: 40px; }
}

@keyframes nav-mobil-prijezd {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Odkazy ──────────────────────────────────────────────────────────
   Vlasové linky mezi řádky, ne rámečky. Rámečky by z devíti položek
   udělaly devět tlačítek a menu má být seznam. */
.nav-mobil a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 17px;
  font-weight: 600;
  color: var(--body);
  border-bottom: 1px solid var(--line);
}
.nav-mobil a:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }

/* Štítek „ŘEŠENÍ" — týž tvar jako .skrin-nadradek jinde na webu,
   ať se čtenář neučí novou hierarchii. Není to odkaz, je to <p>. */
.nav-mobil-stitek {
  margin: 22px 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--violet7);
}
.nav-mobil-skupina a { padding-left: 16px; }

/* „Přihlásit" je jiná třída akce než navigace — silnější mezera,
   slabší barva, bez linky pod sebou. */
.nav-mobil-konec {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.nav-mobil-konec a { color: var(--muted); border-bottom: 0; }

/* ── Vypnutý pohyb ───────────────────────────────────────────────────
   Menu není představení. Panel je hned na místě. */
@media (prefers-reduced-motion: reduce) {
  .nav-mobil { animation: none; }
  .nav-ham span { transition: none; }
}