/* ==========================================================================
   Wyser - WCAG 2.2 AA accessibility fixes (CSS layer)

   Covers: 2.4.7 Focus Visible, 2.4.1 Bypass Blocks,
           2.4.11 Focus Not Obscured (Minimum), 2.5.8 Target Size (Minimum),
           2.3.3 Animation from Interactions

   Loaded from functions.php (wyser_enqueue_a11y_css) rather than pasted into
   Customizer -> Additional CSS. The Customizer was suggested so the rules
   survive theme updates, but custom-wordpress-theme is this site's own theme
   and is never updated from upstream, while the deploy path here is SFTP +
   git. Keeping it as a real file means it is versioned and ships with the
   theme instead of living only in the database.

   WHY !important IS USED
   Header Footer Elementor and several WP core block styles declare
   `outline: 0` on :focus. Those are third-party rules, so these have to
   out-rank them. If the suppressors are ever removed at source, the
   !important flags can come out.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) 2.4.7 FOCUS VISIBLE
   Global baseline. :focus-visible keeps rings off mouse clicks while always
   showing them for keyboard users.
   -------------------------------------------------------------------------- */

/* TWO-TONE RING - white inner, near-black outer.
 *
 * A single-colour ring cannot work on this site. The header is white, but the
 * FAQ sections and several other blocks are #000000, so the previous
 * #0B0B0B ring measured about 1.05:1 against those backgrounds - it was being
 * drawn correctly and was simply invisible. Keyboard users on /faqs/ had no
 * idea which accordion row they were on.
 *
 * Two adjacent rings in opposite tones means one of them always contrasts,
 * whatever is behind it, with no need to detect the backdrop:
 *   white  1px -> 4px   (visible on dark backgrounds)
 *   black  4px -> 7px   (visible on light backgrounds)
 */
*:focus-visible {
	outline: 3px solid #FFFFFF !important;
	outline-offset: 1px !important;
	box-shadow: 0 0 0 7px #0B0B0B !important;
	border-radius: 2px;
}

/* Re-asserted on the specific elements whose outline the theme and plugins
   suppress. `.hfe-nav-menu-icon i` from the original list is dropped: this
   site's hamburger is an inline <svg> of three <rect> bars, not an icon font,
   so that selector never matches anything here. The toggle itself is covered
   by the .hfe-nav-menu__toggle rule below. */
.hfe-skip-link:focus-visible,
.hfe-nav-menu__toggle:focus-visible,
.hfe-has-submenu-container a.hfe-menu-item:focus-visible,
.hfe-nav-menu .menu-item-has-children:focus-visible,
.hfe-nav-menu .menu-item a.hfe-menu-item:focus-visible,
.hfe-nav-menu a.hfe-sub-menu-item:focus-visible,
.wp-block-tabs-menu-item:focus-visible,
.wp-block-navigation__responsive-close:focus-visible,
.wp-block-accordion-heading__toggle:focus-visible,
.e-n-accordion-item-title:focus-visible,
.wp-block-search__button:focus-visible,
.slick-list:focus-visible,
.slick-next:focus-visible,
.slick-prev:focus-visible,
/* Elementor nested-accordion rows - /faqs/ renders 12 of these as
   <summary class="e-n-accordion-item-title" tabindex="0" aria-expanded …>.
   They are natively focusable and nothing suppresses their outline; the only
   reason focus was invisible there was the ring colour against #000000. */
summary:focus-visible,
.e-n-accordion-item > summary:focus-visible {
	outline: 3px solid #FFFFFF !important;
	outline-offset: 1px !important;
	box-shadow: 0 0 0 7px #0B0B0B !important;
}

/* NOTE: the source file carried a `.wyser-section--dark, [data-theme="dark"]`
   rule to swap in a light ring on dark sections. Neither selector exists
   anywhere on this site (verified: 0 matches), so that rule never applied -
   which is precisely why the dark FAQ sections had no visible indicator. The
   two-tone ring above removes the need to identify dark sections at all. */

/* Form fields keep the two-tone ring, plus a soft inner glow so the field
   itself reads as active rather than only its edge. */
.elementor-field-group .elementor-field-textual:focus-visible,
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible {
	outline: 3px solid #FFFFFF !important;
	outline-offset: 1px !important;
	box-shadow: 0 0 0 7px #0B0B0B, inset 0 0 0 2px rgba(11, 11, 11, 0.35) !important;
}

