/**
 * Accessibility Fixes CSS
 * WCAG 2.1 Level AA compliance — reusable across GD Platform / Phoenix theme sites.
 *
 * CUSTOMIZE: search for "CUSTOMIZE" comments and update values per site.
 *
 * Index:
 *   1. Utilities (visually-hidden, screen-reader-text)
 *   2. Skip to content
 *   3. Focus indicators
 *   4. Navigation — desktop dropdown sub-arrow buttons
 *   5. Navigation — submenu open state
 *   6. Forms — Gravity Forms
 *   7. Reviews — Trustindex
 *   8. Chatbot — TalkFurther / further-embedded-vsa
 *   9. Reduced motion
 *  10. Elementor — widgets and patterns
 *  11. Zoom — body class rules for 200% / 400% zoom
 *  12. Third-party overlays — Magnific Popup, Popup Maker
 *  13. bxSlider — pager dot text
 *  14. Beaver Builder Slideshow — decorative-slideshow controls
 *  15. WP Google Maps Pro — decorative map container
 *  16. Complianz — privacy policy document + consent manager
 */


/* =============================================================================
   1. Utilities
   ============================================================================= */

/**
 * Visually hidden but accessible to screen readers.
 * Use on text that conveys information only to AT (e.g. "opens in new tab").
 * The :focus rule allows skip links to become visible on keyboard focus.
 */
.site-visually-hidden,
.screen-reader-text,
.sr-only {
	position: absolute !important;
	left:     -10000px !important;
	top:      auto !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;
	border:   0 !important;
	padding:  0 !important;
	margin:   0 !important;
}
.site-visually-hidden:focus,
.screen-reader-text:focus {
	position:   static !important;
	left:        auto !important;
	width:       auto !important;
	height:      auto !important;
	overflow:    visible !important;
	clip:        auto !important;
	clip-path:   none !important;
	white-space: normal !important;
}


/* =============================================================================
   2. Skip to content
   ============================================================================= */

/**
 * Skip link — hidden off-screen until focused, then visible at top-left.
 * CUSTOMIZE: update colors to match site brand.
 *
 * Selectors cover Phoenix theme conventions:
 *   a#skip-nav.screenreader-text  — primary skip-to-content link
 *   a.site-skip-link              — generic class for additional skip links
 *   button#skip-chat              — skip-to-chatbot button
 */
a#skip-nav,
a.site-skip-link,
button#skip-chat {
	position:   absolute !important;
	left:       -9999px !important;
	top:        0 !important;
	z-index:    999999 !important;
	padding:    0.75em 1em !important;
	background: #fff !important;          /* CUSTOMIZE */
	color:      #003853 !important;       /* CUSTOMIZE */
	font-weight: 600 !important;
	text-decoration: none !important;
	border:     0 !important;
	clip:       rect(0, 0, 0, 0) !important;
	clip-path:  inset(50%) !important;
	overflow:   hidden !important;
}
a#skip-nav:focus,
a.site-skip-link:focus,
button#skip-chat:focus {
	position:   fixed !important;
	left:       0.5em !important;
	top:        0.5em !important;
	clip:       auto !important;
	clip-path:  none !important;
	overflow:   visible !important;
	outline:    2px solid #000 !important; /* CUSTOMIZE: match site focus color */
	outline-offset: 2px !important;
}


/* =============================================================================
   3. Focus indicators
   ============================================================================= */

/**
 * Global 2px solid outline on all interactive elements.
 * CUSTOMIZE: change outline color to pass contrast against site backgrounds.
 * Note: outline-color inherits currentColor by default — update only where
 * the interactive element sits on a dark background.
 */
html body *:focus,
html body *:focus-visible {
	outline:        2px solid;
	outline-offset: 2px;
}

/**
 * Form fields — explicit black outline so GF's own CSS does not override.
 */
.gform_wrapper .gfield input:is(:focus, :focus-visible),
.gform_wrapper .gfield select:is(:focus, :focus-visible),
.gform_wrapper .gfield textarea:is(:focus, :focus-visible),
.gform_wrapper .gform-footer input:is(:focus, :focus-visible) {
	outline: 2px solid #000 !important; /* CUSTOMIZE */
}

/**
 * Dark-background containers — inset box-shadow instead of outline so the
 * focus ring is always visible regardless of background color.
 * CUSTOMIZE: add selectors for other dark containers on the site.
 */
/* Example:
#topBar *:focus,
#topBar *:focus-visible {
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000;
	outline: none;
}
*/


/* =============================================================================
   4. Navigation — desktop dropdown sub-arrow buttons
   ============================================================================= */

/**
 * Layout: flex on parent <li> so the sub-arrow button sits beside the link,
 * not inside it. The parent link takes all remaining width; the button is fixed.
 *
 * CUSTOMIZE: update selectors to match the nav IDs on each site.
 */
