/*
 * Indium Accessibility Remediation
 * Presentation-layer fixes for WCAG 2.1 AA + WCAG 2.2 additions.
 *
 * Custom properties are emitted by PHP from the plugin settings; the values
 * below are only fallbacks so the file still behaves if it is loaded alone.
 */

:root {
	--indium-a11y-text: #5b6172;
	--indium-a11y-accent: #2a821f;
	--indium-a11y-border: #767676;
	--indium-a11y-focus: #0b3d91;
	--indium-a11y-focus-halo: #ffffff;
	--indium-a11y-focus-width: 3px;
	--indium-a11y-sticky-offset: 120px;
}

/* ---------------------------------------------------------------------------
 * 2.4.1 Bypass Blocks — skip links
 * ------------------------------------------------------------------------ */

.indium-a11y-skip-links {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2147483646;
}

.indium-a11y-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.indium-a11y-skip-link:focus,
.indium-a11y-skip-link:focus-visible,
.skip-link:focus,
.skip-link:focus-visible {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2147483647;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
	background: #111827;
	border-radius: 4px;
	text-decoration: underline;
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--indium-a11y-focus);
}

/* The skip target must not disappear behind the sticky header. */
[id]:target,
#indium-main-content,
.indium-a11y-main {
	scroll-margin-top: var(--indium-a11y-sticky-offset);
}

/* 2.4.11 Focus Not Obscured (Minimum) — WCAG 2.2
 *
 * The header is sticky, so scrolling a control into view with the keyboard
 * parked it underneath the header often enough to count as obscured. Reserving
 * the header's height at the top of every scroll port fixes it for tabbing,
 * in-page links and programmatic focus alike. */
html {
	scroll-padding-top: var(--indium-a11y-sticky-offset);
}

a,
button,
input,
select,
textarea,
summary,
[tabindex],
[role="button"],
[role="link"],
[role="tab"],
[role="menuitem"] {
	scroll-margin-top: var(--indium-a11y-sticky-offset);
}

/* Programmatic focus on a landmark should not draw a stray ring. */
[tabindex="-1"]:focus:not(:focus-visible) {
	outline: none;
}

/* ---------------------------------------------------------------------------
 * 2.4.7 Focus Visible / 2.4.11 Focus Not Obscured / 2.4.13 Focus Appearance
 *
 * A two-tone ring (light halo + dark outline) stays visible on light and dark
 * backgrounds alike, which the theme's default outline did not.
 * ------------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
iframe:focus-visible,
[tabindex]:focus-visible,
[contenteditable="true"]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="switch"]:focus-visible,
[role="tabpanel"]:focus-visible {
	outline: var(--indium-a11y-focus-width) solid var(--indium-a11y-focus) !important;
	outline-offset: var(--indium-a11y-focus-width) !important;
	box-shadow: 0 0 0 var(--indium-a11y-focus-width) var(--indium-a11y-focus-halo) !important;
	border-radius: 3px;
}

/* Keep the ring drawable — several Elementor widgets clip their children. */
.elementor-widget-container,
.elementor-social-icons-wrapper,
.elementor-icon-list-items,
.e-n-tabs-heading {
	overflow: visible;
}

@media (forced-colors: active) {
	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	[tabindex]:focus-visible,
	[role="button"]:focus-visible,
	[role="tab"]:focus-visible {
		outline: 3px solid Highlight !important;
		outline-offset: 2px !important;
	}
}

/* ---------------------------------------------------------------------------
 * 1.4.3 Contrast (Minimum)
 *
 * Nothing is declared here on purpose.
 *
 * This block used to force `--indium-a11y-text` (a dark grey chosen against
 * white) onto every text-editor paragraph, icon-box description and post-content
 * list item on the site. A rule on the <p> beats a colour inherited from the
 * widget wrapper no matter how specific that wrapper rule is, so it also
 * repainted the copy the theme deliberately paints white — the "Standard
 * Warning and Disclaimer" paragraph on the home page, which sits on #131c2e,
 * dropped from 17:1 to 2.8:1 and became unreadable.
 *
 * Contrast is a property of a *pair*, and only the browser knows which pair a
 * given element actually renders. The runtime layer measures each text-bearing
 * element against its resolved background and corrects only the pairs that
 * fail, in whichever direction that background requires. A stylesheet cannot
 * make that judgement, so it no longer tries.
 * ------------------------------------------------------------------------ */

/* No blanket ::placeholder colour.
 *
 * A fixed light-theme grey here fails on the dark form sections — the audit
 * caught it on the contact and advisory textareas. The field labels are visible
 * (below), so the placeholder is no longer load-bearing; leaving the theme's
 * own value alone is both safer and sufficient. */

/* ---------------------------------------------------------------------------
 * 1.4.11 Non-text Contrast — form control boundaries
 * ------------------------------------------------------------------------ */

.elementor-field-textual,
.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group input[type="tel"],
.elementor-field-group input[type="url"],
.elementor-field-group input[type="number"],
.elementor-field-group input[type="date"],
.elementor-field-group select,
.elementor-field-group textarea,
.wp-block-search__input,
.search-form input[type="search"] {
	border: 1px solid var(--indium-a11y-border) !important;
}

.elementor-field-textual:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus {
	border-color: var(--indium-a11y-focus) !important;
}

/* ---------------------------------------------------------------------------
 * 3.3.2 Labels or Instructions — reveal the labels Elementor hides
 * ------------------------------------------------------------------------ */

