/* Canopy Early Learning — colour accents
   Extra pops of the brand's blush-clay, willow and eucalyptus.
   Load after styles.css (and brand-type.css if used).
   Contrast rules kept (canopy-README.md):
   - blush-clay and willow only ever carry bark text
   - eucalyptus is decorative or large display type only */

/* ---------- Eyebrow labels: a small clay dash ---------- */

.eyebrow { display: flex; align-items: center; gap: var(--space-3); }
.eyebrow::before {
  content: ""; width: 28px; height: 3px; flex: none;
  background: var(--blush-clay); border-radius: var(--radius-pill);
}
.intro-copy .eyebrow { justify-content: center; }

/* ---------- Our story: display figure in eucalyptus ---------- */

.story-facts strong { color: var(--eucalyptus); }
.story-card { border-top: 6px solid var(--blush-clay); }

/* ---------- What's different: numbered circles, active one in clay ---------- */

.exp .num {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--off-white) 35%, transparent);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.exp.is-active .num { background: var(--blush-clay); border-color: var(--blush-clay); color: var(--bark); }
.exp { grid-template-columns: 52px 1fr; }

/* ---------- Values: willow panel beside the photo ---------- */

.values-split { background: var(--willow); }
.values-content .eyebrow,
.values-content .value .text-label { color: var(--bark); }
.values-content .eyebrow::before { background: var(--forest); }
.values-list, .value { border-color: color-mix(in srgb, var(--bark) 22%, transparent); }

/* ---------- FAQ: clay marker on the open question ---------- */

.faq details[open] summary { color: var(--bark); }
.faq details[open] summary::after { background: var(--blush-clay); border-color: var(--blush-clay); color: var(--bark); }

/* ---------- Visit facts: willow rule above each fact ---------- */

.facts li { border-top: 2px solid var(--willow); }