/* =====================================
   Reset & Variables
   ===================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding-left: 20px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:root {
  --primary: #2E4939; /* deep green */
  --secondary: #B35C2E; /* terracotta */
  --accent: #FAF4E6; /* warm cream */
  --ink: #1F2723; /* dark readable text */
  --muted: #6A7B73;
  --paper: #FFFFFF;
  --pop-1: #FFB703; /* vibrant golden accent for creative highlights */
  --pop-2: #E83F6F; /* raspberry accent for artistic touches */
  --shadow: 0 10px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);
}

/* =====================================
   Base Typography & Body
   ===================================== */
body {
  font-family: Verdana, Geneva, sans-serif;
  color: var(--ink);
  background: var(--accent);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5 { font-family: Georgia, 'Times New Roman', serif; color: var(--primary); margin: 0 0 12px; line-height: 1.2; }
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
p { margin: 0 0 14px; }
strong { font-weight: 700; }

/* Artistic heading underline accents */
h1, h2 { position: relative; display: inline-flex; align-items: center; }
h1::after, h2::after {
  content: "";
  height: 6px; width: 42px; margin-left: 12px;
  background: var(--pop-1);
  border-radius: 12px;
}

/* =====================================
   Layout Containers (Flex-only)
   ===================================== */
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 20px; }
section { position: relative; margin-bottom: 60px; padding: 40px 0; }

/* Decorative artistic blobs (behind content) */
section::before, section::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0; opacity: 0.08; border-radius: 28px; }
section::before { width: 140px; height: 140px; background: var(--secondary); top: -20px; left: -20px; transform: rotate(8deg); }
section::after { width: 100px; height: 100px; background: var(--pop-2); bottom: -16px; right: -16px; transform: rotate(-6deg); }

/* Ensure content sits above decoration */
.container > * { position: relative; z-index: 1; }

/* Content wrappers as flexible stacks */
.content-wrapper { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

/* Mandatory spacing/align patterns (as required) */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* =====================================
   Header & Navigation
   ===================================== */
header { background: var(--paper); border-bottom: 4px solid rgba(179,92,46,0.15); }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.header-bar a img { height: 38px; }

.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { color: var(--primary); padding: 10px 12px; border-radius: 12px; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.main-nav a:hover { background: rgba(46,73,57,0.08); transform: translateY(-1px); }

.cta-header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Mobile burger */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--primary); background: var(--paper); color: var(--primary); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.mobile-menu-toggle:hover { background: rgba(46,73,57,0.1); transform: translateY(-1px); }
.mobile-menu-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,183,3,0.45); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; background: var(--paper); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s ease; z-index: 9999; padding: 20px; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--secondary); background: var(--paper); color: var(--secondary); cursor: pointer; margin-bottom: 8px; }
.mobile-nav { display: flex; flex-direction: column; gap: 10px; }
.mobile-nav a { padding: 14px 12px; border-radius: 12px; background: rgba(46,73,57,0.06); color: var(--primary); font-weight: 600; }
.mobile-nav a:hover { background: rgba(179,92,46,0.10); }

/* Desktop nav breakpoint */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* =====================================
   Buttons & Links
   ===================================== */