#menu-primary-navigation .menu-item-has-children,
#anchorMenu .menu-item-has-children {
	display:     flex;
	align-items: stretch;
	position:    relative;
}
#menu-primary-navigation .menu-item-has-children > a,
#anchorMenu .menu-item-has-children > a {
	flex: 1 1 auto;
}

/**
 * Sub-arrow button injected by accessibility__menu.js.
 * CUSTOMIZE: color to match nav text color.
 */
.site-sub-arrow {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           32px;
	background:      transparent;
	border:          0;
	cursor:          pointer;
	padding:         0;
	color:           inherit; /* CUSTOMIZE if nav link color differs */
	opacity:         0.85;
	transition:      opacity 0.15s ease;
}
.site-sub-arrow:hover,
.menu-item-has-children:hover > .site-sub-arrow {
	opacity: 1;
}
.site-sub-arrow svg {
	width:      12px;
	height:     auto;
	fill:       currentColor;
	transition: transform 0.2s ease;
}
.site-sub-arrow[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
.site-sub-arrow:focus,
.site-sub-arrow:focus-visible {
	outline:        2px solid;
	outline-offset: -2px;
}


/* =============================================================================
   5. Navigation — submenu open state
   ============================================================================= */

/**
 * Show submenu when JS adds .site-submenu-open (keyboard navigation).
 * Must override whatever CSS the theme uses to hide submenus on hover.
 * CUSTOMIZE: match the theme's specific hide/show mechanism.
 *
 * Phoenix theme hides via:  opacity:0 + transform:scaleY(0)
 * Override with !important to win specificity.
 */
#menu-primary-navigation .menu-item-has-children.site-submenu-open > .sub-menu,
#anchorMenu .menu-item-has-children.site-submenu-open > .sub-menu {
	display:    block !important;
	visibility: visible !important;
	opacity:    1 !important;
	transform:  translate(-50%) scale(1) !important; /* CUSTOMIZE: match theme open transform */
}

/**
 * CSS-only :focus-within safety net — shows the submenu whenever ANY child
 * element receives keyboard focus, even before JS has run.
 *
 * WHY in addition to the JS class approach:
 * The JS approach is precise and bidirectional (opens on Tab, closes on Escape).
 * :focus-within is a simpler safety net that works without JS and catches edge
 * cases where focus moves inside the submenu before the JS observer fires.
 * Both rules coexist safely: the JS-added class is additive, not a replacement.
 *
 * Source: HPSC — promoted to fran/.
 * CUSTOMIZE: update selectors to match the site's nav structure.
 */
/* Uncomment and adapt for the site's nav selectors:
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
	display:    block !important;
	visibility: visible !important;
	opacity:    1 !important;
}
*/


/* =============================================================================
   6. Forms — Gravity Forms
   ============================================================================= */

/**
 * Required notice paragraph injected by fixGfRequiredIndicator().
 */
p.site-gf-required-notice {
	padding: 0 0 10px;
}

/**
 * Validation summary — restore visual prominence after JS demotes <h2> to <p>.
 * fixGravityFormsValidationHeading() replaces the element but copies all classes,
 * so GF's class-based styles carry over. Only the browser-default heading
 * bold/size is lost — restore it here.
 */
p.gform_submission_error {
	display:     block;
	font-size:   16px;       /* CUSTOMIZE: match site h2 size inside forms */
	font-weight: 600;
	line-height: 1.4;
}


/* =============================================================================
   7. Reviews — Trustindex
   ============================================================================= */

/**
 * Play/Pause button container — positioned below the arrows.
 * CUSTOMIZE: adjust positioning to match each site's widget layout.
 */
.site-ti-autoplay-controls {
	display:         flex;
	justify-content: center;
	padding:         8px 0 4px;
}

/**
 * Play/Pause button.
 * CUSTOMIZE: colors, size.
 */
.site-ti-play-pause {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	background:      transparent;
	border:          1px solid currentColor;
	border-radius:   4px;
	cursor:          pointer;
	padding:         4px 10px;
	font-size:       13px;
	opacity:         0.75;
	transition:      opacity 0.15s ease;
}
.site-ti-play-pause:hover,
.site-ti-play-pause:focus {
	opacity: 1;
}
.site-ti-play-pause:focus,
.site-ti-play-pause:focus-visible {
	outline:        2px solid;
	outline-offset: 2px;
}

/**
 * Disclaimer close button.
 */
.site-ti-disclaimer-close {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	background:      transparent;
	border:          1px solid currentColor;
	border-radius:   50%;
	cursor:          pointer;
	padding:         4px;
	margin-bottom:   8px;
}
.site-ti-disclaimer-close:focus,
.site-ti-disclaimer-close:focus-visible {
	outline:        2px solid;
	outline-offset: 2px;
}

