:root {
  --primary: #2D5A3D;
  --primary-light: #3d7a53;
  --primary-dark: #1e3d29;
  --accent: #8FD694;
  --earth: #5C4033;
  --warm: #F4E8C1;
}

.hero-garden {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  position: relative;
  overflow: hidden;
}
.hero-garden::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
  font-weight: 600;
  transition: all 0.3s;
}
.btn-primary:hover {
  background-color: var(--primary-light) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45,90,61,0.3);
}

.card-veggie {
  border-left: 4px solid var(--primary);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card-veggie:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.tag-indoor { background-color: #7c4dff; color: white; }
.tag-transplant { background-color: #ff6d00; color: white; }
.tag-directsow { background-color: var(--primary); color: white; }

.zone-badge {
  display: inline-block;
  background: var(--primary);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.cta-box {
  background: linear-gradient(135deg, var(--warm) 0%, #fff 100%);
  border: 2px solid var(--primary);
  border-radius: 8px;
  padding: 2rem;
}

#zip-input {
  font-size: 1.5rem;
  text-align: center;
  max-width: 200px;
  border: 3px solid var(--accent);
  border-radius: 8px;
}
#zip-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45,90,61,0.2);
  outline: none;
}

.planting-table th {
  background-color: var(--primary) !important;
  color: white !important;
}

.result-section { display: none; }
.result-section.is-active { display: block; }

@media (max-width: 768px) {
  #zip-input { font-size: 1.25rem; max-width: 100%; }

  /* Stack search input and button on mobile */
  .field.has-addons.has-addons-centered {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .field.has-addons.has-addons-centered > .control {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: 80% !important;
    margin-bottom: 0.5rem !important;
  }
  .field.has-addons.has-addons-centered > .control input,
  .field.has-addons.has-addons-centered > .control button {
    width: 100% !important;
    border-radius: 8px !important;
  }
  #zip-input {
    max-width: none !important;
  }

  /* Frost dates stack vertically on mobile */
  .frost-dates {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
  }
  .frost-dates .frost-separator {
    display: none;
  }

  /* Veggie cards full width with better spacing */
  .card-veggie {
    margin-bottom: 0.75rem;
  }
  .card-veggie .card-content {
    padding: 0.75rem;
  }
  .card-veggie .media-content .is-size-6,
  .card-veggie .media-content p {
    font-size: 0.85rem !important;
  }

  /* Tags wrap nicely */
  .tags.are-medium .tag {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
  }

  /* Hero text sizing */
  .hero-garden .title.is-1 {
    font-size: 1.75rem !important;
  }
  .hero-garden .subtitle.is-4 {
    font-size: 1rem !important;
  }
  .hero-garden .subtitle br {
    display: none;
  }

  /* Popular zones grid */
  .column.is-2 {
    flex: none;
    width: 50%;
  }

  /* CTA box */
  .cta-box {
    padding: 1.25rem;
  }

  .table-container { overflow-x: auto; }
}