/*
 * MFN Accessibility -- site-wide WCAG 2.2 AA overrides.
 *
 * Loaded at wp_enqueue_scripts priority 9999 so it wins over the theme
 * stylesheet, the wp_global_styles inline CSS and every third-party plugin
 * without needing !important on anything that is not a genuine override of an
 * inline style.
 *
 * Contrast ratios quoted below are measured against the exact backgrounds the
 * audit found these elements on.
 */

:root {
	/* Accessible counterparts of the four brand colours. The brand hues are
	   preserved -- only the pairings change. */
	--mfn-navy: #1c3041;          /* unchanged brand navy   */
	--mfn-teal: #34c1d0;          /* unchanged brand teal   */
	--mfn-teal-deep: #227d87;     /* brand teal deepened so a WHITE label reaches 4.83:1 */
	--mfn-teal-text: #0d7a86;     /* teal usable as TEXT on white (5.07:1) */
	--mfn-brown-text: #8a5f45;    /* brand brown #95684d deepened just enough for #dcf1f8 (4.73:1) */
	--mfn-focus: #b3310a;         /* high-contrast focus ring, distinct from brand */
}

/* =========================================================================
   1.4.3 Contrast (Minimum) -- AA
   ========================================================================= */

/* ---- 1.1 Core block buttons ------------------------------------------- */
/* Global styles paint every button with brand teal #34c1d0 and a white label,
   which is 2.17:1 -- and white fails on this teal at EVERY text size, since
   even the relaxed large-text floor is 3:1.
   The white label is kept and the teal is deepened to #227d87 (4.83:1), which
   holds the brand hue. Scoped so that buttons which explicitly set their own
   background or text colour are left completely alone. */
.wp-block-button__link:not([class*="-background-color"]):not(.has-background),
.wp-element-button:not([class*="-background-color"]):not(.has-background),
button.wp-element-button:not([class*="-background-color"]):not(.has-background),
input[type="submit"].wp-element-button:not([class*="-background-color"]):not(.has-background) {
	background-color: var(--mfn-teal-deep);
	color: #ffffff;
}

/* Buttons that name the teal preset explicitly. WordPress emits preset
   background classes with !important, which is the only reason one is needed
   to answer it here. */
.wp-block-button__link.has-custom-34-c-1-d-0-background-color,
.wp-element-button.has-custom-34-c-1-d-0-background-color {
	background-color: var(--mfn-teal-deep) !important;
	color: #ffffff;
}

/* Hover/focus keep the same accessible pairing, a shade deeper. */
.wp-block-button__link:not([class*="-background-color"]):not(.has-background):hover,
.wp-block-button__link:not([class*="-background-color"]):not(.has-background):focus,
.wp-element-button:not([class*="-background-color"]):not(.has-background):hover,
.wp-element-button:not([class*="-background-color"]):not(.has-background):focus,
.wp-block-button__link.has-custom-34-c-1-d-0-background-color:hover,
.wp-block-button__link.has-custom-34-c-1-d-0-background-color:focus {
	background-color: #1c6a73 !important;
	color: #ffffff;
}

/* ---- 1.2 Brown body text on the pale-teal band ------------------------ */
/* #95684d on #dcf1f8 is 4.12:1 (needs 4.5). Brand brown is kept everywhere it
   already passes; this shade is only slightly deeper (4.73:1).
   WordPress emits preset colour classes as
   `.has-custom-95684-d-color{color:var(--...) !important}` -- core's own
   !important is the only reason one is needed here. */
/*.has-custom-95684-d-color,
.has-custom-95684-d-color.has-text-color {*/
h3.has-custom-95684-d-color.has-text-color {
	color: var(--mfn-brown-text) !important;
}

/* ---- 1.3 Brand teal used as TEXT -------------------------------------- */
/* Teal on white is 1.87:1 and is unreadable as a text/link colour. Only the
   text usage is redirected; teal remains the background colour everywhere. */
.has-custom-34-c-1-d-0-color:not(.has-background) {
	color: var(--mfn-teal-text) !important;
}

/* ---- 1.4 Membership tier tags (front page pricing table) --------------- */
/* Defined in the Front Page template as `.mssa-table .tag-full`
   (white on brand teal, 2.17:1). The white label is kept and the teal
   deepened, matching the buttons. Matched at a higher specificity here. */
.mssa-table .tier-tag.tag-full,
.mssa-table .tag-full {
	background-color: var(--mfn-teal-deep);
	color: #ffffff;
}

/* Included / not-included markers in the same table. The green tick is
   #82b441 on white (2.45:1); the cross already passes at 5.44:1. */
.mssa-table .check::before {
	color: #4e7a1b;
}