/**
 * Disclaimer open state — override TI's visibility:hidden with display:block.
 * CUSTOMIZE: adjust positioning to match widget layout.
 */
.ti-disclaimer.site-ti-disclaimer-open {
	display:    block !important;
	visibility: visible !important;
}

/**
 * Per-review verified tooltip — interactive state.
 *
 * .ti-stars needs overflow:visible so the absolutely-positioned tooltip can escape
 * the star container without being clipped.
 *
 * .site-ti-vtip-open is added by JS when the tooltip is keyboard-opened.
 * It mirrors TI's own hover ruleset (opacity + margin + visibility + display)
 * so all four properties are always overridden regardless of TI's default hiding strategy.
 */
.ti-review-item .ti-stars {
	overflow: visible !important;
	position: relative;
}
.ti-verified-review .ti-verified-tooltip {
	min-width:  130px !important;
	overflow:   visible !important;
}
.ti-verified-review .ti-verified-tooltip.site-ti-vtip-open {
	display:    block !important;
	visibility: visible !important;
	opacity:    1 !important;
	margin:     0 !important;
	z-index:    10;
}
.ti-verified-review .ti-verified-tooltip:focus {
	outline: none;
}

/**
 * Close button inside the per-review verified tooltip.
 */
.site-ti-vtip-close {
	display:      flex;
	align-items:  center;
	justify-content: center;
	background:   transparent;
	border:       1px solid currentColor;
	border-radius: 50%;
	cursor:       pointer;
	padding:      3px;
	margin-top:   6px;
	line-height:  0;
}
.site-ti-vtip-close:focus,
.site-ti-vtip-close:focus-visible {
	outline:        2px solid;
	outline-offset: 2px;
}

/**
 * Slide announcer — visually hidden live region.
 */
.site-ti-slide-announce {
	position:    absolute !important;
	left:        -10000px !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;
}

/**
 * Navigation arrows always visible at ≤ 1024px.
 * TI hides arrows at narrow widths via display:none — override so keyboard
 * users on tablet/mobile can still navigate.
 * CUSTOMIZE: breakpoint and selectors if TI updates its CSS.
 */
@media (max-width: 1024px) {
	.ti-widget .ti-controls {
		display: flex !important;
	}
	.ti-widget .ti-next,
	.ti-widget .ti-prev {
		display: inline-flex !important;
	}
}


/* =============================================================================
   8. Chatbot — TalkFurther / further-embedded-vsa
   ============================================================================= */

/**
 * Skip-to-chat button — same pattern as skip-to-content.
 * CUSTOMIZE: colors to match site brand.
 */
button#skip-chat.screenreader-text {
	position:    absolute !important;
	left:        -9999px !important;
	top:         0 !important;
	z-index:     999999 !important;
	padding:     0.75em 1em !important;
	background:  #fff !important;
	color:       #003853 !important;   /* CUSTOMIZE */
	font-weight: 600 !important;
	border:      0 !important;
	clip:        rect(0, 0, 0, 0) !important;
	clip-path:   inset(50%) !important;
	overflow:    hidden !important;
}
button#skip-chat.screenreader-text:focus {
	position:   fixed !important;
	left:       0.5em !important;
	top:        0.5em !important;
	clip:       auto !important;
	clip-path:  none !important;
	overflow:   visible !important;
	outline:    2px solid #000 !important; /* CUSTOMIZE */
	outline-offset: 2px !important;
}


/* =============================================================================
   9. Reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.site-sub-arrow svg {
		transition: none;
	}
	.site-ti-play-pause,
	.site-ti-disclaimer-close {
		transition: none;
	}
}


/* =============================================================================
   10. Elementor — widgets and patterns
   ============================================================================= */

/*
 * This section is ONLY needed on sites built with Elementor Page Builder.
 * Remove the entire section on non-Elementor sites.
 *
 * Sub-sections:
 *   10a. Elementor screen-only spans
 *   10b. Elementor search form focus
 *   10c. Desktop nav — .site-a11y-header-nav-desktop
 *   10d. Mobile nav — .site-a11y-header-nav
 *   10e. Accordion focus ring
 *   10f. Swiper / hero slider controls
 */


/* ── 10a. Elementor screen-only spans ──────────────────────────────────────── */

/**
 * Elementor injects .elementor-screen-only spans (visually-hidden, 1px×1px)
 * throughout the page builder for icon widgets, social icons, buttons, etc.
 * Accessibility checkers flag them as "text too small" because they measure
 * the 1px rendered box, not the CSS font-size.
 *
 * WHY display:none is safe here:
 * Elementor already adds descriptive aria-labels to the parent interactive
 * elements. These spans are redundant for screen readers; hiding them silences
 * the "text too small" false-positive without removing any accessible content.
 * removeRedundantElementorScreenOnlySpans() in accessibility__content.js
 * removes them from the DOM entirely after verifying the parent aria-label —
 * this rule is a CSS-only safety net for spans the JS has not yet processed.
 */
