/* NutriWiki - static rebuild. Replaces the old NutriWiki.css / DesignMode.css / styles.css stack
   (Kentico + jQuery leftovers). Keeps the original look: grey top bar with a lime border,
   grey bold navigation, 1020px content column. No external fonts, no JavaScript. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Open Sans", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
  color: #222;
  background: #fff;
  line-height: 1.45;
  overflow-y: scroll;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { line-height: 1.25; margin: 10px 0 0 0; }

/* ---------- header / navigation ---------- */
.site-top {
  background-color: #f0f0f0;
  border-bottom: 2px solid #c8dc5d;
}
.site-top .wrap {
  max-width: 1020px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 50px;
}
.site-logo { display: inline-flex; align-items: center; padding: 10px 10px 10px 0; }
.site-logo img { width: 120px; height: 22px; display: block; }

.nav-toggle { position: absolute; left: -9999px; }
.nav-toggle-label { display: none; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-block;
  padding: 0 10px;
  line-height: 50px;
  font-size: 11pt;
  font-weight: bold;
  color: #727073;
  text-decoration: none;
}
.site-nav a:hover, .site-nav a:focus, .site-nav a[aria-current="page"] { color: #9ab21e; }
.site-nav a.hot { color: #d00; }

@media (max-width: 700px) {
  .site-top .wrap { padding: 0 16px; justify-content: space-between; }
  .nav-toggle-label {
    display: block;
    cursor: pointer;
    padding: 10px 14px;
    background: #c8dc5d;
    color: #fff;
    font-weight: bold;
    border-radius: 3px;
  }
  .site-nav { flex-basis: 100%; display: none; border-top: 1px solid #c8dc5d; }
  .nav-toggle:checked ~ .site-nav { display: block; }
  .nav-toggle:focus-visible + .nav-toggle-label { outline: 2px solid #727073; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { display: block; line-height: 44px; border-bottom: 1px solid #c8dc5d; padding: 0 10px; }
}

/* ---------- content ---------- */
.container {
  max-width: 1020px;
  margin: 0 auto;
  position: relative;
}
main.site-main { display: block; padding: 0 0 30px 0; overflow-wrap: break-word; }
/* long bare URLs (link text and plain "Zdroj: http://..." text) must wrap on phones */
main.site-main a { overflow-wrap: anywhere; }
main.site-main::after { content: ""; display: block; clear: both; }

@media (max-width: 700px) {
  .container { padding: 0 6px; }
}

/* article thumbnails: the source marks them <img height="150px" style="float:right">, but the
   global `img { height: auto }` above beats the HTML height attribute, so pin the size in CSS */
main.site-main img[height][style*="float:right"], main.site-main img[height][style*="float: right"] {
  height: 150px; width: auto; max-width: 45%; object-fit: cover; margin: 0 0 10px 15px;
}

/* wide legacy tables must not cause horizontal page scroll on phones */
main.site-main table { max-width: 100%; }
@media (max-width: 700px) {
  main.site-main table { width: 100% !important; font-size: 14px; }
  /* break-word, not anywhere: `anywhere` drops a cell's min-content width to ~0, so the auto
     table layout squeezed label columns to 20-30 px and split words one syllable per line.
     Links keep `anywhere` (rule above), which is enough for long bare URLs. */
  main.site-main td { overflow-wrap: break-word; }
  /* additive tables: chemical names up to ~34 letters with no space
     ("Polyoxyethylensorbitanmonopalmitát") do need breaking inside the word; the E-number
     column stays unbroken and the category column ("zahušťovadlo") wraps at spaces only, so only
     the name column (2nd) may break inside a word */
  main.site-main table.ecka td:nth-child(2) { overflow-wrap: anywhere; }
  main.site-main table.ecka td:first-child { white-space: nowrap; padding-right: 6px; }
  main.site-main img[style*="float:right"], main.site-main img[style*="float: right"] {
    float: none !important; display: block; margin: 10px auto !important; max-width: 100% !important;
  }
}

.tab1 ul { list-style-type: disc; margin-left: 20px; padding-left: 20px; }
.tab1 ul li { color: #727073; margin-bottom: 5px; }
.tab1 ul a, .tab1 a { text-decoration: none; color: #727073; }
.tab1 ul li:hover, .tab1 ul li a:hover { text-decoration: underline; color: #9ab21e; }
.tab1 ol { list-style-type: decimal; margin-left: 20px; padding-left: 20px; }
.tab1 ol li { margin-bottom: 5px; }

.notice {
  margin: 20px 10px;
  padding: 14px 18px;
  border-left: 4px solid #c8dc5d;
  background: #f6f8ec;
}

.back-link {
  float: right;
  text-decoration: none;
  color: #727073;
  margin: 5px 10px;
}

/* nutrient pages (generated from the database export) */
.nutrihlavni { width: 100%; border-collapse: collapse; }
.nutrihlavni td { padding: 0 4px 10px; vertical-align: top; }
.ddd { width: 100%; border-collapse: collapse; }
.ddd td { border-bottom: 1px solid #888; padding: 3px 4px; }
.ddd td.bb { text-align: center; width: 20%; }
/* the upper block (Skupina/Popis/...) and the lower one (Poznámka editora/Použitá literatura/
   Online zdroje) share one fixed label width, so their values start on the same line whatever
   the content (auto layout moved the lower values between ~250 and ~670 px) */
.nutrihlavni td:first-child, .ddd.zdroje td:first-child { width: 150px; }
.ddd.zdroje td { vertical-align: top; }
/* "Skupina" is wrapped in <p>: without this its value sits a line below its label */
.nutrihlavni td > p:first-child { margin-top: 0; }
@media (max-width: 700px) {
  /* phones: label above its value, the value gets the full width */
  .nutrihlavni, .nutrihlavni tbody, .nutrihlavni tr, .nutrihlavni td,
  .ddd.zdroje, .ddd.zdroje tbody, .ddd.zdroje tr, .ddd.zdroje td { display: block; }
  .nutrihlavni td:first-child, .ddd.zdroje td:first-child { width: auto; }
  .nutrihlavni td:first-child { padding-bottom: 2px; }
  .ddd.zdroje td:first-child { border-bottom: 0; padding-bottom: 0; }
}
.aktual { display: flex; gap: 25px; margin-bottom: 20px; }
.aktual > div { flex: 1 1 0; min-width: 0; }
@media (max-width: 700px) { .aktual { display: block; } .aktual > div { margin-bottom: 15px; } }
/* overview: wiki.html_pred/html_za wrap each group in .tab1 > ul > .seznam > .s1/.s2/.s3
   (three columns, as in the old NutriWiki.css; stacked below 700 px) */
.nutrient-list ul { list-style: disc; margin: 0 0 0 20px; padding-left: 20px; }
.nutrient-list li { margin: 0 0 5px; color: #727073; }
.nutrient-list a { color: #727073; text-decoration: none; }
.nutrient-list a:hover, .nutrient-list a:hover li { text-decoration: underline; color: #9ab21e; }
.nutrient-list .seznam { display: flex; gap: 0 3%; width: 99%; }
.nutrient-list .seznam > div { flex: 0 1 31%; min-width: 0; }
@media (max-width: 700px) {
  .nutrient-list .seznam { display: block; }
  .nutrient-list ul { margin-left: 0; }
}

/* food request status table */
table.tabulka { width: 95%; border-collapse: collapse; }
table.tabulka td { padding: 5px 20px; border: 1px solid #cee0cc; color: #4f7849; }
table.tabulka tr:nth-child(odd) { background: #eee; }
.stav { padding: 4px; border: 1px solid; text-align: center; font-weight: 700; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 700px) {
  table.tabulka td { padding: 5px 8px; }
  .stav { padding: 3px 5px; }
}
.stav-1 { color: orange; } .stav-2 { color: blue; } .stav-3 { color: green; } .stav-4 { color: red; }

/* ---------- footer ---------- */
.site-footer {
  clear: both;
  border-top: 2px solid #c8dc5d;
  background: #f0f0f0;
  color: #727073;
  font-size: 13px;
}
.site-footer .wrap { max-width: 1020px; margin: 0 auto; padding: 14px 10px; }
.site-footer a { color: #727073; }
@media (max-width: 700px) { .site-footer .wrap { padding: 14px 16px; } }