/*
 * Maui Nix — accessible colour palette (MNX-WCAG-5).
 *
 * SPLIT OUT OF mnx-a11y.css DELIBERATELY. This is the only part of the
 * accessibility work that changes what the site LOOKS like to a customer who
 * is not using assistive technology: it darkens the brand orange and four
 * other hard-coded hues so they clear 4.5:1. Everything else in the mu-plugin
 * is invisible unless you are on a keyboard or a screen reader.
 *
 * Because it is the visually-loudest and least-urgent piece, it has its own
 * kill switch and can be shipped — or reverted — on its own schedule:
 *
 *   define( 'MNX_A11Y_PALETTE_DISABLE', true );          // wp-config.php
 *   add_filter( 'mnx_a11y_palette_enabled', '__return_false' );
 *
 * With it off, this stylesheet is not enqueued AND the Customizer accent
 * filter in class-mnx-palette.php does not register, so the site returns to
 * its original colours completely. The rest of the mu-plugin is unaffected.
 *
 * Turning this off reintroduces real WCAG 1.4.3 / 1.4.11 failures — 98 nodes
 * at last measurement. It is a scheduling switch, not a permanent setting.
 */

/* ---------------------------------------------------------------------------
 * 1.4.3 Contrast (Minimum) / 1.4.11 Non-text Contrast — MNX-WCAG-5.
 *
 * Each token is the LIGHTEST shade of the original hue that still clears 4.5:1
 * against the worst background it appears on (#efeef0). Ratios run from that
 * worst case up to white:
 *
 *   --mnx-orange  #bc3c07  4.79 - 5.54   (was #fd6a35, 2.49 - 2.88)
 *   --mnx-link    #00708f  4.89 - 5.65   (was #0099cc, 2.89)
 *   --mnx-muted   #6b6b6b  4.61 - 5.33   (was #999999 / #7a7a7a, 2.61 - 4.29)
 *   --mnx-sale    #cc2900  4.67 - 5.41   (was #ff3300, 3.25)
 *   --mnx-info    #0b66d0  4.75 - 5.49   (was #3297fa, 3.02)
 *
 * The bright brand orange stays available for large decorative fills that
 * carry no information — it fails even 3:1, so it can never colour text,
 * icons, or borders.
 *
 * The accent itself is corrected upstream in class-mnx-palette.php by filtering
 * the Customizer setting the theme builds its colour scheme from; these rules
 * cover the colours that are hard-coded elsewhere.
 * ------------------------------------------------------------------------ */
:root {
	--mnx-orange: #bc3c07;
	--mnx-orange-decorative: #fd6a35;
	--mnx-link: #00708f;
	--mnx-muted: #6b6b6b;
	--mnx-sale: #cc2900;
	--mnx-info: #0b66d0;
}

/* Breadcrumbs — the single largest contrast failure (18 nodes). */
.breadcrumbs a,
.breadcrumbs span[itemprop="name"],
.breadcrumbs li[itemprop="itemListElement"] a,
.mf-breadcrumb a,
.page-header a {
	color: var(--mnx-link) !important;
}

/* Muted supporting text: "from" prices, price labels, Elementor body copy. */
.from,
.price_label,
.brief p,
.p1,
.woocommerce-result-count,
.product-meta,
.posted_in {
	color: var(--mnx-muted) !important;
}

/* Sale / special prices. */
ins .woocommerce-Price-amount,
.price ins,
strong > .woocommerce-Price-amount.amount > bdi,
.sale-price,
.onsale-text {
	color: var(--mnx-sale) !important;
}

/* Info blue: the search button fill (white text needs a darker ground) and the
 * job-type label on the careers template. */
.btn-search,
button.btn-search,
.sjb-search-button .btn,
input[type="submit"].btn-search {
	background-color: var(--mnx-info) !important;
	color: #ffffff !important;
	border-color: var(--mnx-info) !important;
}

.job-type,
.sjb-job-type,
a.job-type,
.job-date,
.sjb-job-date {
	color: var(--mnx-info) !important;
}

/* Accent-filled controls ship BLACK label text. On the ORIGINAL #fd6a35 that
 * was 7.29:1 and passed; on the corrected #bc3c07 it drops to 3.79:1 and
 * fails. Darkening the accent therefore REQUIRES flipping these labels to
 * white (5.54:1) — miss one and the palette fix creates a new failure.
 * The list below is exhaustive as of the Phase 2 review; anything else painted
 * on the accent must be added here too. */
.btn-shop,
.checkout-button,
.wpcf7-submit,
.single_add_to_cart_button,
.button.alt,
button.alt,
.mf-add-to-cart .button,
.woocommerce-button,
.woocommerce-Button,
.woocommerce-form-login__submit,
.page-numbers.current,
a.btn,
.btn-primary-accent,
/* Only rendered in LIST view on shop/category — reachable from the grid/list
 * toggle this plugin labels, so a first-class user state, and a regression the
 * desktop default-view sweep could not see. */
