/* ============================================
   THEIKOS BLOG – ČLÁNEK STYL RECEPTY V1 (samostatný styl receptů)
   = V8 (základ) + recept-karta, checkboxy ingrediencí,
     tlačítka (tisk, režim vaření) a tiskové styly receptu.

   V8 se NEKOPÍRUJE, ale importuje absolutní URL → opravy
   v V8 se automaticky propíšou i do receptů.
   Načítej clanek_styl_recepty_V1.css jen u receptových článků; běžné články dál clanek_styl_V8.css.

   Barvy: #036400, #ffd700, #FFFFFF, #E9F6E8, #F9F9F9, #161616
   Font:  Exo 2 (nadpisy)
   ============================================ */

@import url('https://www.theikos.cz/user/documents/upload/CSS/clanek_styl_V8.css');

/* ============================================
   32. RECEPT – KOTVA „PŘEJÍT NA RECEPT"
   ============================================ */

.clanek-styl #recept { scroll-margin-top: 90px; }

.clanek-styl .jump-recept {
  display: inline-flex; align-items: center; gap: 8px;
  background: #E9F6E8; color: #036400 !important;
  font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 0.95em;
  padding: 10px 22px; border-radius: 50px;
  text-decoration: none !important; border: 1px solid #c8e6c5;
  transition: all 0.2s ease; margin-bottom: 8px;
}
.clanek-styl .jump-recept:hover {
  background: #036400; color: #FFFFFF !important; transform: translateY(-1px);
}

/* ============================================
   33. RECEPT KARTA
   ============================================ */

.clanek-styl .recept-karta {
  background: #FFFFFF; border: 1px solid #c8e6c5; border-radius: 12px;
  margin: 40px 0; overflow: hidden; box-shadow: 0 4px 24px rgba(3, 100, 0, 0.10);
}

.clanek-styl .recept-karta-head {
  background: linear-gradient(135deg, #032d00 0%, #036400 55%, #0a7a00 100%);
  color: #FFFFFF; padding: 26px 30px 24px; position: relative; overflow: hidden;
}
.clanek-styl .recept-karta-head::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, #ffa000, #ffd700, #ffe082, #ffd700, #ffa000);
}
.clanek-styl .recept-karta-head h3 {
  font-family: 'Exo 2', sans-serif; color: #FFFFFF; font-size: 1.5em;
  font-weight: 700; margin: 6px 0 8px !important; line-height: 1.25;
}
.clanek-styl .recept-karta-perex {
  color: rgba(255, 255, 255, 0.9); font-size: 0.95em; margin: 0;
}
.clanek-styl .recept-karta-stitek {
  display: inline-block; font-family: 'Exo 2', sans-serif; font-size: 0.7em;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #ffd700;
}

.clanek-styl .recept-meta {
  display: flex; flex-wrap: wrap; background: #F9F9F9; border-bottom: 1px solid #E9F6E8;
}
.clanek-styl .recept-meta-item {
  flex: 1; min-width: 90px; text-align: center; padding: 16px 10px; border-right: 1px solid #eaeaea;
}
.clanek-styl .recept-meta-item:last-child { border-right: none; }
.clanek-styl .recept-meta-ikona { display: block; font-size: 1.35em; line-height: 1; margin-bottom: 6px; }
.clanek-styl .recept-meta-hodnota {
  display: block; font-family: 'Exo 2', sans-serif; font-weight: 700;
  color: #036400; font-size: 1.05em; line-height: 1.2;
}
.clanek-styl .recept-meta-popisek {
  display: block; font-size: 0.72em; color: #777; text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 2px;
}

.clanek-styl .recept-badges { padding: 18px 30px 0; }

.clanek-styl .recept-telo { padding: 10px 30px 8px; }
.clanek-styl .recept-telo h4 {
  font-family: 'Exo 2', sans-serif; font-size: 1.15em; color: #036400;
  margin-top: 24px !important; margin-bottom: 10px !important;
  padding-bottom: 8px; border-bottom: 2px solid #E9F6E8;
}