span.elementor-screen-only {
	display: none;
}


/* ── 10b. Elementor search form focus ─────────────────────────────────────── */

/**
 * Elementor's search widget wraps the input in a container with overflow:hidden,
 * which clips the focus outline. The :has() rule restores visibility.
 * CUSTOMIZE: update outline color to match the site's focus color.
 */
.elementor-search-form input.elementor-search-form__input:focus,
.elementor-search-form button.elementor-search-form__submit:focus {
	outline: 2px solid #000; /* CUSTOMIZE */
}

.elementor-search-form .elementor-search-form__container:has(input:focus, button:focus) {
	overflow: visible;
}


/* ── 10c. Desktop nav — .site-a11y-header-nav-desktop ─────────────────────── */

/**
 * Steps 1–4 of the Elementor desktop nav fix.
 * Requires class "site-a11y-header-nav-desktop" on the Elementor nav widget
 * container (set via Elementor Advanced → CSS Classes).
 * JS counterpart: initDesktopNav() in accessibility__content.js.
 *
 * CUSTOMIZE:
 *   — .sub-arrow svg fill → match your nav top-level link color
 *   — --ada-menu-active-bg → match your nav hover/open background color
 *   — --ada-menu-text-white → text color on the active background
 *   — .sub-menu .sub-arrow:focus outline color → match your site focus color
 */

/* Step 1 — flex layout so the sub-arrow button sits beside the link */
.site-a11y-header-nav-desktop .elementor-nav-menu li.menu-item-has-children {
	display:        flex !important;
	flex-direction: row !important;
	align-items:    center !important;
	position:       relative;
}

.site-a11y-header-nav-desktop .elementor-nav-menu li.menu-item-has-children > a {
	flex-grow:   0 !important;
	display:     inline-flex !important;
	align-items: center;
}

.sub-arrow {
	display:         flex !important;
	align-items:     center;
	justify-content: center;
	width:           30px;
	height:          100%;
	cursor:          pointer;
	padding:         0 5px;
}

.sub-arrow svg {
	fill:   #ffffff !important; /* CUSTOMIZE: match nav link color */
	width:  12px;
	height: auto;
}

.sub-arrow:focus {
	outline:          2px solid #ffffff !important; /* CUSTOMIZE */
	outline-offset:   -4px;
	background-color: rgba(255, 255, 255, 0.1);
}

.site-a11y-header-nav-desktop .sub-menu li.menu-item-has-children {
	position: relative;
}

/* Step 2 — submenu visibility (controlled via .site-a11y-submenu-open) */
.site-a11y-header-nav-desktop .sub-menu {
	display:    none !important;
	visibility: hidden !important;
	opacity:    0;
	position:   absolute !important;
	z-index:    99999 !important;
	background: #ffffff !important;          /* CUSTOMIZE */
	box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15) !important;
	width:      auto !important;
	min-width:  100% !important;
	max-width:  none !important;
	transition: opacity 0.2s ease;
}

.site-a11y-header-nav-desktop li.site-a11y-submenu-open > .sub-menu {
	display:    block !important;
	visibility: visible !important;
	opacity:    1 !important;
}

.site-a11y-header-nav-desktop .sub-menu li a {
	white-space: nowrap !important;
	padding:     12px 45px 12px 20px !important;
	display:     block !important;
}

.site-a11y-header-nav-desktop .elementor-nav-menu > li > .sub-menu {
	top:  100% !important;
	left: 0 !important;
}

.site-a11y-header-nav-desktop .sub-menu li > .sub-menu {
	top:  0 !important;
	left: 100% !important;
}

.site-a11y-header-nav-desktop,
.site-a11y-header-nav-desktop .elementor-widget-container,
.site-a11y-header-nav-desktop .elementor-nav-menu {
	overflow: visible !important;
}

.sub-arrow[aria-expanded="true"] svg {
	transform: rotate(180deg) !important;
}

.site-a11y-header-nav-desktop .sub-menu li {
	margin:   10px 0 !important;
	position: relative !important;
}

/* Step 3 — nested sub-arrows (second-level dropdowns) */
.site-a11y-header-nav-desktop .sub-menu .sub-arrow {
	position:  absolute !important;
	right:     15px !important;
	top:       70% !important;
	transform: translateY(-50%) !important;
	z-index:   50 !important;
	width:     25px !important;
	height:    25px !important;
	display:   flex !important;
}

.site-a11y-header-nav-desktop .sub-menu .sub-arrow svg {
	fill:      #333333 !important; /* CUSTOMIZE: match submenu text color */
	width:     10px !important;
	height:    auto !important;
	transform: rotate(-90deg);
	transition: transform 0.2s ease;
}

