/*
  Pinnacle Audiology — sitewide readability hotfix
  Restores WCAG AA contrast without changing page structure or the warm palette.
  Loaded after all other shared visual layers.
*/
:root {
  --pa-readable-orange: #F08647;
  --pa-readable-orange-hover: #E9772E;
  --pa-readable-ink: #181511;
  --pa-readable-cream: #fffdf8;
  --pa-readable-muted-dark: #d8d0c4;
  --pa-readable-caption: #645c50;
}

/* Preserve the true Pinnacle orange on every shared action surface. Dark
   labels provide the necessary contrast without muddying the brand color. */
.btn.btn.accent,
.g-book.g-book,
.g-fbt.g-fbt,
.pin-btn.pin-btn,
.cta-actions .btn:not(.ghost),
.pcard-badge.pcard-badge,
.pcard-tag.pcard-tag.flag,
.step-n.step-n,
.badge.badge,
.scope-note .si.si,
.faq-item[open] summary .pm,
.tile-accent.tile-accent,
.btn-tile.btn-tile.tile-accent,
.pinn-dock .pd-btn.pd-orange {
  background: var(--pa-readable-orange) !important;
  border-color: var(--pa-readable-orange) !important;
  color: var(--pa-readable-ink) !important;
}

.btn.btn.accent :where(span, strong, svg),
.g-book.g-book :where(span, strong, svg),
.g-fbt.g-fbt :where(span, strong, svg),
.pin-btn.pin-btn :where(span, strong, svg),
.cta-actions .btn:not(.ghost) :where(span, strong, svg),
.pcard-badge.pcard-badge :where(span, strong, svg),
.pcard-tag.pcard-tag.flag :where(span, strong, svg),
.step-n.step-n :where(span, strong, svg),
.badge.badge :where(span, strong, svg),
.scope-note .si.si :where(span, strong, svg),
.faq-item[open] summary .pm :where(span, strong, svg),
.tile-accent.tile-accent :where(span, strong, svg),
.btn-tile.btn-tile.tile-accent :where(span, strong, svg),
.pinn-dock .pd-btn.pd-orange :where(span, strong, svg) {
  color: inherit !important;
  stroke: currentColor !important;
}

.btn.btn.accent:hover,
.btn.btn.accent:focus-visible,
.g-book.g-book:hover,
.g-book.g-book:focus-visible,
.g-fbt.g-fbt:hover,
.g-fbt.g-fbt:focus-visible,
.pin-btn.pin-btn:hover,
.pin-btn.pin-btn:focus-visible,
.cta-actions .btn:not(.ghost):hover,
.cta-actions .btn:not(.ghost):focus-visible,
.tile-accent.tile-accent:hover,
.tile-accent.tile-accent:focus-visible,
.btn-tile.btn-tile.tile-accent:hover,
.btn-tile.btn-tile.tile-accent:focus-visible,
.pinn-dock .pd-btn.pd-orange:hover,
.pinn-dock .pd-btn.pd-orange:focus-visible {
  background: var(--pa-readable-orange-hover) !important;
  border-color: var(--pa-readable-orange-hover) !important;
  color: var(--pa-readable-ink) !important;
}

/* Keep shared labels, arrows, and interactive accents on the same true
   Pinnacle orange across light and dark surfaces. */
.pa-pathways .pa-path-card:not(:hover) .pa-path-arrow,
.answer-card .ak,
.pa-pathways .pa-path-label {
  color: var(--pa-readable-orange) !important;
}

.pa-pathways .pa-path-card:hover .pa-path-arrow,
.pa-pathways .pa-path-card:focus-visible .pa-path-arrow {
  color: var(--pa-readable-orange) !important;
}

/* Restore readable secondary copy on the dark technology callout. */
body.flagship-hearing .midcta .mc-sub {
  color: var(--pa-readable-muted-dark) !important;
}

/* Small editorial labels were rendered in a pale taupe on cream. These
   repeated captions appear across nearly every template, so correct them at
   the shared layer instead of patching individual pages. */
