/* ============================================================================
   EASTON CHILD — structural / layout CSS  (references tokens.css only)
   ----------------------------------------------------------------------------
   This file owns LAYOUT and SEMANTICS; all visual values come from the canonical
   design tokens in tokens.css (var(--ink) / var(--red) / var(--font-*) / ...).
   Design rules enforced here (tokens.css §):
     - Red is an ACCENT only — CTA, small kicker/active states. No large red
       fills, no red-on-black numerals (stat numerals use --text / on-dark white).
     - --review-gold is for STAR GLYPHS only.
     - Display type (H1–H4, numerals) = Anton; eyebrow/labels/nav/buttons =
       Oswald; body/quotes/meta = Barlow.
   ============================================================================ */

/* --- Content heading scale (Anton). ------------------------------------------
   GeneratePress's stylesheet re-asserts a system heading font that OUTRANKS the
   theme.json `h1..h6` rule, so the bare Gutenberg block headings inside our
   sections need real specificity to wear Anton. The :not([class*="easton-"])
   guard leaves component-classed headings (card title, prefooter title, footer
   labels) to own their own size/family. ------------------------------------- */
.easton-hero :is(h1,h2,h3,h4):not([class*="easton-"]),
.easton-section :is(h1,h2,h3,h4):not([class*="easton-"]) {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em;
}
.easton-hero h1:not([class*="easton-"]),
.easton-section h1:not([class*="easton-"]) { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.easton-section h2:not([class*="easton-"]) { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.easton-section h3:not([class*="easton-"]) { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.easton-section h4:not([class*="easton-"]) { font-size: var(--fs-h4); line-height: var(--lh-h4); }

/* --- Buttons -------------------------------------------------------------- */
.easton-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 13px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.easton-btn--primary { background: var(--red); color: var(--text-on-red); box-shadow: var(--shadow-cta-red); }
.easton-btn--primary:hover,
.easton-btn--primary:focus-visible { background: var(--red-shadow); color: var(--text-on-red); }
.easton-btn--secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.easton-btn--secondary:hover { border-color: var(--text-muted); }
.easton-btn--ghost { background: transparent; color: var(--red); border-color: var(--red); }
.easton-btn--on-dark { color: var(--text-on-dark); border-color: var(--line-on-dark); }
.easton-btn--block { width: 100%; }
.easton-btn--lg { font-size: var(--fs-body); padding: 17px 30px; }

/* --- Nav CTA (desktop, inside GP primary nav) ----------------------------- */
.easton-nav-cta { display: flex; align-items: center; margin-left: var(--space-4); }
.easton-nav-cta .easton-btn { padding: 10px 22px; font-size: var(--fs-eyebrow); }
/* Override GeneratePress's nav link color (higher specificity in the parent,
   so !important is warranted here to keep the CTA text white on red). */
.easton-nav-cta .easton-btn--primary,
.easton-nav-cta .easton-btn--primary:visited,
.easton-nav-cta .easton-btn--primary:hover,
.easton-nav-cta .easton-btn--primary:focus { color: var(--text-on-red) !important; }

/* --- Sticky mobile CTA ---------------------------------------------------- */
.easton-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(13,13,12,.08);
}
@media (min-width: 769px) { .easton-sticky-cta { display: none; } }
body.easton-has-sticky-cta { padding-bottom: 72px; } /* avoid covering footer content on mobile */

/* --- Section scaffolding -------------------------------------------------- */
.easton-section { padding-block: var(--section-pad-y); }
.easton-section--alt  { background: var(--surface-sunken); }
.easton-section--cream{ background: var(--surface-sunken); }
.easton-section--dark { background: var(--surface-dark); color: var(--text-on-dark); }
.easton-section--dark :is(h1,h2,h3,h4) { color: var(--text-on-dark); }
.easton-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }

.easton-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--red);
  margin: 0 0 var(--space-3);
}

/* --- Hero ----------------------------------------------------------------- */
.easton-hero { background: var(--canvas); }
.easton-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-12);
  align-items: center;
}
.easton-hero__copy { padding-block: var(--section-pad-y); }
.easton-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--space-6);
}
.easton-hero__sub { font-size: var(--fs-body-lg); color: var(--text-muted); line-height: var(--lh-body-lg); max-width: 46ch; margin: 0 0 var(--space-8); }
.easton-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8); }
.easton-hero__media {
  align-self: stretch;
  min-height: 320px;
  background: var(--surface-sunken);
  border-radius: var(--radius-card);
  background-image: repeating-linear-gradient(45deg,rgba(13,13,12,0.05) 0,rgba(13,13,12,0.05) 1px,transparent 0,transparent 50%);
  background-size: 8px 8px;
}

/* --- Trust pills ---------------------------------------------------------- */
.easton-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.easton-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-muted);
  border: 1px solid var(--line);
  font-family: var(--font-label); font-size: var(--fs-caption); font-weight: var(--fw-label);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.easton-pill--highlight { background: var(--red); color: var(--text-on-red); border-color: transparent; }

