/* Nao care-detail pages (T04): fixes agreed on the Brixadi page, as one shared stylesheet.
   Load it last in <head>, after the page's inline styles, nao-shared-header.css and
   nao-components.css. Each block is described in "Nao Medical Website/CARE-DETAIL-CHANGES.md".
   The colour variables (--nao-navy, --nao-green, --nao-text) come from the page's own :root. */

/* Button states: lift on hover, arrow badge inverts and nudges forward.
   Keyboard focus gets the same treatment plus a visible ring. */
.book-apt-btn,
.book-tele-visit-btn {
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease;
}
.btn-arrow {
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), background-color 220ms ease, color 220ms ease;
}
@media (hover: hover) {
  .book-apt-btn:hover,
  .book-tele-visit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(30, 53, 101, 0.16);
  }
  .book-apt-btn:hover { background: #172b54; }
  .book-tele-visit-btn:hover { border-color: var(--nao-navy); }
  .book-apt-btn:hover .btn-arrow {
    background: #fff;
    color: var(--nao-navy);
    transform: translateX(3px);
  }
  .book-tele-visit-btn:hover .btn-arrow {
    background: var(--nao-navy);
    color: #fff;
    transform: translateX(3px);
  }
}
.book-apt-btn:focus-visible,
.book-tele-visit-btn:focus-visible {
  outline: 2px solid var(--nao-navy);
  outline-offset: 4px;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(30, 53, 101, 0.16);
}
.book-apt-btn:focus-visible { background: #172b54; }
.book-tele-visit-btn:focus-visible { border-color: var(--nao-navy); }
.book-apt-btn:focus-visible .btn-arrow {
  background: #fff;
  color: var(--nao-navy);
  transform: translateX(3px);
}
.book-tele-visit-btn:focus-visible .btn-arrow {
  background: var(--nao-navy);
  color: #fff;
  transform: translateX(3px);
}
.book-apt-btn:active,
.book-tele-visit-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(30, 53, 101, 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .book-apt-btn,
  .book-tele-visit-btn,
  .btn-arrow { transition: none; }
  .book-apt-btn:hover,
  .book-tele-visit-btn:hover,
  .book-apt-btn:focus-visible,
  .book-tele-visit-btn:focus-visible,
  .book-apt-btn:hover .btn-arrow,
  .book-tele-visit-btn:hover .btn-arrow,
  .book-apt-btn:focus-visible .btn-arrow,
  .book-tele-visit-btn:focus-visible .btn-arrow { transform: none; }
}

/* Care path: numbered steps shown as a sequence.
   .process-grid had no rule at all, so the cards stacked full width with no gap. */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
}
.process-grid .info-card {
  position: relative;
  overflow: visible;
  padding: 28px 24px 26px;
}
.process-grid .info-card h3 {
  min-height: 2.32em;
  margin-bottom: 12px;
}
.process-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: var(--nao-green);
  color: var(--nao-navy);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}
/* The full stop stays in the heading text ("1. Clinical evaluation") but is not drawn in the badge. */
.process-num__dot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Dashed path from each step's number to the next one. */
.process-grid .info-card:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 51px;
  left: 84px;
  right: -36px;
  border-top: 2px dashed rgba(30, 53, 101, 0.22);
  pointer-events: none;
}
@media screen and (max-width: 1200px) {
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .process-grid .info-card h3 {
    min-height: 0;
  }
  .process-grid .info-card:nth-child(even)::after {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .process-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .process-grid .info-card {
    padding: 20px;
  }
  .process-grid .info-card h3 {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
  }
  .process-num {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    font-size: 19px;
  }
  .process-grid .info-card:not(:last-child)::after {
    display: block;
    top: 100%;
    right: auto;
    left: 39px;
    height: 17px;
    border-top: 0;
    border-left: 2px dashed rgba(30, 53, 101, 0.22);
  }
}

/* Medication comparison: the alternatives sit in one row and every title is the
   same size. Each card is clickable as a whole. (This page's own medication used to
   be a fourth, unlinked card, which left one card alone on a second row.) */
.compare-grid .feature-card h3 a {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.16;
}
.compare-grid .feature-card {
  position: relative;
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms ease, border-color 220ms ease;
}
.compare-grid .feature-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
}
.compare-grid .feature-card h3 a:focus-visible {
  outline: none;
}
.compare-grid .feature-card h3 a:focus-visible::after {
  outline: 2px solid var(--nao-navy);
  outline-offset: 4px;
}
.compare-grid .feature-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(55, 143, 18, 0.45);
  box-shadow: 0 18px 36px rgba(14, 34, 61, 0.12);
}
@media (hover: hover) {
  .compare-grid .feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(55, 143, 18, 0.45);
    box-shadow: 0 18px 36px rgba(14, 34, 61, 0.12);
  }
}
@media screen and (max-width: 767px) {
  .compare-grid .feature-card h3 a {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .compare-grid .feature-card {
    transition: none;
  }
  .compare-grid .feature-card:hover,
  .compare-grid .feature-card:focus-within {
    transform: none;
  }
}

/* Three comparison cards: stay three across down to 992px, then stack, so the
   two-column tablet layout never leaves one card alone on a row. */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .compare-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
}

