/* ==========================================================================
   Aegis Health — legibility layer
   Added 2026-09-10

   WHY THIS FILE EXISTS
   An accessibility pass found two problems that affect the people this site
   is actually for, namely adults over 60 and their children reading on a
   phone:

     1. Colour contrast. 143 elements failed the WCAG AA 4.5:1 threshold.
        Almost all of them came from three colour tokens used as body text:
        --charcoal-soft on cream (3.11:1), --horizon-deep on cream (3.58:1)
        and --parchment on the dark sections (3.57:1).

     2. Text size. Body and label text was rendering between 7px and 12px in
        several hundred places. Contrast sensitivity and near vision both
        drop with age, so small low contrast type is the one combination to
        avoid for this audience.

   HOW IT WORKS
   This file loads after each page's own <style> block and after
   responsive.css, so plain class selectors here win on the cascade without
   needing !important. Nothing in the page markup had to change.

   The colour fixes are made at the token level, so they apply everywhere the
   token is used. The one complication is that --charcoal-soft was used for
   muted text on BOTH the cream and the dark charcoal grounds, and no single
   grey passes on both. It is now the light ground value, and the handful of
   dark ground elements are switched to --muted-on-dark below.

   TO REVERT
   Delete this file and the <link> to it in the 17 pages. Nothing else
   depends on it.
   ========================================================================== */

/* ---- 1. Contrast ---------------------------------------------------- */

:root {
  --charcoal-soft: #6E675D;   /* was #8E8980 — 3.11:1 → 5.1:1 on cream      */
  --horizon-deep:  #8A6329;   /* was #A07840 — 3.58:1 → 4.8:1 on cream      */
  --parchment:     #DCD3C3;   /* was #C8BAA2 — 3.57:1 → 6.4:1 on charcoal   */
  --muted-on-dark: #C6BEB2;   /* new: muted text sitting on a dark ground   */
}

/* Muted text on the dark footer and dark CTA bands. The token above is now
   tuned for cream, so these need the light counterpart instead. */
footer .footer-copy,
footer .footer-links a,
footer .footer-illus,
.cta .cta-sub,
.cta-inner .cta-sub {
  color: var(--muted-on-dark);
}

/* The illustrative-photography line was additionally dimmed to 75%, which
   took it under 2.2:1. */
footer .footer-illus {
  color: var(--muted-on-dark) !important;
  opacity: 1 !important;
}

/* Brand wordmark in the footer: the mid gold reads 2.6:1 on the dark ground,
   under the 3:1 needed even at display size. */
.footer-brand,
.footer-brand-name {
  color: var(--horizon-warm);
}

/* ---- 2. Text size --------------------------------------------------- */

/* Reading copy: full sentences a visitor has to get through. 16px. */
.team-bio,
.value-card p,
.pillar-card p,
.step p,
.about-feature p,
.about-feature h4,
.service-content p,
.ideal-card p,
.screener-card p,
.pkg-features li,
.care-card-features li,
.survey-note,
.book-fallback,
.enq-field label {
  font-size: 1rem;
}

/* Secondary text: captions, notes, prices, navigation, footer. 14px. */
.nav-link,
.nav-home,
.dropdown-menu a,
.footer-links a,
.footer-copy,
.footer-illus,
.footer-desc,
.pkg-sub,
.pkg-price-note,
.pkg-price-unit,
.pkg-cadence,
.pkg-addon-row,
.pkg-addon-label,
.team-credentials,
.team-quals,
.team-title,
.team-role,
.testimonial-attr,
.testimonial-source,
.testimonial-role,
.clinic-card-features,
.activity-photo-desc,
.activity-icon-card .activity-photo-desc,
.respite-use,
.sq-ctx,
.enq-privacy,
.updated,
.feature-proof,
.launch-text,
.book-or,
.respite-cta .rc-note {
  font-size: 0.875rem;
}

/* Buttons. Uppercase and letter-spaced, so they read smaller than they
   measure. 12.8px is the floor. */
.btn-primary,
.btn-outline,
.btn-outline-light,
.btn-gold,
.nav-cta,
.enq-submit,
.enq-wa,
.pkg-cta,
.pkg-cta-gold,
.pkg-cta-outline,
.care-card-link,
.launch-cta {
  font-size: 0.8rem;
}

/* Micro labels: eyebrows, badges, stat captions. These are structural rather
   than reading text, so they stay small, but nothing goes below 11.5px.
   Several of these were rendering at 7.4px to 10px. */
.countdown-label,
.nav-brand-tagline,
.header-badge,
.launch-badge,
.team-role-badge,
.pkg-tier-badge,
.pkg-section-label,
.pkg-addons-title,
.screener-tag,
.credential,
.page-label,
.respite-room-badge,
.room-count,
.section-label,
.our-story-label,
.hero-badge span,
.hero-stat-card .stat-label,
.stat-label,
.respite-stat .rs-lbl,
.room-stat .rs-lbl,
.room-best span,
.sq-attr,
.survey-stat span,
.pillar span,
.ribbon-text,
.footer-col h4,
.clinics-phone-text span,
.intro-img-box span,
.condition-tag span,
.mid-img span,
.img-placeholder span,
.image-placeholder span,
.image-placeholder .img-note,
.dr-portrait-sig,
.hero-card-title {
  font-size: 0.72rem;
}

/* ---- 3. Inline font sizes ------------------------------------------- */

/* Around 150 declarations set type in a style attribute, and an inline
   declaration outranks any stylesheet, so those need the same attribute
   selector treatment responsive.css already uses for inline layouts. The
   bands below lift each size to the nearest floor rather than flattening
   everything to one value, so the existing hierarchy survives. */

[style*="font-size:0.46rem"],
[style*="font-size:0.5rem"],
[style*="font-size:0.52rem"],
[style*="font-size:0.55rem"],
[style*="font-size:0.58rem"],
[style*="font-size:0.6rem"],
[style*="font-size:0.62rem"],
[style*="font-size:0.64rem"],
[style*="font-size:0.65rem"],
[style*="font-size:0.66rem"],
[style*="font-size:0.68rem"],
[style*="font-size:0.7rem"] {
  font-size: 0.72rem !important;
}

[style*="font-size:0.72rem"],
[style*="font-size:0.74rem"],
[style*="font-size:0.75rem"],
[style*="font-size:0.78rem"] {
  font-size: 0.8rem !important;
}

[style*="font-size:0.8rem"],
[style*="font-size:0.82rem"],
[style*="font-size:0.83rem"],
[style*="font-size:0.85rem"],
[style*="font-size:0.87rem"] {
  font-size: 0.9rem !important;
}