/* ============================================================================
   CCL - SITE-WIDE ACCESSIBILITY CORRECTIONS
   Created 2026-09-23. Loaded on every page by ccl-contrast-fixes.php.

   This file holds one kind of change only: text that cannot be read at the
   colour it was given. Each rule records what it measured before and after,
   so the reason is on the page rather than in someone's memory.

   The measurements come from a sweep of 29 templates, one per content type,
   at 390px and 1280px: 8,544 elements checked against their own background,
   3,207 skipped because they sit on a gradient or an image and cannot be
   reduced to a single colour honestly. 185 failures, 35 distinct.

   Nothing here changes a layout or a brand colour beyond the minimum needed
   to clear WCAG AA at the size and weight the text is actually set in.

   It loads before ccl-kb-ink.css, so the knowledgebase palette still wins on
   knowledgebase pages.
   ========================================================================= */

/* The costs disclosure on the home page - the Conditional Costs Agreement
   note and the Legal Profession Act 2007 reference - is set in #999999 at
   10.4px, which measures 2.85:1. That is the smallest type on the site at
   the lowest contrast, and it is the one block on the page carrying a
   regulated disclosure. #6B6B6B takes it to 5.33:1 and still reads as the
   quiet, secondary note it is meant to be. */
.fine-print {
	color: #6B6B6B !important;
}

/* The sticky Call button at the foot of every phone screen was white text on
   #FF6B35: 2.84:1, against a floor of 4.5 for 15px semibold and 3.0 even for
   large text. The single most important button on the mobile site failed on
   every page of it. #CC4C10 is the same colour family at 4.56:1.
   Knowledgebase pages override this again with amber, from ccl-kb-design.php. */
.ccl-mobile-cta-bar .ccl-mobile-cta-btn--call {
	background: #CC4C10 !important;
	color: #FFFFFF !important;
}

/* --- professional negligence: the gold ----------------------------------
   Worst template on the site: 40 failures at 390px, 46 at 1280. They were
   not scattered - they were one colour. #A8842F gold was used for almost
   every label, eyebrow, tag and number, on three different backgrounds:

     on cream #F5EEDD   3.02:1   eyebrows, ribbons, scenario numbers,
                                 scenario action labels        ~20 places
     on white           3.50:1   scenario tags, damages tags,
                                 the two-track plus, spec keys  ~14 places
     on navy #22304E    3.75:1   the spec keys inside a spec row  8 places

   The rule that fixes it is the one the template was missing: gold darkens
   on a light background and lightens on a dark one. So the shared token goes
   to #7F631D - 4.90 on cream, 5.67 on white - and the eight keys sitting on
   navy get #C9A24B instead, which is 5.47 there and is already in this
   template's palette, so no new hue is introduced.

   The tokens are declared on .is-professional-negligence-v2, so re-pointing
   them cannot reach the other worksingle variants, which carry their own. */

.ccl-worksingle--wrapper.is-professional-negligence-v2 {
	--pn-amber-dark: #7F631D !important;
	--pn-gold: #7F631D !important;
}

/* 3.75:1 before. Gold on navy has to go up, not down. */
/* The spec keys appear on two surfaces: inside a twotrack card they sit on
   white and keep the dark gold, inside a chain node they sit on #22304E and
   need the light one. Scoping this to .ccl-worksingle--spec-row instead
   caught both and broke the white ones at 2.40:1, which is what the desktop
   re-scan picked up. */
.is-professional-negligence-v2 .ccl-worksingle--chain-node .ccl-worksingle--spec-key {
	color: #C9A24B !important;
}

/* White on #C9A24B measured 2.40:1 - the worst single reading on the page. */
/* Only the active station is filled. Giving every station the dark fill put
   the inactive stations' grey numbers on gold at 1.32:1 - the first attempt
   at this rule made things worse rather than better. */
.is-professional-negligence-v2 .ccl-worksingle--toolbar-station.is-active {
	background: #7F631D !important;
}

.is-professional-negligence-v2 .ccl-worksingle--toolbar-station.is-active,
.is-professional-negligence-v2 .ccl-worksingle--toolbar-station.is-active * {
	color: #FFFFFF !important;
}

