/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Source+Sans+Pro:wght@300;400;500;600&display=swap');

/* Root Variables - Inspired by Design Mockup */
:root {
  --warm-taupe: #C4B5A0;
  --clay-terracotta: #B8704A;
  --rich-brown: #4A3429;
  --soft-beige: #E8DDD4;
  --cream-background: #F0EBE3;
  --soft-white: #FEFCFA;
  --accent-brown: #6B4423;
  --dark-pecan: #48260D;
  --earthy-brown: #5A3A2A;
  --sage-green: #A2B4A0;
}

body {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  background-color: var(--cream-background);
  margin: 0;
  padding: 0;
  color: var(--rich-brown);
  line-height: 1.6;
  font-size: 16px;
  position: relative;
  overflow-x: hidden;
}

/* Organic wave background using SVG */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='200' height='120' viewBox='0 0 200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,60 Q50,30 100,60 T200,60 L200,120 L0,120 Z' fill='%23D4C4B0' opacity='0.12'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='180' height='100' viewBox='0 0 180 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,50 Q45,20 90,50 T180,50 L180,100 L0,100 Z' fill='%23C9B29A' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 500px 240px, 700px 200px;
  background-position: 0% 30%, 100% 70%;
  background-repeat: repeat-x, repeat-x;
  animation: waveFloat 20s ease-in-out infinite;
}

/* Additional flowing wave layer */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='220' height='80' viewBox='0 0 220 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,40 Q55,15 110,40 T220,40 L220,80 L0,80 Z' fill='%23B8A48A' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 900px 160px;
  background-position: 50% 50%;
  background-repeat: repeat-x;
  animation: waveFloat 25s ease-in-out infinite reverse;
}

@keyframes waveFloat {
  0%, 100% {
    transform: translateX(0px) translateY(0px);
  }
  33% {
    transform: translateX(-20px) translateY(-10px);
  }
  66% {
    transform: translateX(20px) translateY(10px);
  }
}

/* Typography Hierarchy */
.app-title {
  font-family: 'Lora', Georgia, serif;
  text-align: center;
  margin-top: 20px;
  font-size: 3.2em;
  font-weight: 600;
  color: var(--rich-brown);
  letter-spacing: -0.02em;
}

.welcome-header {
  font-family: 'Lora', Georgia, serif;
  font-size: 2em;
  font-weight: 600;
  color: var(--rich-brown);
  margin: 0 0 20px;
  text-align: left;
}

.tagline {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  text-align: center;
  font-size: 1.2em;
  font-style: italic;
  margin-bottom: 30px;
  color: var(--dark-pecan);
  font-weight: 400;
}

h2, h3 {
  font-family: 'Lora', Georgia, serif;
  color: var(--earthy-brown);
  font-weight: 500;
}

h2 {
  font-size: 1.8em;
  text-align: center;
  margin: 30px 0 20px;
}

h3 {
  font-size: 1.4em;
  margin: 25px 0 15px;
}

/* Welcome Content Styling */
.welcome-text, .why-plant-forward {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--dark-pecan);
}

.welcome-text strong, .why-plant-forward strong {
  font-weight: 600;
  color: var(--earthy-brown);
}

/* Button Styling - Organic, Earth-rooted Design */
.cta-button {
  display: block;
  margin: 30px auto;
  background-color: var(--clay-terracotta);
  color: var(--soft-white);
  padding: 16px 32px;
  border: none;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(184, 112, 74, 0.3);
}

.cta-button:hover {
  background-color: var(--accent-brown);
  color: var(--soft-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(107, 68, 35, 0.4);
}

/* Phase Selection Buttons */
.phase-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 30px 20px;
}

.phase-option {
  background-color: var(--warm-taupe);
  border: none;
  padding: 14px 24px;
  border-radius: 20px;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--rich-brown);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(196, 181, 160, 0.3);
}

.phase-option:hover {
  background-color: var(--clay-terracotta);
  color: var(--soft-white);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(186, 120, 94, 0.4);
}

