/* Sage & Honey locked palette — Forest is ink, Cream is canvas, Sage is fill/tint only (never text), Honey is decorative only. */
:root {
  --sh-cream: #F8F4E8;
  --sh-cream-section: #F9F4E8;
  --sh-forest: #253E04;
  --sh-forest-dark: #20360A;
  --sh-button-text: #F0E9D2;
  --sh-honey-sage: #D7D89E;
  --sh-sage-surface: #A3A878;
  --sh-cool-sage: #C6CBAF;
  --sh-honey: #E5B43E;
  --sh-hairline: #E0D9C0;
  --sh-caption: #5a6536;
}

::selection {
    background: #E5B43E;
    color: #253E04;
}

body {
  background: #ffffff;
  color: var(--sh-forest);
  font-family: 'Lato', system-ui, sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'Fiona', 'Cormorant Garamond', Georgia, serif;
}

/* Block buttons: scale on hover, no shadows, no honeycomb */
.sh-btn {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .03em;
  padding: 15px 26px;
  border-radius: 4px;
  text-decoration: none;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}
.sh-btn:hover { transform: scale(1.02); }

.sh-btn--primary { background: var(--sh-forest); color: var(--sh-button-text); }
.sh-btn--outline { background: transparent; color: var(--sh-forest); border: 1.5px solid var(--sh-forest); padding: 14px 25px; }
.sh-btn--outline:hover { background: var(--sh-forest); color: var(--sh-button-text); transform: none; }
.sh-btn--sage { background: var(--sh-honey-sage); color: var(--sh-forest); }

/* Honey is decorative only — never small text on cream, never a button color */
.sh-link {
  color: var(--sh-forest);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--sh-honey);
  padding-bottom: 2px;
}

/* ── Logo draw-in (ported from sage-honey) — driven by initLogo() ── */
.sh-logo__icon {
  display: flex;
  align-items: center;
}
.sh-logo__icon svg {
  height: 3rem;
  width: auto;
  overflow: visible;
}

#sh-logo-plant {
  fill: none;
  stroke: #9FA165;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--plant-length, 1000);
  stroke-dashoffset: var(--plant-length, 1000);
  animation:
    sh-draw-plant 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    sh-fill-plant 1s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    sh-fade-stroke 0.8s ease forwards;
  animation-delay: 0.3s, 0.5s, 1.5s;
  animation-fill-mode: both;
}

@keyframes sh-draw-plant { to { stroke-dashoffset: 0; } }
@keyframes sh-fill-plant { from { fill: transparent; } to { fill: #9FA165; } }
@keyframes sh-fade-stroke { from { stroke-opacity: 1; } to { stroke-opacity: 0; } }

#sh-logo-frame {
  opacity: 0;
  animation: sh-fade-frame 1s ease forwards;
  animation-delay: 1.25s;
  animation-fill-mode: both;
}

@keyframes sh-fade-frame { from { opacity: 0; } to { opacity: 1; } }

/* ── Leaf scroll decoration — drawn/filled by initLeafDecorations() via GSAP.
   Set via Elementor's Custom Attributes (Advanced tab) — no class needed:
   data-sh-leaf-decoration | on the wrapper
   data-sh-deco-plant      | on the inner SVG path ── */
[data-sh-leaf-decoration] {
  display: block;
  width: auto;
}
[data-sh-leaf-decoration] [data-sh-deco-plant] {
  stroke: #9FA165;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Header scroll behavior — background opacity driven by
   initHeaderScroll(), which sets --sh-header-bg-opacity (0.25 at the top of
   the page, ramping to 1 by 400px scrolled) every scroll tick.
   Carried by #header-bg, a real element added inside the header in
   Elementor (Advanced tab → CSS ID "header-bg") rather than a ::before, so
   it's visible/editable in the panel. Set its Position to Absolute in
   Elementor; this CSS fills it to the header's bounds and layers it behind
   everything else — logo, nav, and button stay at opacity 1 always.
   The outer <header> is Elementor's theme-builder location wrapper, which
   isn't editable, so it's targeted by its built-in [data-elementor-type="header"]
   attribute. Inside it, set the inner row's CSS ID (Advanced tab) to
   "sh-header__inner". ── */
header,
[data-elementor-type="header"] {
  --sh-transition: 0.3s ease;
  --sh-header-bg-opacity: 0.25;
  position: sticky;
  top: 0 !important;
  z-index: 999;
}

#header-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: hsla(0, 0%, 100%, .98);
  opacity: var(--sh-header-bg-opacity);
  transition: opacity var(--sh-transition), box-shadow var(--sh-transition);
  pointer-events: none;
}

/* Sit below the wp-admin bar (32px desktop, collapses to static <783px) */
  #wpadminbar [data-elementor-type="header"],
  #wpadminbar header {
  top: 32px;
}
@media (max-width: 782px) {
  #wpadminbar [data-elementor-type="header"],
  #wpadminbar header {
    top: 0 !important;
  }
}
[data-elementor-type="header"].is-scrolled #header-bg {
  box-shadow: 0 2px 16px rgba(159, 161, 101, .09);
}

/* ── Scroll fade-in — driven by initFadeIn() + [data-sh-fade].
   The hidden state lives HERE in CSS (applies on first paint, before any JS
   runs) so there's no flash of the element at full opacity. JS only adds the
   "sh-fade-in" class to reveal, and fine-tunes distance/duration/delay via
   inline styles while the element is still invisible.
   !important is required on opacity/transform — Elementor's own generated
   per-element CSS (e.g. a widget's local class with its own "opacity: 100%")
   has identical specificity to these attribute selectors, and Elementor's
   stylesheet loads after this one, so without !important it silently wins
   the tie and elements never visually hide. ── */
[data-sh-fade] {
  opacity: 0 !important;
  transform: translate3d(0, 24px, 0) !important; /* default direction: "up" */
  transition: opacity 600ms ease, transform 600ms ease !important;
}
[data-sh-fade="down"]  { transform: translate3d(0, -24px, 0) !important; }
[data-sh-fade="left"]  { transform: translate3d(24px, 0, 0) !important; }
[data-sh-fade="right"] { transform: translate3d(-24px, 0, 0) !important; }
[data-sh-fade="none"]  { transform: none !important; }

[data-sh-fade].sh-fade-in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Always show full/final state while editing — the editor canvas renders in
   an iframe whose body gets this class, so it doesn't interfere with the
   live front-end. */
body.elementor-editor-active [data-sh-fade] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-sh-fade] {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

[data-sh-fade="none"] {
  transform: none !important;
  transition: opacity 600ms ease; /* drop transform from the list entirely */
}

.sh-leaf-fade[data-sh-fade] {
  opacity: 0 !important;
  transform: scale(0.85) !important;
  transition: opacity 800ms ease, transform 800ms ease;
}
.sh-leaf-fade[data-sh-fade].sh-fade-in {
  opacity: 1 !important;
  transform: scale(1) !important;
}