.site-a11y-header-nav-desktop .sub-menu li.site-a11y-submenu-open > .sub-arrow svg {
	transform: rotate(0deg) !important;
}

.site-a11y-header-nav-desktop .sub-menu .sub-arrow:focus {
	outline:          2px solid #005a87 !important; /* CUSTOMIZE */
	outline-offset:   1px;
	background-color: rgba(0, 90, 135, 0.05);
	border-radius:    2px;
}

.site-a11y-header-nav-desktop .sub-menu li a {
	padding-right: 50px !important;
}

/* Step 4 — active/hover background & color */
:root {
	--ada-menu-active-bg:   #4a748c; /* CUSTOMIZE: nav hover/open background */
	--ada-menu-text-white:  #ffffff; /* CUSTOMIZE: text color on active bg    */
}

.site-a11y-header-nav-desktop .elementor-nav-menu > li:hover,
.site-a11y-header-nav-desktop .elementor-nav-menu > li.site-a11y-submenu-open {
	background-color: var(--ada-menu-active-bg) !important;
}

.site-a11y-header-nav-desktop .elementor-nav-menu > li:hover > .sub-arrow svg,
.site-a11y-header-nav-desktop .elementor-nav-menu > li.site-a11y-submenu-open > .sub-arrow svg {
	fill: var(--ada-menu-text-white) !important;
}

.site-a11y-header-nav-desktop .elementor-nav-menu > li:not(:hover):not(.site-a11y-submenu-open) {
	background-color: transparent !important;
}

.site-a11y-header-nav-desktop .elementor-nav-menu > li:not(:hover):not(.site-a11y-submenu-open) > a {
	color: white !important; /* CUSTOMIZE */
}


/* ── 10d. Mobile nav — .site-a11y-header-nav ──────────────────────────────── */

/**
 * Flex layout so submenu toggle buttons extracted by fixMobileNavArrows() /
 * fixHeaderNavArrows() sit beside the link rather than inside it.
 * Requires class "site-a11y-header-nav" on the Elementor mobile nav container.
 * CUSTOMIZE: focus outline color.
 */
.site-a11y-header-nav .elementor-nav-menu li.menu-item-has-children {
	display:         flex !important;
	flex-direction:  row !important;
	align-items:     center !important;
	justify-content: space-between !important;
	width:           100% !important;
}

.site-a11y-header-nav .elementor-nav-menu li.menu-item-has-children > a.elementor-item {
	flex-grow:   1 !important;
	display:     flex !important;
	align-items: center;
}

.site-a11y-header-nav .menu-item-submenu-button {
	position:    relative !important;
	right:       auto !important;
	flex-shrink: 0 !important;
	height:      100%;
	display:     flex !important;
	align-items: center;
	justify-content: center;
}

.site-a11y-header-nav a:focus,
.site-a11y-header-nav button:focus {
	outline:        2px solid #000 !important; /* CUSTOMIZE */
	outline-offset: -2px !important;
}

/**
 * Keep sticky header visible while a link inside it has keyboard focus.
 * CUSTOMIZE: remove or update selector if the theme uses a different sticky class.
 * Also update the translateY value to match the header's slide-out distance.
 */
.header-sticky-bar:has(a:focus-visible) {
	transform: translateY(0%) !important;
}


/* ── 10e. Accordion focus ring ────────────────────────────────────────────── */

/**
 * Elementor accordion tab titles are not natively focusable — fixAccordionTabindex()
 * replaces the inner <a> with a <span> and adds tabindex to the <li>.
 * This rule ensures a visible focus ring when the <li> receives focus.
 * CUSTOMIZE: outline color.
 */
.elementor-tab-title:focus-visible {
	outline: 1px solid #000 !important; /* CUSTOMIZE */
}


/* ── 10f. Swiper / hero slider controls ───────────────────────────────────── */

/**
 * Play-pause, next, and prev buttons injected by initSwiperControls(),
 * initSliderPlayPause(), initSliderContainer(), and initHeroPlayPause().
 *
 * Buttons are absolutely positioned within the Swiper container.
 * CUSTOMIZE:
 *   — .swiper-custom-next/prev top/right/left → match carousel arrow position
 *   — .swiper-play-pause bottom/left → match desired pause button placement
 *   — .hero-play-pause bottom/right → match hero slider layout
 *   — background colors
 */
.swiper-play-pause,
.swiper-custom-next,
.swiper-custom-prev,
.hero-play-pause {
	position:        absolute;
	z-index:         10;
	height:          35px !important;
	width:           35px !important;
	border-radius:   50% !important;
	border:          none !important;
	cursor:          pointer !important;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.2s;
	padding:         0 !important;
}

.swiper-play-pause:focus-visible,
.swiper-custom-next:focus-visible,
.swiper-custom-prev:focus-visible,
.hero-play-pause:focus-visible {
	outline:        1px solid #000 !important; /* CUSTOMIZE */
	outline-offset: 2px;
}

