@import url("enhancements-base.css");

/* Page-specific hero photography added during staging art direction. Keep the
   shared page structure intact while giving each service/condition page its
   own intentional opening image. */

html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero,
html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero,
html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero,
html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero,
html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero,
html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero {
  min-height: 570px;
  display: flex;
  align-items: center;
  padding: 48px 0 62px;
  color: white;
}

html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero::before,
html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero::after,
html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero::before,
html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero::after,
html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero::before,
html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero::after,
html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero::before,
html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero::after,
html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero::before,
html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero::after,
html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero::before,
html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero::after {
  display: none;
}

html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero {
  background:
    linear-gradient(90deg, rgba(12,31,37,.96) 0%, rgba(12,31,37,.86) 34%, rgba(12,31,37,.52) 60%, rgba(12,31,37,.16) 100%),
    url("assets/images/Anxiety.png") center 46% / cover no-repeat;
}

html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero {
  background:
    linear-gradient(90deg, rgba(12,31,37,.95) 0%, rgba(12,31,37,.84) 36%, rgba(12,31,37,.48) 62%, rgba(12,31,37,.16) 100%),
    url("assets/images/Grief_&_Loss.png") center 46% / cover no-repeat;
}

html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero {
  background:
    linear-gradient(90deg, rgba(12,31,37,.94) 0%, rgba(12,31,37,.80) 38%, rgba(12,31,37,.42) 64%, rgba(12,31,37,.12) 100%),
    url("assets/images/organized desk.png") center 52% / cover no-repeat;
}

html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero {
  background:
    linear-gradient(90deg, rgba(12,31,37,.95) 0%, rgba(12,31,37,.82) 38%, rgba(12,31,37,.43) 64%, rgba(12,31,37,.12) 100%),
    url("assets/images/Script Pad.png") center 52% / cover no-repeat;
}

html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero {
  background:
    linear-gradient(90deg, rgba(12,31,37,.95) 0%, rgba(12,31,37,.82) 36%, rgba(12,31,37,.46) 62%, rgba(12,31,37,.10) 100%),
    url("assets/images/OCD_organizing.png") center 48% / cover no-repeat;
}

html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero {
  background:
    linear-gradient(90deg, rgba(12,31,37,.95) 0%, rgba(12,31,37,.82) 38%, rgba(12,31,37,.42) 64%, rgba(12,31,37,.10) 100%),
    url("assets/images/PTSD safe.png") center 48% / cover no-repeat;
}

html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero .page-hero-inner,
html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero .page-hero-inner,
html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero .page-hero-inner,
html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero .page-hero-inner,
html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero .page-hero-inner,
html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero .page-hero-inner {
  max-width: 1180px;
}

html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero h1,
html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero p,
html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero h1,
html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero p,
html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero h1,
html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero p,
html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero h1,
html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero p,
html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero h1,
html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero p,
html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero h1,
html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero p {
  max-width: 620px;
  color: white;
  text-shadow: 0 2px 18px rgba(0,0,0,.22);
}

html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero .eyebrow,
html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero .eyebrow,
html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero .eyebrow,
html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero .eyebrow,
html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero .eyebrow,
html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero .eyebrow {
  color: #efd8c8;
}

html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero .text-link,
html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero .text-link,
html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero .text-link,
html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero .text-link,
html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero .text-link,
html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero .text-link {
  color: white;
}

html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero .button,
html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero .button,
html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero .button,
html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero .button,
html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero .button,
html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero .button {
  border-color: white;
  background: white;
  color: var(--ink);
}

/* Grief & Loss previously reused the Depression park photo. The uploaded grief
   image now owns the hero, so suppress the mismatched article image. */
html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .article-photo:has(img[src$="Sunset walking at the park.png"]) {
  display: none;
}

/* Carry condition photography onto the homepage chooser as image headers. */
a.condition-card:is([href="anxiety.html"], [href="/anxiety"]),
a.condition-card:is([href="adhd.html"], [href="/adhd"]),
a.condition-card:is([href="ptsd.html"], [href="/ptsd"]),
a.condition-card:is([href="ocd.html"], [href="/ocd"]),
a.condition-card:is([href="grief-loss.html"], [href="/grief-loss"]) {
  position: relative;
  overflow: hidden;
  padding-top: 124px;
  background: white;
}