body.indium-a11y-labels .indium-a11y-visible-label,
body.indium-a11y-labels .elementor-field-group > label.elementor-field-label {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 0.35em !important;
	padding: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
	display: block !important;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	border: 0;
	/* Inherit the section's own text colour. Forcing the light-theme grey here
	 * put dark text on the dark form panel — 2.6:1 in the audit. */
	color: inherit;
}

/* The word "(required)" is the indicator; colour must not be doing the work
 * (WCAG 1.4.1), and a fixed red fails against the dark form panel (2.6:1). */
.indium-a11y-required-hint {
	font-weight: 400;
	color: inherit;
}

/* 3.3.1 Error Identification — make Elementor's messages easier to spot.
 *
 * Weight and underline rather than a fixed red: colour must not be the only
 * cue (WCAG 1.4.1), and any hard-coded value risks failing on the dark form
 * panels the way the "(required)" hint did (2.6:1 in the Build #2 audit). */
.elementor-message-danger,
.elementor-field-group .elementor-error-message,
.indium-a11y-field-error {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------------------
 * 1.4.1 Use of Colour — links in body copy need a non-colour cue
 * ------------------------------------------------------------------------ */

body.indium-a11y-underline .elementor-widget-text-editor a:not(.elementor-button):not(.elementor-icon),
body.indium-a11y-underline .elementor-widget-theme-post-content a:not(.elementor-button):not(.elementor-icon),
body.indium-a11y-underline .entry-content a:not(.elementor-button):not(.elementor-icon) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: max(1px, 0.06em);
}

/* ---------------------------------------------------------------------------
 * 2.5.8 Target Size (Minimum) — WCAG 2.2
 * ------------------------------------------------------------------------ */

body.indium-a11y-targets a.elementor-social-icon,
body.indium-a11y-targets .elementor-menu-toggle,
body.indium-a11y-targets .e-n-tab-title,
body.indium-a11y-targets .elementor-button {
	min-width: 24px;
	min-height: 24px;
}

body.indium-a11y-targets a.elementor-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Social icons with no configured destination are inert; make that visible
 * rather than leaving a control that looks clickable but is not. */
a.elementor-social-icon[data-indium-a11y="inert-social"] {
	cursor: default;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 2.2.2 Pause, Stop, Hide — control for the autoplaying background video
 * ------------------------------------------------------------------------ */

/* The control sits over video, so it needs one fully opaque fill of its own —
 * a translucent chip over moving footage has no measurable contrast at all.
 *
 * That fill is the brand accent, not black. The previous near-black pill also
 * repeated its own background on the inner <span>, which painted a second
 * black block behind the label; the button is already opaque, so a checker
 * resolves the label against it without the extra layer. Both are gone. */
.indium-a11y-media-toggle {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2147483000;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-width: 44px;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	color: #ffffff;
	background-color: var(--indium-a11y-accent);
	border: 2px solid #ffffff;
	border-radius: 999px;
	cursor: pointer;
}

/* Declared on the text element so the label's own colour is explicit, but with
 * no background of its own to draw. */
.indium-a11y-media-toggle > span {
	color: #ffffff;
	background: none;
}

/* Darkening the accent on hover only ever raises the contrast with the white
 * label, so the hover state cannot fail while the resting state passes. */
.indium-a11y-media-toggle:hover,
.indium-a11y-media-toggle:focus-visible {
	filter: brightness(0.85);
}

.indium-a11y-media-toggle svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex: none;
}

/* ---------------------------------------------------------------------------
 * 2.3.3 Animation from Interactions / 2.2.2
 * ------------------------------------------------------------------------ */

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

	body.indium-a11y-motion .elementor-background-video-container,
	body.indium-a11y-motion .elementor-background-video-embed {
		display: none !important;
	}

	body.indium-a11y-motion .elementor-animation-pop:hover,
	body.indium-a11y-motion .elementor-animation-grow:hover {
		transform: none !important;
	}

	/* Elementor holds every entrance-animated element at visibility:hidden
	 * until its animation runs. Collapsing animations to nothing can leave the
	 * element parked in that state, so a reduced-motion visitor would be shown
	 * an empty section instead of the content. */
	body.indium-a11y-motion .elementor-invisible {
		visibility: visible !important;
		opacity: 1 !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * 1.4.12 Text Spacing / 1.4.10 Reflow
 * ------------------------------------------------------------------------ */

body.indium-a11y-spacing p,
body.indium-a11y-spacing li,
body.indium-a11y-spacing h1,
body.indium-a11y-spacing h2,
body.indium-a11y-spacing h3,
body.indium-a11y-spacing h4,
body.indium-a11y-spacing h5,
body.indium-a11y-spacing h6,
body.indium-a11y-spacing .elementor-heading-title,
body.indium-a11y-spacing .elementor-button-text {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

body.indium-a11y-spacing .elementor-widget-text-editor,
body.indium-a11y-spacing .elementor-widget-heading,
body.indium-a11y-spacing .elementor-widget-icon-box {
	overflow: visible;
	max-height: none;
}

/* 1.4.10 — wide compliance tables must scroll rather than force page zoom. */
.indium-a11y-table-scroll {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

.indium-a11y-table-scroll:focus-visible {
	outline: var(--indium-a11y-focus-width) solid var(--indium-a11y-focus) !important;
	outline-offset: 2px !important;
}

/* Restore table semantics if a stylesheet re-boxes the element. */
.indium-a11y-table-scroll > table {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

.indium-a11y-table-scroll th {
	text-align: left;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Utility
 * ------------------------------------------------------------------------ */

.indium-a11y-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Live region used for form status announcements. */
.indium-a11y-live {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}