/**
 * IPHCA accessibility widget — circular trigger, popover panel, and the
 * data-iphca-a11y-* attribute selectors that change site rendering.
 *
 * Widget HTML is injected by /js/a11y-widget.js. Toggles map to
 * data-* attrs on <html>; CSS down the page does the visual work.
 *
 * Touch targets meet WCAG 2.5.5 (44x44 minimum). Motion respects
 * prefers-reduced-motion at the OS level and the in-page motion toggle.
 *
 * The widget itself is exempt from every preference it offers — toggles
 * stay visible and operable in high-contrast / invert / line-spacing /
 * readable-font modes.
 */

/* ============================================================ */
/* Wrapper + screen-reader live region                          */
/* ============================================================ */

.iphca-a11y-widget {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99998;
	font-family: inherit;
}

.iphca-a11y-sr-live {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; border: 0;
	white-space: nowrap;
}

/* ============================================================ */
/* Trigger                                                      */
/* ============================================================ */

.iphca-a11y-widget__trigger {
	position: relative;       /* anchor for the tooltip pseudo-element */
	width: 56px;
	height: 56px;
	min-width: 56px;
	min-height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #33346e;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.32);
	transition:
		transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.iphca-a11y-widget__trigger:hover {
	transform: scale(1.06);
	box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.42);
}

.iphca-a11y-widget__trigger:active {
	transform: scale(0.96);
}

.iphca-a11y-widget__trigger:focus-visible {
	outline: 3px solid #33346e;
	outline-offset: 4px;
	box-shadow: 0 0 0 10px #fec235, 0 18px 36px -8px rgba(0, 0, 0, 0.42);
}

/* Tooltip — sighted-user hint to the LEFT of the trigger, with a
   small triangle pointing RIGHT (toward the trigger).
   aria-label still drives the screen-reader name; this is purely visual. */
.iphca-a11y-widget__trigger::before {
	content: "Accessibility tools";
	position: absolute;
	top: 50%;
	right: calc(100% + 14px);
	transform: translateY(-50%) translateX(4px);
	padding: 6px 12px;
	background: #33346e;
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	white-space: nowrap;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease;
}
.iphca-a11y-widget__trigger::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(100% + 2px);
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left-color: #33346e;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
}
.iphca-a11y-widget__trigger:hover::before,
.iphca-a11y-widget__trigger:focus-visible::before {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}
.iphca-a11y-widget__trigger:hover::after,
.iphca-a11y-widget__trigger:focus-visible::after {
	opacity: 1;
}
/* Hide the tooltip while the panel is open (avoid double-labelling). */
.iphca-a11y-widget__trigger[aria-expanded="true"]::before,
.iphca-a11y-widget__trigger[aria-expanded="true"]::after {
	opacity: 0 !important;
}

/* ============================================================ */
/* Panel                                                        */
/* ============================================================ */

.iphca-a11y-widget__panel {
	/* Pinned to the viewport directly (not the widget wrapper) so its
	   position is immune to any CSS `zoom` applied to ancestors when
	   the user picks Larger / Bigger text size. */
	position: fixed;
	right: 24px;
	bottom: 92px;
	width: 340px;
	max-width: calc(100vw - 32px);
	/* `dvh` (dynamic viewport height) reflects the actual visible
	   viewport — important on mobile where browser chrome collapses
	   on scroll. Falls back to `vh` for older browsers via the
	   first declaration. */
	max-height: calc(100vh - 152px);
	max-height: calc(100dvh - 152px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #ffffff;
	color: #33346e;
	border-radius: 16px;
	box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.3);
	padding: 8px 18px 14px;
	animation: iphca-a11y-panel-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
	-webkit-overflow-scrolling: touch;
}

/* Scroll hints — small floating chips that stick to the top OR bottom
   of the visible scroll area inside the panel. Solid brand-navy
   background + white text so they pop and don't get visually lost in
   the surrounding panel content. JS toggles `is-scrollable`,
   `is-scrolled-top` and `is-scrolled-bottom` based on real scroll
   state.

   Bottom hint: shown when panel is scrollable AND user is not at the
   bottom (i.e. there's more to see below).
   Top hint: shown when panel is scrollable AND user is not at the
   top (i.e. user has scrolled down and may want to go back up). */
