/* =========================================================
   OBH CONTENT SLIDER
   Fixed-stage editorial carousel

   DESIGN RULES
   - Full-width soft Odyssey background
   - 80% centered content footprint
   - Centered heading cluster
   - Thin editorial tab rail, never pill buttons
   - Three-card stage: previous / active / next
   - Active card dominant; adjacent cards smaller
   - Treatment-specific softened color families
   - No rendered images
   - CTA appearance remains owned by 03-components.css
   - Eyebrow appearance remains owned by .obh-eyebrow
   - Maximum border radius: 3px
   ========================================================= */


/* =========================================================
   1. FULL-WIDTH SECTION
   ========================================================= */

.obh-content-slider {
  position: relative;

  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: 80px 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(178, 217, 245, 0.24) 0%,
      rgba(178, 217, 245, 0.08) 28%,
      rgba(178, 217, 245, 0) 55%
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(135, 73, 147, 0.07) 0%,
      rgba(135, 73, 147, 0.025) 30%,
      rgba(135, 73, 147, 0) 58%
    ),
    linear-gradient(
      135deg,
      #f8fbfd 0%,
      #f7f9fc 48%,
      #fbf9fc 100%
    );

  box-sizing: border-box;
}


/* =========================================================
   2. TOTAL COMPONENT WIDTH
   ========================================================= */

.obh-content-slider__inner {
  width: 80%;

  margin-inline: auto;

  box-sizing: border-box;
}


/* =========================================================
   3. CENTERED HEADING CLUSTER

   IMPORTANT:
   Do not redefine .obh-eyebrow here.
   ========================================================= */

.obh-content-slider__header {
  align-items: center;

  width: 100%;
  max-width: 980px;

  margin: 0 auto;

  text-align: center;
}

.obh-content-slider__subhead {
  width: min(100%, 820px);

  margin-left: auto !important;
  margin-right: auto !important;

  color: var(--obh-navy);

  text-align: center;
}

.obh-content-slider__intro {
  width: min(100%, 900px);

  margin-left: auto !important;
  margin-right: auto !important;

  color: var(--obh-navy);

  text-align: center;
}

.obh-content-slider__intro > :first-child {
  margin-top: 0 !important;
}

.obh-content-slider__intro > :last-child {
  margin-bottom: 0 !important;
}


/* =========================================================
   4. COMPONENT SPACING
   Heading cluster -> navigation = 56px
   ========================================================= */

.obh-content-slider__component {
  position: relative;

  width: 100%;

  margin-top: var(--obh-section-note-gap);

  box-sizing: border-box;
}


/* =========================================================
   5. EDITORIAL TAB RAIL

   These are intentionally text controls with a shared
   baseline — not pills and not CTA buttons.
   ========================================================= */

.obh-content-slider__nav {
  position: relative;

  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(120px, 1fr)
    );

  width: min(100%, 1040px);

  margin:
    0
    auto
    38px;

  padding: 0;

  border: 0;
  border-bottom:
    1px solid
    rgba(16, 42, 77, 0.13);

  background: transparent;

  box-sizing: border-box;
}


/* Strong reset against any generic theme button styling. */

button.obh-content-slider__nav-button {
  appearance: none !important;

  position: relative;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;
  min-height: 48px;

  margin: 0 !important;
  padding:
    0
    16px
    15px !important;

  color:
    rgba(16, 42, 77, 0.70) !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  font-family:
    var(--obh-font-body) !important;

  font-size: 1.03rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.1px !important;

  text-align: center;
  text-decoration: none !important;

  cursor: pointer;

  transition:
    color 180ms ease,
    font-weight 180ms ease;

  box-sizing: border-box;
}


button.obh-content-slider__nav-button::after {
  content: "";

  position: absolute;

  left: 18%;
  right: 18%;
  bottom: -1px;

  height: 2px;

  background: transparent;

  opacity: 0;

  transform: scaleX(0.35);
  transform-origin: center;

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}


button.obh-content-slider__nav-button:hover,
button.obh-content-slider__nav-button:focus-visible {
  color: var(--obh-navy) !important;
}


button.obh-content-slider__nav-button:focus-visible {
  outline: 2px solid var(--obh-accent);
  outline-offset: 3px;
}


button.obh-content-slider__nav-button.is-active,
button.obh-content-slider__nav-button[aria-current="true"] {
  color: var(--obh-navy) !important;

  font-weight: 600 !important;
}


button.obh-content-slider__nav-button.is-active::after,
button.obh-content-slider__nav-button[aria-current="true"]::after {
  opacity: 1;

  transform: scaleX(1);
}


