/* Nao service / care-detail pages: the refinement pass approved on Brixadi, Sublocade and
   Vivitrol, in a shared form. Those three pages carry the same rules in an inline block
   (<style id="brixadi-approved-refinement-20261007"> and so on) with page-named classes;
   this file uses neutral class names so any page of the family can use it.
   Load it after nao-care-detail.css. Markup is added by
   "Nao Medical Website/scripts/apply-service-page-pass.py"; see CARE-DETAIL-CHANGES.md. */

/* Hero and "how to visit" buttons: the arrow is a plain glyph, not a round badge. */
.how-to-visit-section > .book-apt-btn {
  display: inline-flex; width: auto; min-width: 0; min-height: 0; gap: 8px;
  padding: 0 0 3px; border: 0; border-bottom: 2px solid currentColor;
  border-radius: 0; background: transparent; box-shadow: none; color: var(--nao-navy);
  font-size: 17px; line-height: 1.35;
}

.how-to-visit-section > .book-apt-btn .btn-label { max-width: none; }
.how-to-visit-section > .book-apt-btn .btn-arrow,
.nao-banner-section .book-apt-btn .btn-arrow,
.nao-banner-section .book-tele-visit-btn .btn-arrow.secondary {
  width: auto; height: auto; flex: 0 0 auto; border-radius: 0; background: transparent;
  color: currentColor; font-size: 22px; line-height: 1;
}
@media (hover: hover) {
  .how-to-visit-section > .book-apt-btn:hover,
  .how-to-visit-section > .book-apt-btn:focus-visible { transform: none; box-shadow: none; background: transparent; color: #287f12; }
  .how-to-visit-section > .book-apt-btn:hover .btn-arrow,
  .nao-banner-section .book-apt-btn:hover .btn-arrow,
  .nao-banner-section .book-tele-visit-btn:hover .btn-arrow.secondary { transform: translateX(3px); background: transparent; color: currentColor; }
}

/* Hero summary box: the hero paragraphs, which had no rule of their own and fell back to 14px. */
.nao-banner-media, .nao-hero-note { align-self: start; }
.nao-banner-copy .nao-hero-summary {
  max-width: 760px; margin: 0 0 28px; padding: 18px 20px;
  border: 1px solid rgba(30, 53, 101, .12); border-radius: 14px;
  background: #f7fbf9; color: var(--nao-text);
}
.nao-hero-summary p { margin: 0; font-family: "TodaySansNow Pro", Arial, sans-serif; }
.nao-hero-summary > p { color: #1e3565; font-size: 16px; font-weight: 500; line-height: 1.55; }
.nao-hero-summary__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(30, 53, 101, .12); }
.nao-hero-summary__facts p { font-size: 14px; line-height: 1.5; }
.nao-hero-summary__facts p + p { padding-left: 20px; border-left: 1px solid rgba(30, 53, 101, .12); }
/* One supporting paragraph: it uses the full width instead of half the box. */
.nao-hero-summary__facts p:only-child { grid-column: 1 / -1; }

/* Support sections ("Focused care or a more supported outpatient program" and others). */
.clinician-feedback-section { margin-top: 80px; }
.clinician-feedback-section > .clinician-feedback-intro { max-width: 910px; }
.clinician-feedback-card { display: flex; flex-direction: column; gap: 13px; padding: 24px; border-radius: 16px; }
.clinician-feedback-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #edf7f0; color: #287f12; }
.clinician-feedback-card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.clinician-feedback-card h3 { margin: 0 0 8px; }
.clinician-feedback-note { margin-top: 18px; padding: 18px 20px; border: 1px solid #dde4e7; border-left: 1px solid #dde4e7; border-radius: 12px; background: #f7f8f8; }

/* Health information notice. */
.nao-information-disclaimer { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; max-width: 1116px; margin: 36px auto 40px; padding: 22px 24px; border: 1px solid #d8dfe3; border-radius: 14px; background: #f1f3f4; color: #52606d; }
.nao-information-disclaimer__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: #dde3e6; color: #3f5260; }
.nao-information-disclaimer__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.nao-information-disclaimer__content { min-width: 0; }
.nao-information-disclaimer h2 { color: #32485a; }
.nao-information-disclaimer a { color: #345d66; }

/* Card grids in which every card is one link: the whole card is the click target. */
.feature-grid--linked .feature-card { position: relative; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.feature-grid--linked .feature-card h3 a::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
.feature-grid--linked .feature-card h3 a:focus-visible { outline: none; }
.feature-grid--linked .feature-card h3 a:focus-visible::after { outline: 3px solid #1e3565; outline-offset: 3px; }
.feature-grid--linked .feature-card:hover, .feature-grid--linked .feature-card:focus-within { transform: translateY(-3px); border-color: rgba(40,127,18,.42); box-shadow: 0 16px 28px rgba(14,34,61,.10); }

/* Clinic finder: search box, scrolling list of compact clinic cards, map with a pin per clinic. */
.nao-location-finder-toolbar { display: grid; grid-template-columns: minmax(0,392px) minmax(0,1fr); align-items: center; gap: 22px; margin: 28px 0 20px; }
.nao-location-search { display: flex; min-width: 0; gap: 10px; }
.nao-location-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nao-location-search input { min-width: 0; flex: 1; min-height: 46px; padding: 10px 14px; border: 1px solid #d7dfe7; border-radius: 7px; background: #f7f9fb; color: var(--nao-navy); font: inherit; }
.nao-location-search input:focus-visible { outline: 3px solid rgba(110,187,145,.56); outline-offset: 2px; }
.nao-location-search button { min-height: 46px; padding: 10px 17px; border: 0; border-radius: 6px; background: #9ccc89; color: var(--nao-navy); font: inherit; font-weight: 700; cursor: pointer; }
.nao-location-finder-toolbar__title { margin: 0; color: var(--nao-navy); font-family: "Tiempos Fine",Georgia,serif; font-size: clamp(25px,2.1vw,34px); font-weight: 400; line-height: 1.1; }
.nao-location-finder-toolbar__title span { color: #6ebb91; }
.nao-location-finder__body { display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); column-gap: 28px; }
.nao-location-finder__body > .recovery-location-grid { display: flex; height: auto; max-height: 540px; margin: 0; flex-wrap: nowrap; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; overflow-y: auto; padding: 2px 10px 2px 2px; scrollbar-color: #b7c1d2 transparent; scrollbar-width: thin; }
.nao-location-finder__body > .recovery-location-grid .recovery-location-card { display: grid; width: 100%; min-height: 166px; flex: 0 0 auto; grid-template-columns: 116px minmax(0,1fr); border: 1px solid transparent; border-radius: 14px; transition: border-color 160ms ease, box-shadow 160ms ease; }
.nao-location-finder__body > .recovery-location-grid .recovery-location-card[hidden] { display: none; }
.nao-location-finder__body > .recovery-location-grid .recovery-location-card.is-map-active, .nao-location-finder__body > .recovery-location-grid .recovery-location-card:hover, .nao-location-finder__body > .recovery-location-grid .recovery-location-card:focus-within { border-color: rgba(30,53,101,.42); box-shadow: 0 10px 22px rgba(14,34,61,.10); }
.nao-location-finder__body > .recovery-location-grid .recovery-location-image { height: auto; min-height: 166px; }
.nao-location-finder__body > .recovery-location-grid .recovery-location-copy { display: flex; flex-direction: column; min-width: 0; padding: 15px 16px; }
.nao-location-finder__body > .recovery-location-grid .region-label { margin-bottom: 4px; font-size: 13px; }   /* was 11px: nothing on a page is under 13px */
.nao-location-finder__body > .recovery-location-grid .recovery-location-copy h3 { margin-bottom: 5px; font-size: 23px; }
.nao-location-finder__body > .recovery-location-grid .recovery-location-address { margin-bottom: 6px; font-size: 13px; line-height: 1.35; }
.nao-location-finder__body > .recovery-location-grid .recovery-location-copy > p:not(.region-label):not(.recovery-location-address) { font-size: 13px; line-height: 1.38; }
.nao-location-finder__body > .recovery-location-grid .location-card-actions { display: flex; flex-wrap: wrap; gap: 0 7px; margin-top: auto; padding-top: 8px; }
.nao-location-finder__body > .recovery-location-grid .location-card-actions > .location-link { align-self: flex-start; display: inline-flex; width: auto; min-height: 34px; margin: 0; padding: 7px 10px; font-size: 13px; }
.nao-location-finder__body > .recovery-location-grid .location-card-actions > .location-link.secondary { border-color: transparent; background: transparent; color: #1e3565; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nao-location-finder__body > .recovery-location-grid .location-card-actions > .location-link.secondary:hover { border-color: transparent; background: transparent; color: #172b54; }
.nao-location-finder__body > .recovery-location-grid .location-card-actions > .location-link::after { font-size: 16px; }
.nao-location-map { min-width: 0; height: auto; min-height: 360px; margin: 0; border: 1px solid rgba(30,53,101,.14); border-radius: 18px; overflow: hidden; box-shadow: 0 14px 30px rgba(14,34,61,.08); }
.nao-location-map .nao-clinic-map, .nao-location-map .nao-clinic-map__surface { position: relative; width: 100%; height: 100%; overflow: hidden; background: #e5e3df; }
.nao-location-map .nao-clinic-map__surface { position: absolute; inset: 0; }
.nao-location-map .nao-clinic-map__marker { position: absolute; z-index: 1; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: #213f7b; cursor: pointer; transform: translate(-50%,-100%); transition: color 160ms ease, transform 160ms ease; }
.nao-location-map .nao-clinic-map__marker[hidden] { display: none; }
.nao-location-map .nao-clinic-map__marker:hover, .nao-location-map .nao-clinic-map__marker:focus-visible, .nao-location-map .nao-clinic-map__marker.is-selected { color: #1e3565; transform: translate(-50%,-105%); }
.nao-location-map .nao-clinic-map__marker:focus-visible { outline: 3px solid rgba(33,63,123,.32); outline-offset: 3px; border-radius: 999px; }
.nao-location-map .nao-clinic-map__marker svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(23,53,99,.18)); }
.nao-location-map .nao-clinic-map__detail { position: absolute; z-index: 2; right: 18px; bottom: 18px; display: grid; max-width: min(290px,calc(100% - 36px)); gap: 3px; padding: 11px 13px; border: 1px solid rgba(23,53,99,.12); border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 8px 22px rgba(23,53,99,.13); color: var(--nao-navy); font-size: 13px; line-height: 1.35; }
.nao-location-map .nao-clinic-map__detail strong { font-size: 14px; }

@media (max-width: 767px) {
  .how-to-visit-section > .book-apt-btn { width: auto; }
  .clinician-feedback-section { margin-top: 56px; }
  .nao-banner-copy .nao-hero-summary { margin-bottom: 22px; padding: 16px; }
  .nao-hero-summary__facts { grid-template-columns: 1fr; gap: 12px; }
  .nao-hero-summary__facts p + p { padding: 12px 0 0; border-top: 1px solid rgba(30, 53, 101, .12); border-left: 0; }
  .nao-location-finder-toolbar { grid-template-columns: 1fr; gap: 14px; margin: 24px 0 18px; }
  .nao-location-finder__body { display: block; }
  .nao-location-finder__body > .recovery-location-grid { max-height: 480px; padding-right: 6px; }
  .nao-location-finder__body > .recovery-location-grid .recovery-location-card { grid-template-columns: 94px minmax(0,1fr); min-height: 156px; }
  .nao-location-finder__body > .recovery-location-grid .recovery-location-image { min-height: 156px; }
  .nao-location-finder__body > .recovery-location-grid .recovery-location-copy { padding: 13px; }
  .nao-location-map, .nao-location-map .nao-clinic-map { height: 330px; min-height: 0; }
  .nao-location-map { margin-top: 22px; border-radius: 14px; }
  .nao-information-disclaimer { grid-template-columns: 1fr; row-gap: 10px; margin: 28px 20px 32px; padding: 20px; }
}

/* ---- Found in the UI audit of the wider page family (CARE-DETAIL-CHANGES.md, changes 19-22) ---- */

/* Booking band with a pair of buttons. An older rule for a single button in this band
   (display: block, auto side margins, 18px regular text) reached the first button only, so
   the two sat apart and looked unrelated. Both now match the hero pair and sit centred. */
.how-to-visit-section .banner-actions { justify-content: center; margin: 26px 0 0; }
.how-to-visit-section .banner-actions .book-apt-btn,
.how-to-visit-section .banner-actions .book-tele-visit-btn {
  display: flex; margin: 0; padding: 12px 16px 12px 22px; border-radius: 999px;
  font-size: 17px; font-weight: 600; line-height: 1.15; text-align: left;
}
.how-to-visit-section .banner-actions .btn-label { display: block; font: inherit; }
.how-to-visit-section .banner-actions .btn-arrow,
.how-to-visit-section .banner-actions .btn-arrow.secondary {
  display: flex; width: auto; height: auto; flex: 0 0 auto; margin: 0; border-radius: 0; background: transparent;
  color: currentColor; font-size: 22px; line-height: 1;
}
@media (hover: hover) {
  .how-to-visit-section .banner-actions .book-apt-btn:hover .btn-arrow,
  .how-to-visit-section .banner-actions .book-tele-visit-btn:hover .btn-arrow { transform: translateX(3px); background: transparent; color: currentColor; }
}
.how-to-visit-section .banner-actions .book-apt-btn:focus-visible .btn-arrow,
.how-to-visit-section .banner-actions .book-tele-visit-btn:focus-visible .btn-arrow { background: transparent; color: currentColor; }
/* On phones the band gives its buttons the full width, so a label such as
   "Book drug court review" stays on one line at 390px. */
@media screen and (max-width: 480px) {
  .how-to-visit-section:has(> .banner-actions) { padding-right: 20px; padding-left: 20px; }
  .how-to-visit-section .banner-actions .book-apt-btn,
  .how-to-visit-section .banner-actions .book-tele-visit-btn { width: 100%; min-width: 0; padding-left: 20px; gap: 10px; }
}

/* Long lists of links: two or three columns on wider screens instead of one column with
   most of the panel empty. Reading order runs down each column. */
@media screen and (min-width: 768px) {
  .flat-link-list { display: block; max-width: none; columns: 2; column-gap: 40px; }
  .soft-panel > .flat-link-list { max-width: none; }
  .flat-link-list li { break-inside: avoid; margin-bottom: 14px; }
  .flat-link-list li:last-child { margin-bottom: 0; }
}
@media screen and (min-width: 1200px) {
  .flat-link-list { columns: 3; }
}

/* A grid that mixes linked and unlinked cards: every title is the same size. (Linked
   titles were 18px, unlinked ones 24px, side by side.) Links keep their colour and underline. */
.feature-grid--mixed .feature-card h3 a { font-size: inherit; font-weight: inherit; line-height: inherit; }

/* Three-across grids whose last row holds one card (7, 10, 13 cards): that card sits in the
   middle column instead of alone at the left. Grids of four are handled in nao-care-detail.css. */
@media screen and (min-width: 1201px) {
  .feature-grid > :last-child:nth-child(3n+1):not(:nth-child(4)):not(:first-child),
  .info-grid > :last-child:nth-child(3n+1):not(:nth-child(4)):not(:first-child) { grid-column: 2; }
}

/* Card types the page styles as boxes but gives no text rules, so their headings and
   sentences fell back to the browser's 14px near-black default (medication status cards,
   trust strip, eligibility checks, comparison and price cards). They take the same heading
   and sentence roles as the other cards on the page. */
.trust-pill h3, .med-row h3, .eligible-card h3, .compare-card h3, .price-card h3 {
  margin: 0 0 10px; color: var(--nao-navy); font-family: "TodaySansNow Pro", Arial, sans-serif;
  font-size: 24px; line-height: 1.16; font-weight: 600;
}
.trust-pill p, .med-row p, .eligible-card p, .compare-card p, .price-card p {
  margin: 0; color: var(--nao-text); font-family: "TodaySansNow Pro", Arial, sans-serif;
  font-size: 16px; line-height: 1.5; font-weight: 300;
}
.med-row h3 { margin-bottom: 0; }
/* Cards in a row are equal height; the spare height goes below the text, not into the
   label row (which made some labels taller and put the headings on different lines). */
.med-row { align-content: start; }
.med-row > .status-label, .eligible-card > .status-label { align-self: start; justify-self: start; }
@media screen and (max-width: 767px) {
  .trust-pill h3, .med-row h3, .eligible-card h3, .compare-card h3, .price-card h3 { font-size: 20px; }
}

/* Eligibility cards: a check icon in place of the word "Check" above each question
   (change 26). The tile matches the icons on the support cards. The word stays in the
   markup for screen readers. */
.status-label.status-label--icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 12px;
  background: #edf7f0; color: #287f12;
}
.status-label--icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.status-label__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.eligible-card:has(> .status-label--icon) h3 { margin-top: 14px; }

/* Status labels on medication cards ("Approved", "Caution", "Support", "Alternative"):
   an icon beside the word (change 27). The word stays because it tells the cards apart. */
.status-label.status-label--with-icon { align-items: center; gap: 6px; padding: 6px 12px 6px 9px; }
.status-label--with-icon svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

/* Clinic cards that stay as cards (one or two clinics, so no finder): the two links sit in
   one row with space between them. Without this they ran together as one line of text. */
.recovery-location-copy > .location-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.recovery-location-copy > .location-card-actions > .location-link { margin: 0; }

/* Phones: links that stand alone are tall enough to tap (they were 19-21px). */
@media (max-width: 767px) {
  .recovery-location-copy > .location-card-actions > .location-link,
  .soft-panel p > a[href^="tel:"],
  .location-fact a,
  .location-copy p > a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
  .ch-faq summary { display: flex; align-items: center; min-height: 44px; }
}

/* Location hero (change 30): service-in-a-place pages that open with a clinic photo
   (.location-page-shell). Same treatment as the approved hero: balanced headings, plain arrow
   glyphs, and the address with the paragraphs under the buttons in one summary box. The photo
   is as tall as the text beside it, so neither column leaves a gap. */
.nao-location-hero .location-copy h1,
.nao-location-hero .location-copy h2 { text-wrap: balance; }
.nao-location-hero .location-copy h2 { max-width: none; }
.nao-location-hero .book-apt-btn .btn-arrow,
.nao-location-hero .book-tele-visit-btn .btn-arrow.secondary {
  width: auto; height: auto; flex: 0 0 auto; border-radius: 0; background: transparent;
  color: currentColor; font-size: 22px; line-height: 1;
}
@media (hover: hover) {
  .nao-location-hero .book-apt-btn:hover .btn-arrow,
  .nao-location-hero .book-tele-visit-btn:hover .btn-arrow.secondary { transform: translateX(3px); background: transparent; color: currentColor; }
}
.nao-location-hero .book-apt-btn:focus-visible .btn-arrow,
.nao-location-hero .book-tele-visit-btn:focus-visible .btn-arrow.secondary { background: transparent; color: currentColor; }
/* The box sits after the buttons on some pages and before them on others. */
.nao-location-hero .location-copy .nao-location-summary {
  max-width: none; margin: 0 0 28px; padding: 20px 22px;
  border: 1px solid rgba(30, 53, 101, .12); border-radius: 14px; background: #f7fbf9;
}
.nao-location-hero .location-copy .action-row + .nao-location-summary { margin: 2px 0 0; }
.nao-location-hero .location-copy > .action-row:last-child { margin-bottom: 0; }
.nao-location-hero .nao-location-summary .address-line {
  display: flex; align-items: center; gap: 12px; margin: 0;
  color: #1e3565; font-family: "TodaySansNow Pro", Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.35;
}
.nao-location-hero .nao-location-summary .address-line > span:last-child { text-wrap: balance; }
/* the address is the first line of the box on most pages and the last on some */
.nao-location-hero .nao-location-summary .address-line:not(:last-child) { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(30, 53, 101, .12); }
.nao-location-hero .nao-location-summary .address-line:not(:first-child) { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(30, 53, 101, .12); }
.nao-location-summary__pin { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #edf7f0; color: #287f12; }
.nao-location-summary__pin svg { width: 20px; height: 20px; }
.nao-location-hero .nao-location-summary > p:not(.address-line) { margin: 0; color: #1e3565; font-size: 17px; font-weight: 400; line-height: 1.6; text-wrap: pretty; }
.nao-location-hero .nao-location-summary .nao-hero-summary__facts p { margin: 0; color: var(--nao-text); font-size: 15px; font-weight: 400; line-height: 1.55; text-wrap: pretty; }
/* Photo and text end on the same line. The photo may stand alone or sit in a panel; where the
   text is the shorter column it sits level with the middle of the photo side. */
.nao-location-hero > .location-image-box,
.nao-location-hero > .location-hero-panel { align-self: stretch; }
.nao-location-hero > .location-hero-panel { display: flex; flex-direction: column; }
.nao-location-hero > .location-hero-panel > .location-image-box { flex: 1 1 auto; }
.nao-location-hero > .location-copy { align-self: center; }
/* Four fact cards inside the text column: two by two instead of a tall stack of four. */
.nao-location-hero .location-copy .nao-location-summary + .location-facts { margin-top: 20px; }
@media screen and (min-width: 768px) {
  .nao-location-hero .location-copy .location-facts:has(> .info-card:last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 1500px) {
  .nao-location-hero .location-copy h1 { font-size: min(calc(18px + 3.6vw), 112px); margin-bottom: min(calc(4.5px + 0.9vw), 28px); }
  .nao-location-hero .location-copy h2 { font-size: min(calc(5.5px + 1.1vw), 34px); margin-bottom: min(calc(7px + 1.4vw), 44px); }
  .nao-location-hero .action-row .book-apt-btn,
  .nao-location-hero .action-row .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-location-hero .action-row .btn-label { font-size: inherit; }
  .nao-location-hero .location-copy .nao-location-summary { margin-top: min(calc(7px + 1.4vw), 44px); padding: min(calc(5px + 1vw), 31px) min(calc(5.5px + 1.1vw), 34px); }
  .nao-location-hero .nao-location-summary .address-line { font-size: min(calc(4.5px + 0.9vw), 28px); }
  .nao-location-hero .nao-location-summary > p:not(.address-line) { font-size: min(calc(4.25px + 0.85vw), 26px); }
  .nao-location-hero .nao-location-summary .nao-hero-summary__facts p { font-size: min(calc(3.75px + 0.75vw), 23px); }
}
@media (max-width: 767px) {
  .nao-location-hero .location-copy .nao-location-summary { margin-top: 22px; padding: 16px; }
  .nao-location-hero .nao-location-summary .address-line { font-size: 16px; }
  .nao-location-hero .nao-location-summary > p:not(.address-line) { font-size: 16px; }
  .nao-location-hero .nao-location-summary .nao-hero-summary__facts p { font-size: 14px; }
}

/* Source links list (the TB testing pages): the links had a colour and an underline but no
   size, so they fell back to 14px. Same size as the other link lists. */
.medical-source-list li, .medical-source-list a { font-family: "TodaySansNow Pro", Arial, sans-serif; font-size: 18px; line-height: 1.45; }
@media (max-width: 767px) { .medical-source-list li, .medical-source-list a { font-size: 16px; } }

/* Four fact cards in the hero: two rows of two instead of three and one. */
@media screen and (min-width: 768px) {
  .banner-badges:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Footer social links wrap on very narrow phones instead of pushing the page sideways. */
.footer .footer-nav .list { flex-wrap: wrap; row-gap: 12px; }

/* Full screen: the same alignment nao-care-detail.css gives pages that have a <main>
   element, for the pages of this family that are built without one. */
@media screen and (min-width: 1500px) {
  body .clinician-feedback-section,
  body .nao-information-disclaimer { max-width: none; margin-right: 85px; margin-left: 85px; }
  body .clinician-feedback-section { padding-right: 0; padding-left: 0; }
  body .clinician-feedback-note > p,
  body .nao-information-disclaimer p { max-width: 1040px; }
}

/* Change 31. Guidance blocks (first-visit, work-order and requirements panels, and their own
   question list): the live pages gave them a narrower column, square buttons and plain text
   links. They now use the page's section width, soft panel, pill buttons and accordion. */
.nao-guidance .soft-panel > * + * { margin-top: 16px; }
.nao-guidance .soft-panel > .section-title.is-left + * { margin-top: 0; }
.nao-guidance .action-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0; }
.nao-guidance .soft-panel > .action-row:last-child { margin-bottom: 0; }
.nao-guidance .soft-panel p a { color: #1e3565; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nao-guidance .soft-panel p a:hover, .nao-guidance .soft-panel p a:focus-visible { color: #287f12; }
.nao-guidance .nao-guidance-links { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.nao-guidance .nao-guidance-links__sep { color: rgba(30, 53, 101, .45); }
.nao-guidance .nao-guidance-links a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 767px) {
  .nao-guidance .action-row { flex-direction: column; margin: 20px 0; }
  /* a phone link that is part of a sentence stays in the sentence */
  .nao-guidance .soft-panel p > a[href^="tel:"] { display: inline; min-height: 0; }
  .nao-guidance .nao-guidance-links { flex-direction: column; align-items: flex-start; gap: 0; }
  .nao-guidance .nao-guidance-links__sep { display: none; }
  .nao-guidance .nao-guidance-links a { min-height: 44px; }
}

/* Change 33. The closing band's button is drawn as a text link. A page that writes it as a
   <button> and colours its label white for a solid pill ended up with white words on the pale
   band: the label takes the link's own colour here, whatever the element. */
.how-to-visit-section > .book-apt-btn .btn-label { color: inherit; }
.how-to-visit-section > button.book-apt-btn { font-family: "TodaySansNow Pro", Arial, sans-serif; cursor: pointer; }

/* Change 34. Long link lists: the first twelve links show, the rest open under "Show all N links". */
.nao-more-links { margin-top: 18px; }
.nao-more-links > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 20px; border: 1px solid rgba(30, 53, 101, .18); border-radius: 999px; background: #fff; color: #1e3565; font-family: "TodaySansNow Pro", Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; list-style: none; transition: border-color .15s, color .15s; }
.nao-more-links > summary::-webkit-details-marker { display: none; }
.nao-more-links > summary:hover, .nao-more-links > summary:focus-visible { border-color: #287f12; color: #287f12; }
.nao-more-links > summary:focus-visible { outline: 3px solid #8ac0a1; outline-offset: 3px; }
.nao-more-links > summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.nao-more-links[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.nao-more-links .nao-more-links__open, .nao-more-links[open] .nao-more-links__closed { display: none; }
.nao-more-links[open] .nao-more-links__open { display: inline; }
.nao-more-links > .flat-link-list { margin-top: 20px; }

/* Change 42. The vaccine pages' own question buttons were 24px tall on phones. */
@media (max-width: 767px) {
  .vax-accordion-header { min-height: 44px; }
}

/* Change 44. A very long word in the hero title ("Hypercholesterolemia", "Methamphetamine-use") made the hero
   wider than a phone screen, on the live pages too. The hero's columns may shrink and the title may break a word. */
@media (max-width: 767px) {
  .nao-banner-section > .nao-banner-copy, .nao-banner-section > .nao-banner-media { min-width: 0; }
  .nao-banner-section h1, .nao-banner-section h2 { overflow-wrap: break-word; hyphens: auto; }
}

/* Change 46. On the narrowest phones a long unbreakable word inside a section (a drug name, a web address)
   ran 8px past the screen. Text inside sections may break such a word. */
@media (max-width: 360px) {
  .section-shell h2, .section-shell h3, .section-shell h4, .section-shell p, .section-shell li, .section-shell a, .section-shell td, .section-shell th { overflow-wrap: break-word; }
}

/* Ari review: keep the original clinic-first composition and place the
   approved trust bar immediately after the essential clinic facts. */
.nao-location-hero {
  margin-top: 18px;
  padding-top: 0;
  padding-bottom: 14px;
}

.nao-location-hero .location-copy {
  row-gap: 14px;
}

.nao-location-hero .location-copy .nao-rebuilt-title {
  margin-bottom: 8px;
  font-size: clamp(34px, 3.5vw, 46px);
  line-height: 1.04;
}

.nao-location-hero .location-copy .nao-rebuilt-status {
  margin-bottom: 12px;
  font-size: 18px;
}

.nao-location-hero + .nao-rebuilt-stats {
  margin-top: 12px;
}

@media screen and (max-width: 767px) {
  .nao-location-hero {
    margin-top: 12px;
    padding-bottom: 8px;
  }

  .nao-location-hero .location-copy .nao-rebuilt-title {
    font-size: clamp(28px, 8vw, 36px);
  }

  .nao-location-hero .location-copy .nao-rebuilt-status {
    font-size: 16px;
  }
}

/* Keep the narrowest supported viewport inside the browser's usable width. */
@media screen and (max-width: 360px) {
  html, body { min-width: 0; max-width: 100%; overflow-x: clip; }
}