/* ============================================================
   Mobilni responzivita - "faze 2"
   ------------------------------------------------------------
   Puvodni layout (global3.css) pocita s absolutne pozicovanym
   280px sirokym postrannim menu (#navalpha) a hlavnim obsahem
   posunutym o 287px zprava (.content { margin-left: 287px }).
   Bez viewport tagu to mobilni prohlizece jen zmensily jako celek,
   takze to "fungovalo" - jen bylo malicke. S viewport tagem (SEO
   oprava) uz prohlizec sirku respektuje doslova, a hlavni obsah tak
   zbyva jen ~90px siroky sloupecek.
   Toto pravidlo to na mensich obrazovkach preskladame pod sebe
   a odstranime pevne odsazeni, aniz by se cokoliv menilo na
   desktopu (vse je schovane v @media pravidlu).
   ============================================================ */

@media (max-width: 900px) {

  /* Postranni menu (kategorie) - z absolutniho pozicovani na normalni tok,
     aby se zaradilo NAD hlavni obsah misto prekryvani */
  #navalpha {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    box-sizing: border-box;
    margin-bottom: 15px;
  }

  /* Dalsi absolutne pozicovane bloky ze stareho desktopoveho layoutu */
  #navhledej, #nav3 {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    box-sizing: border-box;
  }

  /* Hlavni obsah a paticka - odstranit pevne odsazeni zleva, ktere
     pocitalo s mistem pro 280px sirokou postranni listu */
  .content, .spodek {
    margin: 4px 0 0 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Horni navigace (INFORMACE O NAS / DODACI PODMINKY / ...) - povolit
     zalamovani radku misto plovouciho preteceni mimo obrazovku */
  #menu {
    display: flex;
    flex-wrap: wrap;
  }
  #menu li {
    float: none;
  }
  #menu li a {
    font-size: 14px;
    padding: 0 6px;
    line-height: 34px;
  }

  /* Obrazky a tabulky nesmi byt sirsi nez obrazovka - stare sablony
     casto pouzivaji pevne HTML atributy width="..." */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  table {
    max-width: 100% !important;
  }
  table[width] {
    width: 100% !important;
  }
  td[width] {
    width: auto !important;
  }

  /* Bezpecnostni pojistka - kdyby neco preteklo i pres pravidla vyse,
     radsi to orizneme nez aby cela stranka jela vodorovne rolovat */
  html, body {
    overflow-x: hidden;
  }
}

@media (max-width: 480px) {
  #menu li a {
    font-size: 12px;
    padding: 0 4px;
  }
}