/* =========================================================
   Wurzeln & Würze — style.css
   Playful Dynamic theme using ONLY Flexbox
   - Bright accents, animated elements, fun details
   - Uses brand fonts and colors
   - Mobile-first, responsive, accessible
   - Includes mobile burger menu + cookie banner styles
   ========================================================= */

/* =====================
   0) CSS RESET / BASE
   ===================== */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding-left: 20px; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid #FFD400; outline-offset: 2px; border-radius: 8px; }

/* =====================
   1) THEME TOKENS
   ===================== */
:root {
  /* Brand */
  --brand-primary: #4E342E; /* deep cocoa */
  --brand-secondary: #2F5D50; /* pine green */
  --brand-accent: #FAF3E0; /* warm sand */

  /* Playful dynamic accents */
  --pop: #FF4D6D;   /* lively coral */
  --sun: #FFD400;   /* sunshine yellow */
  --sky: #4FC3F7;   /* energetic sky */
  --mint: #50E3C2;  /* minty fresh */
  --berry: #9C27B0; /* fun purple */

  /* Neutrals */
  --ink: #2B2A28;   /* readable dark */
  --paper: #FFFFFF; /* pure light */
  --muted: #6B6763;

  /* Shadows & radii */
  --shadow-1: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-2: 0 8px 20px rgba(0,0,0,0.12);
  --radius-sm: 10px; 
  --radius-md: 14px; 
  --radius-lg: 22px;

  /* Spacing scale */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;
}

/* =====================
   2) TYPOGRAPHY
   ===================== */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: var(--ink);
  background: var(--brand-accent);
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; color: var(--brand-primary); margin: 0 0 var(--space-16) 0; }
h1 { font-size: 36px; line-height: 1.2; }
h2 { font-size: 28px; line-height: 1.25; }
h3 { font-size: 20px; line-height: 1.3; }
h4 { font-size: 18px; }
p { margin: 0 0 var(--space-16) 0; color: var(--ink); }
.small { font-size: 14px; color: var(--muted); }
.tagline { font-size: 18px; color: var(--brand-secondary); font-weight: bold; }

/* =====================
   3) GLOBAL LAYOUT (FLEX ONLY)
   ===================== */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  box-shadow: var(--shadow-1);
}

/* Mandatory spacing & alignment patterns */
.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; }

/* Apply similar spacing to native section elements for consistency */
main > section { margin-bottom: var(--space-60); padding: var(--space-40) 0; }

/* =====================
   4) HEADER & NAVIGATION
   ===================== */
header { position: sticky; top: 0; z-index: 50; background: var(--paper); box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
header .container { padding-top: var(--space-12); padding-bottom: var(--space-12); }

.main-navigation { display: none; align-items: center; gap: var(--space-16); }
.main-navigation a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--brand-primary); font-weight: 600; }
.main-navigation a:hover { background: var(--brand-accent); color: var(--brand-secondary); transition: background .2s ease, color .2s ease; }
.main-navigation img { height: 40px; width: auto; }

/* Header bar layout */
header .container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }

/* Mobile burger */
.mobile-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; font-size: 22px; line-height: 1;
  background: var(--brand-secondary); color: var(--paper);
  border-radius: 12px; box-shadow: var(--shadow-1);
  transition: transform .2s ease, background .2s ease;
}
.mobile-menu-toggle:hover { transform: translateY(-2px); background: #2B4D44; }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-20);
  transform: translateX(100%);
  transition: transform .35s ease;
  box-shadow: var(--shadow-2);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
  align-self: flex-end; margin: var(--space-20);
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pop); color: var(--paper);
}
.mobile-nav { display: flex; flex-direction: column; gap: var(--space-12); padding: 0 var(--space-20) var(--space-20); }
.mobile-nav a {
  padding: 14px 16px; border-radius: 12px;
  background: var(--brand-accent); color: var(--brand-primary); font-weight: 600;
}
.mobile-nav a:hover { background: var(--sun); color: #4E342E; transition: background .2s ease; }

/* Show desktop nav on larger screens */
@media (min-width: 992px) {
  .main-navigation { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* =====================
   5) BUTTONS & LINKS
   ===================== */
.btn { 
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px; border-radius: 16px; font-weight: 700; letter-spacing: .3px;
  background: var(--brand-secondary); color: var(--paper);
  box-shadow: 0 6px 0 rgba(47,93,80,0.4), var(--shadow-1);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(47,93,80,0.35), var(--shadow-2); }
.btn:active { transform: translateY(0); box-shadow: 0 3px 0 rgba(47,93,80,0.5); }

.btn.primary { background: var(--pop); box-shadow: 0 6px 0 rgba(255,77,109,0.5), var(--shadow-1); }
.btn.primary:hover { background: #FF3357; }

.btn.secondary { background: var(--sun); color: #3E2B26; box-shadow: 0 6px 0 rgba(255,212,0,0.45), var(--shadow-1); }
.btn.secondary:hover { background: #E6C400; }

.cta-link { color: var(--brand-secondary); font-weight: 700; border-bottom: 3px solid var(--mint); padding-bottom: 2px; }
.cta-link:hover { color: #24483E; border-color: var(--sky); }

/* Rows */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* Quick filters links (simple inline) */
.quick-filters { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; color: var(--muted); }
.quick-filters a { color: var(--brand-secondary); font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.quick-filters a:hover { background: var(--brand-accent); }

/* =====================
   6) FORMS & SEARCH
   ===================== */
.search-bar { display: flex; flex-direction: column; gap: var(--space-12); }
.search-bar input[type="text"] {
  padding: 14px 14px; border: 2px solid var(--brand-secondary); border-radius: 14px;
  background: var(--paper); color: var(--ink);
}
.search-bar button { 
  display: inline-flex; align-items: center; justify-content: center; 
  height: 46px; width: 56px; border-radius: 14px; background: var(--brand-secondary); color: var(--paper);
}
.search-bar button:hover { background: #2B4D44; }
.search-bar img { width: 22px; height: 22px; }

@media (min-width: 640px) {
  .search-bar { flex-direction: row; align-items: center; }
  .search-bar input[type="text"] { flex: 1; }
}

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.filters button {
  background: var(--brand-accent); color: var(--brand-primary); padding: 10px 14px; border-radius: 999px; font-weight: 700;
  transition: transform .1s ease, background .2s ease;
}
.filters button:hover { transform: translateY(-2px); background: var(--sun); }

/* Form replacement boxes */
.form-replacement { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-16); border: 2px dashed var(--mint); border-radius: var(--radius-md); background: #FFFFFF; }
.form-replacement img { width: 22px; height: 22px; display: inline-block; }

/* =====================
   7) CARDS, GRIDS & LISTS (FLEX ONLY)
   ===================== */
/* Features */
.feature-grid, .category-grid, .region-grid, .story-cards, .howto-cards, .option-cards, .value-icons-row {
  display: flex; flex-wrap: wrap; gap: var(--space-20);
}
.feature-grid > div, .category-grid > div, .region-grid > div, .story-cards > div, .howto-cards > div, .option-cards > div, .value-icons-row > div, .category-card {
  flex: 1 1 260px;
  background: var(--paper);
  border: 2px solid var(--brand-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-grid > div:hover,
.category-grid > div:hover,
.region-grid > div:hover,
.story-cards > div:hover,
.howto-cards > div:hover,
.option-cards > div:hover,
.value-icons-row > div:hover,
.category-card:hover {
  transform: translateY(-4px) rotate(-0.3deg);
  box-shadow: var(--shadow-2);
  border-color: var(--mint);
}

/* Category list on index (uses .category-card children) */
.category-list { display: flex; flex-wrap: wrap; gap: var(--space-20); }
.category-list .category-card { min-height: 140px; }

/* Stat highlights & lists */
.stat-highlights { display: flex; flex-wrap: wrap; gap: var(--space-12); list-style: none; padding-left: 0; }
.stat-highlights li {
  background: var(--brand-accent); color: var(--brand-primary);
  padding: 10px 14px; border-radius: 999px; font-weight: 700;
  border: 2px solid var(--sun);
}

/* User tips & featured recipes */
.user-tips-list, .featured-recipes, .filter-list, .technique-list, .kitchen-glossary, .festival-list, .brand-pillars, .brand-values-list, .eligibility-notes, .submission-checklist, .step-list, .contact-info-list {
  display: flex; flex-direction: column; gap: 10px; padding-left: 18px;
}
.featured-recipes li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding-right: 6px; }
.save-button { background: var(--sun); width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.save-button:hover { background: #E6C400; }

/* Trust badges */
.trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.trust-badges span { display: inline-flex; align-items: center; gap: 8px; background: var(--sun); color: #4E342E; padding: 8px 12px; border-radius: 12px; box-shadow: var(--shadow-1); font-weight: 700; }
.trust-badges img { width: 18px; height: 18px; transition: transform .2s ease; }
.trust-badges span:hover img { transform: rotate(-10deg) scale(1.1); }

/* Rating snippet */
.rating-snippet { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--brand-primary); }
.rating-snippet img { width: 18px; height: 18px; }

/* Editorial callouts */
.editorial-promise, .editorial-guidelines, .sustainability-commitments, .photo-and-format-tips, .rights-and-permissions, .privacy-note, .exercise-right, .data-transfer-notes, .processing-activities-table-placeholder, .technical-measures, .rights-details, .complaint-instructions {
  display: flex; flex-direction: column; gap: 8px; padding: var(--space-16);
  background: var(--brand-accent); border-left: 6px solid var(--brand-secondary); border-radius: 12px;
}

/* Map legend */
.map-legend { display: flex; align-items: center; gap: 8px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; background: #FFF; border: 1px solid var(--brand-accent); padding: 6px 10px; border-radius: 10px; }

/* Anchor links row */
.anchor-links { display: flex; flex-wrap: wrap; gap: 12px; }
.anchor-links a { background: var(--mint); color: #103B32; padding: 8px 12px; border-radius: 999px; font-weight: 700; }
.anchor-links a:hover { background: var(--sky); color: #083B52; }

/* FAQ */
.faq-accordion { display: flex; flex-direction: column; gap: var(--space-12); }
.faq-item { display: flex; flex-direction: column; gap: 6px; padding: var(--space-16); border-radius: 14px; background: #FFF; border: 2px solid var(--brand-accent); }
.faq-item h3 { margin: 0; }

/* Mini about */
.mini-about { display: flex; }

/* Contact summary block */
.contact-summary { display: flex; flex-direction: column; gap: 8px; color: var(--paper); }
.contact-summary img { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 6px; }

/* =====================
   8) TESTIMONIALS (ACCESSIBLE)
   ===================== */
.testimonial-card {
  background: #FFFFFF; color: var(--ink);
  border: 2px solid var(--brand-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.testimonial-card p { margin: 0; font-style: italic; }
.testimonial-author { color: var(--brand-secondary); font-weight: 700; }

/* =====================
   9) FOOTER
   ===================== */
footer { background: var(--brand-primary); color: var(--brand-accent); padding: var(--space-40) 0; margin-top: var(--space-60); }
footer .content-wrapper { background: transparent; box-shadow: none; padding: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { color: var(--brand-accent); background: rgba(250,243,224,0.08); padding: 8px 12px; border-radius: 10px; }
.footer-nav a:hover { background: rgba(250,243,224,0.18); }

.copyright { margin-top: var(--space-16); font-size: 14px; color: #E7E0CD; }

/* =====================
   10) PLAYFUL MICRO-ANIMATIONS
   ===================== */
@keyframes floaty {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
@keyframes popIn {
  0% { transform: scale(.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.content-wrapper { animation: popIn .3s ease both; }
.btn.primary { animation: floaty 3s ease-in-out infinite; }

/* =====================
   11) RESPONSIVE UTILITY
   ===================== */
.text-image-section { align-items: center; }
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

@media (min-width: 768px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
}

/* =====================
   12) PAGE-SPECIFIC NICETIES
   ===================== */
/* Index hero tagline emphasis */
.tagline { 
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-accent); border: 2px solid var(--sun); padding: 8px 12px; border-radius: 999px;
}

/* Regions seasonal calendar */
.seasonal-calendar { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #fff; border: 2px dashed var(--sky); border-radius: 12px; }

/* Learn more links */
.learn-more-links { display: flex; flex-wrap: wrap; gap: 12px; }
.learn-more-links a { color: var(--pop); font-weight: 800; border-bottom: 3px solid var(--pop); }
.learn-more-links a:hover { color: #FF3357; border-color: #FF3357; }

/* Value icons row images */
.value-icons-row img { width: 36px; height: 36px; }

/* Contact info list items inline icons */
.contact-info-list li { display: flex; align-items: center; gap: 8px; }
.contact-info-list img { width: 18px; height: 18px; }

/* =====================
   13) ACCESSIBLE COLOR CONTRAST AREAS
   - Testimonials and review sections use dark text on light backgrounds
   ===================== */
.testimonial-card, .rating-snippet, .user-tips-list li, .featured-recipes li { color: #1E1C1A; background-color: #FFFFFF; }

/* =====================
   14) MOBILE MENU BACKDROP (OPTIONAL DECOR)
   ===================== */
/* Kept solid colors for compatibility; no gradients used */

/* =====================
   15) COOKIE CONSENT BANNER & MODAL
   ===================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: #FFFFFF; color: var(--ink);
  border-top: 4px solid var(--brand-secondary);
  box-shadow: 0 -8px 20px rgba(0,0,0,0.1);
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  transform: translateY(100%);
  transition: transform .35s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-row { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cookie-actions .btn { padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow-1); }
.cookie-actions .accept { background: #27AE60; color: #fff; box-shadow: 0 6px 0 rgba(39,174,96,0.45), var(--shadow-1); }
.cookie-actions .reject { background: #E53935; color: #fff; box-shadow: 0 6px 0 rgba(229,57,53,0.4), var(--shadow-1); }
.cookie-actions .settings { background: var(--brand-accent); color: var(--brand-primary); }

/* Cookie modal */
.cookie-modal {
  position: fixed; inset: 0; z-index: 210; display: none;
  background: rgba(0,0,0,0.5);
  align-items: center; justify-content: center;
}
.cookie-modal.open { display: flex; }
.cookie-modal .modal-content {
  background: #FFFFFF; color: var(--ink);
  border-radius: 16px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-20); width: 92%; max-width: 680px;
}
.cookie-categories { display: flex; flex-direction: column; gap: 10px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--brand-accent); border-radius: 12px; }
.cookie-category .toggle { display: inline-flex; align-items: center; gap: 8px; }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* =====================
   16) UTILITIES
   ===================== */
.hidden { display: none !important; }
.center { display: flex; align-items: center; justify-content: center; }
.row { display: flex; flex-direction: row; gap: var(--space-12); }
.col { display: flex; flex-direction: column; gap: var(--space-12); }

/* =====================
   17) DESKTOP REFINEMENTS
   ===================== */
@media (min-width: 992px) {
  .container { gap: var(--space-24); }
  .content-wrapper { padding: var(--space-32); }
  .cta-row { gap: var(--space-16); }
}

/* =====================
   18) PRINT BASICS
   ===================== */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  body { background: #fff; }
  .content-wrapper { box-shadow: none; border: 1px solid #ddd; }
}

/* =====================
   19) ENSURE NO OVERLAPS
   ===================== */
main, header, footer { position: relative; z-index: 1; }

/* END */