/* =============================================================================
   RB-1028 fix 10 -- the 2026-10-21 style-compliance sweep, the rows needing no RB ruling, to WCAG
   2.1 AA (text 4.5:1; large text and non-text UI 3:1). Last stylesheet in every public bundle.
   Colours: each style's own token where one passes; otherwise a darker shade of the SAME hue,
   recorded here. Measured + pinned by platform/test_rb1028_style_sweep.py (rendered pages,
   Chromium + WebKit). Per-style header/button/newsletter rows live in that style's overrides.css;
   the .two-col stack (H5) is fixed in both copies of inner-pages.css.
   ============================================================================= */

/* ---- R1 (RB 2026-10-21): --accent-strong, one token per style = a darker shade of the SAME
   accent hue, used ONLY where var(--accent) fails as text (4.5:1) or under white text. Each style
   otherwise keeps its look. Computed (>= 5.0:1 on white, >= 4.5:1 on #f4f4f4):
     style1 #0099cc (3.27) -> #00779e (5.08)   style2 #c2e60c (1.44) -> #647706 (5.02)
     style3 #AAE2EC (1.42) -> #1e7888 (5.13)   style5 #00B7CD (2.43) -> #006d79 (6.06)
     style6 #88C3CB (1.96) -> #316a72 (6.11)
   style5/style6 are darker still because their forms-fill card is #e2e2e2 (4.68 / 4.75:1 there).
     style4 #176E94 (5.68) and style7 #4F6152 (6.64) pass: --accent-strong = --accent.
   Uses: the required "*" (H4), the "Purchase Membership" button (H3), the topbar band under its
   white text (M13). Hard-coded teal text gets a darker shade of ITS own hue: .pg-label #7ecfc0 ->
   #2d7a6c (5.11:1, M12), the active nav link #7EC8C8 -> #337878 (5.12:1, M14). */