/* Mental health active line */

button.obh-content-slider__nav-button--mental.is-active::after,
button.obh-content-slider__nav-button--mental[aria-current="true"]::after {
  background:
    linear-gradient(
      90deg,
      var(--obh-primary),
      var(--obh-blue)
    );
}


/* Substance use active line */

button.obh-content-slider__nav-button--substance.is-active::after,
button.obh-content-slider__nav-button--substance[aria-current="true"]::after {
  background:
    linear-gradient(
      90deg,
      #75a9ce,
      #b2d9f5
    );
}


/* Eating disorder active line */

button.obh-content-slider__nav-button--eating.is-active::after,
button.obh-content-slider__nav-button--eating[aria-current="true"]::after {
  background:
    linear-gradient(
      90deg,
      var(--obh-purple),
      var(--obh-purple-fill)
    );
}


/* Neutral / guidance active line */

button.obh-content-slider__nav-button--neutral.is-active::after,
button.obh-content-slider__nav-button--neutral[aria-current="true"]::after {
  background:
    linear-gradient(
      90deg,
      var(--obh-primary),
      var(--obh-purple)
    );
}


/* =========================================================
   6. FIXED THREE-CARD STAGE
   ========================================================= */

.obh-content-slider__stage {
  position: relative;

  width: 100%;

  margin: 0;

  box-sizing: border-box;
}


/*
 * All cards occupy the same grid cell.
 * State classes move them left / center / right.
 *
 * Because the cards remain grid items, the stage height
 * follows the tallest slide automatically.
 */

.obh-content-slider__cards {
  position: relative;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;

  align-items: stretch;

  width: calc(100% + 18vw);

  margin-left: -9vw;
  margin-right: -9vw;

  padding:
    18px
    9vw
    24px;

  overflow: hidden;

  touch-action: pan-y;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 3%,
      rgba(0, 0, 0, 0.72) 8%,
      #000 14%,
      #000 86%,
      rgba(0, 0, 0, 0.72) 92%,
      rgba(0, 0, 0, 0.18) 97%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 3%,
      rgba(0, 0, 0, 0.72) 8%,
      #000 14%,
      #000 86%,
      rgba(0, 0, 0, 0.72) 92%,
      rgba(0, 0, 0, 0.18) 97%,
      transparent 100%
    );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  box-sizing: border-box;
}


/* =========================================================
   7. CARD BASE
   ========================================================= */

.obh-content-slider__slide {
  position: relative;

  grid-column: 1;
  grid-row: 1;

  justify-self: center;
  align-self: stretch;

  display: flex;
  flex-direction: column;

  width: 54%;
  min-width: 0;
  min-height: 315px;

  margin: 0;

  overflow: hidden;

  color: var(--obh-navy);

  border:
    1px solid
    rgba(16, 42, 77, 0.11);

  border-radius: 3px;

  box-shadow:
    0 12px 32px
    rgba(16, 42, 77, 0.055);

  -webkit-backdrop-filter:
    blur(8px)
    saturate(80%);

  backdrop-filter:
    blur(8px)
    saturate(80%);

  transform-origin: center;

  transition:
    opacity 320ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease,
    filter 320ms ease;

  box-sizing: border-box;
}


/* =========================================================
   8. TREATMENT COLOR FAMILIES
   ========================================================= */


/* Mental health:
   softened/desaturated Odyssey blues */

.obh-content-slider__slide--mental {
  background:
  linear-gradient(
    135deg,
    rgba(53, 105, 181, 0.18) 0%,
    rgba(108, 91, 174, 0.11) 48%,
    rgba(48, 102, 158, 0.07) 100%
  ),
  rgba(255, 255, 255, 0.44);

  border-color:
    rgba(32, 78, 136, 0.16);
}


/* Substance use:
   #b2d9f5 family */

.obh-content-slider__slide--substance {
  background:
    linear-gradient(
      135deg,
      rgba(178, 217, 245, 0.54) 0%,
      rgba(155, 198, 223, 0.28) 50%,
      rgba(117, 169, 206, 0.12) 100%
    ),
    rgba(255, 255, 255, 0.38);

  border-color:
    rgba(117, 169, 206, 0.18);
}


/* Eating disorders:
   softened/desaturated Odyssey purples */

.obh-content-slider__slide--eating {
  background:
    linear-gradient(
      135deg,
      rgba(135, 73, 147, 0.20) 0%,
      rgba(91, 50, 97, 0.09) 52%,
      rgba(59, 34, 66, 0.045) 100%
    ),
    rgba(255, 255, 255, 0.39);

  border-color:
    rgba(135, 73, 147, 0.16);
}


