/* Clover — site stylesheet. Deep green + warm cream palette, serif display
   headings on a system sans body. System fonts only (no webfonts: keeps the
   CSP tight and pages fast). Terracotta is for category tags and small
   highlights only — everything else stays green. */

:root {
  color-scheme: only light;
  --accent: #2f7d4e;
  --accent-dark: #1e4d33;
  --accent-soft: #e9f2e7;
  --terracotta: #c47b4a;
  --terracotta-soft: #f7ece2;
  --terracotta-dark: #8a4a26;
  --ink: #24291f;
  --muted: #5f6555;
  --paper: #faf7f0;
  --card: #ffffff;
  --border: #e4e0d3;
  --content-max: 44rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --radius: 0.75rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

h1,
h2,
h3 {
  font-family: var(--serif);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.container {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a {
  color: var(--accent-dark);
}

a:hover,
a:focus-visible {
  color: var(--accent);
}

a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
}

/* Accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-dark);
  color: #fff;
  padding: 0.5rem 1rem;
}

.skip-link:focus {
  left: 0;
  z-index: 10;
}

/* Header */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0 0;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
}

.site-title {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.site-mark {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.3rem;
  color: var(--accent-dark);
}

.site-wordmark {
  display: inline-block;
  width: 7.7rem;
  height: 3.32rem;
  color: var(--accent-dark);
}

.site-tagline {
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  align-self: flex-end;
  padding-bottom: 0.05rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 0.75rem 0;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 0.25rem;
  border-bottom: 3px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-bottom-color: var(--accent);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--accent-dark);
}

/* Hero */
.hero {
  max-width: var(--content-max);
  padding: 3rem 0 1.5rem;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 0.5rem;
}

.kicker a {
  text-decoration: none;
}

.kicker a:hover,
.kicker a:focus-visible {
  text-decoration: underline;
}

.hero h1,
.hero-text h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0 0 1rem;
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* Split hero (homepage): text left, image right, stacks on small screens */
.hero-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 0 1.5rem;
}

.hero-image {
  margin: 0;
}

.hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

@media (max-width: 47rem) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-image img {
    aspect-ratio: 3 / 2;
  }
}

/* Buttons (link-styled) */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent-dark);
  color: #fff;
  border: 1px solid var(--accent-dark);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--accent-dark);
  border: 1px solid var(--accent-dark);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Sections */
.section {
  padding: 1.5rem 0;
}

.section > h2 {
  font-size: 1.6rem;
  margin: 0 0 0.25rem;
}

.section-intro {
  color: var(--muted);
  max-width: var(--content-max);
  margin: 0 0 1.25rem;
}

/* Cards (app steps) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.card h3 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.step-icon {
  width: 2rem;
  height: 2rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

/* Store badges (store-badges.njk). The Apple SVG is edge-to-edge while the
   Google PNG has its mandated clear space baked in, so the Play badge is
   set 1.5x taller to land on the same visual height. Both badges keep
   their own clear space via the flex gap — don't tighten it below the
   badge height / 4. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.store-badge {
  display: inline-flex;
  border-radius: 0.5rem;
}

.store-badge img {
  display: block;
  height: 2.5rem;
  width: auto;
}

.store-badge .badge-play {
  height: 3.75rem;
}

/* Pre-launch state (app.comingSoon): same badges, unlinked and dimmed, with
   a "Coming soon" note beside them. Dimming is done here rather than in the
   asset so Apple's and Google's artwork stays unmodified. */
.store-badges.is-soon .store-badge {
  opacity: 0.55;
}

