/* =============================================================
   ALEXIS THERAPY — "Lonnie-style" design system
   Load AFTER Astra styles (enqueued from child theme).
   All custom classes are prefixed .at- to avoid collisions.
   ============================================================= */

:root {
  /* PALETTE — "Olive Grove" (default). Swap these 7 values to re-skin the whole site. */
  --at-cream: #F3EDE1;   /* base background */
  --at-c1:    #B3BC85;   /* light olive — main brand color (about band, step 1 card) */
  --at-c2:    #F0CE6B;   /* butter yellow — FAQ band, buttons, step 2 card */
  --at-c3:    #F2C4BE;   /* blush — accordion cards, CTA band, step 3 card */
  --at-head:  #5C6430;   /* deep olive — display headings */
  --at-ink:   #46491F;   /* outlines + dark text */
  --at-text:  #666B33;   /* monospace body text on cream */

  --at-font-display: "Fraunces", Georgia, serif;
  --at-font-mono: "Space Mono", "Courier New", monospace;

  --at-radius: 42px;
  --at-line: 1.5px solid var(--at-ink);
}

/* ---------- full-bleed section bands ---------- */
.at-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 6vw, 6rem);
  overflow-x: clip;
}
.at-band--cream    { background: var(--at-cream); }
.at-band--c1 { background: var(--at-c1); }
.at-band--c2   { background: var(--at-c2); }
.at-band--c3     { background: var(--at-c3); }

.at-inner { max-width: 1240px; margin: 0 auto; }

/* ---------- wave divider ----------
   Usage: <div class="at-wave" style="--above:#EDE3DA; --below:#E1953C;">
   Sits between two bands; svg inside fills the curve. */
.at-wave {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(50px, 8vw, 100px);
  background: var(--below);
  line-height: 0;
  overflow: hidden;
}
.at-wave svg { width: 100%; height: 100%; display: block; }
.at-wave .wave-fill   { fill: var(--above); }
.at-wave .wave-stroke { stroke: var(--at-ink); }

/* ---------- typography ---------- */
.at-display {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--at-head);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
}
.at-mono {
  font-family: var(--at-font-mono);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: var(--at-text);
  margin: 0 0 1.25rem;
}
.at-mono--ink { color: var(--at-ink); }

/* ---------- pill button ---------- */
.at-btn {
  display: inline-block;
  font-family: var(--at-font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--at-ink);
  background: var(--at-c2);
  border: var(--at-line);
  border-radius: 999px;
  padding: 0.95rem 2.4rem;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.at-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(74, 70, 28, .35);
  color: var(--at-ink);
}
.at-btn:focus-visible { outline: 3px solid var(--at-ink); outline-offset: 3px; }

/* ---------- rounded outlined card ---------- */
.at-card {
  background: var(--at-cream);
  border: var(--at-line);
  border-radius: var(--at-radius);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
.at-card--c3 { background: var(--at-c3); }
.at-card--c1 { background: var(--at-c1); }
.at-card--c2 { background: var(--at-c2); }

/* =============================================================
   SECTION 1 — HERO
   ============================================================= */
.at-hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.at-hero-title { font-size: clamp(3.4rem, 10vw, 8.5rem); }
.at-hero-title span { display: block; }
.at-hero-title .at-l2 { padding-left: clamp(1.5rem, 8vw, 9rem); }
.at-hero-title .at-l3 { padding-left: clamp(0.5rem, 3vw, 3rem); }
.at-hero-cta { margin-top: clamp(1.5rem, 4vw, 3rem); }

.at-oval {
  aspect-ratio: 4 / 5;
  border-radius: 50%;
  border: var(--at-line);
  background: var(--at-c1);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.at-oval img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}

/* =============================================================
   SECTION 2 — ABOUT GLIMPSE (image card + text card on marigold)
   ============================================================= */
.at-about-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: stretch;
}
.at-about-img {
  border: var(--at-line);
  border-radius: var(--at-radius);
  overflow: hidden;
  min-height: 340px;
}
.at-about-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.at-about-card h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  margin-bottom: 1.5rem;
}

/* =============================================================
   SECTION 3 — FAQ (staggered cards on orange)
   ============================================================= */
.at-faq-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  position: relative;
}
.at-faq-intro {
  grid-column: 4 / 11;
  text-align: center;
  z-index: 1;
}
.at-faq-intro h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin-bottom: 1.25rem;
}
.at-faq-col1 {
  grid-column: 1 / 7;
  margin-top: -70px;
  z-index: 2;
}
.at-faq-col2 {
  grid-column: 7 / 13;
  margin-top: 60px;
  z-index: 2;
  align-self: start;
}

