/*
  Contrast fixes for the axe failures. Loaded at the end of <body> so these
  rules follow Ghost code injection and the <style> blocks inside page HTML.

  #tt-cookie-settings sits on the footer (#133467, or #080808 in dark mode)
  but outside .m-footer__content, so it inherited #4a4a4a at 85% opacity
  (about 1.3:1). #f7fbff at full opacity is white-on-navy, above 8:1.

  .tt-home-v2 .tt-btn-primary is white on #e63946 (4.17:1). #cf333f is 5.00:1
  and the hover #c1303b is 5.59:1. Navy .tt-btn-primary buttons are unchanged.

  .tt-card .tt-meta span was #68778a on #f5f7fa (4.26:1). #5c6b7e is 5.07:1.
  .hero-cta-note p was #687887 on #f5f8fa (4.26:1); same text colour, 5.10:1.
  Dark surfaces keep a light chip/note colour (#c5d0dc / #d5dde6).
*/

#tt-cookie-settings {
  color: #f7fbff;
  opacity: 1;
}

.tt-home-v2 .tt-btn-primary {
  background-color: #cf333f;
  color: #fff;
}

.tt-home-v2 .tt-btn-primary:hover,
.tt-home-v2 .tt-btn-primary:focus {
  background-color: #c1303b;
  color: #fff;
}

.tt-tools-v3 .tt-meta span,
.tt-card .tt-meta span {
  color: #5c6b7e;
}

[data-theme="dark"] .tt-tools-v3 .tt-meta span,
[data-theme="dark"] .tt-card .tt-meta span {
  color: #c5d0dc;
}

.tt-us-tax-v1 .hero-cta-note p,
.hero-cta-note p {
  color: #5c6b7e;
}

[data-theme="dark"] .tt-us-tax-v1 .hero-cta-note p,
[data-theme="dark"] .hero-cta-note p {
  color: #d5dde6;
}

/*
  Remaining light-mode contrast inside post and page HTML cards.
  Scoped to .js-post-content, which is the article/page body on this theme.
  Light mode only, so each page's own dark-mode variables stay put.

  The muted greys (#68758a, #68778a, #687887) are about 4.23–4.26:1 on the
  panel backgrounds #edf5fb, #f5f7fa and #f5f8fa. #5f6b7d is 4.90:1, 5.04:1
  and 5.07:1 on those three, and 5.40:1 on white.

  Hardcoded cousins that do not follow the variable:
  .tta-quals is #8190a2 (about 3.0:1 on white) and .tta-legal-note is #8290a0.
  .card .tt-card-top .icon is #9aabba (about 2.3:1 on white).
  Enquiry forms set their own --m to #687887.
*/

html:not([data-theme="dark"]) .js-post-content .tt-home-v2,
html:not([data-theme="dark"]) .js-post-content .tt-about-v2 {
  --tt-muted: #5f6b7d;
}

html:not([data-theme="dark"]) .js-post-content .tt-tools-v3,
html:not([data-theme="dark"]) .js-post-content .tt-us-tax-v1,
html:not([data-theme="dark"]) .js-post-content .tt-company-v1 {
  --muted: #5f6b7d;
}

html:not([data-theme="dark"]) .js-post-content .tt-form-slot .tt-lf {
  --m: #5f6b7d;
}

/* .tt-brand-side:nth-child(2) > p sits on #edf5fb. The variable above covers it. */

html:not([data-theme="dark"]) .js-post-content .tt-tools-v3 .tt-badge:not(.live) {
  color: #5f6b7d;
}

html:not([data-theme="dark"]) .js-post-content .tt-us-tax-v1 .route-text > span {
  color: #5f6b7d;
}

html:not([data-theme="dark"]) .js-post-content .tt-company-v1 .soft.section > .wrap > .head > p,
html:not([data-theme="dark"]) .js-post-content .tt-company-v1 .card .tt-card-top > .icon {
  color: #5f6b7d;
}

html:not([data-theme="dark"]) .js-post-content .tt-about-v2 .tta-people .tta-lead,
html:not([data-theme="dark"]) .js-post-content .tt-about-v2 .tta-brands .tta-lead,
html:not([data-theme="dark"]) .js-post-content .tt-about-v2 .tta-locations .tta-lead,
html:not([data-theme="dark"]) .js-post-content .tt-about-v2 .tta-quals,
html:not([data-theme="dark"]) .js-post-content .tt-about-v2 .tta-legal-note {
  color: #5f6b7d;
}

/*
  Company-page kickers use --blue (#2e75ad, 4.62:1 on #f5f8fa). Axe's
  flattened colour is #3177ae at 4.49:1. #2a6ba8 is 5.23:1 on that panel.
  Band kickers keep their own light blue.
*/
html:not([data-theme="dark"]) .js-post-content .tt-company-v1 .soft .head .kicker {
  color: #2a6ba8;
}

/* Same white-on-red gap as .tt-home-v2 .tt-btn-primary (4.17:1). #cf333f is 5.00:1. */
.js-post-content .tt-about-v2 .tta-btn-primary {
  background-color: #cf333f;
  color: #fff;
}