/* ================================================================
   Peptides Plus — Theme CSS
   Overrides CSS custom properties only. No structural rules here.
   Brandbook ref: docs/brandbook.md — Site 2 (Health & Protocols)
   ================================================================ */

/* Google Fonts — Source Serif 4 (headings), Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=Inter:wght@400;500&display=swap');

:root {
  /* Colors — Brandbook Site 2 palette */
  --color-bg:           #FAF8F5;
  --color-surface:      #FFFFFF;
  --color-primary:      #2D5A3D;
  --color-accent:       #C17B2F;
  --color-accent-light: #FDF3E3;
  --color-text:         #3D3830;
  --color-text-body:    #3D3830;
  --color-text-muted:   #8A7F74;
  --color-muted:        #8A7F74;
  --color-border:       #E8E2D9;
  --color-primary-light:#EAF2EC;
  --color-caution:      #B85C38;
  --color-badge-bg:     #EAF2EC;
  --color-badge-text:   #2D5A3D;

  /* Typography — Brandbook Site 2 fonts */
  --font-heading: 'Source Serif 4', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-meta:    'Inter', system-ui, sans-serif;
  --font-mono:    monospace;

  /* Answer capsule */
  --answer-capsule-border-color: #C17B2F;
  --answer-capsule-bg:           #FDF3E3;

  /* Prose */
  --prose-max-width: 740px;
}

/* ── Protocol Maturity Badge variants ─────────────────────────── */
/* Brandbook ref: peptidesplus.md — Protocol Maturity Badge */
.badge--established {
  background: #EAF2EC;
  color: #2D5A3D;
}

.badge--emerging {
  background: #FDF3E3;
  color: #C17B2F;
}

.badge--research {
  background: #F0EEEC;
  color: #8A7F74;
}

.badge--case-based {
  background: #F5F2EE;
  color: #6B6259;
}

.badge--contraindicated {
  background: #FDECEA;
  color: #B85C38;
}

/* Override badge--category with forest green for this site */
.badge--category {
  background: var(--color-primary);
  color: #fff;
}

/* ── Safety section callout ───────────────────────────────────── */
.safety-callout {
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-caution);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
}

/* ── Condition tags — amber-outlined pills ────────────────────── */
.condition-tag {
  display: inline-block;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  border-radius: 3px;
  font-size: 0.78rem;
  padding: 2px 8px;
  font-family: var(--font-meta);
  text-decoration: none;
}

.condition-tag:hover {
  background: var(--color-accent-light);
  text-decoration: none;
}

/* ── Condition tags row ───────────────────────────────────────── */
.condition-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

/* ── Safety First block (homepage) ───────────────────────────── */
.safety-first-block {
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-light);
  border-radius: 0 6px 6px 0;
  padding: 1.5rem 1.75rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* ── Protocol area cards (homepage Featured Protocol Areas) ───── */
.protocol-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.protocol-area-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1.5rem;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s;
}

.protocol-area-card:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

.protocol-area-card__heading {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.protocol-area-card__desc {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.protocol-area-card__count {
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 500;
}

/* ── Conditions page ─────────────────────────────────────────── */
.conditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.condition-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1.5rem;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s;
}

.condition-card:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

.condition-card__label {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.condition-card__desc {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.condition-card__peptides {
  font-size: 0.8rem;
  color: var(--color-accent);
  font-style: italic;
}

/* ── About page — warm left rule ─────────────────────────────── */
.about-editorial {
  border-left: 3px solid var(--color-primary);
  padding-left: 1.5rem;
  margin-top: 2rem;
}

/* ── Responsive overrides ────────────────────────────────────── */
@media (max-width: 768px) {
  .protocol-area-grid {
    grid-template-columns: 1fr;
  }
}