.swiper-play-pause:hover {
	background: rgba(0, 0, 0, 0.65);
}

/* Default positions — CUSTOMIZE for each site's carousel layout */
.swiper-custom-next  { right: -25px; top: 20px; }
.swiper-custom-prev  { left:  -25px; top: 20px; }
.swiper-play-pause   { bottom: 0;    left: -25px; }

.hero-play-pause {
	bottom:  80px;
	right:   20px;
	display: flex !important;
}

.hero-play-pause svg {
	fill: #fff; /* CUSTOMIZE */
}

@media screen and (max-width: 768px) {
	.hero-play-pause {
		bottom: 50px; /* CUSTOMIZE */
	}
}

/* Testimonial carousel — full-width container (.e-con-full) */
.e-con-full > .elementor-widget-testimonial-carousel button.swiper-play-pause  { left:  10px; }
.e-con-full > .elementor-widget-testimonial-carousel button.swiper-custom-prev { left:  10px; }
.e-con-full > .elementor-widget-testimonial-carousel button.swiper-custom-next { right: 10px; }

/* Testimonial carousel — inner container (.e-con-inner) */
.e-con-inner > .elementor-widget-testimonial-carousel button.swiper-play-pause  { bottom: 0;    left: 10px;  top: initial; }
.e-con-inner > .elementor-widget-testimonial-carousel button.swiper-custom-prev { bottom: 50px; left: 10px;  top: initial; }
.e-con-inner > .elementor-widget-testimonial-carousel button.swiper-custom-next { bottom: 50px; right: 10px; top: initial; }

@media screen and (max-width: 1024px) {
	.e-con-inner > .elementor-widget-testimonial-carousel button.swiper-play-pause  { bottom: 10px; }
	.e-con-inner > .elementor-widget-testimonial-carousel button.swiper-custom-prev { top: -54px; bottom: initial; }
	.e-con-inner > .elementor-widget-testimonial-carousel button.swiper-custom-next { top: -54px; bottom: initial; }
	body .e-con-inner > .elementor-widget-testimonial-carousel .elementor-main-swiper { padding-bottom: 90px; }
	body .e-con-inner > .elementor-widget-testimonial-carousel .elementor-main-swiper .swiper-pagination { bottom: 50px; }
}

@media screen and (max-width: 767px) {
	.e-con-full > .elementor-widget-testimonial-carousel button.swiper-play-pause  { bottom: 10px; }
	.e-con-full > .elementor-widget-testimonial-carousel button.swiper-custom-prev { top: -54px; }
	.e-con-full > .elementor-widget-testimonial-carousel button.swiper-custom-next { top: -54px; }
	body .e-con-full > .elementor-widget-testimonial-carousel .elementor-main-swiper { padding-bottom: 90px; }
	body .e-con-full > .elementor-widget-testimonial-carousel .elementor-main-swiper .swiper-pagination { bottom: 50px; }
}

@media (prefers-reduced-motion: reduce) {
	.sub-arrow svg,
	.site-a11y-header-nav-desktop .sub-menu .sub-arrow svg {
		transition: none;
	}
	.swiper-play-pause,
	.swiper-custom-next,
	.swiper-custom-prev,
	.hero-play-pause {
		transition: none;
	}
}


/* =============================================================================
   11. Zoom — body class rules for 200% / 400% zoom
   ============================================================================= */

/*
 * These rules are ONLY active when accessibility__zoom.js is enqueued and
 * run('updateZoomClasses') is called. The JS adds .zoom-200 or .zoom-400 to
 * <body> based on the outerWidth/innerWidth ratio.
 *
 * WHY here rather than in the theme stylesheet:
 * Zoom-triggered layout fixes are accessibility-specific. Keeping them with the
 * other A11Y CSS makes it easy to find, audit, and remove if the theme changes.
 *
 * CUSTOMIZE: add site-specific overrides below.
 * Common patterns:
 *   — body.zoom-200 header { position: absolute; }   (un-stick header at 200%)
 *   — body.zoom-200 .phone-display { display: none; } (hide overflowing phone numbers)
 *   — body.zoom-400 nav { padding-top: 80px; }        (clear full-width nav at 400%)
 */

/* Example rules (uncomment and adapt):

body.zoom-200 .site-header {
	position: absolute;
}

body.zoom-200 .site-header .header-phones,
body.zoom-400 .site-header .header-phones {
	display: none !important;
}

body.zoom-400 .main-navigation {
	padding-top: 80px;
}

*/


/* =============================================================================
   12. Third-party overlays — Magnific Popup, Popup Maker
   ============================================================================= */