.clanek-styl .ingredience { list-style: none; padding-left: 0; margin: 0 0 8px; }
.clanek-styl .ingredience li { margin: 0; padding: 0; border-bottom: 1px dashed #e8efe7; }
.clanek-styl .ingredience li:last-child { border-bottom: none; }
.clanek-styl .ingredience-hint { font-size: 0.85em; color: #777; font-style: italic; margin: 0 0 8px; }
.clanek-styl .ingredience label {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px;
  cursor: pointer; font-size: 0.97em; border-radius: 8px; transition: background 0.15s ease;
}
.clanek-styl .ingredience label:hover { background: #f3faf2; }
.clanek-styl .ingredience input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  margin: 1px 0 0; width: 22px; height: 22px; flex-shrink: 0; cursor: pointer;
  border: 2px solid #036400; border-radius: 6px; background: #FFFFFF;
  position: relative; transition: background 0.15s ease, border-color 0.15s ease;
}
.clanek-styl .ingredience input[type="checkbox"]:hover { background: #E9F6E8; }
.clanek-styl .ingredience input[type="checkbox"]:checked { background: #036400; border-color: #036400; }
.clanek-styl .ingredience input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #FFFFFF; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.clanek-styl .ingredience input[type="checkbox"]:focus-visible { outline: 3px solid #036400; outline-offset: 2px; }
.clanek-styl .ingredience input[type="checkbox"]:checked + span {
  text-decoration: line-through; color: #9aa39a;
}
.clanek-styl .ingredience .ing-mnozstvi { font-weight: 700; color: #161616; }
.clanek-styl .ing-skupina {
  font-family: 'Exo 2', sans-serif; font-weight: 700; color: #036400;
  font-size: 0.95em; margin: 16px 0 2px;
}

.clanek-styl .recept-postup { counter-reset: krok; list-style: none; padding-left: 0; margin: 4px 0 8px; }
.clanek-styl .recept-postup li { position: relative; padding: 0 0 18px 50px; margin: 0; font-size: 0.97em; }
.clanek-styl .recept-postup li:last-child { padding-bottom: 4px; }
.clanek-styl .recept-postup li::before {
  counter-increment: krok; content: counter(krok); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; background: linear-gradient(135deg, #036400, #0a8a00);
  color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 0.95em;
  box-shadow: 0 3px 8px rgba(3, 100, 0, 0.22);
}

.clanek-styl .recept-akce { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 30px 26px; }
.clanek-styl .recept-btn {
  display: inline-flex; align-items: center; gap: 8px; background: #E9F6E8; color: #036400;
  border: 1px solid #c8e6c5; font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 0.9em;
  padding: 10px 20px; border-radius: 50px; cursor: pointer; transition: all 0.2s ease;
}
.clanek-styl .recept-btn:hover { background: #036400; color: #FFFFFF; }
.clanek-styl .recept-btn.aktivni { background: #ffd700; color: #161616; border-color: #ffd700; }

/* ============================================
   34. RESPONSIVE – RECEPT KARTA (mobil)
   ============================================ */
@media screen and (max-width: 768px) {
  .clanek-styl .recept-karta-head { padding: 22px 20px 20px; }
  .clanek-styl .recept-karta-head h3 { font-size: 1.3em; }
  .clanek-styl .recept-telo { padding: 8px 20px; }
  .clanek-styl .recept-badges { padding: 16px 20px 0; }
  .clanek-styl .recept-akce { padding: 12px 20px 22px; }
  .clanek-styl .recept-meta-item { flex: none; width: 33.33%; min-width: 0; }
  .clanek-styl .recept-postup li { padding-left: 44px; }
  .clanek-styl .recept-postup li::before { width: 30px; height: 30px; }
}

/* iframe tisk nemá Shoptet reset -> vynulovat margin odstavce v kroku,
   jinak text kroku klesne pod číslo (na webu je margin nulovaný globálně) */
.clanek-styl .step-content p { margin: 0; }

/* ============================================
   35. TISK RECEPTU
   Tisk řeší inline JS přes skrytý iframe (vytiskne jen recept-kartu,
   nezávisle na zbytku stránky). Tato @media print pravidla se uplatní
   uvnitř iframe dokumentu = čistý černobílý header, šetří inkoust.
   ============================================ */
/* Tiskové prvky iframu: logo nahoře + patička s odkazem (jen v tiskovém iframu) */
.clanek-styl .tisk-hlavicka { text-align: center; margin: 0 0 18px; }
.clanek-styl .tisk-hlavicka img { max-width: 180px; height: auto; }
.clanek-styl .tisk-paticka {
  margin-top: 20px; padding-top: 12px; border-top: 1px solid #cccccc;
  font-size: 0.8em; color: #555555; text-align: center; word-break: break-all;
}
.clanek-styl .tisk-paticka a { color: #036400; text-decoration: none; }

@media print {
  .clanek-styl .recept-akce { display: none !important; }
  /* netisknout URL za odkazy v kartě a patičce */
  .clanek-styl .recept-karta a::after, .clanek-styl .tisk-paticka a::after { content: none !important; }
  .clanek-styl .recept-karta { margin: 0; border: 1px solid #999; box-shadow: none; }
  .clanek-styl .recept-karta-head { background: #FFFFFF !important; color: #000 !important; }
  .clanek-styl .recept-karta-head h3,
  .clanek-styl .recept-karta-perex,
  .clanek-styl .recept-karta-stitek { color: #000 !important; }
  .clanek-styl .step-number {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}