/* Neutral guidance */

.obh-content-slider__slide--neutral {
  background:
    linear-gradient(
      135deg,
      rgba(178, 217, 245, 0.22) 0%,
      rgba(255, 255, 255, 0.30) 48%,
      rgba(135, 73, 147, 0.10) 100%
    ),
    rgba(255, 255, 255, 0.39);

  border-color:
    rgba(16, 42, 77, 0.11);
}


/* =========================================================
   9. POSITION STATES
   ========================================================= */


/* Active center card */

.obh-content-slider__slide.is-active {
  z-index: 4;

  opacity: 1;

  transform:
    translateX(0)
    scale(1);

  filter: none;

  box-shadow:
    0 22px 56px
    rgba(16, 42, 77, 0.11);
}


/* Previous card */

.obh-content-slider__slide.is-prev {
  z-index: 2;

  opacity: 0.64;

  transform:
    translateX(-82%)
    scale(0.88);

  filter:
    saturate(0.82)
    brightness(1.025);

  cursor: pointer;
}


/* Next card */

.obh-content-slider__slide.is-next {
  z-index: 2;

  opacity: 0.64;

  transform:
    translateX(82%)
    scale(0.88);

  filter:
    saturate(0.82)
    brightness(1.025);

  cursor: pointer;
}


/* Remaining cards do not appear in the stage. */

.obh-content-slider__slide.is-hidden {
  z-index: 1;

  visibility: hidden;

  opacity: 0;

  transform:
    translateX(0)
    scale(0.80);

  pointer-events: none;
}


/* Side-card hover gives a restrained affordance. */

.obh-content-slider__slide.is-prev:hover {
  opacity: 0.78;

  transform:
    translateX(-80%)
    scale(0.90);
}

.obh-content-slider__slide.is-next:hover {
  opacity: 0.78;

  transform:
    translateX(80%)
    scale(0.90);
}


/* =========================================================
   10. CARD CONTENT
   ========================================================= */

.obh-content-slider__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  flex: 1 1 auto;

  width: 100%;

  margin: 0;
  padding: 38px 40px;

  background: transparent;

  color: var(--obh-navy);

  box-sizing: border-box;
}


/* =========================================================
   11. CARD HEADING
   ========================================================= */

.obh-content-slider__heading {
  width: 100%;
  max-width: 650px;

  margin: 0;

  color: var(--obh-navy) !important;

  font-family:
    var(--obh-font-heading);

  font-size:
    clamp(
      1.7rem,
      2vw,
      2.25rem
    );

  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.03em;
}


/* =========================================================
   12. CARD COPY
   ========================================================= */

.obh-content-slider__copy {
  width: 100%;
  max-width: 650px;

  margin-top: 18px;

  color: var(--obh-navy);
}


.obh-content-slider__copy > :first-child {
  margin-top: 0 !important;
}


.obh-content-slider__copy > :last-child {
  margin-bottom: 0 !important;
}


.obh-content-slider__copy p,
.obh-content-slider__copy ul,
.obh-content-slider__copy ol,
.obh-content-slider__copy li,
.obh-content-slider__copy strong,
.obh-content-slider__copy b,
.obh-content-slider__copy em,
.obh-content-slider__copy a {
  color: inherit;
}


/* =========================================================
   13. CTA SPACING ONLY

   The actual button is still controlled entirely by
   the existing global button classes in 03-components.css.
   ========================================================= */

body
.obh-content-slider__card
> .obh-section-button {
  margin-top:
    var(--obh-section-button-gap)
    !important;

  margin-bottom: 0 !important;
}


.obh-content-slider__button {
  margin-bottom: 0 !important;
}


/* =========================================================
   14. PREVIOUS / NEXT ARROWS

   Soft floating controls.
   No border, fill, container or shadow.
   ========================================================= */

button.obh-content-slider__arrow {
  appearance: none !important;

  position: absolute;
  top: auto;
  bottom: 8px;
  z-index: 7;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 92px;
  height: 92px;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  cursor: pointer;

  transform: none;

  opacity: 0.88;

  transition:
    opacity 180ms ease,
    transform 180ms ease;

  box-sizing: border-box;
}


button.obh-content-slider__arrow--prev {
  left: 1.5%;
}


button.obh-content-slider__arrow--next {
  right: 1.5%;
}


