/**
 * Accessibility overrides for IPHCA theme.
 * Loaded after screen.css so it can override link styling.
 */

/* Visually hidden text — used by screen readers only */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	border: 0;
	word-wrap: normal !important;
	white-space: nowrap;
}

/* Skip link — visually hidden until keyboard-focused */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #ffffff;
	color: #0a3a52;
	font-weight: 700;
	text-decoration: underline;
	border: 2px solid #0a3a52;
	border-radius: 0 0 4px 0;
}

.skip-link:focus,
.skip-link:focus-visible {
	position: absolute;
	clip: auto;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	overflow: visible;
	/* gov.uk-style focus ring: dark navy inner + brand yellow outer.
	   Yellow alone fails contrast on white; the dark inner edge fixes
	   that, and the yellow outer ring keeps it visible on dark
	   backgrounds. Outline draws on top of box-shadow, so the navy
	   sits next to the element and the yellow shows beyond it. */
	outline: 3px solid #33346e;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #fec235;
}

/* Visible focus indicator for keyboard users on every interactive element.
   Uses :focus-visible so mouse clicks don't show a ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:focus-visible {
	/* gov.uk-style focus ring — see .skip-link comment above. */
	outline: 3px solid #33346e;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #fec235;
}

/* Make focus on the main landmark non-visible since we set tabindex="-1" purely
   so the skip-link can move focus into it. */
main#content:focus,
main#content:focus-visible {
	outline: none;
}

/* Inline links inside content modules need a non-colour visual cue (underline).
   Theme global removes underlines, so re-enable them inside BB rich-text/text blocks
   and the_content output, but NOT on buttons, nav items, icons. */
