/*
 * ada-css.css — ADA / WCAG colour overrides that must outrank another theme.
 *
 * WHY THIS FILE EXISTS
 * The mf_* components (streamlined hero, callouts, split content, large card,
 * buttons) are not styled by this theme. They come from a separate child theme:
 *
 *   /wp-content/themes/mf-theme-child/frontend-apps/drop-in-vue/public/build/
 *     assets/main-<hash>.css
 *
 * That file is enqueued after bootstrap.css, so anything we write there loses on
 * source order no matter how specific it is. This file is enqueued at priority
 * 999 so it lands after the child theme, which means these rules win normally —
 * matching specificity is enough and !important is only used where the target
 * itself is hard to outrank.
 *
 * Do not fold these rules back into bootstrap.css. They will silently stop
 * working if you do.
 *
 * Palette: Dark blue #003B4C · Blue #6BA4B8 · Mid blue #A6C8D4 · Light blue
 * #CCDEE5 · Green #00A87E
 */

/* --------------------------------------------------------------------------
   Buttons — mf-theme-child paints these with --color-primary-teal (#00A87E),
   which is white-on-green at 3.04:1 and fails AA. Six instances on the home
   page alone, including the hero CTA.
   Rest  : white on #003B4C  = 12.14:1
   Hover : #003B4C on #A6C8D4 = 6.84:1
   -------------------------------------------------------------------------- */
.mf_button,
.mf_perspectivesButton {
	background-color: #003b4c;
	color: #ffffff;
}

/* The child theme sets `.mf_button:hover, .mf_button:focus { color: white }`.
   Left alone that would put white on the Mid blue hover — 1.77:1 — so the text
   colour has to be restated here, not just the background. */
.mf_button:hover,
.mf_button:focus,
.mf_perspectivesButton:hover,
.mf_perspectivesButton:focus {
	background-color: #a6c8d4;
	color: #003b4c;
}

/* The arrow glyph on mf_button is drawn with border colour, so it needs to flip
   with the text or it disappears against the Mid blue hover. */
.mf_button:hover::after,
.mf_button:focus::after {
	border-color: #003b4c;
	color: #003b4c;
}

/* --------------------------------------------------------------------------
   What We Do / Industry Expertise card headings.
   bootstrap.css already sets these to dark blue, but the child theme re-paints
   them green on the home page only, via `body.home .wedo .bg-white h3`, at
   equal specificity and later source order. 3.04:1 -> 12.14:1.
   -------------------------------------------------------------------------- */
body.home .wedo .bg-white h3,
body.home .wedo a:hover .bg-white h3 {
	color: #003b4c;
}

/* Hover/focus on the home page cards.
   The child theme turns the heading AND the paragraph white when the grid
   column is hovered:

     body.home .wedo-blocks .col-md-6:hover .bg-white h3,
     body.home .wedo-blocks .col-md-6:hover .bg-white p { color: white }

   That hooks :hover on the column (0,5,2) rather than on the link, which
   outranks a rule written against the <a> — so the whole card's text turned
   white on the Mid blue hover, 1.77:1, and effectively vanished. Mirroring the
   selector exactly gives equal specificity, and this file loads later.
   #003B4C on #A6C8D4 = 6.84:1. */
body.home .wedo-blocks .col-md-6:hover .bg-white h3,
body.home .wedo-blocks .col-md-6:hover .bg-white p,
body.home .wedo-blocks .col-md-6:focus .bg-white h3,
body.home .wedo-blocks .col-md-6:focus .bg-white p {
	color: #003b4c;
}

/* --------------------------------------------------------------------------
   Pagination current page — also green in the child theme.
   white on #003B4C = 12.14:1
   -------------------------------------------------------------------------- */
.page-numbers.current {
	background-color: #003b4c;
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   Disabled secondary buttons kept the old green while the enabled state moved
   to dark blue. Disabled controls are exempt from WCAG 1.4.3, so this is a
   consistency fix rather than a contrast one.
   -------------------------------------------------------------------------- */
.btn-secondary.disabled,
.btn-secondary:disabled {
	background-color: #003b4c;
	border-color: #003b4c;
	color: #ffffff;
}