/* ---- 1.5 Post excerpt "Know More" links (search + archive) ------------- */
/* Painted by the per-block rule
   `.wp-elements-N a:where(:not(.wp-element-button)){color:...--primary}`,
   which resolves to #df6b3a -- 2.72:1 on the #e8e8e8 card. That selector is
   0,1,1, so this one is written to outrank it. */
.wp-block-post-excerpt .wp-block-post-excerpt__more-link,
.wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link,
[class*="wp-elements-"] a.wp-block-post-excerpt__more-link {
	color: #a8440f;
}

/* ---- 1.5b Comment form submit ----------------------------------------- */
/* The comment form's submit button is painted from --wp--preset--color--primary
   (#df6b3a). White on it is 3.33:1 and navy on it is 4.06:1, so neither text
   colour can rescue that background -- it is repainted in brand navy instead,
   matching every other submit control on the site (12.63:1). */
.wp-block-post-comments-form input[type="submit"],
.comment-form input[type="submit"],
#commentform input[type="submit"],
input#submit.wp-element-button {
	background-color: var(--mfn-navy);
	border-color: var(--mfn-navy);
	color: #ffffff;
}

.wp-block-post-comments-form input[type="submit"]:hover,
.wp-block-post-comments-form input[type="submit"]:focus,
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus,
#commentform input[type="submit"]:hover,
#commentform input[type="submit"]:focus,
input#submit.wp-element-button:hover,
input#submit.wp-element-button:focus {
	background-color: #142433;
	border-color: #142433;
	color: #ffffff;
}

/* ---- 1.6 Search & Filter submit button -------------------------------- */
/* The Additional CSS saved in Styles paints this white on brand teal
   (2.17:1): `.searchandfilter input[type="Search"]`. Same treatment as the
   other teal buttons -- white label kept, teal deepened. */
.searchandfilter input[type="Search"],
.searchandfilter input[type="search"],
.searchandfilter input[type="submit"] {
	background-color: var(--mfn-teal-deep);
	color: #ffffff;
}

.searchandfilter input[type="Search"]:hover,
.searchandfilter input[type="Search"]:focus,
.searchandfilter input[type="search"]:hover,
.searchandfilter input[type="search"]:focus,
.searchandfilter input[type="submit"]:hover,
.searchandfilter input[type="submit"]:focus {
	background-color: #1c6a73;
	color: #ffffff;
}

/* ---- 1.7 MemberPress login / account submit buttons ------------------- */
/* MemberPress ships #wp-submit as white on #949494 (3.03:1), and its account form
   ("Save Profile") inherits the theme's orange submit colour (3.33:1). Repainting
   in brand navy gives 12.63:1. The `input[type="submit"].mepr-*` selectors are
   needed because the theme's own `input[type="submit"]` rule (0,1,1) outranks a
   bare `.mepr-submit` (0,1,0). Done here rather than in the MemberPress plugin
   so plugin updates cannot undo it. */
#wp-submit,
.mepr-submit,
input[type="submit"].mepr-submit,
input[type="submit"].mepr-share-button,
button.mepr-submit,
.mp-form-submit input[type="submit"],
.mepr-share-button,
input[type="submit"].button-primary {
	background-color: var(--mfn-navy);
	border-color: var(--mfn-navy);
	color: #ffffff;
}

#wp-submit:hover,
#wp-submit:focus,
input[type="submit"].mepr-submit:hover,
input[type="submit"].mepr-submit:focus,
input[type="submit"].mepr-share-button:hover,
input[type="submit"].mepr-share-button:focus,
.mepr-submit:hover,
.mepr-submit:focus,
.mp-form-submit input[type="submit"]:hover,
.mp-form-submit input[type="submit"]:focus,
input[type="submit"].button-primary:hover,
input[type="submit"].button-primary:focus {
	background-color: #142433;
	border-color: #142433;
	color: #ffffff;
}

/* ---- 1.8 Placeholder text -------------------------------------------- */
/* Browser default placeholder grey is around 3:1. */
::placeholder {
	color: #5f6b78;
	opacity: 1;
}

/* =========================================================================
   2.4.7 Focus Visible + 1.4.11 Non-text Contrast + 2.4.11 Focus Not Obscured
   ========================================================================= */

/* A single, unmistakable focus indicator for every interactive element.
   3px solid ring plus a 1px white spacer so the ring stays visible against
   both the navy and the teal surfaces. The ring colour #b3310a is 5.38:1 on
   white and 3.4:1 on brand teal, clearing the 3:1 required by 1.4.11. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[contenteditable="true"]:focus-visible {
	outline: 3px solid var(--mfn-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 1px #ffffff;
	border-radius: 2px;
}

/* Browsers that do not support :focus-visible still get a ring. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
	outline-color: var(--mfn-focus);
}

/* Never let a stylesheet remove the indicator entirely. */
*:focus-visible {
	outline-style: solid;
}