.fl-rich-text a,
.fl-module-rich-text a,
.fl-module-text a,
.entry-content a,
.fl-post-content a,
.post-content a,
article .fl-rich-text a,
article .entry-content a {
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

/* Don't underline image-only links inside content (e.g. cards with photo + text below) */
.fl-rich-text a:has(> img:only-child),
.fl-module-rich-text a:has(> img:only-child),
.entry-content a:has(> img:only-child) {
	text-decoration: none;
}

/* Sidebar section label — was an <h3> before, now a <p> for correct
   document outline. Replicates the original h3 styling from .fl-module-heading
   so the visual is unchanged. */
.fl-module-heading .sidebar-section-label {
	font-weight: 300;
	margin-bottom: 20px;
	color: #33346e;
	font-size: 24px;
	line-height: 1.2;
}

/* Eyebrow / kicker text — BB Heading modules whose `tag` was demoted from
   h2/h3 to p so they don't appear in the document outline above the page H1.
   BB still emits the same `.fl-heading` class regardless of element, so
   replicate the original h2 styling here. */
.fl-module-heading p.fl-heading,
.fl-module-heading div.fl-heading,
.fl-module-heading span.fl-heading {
	display: block;
	font-weight: 300;
	margin-bottom: 20px;
	color: #33346e;
	font-size: 25px;
	line-height: 1.2;
}

/* Don't underline buttons or icon-only links rendered inside rich text */
.fl-rich-text a.fl-button,
.fl-rich-text a.button,
.entry-content a.fl-button,
.entry-content a.button,
.fl-rich-text a:has(> i.fas:only-child),
.fl-rich-text a:has(> i.far:only-child),
.fl-rich-text a:has(> svg:only-child) {
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Inline opacity floor for body text.
 * Editors sometimes apply `style="opacity: 0.6"` (or lower) on faded
 * footer / disclaimer / sidebar paragraphs. Multiplying brand navy
 * (#33346e) by 0.6 against the page background lands at ~3.4:1 — fails
 * WCAG 1.4.3 (4.5:1). Bumping the floor to 0.85 preserves the faded
 * design intent while passing AA (~5.7:1). Targeted at <p> inline
 * styles inside rich-text blocks so non-text decorative opacity (e.g.
 * hero overlays, BB row dividers) is untouched. */
.fl-rich-text p[style*="opacity: 0.6"],
.fl-rich-text p[style*="opacity:0.6"],
.fl-rich-text p[style*="opacity: 0.5"],
.fl-rich-text p[style*="opacity:0.5"],
.fl-rich-text p[style*="opacity: 0.4"],
.fl-rich-text p[style*="opacity:0.4"],
.fl-rich-text p[style*="opacity: 0.3"],
.fl-rich-text p[style*="opacity:0.3"],
.fl-module-rich-text p[style*="opacity: 0.6"],
.fl-module-rich-text p[style*="opacity:0.6"] {
	opacity: 0.85 !important;
}

/* ---------------------------------------------------------------------
 * BB button default-colour override.
 * Beaver Builder's default `.fl-button` background is #fafafa (set in
 * the plugin's button-defaults.css). When an editor sets the text
 * colour to white but doesn't explicitly set a background, the button
 * renders white-on-#fafafa = ~1.04:1 (invisible). Force a brand-navy
 * default so unconfigured buttons stay readable. Editors who set their
 * own bg via the BB UI override this rule with inline styles or
 * higher-specificity selectors. */
.fl-builder-content a.fl-button:not([style*="background"]) {
	background-color: #33346e;
	color: #ffffff;
}
.fl-builder-content a.fl-button:not([style*="background"]):hover {
	background-color: #006d8c;
}

/* ---------------------------------------------------------------------
 * Gravity Forms submit button — class-naming changed from
 * `.gform_wrapper .gform_footer` (underscored) to `.gform-wrapper
 * .gform-footer` (hyphenated) in GF 2.5+. Theme SCSS only targets the
 * underscored form so newer forms render with the GF default
 * #efefef background — combined with white text from the inline
 * `gform_button` class, that's 1.14:1 (invisible). Match both
 * conventions and the modern `.gform_button.button` token. */
.gform_button.button,
.gform-button,
.gform-footer input[type="submit"],
.gform_footer input[type="submit"] {
	background-color: #33346e !important;
	color: #ffffff !important;
	border: 0;
}
.gform_button.button:hover,
.gform-button:hover,
.gform-footer input[type="submit"]:hover,
.gform_footer input[type="submit"]:hover {
	background-color: #006d8c !important;
}

/* ---------------------------------------------------------------------
 * Search results & blog pagination — `.page-numbers` links rendered
 * white-on-#f1f1f1 (1.12:1, invisible) outside `.fl-builder-pagination`
 * (which the theme styles separately). Force brand-navy bg + white
 * text so they're readable everywhere. */
.search-results .page-numbers,
.archive .page-numbers,
.blog .page-numbers,
nav.pagination .page-numbers,
.nav-links .page-numbers {
	background-color: #33346e;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 6px;
	padding: 6px 12px;
	margin: 0 2px;
	display: inline-block;
	text-decoration: none !important;
}
.search-results .page-numbers:hover,
.archive .page-numbers:hover,
.blog .page-numbers:hover,
nav.pagination .page-numbers:hover,
.nav-links .page-numbers:hover,
.search-results .page-numbers.current,
.archive .page-numbers.current,
.blog .page-numbers.current,
nav.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background-color: #006d8c;
}

/* ---------------------------------------------------------------------
 * Sidebar CTA — text + link sit on a 15%-blue tinted background.
 * Brand blue `#006d8c` on `#cfe1e7` reads at 4.36:1 — JUST below the
 * 4.5:1 threshold. Bump CTA links to brand navy and add underline so
 * they pass both 1.4.3 (Contrast Minimum) and 1.4.1 (Use of Color —
 * link distinguishable beyond hue). */
.search-results .sidebar-cta a,
.fl-module-sidebar .sidebar-cta a,
.secondary-sidebar .sidebar-cta a {
	color: #33346e !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

/* Search & Filter Pro field headings: rendered as <h2> for a correct outline
   (includes/markup-fixes.php) but styled as the original <h4>. */
.searchandfilter h2.iphca-sf-heading {
  font-size: 16px;
  line-height: 16px;
  color: #33346e;
  padding-top: 5px;
  padding-bottom: 10px;
}