/* 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; }
}

/* ---------- rcard3 (post recipe card) styles ---------- */
:root{--rcard3-primary:var(--theme-primary,#0066cc)}
.rcard3-main{background:transparent;border-radius:8px;padding:18px 0 12px 0;box-shadow:none;margin:32px 0 0 0;max-width:100%}
.rcard3-summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.rcard3-label{background:transparent;color:var(--rcard3-primary);font-weight:700;font-size:.85rem;padding:6px 10px;border-radius:8px;letter-spacing:1px;border:1px dashed color-mix(in srgb,var(--rcard3-primary) 50%,#fff);text-transform:uppercase}
.rcard3-actions{display:flex;gap:10px;align-items:center}
.rcard3-btn{background:transparent;border:1px solid color-mix(in srgb,var(--rcard3-primary) 40%,#fff);color:var(--rcard3-primary);font-weight:700;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.9rem;display:inline-flex;align-items:center;gap:8px;transition:transform .12s ease,box-shadow .12s ease;text-transform:uppercase;letter-spacing:.04em}
.rcard3-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(2,6,23,.06)}
.rcard3-img{text-align:center;margin:12px 0 0 0}
.rcard3-img img{max-width:220px;max-height:220px;border-radius:0;border:none;box-shadow:0 2px 8px #0001}
.rcard3-head-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:6px 0 6px 0;flex-wrap:wrap}
.rcard3-title{font-size:clamp(1.8rem,2.4vw,2.4rem);font-weight:500;text-align:left;margin:0;color:#0b1220;line-height:1.06;flex:1 1 60%;max-width:100%}
.rcard3-meta-row{display:flex;gap:28px;justify-content:flex-end;align-items:flex-start;margin-top:8px}
.rcard3-meta-item{min-width:100px;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.rcard3-meta-item b{font-weight:700;font-size:.75rem;color:var(--rcard3-primary);text-transform:uppercase;letter-spacing:.04em}
.rcard3-meta-item span{font-weight:600;color:#0b1220;font-size:.98rem}
@media (max-width:880px){.rcard3-head-row{flex-direction:column;align-items:stretch}.rcard3-meta-row{width:100%;justify-content:flex-start;gap:18px;margin-top:10px}.rcard3-meta-item{align-items:flex-start;text-align:left}}
.rcard3-servings{font-size:.98rem;color:#0f172a;margin-bottom:8px;font-weight:600}
.rcard3-servings b{display:block;font-size:.82rem;color:var(--rcard3-primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.rcard3-servings span{display:block;color:#374151;font-weight:400;font-size:.95rem}
.rcard3-desc{background:#fff;color:#4b5563;border-radius:8px;padding:10px 12px;margin:12px 0 18px 0;font-size:.98rem;line-height:1.7}
.rcard3-section{margin:32px 0 0 0}
.rcard3-section h3{font-size:1.3rem;color:var(--rcard3-primary);margin-bottom:10px;border-bottom:1.5px solid color-mix(in srgb,var(--rcard3-primary) 18%,#000);padding-bottom:4px}
.rcard3-ingredients{list-style:none;padding:8px 0 0 0;margin:0 0 18px 0}
.rcard3-ingredient{padding:6px 0;border-bottom:1px solid #f3f4f6}
.rcard3-ingredient:last-child{border-bottom:none}
.rcard3-ingredient-item{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.rcard3-ingredient-checkbox{width:20px;height:20px;margin-top:2px;flex:0 0 20px;appearance:none;-webkit-appearance:none;border:2px solid rgba(15,23,42,.12);border-radius:4px;background:#fff;display:inline-grid;place-items:center;transition:background .12s,border-color .12s}
.rcard3-ingredient-checkbox:focus{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--rcard3-primary) 18%,#fff)}
.rcard3-ingredient-checkbox:checked{background:var(--rcard3-primary);border-color:var(--rcard3-primary)}
.rcard3-ingredient-checkbox:checked::after{content:"\2713";color:#fff;font-size:12px;line-height:1}
.rcard3-ingredient-text{font-size:1rem;color:#22314a}
.rcard3-ingredient.checked .rcard3-ingredient-text,.rcard3-ingredient-item input:checked+.rcard3-ingredient-text{text-decoration:line-through;color:#9ca3af;opacity:.75}
.rcard3-ingredient-text em{color:#6b7280;font-style:italic;font-weight:400}
.rcard3-instructions{margin:0;padding-left:0;counter-reset:rcardstep;margin-left:20px}
.rcard3-instructions li{margin-bottom:18px;font-size:1.08rem;line-height:1.6;color:#22314a;position:relative;list-style:none;padding-left:40px}
.rcard3-instructions li:before{counter-increment:rcardstep;content:counter(rcardstep) ". ";position:absolute;left:0;top:0;color:var(--rcard3-primary);font-weight:700;font-size:1.08rem;min-width:0;text-align:right;margin-right:2px}
.rcard3-stepnum{font-weight:700;color:var(--rcard3-primary);margin-right:6px}
.rcard3-tip{background:#fff8e1;color:#e65100;border:1.5px solid #ffe0b2;border-radius:7px;padding:10px 14px;margin:12px 0 0 0;font-size:1rem;display:inline-block}
.rcard3-tipicon{margin-right:6px}
.rcard3-tags{margin:18px 0 0 0}
.rcard3-tag{display:inline-block;background:#ffe5de;color:var(--rcard3-primary);font-size:.98rem;padding:4px 10px;border-radius:5px;margin:0 6px 6px 0}
.rcard3-nutrition{margin:32px 0 0 0;padding:16px 16px 8px 16px;border:1.5px solid var(--rcard3-primary);border-radius:7px;background:#fff;box-shadow:none;font-size:1rem}
.rcard3-nutrition-row{display:flex;gap:24px;margin-bottom:8px;border-bottom:1.5px solid var(--rcard3-primary);padding-bottom:8px}
.rcard3-nutrition-item{font-size:1.08rem;color:var(--rcard3-primary);text-align:center;font-weight:600}
.rcard3-nutrition-item b{color:#22314a;font-size:1.15rem;font-weight:700}
.rcard3-nutrition-label{margin:8px 0 0 0}
.rcard3-nutrition-label a{color:var(--rcard3-primary);text-decoration:underline;font-size:.98rem;font-weight:500;display:inline-block;margin:4px 0 0 0}
.rcard3-nutrition-note{font-size:.92rem;color:#888;margin-top:8px}
.rcard3-nutrition h4{color:var(--rcard3-primary);font-size:1.08rem;font-weight:700;margin:0 0 8px 0;letter-spacing:.01em}
@media (max-width:640px){.rcard3-nutrition{padding:14px 12px}.rcard3-nutrition-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;border-bottom:1.5px solid var(--rcard3-primary);padding-bottom:10px}.rcard3-nutrition-item{text-align:center;font-size:1rem}.rcard3-nutrition-item b{font-size:1.02rem}.rcard3-nutrition-item span{font-size:.82rem;letter-spacing:.02em;word-break:break-word;overflow-wrap:anywhere;hyphens:auto}.rcard3-nutrition h4{font-size:1rem}.rcard3-nutrition-note{font-size:.9rem}}