/* ============================================================
   Spolecne rozlozeni obsahovych stranek
   /css/stranka.css

   Resi dve veci, ktere mela kazda stranka po svem:

     1. SIRKU a vycentrovani
     2. MEZERU nad prvnim oknem

   Hodnoty jsou stejne jako u katalogu (.kat) a detailu
   produktu (.prod), takze text zacina i konci presne tam,
   kde dlazdice produktu, logo a menu nad nim.

   Chces neco zmenit? Staci cisla v :root nize, nic jineho.
   ============================================================ */

:root {
  --sirka-obsahu:          1280px;   /* stejne jako .kat a .prod */
  --odsazeni-po-stranach:  20px;     /* stejne jako .kat a .prod */
  --mezera-nad-obsahem:    16px;
  --mezera-pod-obsahem:    56px;
}


/* ------------------------------------------------------------
   Mezera nad obsahem - dava ji main, ne jednotlive stranky
   ------------------------------------------------------------ */
main {
  padding-top: var(--mezera-nad-obsahem);
  padding-bottom: var(--mezera-pod-obsahem);
}

/* Uvodni stranka ma dole bloky pres celou sirku s vlastnim
   pozadim ("O nás", newsletter). Ty maji navazovat primo
   na paticku, takze tam zadna mezera byt nesmi. */
main.je-uvod {
  padding-bottom: 0;
}


/* ------------------------------------------------------------
   Sirka a vycentrovani

   Driv si tohle kazdy obal urcoval sam a textove stranky to
   dedily z kontakt.css. Kdyz se ten soubor nenacetl, text se
   rozlil pres celou sirku monitoru. Tady uz na nem nezavisi.

   Dve tridy v selektoru jsou tu schvalne: pravidla
   jednotlivych sablon se vypisuji az v tele stranky, tedy
   POD timhle souborem. S jednou tridou by vyhrala ona, se
   dvema vyhrava tohle bez ohledu na poradi - a nemusime
   nikde pouzivat !important.
   ------------------------------------------------------------ */
main .kon,
main .rek,
main .prh,
main .reg,
main .obn,
main .kos,
main .kat,
main .prod {
  box-sizing: border-box;

  /* Vzdy cela sirka (az do max-width). Bez toho se obal muze
     smrstit na sirku obsahu - napr. kdyz popis z databaze
     obsahuje neuzavrenou tabulku nebo plovouci prvek. */
  display: block;
  width: 100%;
  min-width: 0;

  max-width: var(--sirka-obsahu);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--odsazeni-po-stranach);
  padding-right: var(--odsazeni-po-stranach);

  /* mezery nahore i dole uz dal main. Kazda stranka je
     mela jine - 56, 60 a 64 px - a kosik zadnou, takze
     se dotykal paticky. */
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Vnitrni obal textu z administrace. Sirku ma od .kon vyse,
   proto tu zadnou vlastni nesmi mit - jinak by se odsazeni
   scitalo a text byl o 40 px uzsi. */
main .kon-text,
main .op,
main .kon-text .op {
  max-width: none;
  margin-top: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}


/* ------------------------------------------------------------
   Drobeckova navigace

   U reklamace jsi ji nechal odstranit, u kontaktu zustala -
   a prave ona delala rozdil v mezere: pridavala nad prvni
   okno dalsich 34 px. Proto je schovana vsude.

   Chces ji zpet? Smaz tenhle blok.
   ------------------------------------------------------------ */
main .kon-drobecky,
main .rek-drobecky {
  display: none;
}

/* ------------------------------------------------------------
   Drobecky v katalogu a na detailu produktu

   Tyhle zustavaji - v katalogu je navigace k necemu dobra.
   Jen uz nepridavaji vlastni odsazeni shora, aby se
   nescitalo s mezerou od main. Driv to delalo 48 px misto
   32, a proto byla nad "Úvod > Snímače" vetsi mezera nez
   nad ostatnimi strankami.
   ------------------------------------------------------------ */
main .kat-drobecky,
main .prod-drobecky {
  margin-top: 0;
}


/* ------------------------------------------------------------
   Prvni prvek nesmi pridavat vlastni margin.
   Typicky <h1> nebo <p> z databaze s 20 az 30 px shora.
   ------------------------------------------------------------ */
main > *:first-child,
main .kos > *:first-child,
main .kat > *:first-child,
main .prod > *:first-child,
main .kon > *:first-child,
main .rek > *:first-child,
main .prh > *:first-child,
main .reg > *:first-child,
main .obn > *:first-child,
main .kon-text > *:first-child {
  margin-top: 0;
}


/* ------------------------------------------------------------
   Obsah z administrace

   Styly k nemu jsou v /css/obsah.css. Tady je jen to, co
   drive resil obal dokumentu, nez se texty presunuly
   do databaze.
   ------------------------------------------------------------ */
.kon-text {
  font-size: 15px;
  line-height: 1.6;
}
.kon-text img,
.kon-text table,
.kon-text iframe,
.kon-text section,
.kon-text svg {
  max-width: 100%;
}
.kon-text table {
  border-collapse: collapse;
}

/* Hlaseni o chybejicim sloupci */
.kon-chyba {
  padding: 14px 18px;
  background: #FDECEC;
  border-left: 4px solid #C0392B;
  color: #7B241C;
  border-radius: 8px;
}


/* ------------------------------------------------------------
   Mobil

   Odsazeni po stranach zustava 20 px i na mobilu - katalog
   a detail produktu ho take nemeni, takze text zacina
   ve stejne svislici jako dlazdice produktu. Mensi je jen
   mezera nahore.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  :root {
    --mezera-nad-obsahem: 20px;
    --mezera-pod-obsahem: 40px;
  }
}