/* The statutory damages column heads on the dark panel: same rule again,
   gold lightens on a dark background. 2.82:1 before, 5.02:1 after. */
.is-professional-negligence-v2 .ccl-worksingle--damages-col.is-statutory .ccl-worksingle--damages-col-tag {
	color: #C9A24B !important;
}

/* --- public liability: ochre and muted ----------------------------------
   17 failures, two colours.

   #C9831A ochre was used both ways round - as white text on an ochre rung
   number, and as ochre text on white for the crosslink arrows - and both
   land on 3.11:1. One value fixes both, because both need the same move:
   #9C640F is 4.95:1 either way round.

   #6E7A95 muted was 4.30 on white and 3.92 on the cream panel. #5C6780
   clears both at 5.67 and 5.16. */

.ccl-worksingle--wrapper.is-public-liability-v2 {
	--pl-ochre: #9C640F !important;
	--cw-accent: #9C640F !important;
	--pl-ink-muted: #5C6780 !important;
}

/* --- recreational: terracotta, sage and muted ---------------------------
   16 failures, three colours, all of them white text on a fill that is too
   light to carry it. These are written as literals in single-recreational-v2
   rather than tokens, so they are corrected one rule at a time.

     white on #C97A52 terracotta   3.29 -> #9E5631 at 5.48   risk flag
     white on #6F8D77 sage         3.65 -> #4E6955 at 6.04   lane tags, evidence numbers

   The muted #6E7A95 is the same token as the public liability template and
   moves the same way: 4.30 on white and 3.93 on the mint panel, to 5.67
   and 5.17. */

.ccl-worksingle--wrapper.is-recreational-v2 {
	--pl-ink-muted: #5C6780 !important;
}

.is-recreational-v2 .ccl-worksingle--risk-flag-warn {
	background: #9E5631 !important;
	color: #FFFFFF !important;
}

.is-recreational-v2 .ccl-worksingle--def-card-tag,
.is-recreational-v2 .ccl-worksingle--evi-num {
	background: #4E6955 !important;
	color: #FFFFFF !important;
}

/* --- two things that appear on many templates ---------------------------

   The required-field marker. abbr.required is #FA5252 on white: 3.28:1, at
   14.25px bold. It is the mark telling someone which fields they have to
   fill in before a form will submit, so it is doing real work, not
   decoration. #C92A2A is 5.46:1 and still unmistakably a red asterisk.
   36 instances across the form-bearing templates.

   The chat button. The caption on the Mates chat launcher is white on
   #0081FF: 3.76:1. It sits on 11 templates including every knowledgebase
   page, and it was the only failure left on the knowledgebase after that
   section was finished. #0069CC is 5.39:1 and is the same blue, one step
   down. This is a third-party widget, so the rule is deliberately narrow -
   it repaints the launcher button and nothing else the plugin owns. */

abbr.required,
.required {
	color: #C92A2A !important;
}

.mdp-mates-open-chatbot-button {
	background: #0069CC !important;
}

/* --- resource hub cards and the estimator option tags -------------------
   On the home page.

     .rhub-badge-type   #00D4AA on white   1.91 -> #00806A at 4.89
     .ccl-option-tag    #D97706 on #FFFBEB 3.07 -> #A85A04 at 4.90
     .rhub-date         #7B8A9F on white   3.51 -> #61708A at 5.01
     .rhub-desc         #6B7A90 on white   4.36 -> #63718A at 4.93

   The teal badge was the lowest reading on the page at 1.91 - a mint green
   label on white, effectively invisible in daylight on a phone. Keeping the
   hue and taking it to a deep teal holds the colour coding intact.

   Two things on this page are deliberately left alone: the 56px decorative
   quote mark in #DBEAFE and the full stop after a heading in #0B5CFF. Both
   are ornament rather than content - they carry no information a reader
   would lose - and pushing them to 3:1 would change the look of the page
   for no accessibility gain. */

.rhub-badge-type {
	color: #00806A !important;
}

.ccl-option-tag {
	color: #A85A04 !important;
}

.rhub-date {
	color: #61708A !important;
}

.rhub-desc {
	color: #63718A !important;
}