.btn, button, .filter-btn-group button, .category-tabs button, .pagination button, .recipe-card button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 14px; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }
.btn:focus, button:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,183,3,0.45); }
.btn-primary, .pagination button:nth-child(3) { background: var(--secondary); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-secondary, .filter-btn-group button, .category-tabs button { background: var(--paper); color: var(--secondary); border-color: var(--secondary); }
.btn-secondary:hover, .filter-btn-group button:hover, .category-tabs button:hover { background: rgba(179,92,46,0.08); transform: translateY(-1px); }

a { color: var(--secondary); }
a:hover { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* =====================================
   Forms & Inputs
   ===================================== */
input[type="text"], input[type="email"], select, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid rgba(46,73,57,0.25); background: var(--paper); color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(179,92,46,0.18); }

.search-bar { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.search-bar button { background: var(--primary); color: #fff; border-color: var(--primary); }
.search-bar button:hover { background: #243a2e; transform: translateY(-1px); }

.newsletter-signup { display: flex; flex-direction: column; gap: 10px; }
.newsletter-signup button { align-self: flex-start; }

/* =====================================
   Feature Grids & Lists (Flex-only)
   ===================================== */
.feature-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.feature-grid > div { flex: 1 1 240px; background: var(--paper); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); border: 2px solid rgba(46,73,57,0.10); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.feature-grid > div:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,0.10); }
.feature-grid img { width: 32px; height: 32px; }

.value-props-list { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.value-props-list li { background: rgba(46,73,57,0.06); border-left: 6px solid var(--pop-1); padding: 12px 14px; border-radius: 10px; }

.step-list { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; }

.how-it-works-points, .user-highlights ul, .faq-list, .next-steps-list { display: flex; flex-direction: column; gap: 10px; }

/* =====================================
   Cards & Recipes (Flex-only)
   ===================================== */
.recipe-cards-grid, .recipe-cards-row { display: flex; flex-wrap: wrap; gap: 24px; }
.recipe-card { flex: 1 1 260px; min-width: 240px; background: var(--paper); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); border: 2px solid rgba(46,73,57,0.10); display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.recipe-card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px rgba(0,0,0,0.12); }
.recipe-card h3 { color: var(--secondary); }
.recipe-card span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.pagination span { color: var(--muted); font-weight: 600; }

/* =====================================
   Testimonials & Ratings (Readable)
   ===================================== */
.testimonial-card { background: #FFFFFF; border-left: 6px solid var(--secondary); border-radius: 14px; box-shadow: var(--shadow); color: var(--ink); }
.testimonial-card blockquote { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 18px; color: var(--ink); }
.rating-summary, .star-ratings-overview { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: rgba(46,73,57,0.06); padding: 12px 14px; border-radius: 12px; color: var(--ink); }
.rating-summary img, .star-ratings-overview img { width: 20px; height: 20px; }

/* =====================================
   Hero & Utility Sections
   ===================================== */
/* Hero content blocks */
section:first-of-type .content-wrapper { background: var(--paper); border: 2px solid rgba(46,73,57,0.10); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); }
.trust-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-badges span { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,183,3,0.12); border: 1px dashed var(--pop-1); padding: 8px 10px; border-radius: 10px; }
.trust-badges img { width: 18px; height: 18px; }

/* Filters */
.filters-controls { display: flex; flex-direction: column; gap: 14px; }
.filter-btn-group { display: flex; flex-wrap: wrap; gap: 10px; }
.sorting-controls { display: flex; align-items: center; gap: 10px; }
.category-tabs, .dietary-filters, .additional-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dietary-filters span { display: inline-flex; align-items: center; gap: 8px; background: rgba(46,73,57,0.06); border-radius: 10px; padding: 6px 10px; }

/* Region & seasonal components */
.region-selector, .season-picker, .availability-tags, .sustainability-badges, .light-versions-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.availability-tags span, .sustainability-badges span, .light-versions-badges span { background: rgba(179,92,46,0.10); color: var(--secondary); padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(179,92,46,0.25); }

/* Text sections */
.text-section { background: var(--paper); border: 2px solid rgba(46,73,57,0.08); border-radius: 16px; padding: 16px; box-shadow: 0 6px 12px rgba(0,0,0,0.04); }

/* Contact blocks */
.address-block, .phone-block, .email-block, .opening-hours, .support-topics, .response-time-note, .privacy-contact, .last-updated-note, .contact-details, .company-name, .address, .phone, .email, .managing-director, .vat-id, .trade-register, .responsible-for-content, .content-liability-note, .link-liability-note, .copyright-note, .legal-contact, .privacy-contact, .story-snippets, .quality-standards, .community-principles, .recipe-testing-process, .nutrition-review-note, .collaboration-options, .heritage-notes, .classic-dishes-list, .ingredient-sourcing-note, .technique-cards, .sauce-fundamentals, .side-dish-pairings, .featured-creators-notes, .editor-picks, .related-links, .legal-links, .produce-calendar-grid, .ingredient-filter, .region-filters, .star-ratings-overview { display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 2px solid rgba(46,73,57,0.08); border-radius: 14px; padding: 14px; }

/* =====================================
   Footer
   ===================================== */
footer { background: var(--primary); color: #F4F7F5; padding-top: 16px; }
footer h2 { color: #fff; }
footer a { color: #FFEBB7; }
footer .content-wrapper { display: flex; flex-direction: column; gap: 16px; }
.footer-nav, .related-category-links, .related-links, .legal-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.social-links { display: flex; gap: 10px; }
.social-links a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); border-radius: 50%; transition: transform 0.2s ease; }
.social-links a:hover { transform: translateY(-2px) rotate(-3deg); }

/* =====================================
   Mobile-first responsive adjustments
   ===================================== */
@media (min-width: 600px) {
  h1 { font-size: 42px; }
  h2 { font-size: 30px; }
}
@media (min-width: 768px) {
  .search-bar { flex-direction: row; }
  .search-bar input { flex: 1 1 auto; }
  .search-bar button { flex: 0 0 auto; }
  .newsletter-signup { flex-direction: row; align-items: center; }
  .newsletter-signup input { max-width: 340px; }
  .filters-controls { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 34px; }
}

/* =====================================
   Accessibility & Focus States
   ===================================== */
:focus-visible { outline: 3px solid rgba(255,183,3,0.55); outline-offset: 2px; }

/* =====================================
   Micro-interactions & Animations
   ===================================== */
@keyframes floatUp { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.hover-float:hover { animation: floatUp 0.35s ease forwards; }

/* =====================================
   Mobile Menu Slide Animation (class toggled via JS)
   ===================================== */
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
.mobile-menu.open { animation: slideInRight 0.35s ease; }

/* =====================================
   Cookie Consent Banner & Modal
   ===================================== */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); color: var(--ink); border-top: 4px solid var(--secondary); box-shadow: 0 -8px 20px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; transform: translateY(100%); transition: transform 0.35s ease; z-index: 9998; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .btn-accept { background: var(--secondary); color: #fff; }
.cookie-banner .btn-reject { background: var(--paper); color: var(--secondary); border: 2px solid var(--secondary); }
.cookie-banner .btn-settings { background: var(--paper); color: var(--primary); border: 2px solid var(--primary); }

.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 10000; }
.cookie-modal.open { display: flex; }
.cookie-modal .cookie-modal-content { background: var(--paper); color: var(--ink); border-radius: 16px; padding: 20px; width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); border: 2px solid rgba(46,73,57,0.12); }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed rgba(46,73,57,0.2); }
.cookie-category:last-child { border-bottom: none; }
.cookie-toggle { width: 46px; height: 28px; border-radius: 999px; background: rgba(46,73,57,0.25); position: relative; border: 2px solid rgba(46,73,57,0.25); transition: background 0.2s ease; }
.cookie-toggle::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; left: 3px; top: 3px; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.cookie-toggle.active { background: var(--secondary); border-color: var(--secondary); }
.cookie-toggle.active::after { transform: translateX(18px); }
.cookie-modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* =====================================
   Special Flex Helpers for Text-Image sections
   ===================================== */
