/* ═══════════════════════════════════════════════════════════════════════
   M-U-S-I-C — accessibility corrections (assets/css/pages/zz-a11y.css)

   Loaded LAST. The page stylesheets are globbed and enqueued in sorted
   order, so a `zz-` name always wins the cascade without !important —
   except against the React widgets' inline styles, which is the one place
   below where !important is used.

   Every value here is a WCAG 2.1 AA contrast repair measured on the live
   site. Each block records the pair that failed and the ratio before and
   after, so the numbers can be checked rather than trusted.

   Two greys carry muted text, both already in the design system's own set
   (CLASSES.md / the _woo.css header):
       slate #516078   muted text on paper / white   — 6.05:1, 6.37:1
       mist  #8B97AA   muted text on ink             — 6.00:1
   Mist is simply not a body-text colour on a light ground: it measures
   2.61–2.96:1 against every light surface in the design. The ink uses of
   mist are correct and are left alone.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Muted text on light surfaces ──────────────────────────────────
   #8B97AA on #FFF8EF = 2.80:1, on #FFFFFF = 2.96:1, on #F5F7FA = 2.75:1,
   on #EDF1FB = 2.61:1. #516078 measures 6.05 / 6.37 / 6.13 / 5.64:1. */

.music-text-gray,
.music-woo-reassure,
.music-prod__price-note,
.music-cohortcard__meta,
.music-cohortpick__hint,
.music-cart__time,
.music-checkout__promise,
.music-thanks__seat-meta,
.music-account__signout,
.music-account__intro-links,
.music-road__meta,
.music-progcard__price-note,
.music-form__fine,
.music-form-card .music-ff-fine p,
.music-cohort-card--light .music-cohort-card__meta,
.music-social .music-social__divider,
.music-home-day__num,
.camp-day-kicker,
.camp-rhythm__note,
.ct-figure__caption,
.curriculum-stage__step,
.curriculum-practice__caption,
.curriculum-rules__note,
.faq-list__more,
.fmt-sum-exit,
.fmt-note,
.fmt-rules__fine,
.mc-note,
.mc-phase__note,
.abt-never__contact,
.sk-hero__cta-note {
  color: #516078;
}

/* Woo-scoped muted text: the body.music-woo prefix is needed to outrank the
   equally specific rules in _woo.css. */
body.music-woo .music-woo-reassure,
body.music-woo .music-prod__price-note,
body.music-woo .music-prod__glance-row dt,
body.music-woo .music-cohortcard__meta,
body.music-woo .music-cohortpick__hint,
body.music-woo .music-cohortpick__field .reset_variations,
body.music-woo .music-cart__time,
body.music-woo .music-cart__coupon-toggle::after,
body.music-woo .music-cart__body .variation dt,
body.music-woo .music-cart__remove a.remove,
body.music-woo .cart_totals .woocommerce-shipping-destination,
body.music-woo .cart_totals .shipping-calculator-button,
body.music-woo form .form-row .description,
body.music-woo form .form-row small,
body.music-woo table.woocommerce-checkout-review-order-table th,
body.music-woo table.woocommerce-checkout-review-order-table .product-quantity,
body.music-woo .woocommerce-checkout-review-order-table .variation dt,
body.music-woo #payment .woocommerce-privacy-policy-text,
body.music-woo .woocommerce-terms-and-conditions-wrapper,
body.music-woo .music-checkout__promise,
body.music-woo .music-thanks__seat-meta,
body.music-woo table.shop_table th,
body.music-woo .wc-item-meta .wc-item-meta-label,
body.music-woo .wc-item-meta li strong,
body.music-woo ul.order_details li,
body.music-woo .music-account__signout,
body.music-woo .music-account__intro-links,
body.music-woo .woocommerce-account .woocommerce-privacy-policy-text p,
body.music-woo .music-road__meta,
body.music-woo .music-progcard__price-note,
body.music-woo .music-progcard.is-current .music-progcard__cta {
  color: #516078;
}

/* Mist is right on ink — restated after the lists above because several of
   these share a class name with a light-ground use. */