a.condition-card:is([href="anxiety.html"], [href="/anxiety"])::before,
a.condition-card:is([href="adhd.html"], [href="/adhd"])::before,
a.condition-card:is([href="ptsd.html"], [href="/ptsd"])::before,
a.condition-card:is([href="ocd.html"], [href="/ocd"])::before,
a.condition-card:is([href="grief-loss.html"], [href="/grief-loss"])::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 102px;
  background-size: cover;
  background-repeat: no-repeat;
}

a.condition-card:is([href="anxiety.html"], [href="/anxiety"])::before {
  background-image: linear-gradient(180deg, rgba(23,50,58,.02), rgba(23,50,58,.18)), url("assets/images/Anxiety.png");
  background-position: center 45%;
}

a.condition-card:is([href="adhd.html"], [href="/adhd"])::before {
  background-image: linear-gradient(180deg, rgba(23,50,58,.02), rgba(23,50,58,.16)), url("assets/images/organized desk.png");
  background-position: center 52%;
}

a.condition-card:is([href="ptsd.html"], [href="/ptsd"])::before {
  background-image: linear-gradient(180deg, rgba(23,50,58,.02), rgba(23,50,58,.16)), url("assets/images/PTSD safe.png");
  background-position: center 48%;
}

a.condition-card:is([href="ocd.html"], [href="/ocd"])::before {
  background-image: linear-gradient(180deg, rgba(23,50,58,.02), rgba(23,50,58,.14)), url("assets/images/OCD_organizing.png");
  background-position: center 45%;
}

a.condition-card:is([href="grief-loss.html"], [href="/grief-loss"])::before {
  background-image: linear-gradient(180deg, rgba(23,50,58,.02), rgba(23,50,58,.16)), url("assets/images/Grief_&_Loss.png");
  background-position: center 30%;
}

a.condition-card:is([href="anxiety.html"], [href="/anxiety"]) > span,
a.condition-card:is([href="adhd.html"], [href="/adhd"]) > span,
a.condition-card:is([href="ptsd.html"], [href="/ptsd"]) > span,
a.condition-card:is([href="ocd.html"], [href="/ocd"]) > span,
a.condition-card:is([href="grief-loss.html"], [href="/grief-loss"]) > span {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  margin: 0;
  padding: 6px 9px;
  border-radius: 999px;
  color: white;
  background: rgba(16,39,46,.78);
  backdrop-filter: blur(8px);
}

@media (max-width: 680px) {
  html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero,
  html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero,
  html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero,
  html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero,
  html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero,
  html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero {
    min-height: 620px;
    padding: 46px 0 62px;
  }

  html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero {
    background:
      linear-gradient(90deg, rgba(12,31,37,.93), rgba(12,31,37,.66)),
      url("assets/images/Anxiety.png") 52% center / cover no-repeat;
  }

  html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero {
    background:
      linear-gradient(90deg, rgba(12,31,37,.92), rgba(12,31,37,.62)),
      url("assets/images/Grief_&_Loss.png") 54% 48% / cover no-repeat;
  }

  html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero {
    background:
      linear-gradient(90deg, rgba(12,31,37,.92), rgba(12,31,37,.62)),
      url("assets/images/organized desk.png") 58% center / cover no-repeat;
  }

  html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero {
    background:
      linear-gradient(90deg, rgba(12,31,37,.92), rgba(12,31,37,.62)),
      url("assets/images/Script Pad.png") 58% center / cover no-repeat;
  }

  html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero {
    background:
      linear-gradient(90deg, rgba(12,31,37,.92), rgba(12,31,37,.62)),
      url("assets/images/OCD_organizing.png") 60% center / cover no-repeat;
  }

  html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero {
    background:
      linear-gradient(90deg, rgba(12,31,37,.92), rgba(12,31,37,.62)),
      url("assets/images/PTSD safe.png") 62% center / cover no-repeat;
  }

  html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero h1,
  html:has(link[rel="canonical"][href$="/anxiety"]) .condition-hero p,
  html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero h1,
  html:has(link[rel="canonical"][href$="/loss-bereavement"], link[rel="canonical"][href$="/grief-loss"]) .condition-hero p,
  html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero h1,
  html:has(link[rel="canonical"][href$="/attention-deficit-hyperactive-disorder"], link[rel="canonical"][href$="/adhd"]) .condition-hero p,
  html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero h1,
  html:has(link[rel="canonical"][href$="/medication-management"]) .condition-hero p,
  html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero h1,
  html:has(link[rel="canonical"][href$="/obsessive-compulsive-disorder"], link[rel="canonical"][href$="/ocd"]) .condition-hero p,
  html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero h1,
  html:has(link[rel="canonical"][href$="/post-traumatic-stress-disorder"], link[rel="canonical"][href$="/ptsd"]) .condition-hero p {
    max-width: none;
  }
}