/* accordion */
.at-acc details { border-bottom: var(--at-line); }
.at-acc details:last-child { border-bottom: none; }
.at-acc summary {
  font-family: var(--at-font-mono);
  font-size: 1.02rem;
  color: var(--at-ink);
  padding: 1.1rem 2.2rem 1.1rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  line-height: 1.5;
}
.at-acc summary::-webkit-details-marker { display: none; }
.at-acc summary::after {
  content: "";
  position: absolute; right: .25rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--at-ink);
  border-bottom: 2px solid var(--at-ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s ease;
}
.at-acc details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
.at-acc .at-acc-body {
  font-family: var(--at-font-mono);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--at-ink);
  padding: 0 0 1.25rem;
}

/* =============================================================
   SECTION 4 — HOW IT WORKS (3 step cards on cream)
   ============================================================= */
.at-steps-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.at-steps-head h2 { font-size: clamp(2.4rem, 5vw, 4rem); }

.at-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
}
.at-step-num {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  display: block;
  margin-bottom: .75rem;
}
.at-step h3 {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  margin: 0 0 1rem;
}
.at-step p {
  font-family: var(--at-font-mono);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}
/* step cards: pastel backgrounds, consistent ink text */
.at-step .at-step-num, .at-step h3 { color: var(--at-head); }
.at-step p { color: var(--at-ink); }

/* =============================================================
   SECTION 5 — FINAL CTA (cream card on pink)
   ============================================================= */
.at-cta-card {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.at-cta-card h2 {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  margin-bottom: 1.25rem;
}
.at-cta-card .at-mono { max-width: 560px; margin-left: auto; margin-right: auto; }
.at-cta-card .at-btn { margin-top: 1.25rem; }

/* =============================================================
   SCROLL-REVEAL ANIMATION
   ============================================================= */
.at-reveal {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.at-reveal.at-visible { opacity: 1; transform: none; }
/* stagger helpers */
.at-d1 { transition-delay: .12s; }
.at-d2 { transition-delay: .24s; }
.at-d3 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .at-reveal { opacity: 1; transform: none; transition: none; }
  .at-btn { transition: none; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 900px) {
  .at-hero-grid,
  .at-about-grid { grid-template-columns: 1fr; }
  .at-oval { max-width: 420px; margin: 0 auto; }
  .at-hero-title .at-l2,
  .at-hero-title .at-l3 { padding-left: 0; }

  .at-faq-grid { display: block; }
  .at-faq-intro { margin-bottom: 1.5rem; }
  .at-faq-col1, .at-faq-col2 { margin-top: 1.5rem; }

  .at-steps-grid { grid-template-columns: 1fr; }
  .at-d1, .at-d2, .at-d3 { transition-delay: 0s; }
}
 
/* =============================================================
   FIXES + NATIVE BLOCK SUPPORT (consolidated v4-major)
   ============================================================= */

/* ---- About section: text card sizes to content, no stretching ---- */
.at-about-grid { align-items: center; }
.at-about-img { aspect-ratio: 4 / 5; min-height: 0; max-height: 600px; }

/* ---- FAQ: BOTH cards hug their content (col1 was stretching) ---- */
.at-faq-col1, .at-faq-col2 { align-self: start; }

/* ---- hero title lines as separate heading blocks ---- */
.at-hero-l1, .at-hero-l2, .at-hero-l3 {
  font-size: clamp(3.4rem, 10vw, 8.5rem);
  line-height: 0.95;
  margin: 0;
}
.at-hero-l2 { padding-left: clamp(1.5rem, 8vw, 9rem); }
.at-hero-l3 { padding-left: clamp(0.5rem, 3vw, 3rem); }
@media (max-width: 900px) {
  .at-hero-l2, .at-hero-l3 { padding-left: 0; }
}

/* ---- native button block styled as the pill ---- */
.wp-block-button.at-btn .wp-block-button__link {
  font-family: var(--at-font-mono) !important;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--at-ink) !important;
  background: var(--at-c2) !important;
  border: var(--at-line) !important;
  border-radius: 999px !important;
  padding: 0.95rem 2.4rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wp-block-button.at-btn .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(70, 73, 31, .35);
}

/* ---- core Details blocks inside accordion cards ---- */
.at-acc .wp-block-details { border-bottom: var(--at-line); padding: 0; }
.at-acc .wp-block-details:last-child { border-bottom: none; }
.at-acc .wp-block-details > :not(summary) {
  font-family: var(--at-font-mono);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--at-ink);
  margin: 0;
  padding: 0 0 1.25rem;
}