/* --- Social proof bar ----------------------------------------------------- */
.easton-proofbar { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: center; }
.easton-proofbar__item { text-align: center; }
.easton-proofbar__num { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; letter-spacing: 0.01em; }
.easton-proofbar__label { font-family: var(--font-label); font-size: var(--fs-caption); font-weight: var(--fw-label); letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--text-on-dark-muted); margin-top: 4px; }

/* --- Stats bar ------------------------------------------------------------ */
.easton-stats { display: grid; grid-template-columns: repeat(4,1fr); }
.easton-stat { text-align: center; padding: var(--space-8) var(--space-4); border-right: 1px solid var(--line); }
.easton-stat:last-child { border-right: 0; }
/* §5.2: numerals are --text (ink) on light — NOT large red. */
.easton-stat__num { font-family: var(--font-display); font-size: 2.75rem; color: var(--text); line-height: 1; letter-spacing: 0.01em; }
.easton-stat__label { font-family: var(--font-label); font-weight: var(--fw-label); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-caption); color: var(--text-muted); margin-top: 10px; }

/* --- Card grids (programs / kids / locations) ----------------------------- */
.easton-grid { display: grid; gap: var(--space-6); }
.easton-grid--3 { grid-template-columns: repeat(3, 1fr); }
.easton-grid--2 { grid-template-columns: repeat(2, 1fr); }
.easton-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.easton-card__tag { font-family: var(--font-label); font-size: var(--fs-caption); font-weight: var(--fw-label); text-transform: uppercase; letter-spacing: var(--ls-caption); color: var(--red); }
.easton-card__title { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: 0.01em; text-transform: uppercase; margin: 6px 0 8px; }
.easton-card__body { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }

/* --- Reviews / testimonials ----------------------------------------------- */
.easton-review { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-6); }
.easton-review__stars { color: var(--review-gold); letter-spacing: 1px; margin-bottom: var(--space-3); }
.easton-review__quote { font-style: italic; color: var(--text); line-height: var(--lh-body); margin: 0 0 var(--space-4); }
.easton-review__author { font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: 0.01em; text-transform: uppercase; }
.easton-review__meta { font-family: var(--font-label); font-size: var(--fs-caption); font-weight: var(--fw-label); text-transform: uppercase; letter-spacing: var(--ls-caption); color: var(--text-muted); }

/* --- Schedule embed (WellnessLiving, kept at parity) ---------------------- */
.easton-schedule__embed { position: relative; width: 100%; min-height: 480px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--paper); }
.easton-schedule__embed iframe { width: 100%; min-height: 480px; border: 0; display: block; }

/* --- Contact / NAP -------------------------------------------------------- */
.easton-contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.easton-nap { font-style: normal; line-height: var(--lh-body); }
.easton-nap__line { display: block; }
.easton-nap a { color: var(--text); text-decoration: none; }

/* --- Map ------------------------------------------------------------------ */
.easton-map { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-sunken); }
.easton-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- "What happens after" steps ------------------------------------------- */
.easton-steps { list-style: none; counter-reset: step; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.easton-steps li { counter-increment: step; position: relative; padding-left: 48px; line-height: var(--lh-body); }
.easton-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--red); color: var(--text-on-red);
  font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- Trial-form RESERVED slot (NOT built — placeholder per brief §3) ------- */
.easton-trial-slot {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  background: var(--paper);
  text-align: center;
}
.easton-trial-slot__note { font-size: var(--fs-body); color: var(--text-muted); margin-top: var(--space-3); }

/* Context-aware eyebrow: brand red reads strongly on the dark sections too
   (red-on-ink passes AA). */
.easton-section--dark .easton-eyebrow,
.easton-prefooter-cta .easton-eyebrow { color: var(--red); }

/* Content links wear brand red (GeneratePress styles content links blue, out-
   ranking theme.json's link colour). Buttons, NAP, and other classed links keep
   their own treatment. */
.easton-card a:not([class*="easton-"]),
.easton-faq__answer a:not([class*="easton-"]),
.easton-section p a:not([class*="easton-"]) {
  color: var(--red); text-decoration: underline; text-underline-offset: 2px;
}
.easton-card a:not([class*="easton-"]):hover,
.easton-faq__answer a:not([class*="easton-"]):hover,
.easton-section p a:not([class*="easton-"]):hover { color: var(--red-shadow); }

/* --- Prose note (program-hub: kids/women's callout under program tiers) --- */
.easton-prose-note { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); margin: var(--space-6) 0 0; }
.easton-prose-note a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.easton-section--alt .easton-prose-note { color: var(--text-muted); }

