/* ============================================================
   LANDING.CSS — Sections used only by the landing pages:
   navbar, hero, "Get To Know Us", approach, FAQ accordion,
   footer, wave dividers.

   Widths, gaps and paddings are the Elementor values of the
   live pages (post-12837.css and the header/footer templates):
   each section's content width is noted where it is set.
   ============================================================ */

/* ============================================================
   NAVBAR
   ============================================================ */

/* Sticky, as on the WSC pages: the menu stays in view while scrolling.
   Frosted glass: a translucent white over a blur of whatever scrolls
   beneath, with a light edge and soft shadow to lift it off the page. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 24px rgba(27, 54, 82, 0.08);
}

/* Browsers without backdrop-filter get a mostly opaque bar so the menu
   stays readable over the photos. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .navbar { background-color: rgba(255, 255, 255, 0.92); }
}

/* At the top of the page the bar is fully transparent; the glass fades in
   over the first 60px of scroll. Pure CSS (a scroll-driven animation), so
   shared/js/main.js stays identical to WSC. Browsers without
   animation-timeline keep the glass on all the time, which is the rule
   above. */
@supports (animation-timeline: scroll()) {
  .navbar {
    animation: navbar-glass linear both, navbar-hold-space linear both;
    animation-timeline: scroll(root), scroll(root);
    animation-range: 0 60px, 0 80px;
  }

  /* The logo — and with it the whole bar — shrinks from 110px to 74px
     (bar 130px to 94px) over the first 80px of scroll, so the sticky
     menu takes less of the screen while reading. */
  .navbar-logo-img {
    animation: navbar-logo-shrink linear both;
    animation-timeline: scroll(root);
    animation-range: 0 80px;
  }

  /* Anchor jumps always end up past those 80px, where the bar is at its
     small size, so that is the offset they need. */
  html { scroll-padding-top: var(--nav-height-scrolled); }

  /* The reduced-motion reset in global.css shortens every animation to
     0.01ms; these scroll-linked changes are driven by the reader's own
     scrolling, so give them their duration back (a scroll timeline
     measures it in scroll distance, not time). */
  @media (prefers-reduced-motion: reduce) {
    .navbar, .navbar-logo-img { animation-duration: auto !important; }
  }
}

/* As the bar loses height its bottom margin gains the same amount, so the
   space it takes in the page stays 130px and nothing below it moves.
   Without this the page would jump up 36px mid-scroll and anchor links
   would land under the bar. The extra margin always sits beneath the bar
   itself, so it is never visible. */
@keyframes navbar-hold-space {
  from { margin-bottom: 0; }
  to   { margin-bottom: calc(var(--nav-height) - var(--nav-height-scrolled)); }
}

@keyframes navbar-logo-shrink {
  from { width: var(--nav-logo); height: var(--nav-logo); }
  to   { width: var(--nav-logo-scrolled); height: var(--nav-logo-scrolled); }
}

@keyframes navbar-glass {
  from {
    background-color: rgba(255, 255, 255, 0);
    -webkit-backdrop-filter: blur(0) saturate(100%);
    backdrop-filter: blur(0) saturate(100%);
    border-bottom-color: rgba(255, 255, 255, 0);
    box-shadow: 0 4px 24px rgba(27, 54, 82, 0);
  }
  to {
    background-color: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 24px rgba(27, 54, 82, 0.08);
  }
}

/* 1120px content width, 10px above and below the logo, 20px sides. */
.navbar-inner {
  max-width: calc(var(--container) + 40px);
  margin: 0 auto;
  padding: var(--nav-padding) 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.navbar-logo { display: flex; align-items: center; }
.navbar-logo-img { width: var(--nav-logo); height: var(--nav-logo); }

.navbar-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  /* The last item's right padding lines the text up 20px inside the
     content edge, as on the live menu. */
  padding: 0;
}

.navbar-links a {
  display: block;
  padding: 15px 20px;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  word-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-navy);
}

.navbar-links a:hover { color: var(--color-text); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 26px;
  margin: 0 auto;
  background-color: var(--color-navy);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
}

.mobile-nav.open { display: block; }

.mobile-nav ul { list-style: none; margin: 0; padding: 0.75rem 1.5rem 1.5rem; }
.mobile-nav li { padding: 0.6rem 0; }

