/*
  MYCare — UI polish layer (2026).
  Findings from a page-by-page audit: contrast, tap targets, measure, focus, CLS.
  Loaded last, so it corrects the base sheet without editing it. Contains no copy.
  Remove the <link> to revert every fix below.
*/

/* ---------------------------------------------------------------
   1. CONTRAST — the subtle ink token failed WCAG AA on white
      #8c949c on #fff = 3.07:1 (needs 4.5:1 for text under 24px).
      Used by accreditation labels, contact labels, footer meta,
      captions and the copyright line on every page.
   --------------------------------------------------------------- */
:root {
  --color-ink-subtle: #6b737c; /* 5.15:1 on #fff, 4.9:1 on #fcfbfa */
}

/* the inline "MY/Care" mark turned mid-grey on navy sections (2.58:1) */
.hero .logo-care-paragraf,
.ppm-teaser .logo-care-paragraf,
.cta-band .logo-care-paragraf,
.bg-navy .logo-care-paragraf,
.media-band .logo-care-paragraf,
.page-hero .logo-care-paragraf,
.ppm-hero-stat .logo-care-paragraf {
  color: #b9cfe4; /* 8.4:1 on --color-navy */
}

.hero .logo-metalyapi-paragraf,
.ppm-teaser .logo-metalyapi-paragraf,
.cta-band .logo-metalyapi-paragraf,
.bg-navy .logo-metalyapi-paragraf,
.media-band .logo-metalyapi-paragraf,
.page-hero .logo-metalyapi-paragraf,
.ppm-hero-stat .logo-metalyapi-paragraf {
  color: var(--color-brand-soft);
}

/* ---------------------------------------------------------------
   2. TAP TARGETS — 44px minimum (Apple HIG) / 48dp (Material).
      Header phone link, footer link lists and the terms contents
      list all sat between 20px and 30px tall.
   --------------------------------------------------------------- */
.nav-phone,
.footer-group-link,
.footer-contact-list a,
.footer-list a,
.footer-legal-list a,
.terms-toc a,
.link-underline {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footer-list a,
.footer-legal-list a,
.terms-toc a {
  /* keep the visual rhythm: grow the hit area, not the gap */
  margin-block: -0.375rem;
  padding-block: 0.375rem;
}

.footer-list {
  gap: 0.25rem;
}

.footer-contact-list {
  gap: 0.5rem;
}

.logo {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* removes the 300ms tap delay on touch devices */
a,
button,
[role="tab"],
summary,
input[type="range"] {
  touch-action: manipulation;
}

/* ---------------------------------------------------------------
   3. FOCUS — the brand ring is invisible on navy surfaces.
   --------------------------------------------------------------- */
.hero :focus-visible,
.page-hero :focus-visible,
.ppm-teaser :focus-visible,
.cta-band :focus-visible,
.bg-navy :focus-visible,
.media-band :focus-visible,
.footer :focus-visible,
.navbar .nav-proposal-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* buttons clip their sheen with overflow:hidden — push the ring outside */
.btn:focus-visible,
.nav-proposal-btn:focus-visible,
.footer-cta:focus-visible {
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   4. MEASURE — body copy ran to 142 characters per line on wide
      screens (comfortable is 60–75).
   --------------------------------------------------------------- */
 
.timeline-item p,
.step-text,
.who-for p.lead,
.faq-answer-inner p,
.report-content-card p {
  max-width: 58ch;
}

/* .two-col-lead {
  max-width: 62rem;
} */

.terms-body p,
.terms-body li {
  max-width: 62ch;
}

/* ---------------------------------------------------------------
   5. ANCHORS — every in-page target clears the fixed header.
   --------------------------------------------------------------- */
:where([id]) {
  scroll-margin-top: 7rem;
}

/* ---------------------------------------------------------------
   6. STATE CLARITY — pressed feedback, not only hover (Material
      state layers; hover alone is unusable on touch).
   --------------------------------------------------------------- */
.btn:active,
.nav-proposal-btn:active,
.footer-cta:active,
.nav-drawer-cta:active {
  transform: translateY(1px) scale(0.99);
}

.advantage-card:active,
.accred-card:active,
.tier-card:active,
.scenario-card:active,
.included-card:active,
.specialist-card:active,
.global-region:active,
.contact-detail:active {
  transform: translateY(-1px);
}

@media (hover: none) {
  /* on touch devices, hover-only affordances never fire — keep the resting
     state legible instead of waiting for a hover that cannot happen */
  .media-zoom > img {
    transform: none;
  }
}

/* ---------------------------------------------------------------
   7. DISABLED / INTERACTIVE AFFORDANCE
   --------------------------------------------------------------- */
button,
[role="tab"],
.faq-question,
.nav-toggle {
  cursor: pointer;
}

/* ---------------------------------------------------------------
   8. TYPOGRAPHY RHYTHM — tabular figures wherever numbers are
      compared, so columns stop shifting between values.
   --------------------------------------------------------------- */
.stat-card .v,
.ppm-hero-stat .v,
.tier-time,
.timeline-num,
.step-num,
.num-big,
.accred-card .code,
.compare-row .v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------
   9. PRINT — terms and proposals get printed by facilities teams.
   --------------------------------------------------------------- */
@media print {
  .navbar,
  .nav-drawer,
  .anchor-nav,
  .scroll-progress,
  .media-band,
  .footer-cta,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .reveal,
  .m-stagger > *,
  .media-mask {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }
}

/* ---------------------------------------------------------------
   10. HEADING ORDER — index and contact jumped h1 -> h3, which
       breaks screen-reader outline navigation. The tags were
       promoted to h2; these rules keep them looking identical.
   --------------------------------------------------------------- */
.value-item h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.promises-panel h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   11. LATE FINDINGS — page-by-page sweep, second pass
   --------------------------------------------------------------- */

/* PPM comparison table header sits on navy: the inline mark was 2.58:1 */
.compare-head .logo-care-paragraf {
  color: #b9cfe4;
}

.compare-head .logo-metalyapi-paragraf {
  color: var(--color-brand-soft);
}

/* SERVICES: the pillar tagline ran the full 1136px column (~118 characters).
   A lead line reads best around 45-55 characters. */
.tagline {
  max-width: 34ch;
}

@media (max-width: 47.99rem) {
  .tagline {
    max-width: none;
  }
}
 
.warranty-note {
   width: 100%;
} 

/* measured with real glyph widths, not an em heuristic: these still ran
   82-135 characters on a 1440px screen */
/* .who-for .dot-list,
.who-for p.lead,
.service-section-head > .reveal > p:not(.tagline),
.body {
  max-width: 62ch;
} */

.dot-list li {
  max-width: 60ch;
}

/* centred intro copy under a section label (accreditations block ran 135
   characters wide); centred text needs a tighter measure than left-aligned */
.section-tight .reveal[style*="text-align:center"] p,
.section-tight .reveal[style*="text-align: center"] p {
  max-width: 56ch;
  margin-inline: auto;
}

/* left-aligned section intros */
/* .section > .reveal > p,
.container-x > .reveal > p {
  max-width: 62ch;
} */

/* CONTACT: the EMAIL / PHONE / WEB labels used --color-onnavy-subtle
   (#627485) on the navy card = 3.07:1 at 12px. Uppercase 12px text is the
   hardest thing on the page to read, so it needs the most contrast, not the least. */
.contact-detail .label {
  color: #a9bccd; /* 7.3:1 on the card */
}