/* Safety list: .branded-list had no rule, so it rendered at the browser's 14px default
   with plain bullets. Give it the page's body text role and brand bullets. */
.branded-list {
  display: grid;
  gap: 14px;
  max-width: 1040px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.branded-list li {
  position: relative;
  padding-left: 28px;
  color: var(--nao-text);
  font-family: "TodaySansNow Pro", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
}
.branded-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nao-green);
}
.soft-panel .section-title.is-left {
  margin-bottom: 24px;
}
@media screen and (max-width: 767px) {
  .branded-list li {
    font-size: 16px;
  }
}

/* Button row after the FAQ: centred, spaced like the hero pair, and kept inside the page gutters.
   Some pages use the same class for a bar that sticks to the bottom of a phone screen and is
   hidden on larger screens; those carry .sud-sticky-cta--bar and keep their own rules. */
.sud-sticky-cta:not(.sud-sticky-cta--bar) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
  padding: 0 85px;
}
@media screen and (max-width: 1200px) {
  .sud-sticky-cta:not(.sud-sticky-cta--bar) {
    padding: 0 32px;
  }
}

/* FAQ: a centred reading-width column instead of rows running the full page width. */
#faq .nao-accordion,
.section-shell > .nao-accordion {
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* Button labels stay on one line (the 16ch cap broke "Book Brixadi evaluation" in two).
   On very narrow phones the label may wrap again rather than overflow. */
.btn-label {
  max-width: none;
  white-space: nowrap;
}
@media screen and (max-width: 400px) {
  .btn-label {
    white-space: normal;
  }
}

/* Clinic cards: four across on wide screens, an incomplete last row is centred,
   every card in a row is the same height with its links on one baseline, and the
   card sentence uses a readable size (it had no rule and fell back to 14px). */
.recovery-location-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.recovery-location-card {
  display: flex;
  flex: 0 1 calc((100% - 48px) / 3 - 0.5px);
  flex-direction: column;
}
.recovery-location-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.recovery-location-copy > p:not(.region-label):not(.recovery-location-address) {
  margin: 0;
  color: var(--nao-text);
  font-family: "TodaySansNow Pro", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
}
.recovery-location-copy .location-card-actions {
  margin-top: auto;
  padding-top: 16px;
}
@media screen and (min-width: 1500px) {
  .recovery-location-card {
    flex-basis: calc((100% - 72px) / 4 - 0.5px);
  }
}
@media screen and (max-width: 1200px) {
  .recovery-location-card {
    flex-basis: calc((100% - 24px) / 2 - 0.5px);
  }
}
@media screen and (max-width: 767px) {
  .recovery-location-card {
    flex-basis: 100%;
  }
}

/* A grid of exactly four or eight cards never leaves an incomplete row: four across
   when there is room, two across otherwise. (Three columns gave 3 + 1 and 3 + 3 + 2.) */
@media screen and (min-width: 1201px) {
  .feature-grid:has(> :last-child:nth-child(4)),
  .feature-grid:has(> :last-child:nth-child(8)),
  .info-grid:has(> :last-child:nth-child(4)),
  .info-grid:has(> :last-child:nth-child(8)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (min-width: 1400px) {
  .feature-grid:has(> :last-child:nth-child(4)),
  .feature-grid:has(> :last-child:nth-child(8)),
  .info-grid:has(> :last-child:nth-child(4)),
  .info-grid:has(> :last-child:nth-child(8)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Full-screen hero: on wide screens the text column was capped at 760px while the photos
   stayed 380px wide at the far right, leaving an empty band of about 600px between them.
   From 1500px the two columns share the width and the text blocks may run wider. */
@media screen and (min-width: 1500px) {
  .nao-banner-section {
    grid-template-columns: minmax(0, 1.55fr) minmax(380px, 1fr);
    column-gap: 48px;
  }
}

/* Hero text blocks fill their column at every width. The summary box and the fact cards were
   capped at 760px (920px from 1500px) and the subheading at 920px, so on any screen where the
   text column is wider than the cap an empty band opened between the text and the photos.
   The type sizes for wide screens follow in the next block. */
.nao-banner-section .nao-banner-copy [class$="-hero-summary"],
.nao-banner-section .nao-banner-copy .banner-badges,
.nao-banner-section .nao-banner-copy > h2 {
  max-width: none;
}
/* Hero typography grows with the screen from 1500px. From that width the photo column grows
   with the window; when the text stayed one size it wrapped into fewer lines as the window
   widened, so the text column ended well above the photos and the bottom left of the hero was
   empty (about 230px at 1850px wide, 350px at 2175px). Every size below is its 1500px value
   times (0.25 + 0.75 x window / 1500), capped near 2560px, so the text keeps the same line
   breaks and the two columns stay in step. Sizes at 1500px: H1 72, subheading 22, summary
   lead 18, supporting text 15, button 17, fact title 18, fact text 16, note 18 and 17. */
@media screen and (min-width: 1500px) {
  .nao-banner-section h1 { font-size: min(calc(18px + 3.6vw), 112px); margin-bottom: min(calc(4.5px + 0.9vw), 28px); }
  .nao-banner-section .nao-banner-copy > h2 { font-size: min(calc(5.5px + 1.1vw), 34px); margin-bottom: min(calc(7px + 1.4vw), 44px); }
  .nao-banner-section .nao-banner-copy [class$="-hero-summary"] { margin-bottom: min(calc(7px + 1.4vw), 44px); padding: min(calc(4.5px + 0.9vw), 28px) min(calc(5px + 1vw), 31px); }
  .nao-banner-section .nao-banner-copy [class$="-hero-summary"] > p { font-size: min(calc(4.5px + 0.9vw), 28px); }
  .nao-banner-section .nao-banner-copy [class$="-hero-summary__facts"] { margin-top: min(calc(3.5px + 0.7vw), 22px); padding-top: min(calc(3.5px + 0.7vw), 22px); }
  .nao-banner-section .nao-banner-copy [class$="-hero-summary__facts"] p { font-size: min(calc(3.75px + 0.75vw), 23px); }
  .nao-banner-section .banner-actions { margin-bottom: min(calc(6.5px + 1.3vw), 40px); }
  .nao-banner-section .banner-actions .book-apt-btn,
  .nao-banner-section .banner-actions .book-tele-visit-btn {
    min-height: min(calc(16px + 3.2vw), 92px);
    padding: 12px min(calc(4px + 0.8vw), 25px) 12px min(calc(5.5px + 1.1vw), 34px);
    font-size: min(calc(4.25px + 0.85vw), 24px);
  }
  .nao-banner-section .banner-actions .btn-label { font-size: inherit; }
  .nao-banner-section .banner-badge { padding: min(calc(4.5px + 0.9vw), 28px); }
  .nao-banner-section .banner-badge h3 { margin-bottom: min(calc(2px + 0.4vw), 12px); font-size: min(calc(4.5px + 0.9vw), 28px); }
  .nao-banner-section .banner-badge p { font-size: min(calc(4px + 0.8vw), 25px); }
  .nao-banner-section .nao-hero-note { padding: min(calc(5.5px + 1.1vw), 34px); }
  .nao-banner-section .nao-hero-note strong { font-size: min(calc(4.5px + 0.9vw), 28px); }
  .nao-banner-section .nao-hero-note span { font-size: min(calc(4.25px + 0.85vw), 26px); }
}
/* Pages differ in how much hero text they have. Where the text is still shorter than the
   photos it sits level with their middle, so what space remains is shared above and below
   instead of all collecting at the bottom. Where the text is longer nothing changes. */
@media screen and (min-width: 1201px) {
  .nao-banner-section .nao-banner-copy { align-self: center; }
}

/* No word left alone on a last line. Headings and short intros balance their lines
   ("Vivitrol treatment in NYC / and Long Island", not "... and Long / Island"); body
   sentences avoid a one-word last line. (The hero subheading was tried with the body
   setting; it still left one or two words on the last line, so it balances too.) Browsers without text-wrap ignore this. */
.nao-banner-section h1,
.nao-banner-section h2,
.section-title,
.section-intro,
.section-shell h3,
.banner-badge h3,
.nao-hero-note strong,
.how-to-visit-section h2,
.nao-reviews h2,
.clinician-feedback-section h2,
.clinician-feedback-card h3,
.recovery-location-copy h3,
.nao-accordion summary > span:first-child {
  text-wrap: balance;
}
.nao-banner-copy p,
.banner-badge p,
.nao-hero-note span,
.info-card p,
.feature-card p,
.soft-panel p,
.branded-list li,
.how-to-visit-section p,
.nao-review-content,
.clinician-feedback-section p,
.nao-accordion__answer p,
.recovery-location-copy p,
.nao-information-disclaimer p {
  text-wrap: pretty;
}

/* Text panels: paragraphs keep a readable line length instead of running the full
   width of the panel on wide screens. */
.soft-panel > p,
.soft-panel > ul {
  max-width: 1040px;
}

/* Full screen: the support sections and the health notice were capped at about 1180px
   and centred, so on wide screens they sat well inside every other section. From 1500px
   they use the same side gutters as the rest of the page. */
@media screen and (min-width: 1500px) {
  main .clinician-feedback-section,
  main .nao-information-disclaimer {
    max-width: none;
    margin-right: 85px;
    margin-left: 85px;
  }
  main .clinician-feedback-section {
    padding-right: 0;
    padding-left: 0;
  }
  main .clinician-feedback-note > p,
  main .nao-information-disclaimer p {
    max-width: 1040px;
  }
}

/* Change 32. TodaySansNow draws "No." as the numero sign ("Nº") through a built-in ligature,
   so an answer that begins "No. Please call first" read "Nº Please call first". Switching the
   common ligatures off restores the words as written; nothing else on the page changes shape. */
html { font-variant-ligatures: no-common-ligatures; }

/* Change 41. The footer's four social links did not fit a 320px screen on the pages that load only this
   stylesheet (Brixadi, Sublocade, Vivitrol): they wrap, as they already do on every other page. */
.footer .footer-nav .list { flex-wrap: wrap; row-gap: 12px; }