.mobile-nav a {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  text-transform: uppercase;
  color: var(--color-navy);
}

/* ============================================================
   HERO — 1000px content width, 80px top / 120px bottom
   ============================================================ */

.hero {
  position: relative;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-aqua) 100%);
  padding: 80px 0 120px;
  overflow: hidden;
}

.hero .container { max-width: calc(1000px + 40px); position: relative; z-index: 2; }

.hero-grid {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* On the live page the eyebrow is the <h1>, with the text in small inline
   spans, so its line box keeps the h1 strut: 3.2rem x 1.2 = 61.44px, with
   the small text sitting on the big baseline. The padding rebuilds that
   box (34 + 23.04 + 4.4) so the hero column is the same height and the
   text lands in the same place. It is also pulled up 30px into the
   section padding, as live. */
.hero .eyebrow { margin: -30px 0 0; padding: 34px 0 4.4px; }

.hero-headline {
  font-size: 3.1rem;
  line-height: 1.2;
  color: var(--color-navy);
  max-width: 600px;
  margin: 0;
}

/* Some pages set a smaller headline in Elementor (depression-therapy:
   3rem desktop, 2.7rem tablet; mobile stays at 2.2rem like the rest). */
.hero-headline--3rem { font-size: 3rem; }

@media (max-width: 1024px) {
  .hero-headline--3rem { font-size: 2.7rem; }
}

@media (max-width: 767px) {
  .hero-headline--3rem { font-size: 2.2rem; }
}

/* depression-treatment: 2.8rem desktop, 3.2rem tablet, 1.9rem/1.1 mobile. */
.hero-headline--2-8rem { font-size: 2.8rem; }

@media (max-width: 1024px) {
  .hero-headline--2-8rem { font-size: 3.2rem; }
}

@media (max-width: 767px) {
  /* .hero prefix: outranks the shared mobile headline rule further down. */
  .hero .hero-headline--2-8rem { font-size: 1.9rem; line-height: 1.1; }
}

/* medication-assisted-therapy uses the kit h1 size: 3.2rem on desktop and
   tablet; mobile falls back to the shared 2.2rem. */
.hero-headline--3-2rem { font-size: 3.2rem; }

/* Pages whose Elementor hero is 1050px wide instead of 1000px. Desktop
   only: tablet and mobile use the shared stacked widths. */
@media (min-width: 1025px) {
  .hero--1050 .container { max-width: calc(1050px + 40px); }
}

/* --- Practitioner card --- */

.practitioner-card {
  align-self: stretch;
  margin-top: 20px;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.practitioner-head {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Elementor gives the image 30% and lets flex-shrink squeeze it, which
   lands the logo at ~95px beside the one-line name. */
.practitioner-photo {
  flex: 0 0 95px;
  width: 95px;
}

.practitioner-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.practitioner-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  text-transform: capitalize;
  color: var(--color-navy);
  margin: 0;
}

.practitioner-details {
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
  display: grid;
  gap: 15px;
}

.practitioner-details li {
  display: flex;
  align-items: center;
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-text);
}

.practitioner-details svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-right: 13.75px;   /* 10px padding + a quarter of the icon, as Elementor */
  color: var(--color-navy);
}

/* --- Hero form card --- */

.hero-form {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 20px 30px;
}

.hero-form h2 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--color-navy);
  margin-bottom: 15px;
}

/* Gravity Forms' footer spacing: 6px above the button, 10px below. */
.hero-form .btn { margin: 6px 0 10px; }

/* ============================================================
   WAVE DIVIDERS
   The Elementor "waves" shape: three layered paths, rotated
   180deg at the bottom edge, 10% of the section width tall.
   ============================================================ */

.wave {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.wave--bottom { bottom: -1px; transform: rotate(180deg); }

.wave svg {
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 1.3px);
  height: auto;
}

.wave .wave-fill { fill: var(--color-white); }

/* ============================================================
   ABOUT — "Get To Know Us", 1050px content width, 60/40
   ============================================================ */

.about { padding: 80px 0; }

.about .container { max-width: calc(1050px + 40px); }

.about-grid {
  grid-template-columns: 3fr 2fr;
  align-items: center;
  gap: 60px;
}

.about-content h2 { margin-bottom: 20px; }

