/* GMODF - Grow My Own Damn Food™
   Brand overrides + extra rustic charm on top of Tailwind
*/

:root {
  --cream: #F8F4EC;
  --dirt: #3F2A1D;
  --terracotta: #C65D3B;
  --sage: #6B8F71;
  --warm-brown: #8B5E3C;
  --tx-blue: #4A6FA5;
  --text: #2C2522;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background-color: var(--cream);
}

h1, h2, h3, .heading-rugged {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.rugged {
  letter-spacing: -0.02em;
}

/* Buttons */
.btn-primary {
  background-color: var(--terracotta);
  color: white;
  font-weight: 600;
  transition: all 0.1s ease;
}

.btn-primary:hover {
  background-color: #a84c2e;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--dirt);
  color: var(--cream);
  font-weight: 600;
  transition: all 0.1s ease;
}

.btn-secondary:hover {
  background-color: #2a1f17;
}

.btn-outline {
  border: 2px solid var(--dirt);
  color: var(--dirt);
  font-weight: 600;
}

.btn-outline:hover {
  background-color: var(--dirt);
  color: var(--cream);
}

/* Cards */
.card {
  background-color: white;
  border: 1px solid #e8e0d3;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.article-card, .guide-card {
  cursor: pointer;
}

/* Badges & filters */
.badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: #f0e9dc;
  color: var(--dirt);
}

.badge-soil { background-color: #e8d9c8; color: #5c4633; }
.badge-grow { background-color: #d6e4d6; color: #3f5a3f; }
.badge-pest { background-color: #f3d9d0; color: #7c4638; }
.badge-meat { background-color: #e8d8c4; color: #5c4633; }
.badge-forage { background-color: #d9e2d4; color: #40563f; }
.badge-eat { background-color: #f0e0d0; color: #6b4e37; }
.badge-mindset { background-color: #d8e0e8; color: #3a4d62; }

.filter-btn {
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid #d4c9b8;
  background: white;
  color: var(--dirt);
  transition: all .1s;
  white-space: nowrap;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--sage);
  color: white;
  border-color: var(--sage);
}

/* Modal */
.modal {
  animation: fadeInModal 0.15s ease-out forwards;
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  animation: slideUp 0.2s ease-out forwards;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Forms */
input[type="email"], input[type="text"] {
  border: 2px solid #d4c9b8;
  background: white;
}

input:focus {
  border-color: var(--terracotta);
  outline: none;
  box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.15);
}

/* Footer */
footer {
  border-top: 3px solid var(--dirt);
}

/* Misc charm */
.texas-rule {
  border-left: 4px solid var(--terracotta);
}

.felix-container {
  filter: drop-shadow(2px 4px 3px rgb(0 0 0 / 0.15));
}

/* Felix PNG - make sure square transparent corners are hidden and it renders round */
img[src*="felix.png"] {
  background-color: #F8F4EC;
  border-radius: 9999px;
  object-fit: cover;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  h1 { font-size: 2.75rem !important; line-height: 1.05 !important; }
  .hero-sub { font-size: 1.1rem !important; }
}