/* Recipe Article Styles (from design) */

.recipe-article { background-color: #fff; }

/* Breadcrumb */
.breadcrumb { padding: 1.5rem 0; font-size: 0.9rem; color: #666; }
.breadcrumb a { color: var(--brand, #000000); transition: color 0.3s ease; }
.breadcrumb a:hover { color: #000; }
.breadcrumb span { margin: 0 0.5rem; color: #999; }

/* Article Header */
.article-header { padding: 2rem 0; border-bottom: 1px solid #eee; }
.article-header h1 { font-size: 2.5rem; color: #333; margin-bottom: 1rem; font-weight: 700; line-height: 1.2; }
.category-tag { color: #666; margin-bottom: 1.5rem; font-size: 0.95rem; }
.category-tag a { color: var(--brand, #000000); font-weight: 500; }
.intro-text { font-size: 1.15rem; line-height: 1.8; color: #555; margin-bottom: 2rem; }

/* Social Share */
.social-share { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.share-btn { padding: 0.75rem 1.5rem; border: 2px solid var(--brand, #000000); background: #fff; color: var(--brand, #000000); border-radius: 8px; cursor: pointer; font-size: 0.95rem; font-weight: 700; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.share-btn:hover { background: var(--brand, #000000); color: var(--on-brand, #fff); }

/* Author Info */
.author-info { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: #f8f9fa; border-radius: 12px; margin-top: 2rem; }
.author-info img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.author-details { flex: 1; }
.author-label { font-size: 0.85rem; color: #999; margin-bottom: 0.25rem; }
.author-details h3 { font-size: 1.3rem; color: #333; margin-bottom: 0.25rem; }
.update-date { font-size: 0.85rem; color: #666; }

/* Main Layout */
.main-layout { display: grid; grid-template-columns: 1fr 400px; gap: 2rem; margin: 2rem 0; align-items: start; }

/* Left Column */
.left-column { width: 100%; }

/* Featured Image */
.featured-image { margin-bottom: 2rem; }
.featured-image img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.15); object-fit: cover; }
.image-caption { text-align: center; font-size: 0.85rem; color: #999; margin-top: 0.75rem; font-style: italic; }

/* Right Column */
.right-column { position: sticky; top: 100px; height: fit-content; }

/* Featured Author Card */
.featured-author-card { background: #fff; border: 2px dashed var(--brand, #000000); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.featured-author-card .author-avatar { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin: -70px auto 1.5rem; border: 4px dashed var(--brand, #000000); display: block; }
.featured-author-card h3 { font-size: 1.8rem; color: #333; margin-bottom: 1.5rem; font-weight: 700; }
.featured-author-card .author-description { font-size: 1rem; line-height: 1.7; color: #666; margin-bottom: 2rem; }
.featured-author-card h4 { font-size: 1rem; color: #333; margin-bottom: 1rem; font-weight: 600; }
.social-buttons { display: flex; gap: 1rem; justify-content: center; }
.social-btn { width: 50px; height: 50px; background: #000; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.3s ease; }
.social-btn:hover { transform: translateY(-3px); }
.social-btn.pinterest { background: var(--brand, #000000); color: #fff; }

/* Article Content */
.article-content { padding: 0 0 3rem 0; }
.content-wrapper { display: grid; grid-template-columns: 1fr 400px; gap: 2rem; }
.main-content { width: 100%; }
.story-paragraph { font-size: 1.1rem; line-height: 1.8; color: #444; margin-bottom: 2rem; }

/* Content Sections */
.content-section { margin-bottom: 3rem; }
.content-section h2 { font-size: 1.8rem; color: #333; margin-bottom: 1.25rem; font-weight: 700; }
.content-section h3 { font-size: 1.3rem; color: #444; margin-bottom: 1rem; font-weight: 600; }
.content-section p { font-size: 1.05rem; line-height: 1.8; color: #555; margin-bottom: 1rem; }
.benefit-list, .ingredients-list { list-style: none; margin: 1.2rem 0; }
.benefit-list li, .ingredients-list li { padding: 0.35rem 0 0.35rem 2rem; position: relative; font-size: 1.05rem; line-height: 1.5; color: #555; }
.benefit-list li:before { content: "✓"; position: absolute; left: 0; color: var(--brand, #000000); font-weight: bold; font-size: 1.2rem; }
.ingredients-list li { border-bottom: 1px solid #eee; padding-left: 2.25rem; }
.ingredients-list li:before { content: ""; position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--brand, #000000); border-radius: 50%; }

/* Instructions */
.instruction-step { margin-bottom: 2rem; padding: 1.5rem; background: #f8f9fa; border-radius: 12px; border-left: 4px solid var(--brand, #000000); }
.instruction-step h3 { color: var(--brand, #000000); font-size: 1.2rem; margin-bottom: 0.75rem; }
.instruction-step p { margin: 0; }

/* Content Images */
.content-image { margin: 2.5rem 0; }
.content-image img { width: 100%; border-radius: 12px; }

/* Highlight Box */
.highlight-box { background: #f8f9fa; padding: 2rem; border-radius: 12px; border-left: 4px solid var(--brand, #000000); }
.highlight-box h2 { color: var(--brand, #000000); }

/* Pro Tips */
.pro-tips { background: #f8f9fa; padding: 2rem; border-radius: 12px; border-left: 4px solid #000; }
.pro-tips h2 { color: #000; }
.pro-tips ul { list-style: none; margin: 1.5rem 0; }
.pro-tips li { padding: 0.75rem 0 0.75rem 2rem; position: relative; color: #333; }
.pro-tips li:before { content: "💡"; position: absolute; left: 0; }

/* FAQ Section */
.faq-section { background: #f8f9fa; padding: 2rem; border-radius: 12px; }
.faq-item { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #dee2e6; }
.faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.faq-item h3 { color: var(--brand, #000000); font-size: 1.1rem; margin-bottom: 0.5rem; }
.faq-item p { margin: 0; color: #666; }

/* Recipe Card */
.recipe-card { background: #fff; border: 2px solid var(--brand, #000000); border-radius: 16px; padding: 2.5rem; margin: 3rem 0; box-shadow: 0 8px 24px rgba(0, 0, 0,.15); }
.recipe-card h2 { font-size: 2rem; color: var(--brand, #000000); margin-bottom: 1rem; }
.card-description { font-size: 1.1rem; color: #666; margin-bottom: 2rem; }

/* Recipe Meta */
.recipe-meta { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 1.5rem; margin: 2rem 0; padding: 1.5rem; background: #f8f9fa; border-radius: 12px; }
.meta-item { text-align: center; }
.meta-label { display: block; font-size: 0.85rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.meta-value { display: block; font-size: 1.3rem; color: var(--brand, #000000); font-weight: 700; }

/* Recipe Details */
.recipe-details { margin: 2rem 0; padding: 1.5rem; background: #f8f9fa; border-radius: 12px; }
.recipe-details p { margin-bottom: 0.75rem; font-size: 1rem; }

/* Recipe Ingredients Card */
.recipe-ingredients-card { margin: 2rem 0; }
.recipe-ingredients-card h3 { font-size: 1.5rem; color: #333; margin-bottom: 1.5rem; }
.recipe-ingredients-card h4 { font-size: 1.2rem; color: #000000; margin: 1.5rem 0 1rem; }
.recipe-ingredients-card ol { margin-left: 1.5rem; }
.recipe-ingredients-card li { padding: 0.5rem 0; font-size: 1.05rem; line-height: 1.6; color: #555; }

/* Recipe Steps Card */
.recipe-steps-card { margin: 2rem 0; }
.recipe-steps-card h3 { font-size: 1.5rem; color: var(--brand, #000000); margin-bottom: 1.5rem; }
/* Ensure recipe steps take full width and do not inherit legacy grid layout */
.recipe-steps-card .step { display: block; width: 100%; box-sizing: border-box; margin-bottom: 1.5rem; padding: 1.5rem; background: #f8f9fa; border-radius: 12px; position: relative; padding-left: 6.5rem; }
.recipe-steps-card .step-number { position: absolute; left: 1.5rem; top: 1.5rem; background: var(--brand, #000000); color: var(--on-brand, #fff); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; text-align: center; line-height: 1.2; }
.recipe-steps-card .step p { margin: 0; }

/* In-page ad container inside article */
.recipe-article .inpage-ad { margin: 16px 0; display: block; }
.recipe-article .inpage-ad iframe { max-width: 100%; }

/* Billboard inside content wrapper if needed */
.recipe-article .ad-billboard { margin: 12px 0 24px; }

/* In-image placeholder */
.recipe-article .ad-in-image { margin: 8px 0 16px; display:block; }

/* Interscroller ads */
.interscroller-ad { margin: 24px 0; display: block; text-align: center; }
.interscroller-ad iframe { max-width: 100%; }

/* Extra Tips, Tools, Allergy Notes */
.extra-tips, .tools-needed, .allergy-notes, .nutrition-info { margin: 2rem 0; padding: 1.5rem; background: #f8f9fa; border-radius: 12px; }
.extra-tips h3, .tools-needed h3, .allergy-notes h3, .nutrition-info h3 { font-size: 1.3rem; color: #333; margin-bottom: 1rem; }
.extra-tips ol, .tools-needed ul, .allergy-notes ul, .nutrition-info ul { margin-left: 1.5rem; }
.extra-tips li, .tools-needed li, .allergy-notes li, .nutrition-info li { padding: 0.5rem 0; font-size: 1rem; line-height: 1.6; color: #555; }

/* Author Bio */
.author-bio { display: flex; align-items: center; gap: 2rem; padding: 2rem; background: #f8f9fa; border-radius: 12px; margin: 3rem 0; }
.author-bio img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.bio-content h3 { font-size: 1.5rem; color: #333; margin-bottom: 0.75rem; }
.bio-content p { color: #666; font-size: 1.05rem; line-height: 1.7; }

/* Similar Recipes */
.similar-recipes { margin: 3rem 0; }
.similar-recipes h2 { font-size: 2rem; color: #333; margin-bottom: 2rem; }

/* Sidebar */
.sidebar { position: sticky; top: 100px; height: fit-content; }

/* Sidebar Widgets */
.sidebar-widget { background: #f8f9fa; border: 2px solid #000; border-radius: 16px; padding: 2rem; margin-bottom: 2rem; }
.sidebar-widget h3 { font-size: 1.3rem; color: #333; margin-bottom: 1rem; font-weight: 700; }
.sidebar-widget p { font-size: 0.95rem; color: #666; line-height: 1.6; margin-bottom: 1rem; }

/* Newsletter Form */
.newsletter-form { display: flex; flex-direction: column; gap: 0.75rem; }
.newsletter-form input { padding: 0.875rem; border: 2px solid #000; border-radius: 8px; font-size: 0.95rem; transition: border-color 0.3s ease; }
.newsletter-form input:focus { outline: none; border-color: var(--brand, #000000); }
.newsletter-form button { padding: 0.875rem; background: var(--brand, #000000); color: var(--on-brand, #fff); border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.newsletter-form button:hover { background: #000; transform: translateY(-2px); }

/* Sidebar Recipe List */
.sidebar-recipe-list { display: flex; flex-direction: column; gap: 1rem; }
.sidebar-recipe-item { display: flex; gap: 1rem; align-items: center; padding: 0.75rem; border-radius: 8px; transition: background 0.3s ease; cursor: pointer; }
.sidebar-recipe-item:hover { background: #f8f9fa; }
.sidebar-recipe-item img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
.sidebar-recipe-info { flex: 1; }
.sidebar-recipe-info h4 { font-size: 0.95rem; color: #333; margin-bottom: 0.25rem; font-weight: 600; line-height: 1.4; }
.sidebar-recipe-info p { font-size: 0.85rem; color: var(--brand, #000000); margin: 0; }

/* Category List */
.category-list { list-style: none; margin: 0; padding: 0; }
.category-list li { margin-bottom: 0.75rem; }
.category-list li:last-child { margin-bottom: 0; }
.category-list a { display: block; padding: 0.75rem; color: #555; border-radius: 8px; transition: all 0.3s ease; font-size: 0.95rem; }
.category-list a:hover { background: var(--brand, #000000); color: var(--on-brand, #fff); transform: translateX(5px); }

/* Social Widget */
.social-widget { background: #f8f9fa; border-color: #000; }
.social-buttons-sidebar { display: flex; flex-direction: column; gap: 0.75rem; }
.social-btn-sidebar { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.875rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease; color: #fff; }
.social-btn-sidebar span { font-size: 1.2rem; }
.social-btn-sidebar.pinterest { background: #000000; }
.social-btn-sidebar.pinterest:hover { background: #000; transform: translateY(-2px); }
.social-btn-sidebar.facebook { background: #000; }
.social-btn-sidebar.facebook:hover { background: #000000; transform: translateY(-2px); }

/* Sidebar Recipes */
.sidebar-recipes { background: #f8f9fa; border: 2px dashed var(--brand, #000000); border-radius: 16px; padding: 2rem 1.5rem; margin-bottom: 2rem; }
.sidebar-recipes h2 { font-size: 1.5rem; color: var(--brand, #000000); margin-bottom: 1.5rem; font-weight: 700; text-align: center; }
.sidebar-recipe-card { display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 2px dashed var(--brand, #000000); background: #f8f9fa; border-radius: 12px; margin-bottom: 1rem; transition: all 0.3s ease; cursor: pointer; }
.sidebar-recipe-card:hover { border-color: var(--brand, #000000); transform: translateX(5px); }
.sidebar-recipe-card:last-child { margin-bottom: 0; }
.sidebar-recipe-card img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; }
.sidebar-recipe-content { flex: 1; }
.sidebar-recipe-content h4 { font-size: 1rem; color: #333; margin: 0; font-weight: 600; line-height: 1.4; }

/* Responsive */
@media (max-width: 1024px) {
  .main-layout { grid-template-columns: 1fr; gap: 2rem; }
  .right-column { position: static; margin-top: 3rem; }
  .featured-author-card { margin-top: 0; }
}
@media (max-width: 768px) {
  .article-header h1 { font-size: 2rem; }
  .social-share { flex-direction: column; }
  .share-btn { width: 100%; text-align: center; }
  .author-info { flex-direction: column; text-align: center; }
  .featured-author-card { padding: 2rem 1.5rem; }
  .recipe-meta { grid-template-columns: 1fr; }
  .recipe-steps-card .step { padding-left: 1.5rem; padding-top: 4rem; }
  .recipe-steps-card .step-number { left: 50%; top: 1rem; transform: translateX(-50%); }
  .author-bio { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .article-header h1 { font-size: 1.6rem; }
  .social-share { flex-direction: column; align-items: stretch; }
  .social-share .share-btn { width: 100%; justify-content: center; }
  .recipe-card { padding: 1.5rem; }
  .content-section h2 { font-size: 1.5rem; }
}

/* Print styles: print only the recipe card */
@media print {
  body * { visibility: hidden !important; }
  #recipe-card, #recipe-card * { visibility: visible !important; }
  #recipe-card { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none !important; border: none !important; }
}

/* Migrated content (WordPress HTML) */
.migrated-content { font-size: 1.05rem; line-height: 1.8; color: #333; }
.migrated-content p { margin: 0 0 1rem; }
.migrated-content h2 { 
  font-size: 1.6rem; 
  margin: 2.5rem 0 1rem; 
  color: #333; 
  font-weight: 700; 
  border-bottom: 2px solid var(--brand, #000000);
  padding-bottom: 0.5rem;
}
.migrated-content h3 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; color: #444; font-weight: 600; }
.migrated-content ul { margin: 0 0 1.25rem 0; padding-left: 0; list-style: none; }
.migrated-content ol { margin: 0 0 1.25rem 0; padding-left: 0; list-style: none; }
.migrated-content li { margin: 0.4rem 0; }
.migrated-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* Enhanced ingredients list styling */
.migrated-content h2:contains("Zutaten"),
.migrated-content h2[id*="zutaten"],
.migrated-content h2 + ul:first-of-type {
  background: #f8fffe;
  border: 2px solid #e8f5f4;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

/* Enhanced instructions styling */
.migrated-content h2 + ol,
.migrated-content ol li {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  margin: 0.75rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.migrated-content ol li {
  position: relative;
  padding-left: 3rem;
  counter-increment: step-counter;
}

.migrated-content ol li::before {
  content: counter(step-counter);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--brand, #000000);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}

.migrated-content ol {
  counter-reset: step-counter;
  list-style: none;
  padding-left: 0;
}

/* German recipe specific sections */
.migrated-content h2:contains("Warum"),
.migrated-content h2:contains("lieben") {
  color: var(--brand, #000000);
}

/* Time and serving info styling */
.migrated-content p:contains("Vorbereitungszeit"),
.migrated-content p:contains("Kochzeit"),
.migrated-content p:contains("Portionen") {
  background: #f3f4f6;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border-left: 4px solid var(--brand, #000000);
  font-weight: 600;
  margin: 1rem 0;
}

/* Tips and variations styling */
.migrated-content h2:contains("Tipps"),
.migrated-content h2:contains("Variation"),
.migrated-content h2:contains("Aufbewahrung") {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: none;
  margin: 2rem 0 1rem;
}

/* Bold text enhancements */
.migrated-content b,
.migrated-content strong {
  color: var(--brand, #000000);
  font-weight: 700;
}

/* List improvements for ingredients */
.migrated-content ul li {
  position: relative;
  padding-left: 1.5rem;
  margin: 0.6rem 0;
}

.migrated-content ul li::before {
  content: "•";
  color: var(--brand, #000000);
  position: absolute;
  left: 0;
  font-weight: bold;
  font-size: 1.2rem;
}

/* FAQ section specific to German */
.migrated-content h2:contains("Fragen") + * {
  background: #f8f9fa;
  padding: 1.25rem;
  border-radius: 12px;
  margin: 1rem 0 2rem;
}

/* Special section: Why you'll love this recipe */
.migrated-love { border-left: 4px solid var(--brand, #000000); background: #f8fbff; padding: 1.25rem; border-radius: 12px; margin: 2rem 0; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.migrated-love .love-header h2 { color: var(--brand, #000000); margin: 0 0 .75rem; }
.migrated-love .love-body ul { list-style: none; margin-left: 0; padding-left: 0; }
.migrated-love .love-body li { position: relative; padding-left: 1.6rem; }
.migrated-love .love-body li:before { content: "✓"; position: absolute; left: 0; color: var(--brand, #000000); font-weight: 800; }

/* Special section: FAQ */
.migrated-faq { background: #f8f9fa; padding: 1.25rem; border-radius: 12px; margin: 2rem 0; }
.migrated-faq .faq-header h2 { color: var(--brand, #000000); margin: 0 0 .75rem; }
.migrated-faq .faq-item { border-bottom: 1px solid #e5e7eb; padding: .75rem 0; }
.migrated-faq .faq-item:last-child { border-bottom: 0; }
.migrated-faq .faq-item h3 { color: var(--brand, #000000); margin: 0 0 .4rem; font-size: 1.05rem; }
.migrated-faq .faq-item p { margin: 0; color: #555; }