/*
 * Enable this section on sites that use Magnific Popup (lightbox) or Popup Maker.
 *
 * Magnific Popup rules (12a-12e) work with accessibility__gallery.js:
 *  — observeLightbox() watches for .mfp-wrap additions
 *  — fixLightboxAccessibility() sets button labels, wraps img in .site-lightbox-img-wrap
 *  — Body scroll lock uses .site-lightbox-open on <body>
 *
 * CUSTOMIZE:
 *  — Replace 'site-lightbox-img-wrap' and 'site-lightbox-open' with the project prefix.
 *  — Replace '--site-focus-ring-height' CSS variable name to match.
 *  — Adjust arrow/button styles to match the site's Magnific theme.
 *
 * Source: The Carrington (CRN_A11Y) — promoted to fran/ as generic Magnific Popup CSS.
 */


/* ── 12a. Close button ──────────────────────────────────────────────────────── */

.mfp-gallery .mfp-container .mfp-figure button.mfp-close {
	align-items:     center;
	background:      #000;       /* CUSTOMIZE */
	border-radius:   50%;
	padding:         2px 0;
	display:         inline-flex;
	justify-content: center;
	outline:         2px solid #000;
	width:           30px !important;
	height:          30px;
}
.mfp-gallery .mfp-container .mfp-figure button.mfp-close:is(:hover, :focus, :focus-visible) {
	border: 2px solid #fff; /* CUSTOMIZE */
}

@media only screen and (max-width: 1024px) {
	.mfp-gallery .mfp-container .mfp-figure button.mfp-close {
		right: 5px !important;
	}
}


/* ── 12b. Prev / Next arrows ────────────────────────────────────────────────── */

.mfp-gallery .mfp-container .mfp-arrow-right,
.mfp-gallery .mfp-container .mfp-arrow-left {
	background: #000; /* CUSTOMIZE */
}
.mfp-gallery .mfp-container .mfp-arrow-right:is(:focus, :focus-visible),
.mfp-gallery .mfp-container .mfp-arrow-left:is(:focus, :focus-visible) {
	outline: 2px solid;
}
/* Arrow chevron — shift slightly on focus so it is visually centered */
.mfp-gallery .mfp-container .mfp-arrow-right:is(:focus, :focus-visible):before { transform: translateX(9px); }
.mfp-gallery .mfp-container .mfp-arrow-right:is(:focus, :focus-visible):after  { opacity: 1; transform: translateX(-1px); }
.mfp-gallery .mfp-container .mfp-arrow-left:is(:focus, :focus-visible):before  { transform: translateX(-9px); }
.mfp-gallery .mfp-container .mfp-arrow-left:is(:focus, :focus-visible):after   { opacity: 1; transform: translateX(-58px); }

.mfp-gallery .mfp-counter {
	color:     #fff; /* CUSTOMIZE */
	font-size: 14px; /* CUSTOMIZE */
}

@media only screen and (max-width: 1024px) {
	.mfp-gallery .mfp-container .mfp-arrow-right { right: 5px !important; }
	.mfp-gallery .mfp-container .mfp-arrow-left  { left:  5px !important; }
}


/* ── 12c. Body scroll lock ──────────────────────────────────────────────────── */

/* Prevents background page from scrolling while lightbox is open.
   observeLightbox() adds .site-lightbox-open to <body> on open and removes it on close.
   CUSTOMIZE: replace 'site-lightbox-open' with the project prefix. */
body.site-lightbox-open {
	overflow: hidden !important;
}

/* Prevent scroll inside the lightbox overlay itself */
.mfp-wrap.mfp-ready,
.mfp-wrap.mfp-ready .mfp-container {
	overflow: hidden !important;
}


/* ── 12d. Image wrapper + focus ring ────────────────────────────────────────── */

/*
 * fixLightboxAccessibility() wraps the lightbox <img> in .site-lightbox-img-wrap
 * so the ::before focus ring hugs the image instead of spanning the full overlay.
 * JS sets --site-focus-ring-height on the wrapper (updated by ResizeObserver).
 *
 * CUSTOMIZE:
 *  — Replace 'site-lightbox-img-wrap' with the project prefix.
 *  — Replace '--site-focus-ring-height' with the project CSS variable name.
 *  — Adjust box-shadow colors for contrast against the site's lightbox background.
 */
.mfp-wrap.mfp-ready .site-lightbox-img-wrap {
	position:    relative;
	display:     inline-block;
	line-height: 0;
}
.mfp-wrap.mfp-ready .site-lightbox-img-wrap img {
	display: block;
}
.mfp-wrap.mfp-ready .site-lightbox-img-wrap img:focus {
	outline: none; /* ring is on ::before, not img itself */
}
/* Ring ::before: height from --site-focus-ring-height, vertically centered */
.mfp-wrap.mfp-ready .site-lightbox-img-wrap::before {
	background:     #000;                                /* CUSTOMIZE */
	content:        '';
	position:       absolute;
	left:           -5px;
	right:          -5px;
	top:            50%;
	transform:      translateY(-50%);
	height:         calc(var(--site-focus-ring-height, 90%) + 20px);
	pointer-events: none;
	opacity:        0;
	box-shadow:     inset 0 0 0 2px #fff;               /* CUSTOMIZE */
	z-index:        -1;
}
.mfp-wrap.mfp-ready .site-lightbox-img-wrap:focus-within::before {
	opacity: 1;
}