button.obh-content-slider__arrow span {
  display: inline-block;

  font-size: 3rem;
  font-weight: 400;
  line-height: 1;

  background:
    linear-gradient(
      90deg,
      #6f8fb8 0%,
      #e7d9eb 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}


button.obh-content-slider__arrow:hover {
  opacity: 1;
}


button.obh-content-slider__arrow:focus-visible {
  opacity: 0.82;

  outline:
    2px solid
    rgba(164, 186, 214, 0.72);

  outline-offset: 4px;
}


/* =========================================================
   15. MODERN PROGRESS RAIL
   ========================================================= */

.obh-content-slider__progress {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  gap: 8px;

  margin-top: 18px;
}


button.obh-content-slider__progress-button {
  --obh-slider-progress-color:
    var(--obh-primary);

  appearance: none !important;

  position: relative;

  display: block !important;

  width: 52px;
  height: 18px;

  margin: 0 !important;
  padding: 8px 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  cursor: pointer;

  box-sizing: border-box;
}


.obh-content-slider__progress-bar {
  position: relative;

  display: block;

  width: 100%;
  height: 2px;

  overflow: hidden;

  background:
    rgba(16, 42, 77, 0.12);

  border-radius: 1px;
}


.obh-content-slider__progress-bar::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    var(--obh-slider-progress-color);

  opacity: 0;

  transform: scaleX(0);
  transform-origin: left center;

  transition:
    opacity 180ms ease,
    transform 220ms ease;
}


button.obh-content-slider__progress-button--mental {
  --obh-slider-progress-color:
    var(--obh-primary);
}


button.obh-content-slider__progress-button--substance {
  --obh-slider-progress-color:
    #75a9ce;
}


button.obh-content-slider__progress-button--eating {
  --obh-slider-progress-color:
    var(--obh-purple);
}


button.obh-content-slider__progress-button--neutral {
  --obh-slider-progress-color:
    var(--obh-primary);
}


button.obh-content-slider__progress-button.is-active
.obh-content-slider__progress-bar::after,
button.obh-content-slider__progress-button[aria-current="true"]
.obh-content-slider__progress-bar::after {
  opacity: 0.9;

  transform: scaleX(1);
}


button.obh-content-slider__progress-button.is-past
.obh-content-slider__progress-bar::after {
  opacity: 0.30;

  transform: scaleX(1);
}


button.obh-content-slider__progress-button:focus-visible {
  outline:
    2px solid
    var(--obh-accent);

  outline-offset: 2px;
}


/* =========================================================
   16. LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

  .obh-content-slider__inner {
    width: 84%;
  }


  .obh-content-slider__slide {
    width: 58%;
  }


  .obh-content-slider__slide.is-prev {
    transform:
      translateX(-76%)
      scale(0.88);
  }


  .obh-content-slider__slide.is-next {
    transform:
      translateX(76%)
      scale(0.88);
  }

}


/* =========================================================
   17. TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .obh-content-slider__inner {
    width: 88%;
  }


  .obh-content-slider__subhead,
  .obh-content-slider__intro {
    width: 90%;
  }


  .obh-content-slider__nav {
    width: 100%;
  }


  button.obh-content-slider__nav-button {
    padding-left: 10px !important;
    padding-right: 10px !important;

    font-size: 0.88rem !important;
  }


  .obh-content-slider__slide {
    width: 64%;
  }


  .obh-content-slider__slide.is-prev {
    transform:
      translateX(-68%)
      scale(0.88);
  }


  .obh-content-slider__slide.is-next {
    transform:
      translateX(68%)
      scale(0.88);
  }


  .obh-content-slider__card {
    padding: 34px;
  }


  button.obh-content-slider__arrow--prev {
    left: 1%;
  }


  button.obh-content-slider__arrow--next {
    right: 1%;
  }

}


/* =========================================================
   18. MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .obh-content-slider {
    padding:
      64px
      28px;
  }


  .obh-content-slider__inner {
    width: 100%;
  }


  .obh-content-slider__header {
    max-width: 100%;
  }


  .obh-content-slider__subhead,
  .obh-content-slider__intro {
    width: 100%;
  }


  .obh-content-slider__copy,
  .obh-content-slider__copy p,
  .obh-content-slider__copy li {
    font-size: 0.95rem !important;
  }


  /* -----------------------------------------------
     Mobile navigation remains a clean text rail.
     ----------------------------------------------- */

  .obh-content-slider__nav {
    display: flex;

    justify-content: flex-start;

    width:
      calc(
        100% + 28px
      );

    margin-right: -28px;

    overflow-x: auto;

    scrollbar-width: none;
  }


  .obh-content-slider__nav::-webkit-scrollbar {
    display: none;
  }


  button.obh-content-slider__nav-button {
    flex: 0 0 auto;

    width: auto;
    min-width: 145px;
  }


  /* -----------------------------------------------
     Mobile stage geometry

     The section already has 28px horizontal padding.
     Expanding the cards viewport by 56px and pulling it
     outward by 28px per side makes the carousel viewport
     exactly full-screen width.

     The active slide then uses a fixed 16px visual gutter
     on each side of that full-width viewport:
     100% - 32px.

     This keeps the stage, active slide and arrows perfectly
     symmetrical at every mobile viewport width.
     ----------------------------------------------- */

  .obh-content-slider__cards {
    width: calc(100% + 56px);

    margin-left: -28px;
    margin-right: -28px;

    padding:
      14px
      0
      24px;

    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.5) 3%,
        #000 9%,
        #000 91%,
        rgba(0, 0, 0, 0.5) 97%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.5) 3%,
        #000 9%,
        #000 91%,
        rgba(0, 0, 0, 0.5) 97%,
        transparent 100%
      );
  }


  .obh-content-slider__slide {
    width: 83%;
    min-height: 320px;
	  
	background-color: rgba(255, 255, 255, 0.62);
  }


  .obh-content-slider__slide.is-prev {
    opacity: 0.40;

    transform:
      translateX(-71%)
      scale(0.91);
  }


  .obh-content-slider__slide.is-next {
    opacity: 0.40;

    transform:
      translateX(71%)
      scale(0.91);
  }


  .obh-content-slider__slide.is-prev:hover {
    transform:
      translateX(-71%)
      scale(0.91);
  }


  .obh-content-slider__slide.is-next:hover {
    transform:
      translateX(71%)
      scale(0.91);
  }


  .obh-content-slider__card {
    padding:
      30px
      26px;
  }


  .obh-content-slider__heading {
    font-size:
      clamp(
        1.55rem,
        7vw,
        2rem
      );
  }


  /*
   * Arrow alignment
   *
   * The full-width cards viewport starts 28px outside the
   * normal stage. The active slide sits 16px inside that
   * viewport, so its visible edge is 12px outside the stage:
   * 28px - 16px = 12px.
   *
   * Place each arrow's CENTER on that slide edge. Using
   * translateX(50%) keeps the alignment correct even if the
   * arrow button size changes later.
   */

  button.obh-content-slider__arrow {
    width: 44px;
    height: 44px;

    opacity: 0.88;
  }


  button.obh-content-slider__arrow span {
    font-size: 2.2rem;
  }


  button.obh-content-slider__arrow--prev {
    left: -12px;

    transform: translateX(-50%);
  }


  button.obh-content-slider__arrow--next {
    right: -12px;

    transform: translateX(50%);
  }


  button.obh-content-slider__progress-button {
    width: 40px;
  }

}