/* Content Areas */
.phase-info, .recipes, .micronutrient-cards {
  margin: 30px 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Recipe Cards - Organic Design */
.recipe-card {
  background-color: var(--soft-white);
  margin: 20px 0;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(162, 180, 160, 0.2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.recipe-card:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.recipe-title {
  background: none;
  border: none;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.2em;
  color: var(--earthy-brown);
  cursor: pointer;
  text-align: left;
  width: 100%;
  padding: 0;
  transition: color 0.3s ease;
}

.recipe-title:hover {
  color: var(--clay-terracotta);
}

.recipe-detail {
  padding: 15px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--dark-pecan);
}

.recipe-detail strong {
  color: var(--earthy-brown);
  font-weight: 600;
}

.recipe-detail em {
  color: var(--clay-terracotta);
  font-style: italic;
}

.recipe-detail ul, .recipe-detail ol {
  padding-left: 20px;
  margin: 10px 0;
}

.recipe-detail li {
  margin: 5px 0;
}

/* Back Button */
.back-button {
  display: block;
  margin: 30px auto;
  background-color: var(--sage-green);
  color: var(--dark-pecan);
  padding: 12px 24px;
  border: none;
  border-radius: 20px;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: var(--earthy-brown);
  transform: translateY(-1px);
}

/* Micronutrient Cards */
.micronutrient-cards {
  margin: 40px auto;
  max-width: 700px;
  padding: 0 20px;
}

.micronutrient-card {
  background: linear-gradient(135deg, var(--soft-beige), var(--warm-taupe));
  margin-bottom: 15px;
  border-radius: 14px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.micronutrient-card:hover {
  background: linear-gradient(135deg, var(--clay-terracotta), var(--accent-brown));
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.micronutrient-card button {
  background: none;
  border: none;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.1em;
  color: var(--dark-pecan);
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding: 0;
}

.micronutrient-card:hover button {
  color: var(--soft-white);
}

.micronutrient-detail {
  display: none;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dark-pecan);
}

.micronutrient-card:hover .micronutrient-detail {
  color: var(--soft-white);
}

.micronutrient-card:hover .micronutrient-detail a {
  color: var(--soft-white) !important;
}

.micronutrient-detail strong {
  font-weight: 600;
}

/* Footer and Disclaimer */
.disclaimer {
  font-size: 14px;
  color: var(--earthy-brown);
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(to bottom, transparent, var(--cream-background));
  margin-top: 40px;
  line-height: 1.5;
}

footer .smoothie-section {
  text-align: center;
  margin: 30px auto;
  padding: 20px;
}

.smoothie-section {
  margin: 40px auto;
  text-align: center;
  max-width: 420px;
}

.smoothie-section h3 {
  color: var(--earthy-brown);
  margin-bottom: 10px;
}

.smoothie-section p {
  color: var(--dark-pecan);
  margin-bottom: 20px;
  font-style: italic;
}

.smoothie-section iframe {
  border: none;
  width: 100%;
  max-width: 400px;
  height: 712px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Phase-specific micronutrient info styling */
.phase-info ul {
  list-style: none;
  padding: 0;
}

.phase-info li {
  background-color: var(--soft-white);
  margin: 10px 0;
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 4px solid var(--sage-green);
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .app-title {
    font-size: 2em;
    margin-top: 20px;
  }

  .phase-buttons {
    flex-direction: column;
    align-items: center;
  }

  .phase-option {
    width: 200px;
    text-align: center;
  }

  .phase-info, .recipes, .micronutrient-cards {
    margin: 20px 15px;
  }

  .recipe-card {
    padding: 15px;
  }
}

/* Subtle organic curves and linework */
.recipe-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(45deg, transparent, rgba(162, 180, 160, 0.1), transparent);
  border-radius: 16px;
  z-index: -1;
}

/* Focus states for accessibility */
button:focus,
.recipe-title:focus,
.micronutrient-card:focus {
  outline: 2px solid var(--clay-terracotta);
  outline-offset: 2px;
}

/* START: Wave Art Base */
.wave-art {
  position: absolute;
  z-index: 0;
  opacity: 0.08;
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

/* Wave 1: Top Left */
.wave-top-left {
  top: 60px;
  left: -80px;
  background-image: url("data:image/svg+xml;utf8,
    <svg viewBox='0 0 300 200' xmlns='http://www.w3.org/2000/svg'>
      <path d='M0,100 Q75,0 150,100 T300,100' stroke='%23A2B4A0' stroke-width='3' fill='none'/>
    </svg>");
}

/* Wave 2: Mid Right */
.wave-mid-right {
  top: 600px;
  right: -100px;
  background-image: url("data:image/svg+xml;utf8,
    <svg viewBox='0 0 300 200' xmlns='http://www.w3.org/2000/svg'>
      <path d='M0,100 Q75,0 150,100 T300,100' stroke='%23A38DAF' stroke-width='3' fill='none'/>
    </svg>");
}

/* Wave 3: Bottom Left */
.wave-bottom-left {
  top: 1200px;
  left: -60px;
  background-image: url("data:image/svg+xml;utf8,
    <svg viewBox='0 0 300 200' xmlns='http://www.w3.org/2000/svg'>
      <path d='M0,100 Q75,0 150,100 T300,100' stroke='%23D7888D' stroke-width='3' fill='none'/>
    </svg>");
}

/* Responsive Fix */
@media (max-width: 600px) {
  .wave-art {
    width: 200px;
    height: 140px;
    opacity: 0.06;
  }
}

.feedback-form textarea {
  padding: 12px;
  border: 2px solid var(--warm-taupe);
  border-radius: 10px;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  background-color: var(--soft-white);
  color: var(--rich-brown);
  width: 100%;
  box-sizing: border-box;
}

.feedback-form textarea:focus {
  outline: none;
  border-color: var(--clay-terracotta);
}

.feedback-button {
  background-color: var(--sage-green);
  color: var(--dark-pecan);
  padding: 12px 24px;
  border: none;
  border-radius: 20px;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feedback-button:hover {
  background-color: var(--clay-terracotta);
  color: var(--soft-white);
  transform: translateY(-1px);
}

.feedback-section {
  margin: 40px auto;
  text-align: center;
  max-width: 420px;
  padding: 0 20px;
}

.feedback-section h3 {
  text-align: center;
}

.feedback-section p {
  text-align: center;
}

.feedback-form {
  text-align: center;
  width: 100%;
}

.feedback-form textarea {
  margin: 0 auto 15px auto;
  display: block;
}

.feedback-button {
  display: block;
  margin: 0 auto;
}