.store-soon {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

/* QR panel on /app/. Shown only where a second device is plausible: a
   pointer that hovers (so not a phone or tablet) on a wide enough screen. */
.qr-panel {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 40rem) {
  .qr-panel {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: var(--content-max);
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1rem 0 2rem;
  }
}

.qr-panel img {
  flex: none;
  width: 9rem;
  height: 9rem;
}

.qr-panel h2 {
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}

.qr-panel p {
  margin: 0;
}

/* Article cards (homepage featured + /articles/) */
.article-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.article-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.article-card:hover,
.article-card:focus-visible {
  border-color: var(--accent);
  color: inherit;
}

.article-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.article-card-body {
  padding: 1rem 1.25rem 1.25rem;
}

.article-card h2,
.article-card h3 {
  font-size: 1.15rem;
  margin: 0.5rem 0 0.35rem;
}

.article-card:hover h2,
.article-card:hover h3,
.article-card:focus-visible h2,
.article-card:focus-visible h3 {
  color: var(--accent-dark);
}

.article-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.article-card .article-date {
  font-size: 0.85rem;
}

.tag {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--terracotta-dark);
  background: var(--terracotta-soft);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

/* Browse by problem: pill links */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.pill-list a {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.pill-list a:hover,
.pill-list a:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Quick symptom check: CSS-only, radio buttons reveal a matching panel.
   No JavaScript — :checked on the hidden radio drives the visible state. */
.symptom-check {
  background: var(--accent-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 1.5rem 0;
}

.symptom-check .kicker {
  color: rgba(255, 255, 255, 0.7);
}

.symptom-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.symptom-fieldset legend {
  padding: 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  color: #fff;
}

.symptom-check .section-intro {
  color: rgba(255, 255, 255, 0.75);
}

.symptom-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
}

.symptom-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.symptom-option {
  display: inline-block;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 500;
}

.symptom-input:checked + .symptom-option {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.symptom-input:focus-visible + .symptom-option {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.symptom-results {
  flex-basis: 100%;
}

.symptom-result {
  display: none;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.symptom-result p {
  margin: 0;
}

#symptom-yellow:checked ~ .symptom-results #result-yellow,
#symptom-brown:checked ~ .symptom-results #result-brown,
#symptom-drooping:checked ~ .symptom-results #result-drooping {
  display: block;
}

/* Trust strip */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 2rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
  margin: 2rem 0;
}

.trust-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.trust-strip strong {
  color: var(--ink);
}

/* End-of-article app CTA */
.app-cta {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  padding: 1.5rem 1.5rem 1.25rem;
  margin: 2.5rem 0 1.5rem;
}

.app-cta p {
  margin: 0 0 0.5rem;
}

.app-cta .small {
  margin: 0;
}

.app-cta .store-badges {
  justify-content: center;
  margin: 1rem 0 0.75rem;
}

/* Prose (article bodies and text pages) */
.prose {
  max-width: var(--content-max);
  padding-bottom: 2rem;
  overflow-wrap: break-word;
}

.prose h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.5rem;
}

.prose h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}

.prose img {
  max-width: 100%;
  border-radius: var(--radius);
  margin: 1rem 0;
}

img.article-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  max-height: 22rem;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0 0 1.5rem;
}

/* Article list page */
.article-list {
  padding-bottom: 2rem;
}

.article-date {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.85rem;
}

/* Tables inside article prose */
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.prose th,
.prose td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.prose thead th {
  background: var(--accent-soft);
}

.prose tbody tr:last-child td {
  border-bottom: none;
}

/* Pet toxicity table (/pet-safety/) */
.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pet-toxicity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.pet-toxicity-table th,
.pet-toxicity-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.pet-toxicity-table td:last-child,
.pet-toxicity-table th[scope="row"] {
  white-space: normal;
}

.pet-toxicity-table thead th {
  background: var(--accent-soft);
}

.pet-toxicity-table tbody tr:last-child th,
.pet-toxicity-table tbody tr:last-child td {
  border-bottom: none;
}

.pet-toxicity-table tbody tr:target {
  background: var(--accent-soft);
}

.pet-toxicity-table .latin-name {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* Footer */
.site-footer {
  background: var(--accent-dark);
  color: #fff;
  margin-top: 3rem;
  padding: 2rem 0;
}

.site-footer .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
}

.site-footer .footer-heading {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.site-footer a {
  color: #d6e9dc;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin: 0.25rem 0;
}

.site-footer p {
  margin: 0 0 0.75rem;
}

/* The sitewide focus outline is --accent-dark, which is the footer's own
   background — so badges here need a light ring to stay visible. */
.site-footer .store-badge:focus-visible {
  outline-color: #fff;
}

/* Print: drop chrome that wastes ink and doesn't help on paper */
@media print {
  .site-nav,
  .site-footer,
  .app-cta,
  .hero-actions,
  .store-badges,
  .qr-panel {
    display: none;
  }

  body {
    background: #fff;
  }
}