/* 500px tall, cropped, and pulled 40px into the section padding above
   and below. The collage PNG carries its own transparent margin and
   drop shadows, so no radius or shadow is added here. */
.about-media { margin: -40px 0; }

.about-media img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center center;
}

/* ============================================================
   APPROACH — 1000px content width, image left 40% / text 60%
   ============================================================ */

.approach { padding: 80px 0; }

.approach .container { max-width: calc(1000px + 40px); }

.approach-grid {
  grid-template-columns: 2fr 3fr;
  align-items: center;
  gap: 60px;
}

/* Pages whose approach block is 1050px wide with a 700px photo
   (depression-treatment). Desktop only: the photo is hidden on tablet
   and square on mobile for every page. */
@media (min-width: 1025px) {
  .approach--1050 .container { max-width: calc(1050px + 40px); }
  .approach--1050 .approach-media img { height: 700px; }
}

/* depression-treatment pulls its copy 20px closer to the subhead, and
   top-aligns the list markers (6px down) since its items wrap. */
.approach-content--tight .section-subhead { margin-top: 20px; }
.benefit-list--top li { align-items: flex-start; }
.benefit-list--top svg { margin-top: 6px; }

/* Live, the photo column sits at the top and only the copy is centred.
   On desktop the 650px photo is the taller one so nothing changes; on
   tablet the copy is taller and the photo stays top-aligned. */
.approach-media { align-self: start; }

.approach-media img {
  width: 100%;
  height: 650px;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.approach-content h2 { margin-bottom: 20px; }

/* The live paragraph keeps its 20px bottom margin and the widget gap
   adds another 20px, so the subhead sits 40px below the copy. */
.approach-content .section-subhead {
  font-weight: 600;
  line-height: 1.1;
  text-transform: capitalize;
  margin: 40px 0 20px;
}

.benefit-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0 0 0 20px;
  display: grid;
  gap: 10px;
}

.benefit-list li {
  display: flex;
  align-items: center;
  line-height: 1.4;
}

.benefit-list svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-right: 13.5px;
  color: var(--color-navy);
}

/* ============================================================
   FAQ ACCORDION — 800px content width
   ============================================================ */

.faq {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-aqua) 100%);
  padding: 80px 0;
  overflow: hidden;
}

.faq .container { max-width: calc(800px + 40px); position: relative; z-index: 2; }

.faq h2 { margin: 0; }

.accordion { display: grid; gap: 25px; margin-top: 60px; }

.accordion-item {
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--color-navy);
  background: none;
  border: 0;
  padding: 28px;
  cursor: pointer;
}

.accordion-icon {
  flex: 0 0 auto;
  display: inline-flex;
  transition: transform 0.25s ease;
}

.accordion-item.open .accordion-icon { transform: rotate(180deg); }

/* Collapsed by max-height so the open/close animates; the value only
   has to exceed the tallest answer. */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item.open .accordion-content { max-height: 520px; }

.accordion-content p {
  padding: 0 40px 20px;
  font-size: var(--text-base);
  line-height: 1.4;
  margin: 0;
}

.faq-cta { margin-top: 60px; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background-color: var(--color-white);
  padding: 10px 20px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 300;
  line-height: 1.1;
  color: var(--color-navy);
}

.footer a { color: var(--color-navy); }
.footer a:hover { color: var(--color-text); }

/* ============================================================
   RESPONSIVE — Elementor breakpoints: tablet ≤1024px, mobile
   ≤767px. Values from the tablet/mobile media queries of the
   live page (post-12837.css) and header (post-12654.css).
   ============================================================ */