.music-footer__about,
.music-footer__legal,
.music-home-mm .music-home-split__body,
.music-home-panel__sub,
.music-home-ribbon__meta,
.camp-capstone__sub,
.camp-dates__note,
.curriculum-principles__lead,
.fmt-phases__lead,
.mc-mm-copy,
.pr-tier--ink .pr-tier__per,
.pr-tier--ink .pr-tier__desc,
.pr-tier--ink .pr-tier__exit,
.music-road--ink .music-road__meta,
body.music-woo .music-road--ink .music-road__meta,
.music-prod__promise-links,
body.music-woo .music-prod__promise-links,
body.music-woo .cart_totals table.shop_table th,
body.music-woo .music-cart__totals-note {
  color: #8b97aa; /* the cart totals panel is #111827 — 6.00:1 */
}

/* Two ink surfaces are the lighter navy #243047 rather than #111827, and
   mist lands on 4.47:1 there — three hundredths short. A hair lighter,
   #98A4B6, gives 5.24:1 on navy and 7.03:1 on ink. */
.fmt-phase__days,
.curriculum-principle__gloss {
  color: #98a4b6;
}

/* Placeholders are exempt from 1.4.3 only when they repeat a visible
   label. These do not, so they get the same treatment. */
.music-form-card .ff-el-form-control::placeholder {
  color: #516078;
}

/* ── 2. White on coral — the primary call to action ───────────────────
   #FFFFFF on #FF5A5F is 3.05:1. Every "choose your dates", "add to cart",
   "continue to secure checkout" and 404 button was failing, which is the
   worst possible place for it.

   No bright coral can carry white text: 4.5:1 needs a relative luminance
   below 0.188 and coral sits at 0.328. Rather than invent a new hex the
   button surface moves to the brand red #D7374F, already in the palette,
   which measures 4.62:1 with white. Coral is untouched everywhere it is
   decorative — rules, top borders, the horizon artwork, the seat pills.

   NOTE FOR REVIEW: this is a visible change to the primary CTA colour.
   Deleting this block restores coral and re-breaks the contrast. */

.music-btn--coral,
.wp-block-button.music-btn--coral .wp-block-button__link,
.wp-block-button.pr-cta--coral .wp-block-button__link,
.music-cohort-card--light .music-cohort-card__cta,
.music-notfound__home,
.pr-tier__flag,
body.music-woo .music-woo-btn--coral,
body.music-woo a.music-woo-btn--coral,
body.music-woo button.music-woo-btn--coral,
body.music-woo .single_add_to_cart_button,
body.music-woo a.checkout-button,
body.music-woo a.checkout-button.button.alt,
body.music-woo button#place_order,
.wp-block-button__link.has-coral-background-color {
  background-color: #d7374f;
}

/* Three coral surfaces are painted by higher-specificity rules and have to
   be matched selector for selector rather than beaten on order alone:
   the empty-cart CTA (_woo.css carries body + two classes), and the two
   sign-in column headings under #customer_login (an ID selector). */
body.music-woo .music-woo-btn--coral.wc-backward {
  background: #d7374f;
}

body.music-woo .music-woo-btn--coral.wc-backward:hover {
  background: #b92940;
}

body.music-woo #customer_login > .col-1 > h2,
body.music-woo #customer_login > .col-2 > h2 {
  color: #c42b44;
}

/* Every checkout section heading is set red by `body.music-woo form.checkout h3`,
   which carries an element selector the pending-title class cannot beat. */
body.music-woo form.checkout h3,
body.music-woo .woocommerce-billing-fields > h3,
body.music-woo .woocommerce-additional-fields > h3 {
  color: #c42b44;
}

/* The active primary-nav item is painted by `.music-nav__list
   .current-menu-item > a`, which outranks a bare .hv-navlink. */
.music-nav__list .current-menu-item > a,
.music-nav__list .current-menu-item > a.hv-navlink {
  color: #c42b44;
}

/* Hover must stay ≥4.5:1 as well — a shade deeper, never lighter. */
.music-btn--coral:hover,
.wp-block-button.music-btn--coral .wp-block-button__link:hover,
.music-notfound__home:hover,
.hv-coral:hover,
.wp-block-button.hv-coral:hover .wp-block-button__link,
body.music-woo .music-woo-btn--coral:hover,
body.music-woo a.music-woo-btn--coral:hover,
body.music-woo button.music-woo-btn--coral:hover,
body.music-woo .single_add_to_cart_button:hover,
body.music-woo a.checkout-button:hover,
body.music-woo button#place_order:hover {
  background-color: #b92940; /* white 5.86:1 */
}

