/*
Theme Name:   Artesian Springs
Template:     hello-elementor
Version:      1.0.0
Description:  Child theme for artesianspringsrecoverycenter.com
Text Domain:  artesian-springs
*/

:root {
  --as-ink:    #101816;
  --as-spring: #123B36;
  --as-canvas: #F7F5F1;
  --as-stone:  #CFC8BC;
  --as-hair:   #E2DED7;
  --as-signal: #2C6E63;
  --as-pad-y:  128px;
  --as-measure: 68ch;
}

body { background: var(--as-canvas); color: #3A4441; }

/* Section rhythm */
.as-section { padding-block: var(--as-pad-y); }
@media (max-width: 1024px) { :root { --as-pad-y: 72px; } }

/* Readable measure for long-form copy */
.as-prose p { max-width: var(--as-measure); }

/* Stat bar — tabular figures so numbers align */
.as-stat__value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.as-stat + .as-stat { border-left: 1px solid var(--as-hair); }

/* Eyebrow label */
.as-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 500;
  color: var(--as-signal);
}

/* Scroll-reveal base state (JS adds .is-in) */
.as-reveal { opacity: 0; transform: translateY(24px); }
.as-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1),
              transform .9s cubic-bezier(.22,.61,.36,1);
}

/* Accessibility + mobile: motion off */
@media (prefers-reduced-motion: reduce) {
  .as-reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto !important; }
}
@media (max-width: 1024px) {
  .as-reveal { opacity: 1; transform: none; }
}

/* ---- v1.1 refinements ---------------------------------------- */

/* Hairline dividers between stats — the detail that reads as "designed" */
.as-statbar .as-stat + .as-stat {
  border-left: 1px solid var(--as-hair);
  padding-left: 28px !important;
}
@media (max-width: 767px) {
  .as-statbar .as-stat + .as-stat { border-left: none; padding-left: 0 !important; }
  .as-statbar .as-stat { margin-bottom: 28px; }
}

.as-label--muted { color: #7C8A85 !important; }

/* Optical alignment: pull the display H1 left so its stem lines up
   with the label above it, instead of the glyph's side bearing. */
.as-hero h1 { margin-left: -0.045em; }

/* Button: square, with a slow deliberate hover rather than a snap */
.as-hero .elementor-button {
  transition: background-color .45s cubic-bezier(.22,.61,.36,1),
              transform .45s cubic-bezier(.22,.61,.36,1);
}
.as-hero .elementor-button:hover { transform: translateY(-2px); }

/* Scroll cue — tells the eye there is more below the fold */
.as-hero::after {
  content: "";
  position: absolute; bottom: 40px; left: 40px;
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, rgba(207,200,188,.6), transparent);
}
.as-hero { position: relative; }
@media (max-width: 767px) { .as-hero::after { display: none; } }