/* --- FAQ ------------------------------------------------------------------ */
.easton-faq { max-width: 760px; }
.easton-faq__item { border-bottom: 1px solid var(--line); padding: var(--space-4) 0; }
.easton-faq__item summary { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: 0.01em; text-transform: uppercase; cursor: pointer; list-style: none; }
.easton-faq__item summary::-webkit-details-marker { display: none; }
.easton-faq__answer { color: var(--text-muted); line-height: var(--lh-body); margin-top: var(--space-3); }

/* --- Pre-footer CTA band -------------------------------------------------- */
.easton-prefooter-cta { background: var(--surface-dark); color: var(--text-on-dark); border-top: 4px solid var(--red); }
.easton-prefooter-cta :is(h1,h2,h3,h4) { color: var(--text-on-dark); } /* keep the title legible on the dark band */
.easton-prefooter-cta__inner { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: space-between; padding-block: var(--space-16); }
/* Scoped to its band (0,2,0): this <h2> is chrome rendered on every page (incl.
   unmigrated Elementor pages), where Elementor Kit 6's `.elementor-kit-6 h2`
   (0,1,1) would otherwise swap Anton for Chakra Petch 30px. The sibling footer
   column heads are already safe via `.easton-section--dark .…__head` (0,2,0). */
.easton-prefooter-cta .easton-prefooter-cta__title { font-family: var(--font-display); font-size: clamp(2rem,4vw,2.75rem); line-height: var(--lh-h2); letter-spacing: 0.01em; text-transform: uppercase; margin: 8px 0 0; }
.easton-prefooter-cta__title .accent { color: var(--red); }

/* --- Footer columns (overflow nav + locations) ---------------------------- */
/* Category headers styled to the design: Oswald 600, 12px / 0.18em tracking,
   faint-on-dark — a quiet label above each column's links. */
.easton-footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); padding-block: var(--space-12); }
.easton-section--dark .easton-footer-columns__head { font-family: var(--font-label); font-size: 12px; font-weight: var(--fw-label); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-on-dark-faint); margin: 0 0 var(--space-4); }
.easton-footer-columns ul { list-style: none; margin: 0; padding: 0; }
.easton-footer-columns li { margin-bottom: 11px; }
.easton-footer-columns a { text-decoration: none; color: var(--text-on-dark-muted); font-family: var(--font-body); font-size: var(--fs-body); transition: color var(--dur-fast) var(--ease-standard); }
.easton-footer-columns a:hover { color: var(--red); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .easton-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .easton-stats { grid-template-columns: repeat(2, 1fr); }
  .easton-stat:nth-child(2) { border-right: 0; }
  .easton-footer-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* Mobile display scale (tokens.css documents these mobile sizes). */
  .easton-hero h1:not([class*="easton-"]), .easton-section h1:not([class*="easton-"]), .easton-hero__title { font-size: 34px; }
  .easton-section h2:not([class*="easton-"]) { font-size: 31px; }
  .easton-section h3:not([class*="easton-"]) { font-size: 25px; }
  .easton-section h4:not([class*="easton-"]), .easton-faq__item summary, .easton-card__title { font-size: 22px; }
  .easton-section { padding-block: var(--space-12); }
  .easton-hero__copy { padding-block: var(--space-12); }
  .easton-hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .easton-hero__media { min-height: 220px; order: -1; }
  .easton-contact { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 560px) {
  .easton-grid--3, .easton-grid--2 { grid-template-columns: 1fr; }
  .easton-stats { grid-template-columns: 1fr; }
  .easton-stat { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* --- Full-bleed native templates (/schedules/, /free-class/) --------------- */
/* These two templates build #primary / .site-main directly inside GeneratePress's
   #page.grid-container (max-width:1200px; padding:0 20px), so — unlike the home,
   location, hub and members surfaces — they rendered boxed at ~1200px instead of
   edge-to-edge. Neutralise the GP content container so the page spans the full
   viewport like every other native template. Scoped to #page so the footer's own
   .inside-site-info.grid-container (and any nested grid-container) is untouched;
   the inner wraps (.eb-sched__wrap / .eb-bk-page__wrap) supply their own gutters.
   Applied via the shared .easton-full-bleed body class (inc/setup.php); the page-
   scope classes .easton-schedule-page / .easton-booking-page travel alongside. */
.easton-full-bleed #page.grid-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* Vertical flush: drop GP's .site-main margins so the content sits flush under the
   header and above the pre-footer CTA (mirrors the .easton-loc-page reset). */
.easton-full-bleed .site-main {
  margin-top: 0;
  margin-bottom: 0;
}
/* Desktop shows no mobile sticky CTA, so reclaim its body-reserve padding-bottom. */
@media (min-width: 769px) {
  .easton-full-bleed.easton-has-sticky-cta { padding-bottom: 0; }
}

/* --- A11y ----------------------------------------------------------------- */
:where(.easton-btn, .easton-nap a, .easton-footer-columns a):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .easton-btn { transition: none; }
}