body.pa-art main :where(.sec-cap, .rev-meta .when, .platform .pl, .contact-ledger .ck) {
  color: var(--pa-readable-caption) !important;
}

body.pa-art main .dark-band .sec-cap {
  color: var(--pa-readable-muted-dark) !important;
}

/* Preserve orange as the visual accent while making small linked text and
   rating details readable on white and cream surfaces. */
body.home-page main :where(.rev-card .stars, .rev-lux-num .stars2, .platform .ps),
body.flagship-hearing main .intro .link-arrow,
body.flagship-homecare main .cov .ck {
  color: var(--pa-readable-orange) !important;
}

body.pa-art main :where(.jrcard .jrk, .jrcard .arr, .pcard-ix, .pin-slot__tag, .pa-path-kicker, .ak),
body.pa-art main :where(.cov, .card, .panel, .article, .art-wrap) .ck {
  color: var(--pa-readable-orange) !important;
}

/* Pinnacle orange stays the accent, while prose links use high-contrast ink
   with an orange underline on white and cream surfaces. */
body.pa-art main :where(p, li) > a:not(.btn):not(.link-arrow),
body.flagship-homecare main :where(p, li) > a:not(.btn):not(.link-arrow) {
  color: var(--pa-readable-ink) !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--pa-readable-orange) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: .18em !important;
}

body.pa-art main .dark-band.dark-band :where(p, li) > a:not(.btn),
body.pa-art main .band.band :where(p, li) > a:not(.btn),
body.pa-art main .areas.areas :where(p, li) > a:not(.btn),
body.pa-art main .midcta.midcta :where(p, li) > a:not(.btn),
body.pa-art main .pin-band.dark.dark :where(p, li) > a:not(.btn),
body.flagship-homecare main .dark-band :where(p, li) > a:not(.btn),
body.pa-art main .dark-band.dark-band .ck,
body.pa-art main .band.band .ck,
body.pa-art main .areas.areas .ck,
body.pa-art main .midcta.midcta .ck,
body.pa-art main .pin-band.dark.dark .ck {
  color: var(--pa-readable-orange) !important;
}

body.flagship-hearing main .band .intro .link-arrow {
  color: var(--pa-readable-orange) !important;
}

body.home-page .acc-item[open] .acc-q .ic {
  background: var(--pa-readable-orange) !important;
  border-color: var(--pa-readable-orange) !important;
  color: var(--pa-readable-ink) !important;
}

body.pa-art main :where(.apd-m-tag, .stars2, .afaq .ic) {
  color: var(--pa-readable-orange) !important;
}

/* Keep headline accent words on the true Pinnacle orange. */
body.pa-art.pa-art main .display.display em,
body.pa-art.pa-art main .h2.h2 em,
body.pa-art.pa-art main h1 em,
body.pa-art.pa-art main h2 em {
  color: var(--pa-readable-orange) !important;
}

body.pa-art.pa-art main :is(.dark-band, .band, .areas, .midcta, .pin-band.dark) :is(.display.display, .h2.h2, h1, h2) em,
body.pa-art.pa-art.pa-family-technology main > :is(.hero, .page-hero, .mfr-hero, .mfr-sec):first-child :is(.display.display, .h2.h2, h1, h2) em,
body.pa-art.pa-art.pa-family-protection main > :is(.hero, .page-hero, .pin-hero, .mfr-sec):first-child :is(.display.display, .h2.h2, h1, h2) em {
  color: var(--pa-readable-orange) !important;
}

body.pa-art main .apd-m-item strong {
  color: var(--pa-readable-orange) !important;
}

body.pa-art main .apd-m-foot strong {
  color: var(--pa-readable-orange) !important;
}

body.pa-art main .acc-item[open] .acc-q .ic {
  background: var(--pa-readable-orange) !important;
  border-color: var(--pa-readable-orange) !important;
  color: var(--pa-readable-ink) !important;
}

/* The photo caption used a translucent glass treatment whose contrast varied
   with the image underneath. An opaque warm-black plate makes it dependable. */