.iphca-a11y-widget__scroll-hint,
.iphca-a11y-widget__scroll-hint--top {
	position: sticky;
	display: none;
	width: max-content;
	padding: 5px 14px;
	background: #33346e;
	color: #ffffff;
	border: 1px solid #33346e;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(20, 19, 47, 0.28);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	pointer-events: none;
	z-index: 3;
}
.iphca-a11y-widget__scroll-hint--top {
	top: 56px; /* below the sticky header */
	margin: -8px auto 4px;
}
.iphca-a11y-widget__scroll-hint {
	bottom: 8px;
	margin: -34px auto 8px;
}
.iphca-a11y-widget__panel.is-scrollable:not(.is-scrolled-bottom) .iphca-a11y-widget__scroll-hint {
	display: block;
}
.iphca-a11y-widget__panel.is-scrollable:not(.is-scrolled-top) .iphca-a11y-widget__scroll-hint--top {
	display: block;
}

/* Sticky header inside the scrollable panel — keeps the title + close
   button visible regardless of scroll position. */
.iphca-a11y-widget__panel .iphca-a11y-widget__header {
	position: sticky;
	top: 0;
	background: #ffffff;
	z-index: 1;
}

.iphca-a11y-widget__panel[hidden] { display: none; }

@keyframes iphca-a11y-panel-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.iphca-a11y-widget__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0 12px;
	border-bottom: 1px solid #ebe9f3;
	margin-bottom: 4px;
}

.iphca-a11y-widget__header h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #33346e;
	letter-spacing: -0.01em;
	font-family: inherit;
}

/* Header button cluster: reset (refresh icon) + close (X). Both
   share the same circular icon-button style and both get a hover
   tooltip via [data-tooltip]. */
.iphca-a11y-widget__header-actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.iphca-a11y-widget__close,
.iphca-a11y-widget__reset-icon {
	position: relative;
	width: 32px;
	height: 32px;
	min-width: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	color: #4d4c63;
	transition: background-color 150ms ease, color 150ms ease;
}
.iphca-a11y-widget__close:hover,
.iphca-a11y-widget__reset-icon:hover {
	background: rgba(20, 19, 47, 0.06);
	color: #33346e;
}

/* Tooltip on hover/focus for header icon buttons. Positioned BELOW
   the button so it doesn't collide with the sticky header. Uses
   data-tooltip attribute for the label so screen readers still read
   the aria-label (avoiding double announcement). */
.iphca-a11y-widget__close[data-tooltip]::after,
.iphca-a11y-widget__reset-icon[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(-3px);
	padding: 5px 10px;
	background: #33346e;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	white-space: nowrap;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease, transform 160ms ease;
	z-index: 5;
}
.iphca-a11y-widget__close[data-tooltip]:hover::after,
.iphca-a11y-widget__close[data-tooltip]:focus-visible::after,
.iphca-a11y-widget__reset-icon[data-tooltip]:hover::after,
.iphca-a11y-widget__reset-icon[data-tooltip]:focus-visible::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.iphca-a11y-widget__close:focus-visible,
.iphca-a11y-widget__reset-icon:focus-visible {
	outline: 3px solid #33346e;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #fec235;
}

/* ============================================================ */
/* Rows                                                         */
/* ============================================================ */

/* ============================================================ */
/* Section groups                                               */
/* ============================================================ */

.iphca-a11y-group {
	padding: 4px 0 2px;
}
.iphca-a11y-group + .iphca-a11y-group {
	border-top: 1px solid #ebe9f3;
	margin-top: 4px;
	padding-top: 10px;
}

/* Section heading. Uses role="heading" aria-level="4" rather than a real
   <h4> element so the panel doesn't pollute the page's heading outline
   (the dialog is aria-modal="false", so headings inside join the page's
   document outline). Screen readers still announce these as
   "heading level 4" via the role/aria-level pair. */
.iphca-a11y-group__title {
	margin: 0 0 6px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* #5a5874 on white = 7.0:1 contrast — comfortably AAA. */
	color: #5a5874;
}

/* ============================================================ */
/* Rows                                                         */
/* ============================================================ */

.iphca-a11y-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 6px 0;
}

.iphca-a11y-row__label {
	font-size: 15px;
	font-weight: 500;
	color: #33346e;
	font-family: inherit;
}