/* ---- step blocks ---- */
p.at-step-num {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--at-head);
  margin: 0 0 .75rem;
}
.at-step-title {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  color: var(--at-head);
  margin: 0 0 1rem;
}
.at-step-body {
  font-family: var(--at-font-mono);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--at-ink);
  margin: 0;
}

/* ---- neutralize core flow spacing inside our grids ---- */
.at-hero-grid > *, .at-about-grid > *, .at-steps-grid > *, .at-faq-grid > * { margin-block-start: 0; }
figure.at-about-img, figure.at-oval { margin: 0; }

/* =============================================================
   HEADER — hardened (overrides Astra Customizer inline styles)
   ============================================================= */
.site-header, .site-header .main-header-bar, .site-header .ast-primary-header-bar, .site-header .ast-main-header-wrap, .ast-mobile-header-wrap .ast-primary-header-bar {
  background: var(--at-cream) !important;
  box-shadow: none !important;
}
.site-header .ast-primary-header-bar, .site-header .main-header-bar {
  border-bottom: 1.5px solid var(--at-ink) !important;
}
.site-title a, .site-title a:visited, .site-title {
  font-family: var(--at-font-display) !important;
  font-style: italic;
  font-weight: 900;
  color: var(--at-head) !important;
  font-size: 1.5rem;
}
.site-description { display: none; }
.site-header .main-navigation a, .site-header .main-header-menu .menu-link {
  font-family: var(--at-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.85rem;
  color: var(--at-ink) !important;
  background: transparent !important;
}
.site-header .main-navigation a:hover, .site-header .main-header-menu .menu-link:hover, .site-header .current-menu-item > .menu-link {
  color: var(--at-head) !important;
}
.site-header .ast-custom-button, .site-header .ast-button {
  background: var(--at-c2) !important;
  color: var(--at-ink) !important;
  border: 1.5px solid var(--at-ink) !important;
  border-radius: 999px !important;
  font-family: var(--at-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.85rem;
  padding: 0.65rem 1.5rem !important;
}
.ast-header-break-point .main-header-menu, .ast-header-break-point .main-header-bar-navigation {
  background: var(--at-cream) !important;
}
.site-header .menu-toggle { color: var(--at-ink) !important; background: transparent !important; }

/* =============================================================
   FOOTER — hardened
   ============================================================= */
.site-footer, .site-footer .ast-builder-grid-row-container, .site-footer .ast-builder-grid-row, .site-footer [data-section] {
  background: var(--at-c1) !important;
}
.site-footer, .site-footer p, .site-footer .ast-footer-copyright, .site-footer .widget {
  color: var(--at-ink) !important;
  font-family: var(--at-font-mono) !important;
  font-size: 0.85rem;
}
.site-footer a { color: var(--at-ink) !important; text-decoration: underline; }
.site-footer a:hover { color: var(--at-head) !important; }

/* =============================================================
   RESPONSIVE HARDENING
   ============================================================= */
/* full-bleed 100vw bands can create a phantom horizontal scrollbar
   on desktop (scrollbar-width offset) — clip it at the root */
html, body { overflow-x: clip; }

/* very narrow screens: keep hero lines and cards comfortable */
@media (max-width: 420px) {
  .at-hero-l1, .at-hero-l2, .at-hero-l3 { font-size: clamp(2.6rem, 15vw, 3.4rem); }
  .at-card { border-radius: 32px; }
  .at-band { padding-left: 1.1rem; padding-right: 1.1rem; }
}
 
/* =============================================================
   MOBILE HEADER FIX (title was wrapping vertically)
   ============================================================= */
@media (max-width: 921px) {
  .site-title { font-size: 1.15rem; white-space: nowrap; }
  .site-branding, .ast-site-identity { min-width: 0; flex-shrink: 0; }
  /* hide the header pill on mobile — the hero button covers the CTA */
  .site-header .ast-custom-button-link,
  .site-header .ast-custom-button,
  .site-header .ast-button { display: none; }
}


/* =============================================================
   WHITESPACE / FULL-BLEED FIX (Astra core overrides)
   Astra's article padding + entry-content child margin-left:auto
   were creating a white gap under the header and preventing bands
   from reaching true full-bleed. Scoped to pages using .at-band only.
   ============================================================= */
.entry-content:has(.at-band),
article:has(.at-band) { padding: 0 !important; }
.entry-content:has(.at-band) > .at-band {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}


/* =============================================================
   v5 — inner pages + form styling (append to lonnie-style.css)
   ============================================================= */
/* page titles on About/Contact */
.at-page-title { font-size: clamp(2.8rem, 7vw, 5rem); }
.at-credential { font-size: 0.8rem; opacity: .85; }
.at-contact-head { max-width: 720px; margin: 0 auto 2rem; text-align: center; }
.at-form-card { max-width: 760px; margin: 0 auto; }
.at-about-left .at-mono { margin-top: 1.25rem; }

/* smooth-scroll for the /#faq anchor link */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* WPForms styled to the design system */
.at-form-card .wpforms-field-label {
  font-family: var(--at-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem !important;
  color: var(--at-ink) !important;
}
.at-form-card .wpforms-field-sublabel,
.at-form-card .wpforms-field-description {
  font-family: var(--at-font-mono) !important;
  font-size: 0.75rem !important;
  color: var(--at-text) !important;
}
.at-form-card input[type=text],
.at-form-card input[type=email],
.at-form-card input[type=tel],
.at-form-card textarea {
  font-family: var(--at-font-mono) !important;
  background: var(--at-cream) !important;
  border: 1.5px solid var(--at-ink) !important;
  border-radius: 14px !important;
  color: var(--at-ink) !important;
  padding: 0.8rem 1rem !important;
}
.at-form-card input:focus, .at-form-card textarea:focus {
  outline: 3px solid var(--at-head) !important; outline-offset: 2px;
}
.at-form-card button[type=submit] {
  font-family: var(--at-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem !important;
  color: var(--at-ink) !important;
  background: var(--at-c2) !important;
  border: 1.5px solid var(--at-ink) !important;
  border-radius: 999px !important;
  padding: 0.95rem 2.4rem !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.at-form-card button[type=submit]:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(70, 73, 31, .35);
}
.at-form-card .wpforms-confirmation-container-full {
  font-family: var(--at-font-mono);
  background: var(--at-c3) !important;
  border: 1.5px solid var(--at-ink) !important;
  border-radius: 20px;
  color: var(--at-ink) !important;
}

/* =============================================================
   v5 — FLUSH FULL-BLEED FIX (white trim around bands)
   Kills Astra's content-container spacing and paints the page
   background cream so bands sit flush under the header with no
   white edges anywhere.
   ============================================================= */
body, .site-content, .ast-plain-container {
  background: var(--at-cream) !important;
}
.site-content .ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-content, #primary, #main, .site-main {
  margin: 0 !important;
  padding: 0 !important;
}
.entry-content { margin: 0 !important; }
.entry-content > *:first-child { margin-top: 0 !important; }
.entry-content > * { margin-bottom: 0 !important; }
.hentry { margin: 0 !important; }

/* footer credential line */
.site-footer .at-credential-footer { font-size: 0.75rem; opacity: .85; display: block; margin-top: .35rem; }


/* =============================================================
   v6 -- center final CTA button; give FAQ columns breathing room
   and a more staggered, asymmetrical offset
   ============================================================= */
.at-cta-card .wp-block-buttons {
  display: flex;
  justify-content: center;
}

.at-faq-grid {
  column-gap: clamp(1.5rem, 4vw, 3rem);
}
.at-faq-col1 {
  margin-top: -120px;
}
.at-faq-col2 {
  margin-top: 100px;
}


/* =============================================================
   v7 -- fix FAQ left column overlapping the intro card; center
   the About page's 2-card row; add gap above CTA card when it
   follows other content in the same band
   ============================================================= */
.at-faq-col1 {
  margin-top: 20px;
}

@media (min-width: 901px) {
  .at-steps-grid--pair {
    grid-template-columns: repeat(2, 1fr);
    max-width: 66.6%;
    margin-left: auto;
    margin-right: auto;
  }
}

.at-cta-card--spaced {
  margin-top: clamp(2rem, 6vw, 4rem);
}


/* =============================================================
   v8 -- About page hero: two overlapping rectangular photos
   (Alexis + Murphy) replacing the single oval photo. Scoped to
   new .at-about-photo* classes only -- the shared .at-oval class
   (used on the homepage hero) is untouched.
   ============================================================= */
.at-about-photos {
  position: relative;
  width: 100%;
  padding-bottom: 30%;
}
.at-about-photo {
  margin: 0;
  border-radius: 24px;
  border: var(--at-line);
  overflow: hidden;
  background: var(--at-c1);
}
.at-about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.at-about-photo-1 {
  width: 76%;
  aspect-ratio: 4 / 5;
  position: relative;
  z-index: 1;
}
.at-about-photo-2 {
  width: 44%;
  aspect-ratio: 4 / 5;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

@media (max-width: 900px) {
  .at-about-photos {
    max-width: 380px;
    margin: 0 auto;
    padding-bottom: 32%;
  }
}