/* Components used only by the two September 2026 food guides. */
.food-guide .food-urgent { margin: 0 0 24px; }
.food-guide .food-urgent strong { font-size: 1rem; }
.food-guide .food-entries { margin: 0 0 12px; }
.food-guide .food-entries section { padding: 20px 0; margin: 0; border-bottom: 1px solid var(--card-border); background: transparent; }
.food-guide .food-entries section:last-child { border-bottom: none; }
.food-guide .food-entries h3, .food-guide .food-data h3 { font-family: var(--font-heading); color: var(--green-ink); font-size: 1.5rem; line-height: 1.3; margin: 0 0 10px; }
.food-guide .food-entries p { margin: 0; }
/* Second paragraph inside an entry (added Sept 12, 2026 for the sweet-basil
   variety note). Only herbs-for-rabbits.html has one today; p + p means every
   single-paragraph entry on the other food guides is untouched. */
.food-guide .food-entries p + p { margin: 14px 0 0; }

/* Variety note (added Sept 12, 2026): a lighter-weight sibling to
   .article-caution for a paragraph that clarifies which type/cultivar of a
   food the sourcing actually covers. Reuses the same leafy-green accent so it
   reads as part of the same "pause and check" family, but skips the box
   background, border-radius, and mandatory caution-bunny illustration that
   .article-caution requires — this is a quiet in-paragraph flag, not a
   stand-alone safety callout. Kept out of rh-styles-e6.css because only the
   food guides use it today. Sized and colored to match the existing
   .food-data-note / .food-image-credit precedent below (0.85rem, 1.6 line-
   height, --text-muted) after Lynn felt the first pass — full body size and
   full-strength ink — was competing with the herb entry above it instead of
   sitting quietly underneath. Links inside keep the sitewide `a { color:
   var(--green-ink) }` rule regardless — an element's own color always beats
   an inherited one, so the citations still stand out against the muted
   prose. */