/* Fallback for browsers without :focus-visible. Scoped so it cannot
   double-apply where :focus-visible is supported. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	[tabindex]:not([tabindex="-1"]):focus,
	summary:focus {
		outline: 3px solid #FFFFFF !important;
		outline-offset: 1px !important;
		box-shadow: 0 0 0 7px #0B0B0B !important;
	}
}


/* --------------------------------------------------------------------------
   2) 2.4.1 BYPASS BLOCKS - make the skip link visible when focused

   The rendered skip link on this site is Header Footer Elementor's
   `.hfe-skip-link`, not the theme's own. header.php also outputs a
   `.wyser-skip-link`, but HFE replaces the theme header entirely via
   get_header(), so that one never reaches the page - see the note in
   functions.php.

   Its href is also repointed in JS, because HFE emits href="#content" and
   no element on this site has id="content".
   -------------------------------------------------------------------------- */

.hfe-skip-link:focus,
.hfe-skip-link:focus-visible {
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 12px 22px !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	background: #FFFFFF !important;
	color: #0B0B0B !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	border-radius: 6px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important;
	outline: 3px solid #0B0B0B !important;
	outline-offset: 2px !important;
	z-index: 2147483647 !important;
}


/* --------------------------------------------------------------------------
   3) 2.4.11 FOCUS NOT OBSCURED (Minimum)
   The header is sticky and 90px tall (.header_margin / .hfe-side top offset
   in base.css both use 90px). Without scroll-margin, tabbing to an element
   near the top scrolls it under the header. 120px gives 30px of clearance.
   -------------------------------------------------------------------------- */

a,
button,
input,
select,
textarea,
summary,
[tabindex],
[role="button"],
[role="link"],
[role="tab"],
[role="menuitem"],
:target {
	scroll-margin-top: 120px;
}


/* --------------------------------------------------------------------------
   4) 2.5.8 TARGET SIZE (MINIMUM)
   Standalone icon links must be at least 24x24 CSS px. Padding rather than
   width/height so the icon artwork is not stretched.
   -------------------------------------------------------------------------- */

.elementor-social-icon,
a[href*="linkedin.com"],
a[href*="twitter.com"],
a[href*="x.com"],
a[href*="facebook.com"],
a[href*="instagram.com"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 24px !important;
	min-height: 24px !important;
	padding: 4px;
}

/* Vertical breathing room so footer nav links comfortably clear the 24px
   spacing exception in 2.5.8. */
footer nav li,
footer .menu-item {
	margin-block: 4px;
}


/* --------------------------------------------------------------------------
   5) 1.4.3 CONTRAST (MINIMUM) - portfolio company cards

   The portfolio card meta text and founder roles are set to #9D9D9D by a rule
   that lives in the DATABASE, not in any theme file - it arrives in an inline
   <style> block in the page:

       .MetaValue, .MetaLink { color: #9D9D9D; font-size: 14px; … }
       .FounderRole          { color: #9D9D9D; font-size: 14.906px; … }

   #9D9D9D on white measures 2.71:1. AA needs 4.5:1 for text this size, so the
   founder roles ("CEO", "Founder & CTO") and the Founded / Website / Location
   values were all failing.

   #595959 measures 7.00:1 - comfortably AA, and AAA as well. It matches the
   value already used for .FounderRole in css/portfolio.css, so the role text
   and the meta text stay visually consistent within the same card.

   !important is required because the source rule is inline in the document and
   would otherwise win on order. Re-asserting .FounderRole here too, so every
   contrast override for this component sits in one documented place and works
   even on pages where portfolio.css is not enqueued.

   If the design team wants these lighter, #767676 is the lightest grey that
   still passes at 4.54:1 - but it leaves no margin, so measure before shipping.
   -------------------------------------------------------------------------- */

.MetaValue,
.MetaLink,
.FounderRole {
	color: #595959 !important;
}

/* --- pitch-deck popup form (white panel) ---
 *
 * Placeholder text is text, so 1.4.3 applies to it. #BEBEBE on the white form
 * measures 1.86:1. #6E6E6E is 5.10:1 - comfortably AA while still clearly
 * lighter than entered values, so a placeholder is not mistaken for a filled
 * field.
 */
.pitch-popup-form ::placeholder,
.pitch-popup-form ::-webkit-input-placeholder {
	color: #6E6E6E !important;
	opacity: 1 !important;   /* Firefox dims placeholders by default */
}