/* ── 3. The program accent tokens ─────────────────────────────────────
   Every family card, road step, ribbon and duration badge is tinted by
   --music-accent-deep on --music-accent-soft. Two of the four pairs failed:
       teal   #00789E on #DDF5FC = 4.44:1  →  #006C8C = 5.26:1
       red    #D7374F on #FFE6E7 = 3.90:1  →  #C42B44 = 4.69:1
   Both new values also clear paper (#FFF8EF): 5.65:1 and 5.28:1, where
   the originals measured 4.77:1 and a failing 4.38:1.
   Amber (#9A6200, 4.54:1) and violet (#5C3690, 7.39:1) already passed and
   are deliberately unchanged. */

.music-acc-teal,
body.music-woo-program-intro {
  --music-accent-deep: #006c8c;
}

.music-acc-red,
body.music-woo-program-masterclass,
body.music-woo {
  --music-accent-deep: #c42b44;
}

/* The badge unit ("LIVE DAYS") carried opacity .85, which pulled all four
   families under AA regardless of the token — teal 3.46:1, amber 3.50:1,
   red 3.26:1, violet 5.18:1. The tint is not load-bearing; full opacity
   restores 5.26 / 5.38 / 4.69 / 8.13:1. */
.music-progbadge__u {
  opacity: 1;
}

/* Standalone red text on paper and on the pink wash, outside the token
   system: #D7374F on #FFF8EF = 4.38:1 and on #FFE6E7 = 3.90:1.
   #C42B44 measures 5.28:1 and 4.69:1 and is indistinguishable at the
   11–13px eyebrow sizes these are used at. Red as a FILL is unchanged. */
.music-eyebrow--red,
.music-notfound__eyebrow,
.hv-navlink,
.music-seatpill--wait,
.music-cohort-card__seats--wait,
.mc-day__no,
.required,
body.music-woo .music-eyebrow--red,
body.music-woo .music-prod__step,
body.music-woo .music-seatpill--wait,
body.music-woo .music-checkout__pending-title,
body.music-woo .woocommerce-account h2 {
  color: #c42b44;
}

/* ── 4. Teal on the pale teal chip ────────────────────────────────────
   #00789E on #DDF5FC = 4.44:1 — six hundredths short. #006C8C = 5.26:1.
   Teal on white (5.02:1) and on paper (4.77:1) already pass and are left
   alone; only the tinted-chip pairing is corrected. */

.music-badge--teal,
.curriculum-beat {
  color: #006c8c;
}

/* ── 5. Violet on ink ─────────────────────────────────────────────────
   #7A4DB5 on #111827 = 3.00:1 at 12px, where 4.5:1 is required. A tint of
   the same hue, #B49AE0, measures 7.30:1. Scoped to the ink bands so the
   violet used on white (6.06:1) is untouched. */

.music-band .music-eyebrow--violet,
.music-home-mm .music-eyebrow--violet,
.pr-tier--ink .music-eyebrow--violet {
  color: #b49ae0;
}

/* ── 6. Reduced motion ────────────────────────────────────────────────
   The class-finder wizard sets its transitions inline from React — 600ms
   cross-fades, a 1000ms track slide, a 1100ms background scale. Inline
   styles beat any stylesheet, so honouring the user's setting needs
   !important here. Everything else in the design system already declares
   its own prefers-reduced-motion block. */

