/* ─────────────────────────────────────────────────────────────────────────
   Simple Home Kitchen — App-level styles (layered on top of style.css)
   Color palette: warm greens / cream / herb-earth tones
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Override base palette for kitchen/herbal brand */
  --primary:        #3a7d44;   /* herb green */
  --primary-light:  #52b069;
  --primary-dark:   #245c2f;
  --accent:         #e8a045;   /* warm spice amber */
  --cream:          #faf7f2;
  --earth:          #7c5a3a;
  --background:     #faf7f2;
  --header-bg:      #ffffff;
  --nav-bg:         #f4f0e8;
  --nav-link:       #3a7d44;
  --nav-link-hover: #245c2f;
}

/* ── Site Logo ──────────────────────────────────────────────────────────── */
.site-logo   { height: 56px; width: auto; object-fit: contain; }
.footer-logo { height: 40px; width: auto; }
.logo-link   { display: inline-flex; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.65em 1.4em;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-primary:hover  { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover  { background: var(--primary); color: #fff; }
.btn-affiliate {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-full { width: 100%; text-align: center; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: #fff;
  padding: 5em 1em;
  text-align: center;
}
.hero-title { font-size: 3em; color: #fff; margin-bottom: 0.4em; }
.hero-sub   { font-size: 1.25em; margin-bottom: 1.5em; opacity: .92; }
.hero-actions { display: flex; gap: 1em; justify-content: center; flex-wrap: wrap; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { padding: 3em 0; }
.section-title {
  font-size: 1.75em;
  margin-bottom: 1em;
  color: var(--primary-dark);
}
.section-footer { text-align: center; margin-top: 2em; }

/* ── Category Pills ──────────────────────────────────────────────────────── */
.pills      { display: flex; gap: 0.75em; flex-wrap: wrap; }
.pill {
  background: #fff;
  border: 2px solid var(--primary-light);
  color: var(--primary-dark);
  padding: 0.5em 1.1em;
  border-radius: 2em;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95em;
}
.pill:hover        { background: var(--primary); color: #fff; border-color: var(--primary); }
.pill-herbal       { border-color: #52b069; }
.pill-health       { border-color: #34d399; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5em; }
.card  {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.12); transform: translateY(-3px); }
.card a     { text-decoration: none; color: inherit; display: block; }
.thumbnail  { margin: 0; overflow: hidden; height: 200px; }
.thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-content  { padding: 1em 1.25em 1.25em; }
.card-content h2, .card-content h3 { font-size: 1.1em; margin: 0.25em 0 0.5em; color: var(--primary-dark); }
.card-category { font-size: 0.8em; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); font-weight: 700; }
.card-date     { font-size: 0.8em; color: #888; }
.card-meta     { font-size: 0.85em; color: #666; }
.empty-state   { color: #888; font-style: italic; }

/* ── Nav enhancements ────────────────────────────────────────────────────── */
.nav-cta {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 4px;
  padding: 0.35em 0.85em;
}
.has-dropdown { position: relative; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border-radius: 6px;
  min-width: 180px;
  z-index: 100;
  padding: 0.5em 0;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown li { list-style: none; }
.dropdown a  { padding: 0.5em 1.25em; display: block; color: var(--foreground); }
.dropdown a:hover { background: var(--cream); color: var(--primary); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer    { background: var(--primary-dark); color: #e8f5e9; padding: 3em 0 0; }
.footer-inner   { display: flex; gap: 3em; flex-wrap: wrap; padding-bottom: 2em; }
.footer-brand   { flex: 1; min-width: 180px; }
.footer-tagline { font-size: 0.95em; margin-top: 0.5em; opacity: .8; }
.footer-nav ul  { list-style: none; padding: 0; margin: 0; }
.footer-nav li  { margin-bottom: 0.4em; }
.footer-nav a   { color: #c8e6c9; text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-social  { display: flex; gap: 1em; align-items: flex-start; font-size: 1.5em; flex-wrap: wrap; }
.footer-social a { color: #a5d6a7; }
.footer-social a:hover { color: #fff; }
.footer-bottom  { border-top: 1px solid #2e7d32; padding: 1em 0; text-align: center; font-size: 0.85em; opacity: .7; }
.affiliate-disclosure { font-size: 0.8em; margin-top: 0.35em; opacity: .65; }

/* ── Recipe single page ──────────────────────────────────────────────────── */
.recipe-single .recipe-header  { margin-bottom: 1.5em; }
.recipe-meta-bar { display: flex; gap: 1.5em; flex-wrap: wrap; font-size: 0.9em; margin-top: 0.75em; color: #555; }
.recipe-image img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 8px; }
.recipe-body  { display: grid; grid-template-columns: 1fr 2fr; gap: 2em; margin-top: 2em; }
@media (max-width: 700px) { .recipe-body { grid-template-columns: 1fr; } }
.recipe-ingredients ul, .recipe-instructions ol { padding-left: 1.5em; line-height: 1.8; }
.recipe-notes  { background: #f0fdf4; border-left: 4px solid var(--primary); padding: 1em 1.25em; border-radius: 4px; }
.breadcrumb    { font-size: 0.85em; color: #888; }
.breadcrumb a  { color: var(--primary); text-decoration: none; }
.recipe-tags   { margin-top: 2em; display: flex; gap: 0.5em; flex-wrap: wrap; }
.tag { background: #e8f5e9; color: var(--primary-dark); padding: 0.25em 0.75em; border-radius: 2em; font-size: 0.85em; }

/* ── Product cards (affiliate) ───────────────────────────────────────────── */
.recipe-products { grid-column: 1 / -1; }
.product-cards   { display: flex; gap: 1.25em; flex-wrap: wrap; }
.product-card    { display: flex; gap: 1em; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1em; max-width: 320px; }
.product-card img { width: 80px; height: 80px; object-fit: contain; }
.disclosure      { font-size: 0.8em; color: #888; margin-bottom: 1em; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group        { margin-bottom: 1.25em; }
.form-group label  { display: block; font-weight: 600; margin-bottom: 0.35em; }
.form-group input,
.form-group textarea,
.form-group select { width: 100%; padding: 0.6em 0.85em; border: 1px solid #d1d5db; border-radius: 4px; font-size: 1em; font-family: inherit; }
.field-error  { color: #ef4444; font-size: 0.85em; margin-top: 0.25em; display: block; }
.form-disclaimer { font-size: 0.8em; color: #888; margin-top: 0.5em; text-align: center; }
.alert-success { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; padding: 0.75em 1em; border-radius: 4px; margin-top: 1em; }

/* ── E-book landing ──────────────────────────────────────────────────────── */
.ebook-hero  { background: linear-gradient(135deg, #f0fdf4, #dcfce7); padding: 4em 1em; }
.ebook-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; align-items: center; }
@media (max-width: 700px) { .ebook-inner { grid-template-columns: 1fr; } }
.ebook-features { list-style: none; padding: 0; margin: 1.25em 0; line-height: 2; }
.ebook-features li i { color: var(--primary); margin-right: 0.5em; }
.ebook-form-wrap { background: #fff; padding: 2em; border-radius: 10px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }

/* ── Filter tabs ─────────────────────────────────────────────────────────── */
.filter-tabs { display: flex; gap: 0.5em; flex-wrap: wrap; margin-bottom: 2em; }
.tab { padding: 0.4em 1em; border: 2px solid #d1d5db; border-radius: 2em; text-decoration: none; color: var(--foreground); font-size: 0.9em; }
.tab:hover, .tab.active { border-color: var(--primary); color: var(--primary); background: #f0fdf4; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination { margin-top: 2.5em; display: flex; justify-content: center; }

/* ── Prose (about/posts) ─────────────────────────────────────────────────── */
.prose { max-width: 72ch; line-height: 1.8; }
.prose h2 { color: var(--primary-dark); margin-top: 1.75em; }