/*
 * The upload constraints line ("Uploads PDF formats, up to 15 MB / 30 slides")
 * was #0d0d0d52 - an 8-digit hex, i.e. near-black at 32% alpha, which
 * composites to rgb(177,177,177) over the white panel: 2.14:1 at 12px.
 *
 * This text matters more than it looks - it is the target of the file input's
 * aria-describedby, so it carries the format and size limits. Set opaque at
 * #595959 (7.00:1), matching the muted grey used elsewhere, so there is no
 * alpha compositing to reason about.
 */
p.custom-upload-para {
	color: #595959 !important;
}


/* --------------------------------------------------------------------------
   6) 1.4.1 USE OF COLOUR - the footer copyright link

   The footer ends with:

       Copyright 2026 © wyser. All Rights Reserved | Privacy Notice & Terms of Use

   "Privacy Notice & Terms of Use" is a real link to /privacy-policy/, but the
   copyright widget styles the link and the surrounding text in exactly the same
   colour (#FFFFFFB3 for both `.hfe-copyright-wrapper` and
   `.hfe-copyright-wrapper a`), and applies no underline. Nothing distinguishes
   it from the plain text beside it, so there is no way to tell it is clickable.

   1.4.1 requires that colour is not the only visual means of conveying
   information - and here colour is not even doing that, since the link and the
   text are the same colour. An underline is the conventional fix and needs no
   design decision.
   -------------------------------------------------------------------------- */

.hfe-copyright-wrapper a {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   6b) Nav dropdown links - pin the colour, and hide collapsed submenus properly

   axe reported "insufficient color contrast of 2.99 (foreground #959595,
   background #ffffff)" on the Resource Hub dropdown link (FAQ'S). #959595 is
   NOT declared anywhere in any stylesheet - the declared pair is

       color: var(--e-global-color-text)   ->  #000000
       background-color: #fff

   which is 21:1. So #959595 is a COMPOSITED value: the collapsed dropdown is
   opacity: 0 with a 300ms transition, and contrast tooling blends the text
   through that ancestor opacity, producing a washed-out reading for text that
   is not actually visible yet.

   Two changes so this state stops being ambiguous:

   1. Pin the colour explicitly rather than leaning on the kit variable, so the
      dropdown cannot silently lose contrast if --e-global-color-text is ever
      re-themed.
   2. Give collapsed submenus `visibility: hidden` in the vertical/flyout
      layouts. The plugin collapses those with `height: 0` alone
      (frontend.css:464), leaving the links rendered and exposed to assistive
      tech and to scanners while invisible on screen. The horizontal layout
      already uses visibility: hidden.

   The open state is unaffected - the .wyser-submenu-open rule above sets
   visibility/opacity/height with !important, and the plugin's own click handler
   writes inline styles, which also win over these.
   -------------------------------------------------------------------------- */

.hfe-nav-menu .sub-menu a.hfe-sub-menu-item {
	color: #000000 !important;
}

.hfe-nav-menu__layout-vertical .sub-menu,
.hfe-nav-menu__layout-expandible .sub-menu,
.hfe-flyout-wrapper .sub-menu {
	visibility: hidden;
	overflow: hidden;
}

.hfe-copyright-wrapper a:hover,
.hfe-copyright-wrapper a:focus-visible {
	text-decoration-thickness: 2px !important;
}


/* --------------------------------------------------------------------------
   7) Respect the reduced-motion preference (2.3.3)
   Pairs with the hero pause/play control, which already covers 2.2.2.
   Only affects users who have explicitly asked for reduced motion.
   -------------------------------------------------------------------------- */

@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;
	}
}


/* --------------------------------------------------------------------------
   NOT INCLUDED: the hero contrast scrim (1.4.3)

   The source file added a ::after gradient to `.wyser-hero` / `.hero-section`.
   Neither class exists on this site - the hero is `.hero-banner`, and it
   already renders its own `<div class="hero-overlay">` scrim
   (homepage-new-template.php). Adding a second gradient on top would darken
   the hero twice over, which is a visible design change rather than a
   remediation.

   To close 1.4.3 properly: sample the lightest frame of the hero video and
   measure the existing .hero-overlay. If the 20px body copy is under 4.5:1 or
   the large H1 under 3:1, deepen `.hero-overlay` in base.css - do not stack
   another layer.
   -------------------------------------------------------------------------- */