/* 2.4.11 Focus Not Obscured (Minimum): the sticky admin bar and any sticky
   site header can cover a focused control that is scrolled to. A scroll
   margin keeps the focused element clear of them. */
:target,
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
	scroll-margin-top: 120px;
	scroll-margin-bottom: 40px;
}

/* =========================================================================
   2.4.1 Bypass Blocks -- skip link
   ========================================================================= */

.mfn-skip-link,
.skip-link.screen-reader-text {
	background-color: var(--mfn-navy);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	padding: 14px 22px;
	text-decoration: underline;
	z-index: 100000;
}

.mfn-skip-link:focus,
.skip-link.screen-reader-text:focus {
	background-color: var(--mfn-navy);
	clip: auto !important;
	clip-path: none;
	color: #ffffff;
	display: block;
	height: auto;
	left: 6px;
	top: 6px;
	position: fixed;
	width: auto;
	outline: 3px solid var(--mfn-focus);
	outline-offset: 2px;
}

/* =========================================================================
   2.5.8 Target Size (Minimum) -- AA, new in WCAG 2.2
   ========================================================================= */

/* Every pointer target must be at least 24x24 CSS px, or have 24px of
   clearance. Applied to the controls the audit found below that threshold.
   Inline links in running prose are exempt under the criterion, so text links
   inside paragraphs are deliberately not touched. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
summary,
[role="button"],
.wp-block-button__link,
.wp-element-button {
	min-height: 24px;
	min-width: 24px;
}

/* Checkboxes and radios are frequently 13px by default. */
input[type="checkbox"],
input[type="radio"] {
	min-height: 20px;
	min-width: 20px;
	/* 20px control + 2px margin each side = 24px target. */
	margin: 2px;
}

/* Icon-only controls (close buttons, paginators, social icons). */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open,
.wp-block-social-link-anchor,
.wp-block-query-pagination a,
.wp-block-comments-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	min-width: 24px;
}

/* =========================================================================
   1.4.4 Resize Text + 1.4.10 Reflow + 1.4.12 Text Spacing
   ========================================================================= */

/* 1.4.10: nothing may require two-dimensional scrolling at 320px. Wide data
   tables are allowed to scroll horizontally in their own container, which is
   the documented exception, and are made keyboard-scrollable below. */
.mfn-table-scroll,
.mssa-table-wrap {
	overflow-x: auto;
	max-width: 100%;
}

/* 1.4.12: containers must not clip text when users override spacing. */
.wp-block-button__link,
.wp-element-button,
.tier-tag {
	height: auto;
	overflow-wrap: break-word;
}

/* =========================================================================
   2.3.3 / prefers-reduced-motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.animated,
	.animated-fadeInUp {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* =========================================================================
   Utilities
   ========================================================================= */

/* Visually hidden but available to assistive technology. Matches WordPress
   core's .screen-reader-text so either class can be used. */
.mfn-sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.mfn-sr-only:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 14px 22px;
	position: fixed;
	top: 6px;
	left: 6px;
	z-index: 100000;
}

/* =========================================================================
   1.4.1 Use of Colour
   ========================================================================= */

/* Links inside running text must not rely on colour alone to be identified.
   Content links in the post body get an underline; navigation, buttons and
   blocks that are already visually distinct are excluded. */
.wp-block-post-content :is(p, li, td, th, dd, blockquote, figcaption) a:not(.wp-element-button):not(.wp-block-button__link):not([class*="wp-block-"]):not([class*="btn"]):not([class*="button"]):not([role="button"]),
.entry-content :is(p, li, td, th, dd, blockquote, figcaption) a:not(.wp-element-button):not(.wp-block-button__link):not([class*="wp-block-"]):not([class*="btn"]):not([class*="button"]):not([role="button"]) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 1.2 (cont.) "What is a shared services alliance?" label. #95684d on the
   #dcf1f8 band is 4.12:1; the same hue, darkened, is 5.62:1. Scoped to the
   paragraph on that band so nothing else using the preset is touched. */
.has-custom-dcf-1-f-8-background-color p.has-custom-95684-d-color.has-text-color {
	color: var(--mfn-brown-text) !important;
}

/* =========================================================================
   1.3.1 / 4.1.2 -- support for markup added by includes/class-mfn-a11y-markup.php
   ========================================================================= */

/* The external-link indicator appended to links that open a new tab. */
.mfn-external-indicator {
	margin-left: 0.25em;
}

p.mfn-saf-caption {
    font-weight: bold;
}