a.button.add_to_cart_button,
.product-inner .add_to_cart_button,
/* Only rendered when the mobile off-canvas search drawer is open. */
.mobile-search button.search-submit,
button.search-submit,
/* "Return to shop" — only rendered on an EMPTY cart, which is why it survived
 * both the Phase 2 review and every scan since: a seeded cart never paints it.
 * Found by scanning /cart/ on stage, at 3.78:1. The comment above says this
 * list was "exhaustive as of the Phase 2 review" — it was, for the states that
 * had been looked at. That is the recurring lesson in this file: accent-filled
 * controls hide in states (list view, mobile drawer, empty cart) that a default
 * desktop sweep never reaches. */
.cart-empty ~ .return-to-shop .button,
.return-to-shop .button,
a.button.wc-backward,
.button.wc-backward,
/* "Track" on /order-tracking/ — a plain button.button, so none of the
 * selectors above match it. Found by the 2026-09-21 wide prod scan at 3.78:1,
 * outside the 16 templates the sweep covers. Same lesson again: the list is
 * exhaustive only for the pages that have been looked at. */
.track_order .button,
.woocommerce-form-track-order button[name="track"],
/* The sticky "Add to Cart" bar on product pages. It sits at opacity 0 until
 * the visitor scrolls, and axe skips invisible content, so every scan taken at
 * the top of the page missed it. A11yInspect found it (and pointed at empty
 * space, because that is where the bar waits). 3.78:1 before. */
.sticky-product-info-wapper .button,
/* The current page in the signed-in account menu: the theme paints the <li>
 * with the accent and keeps the link black (3.78:1). */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
/* "Apply coupon" in the checkout's coupon form, which stays hidden until
 * "Click here to enter your code". Scoped to the checkout: the CART's coupon
 * button is transparent with black text (style.css:8672) and must stay so. */
.checkout_coupon .button,
.checkout_coupon button[name="apply_coupon"] {
	color: #ffffff !important;
}

/* The same sticky bar prints the price in the theme's #ff3300 (3.66:1 on
 * white) whether or not the product is on sale; the sale-price rules above
 * never reach it. A struck-through regular price stays muted. */
.sticky-product-info-wapper .price,
.sticky-product-info-wapper .price .woocommerce-Price-amount,
.sticky-product-info-wapper .price .woocommerce-Price-currencySymbol {
	color: var(--mnx-sale) !important;
}

/* "Default sorting" options, #999999 on white (2.84:1), seven per shop and
 * category page. Only painted when the menu is open, so default-view scans
 * skip them; A11yInspect found them. The chosen option and hover stay the
 * theme's black. */
.woocommerce-ordering li > ul li a:not(.active):not(:hover):not(:focus) {
	color: var(--mnx-muted) !important;
}

/* The theme turns hover black but gives :focus nothing, so a keyboard user's
 * focused option fell back to the theme's #999. Match hover. */
.woocommerce-ordering li > ul li a:focus {
	color: #000000 !important;
}

.sticky-product-info-wapper .price del,
.sticky-product-info-wapper .price del .woocommerce-Price-amount,
.sticky-product-info-wapper .price del .woocommerce-Price-currencySymbol {
	color: var(--mnx-muted) !important;
}

/* Contact Form 7's "The field is required." ships as #dc3232, which is 4.27:1
 * on the form's #f6f6f6 panel. Only rendered after a failed submit, so no
 * default-view scan sees it. The palette sale red is 5.0:1 there. */
.wpcf7-not-valid-tip {
	color: var(--mnx-sale) !important;
}

/* Mobile off-canvas menu header. The title is a bare <h2> inside
 * .mobile-nav-header with no class of its own, so it has to be matched by
 * container — an earlier `.mobile-nav-header` rule missed it because the colour
 * is set on the child, not the wrapper. This was already failing before the
 * palette change (1.24:1 on #fd6a35, improving to 2.39:1) and needs fixing on
 * its own merits. Only visible below 992px. */
.mobile-nav-header,
.mobile-nav-header h2,
.mobile-nav-header .menu-title,
.mobile-nav-header a,
.mobile-menu-header,
.mobile-menu-header h2 {
	color: #ffffff !important;
}

/* Secondary blue buttons (careers "quick apply", "read more", Bootstrap
 * primary). Simple Job Board ships `.sjb-page .btn-primary { ... !important }`
 * in an inline <style> that appears LATER in the document. That is the same
 * specificity as `.btn.btn-primary`, so source order beat us and only the
 * id-selector button was actually corrected — leaving two buttons side by side
 * in different blues. These selectors are deliberately more specific. */
#quick-apply-btn,
body .sjb-page .btn.btn-primary,
body .sjb-page a.btn-primary,
body .sjb-page .sjb-btn-primary,
body .btn.btn-primary,
body a.btn.btn-primary,
.sjb-btn-primary {
	background-color: var(--mnx-info) !important;
	border-color: var(--mnx-info) !important;
	color: #ffffff !important;
}