/* ── 12e. Popup Maker ───────────────────────────────────────────────────────── */

/* CUSTOMIZE: uncomment and adjust for Popup Maker sites. */
/*
.pum-close:focus,
.pum-close:focus-visible {
	outline:        2px solid #fff !important;
	outline-offset: 2px !important;
}
*/


/* =============================================================================
   13. bxSlider — pager dot text
   ============================================================================= */

/*
 * Enable on sites using bxSlider (Beaver Builder Testimonials, or standalone).
 * bxSlider hides the slide number with text-indent:-9999px. fixBxSliderPagerLabels()
 * removes the number and inserts a .site-visually-hidden span with descriptive text.
 * These rules reset text-indent so the span is the only text content visible to AT.
 *
 * CUSTOMIZE: uncomment when fixBxSliderPagerLabels is active.
 */

/*
.bx-wrapper .bx-pager.bx-default-pager a,
.bx-wrapper .bx-pager.bx-default-pager button {
	text-indent: 0 !important;
	overflow: hidden !important;
}
*/


/* =============================================================================
   14. Beaver Builder Slideshow — decorative-slideshow controls
   =============================================================================

   Enable on sites using Beaver Builder slideshow modules with the
   .decorative-slideshow opt-in class. Pairs with accessibility__slideshow.js
   (fixDecorativeSlideshow and fixInteractiveSlideshow).

   The .decorative-slideshow class is added via Beaver Builder → Advanced →
   CSS Classes on each decorative slideshow module.

   CUSTOMIZE:
     — Focus outline colors to match the site's brand focus color.
     — Add site-specific positioning overrides for the navigation buttons
       if Beaver Builder's default placement causes layout issues.
*/

/* Ensure navigation buttons are always visible and clickable */
.decorative-slideshow .fl-slideshow-nav-pause,
.decorative-slideshow .fl-slideshow-nav-play,
.decorative-slideshow .fl-slideshow-nav-prev,
.decorative-slideshow .fl-slideshow-nav-next {
	pointer-events: auto !important;
	cursor: pointer;
}

/* Focus styles for slideshow controls */
.decorative-slideshow .fl-slideshow-nav-pause:focus,
.decorative-slideshow .fl-slideshow-nav-play:focus,
.decorative-slideshow .fl-slideshow-nav-prev:focus,
.decorative-slideshow .fl-slideshow-nav-next:focus,
.decorative-slideshow .fl-slideshow-nav-pause:focus-visible,
.decorative-slideshow .fl-slideshow-nav-play:focus-visible,
.decorative-slideshow .fl-slideshow-nav-prev:focus-visible,
.decorative-slideshow .fl-slideshow-nav-next:focus-visible {
	outline:        2px solid #000 !important; /* CUSTOMIZE: brand focus color */
	outline-offset: 2px;
}


/* =============================================================================
   15. WP Google Maps Pro — decorative map container
   =============================================================================

   Enable on sites using the WP Google Maps Pro plugin (.wpgmp_map_container)
   where the map is decorative (a location illustration, not interactive
   wayfinding). Pairs with fixWPGoogleMapsPro() in accessibility__maps.js.

   The tab-container inside the map panel is hidden to remove keyboard traps
   that appear even when the map container is otherwise inert.

   IMPORTANT: Only enable this section when a text alternative for the map
   (plain address + "View in Google Maps" link) is already present on the page.
   Do NOT use if the map is the only way to convey location information.

   Source: The Vered (VRD_A11Y) — promoted to fran/.
*/

/*
.wpgmp_map_container .wpgmp_tabs_container .wpgmp_toggle_container {
	display: none !important;
}
*/


/* =============================================================================
   16. Complianz — privacy policy document + consent manager
   =============================================================================

   Enable on sites using the Complianz GDPR/CCPA plugin (complianz.io).
   Pairs with fixComplianzConsent() and fixComplianzDocument() in
   accessibility__forms.js.

   The CSS rule below provides an instant visual fix for empty paragraphs in
   #cmplz-document before the JS MutationObserver in fixComplianzDocument()
   can run. Both the CSS and JS rules are needed:
     — CSS: instant removal on first render (no flash)
     — JS:  cleans up paragraphs injected after initial render (async content)

   Source: The Vered (VRD_A11Y) — promoted to fran/.
*/

#cmplz-document p:empty {
	display: none !important;
}