/* =========================================================================
   JTC Accessibility — remediation stylesheet
   WCAG 2.1 AA / EN 301 549 (web content). Every block notes the SC it serves.
   Design intent is preserved; changes are the minimum needed for conformance.
   Brand tokens (from the Elementor kit):
     --jtc-amber          #FAA61A  ($primary-500) — DECORATIVE ONLY (1.99:1 on white)
     --jtc-amber-text     #A45F07  ($primary-800) — 4.98:1 on white, OK for text/links
     --jtc-amber-ui       #C9780C  ($primary-700) — 3.40:1, OK for large text / UI
     --jtc-ink            #1F3C4F  (secondary-700) — strong focus/UI colour
   ========================================================================= */

:root {
	--jtc-amber-text: #A45F07;
	--jtc-amber-ui: #C9780C;
	--jtc-ink: #1F3C4F;
	--jtc-focus: #1F3C4F;
}

/* -------------------------------------------------------------------------
   1) KEYBOARD FOCUS VISIBILITY  (SC 2.4.7 Focus Visible, 1.4.11 Non-text)
   The theme/WPForms/Elementor suppress focus outlines (outline:0 !important)
   and provide no equivalent. Restore a strong, high-contrast focus indicator
   for keyboard users on EVERY interactive element. :focus-visible keeps mouse
   clicks clean while always showing keyboard focus.
   ------------------------------------------------------------------------- */
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="link"]:focus-visible,
[contenteditable="true"]:focus-visible,
.elementor-button:focus-visible,
.wpforms-submit:focus-visible {
	outline: 3px solid var(--jtc-focus) !important;
	outline-offset: 2px !important;
	/* White halo so the ring is also visible on dark/amber backgrounds. */
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85) !important;
	border-radius: 2px;
}

/* Form fields: override Elementor/WPForms `outline:0 !important` and the
   near-invisible (~1.1:1) inset focus shadow with a clear visible focus. */
.wpforms-field input:focus-visible,
.wpforms-field textarea:focus-visible,
.wpforms-field select:focus-visible,
.elementor-field-group input:focus-visible,
.elementor-field-group textarea:focus-visible,
.elementor-field-group select:focus-visible,
.e-search-input-wrapper input:focus-visible {
	outline: 3px solid var(--jtc-focus) !important;
	outline-offset: 1px !important;
	box-shadow: none !important;
}

/* Fallback for browsers without :focus-visible — never leave focus invisible. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	[tabindex]:focus {
		outline: 3px solid var(--jtc-focus) !important;
		outline-offset: 2px !important;
	}
}

/* -------------------------------------------------------------------------
   2) LINK DISTINCTION IN CONTENT  (SC 1.4.1 Use of Color)
   In-content links inherit body colour (#38434A) with text-decoration:none,
   so they are indistinguishable from surrounding text by colour alone.
   Add an underline to links inside editorial content ONLY (not buttons, nav,
   icons, social, or call-to-action widgets).
   ------------------------------------------------------------------------- */
.elementor-widget-text-editor a:not(.elementor-button):not([class*="button"]),
.elementor-widget-theme-post-content a:not(.elementor-button):not([class*="button"]),
.elementor-widget-post-content a:not(.elementor-button):not([class*="button"]),
.page-content a:not(.elementor-button):not([class*="button"]) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Editorial link hover/focus colour uses the accessible amber (4.98:1). */
.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus,
.elementor-widget-theme-post-content a:hover,
.elementor-widget-theme-post-content a:focus {
	color: var(--jtc-amber-text);
}

/* -------------------------------------------------------------------------
   3) FORM FIELD BORDER CONTRAST  (SC 1.4.11 Non-text Contrast)
   WPForms field borders use rgba(0,0,0,0.25) = 1.83:1 on white (fail, needs
   3:1). Darken to a token that clears 3:1 while staying visually subtle.
   ------------------------------------------------------------------------- */
.wpforms-field input.wpforms-field-medium,
.wpforms-field input.wpforms-field-large,
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="url"],
.wpforms-field input[type="number"],
.wpforms-field textarea,
.wpforms-field select {
	border: 1px solid #595f66; /* ~5.3:1 on white */
}

/* -------------------------------------------------------------------------
   4) SKIP LINK  (SC 2.4.1 Bypass Blocks, 2.4.7)
   Our own robust skip link (injected by jtc-a11y.js) — visually hidden until
   focused, then clearly visible at the top-left. Works regardless of the Ally
   overlay (whose skip link is tabindex="-1" and self-deletes when #content is
   missing).
   ------------------------------------------------------------------------- */