body { --accent-strong: var(--accent); }
body.style-style1 { --accent-strong: #00779e; }
body.style-style2 { --accent-strong: #647706; }
body.style-style3 { --accent-strong: #1e7888; }
body.style-style5 { --accent-strong: #006d79; }
body.style-style6 { --accent-strong: #316a72; }
.cmh-required { color: var(--accent-strong); font-weight: 600; }           /* H4: the span only */
body .cmh-s0df27e { background: var(--accent-strong); }                         /* H3 */
body .topbar { background: var(--accent-strong); }                              /* M13 */
body .pg-label { color: #2d7a6c; }                                               /* M12 */
/* ...but on the DARK membership hero the light #7ecfc0 stays (6.26:1 there; R1 on dark = lighter
   shade). Review B, 526113e: the dark shade was 2.23:1 on that hero. */
body .cmh-s5f420c .pg-label { color: #7ecfc0; }
body.style-style7 .cmh-s5f420c .pg-label { color: #a3dfd4; }   /* style7's hero is lighter: 4.35 -> 5.1:1, same hue lighter */
body .nav__link--active { color: #337878 !important; }                           /* M14 (style.css:1602 is !important) */
/* style4's header is navy: there the light #7EC8C8 stays (7.05:1; #337878 was 2.63:1, review B). */
body.style-style4 .nav__link--active { color: #7EC8C8 !important; }
/* style6's header is #D0EBFF: #337878 is 4.45:1 there; the same hue one step darker, 4.57:1. */
body.style-style6 .nav__link--active { color: #2f7171 !important; }

/* ---- R2 (RB 2026-10-21, M3): every form-field border >= 3:1 against the field AND what is
   around it (WCAG 1.4.11). Same width and radius; each style's own hue, darker:
     neutral #e0e0e0 / style2 #ccc (1.32-1.61:1) -> #8a8a8a (3.45 on white, 3.14 on #f4f4f4)
     style5 #cdbcb7 -> #99776c (4.03 / 3.11 on its #e2e2e2 card)
     style6 plum at .30 -> plum at .68      style7 umber at .25 -> umber at .57
     newsletter #d1d9e0 -> #7890a4; style5 newsletter -> #91857f; style7 newsletter as its fields;
     style6's newsletter input has no border: the white pill on the plum band is the boundary (8.1:1).
   Focus rules (higher specificity) still change the colour on focus. */
body .contact-form__input, body .contact-form__textarea { border-color: #8a8a8a; }
body.style-style2 .contact-section .contact-form__input,
body.style-style2 .contact-section .contact-form__textarea { border-color: #8a8a8a !important; }
body.style-style5 .contact-form__input, body.style-style5 .contact-form__textarea { border-color: #99776c; }
body.style-style6 .contact-form__input, body.style-style6 .contact-form__textarea { border-color: rgba(91, 76, 82, .68); }
body.style-style7 .contact-form__input, body.style-style7 .contact-form__textarea { border-color: rgba(51, 48, 43, .57); }
body .newsletter__input { border-color: #7890a4; }
body.style-style5 .newsletter--style5 .newsletter__input { border-color: #91857f; }
body.style-style7 .newsletter__input { border-color: rgba(51, 48, 43, .57); }

/* ---- H7 / H8: a visible keyboard focus (>= 3:1) where there was none ----
   The ring is each style's --primary (3.0:1 or better on every background it sits on here;
   style6 plum on its #D0EBFF band = 6.5:1). :focus-visible, so a mouse click on the tabs draws none. */
.contact-form__input:focus-visible, .contact-form__textarea:focus-visible,
.newsletter__input:focus-visible, .dept-tab:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px;
}
/* style6's newsletter input sits 6px inside its white pill, so the plum ring above is drawn on the
   pill (white), not on the dark band. */

/* ---- L1: the 404/500 page states its code and message once. The banner carries them; the body
   copy remains only for style2, which hides every .page-banner (style2/overrides.css). ---- */
body:not(.style-style2) .cmh-err-body { display: none; }

/* ---- M1 / M2: placeholders at 4.5:1 ----
   M1 (/patient-form + appointment #a0aec0, 2.26:1) is resolved by R3: those fields now carry the
   contact-form look, whose placeholder already passes. M2: the newsletter #999 (2.85:1) -> #666
   (5.01:1 on style5's #f1efee field). */
.newsletter__input::placeholder { color: #666; opacity: 1; }

/* ---- IC-4: topbar icons the size of their 13px text (were 12px) ---- */
.topbar__info li i { font-size: 1em; }

/* ---- IC-6: rating stars >= 3:1 (#f5a623 2.03:1 -> #b47308, 3.15:1 on the palest band) ---- */
.product-card__rating, .product-card__rating i { color: #b47308; }

/* ---- L4 (RB 2026-10-21: one provider per row): the service-detail provider list (.doctors-grid,
   used only by pages/service_detail.html) is one column at every width, so each card has the
   full row and "Make an Appointment" fits on one line. The 180px desktop photo column is kept
   (AT7 C5). Team pages use .team-grid / .doctor-grid and are not touched. ---- */
.doctors-grid { grid-template-columns: 1fr; }

/* ---- L5: appointment step labels (#aaa 2.32:1 -> #666 >= 4.65:1 on every band) ---- */
.appt-progress__label { color: #666; }

/* ---- L6: the forms-fill HIPAA note (#777 3.46:1 on style5-7's grey card -> #636363 >= 4.64:1) ---- */
.patient-form__hipaa { color: #636363; }

/* ---- L7: "View all results" (#0d9488 3.74:1 -> #0b7d73, 5.01:1; style6's #2B6DA3 on its #D0EBFF
   band 4.45:1 -> its own #25608F, 5.40:1) ---- */
.cmh-gallery-preview__cta { color: #0b7d73; }
body.style-style6 .cmh-gallery-preview__cta { color: #25608F !important; }   /* style6 a{} is !important */

/* ---- L8: style3 doctor role (#6c9cc4 2.92:1 -> #4379a6, 4.64:1) ---- */
body.style-style3 .doctor-card__role { color: #4379a6; }

/* ---- L9: style1's grey eyebrows (#8a8a8a 3.24-3.45:1 -> #707070, >= 4.64:1) ---- */
body.style-style1 .departments__sub, body.style-style1 .latest-news__label,
body.style-style1 .select-doctor__label { color: #707070 !important; }  /* style.css:1328 is !important */

/* ---- R3 (RB 2026-10-21, M6): /patient-form and the appointment request adopt each style's OWN
   form look -- the .contact-form__* look /forms/fill already uses (radius, text size, label gap,
   field height, background, style6's pill; fix 9's caret, date icon and one-height rules ride on
   it). Their templates now carry the contact-form classes inside a .contact-section; these rules
   only keep each page's own frame:
     /patient-form: the white card it had (.cmh-s721856's box), centred at 680px;
     /appointment: the form sits inside its step, so .contact-section adds no padding there.
   L15 rides on this: at 390 the card sits on the 16px page gutter (style.css's own <=768px section
   gutter) and its 16px phone padding puts the fields 16px inside it (they were inset 52px, 286px
   wide). */
section.contact-section.cmh-pf { padding: 40px 20px; }
.cmh-pf-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 36px 32px; }
/* The appointment form carries .contact-section only for the field look: never the section's panel
   (style5 #E2E2E2 + 48px padding !important, style6 #E2E3E3, style7 #E4EAE2 !important -- review A,
   526113e). It stays the transparent, unpadded form it was on main. */
body form.appt-form.contact-section.cmh-appt-unified { background: transparent !important; padding: 0 !important; }
@media (max-width: 600px) {
  .cmh-pf-card { padding: 24px 16px; }
}

/* =============================================================================
   Icon audit (2026-10-21, REPORT_ICONS2) -- folded into fix 10.
   R1 on DARK backgrounds: a darker shade cannot pass there, so the SAME hue goes LIGHTER
   (recorded for RB): style1 quicklinks icon #0099cc -> #00bbfa (3.64:1 on its #005485 tile),
   style4 quicklinks icon #176E94 -> #7EC8C8 (3.80:1 on #0A5D80; the light teal style4 already
   uses for this, style4/overrides.css:360). The style6 topbar (accent-strong band, M13) takes the
   white of its own text.
   ============================================================================= */
/* IC-13 / IC-12: quicklinks icons (style.css:522/:1369 var(--accent)) */
body.style-style1 .quicklinks__icon i { color: #00bbfa; }
body.style-style4 .quicklinks__icon i { color: #7EC8C8; }
/* IC-18: style5 appointment type-card icon was its maroon on the maroon card (1.44:1); white like
   its own title and like every other style (4.5:1+). */
body.style-style5 .appt-type-card__icon { color: #fff; }
/* IC-20: style6 topbar clock icon took style6's a{#2B6DA3!important} on the band (1.11:1). */
body.style-style6 .topbar__info li i, body.style-style6 .topbar__info li a i { color: #fff !important; }
/* M13 follow-up (review B): the topbar's address/phone LINKS took style6's a{#2B6DA3!important} on the
   dark band (1.11:1); white like the band's text (6.11:1). */
body.style-style6 .topbar__info li a { color: #fff !important; }
/* IC-22: contact-info pin/phone (20px) sat 4-5px below the centre of their 14px/22.4px text line:
   the icon's line box was 32px. One 22.4px line box (20px x 1.12) centres it on the first line.
   style6 draws these icons in round chips (design; not measured as inline icons). */
body:not(.style-style6) .contact-info__icon { line-height: 1.12; }
/* IC-24: icons at 0.80 of their text -> about 0.93 (style6 hero quick-link arrow 12 -> 14px beside
   15px; the service-sidebar chevron 12 -> 14px beside 15px). */
body.style-style6 .hero__ql-arrow, body.style-style6 .hero__ql-arrow i { font-size: 14px; }
.service-sidebar__item a .cmh-s9bd93d { font-size: 14px; }