/* Template: wellness-organic/skin.css
 * Register: holistic / breathwork / yoga-therapy / naturopath — earthy and
 * slow. Owns: warm cream surface, sage-green ink, terracotta accent. Soft
 * rounded everything (20-24px radius), pill buttons, generous breath in
 * spacing, organic blob ornament behind the hero. Motion is slower than
 * therapist-warm (1500ms) with a 22px rise — between therapist-warm's
 * 28px alive register and premium-academic's 16px restraint.
 * Inherits structural chrome from /_shared/styles/chrome.css.
 */

:root {
  --color-primary:           #7a8770;            /* sage — text + brand */
  --color-bg:                #f7f3eb;            /* warm cream */
  --color-accent:            #c2735a;            /* terracotta */
  --color-text:              #2f3331;            /* charcoal — for body */
  --color-muted:             #6a716a;
  --color-muted-bg:          #e9ebe2;            /* soft sage band */
  --color-secondary-bg:      #efe8d8;            /* deeper cream band */
  --color-border-hairline:   rgba(122, 135, 112, 0.18);
  --color-divider-inverse:   rgba(255, 255, 255, 0.22);
  --color-soft-shadow:       rgba(47, 51, 49, 0.06);
  --color-accent-soft:       rgba(194, 115, 90, 0.10);     /* hero ornament inner */
  --color-accent-faint:      rgba(194, 115, 90, 0.06);     /* hero ornament outer */

  /* Fraunces is a modern serif with rounded character — proxies the
   * organic-warm serif register. Inter is the clean humanist body.
   * Both can be swapped per-client via design.fonts in the intake. */
  --font-display:            'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:               'Inter', 'Manrope', system-ui, -apple-system, sans-serif;

  --space-section:           clamp(4rem, 10vw, 8rem);
  --space-content:           clamp(1rem, 4vw, 3rem);

  --radius-card:             20px;
  --radius-button:           999px;   /* pill — anti-clinical */
  --radius-image:            18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;                  /* generous — breath in the spacing */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Top header (solid cream, sage hairline, NOT sticky) ------ */
.tpl-wellness-organic .site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-hairline);
  position: relative;
  z-index: 100;
}
.tpl-wellness-organic .site-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.4rem clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.tpl-wellness-organic .site-header__brand {
  text-decoration: none;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
}
.tpl-wellness-organic .site-header__brand-mark {
  color: var(--color-accent);
  font-size: 1rem;
  line-height: 1;
}
.tpl-wellness-organic .site-header__brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.tpl-wellness-organic .site-header__brand-tagline {
  margin-left: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Desktop nav — letter-spaced, terracotta underline on hover */
.tpl-wellness-organic .site-nav--desktop .site-nav__list {
  display: flex;
  gap: clamp(1.5rem, 2.6vw, 2.6rem);
}
.tpl-wellness-organic .site-nav__link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.78;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: opacity 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.tpl-wellness-organic .site-nav__link:hover { opacity: 1; color: var(--color-accent); }
/* wellness active-state: soft rounded pill (earthy, not the shared bottom-border) */
.tpl-wellness-organic .site-nav__link.is-active {
  opacity: 1;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-bottom-color: transparent;
  border-radius: 999px;
  padding: 0.2rem 0.85rem;
}

/* ---------- Main column ---------------------------------------------- */
.tpl-wellness-organic .site-main { min-height: 50vh; }

/* ---------- Buttons — pill-shaped, terracotta fill ------------------ */
/* Skeleton-scoped tints so other templates aren't affected. Per the
 * skeleton contract (Rule 4), block-level tints belong on the .tpl-X
 * selector, not unscoped .block__* rules. */
.tpl-wellness-organic .block__cta,
.tpl-wellness-organic .block__btn,
.tpl-wellness-organic .block__row-button {
  display: inline-block;
  padding: 1.05rem 2.2rem;
  background: var(--color-accent);
  color: var(--color-on-accent, var(--color-bg));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.tpl-wellness-organic .block__cta:hover,
.tpl-wellness-organic .block__btn:hover,
.tpl-wellness-organic .block__row-button:hover {
  background: transparent;
  color: var(--color-accent);
}
/* Ghost (secondary) variant — text-only with terracotta underline */
.tpl-wellness-organic .block__btn--secondary,
.tpl-wellness-organic .block--cta-band .block__cta + .block__cta,
.tpl-wellness-organic .block--hero-text-only .block__cta + .block__cta {
  background: transparent;
  color: var(--color-accent);
  border-color: transparent;
}
.tpl-wellness-organic .block__btn--secondary:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ---------- Soft rounded images across blocks ------------------------ */
/* Anti-clinical: every card / story / collage image gets the soft radius.
 * Skeleton-scoped so the universal block CSS stays neutral. */
.tpl-wellness-organic .block__card-media img,
.tpl-wellness-organic .block__art-media img,
.tpl-wellness-organic .block__story-media img,
.tpl-wellness-organic .block__media img,
.tpl-wellness-organic .block--gateway-grid .block__item img,
.tpl-wellness-organic .block--image-collage .block__collage-item {
  border-radius: var(--radius-image);
}

/* ---------- Hero — generous height, organic blob ornament ----------- */
/* The hero family doesn't ship with backgrounds; we add a soft sage blob
 * behind the centered text via skeleton-scoped pseudo-element. Anchors:
 * breathwork + yoga-therapy sites where the hero has "breath" around it. */
.tpl-wellness-organic .block--hero-text-only {
  position: relative;
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.tpl-wellness-organic .block--hero-text-only.block--height-medium { min-height: 60vh; display: flex; align-items: center; }
.tpl-wellness-organic .block--hero-text-only.block--height-tall   { min-height: 76vh; display: flex; align-items: center; }
.tpl-wellness-organic .block--hero-text-only::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(280px, 60vw, 620px);
  height: clamp(280px, 60vw, 620px);
  background: radial-gradient(circle at 35% 35%,
              var(--color-accent-soft) 0%,
              var(--color-accent-faint) 35%,
              transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.tpl-wellness-organic .block--hero-text-only > * { position: relative; z-index: 1; }

/* Hero typography — italic display headline reads "organic" */
.tpl-wellness-organic .block--hero-text-only .block__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.tpl-wellness-organic .block--hero-text-only .block__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 1;
  margin-bottom: 1.4rem;
}
.tpl-wellness-organic .block--hero-text-only .block__subheading {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  opacity: 0.78;
  max-width: 44ch;
  margin: 1.5rem auto 2rem;
}
.tpl-wellness-organic .block--hero-text-only .block__footnote {
  margin-top: 2.2rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ---------- Section spacing — generous breath -------------------------- */
.tpl-wellness-organic .block + .block { margin-top: 0; }
.tpl-wellness-organic .block { padding-top: clamp(3.5rem, 8vw, 6.5rem); padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }

/* ---------- Scroll-reveal — slow organic rise ------------------------ */
/* Same mechanism as therapist-warm but slower (1500ms) with a 22px rise.
 * The point of this register is presence, not energy. Gated on
 * body.js-reveal-ready set by _shared/partials/reveal.php. */
body.js-reveal-ready.tpl-wellness-organic .block {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1500ms cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 1500ms cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
body.js-reveal-ready.tpl-wellness-organic .block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero entrance animation ---------------------------------- */
/* @keyframes MUST be top-level (validator rule 4c) — nesting inside @media
 * silently aborts the parser for subsequent rules in some browsers. */
@keyframes tpl-wellness-organic-breathe {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .tpl-wellness-organic .block--hero-text-only .block__eyebrow,
  .tpl-wellness-organic .block--hero-text-only .block__headline,
  .tpl-wellness-organic .block--hero-text-only .block__subheading,
  .tpl-wellness-organic .block--hero-text-only .block__cta,
  .tpl-wellness-organic .block--hero-text-only .block__footnote {
    animation: tpl-wellness-organic-breathe 1400ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
  }
  .tpl-wellness-organic .block--hero-text-only .block__eyebrow      { animation-delay:   0ms; }
  .tpl-wellness-organic .block--hero-text-only .block__headline     { animation-delay: 180ms; }
  .tpl-wellness-organic .block--hero-text-only .block__subheading   { animation-delay: 360ms; }
  .tpl-wellness-organic .block--hero-text-only .block__cta          { animation-delay: 540ms; }
  .tpl-wellness-organic .block--hero-text-only .block__footnote     { animation-delay: 720ms; }
}

/* ---------- Generic block headline / body — italic display register -- */
/* All block titles inherit the soft italic display register. */
.tpl-wellness-organic .block__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.008em;
}
.tpl-wellness-organic .block__description,
.tpl-wellness-organic .block__row-description,
.tpl-wellness-organic .block__item-body {
  line-height: 1.72;
}

/* ---------- Card / container tints ----------------------------------- */
/* Bordered / filled cards across blocks pick up the sage-tinged hairline
 * instead of pure black, so dividers read warm not clinical. */
.tpl-wellness-organic .block__item,
.tpl-wellness-organic .block__row,
.tpl-wellness-organic .block__card {
  border-radius: var(--radius-card);
}

/* ---------- Footer (warm-cream, sage divider) ----------------------- */
.tpl-wellness-organic .site-footer {
  background: var(--color-muted-bg);
  color: var(--color-text);
  padding: 4.5rem clamp(1rem, 4vw, 3rem) 2.5rem;
  margin-top: var(--space-section);
  border-top: 1px solid var(--color-border-hairline);
}
.tpl-wellness-organic .site-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.tpl-wellness-organic .site-footer__brand-text {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.6rem;
}
.tpl-wellness-organic .site-footer__copy {
  opacity: 0.78;
  max-width: 42ch;
  font-size: 0.92rem;
  line-height: 1.65;
}
.tpl-wellness-organic .site-footer__contact-link,
.tpl-wellness-organic .site-footer__social-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
}
.tpl-wellness-organic .site-footer__contact-link:hover,
.tpl-wellness-organic .site-footer__social-link:hover {
  color: var(--color-accent);
  opacity: 1;
}
.tpl-wellness-organic .site-footer__bottom {
  max-width: 1240px;
  margin: 3rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border-hairline);
  text-align: center;
  font-size: 0.74rem;
  opacity: 0.6;
  letter-spacing: 0.08em;
}

/* ---------- Mobile breakpoint ---------------------------------------- */
@media (max-width: 800px) {
  .tpl-wellness-organic .site-nav--desktop { display: none; }
  .tpl-wellness-organic .mobile-menu-toggle { display: flex; }
  .tpl-wellness-organic .site-header__inner {
    padding: 1.1rem clamp(1rem, 4vw, 3rem);
  }
  .tpl-wellness-organic .site-header__brand-name {
    font-size: 1.3rem;
  }
  .tpl-wellness-organic .site-header__brand-tagline {
    display: none;            /* prevent header overflow on phones */
  }
  .tpl-wellness-organic .block--hero-text-only .block__headline {
    font-size: clamp(1.85rem, 8vw, 2.6rem);
  }
  .tpl-wellness-organic .block--hero-text-only::before {
    width: 95vw;
    height: 95vw;
  }
}