.jtc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #ffffff;
	color: var(--jtc-ink);
	font-weight: 700;
	text-decoration: underline;
	border: 2px solid var(--jtc-ink);
	border-radius: 0 0 4px 0;
}
.jtc-skip-link:focus {
	left: 0;
	outline: 3px solid var(--jtc-focus);
	outline-offset: 2px;
}

/* Programmatic focus on the injected <main> must not paint a stray outline
   when reached via the skip link (it is focus-styled by the skip action only). */
main#content:focus:not(:focus-visible) {
	outline: none;
}

/* -------------------------------------------------------------------------
   5) BACKGROUND VIDEO PAUSE/PLAY CONTROL  (SC 2.2.2 Pause, Stop, Hide)
   The control is injected by jtc-a11y.js into the hero. Keep it small,
   high-contrast, keyboard-focusable and out of the way.
   ------------------------------------------------------------------------- */
.jtc-video-toggle {
	position: absolute;
	/* Left-hand side of the hero (requested by the disability organisation,
	   July 2026), clearly below the sticky header (~129px desktop / ~101px
	   mobile) and above the H1 (starts ~y248 desktop / ~y192 mobile).
	   left offsets match the content gutter (logo/H1 axis) per viewport. */
	top: 152px;
	left: 37px;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;   /* >= 44px target (SC 2.5.5 advisory) */
	height: 44px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #ffffff;
	background: rgba(31, 60, 79, 0.85); /* #1F3C4F @85% — high contrast vs white icon */
	border: 2px solid #ffffff;
	border-radius: 50%;
	line-height: 0;
}
.jtc-video-toggle:hover {
	background: rgba(31, 60, 79, 0.95);
}
.jtc-video-toggle svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	pointer-events: none;
}
.jtc-video-toggle .jtc-icon-play { display: none; }
.jtc-video-toggle[aria-pressed="true"] .jtc-icon-play { display: block; }
.jtc-video-toggle[aria-pressed="true"] .jtc-icon-pause { display: none; }
/* Tablet/mobile: header is ~126px (tablet) / ~101px (mobile) and the mobile H1
   starts ~y192 — top:134 clears the header at both sizes and stays above the
   H1 (134+44=178 < 192). The previous top:88 overlapped the header.
   left matches the content gutter at each size (logo edge ~36 / ~24). */
@media (max-width: 1024px) {
	.jtc-video-toggle { top: 134px; left: 36px; }
}
@media (max-width: 767px) {
	.jtc-video-toggle { left: 24px; }
}

/* -------------------------------------------------------------------------
   6) REDUCED MOTION  (SC 2.3.3 Animation from Interactions [AAA], 2.2.2)
   Honour users who request reduced motion: neutralise non-essential animation,
   parallax/scroll motion effects, and smooth-scroll. The hero video is paused
   from JS under this same preference.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	/* Elementor Motion Effects (parallax, mouse track, rotate, scale). */
	.elementor-motion-effects-element,
	.elementor-motion-effects-element-type-background,
	[data-settings*="motion_fx"] {
		transform: none !important;
		transition: none !important;
	}
	/* Reveal any content that depends on entrance animations to become visible. */
	.elementor-invisible {
		visibility: visible !important;
		opacity: 1 !important;
	}
}

/* -------------------------------------------------------------------------
   8) SOCIAL ICONS — hidden (the JTC has no social media accounts)  ·  SC 2.4.4
   The footer/header social icons had no real URLs (they are not functional
   links). Per client confirmation there are no accounts, so we hide the widget.
   To re-enable later: remove this rule and set real profile URLs.
   ------------------------------------------------------------------------- */
.elementor-widget-social-icons {
	display: none !important;
}

/* -------------------------------------------------------------------------
   9) PREMIUM "HORIZONTAL SCROLL" (About) — keyboard + reduced motion
   (SC 2.1.1, 2.4.3, 1.4.10, 2.3.3). Arrows/dots get a pointer + visible focus
   (made operable in JS). Under reduced-motion we un-pin the section and stack
   the panels in normal flow so all content is reachable without scroll-jacking.
   ------------------------------------------------------------------------- */
