/* recipeschema ve recipe-card stil tanımları
   Dosya: assets/css/recipeschema.css
   Türkçe yorumlar: Bu dosyayı tema stilinizde (ör. header partial veya styles.css) include edin.
*/

/* recipeschema: data-ld içeren, görünmez taşıyıcı */
.recipeschema {
  display: none; /* JSON-LD içeriği kullanıcıya görünmeyecek */
  visibility: hidden;
}

/* Görünür recipe hero / card (izin verilen HTML elemanları ile yapılacak) */
.recipe-hero {
  background: linear-gradient(180deg, rgba(15,43,60,0.95), rgba(12,30,42,0.95));
  color: #fff;
  padding: 22px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 18px;
}

/* Kapak görsel için span (background image kullanılıyor) */
.recipe-cover {
  width: 100%;
  max-width: 980px;
  height: 360px;
  margin: 0 auto 16px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

/* Başlık stilleri */
.recipe-hero h1 {
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
  margin: 8px 0 6px;
}

/* Meta satırı (örn. yields/time) - küçük, açık renk */
.recipe-meta {
  color: rgba(255,255,255,0.87);
  font-size: 0.95rem;
  margin-top: 6px;
}

/* Ingredients / instructions listeleri */
.recipe-ingredients, .recipe-instructions {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 14px;
  border: 1px solid #eee;
  color: #222;
}
.recipe-ingredients h2, .recipe-instructions h2 { color: var(--theme-primary, #0066cc); margin-top:0; }

/* Küçük ufak responsive düzeltmeler */
@media (max-width:880px) {
  .recipe-cover { height: 240px; }
  .recipe-hero h1 { font-size: 1.6rem; }
}

/* Debug: JSON-LD string görmek isterseniz alt satırdaki kuralı açın (geliştirme için) */
/* .recipeschema { display:block; color:#333; background:#fff; padding:8px; border-radius:6px; font-family:monospace; white-space:pre-wrap; } */

/* ---------- Recipe card (ingredients) styles ---------- */
/* Türkçe: Bu kısım .recipeschema-card sınıfını güzel bir kart görünümü
   ve checkbox-tıklama (label + hidden input) davranışı için stillendirir.
   HTML tarafında her ingredient <li> içinde <input type="checkbox" id="..."> ve
   <label for="...">Ingredient text</label> yapısı kullanılırsa tıklayınca üstü çizilir.
*/
.recipeschema-card {
  list-style: none;
  margin: 0;
  padding: 12px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(23, 35, 49, 0.06);
  border: 1px solid #eef2f4;
  color: #222;
  font-size: 15px;
}

.recipeschema-card li {
  display: block; /* allow label to be full width */
  position: relative;
  padding: 10px 12px 10px 44px; /* space for fake checkbox */
  border-bottom: 1px solid #f4f6f8;
}
.recipeschema-card li:last-child { border-bottom: none; }

/* Hide native checkbox if present, we'll style via label::before */
.recipeschema-card input[type="checkbox"] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.recipeschema-card label {
  display: block;
  cursor: pointer;
  line-height: 1.3;
  color: #222;
  /* keep room for checkbox */
}

/* draw custom checkbox */
.recipeschema-card label::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid #d8dde1;
  background: #fff;
  box-shadow: 0 2px 6px rgba(11,22,34,0.03) inset;
}

/* checked state (using sibling selector) */
.recipeschema-card input[type="checkbox"]:checked + label::before {
  background: linear-gradient(135deg, #ffca8a 0%, #ff8a8a 100%);
  border-color: #ff8a8a;
}

.recipeschema-card input[type="checkbox"]:checked + label {
  color: #7d7d7d;
  text-decoration: line-through;
}

/* Accessibility: focus ring on keyboard navigation */
.recipeschema-card input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 0 3px rgba(255,138,138,0.12);
}

/* Fallback: if HTML cannot include inputs, allow marking via class on li */
.recipeschema-card li.done label {
  color: #7d7d7d;
  text-decoration: line-through;
}

/* Small helper: compact variant */
.recipeschema-card.compact li { padding: 8px 10px 8px 40px; font-size:14px; }

/* Responsive tweaks */
@media (max-width:600px) {
  .recipeschema-card { padding: 10px; }
  .recipeschema-card li { padding: 10px 10px 10px 44px; }
  .recipeschema-card label::before, .recipeschema-card input[type="checkbox"] { left: 8px; }
}