body.pa-art .hp-cap {
  background: var(--pa-readable-ink) !important;
}

body.pa-art .hp-cap :where(.hp-k, .hp-v) {
  color: var(--pa-readable-cream) !important;
}

body.pa-art .fact-card .fc-eyebrow {
  color: var(--pa-readable-orange) !important;
}

/* Route-aware art direction turns technology and protection heroes dark.
   Their older proof rows were still explicitly painted with light-page ink. */
body.pa-family-technology main > :where(.hero, .page-hero, .mfr-hero, .mfr-sec):first-child .hero-proof,
body.pa-family-technology main > :where(.hero, .page-hero, .mfr-hero, .mfr-sec):first-child .hero-proof .hp-score,
body.pa-family-protection main > :where(.hero, .page-hero, .pin-hero, .mfr-sec):first-child .hero-proof,
body.pa-family-protection main > :where(.hero, .page-hero, .pin-hero, .mfr-sec):first-child .hero-proof .hp-score {
  color: var(--pa-readable-cream) !important;
}

body.pa-family-technology main > :where(.hero, .page-hero, .mfr-hero, .mfr-sec):first-child .fact-card,
body.pa-family-protection main > :where(.hero, .page-hero, .pin-hero, .mfr-sec):first-child .fact-card {
  color: var(--pa-readable-ink) !important;
  background: var(--pa-readable-cream) !important;
}

body.pa-art.pa-family-technology main > :is(.hero, .page-hero, .mfr-hero, .mfr-sec):first-child .fact-card.fact-card :is(p, li, .fc-meta, .fc-note),
body.pa-art.pa-family-protection main > :is(.hero, .page-hero, .pin-hero, .mfr-sec):first-child .fact-card.fact-card :is(p, li, .fc-meta, .fc-note) {
  color: #5f594f !important;
}

body.pa-art.pa-family-technology main > :is(.hero, .page-hero, .mfr-hero, .mfr-sec):first-child .fact-card.fact-card .fc-eyebrow.fc-eyebrow,
body.pa-art.pa-family-protection main > :is(.hero, .page-hero, .pin-hero, .mfr-sec):first-child .fact-card.fact-card .fc-eyebrow.fc-eyebrow {
  color: var(--pa-readable-orange) !important;
}

body.pa-art.pa-family-technology main > :is(.hero, .page-hero, .mfr-hero, .mfr-sec):first-child .eyebrow,
body.pa-art.pa-family-protection main > :is(.hero, .page-hero, .pin-hero, .mfr-sec):first-child .eyebrow {
  color: var(--pa-readable-orange) !important;
}

/* Journal references are placed on a warm-black sources panel. Keep reviewer
   and medical-review text light instead of inheriting the light-page ink. */
body.pa-family-journal .editorial-section.is-sources :where(p, strong, em) {
  color: var(--pa-readable-muted-dark) !important;
}

body.pa-family-journal main .editorial-section.is-sources .art-refs a,
body.pa-family-journal main .editorial-section.is-sources a.art-ilink {
  color: var(--pa-readable-orange) !important;
}

body.pa-family-journal main .editorial-section.is-sources .art-rel-chip {
  color: var(--pa-readable-cream) !important;
  border-color: rgba(255, 253, 248, .28) !important;
  background: rgba(255, 253, 248, .08) !important;
}

body.pa-family-journal main .art-body.editorialized a.art-ilink,
body.pa-family-journal main .editorial-section.is-featured span[style*="color:var(--accent-deep)"],
body.pa-family-journal main .editorial-intro span[style*="color:var(--accent-deep)"] {
  color: var(--pa-readable-orange) !important;
}

/* The video library intentionally alternates light care guidance with dark
   video shelves. Its page-level background was being overwritten to white. */