.premium-hscroll-arrow,
.premium-hscroll-dot,
.premium-hscroll-nav-dot {
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.premium-hscroll-outer-wrap {
		height: auto !important;
		position: static !important;
		overflow: visible !important;
	}
	.premium-hscroll-sections-wrap {
		display: block !important;
		transform: none !important;
		width: auto !important;
		height: auto !important;
		position: static !important;
	}
	/* Never leave content hidden behind the init class for reduced-motion users. */
	.premium-hscroll-sections-wrap.premium-addons__v-hidden {
		visibility: visible !important;
		opacity: 1 !important;
	}
	.premium-hscroll-section,
	.premium-hscroll-bg-layer {
		position: relative !important;
		transform: none !important;
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
	.premium-hscroll-progress,
	.premium-hscroll-nav {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   13) SOLID BUTTONS OVER THE BACKGROUND VIDEO  ·  SC 1.4.3, 1.4.11
   Disability-organisation feedback (July 2026): with moving images behind the
   text, outline/ghost buttons can't guarantee contrast — make boxes solid like
   the "Download Introductory Report" button. The ghost variant (`c-btn --white
   --stroke`, transparent bg + cream stroke) becomes solid brand navy #1F3C4F
   (white text = 11.5:1), preserving the primary-amber / secondary-navy
   hierarchy. Scoped to containers that actually have a background video, plus
   the specific hero instance; ghost buttons on solid backgrounds are untouched.
   ------------------------------------------------------------------------- */
/* NOTE: the :has() rules and the explicit-id fallback are SEPARATE blocks on
   purpose — a selector list containing :has() is dropped ENTIRELY by browsers
   without :has() support, which would kill the fallback that exists for them. */
.e-con:has(> .elementor-background-video-container) .c-btn.--stroke,
.e-con:has(.elementor-background-video-container) .c-btn.--stroke.--white {
	background-color: #1F3C4F !important;
	border-color: #1F3C4F !important;
	color: #ffffff !important; /* self-contained contrast guarantee (11.5:1) */
}
.elementor-element-bf556e9.c-btn {
	background-color: #1F3C4F !important;
	border-color: #1F3C4F !important;
	color: #ffffff !important;
}
.e-con:has(> .elementor-background-video-container) .c-btn.--stroke:hover,
.e-con:has(.elementor-background-video-container) .c-btn.--stroke.--white:hover {
	background-color: #12232D !important; /* secondary-900 — darker on hover */
	border-color: #12232D !important;
}
.elementor-element-bf556e9.c-btn:hover {
	background-color: #12232D !important;
	border-color: #12232D !important;
}

/* -------------------------------------------------------------------------
   14) CAROUSEL PAGINATION DOTS — CONTRAST  ·  SC 1.4.11, 1.4.1
   Feedback: "slider buttons are quite light". They were brand amber #FAA61A
   (1.99:1) with INACTIVE dots at 20% opacity (~1.1:1) on white. Make them
   solid accessible colours: inactive neutral #767676 (4.5:1), active dark
   amber #A45F07 (4.98:1) with a size cue so the current slide is not indicated
   by colour alone.
   ------------------------------------------------------------------------- */
.swiper-pagination-bullet {
	background: #767676 !important;
	opacity: 1 !important;
	position: relative;
}
/* Invisible hit-area extender: ~28-32px touch target without changing the
   visual 12px dot (advisory 2.5.5 / WCAG 2.2 2.5.8). */
.swiper-pagination-bullet::before {
	content: '';
	position: absolute;
	inset: -9px;
}
.swiper-pagination-bullet-active {
	background: #A45F07 !important;
	/* Size cue so the active slide is not indicated by colour alone (1.4.1) —
	   !important so Swiper's own bullet transforms can't remove the cue. */
	transform: scale(1.35) !important;
}

/* -------------------------------------------------------------------------
   15) ACCESSIBILITY OVERLAY WIDGET — REMOVED  ·  client decision (July 2026)
   The disability organisation advised that overlay buttons can undermine
   access by assistive tools and asked for removal. The widget script is
   dequeued server-side (see jtc-accessibility.php); this hides any remnant if
   another plugin re-renders the container. The underlying code-level fixes in
   this plugin stand on their own.
   ------------------------------------------------------------------------- */
#ea11y-root,
.ea11y-widget,
[id^="ea11y-widget"] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   11) ORIENTATION LOCK — neutralise WPForms camera-modal rotation  ·  SC 1.3.4
   WPForms' bundled CSS rotates its camera-capture modal under landscape
   (transform: rotate(-90deg)/180deg), which scanners read as locking content to
   an orientation. The camera field is not used on this site; remove the rotation
   so no content can be orientation-locked.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
	body .wpforms-camera-modal .wpforms-camera-modal-header .wpforms-camera-modal-title,
	body .wpforms-camera-modal .wpforms-camera-modal-footer .wpforms-camera-modal-buttons .wpforms-camera-accept,
	body .wpforms-camera-modal .wpforms-camera-modal-footer .wpforms-camera-modal-buttons .wpforms-camera-accept-crop {
		transform: none !important;
		writing-mode: horizontal-tb !important;
	}
}

/* -------------------------------------------------------------------------
   12) VISUALLY-HIDDEN UTILITY (for JS-injected screen-reader text)
   Standard sr-only pattern; content remains in the accessibility tree.
   ------------------------------------------------------------------------- */
.jtc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}