/* --- the last of them ---------------------------------------------------

   The office sidebar badge was white on amber #FFA826 at 1.93:1. Darkening
   the amber would have turned a bright badge brown, so the text goes dark
   instead and the badge keeps its colour: 8.91:1.

   The rest are the same move as everywhere else - a colour taken down or up
   until the text on it can be read.

     .ccl-svc-proof__stars       #F59E0B on white   2.15 -> #9E6009  5.08
     .ccl-worksingle--isv-band   white on #4DB6A8   2.45 -> #2D6F66  5.87
     timeline urgency tags       #DC2626 on #FEE2E2 3.95 -> #C41C1C  4.87
     .ccl-ns2__share-btn         white on #1877F2   4.23 -> #1568D6  5.27
     defective products muted    #6E7A95 on white   4.30 -> #5C6780  5.67 */

.ccl-scoffice--sidebar-cta-badge,
.ccl-scoffice--sidebar-cta-badge * {
	color: #1D1B16 !important;
}

.ccl-svc-proof__stars {
	color: #9E6009 !important;
}

.ccl-worksingle--isv-band {
	background: #2D6F66 !important;
	color: #FFFFFF !important;
}

[class*="timeline-urgency"] {
	color: #C41C1C !important;
}

.ccl-ns2__share-btn {
	background: #1568D6 !important;
	color: #FFFFFF !important;
}

.ccl-worksingle--wrapper.is-defective-products-v2 {
	--pl-ink-muted: #5C6780 !important;
}

/* On the defective products template the lane statute line is written with a
   literal #6E7A95 rather than the muted token, so re-pointing the token left
   it at 4.30:1. Corrected directly, for every template that uses it. */
.ccl-worksingle--lane-statute {
	color: #5C6780 !important;
}

/* ========================================================================
   TARGET SIZE
   WCAG 2.2 AA asks for 24x24 CSS pixels on anything you tap. A sweep of the
   29 templates at 390px found 101 controls under that, 35 distinct. Inline
   links inside a paragraph are exempt under the standard and are left alone;
   what follows is the rest - footer links, carousel controls, card links,
   checkboxes and a few form fields.

   Where a control is deliberately small to look at - a 10px carousel dot, a
   5px progress segment - the dot keeps its size and only the hit area grows,
   using padding with background-clip: content-box. Nothing here changes what
   the page looks like beyond a few pixels of height.
   ======================================================================== */

/* Footer compliance links: 94x15, on all 29 templates. */
.ccl-footer__sublink {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 24px !important;
}

/* Resource hub card links, testimonial read-more, showcase controls. */
.rhub-link,
.lsx-read-more,
.ccl-case-gate__cancel,
.ccl-showcase--nav-btn,
.ccl-showcase--popup-btn,
[class*="ccl-worksingle--statusbar"] a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 24px !important;
	min-width: 24px !important;
}

/* Carousel dots are 10x10 and progress segments 23x5. Both stay exactly the
   size they are drawn; the padding grows the tappable box around them. */
.ccl-carousel__dot {
	padding: 7px !important;
	background-clip: content-box !important;
	box-sizing: content-box !important;
	min-width: 10px !important;
	min-height: 10px !important;
}

.lsx-progress-seg {
	padding: 10px 0 !important;
	background-clip: content-box !important;
	box-sizing: content-box !important;
	min-height: 5px !important;
}

/* Checkboxes and radios ship at 16x16. On a phone that is a hard thing to
   hit; 24 is the floor and also simply easier to use. */
input[type="checkbox"],
input[type="radio"] {
	width: 24px !important;
	height: 24px !important;
}

/* Text inputs and selects that came in under 24 high. */
.ccl-xtra-field input,
.ccl-showcase--form-select,
select.ccl-showcase--form-select {
	min-height: 26px !important;
}

/* Breadcrumb links that are not in a list, contact values, and any phone
   link anywhere on the site. A number someone taps to call the firm was
   86x17 on the people pages, which is the one target on that page you least
   want a person to miss. */
[class*="breadcrumb"] a,
[class*="contact-value"] a,
a[href^="tel:"] {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 24px !important;
}