body.pa-art main:has(.vid-hero) {
  background: var(--vbg, #141210) !important;
}

body.pa-art main:has(.vid-hero) :where(.help-strip, .basics) {
  color: var(--pa-readable-ink);
}

body.pa-art main:has(.vid-hero) :where(p, li) > a:not(.btn) {
  color: var(--pa-readable-orange) !important;
}

body.pa-art .mfr-page .info-cell p {
  color: #5f594f !important;
}

body.pa-art .rl-card.right .rl-tag {
  color: #9d2f2f !important;
}

body.pa-art .rl-card.left .rl-tag {
  color: #295d9f !important;
}

body.pa-art main .fsep {
  color: var(--pa-readable-caption) !important;
}

/* Decorative outline numbers also carry navigation meaning on these pages;
   give them a real foreground color instead of transparent text. */
body.pa-art main :where(.apd-m-num, .loc-no) {
  color: var(--pa-readable-orange) !important;
  -webkit-text-fill-color: var(--pa-readable-orange) !important;
}

body.pa-art .dd.do h3 .b {
  background: #267348 !important;
}

/* The shared footer had several 38–46% opacity labels below AA. */
.g-footer h5,
.g-footer .g-fadr,
.g-footer .g-fbot,
.g-footer .g-fleg a,
.g-footer .g-fsoc a,
.g-footer ul a,
.g-footer .g-fca > a:not(.g-fbt) {
  color: var(--pa-readable-muted-dark) !important;
}

.g-footer .g-fadr span {
  color: inherit !important;
  opacity: 1 !important;
}

.g-footer :where(a, button):focus-visible,
.pinn-dock .pd-btn:focus-visible,
.g-book:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}

@media (max-width: 760px) {
  .pinn-dock .pd-btn.pd-orange {
    color: var(--pa-readable-ink) !important;
  }
}

/* Homepage clinical team: keep the approved editorial card opaque and
   readable even when reveal, family, or preview layers are active. */
body.home-page .clinical-team-panel {
  background: linear-gradient(145deg, #1b1713 0%, #272019 100%) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: var(--pa-readable-cream) !important;
}

body.home-page .clinical-team-panel :is(.ctp-head strong, .ctp-copy strong) {
  color: var(--pa-readable-cream) !important;
}

body.home-page .clinical-team-panel .ctp-head p {
  color: rgba(255, 253, 248, .76) !important;
}

body.home-page .clinical-team-panel .ctp-copy small,
body.home-page .clinical-team-panel .ctp-foot span {
  color: rgba(255, 253, 248, .72) !important;
}

body.home-page .clinical-team-panel :is(.ctp-kicker, .ctp-copy > span, .ctp-arrow) {
  color: var(--pa-readable-orange) !important;
}

/* Nested manufacturer heroes now share the dark editorial treatment. Keep
   every supporting label and secondary action readable on that surface. */
body.pa-art:is(.pa-family-technology, .pa-family-protection) main > .mfr-page > .mfr-hero :is(.lede, .crumbs, .crumbs a) {
  color: rgba(255, 253, 248, .82) !important;
}

body.pa-art:is(.pa-family-technology, .pa-family-protection) main > .mfr-page > .mfr-hero :is(.mfr-kicker, h1 em, .display em) {
  color: var(--pa-readable-orange) !important;
}

body.pa-art:is(.pa-family-technology, .pa-family-protection) main > .mfr-page > .mfr-hero .btn.ghost {
  border-color: rgba(255, 253, 248, .48) !important;
  color: var(--pa-readable-cream) !important;
}

body.pa-art:is(.pa-family-technology, .pa-family-protection) main > .mfr-page > .mfr-hero .mfr-meta {
  border-color: rgba(255, 253, 248, .28) !important;
  color: rgba(255, 253, 248, .72) !important;
}

body.pa-art:is(.pa-family-technology, .pa-family-protection) main > .mfr-page > .mfr-hero .mfr-meta > div {
  border-color: rgba(255, 253, 248, .28) !important;
}

body.pa-art:is(.pa-family-technology, .pa-family-protection) main > .mfr-page > .mfr-hero .mfr-meta b {
  color: var(--pa-readable-cream) !important;
}