/*
 * Awakening Eden · Portable site chrome
 *
 * A self-contained header and footer for the older v22-era guide pages, which
 * were built without site navigation and are dead ends for anyone arriving
 * from search. Everything here is namespaced under .ec- so it cannot collide
 * with eden-v22.css or eden-v23.css, and type is inherited from the host page
 * so each guide keeps its own voice while carrying the same brand.
 */

.ec-header.ec-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgb(105 112 82 / 0.22);
  background: rgb(255 253 247 / 0.94);
  backdrop-filter: blur(8px);
}

.ec-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100% - 2rem, 82rem);
  margin-inline: auto;
  padding-block: 0.6rem;
}

.ec-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: #233126;
  text-decoration: none;
}

.ec-brand img { width: 2.5rem; height: auto; }
.ec-brand strong { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; }
.ec-brand small { display: block; color: #6b7052; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }

.ec-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; }
.ec-nav a { color: #344734; font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.ec-nav a:hover, .ec-nav a:focus-visible { text-decoration: underline; text-underline-offset: 0.28rem; }

.ec-cta {
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  color: #fffdf7 !important;
  background: #344734;
  font-weight: 700;
}
.ec-cta:hover, .ec-cta:focus-visible { background: #3f5740; text-decoration: none !important; }

/* Dark forest green, matching .site-footer on the v23 pages. eden-v22.css sets
   `footer { background: ... !important }`, so the chrome deliberately adopts
   the same dark treatment rather than fighting it — the two already agree. */
.ec-footer.ec-footer {
  margin-top: 4rem;
  padding-block: 2.6rem;
  border-top: 1px solid rgb(255 253 247 / 0.14);
  background: #233126;
  color: #fffdf7;
}

.ec-footer.ec-footer .ec-footer-inner {
  display: grid;
  gap: 1.2rem;
  width: min(100% - 2rem, 82rem);
  margin-inline: auto;
  text-align: center;
}

.ec-footer.ec-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.4rem; }
.ec-footer.ec-footer nav a { color: rgb(255 253 247 / 0.86); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.ec-footer.ec-footer nav a:hover, .ec-footer.ec-footer nav a:focus-visible { color: #fffdf7; text-decoration: underline; text-underline-offset: 0.28rem; }
.ec-footer.ec-footer p { margin: 0; color: rgb(255 253 247 / 0.62); font-size: 0.82rem; }
.ec-footer.ec-footer .ec-blessing { color: #f1cf87; font-size: 1.05rem; font-style: italic; }

/* The Celtic tree of life, used once per guide as the turn into the closing
   invitation. The older guides have no image dividers of their own, so this
   is also the moment they pick up the site's illustrated voice. */
.ec-divider.ec-divider {
  display: block;
  width: min(100% - 2rem, 56rem);
  margin: clamp(2.5rem, 6vw, 4rem) auto clamp(-1rem, -1vw, 0rem);
  pointer-events: none;
}
.ec-divider.ec-divider img { display: block; width: 100%; height: auto; }

/*
 * Living challenge
 *
 * The closing invitation on every guide: one small, doable act, then a warm
 * door into the community to share what happened. Deliberately feels like a
 * page torn from a field journal rather than a call-to-action block — the
 * point is company, not conversion.
 */
.ec-challenge.ec-challenge {
  width: min(100% - 2rem, 50rem);
  margin: clamp(2.5rem, 6vw, 4.5rem) auto;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border: 1px solid rgb(184 148 75 / 0.42);
  border-radius: 1.6rem;
  background:
    radial-gradient(circle at 88% 8%, rgb(184 148 75 / 0.1), rgba(0, 0, 0, 0) 42%),
    linear-gradient(155deg, #fffdf7, #f4ecd9);
  box-shadow: 0 16px 40px rgb(35 49 38 / 0.08);
  color: #233126;
  text-align: center;
}

.ec-challenge.ec-challenge .ec-challenge-eyebrow {
  margin: 0 0 0.3rem;
  color: #a7654f;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ec-challenge.ec-challenge h2 {
  margin: 0 0 0.5rem;
  color: #233126 !important;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.15;
}

.ec-challenge.ec-challenge .ec-challenge-lead {
  max-width: 34rem;
  margin: 0 auto 1.6rem;
  color: #344734;
  font-size: clamp(1.06rem, 2vw, 1.28rem);
  font-style: italic;
  line-height: 1.5;
}

.ec-challenge.ec-challenge ol {
  display: grid;
  gap: 0.75rem;
  max-width: 34rem;
  margin: 0 auto 1.7rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
  text-align: left;
}

.ec-challenge.ec-challenge ol li {
  position: relative;
  padding-left: 2.6rem;
  color: #55603f;
  font-size: 0.96rem;
  line-height: 1.55;
}

.ec-challenge.ec-challenge ol li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -0.1rem;
  left: 0;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  background: #718457;
  color: #fffdf7;
  font-size: 0.8rem;
  font-weight: 800;
}

.ec-challenge.ec-challenge ol li strong { color: #233126; }

.ec-challenge.ec-challenge .ec-challenge-share {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px dashed rgb(105 112 82 / 0.34);
}

.ec-challenge.ec-challenge .ec-challenge-share p {
  max-width: 32rem;
  margin: 0 auto 1rem;
  color: #55603f;
  font-size: 0.95rem;
}

.ec-challenge-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.ec-challenge.ec-challenge .ec-challenge-actions a {
  padding: 0.62rem 1.25rem;
  border: 1px solid rgb(105 112 82 / 0.4);
  border-radius: 999px;
  background: #fffdf7;
  color: #344734;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.ec-challenge.ec-challenge .ec-challenge-actions a:hover,
.ec-challenge.ec-challenge .ec-challenge-actions a:focus-visible {
  border-color: rgb(105 112 82 / 0.7);
  background: #f6f0e2;
}

.ec-challenge.ec-challenge .ec-challenge-actions .ec-wa {
  border-color: rgb(58 106 74 / 0.5);
  background: linear-gradient(145deg, #3f7a52, #2f5f40);
  color: #f4fbf4;
}
.ec-challenge.ec-challenge .ec-challenge-actions .ec-wa:hover,
.ec-challenge.ec-challenge .ec-challenge-actions .ec-wa:focus-visible {
  background: linear-gradient(145deg, #47895c, #356a48);
}

.ec-challenge.ec-challenge .ec-challenge-note {
  margin: 1.2rem auto 0;
  max-width: 32rem;
  color: #6b7052;
  font-size: 0.84rem;
  font-style: italic;
}

/*
 * Dark hero contrast rescue.
 *
 * eden-v22.css sets `h1, h2, h3, h4, .display, .serif { color: var(--ae-forest)
 * !important }`. On the guides whose hero is a dark photo or green gradient
 * that painted the page's own title dark-green-on-dark-green — effectively
 * invisible. Only heroes explicitly marked .hero--dark are corrected, so the
 * guides with a light cream hero keep their dark headings.
 */
.hero--dark h1,
.hero--dark h2,
.hero--dark h3,
.hero--dark .display,
.hero--dark .serif {
  color: #fff8e8 !important;
  text-shadow: 0 2px 12px rgb(20 31 23 / 0.45);
}

@media (max-width: 46rem) {
  .ec-inner { flex-wrap: wrap; padding-block: 0.55rem; }
  .ec-brand { margin-right: 0; }
  .ec-nav { width: 100%; justify-content: center; gap: 0.3rem 0.9rem; }
  .ec-nav a { font-size: 0.8rem; }
}

/* ==========================================================================
   v23.14 — the Heartwood Gateway threshold, and shared educational boards
   for the four older guides that load eden-v22.css.
   ========================================================================== */

/* One illustrated threshold per guide, directly under the hero. The wide
   parchment banner is used at every width: a second square mobile file would
   only add a hidden download and an aspect-ratio change to manage. */
.ec-threshold.ec-threshold {
  display: block;
  width: min(100% - 2rem, 56rem);
  margin: clamp(1.5rem, 4vw, 2.75rem) auto clamp(1rem, 3vw, 2rem);
  pointer-events: none;
}
.ec-threshold.ec-threshold img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2160 / 810;
  border-radius: 1.1rem;
}

/* A teaching board inside an older guide: the picture explains, the caption
   carries the meaning as real text so it is never trapped in the pixels. */
.ec-board.ec-board {
  width: min(100% - 2rem, 52rem);
  margin: clamp(2rem, 5vw, 3rem) auto;
}
.ec-board.ec-board img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  border: 1px solid rgb(105 112 82 / 0.3);
  border-radius: 1.1rem;
  background: #f7f1e3;
}
.ec-board.ec-board figcaption {
  margin-top: 0.85rem;
  color: #5b4a35;
  font-size: 0.96rem;
  line-height: 1.6;
}
.ec-board.ec-board figcaption strong { color: #34412c; }
.ec-board .ec-board__note { margin-top: 0.5rem; font-size: 0.86rem; opacity: 0.9; }

/* A page-level `nav{background:...}` rule (written for an in-page nav) was also
   painting the shared dark footer's nav a near-white pill, leaving its cream
   links at 1.01:1. The shared footer supplies its own ground. */
.ec-footer.ec-footer nav { background: transparent; }
.ec-footer.ec-footer nav a { display: inline-block; padding-block: 0.3rem; }

/* One reversed vector mark in the footer, dark-ground contrast checked. */
.ec-footer-mark {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.9rem;
}