@media (prefers-reduced-motion: reduce) {

  .class-finder,
  .class-finder *,
  [data-music-widget] * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. Older editorial pages
   Outside the commerce/forms/member sweep this file was written for, but
   the same measurements apply and the repairs are the same shape.
   ═══════════════════════════════════════════════════════════════════════ */

/* /camp/ — the cohort card's white pill sits inside an ink band, and
   `.music-band a { color: #CDD4DF }` outranks the pill's own colour, so the
   "Enroll" label rendered cloud-grey on white: 1.49:1. The pill was always
   meant to carry ink. */
.music-band .music-cohort-card__cta,
.music-band a.music-cohort-card__cta {
  color: #111827; /* 17.74:1 on white */
}

/* /camp/ — the live-session caption is white text laid straight over a
   photograph with nothing behind it, so its contrast is whatever the
   photo happens to be. A bottom-up scrim makes the guarantee real without
   changing the composition. */
.camp-live__caption {
  background: linear-gradient(to top, rgba(9, 13, 24, 0.82) 0%, rgba(9, 13, 24, 0.62) 55%, rgba(9, 13, 24, 0) 100%);
}

/* The gold eyebrow is documented "on ink bands", where #FFB000 measures
   9.68:1. On paper it is 1.74:1. Default it to the amber text tone that
   the badges already use (4.83:1 on paper) and give the ink bands their
   gold back. */
.music-eyebrow--gold {
  color: #9a6200;
}

.music-band .music-eyebrow--gold,
.mc-hero .music-eyebrow--gold,
.pr-tier--ink .music-eyebrow--gold,
.has-ink-background-color .music-eyebrow--gold {
  color: #ffb000;
}

/* /master-class/ — the three phase pills carry white on green, amber and
   coral: 3.01:1, 1.83:1 and 3.05:1. Green deepens, coral moves to the
   brand red, and amber takes ink, which is the only readable pairing for
   a colour that bright. */
.mc-phase__range--green {
  background: #0b7d58; /* white 5.14:1 */
}

.mc-phase__range--amber {
  background: #ffb000;
  color: #111827; /* 9.68:1 */
}

.mc-phase__range--coral {
  background: #d7374f; /* white 4.62:1 */
}

/* The accents a course profile can name beyond the Recording three. Each
   was chosen to clear 4.5:1 against white without a second override:
   sky 4.75:1, cobalt 7.52:1, violet 9.14:1, red 4.62:1, teal 5.02:1. */

/* /camp/ and /starter-kit/ — the same two accents on buttons.
   White on sky #33B5E5 is 2.36:1; the intro family's own teal carries it
   at 5.02:1. White on #19A974 is 3.01:1; #0B7D58 is 5.14:1. */
.wp-block-button__link.has-sky-background-color,
.music-btn--sky,
.wp-block-button.music-btn--sky .wp-block-button__link {
  background-color: #00789e;
}

.wp-block-button__link.has-green-background-color,
.music-btn--green,
.wp-block-button.music-btn--green .wp-block-button__link,
.wp-block-button.sk-btn--green .wp-block-button__link,
.music-ff-submit--green .ff-btn.ff-btn-submit,
.music-ff-submit--green button.ff-btn-submit {
  background-color: #0b7d58;
}

/* /curriculum/ — the "→" between beats is real text at #CDD4DF on white,
   1.49:1. It reads as punctuation, so it takes the muted text tone. */
.curriculum-beat-arrow {
  color: #516078; /* 6.37:1 */
}

/* ═══════════════════════════════════════════════════════════════════════
   8. Layout stability — reserving space for the React widgets
   The three widgets mount into an empty <div data-music-widget>. Until the
   bundle parses, that div is 0px tall, so everything below it jumps when
   the widget appears: measured CLS 0.42 on /apply/ and 0.24 on
   /class-finder/, both well past the 0.1 "good" threshold.

   A floor on the mount point absorbs the jump. These are min-heights, not
   heights — the widget still grows past them on narrow viewports, and a
   bundle that fails to load leaves a plausible gap rather than nothing.
   ═══════════════════════════════════════════════════════════════════════ */

[data-music-widget] {
  display: block;
}

/* The finder sizes itself to the viewport (height: calc(100vh - 66px),
   min-height 620px). Reserving the same shape costs nothing and removes
   the shift entirely. */
[data-music-widget="class-finder"] {
  min-height: max(620px, calc(100vh - 66px));
}

/* The enrol form runs about 1500px at desktop width and taller on mobile,
   where it is a single column. 80vh is the conservative floor. */
[data-music-widget="apply"] {
  min-height: 80vh;
}

[data-music-widget="member"] {
  min-height: 60vh;
}