/* Two the first pass left just short: the testimonial read-more landed on
   exactly 24 before rounding, and the progress segment grew in height but
   was still 23 wide. */
.lsx-read-more {
	min-height: 26px !important;
}

.lsx-progress-seg {
	min-width: 24px !important;
}

/* The last two: knowledgebase hub card headings, which are links, and email
   addresses, which get the same treatment as phone numbers. */
.ccl-kb2__hub-title a,
a[href^="mailto:"] {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 24px !important;
}

/* One CTA blue (audit L10/M22; option C chosen 30 Sept 2026). Every primary call to action is
   one solid blue, #0B5CFF (white text 5.3:1), and #0846C1 on hover (7.9:1). The call-back
   pop-up keeps its moving highlight (its ::before), so it still stands out. Green confirm
   buttons, the yellow calculator toolbar and buttons on navy panels keep their own colours. */
html body .ccl-cf-btn--primary,
html body .ccl-ccpage-btn-submit,
html body .ccl-ccpage-btn-gold,
html body .ccl-ci-route-btn,
html body .ccl-ci-est-cta,
html body .ccl-continue-enquiry-btn,
html body .ccl-cb-submit,
html body .btn--register,
html body .ccl-assessment-tool--btn-start,
html body .ccl-assessment-tool--btn-primary,
html body .ccl-ciw-submit,
html body .ccl-code-submit,
html body .ccl-ciw-est-cta {
	background-color: #0b5cff !important;
	background-image: none !important;
	color: #fff !important;
}
html body .ccl-cf-btn--primary:hover,
html body .ccl-ccpage-btn-submit:hover,
html body .ccl-ccpage-btn-gold:hover,
html body .ccl-ci-route-btn:hover,
html body .ccl-ci-est-cta:hover,
html body .ccl-continue-enquiry-btn:hover,
html body .ccl-cb-submit:hover,
html body .btn--register:hover,
html body .ccl-assessment-tool--btn-start:hover,
html body .ccl-assessment-tool--btn-primary:hover,
html body .ccl-ciw-submit:hover,
html body .ccl-code-submit:hover,
html body .ccl-ciw-est-cta:hover {
	background-color: #0846c1 !important;
	background-image: none !important;
}

/* 2 October 2026: new medical leaflet and contact/footer placeholders.
 * Small medical breadcrumb/help/fine text was #66717F on #E6F4EF:
 * 4.38:1. #566375 gives 5.40:1 on that mint surface.
 * Contact placeholders were #8A94A6 on white: 3.06:1;
 * #566375 gives 6.11:1. Icons keep their position and colour.
 * The dark footer field used the browser's #757575 placeholder. Give its
 * placeholder a light ink that matches the existing dark input, with opacity 1.
 * These rules change colours only; labels, content, input values, validation,
 * draft capture, destinations and the earlier contrast/target-size rules remain.
 */
.mnd .mnd-crumbs a,
.mnd .mnd-qc__label,
.mnd .mnd-fine {
	color: #566375 !important;
}
.ccl-ccpage-contact-form-section .ccl-cb .ccl-ccpage-form-input::placeholder {
	color: #566375 !important;
	opacity: 1;
}
.ccl-footer-2024 .ccl-footer__map-input::placeholder {
	color: #CBD5E1 !important;
	opacity: 1;
}

/* 2 Oct 2026: additional normal-state and gradient-backed text contrast.
   Preserve text, layout, form behaviour, link destinations and animations. */
body .fee-callout .fee-small,
.ccl-ccpage-contact-form-section .ccl-ci-autosave {
  color: #566375 !important;
}
.ccl-intake--blue .ccl-cf-form-section .ccl-cf-req {
  color: #FFB7B7 !important;
}
/* Keep the estimate pill's original dark ink when service link rules cascade
   into it. Its existing normal/focus yellow backgrounds remain unchanged. */
body a.ccl-ce-pill.ccl-ce-pill--inline,
body a.ccl-ce-pill.ccl-ce-pill--inline:hover,
body a.ccl-ce-pill.ccl-ce-pill--inline:focus,
body a.ccl-ce-pill.ccl-ce-pill--inline:focus-visible {
  color: #0E1A33 !important;
}