.iphca-a11y-row--withhint {
	align-items: flex-start;
	padding: 8px 0;
}
.iphca-a11y-row--withhint .iphca-a11y-toggle {
	margin-top: 2px;
}

.iphca-a11y-row__textgroup {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.iphca-a11y-row__hint {
	font-size: 13px;
	line-height: 1.4;
	/* #4d4c63 on white = 8.5:1 — comfortably AAA. */
	color: #4d4c63;
}

.iphca-a11y-persist {
	margin: 8px 0 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.4;
	color: #5a5874;
	text-align: center;
}

.iphca-a11y-row--reset {
	padding-top: 12px;
	margin-top: 6px;
	border-top: 1px solid #ebe9f3;
	justify-content: stretch;
}

.iphca-a11y-row--about {
	padding: 8px 0 2px;
	justify-content: center;
}

.iphca-a11y-about-link {
	font-size: 13px;
	color: #4d4c63;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.iphca-a11y-about-link:hover,
.iphca-a11y-about-link:focus-visible {
	color: #33346e;
}
.iphca-a11y-about-link:focus-visible {
	outline: 2px solid #33346e;
	outline-offset: 0;
	box-shadow: 0 0 0 5px #fec235;
	border-radius: 3px;
}

/* ============================================================ */
/* Segmented buttons (text size: A / A / A)                     */
/* ============================================================ */

.iphca-a11y-row__buttons {
	display: inline-flex;
	background: rgba(20, 19, 47, 0.06);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}

.iphca-a11y-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	color: #4d4c63;
	font-family: inherit;
	font-weight: 600;
	transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
	padding: 0;
}
.iphca-a11y-btn:hover { color: #33346e; }
.iphca-a11y-btn[aria-pressed="true"] {
	background: #ffffff;
	color: #33346e;
	box-shadow: 0 1px 3px rgba(20, 19, 47, 0.15);
}
.iphca-a11y-btn:focus-visible {
	outline: 2px solid #33346e;
	outline-offset: 0;
	box-shadow: 0 0 0 5px #fec235;
}

/* ============================================================ */
/* Toggle switch                                                */
/* ============================================================ */

.iphca-a11y-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 6px;            /* generous hit area beyond the visible track */
	margin: -6px;
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}
.iphca-a11y-toggle:focus-visible {
	outline: 3px solid #33346e;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #fec235;
}

.iphca-a11y-toggle__track {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	/* #9897a6 on white = 3.07:1 — meets WCAG 1.4.11 Non-text Contrast
	   (3:1 minimum for UI components). White knob on this track gives
	   the same ratio inside the track itself. */
	background: #9897a6;
	border-radius: 999px;
	transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.iphca-a11y-toggle__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(20, 19, 47, 0.24);
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.iphca-a11y-toggle[aria-pressed="true"] .iphca-a11y-toggle__track {
	background: #33346e;
}
.iphca-a11y-toggle[aria-pressed="true"] .iphca-a11y-toggle__thumb {
	transform: translateX(20px);
}

/* ============================================================ */
/* Reset                                                        */
/* ============================================================ */

.iphca-a11y-reset {
	flex: 1;
	min-height: 38px;
	padding: 8px 16px;
	background: #ffffff;
	border: 1px solid rgba(20, 19, 47, 0.2);
	border-radius: 10px;
	color: #33346e;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, transform 100ms ease;
}
.iphca-a11y-reset:hover {
	background: rgba(20, 19, 47, 0.04);
	border-color: rgba(20, 19, 47, 0.3);
}
.iphca-a11y-reset:active { transform: scale(0.99); }
.iphca-a11y-reset:focus-visible {
	outline: 3px solid #33346e;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #fec235;
}

/* ============================================================ */
/* Self-aware reduced motion                                    */
/* ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.iphca-a11y-widget__trigger,
	.iphca-a11y-widget__panel,
	.iphca-a11y-toggle__track,
	.iphca-a11y-toggle__thumb,
	.iphca-a11y-btn,
	.iphca-a11y-reset {
		transition: none !important;
		animation: none !important;
	}
}
html[data-iphca-a11y-motion="off"] .iphca-a11y-widget__trigger,
html[data-iphca-a11y-motion="off"] .iphca-a11y-widget__panel,
html[data-iphca-a11y-motion="off"] .iphca-a11y-toggle__track,
html[data-iphca-a11y-motion="off"] .iphca-a11y-toggle__thumb,
html[data-iphca-a11y-motion="off"] .iphca-a11y-btn,
html[data-iphca-a11y-motion="off"] .iphca-a11y-reset {
	transition: none !important;
	animation: none !important;
}

/* ============================================================ */
/* User-pref site-wide effects                                  */
/* ============================================================ */

/* --- Text size.
   Three steps: normal (default, no class) / large / bigger.
   No "smaller" step — an accessibility widget exists to help users see
   more, not less; browser zoom-out covers anyone who wants the opposite.

   Implementation: CSS `zoom` on <html>. Why zoom and not root font-size?

   The WordPress / Beaver Builder editors let content authors type
   explicit px values for font-size. A root `font-size: 18px` shift only
   scales rem/em-based content — px stays where it is. Zoom scales the
   ENTIRE layout uniformly (including px-pinned headings, BB heading
   modules, MegaMenu items, etc.).

   Zoom is supported in Chrome, Safari, Edge always, and Firefox 126+
   (May 2024). It's what every major commercial a11y overlay uses for
   the same reason.

   Why not `font-size: 1.05em !important`? em is resolved against the
   parent's computed font-size, not the element's own — so applying it
   to .fl-heading collapses 80px headings to ~19px. The previous commit
   removed those.

   WCAG 1.4.4 allows resize up to 200%. We sit at:
     normal = 100%
     large  = 118%
     bigger = 140% */

/* Apply zoom to the theme's content wrapper (#wrapper), NOT to <html>.
   The widget is appended directly to <body> outside #wrapper, so it
   stays at native scale automatically — its position: fixed
   coordinates are not multiplied by the zoom factor.

   When zoom is applied at <html>, fixed-positioned elements anywhere
   in the page get their coordinates scaled too (a quirk of how CSS
   zoom interacts with the visual viewport). That made the panel
   shift off-screen at "Bigger" text size — fixed by scoping the zoom
   to the content wrapper instead. */
html[data-iphca-a11y-text-size="large"]  #wrapper { zoom: 1.18; }
html[data-iphca-a11y-text-size="bigger"] #wrapper { zoom: 1.40; }

/* Also scale the accessibility panel CONTENT. Subtler factors than
   the page (1.08× / 1.18× vs the page's 1.18× / 1.40×) — the panel
   has dense control labels, so even small bumps land. We zoom each
   inner section / row / chip individually so the panel container
   stays pinned to the viewport (zoom on the fixed container itself
   would multiply its right/bottom coordinates).

   Includes the title H3 and both scroll-hint chips so users feel
   the change consistently across every label they read. The icon
   buttons in the header (close, reset) stay at native size so the
   tooltip absolute coordinates remain correct. */
html[data-iphca-a11y-text-size="large"]  .iphca-a11y-widget__panel > .iphca-a11y-group,
html[data-iphca-a11y-text-size="large"]  .iphca-a11y-widget__panel > .iphca-a11y-row,
html[data-iphca-a11y-text-size="large"]  .iphca-a11y-widget__panel > p,
html[data-iphca-a11y-text-size="large"]  .iphca-a11y-widget__panel .iphca-a11y-widget__header h3,
html[data-iphca-a11y-text-size="large"]  .iphca-a11y-widget__panel .iphca-a11y-widget__scroll-hint,
html[data-iphca-a11y-text-size="large"]  .iphca-a11y-widget__panel .iphca-a11y-widget__scroll-hint--top {
	zoom: 1.08;
}
html[data-iphca-a11y-text-size="bigger"] .iphca-a11y-widget__panel > .iphca-a11y-group,
html[data-iphca-a11y-text-size="bigger"] .iphca-a11y-widget__panel > .iphca-a11y-row,
html[data-iphca-a11y-text-size="bigger"] .iphca-a11y-widget__panel > p,
html[data-iphca-a11y-text-size="bigger"] .iphca-a11y-widget__panel .iphca-a11y-widget__header h3,
html[data-iphca-a11y-text-size="bigger"] .iphca-a11y-widget__panel .iphca-a11y-widget__scroll-hint,
html[data-iphca-a11y-text-size="bigger"] .iphca-a11y-widget__panel .iphca-a11y-widget__scroll-hint--top {
	zoom: 1.18;
}

/* --- CSS variable scaffolding for a future text-scale migration.
   Today we use `zoom` because the theme's font sizes are hard-coded in
   px (via SASS and via the BB editor's px outputs). When the theme
   gradually moves font-size values to use this variable, e.g.
       font-size: calc(16px * var(--iphca-font-scale, 1));
   those declarations will scale via the variable without needing zoom.
   At that point we can shrink the zoom multiplier (or remove it
   entirely) until any remaining px content also opts in.

   Usage in any new SASS:
       @include scaled(16px);   // expands to calc(16px * var(--iphca-font-scale, 1))
   See sass/partials/setup/_a11y-mixins.scss (to be added when the
   refactor begins). For now the variable is set but unused. */

:root {
	--iphca-font-scale: 1;
}
html[data-iphca-a11y-text-size="large"]  { --iphca-font-scale: 1.18; }
html[data-iphca-a11y-text-size="bigger"] { --iphca-font-scale: 1.40; }

/* --- Invert — full filter:invert + re-invert media so they look normal. */
html[data-iphca-a11y-contrast="invert"] {
	filter: invert(1) hue-rotate(180deg);
	background: #ffffff;
}
html[data-iphca-a11y-contrast="invert"] img,
html[data-iphca-a11y-contrast="invert"] video,
html[data-iphca-a11y-contrast="invert"] picture,
html[data-iphca-a11y-contrast="invert"] iframe,
html[data-iphca-a11y-contrast="invert"] svg image,
html[data-iphca-a11y-contrast="invert"] [style*="background-image"] {
	filter: invert(1) hue-rotate(180deg);
}

/* --- High contrast — black bg, white text, yellow links. */
html[data-iphca-a11y-contrast="high"] body {
	background: #000000 !important;
	color: #ffffff !important;
}
html[data-iphca-a11y-contrast="high"] body *:not(.iphca-a11y-widget):not(.iphca-a11y-widget *):not(img):not(video):not(picture):not(svg):not(iframe) {
	background-color: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
/* Catch elements that set their background via inline `style="..."` —
   common in BB rows, MegaMenu items, hero banners. Inline-style
   background-image needs the same suppression. */
html[data-iphca-a11y-contrast="high"] body [style*="background"]:not(.iphca-a11y-widget):not(.iphca-a11y-widget *) {
	background-image: none !important;
	background: #000000 !important;
}
/* Dropdown / mega menu PANELS (not the parent menu items) need a SOLID
   black background so that the slider canvas or any other non-strippable
   element behind them doesn't bleed through and compete with the
   dropdown text. Selectors are scoped tightly to actual dropdown
   containers — Max Mega Menu uses `ul.mega-sub-menu`, classic WP menus
   use `ul.sub-menu`, and our off-canvas drawer uses its own panel
   class. Mobile mega menu uses `.mega-menu-toggle-block` overlay. */
html[data-iphca-a11y-contrast="high"] ul.mega-sub-menu,
html[data-iphca-a11y-contrast="high"] ul.sub-menu,
html[data-iphca-a11y-contrast="high"] .mega-menu-wrap.mega-menu-mobile-collapse #mega-menu-wrap,
html[data-iphca-a11y-contrast="high"] .ys-offcanvas__panel,
html[data-iphca-a11y-contrast="high"] .iphca-offcanvas__panel {
	background: #000000 !important;
	border: 2px solid #ffffff !important;
}
/* Yellow links — must match the broad rule's specificity exactly so that,
   coming AFTER it in source order, it wins the cascade. The repeated
   :not() chain is intentional (dropping any of them would lose specificity
   and the white-text rule above would override). */
html[data-iphca-a11y-contrast="high"] body a:not(.iphca-a11y-widget):not(.iphca-a11y-widget *):not(img):not(video):not(picture):not(svg):not(iframe),
html[data-iphca-a11y-contrast="high"] body a:not(.iphca-a11y-widget):not(.iphca-a11y-widget *):not(img):not(video):not(picture):not(svg):not(iframe) *:not(.iphca-a11y-widget):not(.iphca-a11y-widget *):not(img):not(video):not(picture):not(svg):not(iframe) {
	color: #ffff00 !important;
	text-decoration: underline !important;
}
html[data-iphca-a11y-contrast="high"] button:not(.iphca-a11y-btn):not(.iphca-a11y-toggle):not(.iphca-a11y-widget__close):not(.iphca-a11y-widget__trigger):not(.iphca-a11y-reset),
html[data-iphca-a11y-contrast="high"] input,
html[data-iphca-a11y-contrast="high"] textarea,
html[data-iphca-a11y-contrast="high"] select {
	background: #000000 !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
}
html[data-iphca-a11y-contrast="high"] img,
html[data-iphca-a11y-contrast="high"] video {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* --- Widget under high contrast — keep it consistent with the rest of
   the page (black/white/yellow) instead of leaving it as a white island.
   Without this the panel sits as a white box on a black page; with this
   the whole experience is uniformly high-contrast. */
html[data-iphca-a11y-contrast="high"] .iphca-a11y-widget__panel,
html[data-iphca-a11y-contrast="high"] .iphca-a11y-widget__panel .iphca-a11y-widget__header {
	background: #000000 !important;
	border-color: #ffffff !important;
}
html[data-iphca-a11y-contrast="high"] .iphca-a11y-widget__panel,
html[data-iphca-a11y-contrast="high"] .iphca-a11y-widget__panel * {
	color: #ffffff !important;
	border-color: #ffffff !important;
}
html[data-iphca-a11y-contrast="high"] .iphca-a11y-widget__panel a {
	color: #ffff00 !important;
	text-decoration: underline !important;
}
html[data-iphca-a11y-contrast="high"] .iphca-a11y-widget__close,
html[data-iphca-a11y-contrast="high"] .iphca-a11y-widget__reset-icon {
	color: #ffffff !important;
}
html[data-iphca-a11y-contrast="high"] .iphca-a11y-btn,
html[data-iphca-a11y-contrast="high"] .iphca-a11y-toggle__track,
html[data-iphca-a11y-contrast="high"] .iphca-a11y-reset {
	background: #000000 !important;
	border: 2px solid #ffffff !important;
}
html[data-iphca-a11y-contrast="high"] .iphca-a11y-btn[aria-pressed="true"],
html[data-iphca-a11y-contrast="high"] .iphca-a11y-toggle[aria-pressed="true"] .iphca-a11y-toggle__track {
	background: #ffff00 !important;
	border-color: #ffff00 !important;
}
html[data-iphca-a11y-contrast="high"] .iphca-a11y-btn[aria-pressed="true"] {
	color: #000000 !important;
}
html[data-iphca-a11y-contrast="high"] .iphca-a11y-btn[aria-pressed="true"] * {
	color: #000000 !important;
}
html[data-iphca-a11y-contrast="high"] .iphca-a11y-toggle__thumb {
	background: #ffffff !important;
}
html[data-iphca-a11y-contrast="high"] .iphca-a11y-toggle[aria-pressed="true"] .iphca-a11y-toggle__thumb {
	background: #000000 !important;
}
html[data-iphca-a11y-contrast="high"] .iphca-a11y-widget__scroll-hint,
html[data-iphca-a11y-contrast="high"] .iphca-a11y-widget__scroll-hint--top {
	background: #ffff00 !important;
	color: #000000 !important;
	border-color: #000000 !important;
}

/* --- Reduce motion — global override. */
html[data-iphca-a11y-motion="off"] *:not(.iphca-a11y-widget):not(.iphca-a11y-widget *),
html[data-iphca-a11y-motion="off"] *:not(.iphca-a11y-widget):not(.iphca-a11y-widget *)::before,
html[data-iphca-a11y-motion="off"] *:not(.iphca-a11y-widget):not(.iphca-a11y-widget *)::after {
	animation-duration: 0.01ms !important;
	animation-delay: 0ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	transition-delay: 0ms !important;
	scroll-behavior: auto !important;
}
html[data-iphca-a11y-motion="off"] video[autoplay] { animation-play-state: paused; }

/* --- Plain text font — Atkinson Hyperlegible loaded on demand.
   Applies to body content AND the widget itself, so users who prefer
   the plain-text font see it in the panel too. */
html[data-iphca-a11y-readable-font="on"] body,
html[data-iphca-a11y-readable-font="on"] body *,
html[data-iphca-a11y-readable-font="on"] .iphca-a11y-widget,
html[data-iphca-a11y-readable-font="on"] .iphca-a11y-widget * {
	font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* --- Highlight links — forced underline for text links, focus-style
   outline for image-only / icon-only links (where an underline is
   either invisible or visually wrong because there's no inline text
   baseline to draw under). Applies to the widget too so settings
   are consistent including in the panel itself.

   The `:has(> img:only-child)` family targets links that wrap a
   single image / picture / svg / FontAwesome icon. Browsers without
   `:has` support fall through to the underline rule (visible if
   the link has any text fallback). */
html[data-iphca-a11y-link-highlight="on"] a {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 2px !important;
}
html[data-iphca-a11y-link-highlight="on"] a:has(> img:only-child),
html[data-iphca-a11y-link-highlight="on"] a:has(> picture:only-child),
html[data-iphca-a11y-link-highlight="on"] a:has(> svg:only-child),
html[data-iphca-a11y-link-highlight="on"] a:has(> i.fas:only-child),
html[data-iphca-a11y-link-highlight="on"] a:has(> i.far:only-child),
html[data-iphca-a11y-link-highlight="on"] a:has(> i.fab:only-child),
html[data-iphca-a11y-link-highlight="on"] a:has(> i.fa:only-child) {
	text-decoration: none !important;
	position: relative;
	display: inline-block;
	border-radius: 0 !important;
}
/* Strip the image / picture / svg's own rounded corners too, so the
   square indicator border matches a square image edge. Sacrificing
   design rounding here is the expected trade-off for accessibility
   mode — clarity of the indicator beats visual polish. */
html[data-iphca-a11y-link-highlight="on"] a:has(> img:only-child) > img,
html[data-iphca-a11y-link-highlight="on"] a:has(> picture:only-child) > picture,
html[data-iphca-a11y-link-highlight="on"] a:has(> picture:only-child) > picture > img,
html[data-iphca-a11y-link-highlight="on"] a:has(> svg:only-child) > svg {
	border-radius: 0 !important;
}
/* Draw the indicator as an absolutely-positioned pseudo-element pinned
   to the link's edges. This keeps the entire ring INSIDE the link's
   box so it survives a parent with `overflow: hidden` (common on
   feature grid / card containers that clip rounded corners or hover
   zoom effects). The navy border + yellow inset box-shadow stack
   gives the same gov.uk-style two-tone look as the focus ring. */
html[data-iphca-a11y-link-highlight="on"] a:has(> img:only-child)::after,
html[data-iphca-a11y-link-highlight="on"] a:has(> picture:only-child)::after,
html[data-iphca-a11y-link-highlight="on"] a:has(> svg:only-child)::after,
html[data-iphca-a11y-link-highlight="on"] a:has(> i.fas:only-child)::after,
html[data-iphca-a11y-link-highlight="on"] a:has(> i.far:only-child)::after,
html[data-iphca-a11y-link-highlight="on"] a:has(> i.fab:only-child)::after,
html[data-iphca-a11y-link-highlight="on"] a:has(> i.fa:only-child)::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid #33346e;
	box-shadow: inset 0 0 0 4px #fec235;
	box-sizing: border-box;
	pointer-events: none;
	z-index: 2;
}

/* --- Easier reading — combined line, letter and word spacing. WCAG 1.4.12
   Text Spacing benchmarks: line-height 1.5×, letter-spacing 0.12×,
   word-spacing 0.16×. We ship slightly more generous values. */
html[data-iphca-a11y-line-spacing="on"] body,
html[data-iphca-a11y-line-spacing="on"] body p,
html[data-iphca-a11y-line-spacing="on"] body li,
html[data-iphca-a11y-line-spacing="on"] body dd,
html[data-iphca-a11y-line-spacing="on"] body dt,
html[data-iphca-a11y-line-spacing="on"] body h1,
html[data-iphca-a11y-line-spacing="on"] body h2,
html[data-iphca-a11y-line-spacing="on"] body h3,
html[data-iphca-a11y-line-spacing="on"] body h4,
html[data-iphca-a11y-line-spacing="on"] body h5,
html[data-iphca-a11y-line-spacing="on"] body h6,
html[data-iphca-a11y-line-spacing="on"] body span,
html[data-iphca-a11y-line-spacing="on"] body a,
html[data-iphca-a11y-line-spacing="on"] body .fl-rich-text,
html[data-iphca-a11y-line-spacing="on"] body .fl-rich-text *,
html[data-iphca-a11y-line-spacing="on"] body .fl-module-rich-text *,
html[data-iphca-a11y-line-spacing="on"] body .fl-heading,
html[data-iphca-a11y-line-spacing="on"] body .fl-heading-text {
	line-height: 1.9 !important;
	letter-spacing: 0.06em !important;
	word-spacing: 0.16em !important;
}

/* Widget panel keeps tighter spacing than the body even in
   line-spacing mode — the panel UI is dense by design and full
   text-spacing values would push controls off-screen. We honour
   spacing intent (slightly more generous than default) without
   blowing the layout. */
html[data-iphca-a11y-line-spacing="on"] .iphca-a11y-widget,
html[data-iphca-a11y-line-spacing="on"] .iphca-a11y-widget * {
	line-height: 1.55 !important;
	letter-spacing: 0.02em !important;
	word-spacing: 0.05em !important;
}

/* --- Hide images — collapses photos/videos/iframes; preserves layout
   slots so the page doesn't visually jump too much. Doesn't hide
   decorative SVG icons inside buttons / links (alt-text-bearing
   content stays accessible to screen readers regardless). */
html[data-iphca-a11y-hide-images="on"] body img:not(.iphca-a11y-widget *),
html[data-iphca-a11y-hide-images="on"] body picture:not(.iphca-a11y-widget *),
html[data-iphca-a11y-hide-images="on"] body video:not(.iphca-a11y-widget *),
html[data-iphca-a11y-hide-images="on"] body iframe:not(.iphca-a11y-widget *) {
	visibility: hidden !important;
}
html[data-iphca-a11y-hide-images="on"] body [style*="background-image"]:not(.iphca-a11y-widget):not(.iphca-a11y-widget *) {
	background-image: none !important;
}

/* --- Highlight focus — beefier gov.uk-style ring on every focused
   element. Same dark-inner + yellow-outer pattern as the default
   ring, just thicker. Yellow alone fails contrast on white pages,
   so the dark navy inner edge is what guarantees the focus is
   visible everywhere. */
html[data-iphca-a11y-highlight-focus="on"] *:focus,
html[data-iphca-a11y-highlight-focus="on"] *:focus-visible {
	outline: 4px solid #33346e !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 8px #fec235 !important;
	border-radius: 2px;
}

/* --- Big cursor — switches to a larger black-on-white cursor.
   Inline SVG via data: URI; %23 is a URL-encoded #.
   Fallback to OS default if the SVG isn't supported. */
html[data-iphca-a11y-big-cursor="on"],
html[data-iphca-a11y-big-cursor="on"] *,
html[data-iphca-a11y-big-cursor="on"] *::before,
html[data-iphca-a11y-big-cursor="on"] *::after {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='44' viewBox='0 0 40 44'><polygon points='2,2 2,34 11,26 16,40 22,38 17,24 30,24' fill='%23000000' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/></svg>") 0 0, default !important;
}
html[data-iphca-a11y-big-cursor="on"] a,
html[data-iphca-a11y-big-cursor="on"] button,
html[data-iphca-a11y-big-cursor="on"] [role="button"] {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='44' viewBox='0 0 40 44'><path d='M14 4 v16 M14 12 c0,-3 4,-3 4,0 v8 M18 14 c0,-3 4,-3 4,0 v8 M22 16 c0,-3 4,-3 4,0 v10 c0,8 -2,12 -8,12 c-4,0 -6,-2 -8,-6 l-4,-8 c-1,-3 3,-5 5,-2 l1,2' fill='%23ffffff' stroke='%23000000' stroke-width='1.5'/></svg>") 8 4, pointer !important;
}

/* --- Greyscale — desaturate every body child except the widget. */
html[data-iphca-a11y-greyscale="on"] body > *:not(.iphca-a11y-widget) {
	filter: grayscale(1) !important;
}