/* P3 — colours the palette filter cannot reach. #F14705 is hard-coded in
 * Elementor CSS and a theme custom-CSS block; #3297fa comes from Simple Job
 * Board; #999999 from the theme's product meta. None pass through
 * `custom_color`, so they need explicit overrides. */
.site-footer .primary-color,
.site-footer .primary-color a,
h4.primary-color,
h4.primary-color a {
	color: var(--mnx-orange) !important;
}

.onsale.ribbon,
.onsale.ribbon .sep,
.onsale.ribbon .per,
.onsale {
	background-color: var(--mnx-sale) !important;
	color: #ffffff !important;
}

/* (4) Scoped to the ARCHIVE heading only. The listing-item titles were already
 * near-black (12.6:1); recolouring them blue cut contrast sevenfold for no
 * accessibility gain — a gratuitous design change, not a fix. */
body .sjb-page .sjb-archive-page .job-title,
body .sjb-page .sjb-archive-page .job-title a,
/* (1) Must out-specify `.sjb-page .sjb-listing a.sjb_view_more_btn` (0,3,1). */
body .sjb-page .sjb-listing a.sjb_view_more_btn,
body .sjb-page .sjb-listing a.sjb_view_less_btn,
body .sjb-page .sjb-listing a.sjb_view_more_btn:hover,
body .sjb-page .sjb-listing a.sjb_view_less_btn:hover {
	color: var(--mnx-info) !important;
}

/* Product tab labels and SKU render at #999999 (2.85:1). */
.wc-tabs a,
a.tab-description,
a.tab-additional_information,
a.tab-reviews,
span.sku,
.sku_wrapper,
.sku_wrapper span {
	color: var(--mnx-muted) !important;
}

/* The required-field asterisk is pure red on white (4.00:1) and on #f6f6f6
 * (3.70:1). It carries meaning, so it must meet contrast. */
abbr.required,
span.required {
	color: var(--mnx-sale) !important;
	text-decoration: none;
}

/* Tag links, coupon toggle, and other #0099cc link text.
 *
 * Text links only. The notice rules used to say `.woocommerce-info a`, which
 * also caught BUTTONS printed inside notices: "Browse products" on an empty
 * Downloads page went teal on the accent fill, 1.01:1 (A11yInspect, signed-in
 * stage, 2026-09-21), and "View cart" in the add-to-cart message is the same
 * markup. Buttons get white instead. */
a[rel="tag"],
.showcoupon,
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button),
.woocommerce-error a:not(.button) {
	color: var(--mnx-link) !important;
}

.woocommerce-info a.button,
.woocommerce-message a.button,
.woocommerce-error a.button {
	color: #ffffff !important;
}

/* Stock warnings and cart totals rendered in pure red. */
.stock.out-of-stock,
.stock.in-stock,
.cart-subtotal .woocommerce-Price-amount,
.order-total .woocommerce-Price-amount {
	color: var(--mnx-sale) !important;
}

/* Payment-method descriptions and other #999999 helper copy. */
.payment_box p,
.payment_box,
.woocommerce-privacy-policy-text,
.form-row .description {
	color: var(--mnx-muted) !important;
}

/* Elementor text blocks carrying the old #7a7a7a body grey. Scoped to text and
 * paragraph widgets so heading/button widgets keep their own colours. */
.elementor-widget-text-editor > .elementor-widget-container,
.elementor-widget-text-editor > .elementor-widget-container p,
.elementor-widget-text-editor > .elementor-widget-container b,
.elementor-widget-theme-post-content > .elementor-widget-container p {
	color: var(--mnx-muted) !important;
}

/* Elementor's global "Primary" colour, on heading widgets that never set one.
 *
 * The Elementor kit on this site was never customised, so it still carries the
 * factory defaults, and `--e-global-color-primary` is Elementor's own sky blue
 * #6EC1E4. The kit stylesheet paints every un-styled heading widget with it:
 * 2.01:1 on white, which is A11yInspect's 12-issue 1.4.3 find on /terms/.
 *
 * Redefining the VARIABLE on the heading itself, rather than setting `color`,
 * is what makes this safe. A heading that sets its own colour keeps it: its
 * Elementor rule assigns a literal, not this variable, so nothing here reaches
 * it and no `!important` is needed to win a fight this does not pick. Only
 * headings that actually fall through to the global default change, which is
 * exactly the failing set. Everything else the global primary paints elsewhere
 * (backgrounds, borders, other widget types) is untouched, because the
 * redefinition is scoped to the heading element.
 *
 * Verified against all 38 pages in page-sitemap.xml: /terms/ is the ONLY page
 * with default-coloured heading widgets, so today this moves 12 headings and
 * nothing else. It stays site-wide anyway, so the next page built without a
 * colour set is born passing instead of joining the backlog.
 */
.elementor-widget-heading .elementor-heading-title {
	--e-global-color-primary: var(--mnx-link);
}