.food-guide .food-entries p.variety-note {
  border-left: 3px solid var(--caution-accent);
  padding-left: 16px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.food-guide .food-entries .variety-note-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
/* The loose-spaced list once lived here as .food-plain-list, scoped to
   .food-guide. Promoted to the site-wide .plain-list in rh-styles-e6.css
   (September 8, 2026) so any article can use it, not just these two. */
.food-guide .food-data { background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: 12px; padding: clamp(20px,3vw,36px); margin: 24px 0; }
.food-guide .food-data-intro { max-width: 760px; }
.food-guide .food-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--text-muted); margin: 0 0 8px; }
.food-guide .food-table-scroll { overflow-x: auto; }
.food-guide .food-table-scroll table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 1.0625rem; }
.food-guide .food-table-scroll caption { text-align: left; font-weight: 700; margin: 0 0 12px; }
.food-guide .food-table-scroll th, .food-guide .food-table-scroll td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--card-border); }
.food-guide .food-table-scroll thead th { color: var(--green-ink); background: var(--hay-chip); border-bottom: 2px solid var(--border-accent); }
.food-guide .food-table-scroll tbody tr:nth-child(odd)  { background: var(--bg-raised); }
.food-guide .food-table-scroll tbody tr:nth-child(even) { background: var(--bg-soft); }
.food-guide .table-swipe-cue { display: none; }
.food-guide .food-data-note, .food-guide .food-image-credit { color: var(--text-muted); font-size: .85rem; line-height: 1.6; margin-top: 18px; }
.food-guide .article-sources a { overflow-wrap: anywhere; }
.food-guide .article-cover { object-position: center 62%; }
@media (max-width: 900px) { .food-guide .article-cover { height: auto; object-position: center 68%; } }
@media (max-width: 600px) {
  .food-guide .food-data { padding: 18px; }
  .food-guide .food-entries section { padding: 18px 0; }
  .food-guide .table-swipe-cue {
    display: block;
    margin: 10px 0 8px;
    color: var(--green-ink);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
}

/* Herbs article: keep the scene-setting copy with the hero intro so the page
   moves cleanly from the split opener into the Quick Answer panel. */
.herbs-guide .feature-intro .article-opening {
  max-width: 40rem;
  margin: 16px 0 0;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-style: normal;
  line-height: 1.72;
}

.herbs-guide .feature-intro .opening-shortcut-wrap {
  margin: 14px 0 0;
}

/* Deliberately NOT the pale --hay-chip tint used by the inert nav/topic
   chips elsewhere on this page (see .feature-nav-title's chip, line ~62 of
   the article HTML) — a chip-colored pill reads as a label, not a control,
   which is why the two earlier attempts at this link didn't feel clickable.
   This borrows the site's real button contrast (see .btn-donate in
   rh-styles-e6.css) so it unmistakably looks pressable in both themes. */
.herbs-guide .feature-intro .opening-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 11px 20px;
  border: 2px solid var(--green-deep);
  border-radius: 999px;
  background: var(--green-deep);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(52, 76, 40, 0.25);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.herbs-guide .feature-intro .opening-shortcut:hover,
.herbs-guide .feature-intro .opening-shortcut:focus-visible {
  background: var(--green-hover);
  border-color: var(--green-hover);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 3px 9px rgba(52, 76, 40, 0.32);
}

.herbs-guide .feature-intro .opening-shortcut:focus-visible {
  outline: 2px dashed var(--green-deep);
  outline-offset: 3px;
}

.herbs-guide .feature-intro .opening-shortcut span {
  flex: 0 0 auto;
  font-size: 1.05em;
}

/* The shared feature-card treatment intentionally uses smaller supporting
   copy, but 0.95rem made these practical instructions fall below the site's
   readable body-text floor. */
.herbs-guide .feature-cards p {
  font-size: 1.0625rem;
  line-height: 1.72;
}

/* Herb-identification "at a glance" cards (added Sept 12, 2026), from owner
   feedback that a five-way text comparison would help at the garden center.
   Real Adobe Stock photos landed Sept 12, 2026 — .herb-compare-photo is now
   a real photo frame (rounded, cropped to fill) rather than the original
   dashed-border placeholder. Deliberately its own component rather than
   reusing .feature-cards: that grid is fixed at 3 columns for the numbered
   how-to steps elsewhere on this page, where 5 herb cards need to reflow
   instead. */
.herbs-guide .herb-compare { margin: 4px 0 32px; }
/* The card grid breaks out to the full page width, but its heading and note
   stay on the 760px reading column. Otherwise the h3 hangs 200px left of the
   "Five safe herbs" h2 it belongs to, reading as a new section. Auto margins
   are a no-op below 900px, where .article-body itself is capped at 760px. */
.herbs-guide .herb-compare > :is(h3, .herb-compare-note) {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.herbs-guide .herb-compare-note {
  color: var(--text-soft);
  margin-top: 4px;
  margin-bottom: 20px;
}
.herbs-guide .herb-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* The parsley card is taller than the rest (it stacks two photos instead
     of one), and grid rows stretch every item to match the tallest by
     default — that would inflate all four single-photo cards with empty
     space below their content. align-items: start lets each card size to
     its own content instead. */
  align-items: start;
}
.herbs-guide .herb-compare-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 18px 18px 20px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--bg-card);
}
.herbs-guide .herb-compare-photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-soft);
  margin-bottom: 14px;
}
.herbs-guide .herb-compare-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Parsley's two photos (curly and flat-leaf) stack in one card instead of
   splitting into two grid cells, so the "either/or, same plant" point in
   the copy stays attached to one card. Each half keeps the same 4/3 crop as
   every other card's single photo — the card is simply taller, which is
   what align-items: start on the grid above is for. */
.herbs-guide .herb-compare-photo-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.herbs-guide .herb-compare-photo-stack .herb-compare-photo { margin-bottom: 0; }
.herbs-guide .herb-compare-photo-half { margin: 0; }
.herbs-guide .herb-compare-photo-half figcaption {
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--text-muted);
}
.herbs-guide .herb-compare-card strong {
  display: block;
  font-family: var(--font-heading);
  color: var(--green-ink);
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.herbs-guide .herb-compare-card p {
  font-size: 0.92rem;
  line-height: 1.58;
  margin: 0 0 12px;
  color: var(--text-soft);
}
.herbs-guide .herb-compare-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--hay-chip);
  color: var(--green-ink);
}
/* Herbs offered in small, rotating amounts rather than daily (basil, dill,
   mint, and parsley, per USDA calcium figures) get the same warm/caution-
   adjacent tint as the caution art background, so they read apart from the
   daily-friendly herb (cilantro) at a glance. --caution-art-bg stays a light
   tan in both themes (see --badge-tan-bg on .sponsor-badge), so this pairs
   it with --text-dark rather than the inherited --green-ink, which goes
   pale in dark mode and would sit low-contrast on a light chip. */
.herbs-guide .herb-compare-tag--rotate { background: var(--caution-art-bg); color: var(--text-dark); }
@media (max-width: 600px) {
  .herbs-guide .herb-compare-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
}