@media (max-width: 1024px) {
  /* --- Navbar: the live header swaps the menu for a hamburger here. --- */
  .navbar-links { display: none; }
  .hamburger { display: flex; }

  /* --- Hero: stacked, 600px columns, 60px/30px padding, 20px gap --- */
  .hero { padding: 60px 0; }
  .hero .container { max-width: calc(600px + 60px); padding: 0 30px; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-content { align-items: stretch; }
  .hero-headline { max-width: none; margin-bottom: 20px; }
  .practitioner-card { margin-top: 0; }
  .hero-form { margin-top: 20px; }

  /* --- About: stacked, 640px, text above the collage --- */
  .about { padding: 60px 0; }
  .about .container { max-width: calc(640px + 60px); padding: 0 30px; }
  .about-grid { grid-template-columns: 1fr; gap: 60px; }
  .about-media { padding: 0 40px; }

  /* --- Approach: no photo on tablet, the copy takes the full width --- */
  .approach { padding: 60px 0; }
  .approach .container { padding: 0 30px; }
  .approach-grid { grid-template-columns: 1fr; }
  .approach-media { display: none; }

  /* --- FAQ: 540px --- */
  .faq { padding: 60px 0; }
  .faq .container { max-width: calc(540px + 60px); padding: 0 30px; }
  .accordion { margin-top: 90px; }   /* 60px gap + 30px under the heading */
}

@media (max-width: 767px) {
  /* --- Navbar: a smaller logo so the bar takes less of a phone screen --- */
  :root { --nav-logo: 80px; --nav-logo-scrolled: 56px; }
  .mobile-nav a { font-size: 1.2rem; }

  /* --- Hero --- */
  .hero { padding: 60px 0 80px; }
  .hero .container { padding: 0 20px; }

  /* The h1 strut on mobile is 2.2rem x 1.1 = 38.72px, with the 15px text
     on its baseline (20 + 18 + 0.72). */
  .hero .eyebrow { padding: 20px 0 0.72px; line-height: 18px; }

  .hero-headline { font-size: 2.2rem; line-height: 1.1; margin-bottom: 30px; }

  /* The image box stacks: logo centred at 125px, name centred below. */
  .practitioner-head { flex-direction: column; gap: 0; text-align: center; }
  .practitioner-photo { flex: 0 0 auto; width: 125px; }
  .practitioner-name { margin-bottom: 8px; }
  .practitioner-details { padding-left: 0; }

  .hero-form { padding: 25px 20px; }

  /* The live hero wave is stretched to 193% on phones. */
  .hero .wave svg { width: calc(193% + 1.3px); }

  /* --- About: collage first, then the copy --- */
  .about { padding: 50px 0; }
  .about .container { padding: 0 20px; }
  .about-grid { gap: 40px; }
  .about-media { order: -1; padding: 0; }

  /* --- Approach: photo back on phones, square, above the copy; no top
     padding --- */
  .approach { padding: 0 0 50px; }
  .approach .container { padding: 0 20px; }
  .approach-grid { gap: 40px; }
  .approach-media { display: block; }
  .approach-media img { height: auto; aspect-ratio: 1 / 1; }
  .benefit-list { padding-left: 0; gap: 20px; }
  .approach-content .btn { display: block; width: fit-content; margin: 0 auto; }

  /* --- FAQ --- */
  .faq { padding: 50px 0 80px; }
  .faq .container { padding: 0 20px; }
  .accordion { margin-top: 75px; }   /* 60px gap + 15px above the toggles */

  /* Mobile CTAs are larger: 20px/40px padding. */
  .approach-content .btn,
  .faq-cta .btn { padding: 20px 40px; }

  .footer { line-height: 1.5; }
}

/* ============================================================
   LEGAL PAGE — privacy-policy/
   A short page header on the hero wash with its wave, then the
   policy text in an 800px reading column.
   ============================================================ */

.page-hero {
  position: relative;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-aqua) 100%);
  padding: 60px 0 120px;
  overflow: hidden;
  text-align: center;
}

.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { margin: 0; }

.legal .container { max-width: calc(800px + 40px); }

.legal { padding: 40px 0 80px; }

.legal p { margin: 0 0 20px; }

/* The source marks its section titles as bold paragraphs. Only top-level
   ones: list items also open with a bold label, and :only-child ignores
   the text that follows it. */
.legal .container > p:has(> strong:only-child) {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-navy);
  margin-top: 40px;
}

.legal ul { margin: 0 0 20px; padding-left: 1.4rem; }
.legal li p { margin-bottom: 10px; }
.legal strong { color: var(--color-navy); font-weight: 500; }

/* Long bare URLs must wrap on phones instead of widening the page. */
.legal a {
  text-decoration: underline;
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  .page-hero { padding: 40px 0 90px; }
  .legal .container { padding: 0 30px; }
}

@media (max-width: 767px) {
  .page-hero { padding: 30px 0 60px; }
  .legal .container { padding: 0 20px; }
  .legal { padding: 20px 0 60px; }
}