/* =========================================================
   19. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .obh-content-slider__slide,
  button.obh-content-slider__nav-button,
  button.obh-content-slider__arrow,
  .obh-content-slider__progress-bar::after {
    transition: none;
  }

}
/* =========================================================
   FIND TREATMENT — PATHWAYS INTEGRATION
   Page ID: 868

   Section-to-section spacing is controlled by the shared
   .obh-site-page-stack wrapper in 14-content-components.css.

   Body copy to CTA continues to use the global 36px button gap.
   ========================================================= */


/* ---------------------------------------------------------
   PATHWAY CARD INTERNAL SPACING

   The generic referral-step component already uses flex.
   Remove its 16px parent gap so it does not stack on top
   of the global button margin.
   --------------------------------------------------------- */

body.page-id-868
.obh-component--three-column
.obh-referral-step {
  gap: 0;
}


/* Heading -> body copy */

body.page-id-868
.obh-component--three-column
.obh-referral-step__heading
+ .obh-referral-step__copy {
  margin-top: 16px !important;
}


/* Body copy -> CTA = Odyssey standard 36px */

body.page-id-868
.obh-component--three-column
.obh-referral-step__button {
  margin-top: var(--obh-section-button-gap) !important;
}

/* =========================================================
   HOMEPAGE SLIDER — BODY COPY WIDTH
   ========================================================= */

.obh-home-specialized-slider .obh-content-slider__copy {
  width: 80%;
  max-width: none;
}


@media (max-width: 1024px) {

  .obh-home-specialized-slider .obh-content-slider__copy {
    width: 90%;
  }

}