.text-image-section { align-items: center; }
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* =====================================
   Fine-tuning specific page blocks
   ===================================== */
/* Trust badges have creative artistic vibe */
.trust-badges span { font-weight: 600; }

/* Editor picks list */
.editor-picks ul { margin: 0; padding-left: 18px; }

/* Classic dishes list */
.classic-dishes-list ul, .side-dish-pairings ul, .philosophy-points ul, .community-principles ul, .value-props-list, .faq-list, .next-steps-list, .how-it-works-points ul { margin: 0; }

/* Region & produce calendar represented as flex columns */
.produce-calendar-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.produce-calendar-grid > div { flex: 1 1 220px; background: var(--paper); border: 2px dashed rgba(46,73,57,0.18); border-radius: 12px; padding: 12px; }

/* Rating blocks maintain dark text on light background for readability */
.star-ratings-overview, .rating-summary { background: #FFF; border: 1px solid rgba(46,73,57,0.15); }

/* Footer legal links spacing */
.legal-links a { padding: 4px 6px; border-radius: 8px; }
.legal-links a:hover { background: rgba(255,255,255,0.15); }

/* =====================================
   Artistic Accents for Links (subtle underline animation)
   ===================================== */
.main-nav a, .footer-nav a, .related-category-links a, .related-links a, .mobile-nav a { position: relative; }
.main-nav a::after, .footer-nav a::after, .related-category-links a::after, .related-links a::after, .mobile-nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: transparent; transition: background 0.2s ease; }
.main-nav a:hover::after, .footer-nav a:hover::after, .related-category-links a:hover::after, .related-links a:hover::after, .mobile-nav a:hover::after { background: var(--pop-1); }

/* =====================================
   Ensure minimum gaps between blocks/cards
   ===================================== */
.container > .content-wrapper > * { margin-bottom: 0; }
.container > .content-wrapper { gap: 20px; }
.container > * + * { margin-top: 0; }

/* =====================================
   Print-friendly tweaks (optional)
   ===================================== */
@media print { 
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}