/**
 * Accessibility Fixes CSS — La Posada at Green Valley
 * WCAG 2.1 Level AA compliance.
 *
 * 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
 *  17. Footer — dark-background focus rings
 */


/* =============================================================================
   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,
.lpgv-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,
.lpgv-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#skip-chat,
a.skip-link,
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: #BBCAAD !important;
	color:      #00594F !important;
	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#skip-chat:focus,
a.skip-link: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 #fff !important;
	outline-offset: 2px !important;
}
a#skip-nav:hover,
a#skip-chat:hover,
a.skip-link:hover,
a.site-skip-link:hover,
button#skip-chat:hover {
	background: #ffffff !important;
	color:      #00594F !important;
}

.wp-block-paragraph  a:is(:focus, :focus-visible) {
    outline: 2px solid #000;
    outline-offset: 2px;
}
a.usa-button:not(.usa-button--secondary):is(:focus, :focus-visible) {
    outline: 2px solid #000;
    outline-offset: 2px;
}

a.usa-button.usa-button--secondary:is(:focus, :focus-visible) {
    outline: 2px solid #000;
    outline-offset: 2px;
}
.bg-lapo-leaf > .grid-row a.usa-button.usa-button--secondary:is(:focus, :focus-visible), .has-leaf-background-color a.usa-button.usa-button--secondary:is(:focus, :focus-visible) {
    outline-color: #fff;
}
.footer--cta-area a.usa-button.usa-button--secondary:is(:focus, :focus-visible) {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

header.usa-header .top-navbar *:is(:focus, :focus-visible) {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
header.usa-header .usa-navbar *:is(:focus, :focus-visible) {
	outline: 2px solid #00594f;
	outline-offset: 2px;
}
header.usa-header .usa-nav .usa-accordion__button:is(:focus, :focus-visible) {
	outline: 2px solid #00594f;
	outline-offset: 2px;
}
header.usa-header .usa-nav .usa-accordion__content a:is(:focus, :focus-visible) {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
header.usa-header .usa-nav form.usa-search.usa-search--small:has(input:is(:focus, :focus-visible)) {
	outline: 2px solid #00594f;
	outline-offset: 2px;
}
header.usa-header .usa-nav__inner .usa-search button:is(:focus, :focus-visible) {
	outline: 2px solid #00594f;
	outline-offset: 4px;
}

header.usa-header .usa-nav__primary .usa-nav__link:is(:focus, :focus-visible) {
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #00594f;
	outline: none;
}
header.usa-header .usa-nav__primary .usa-nav__link[aria-expanded="true"]:is(:focus, :focus-visible) {
	box-shadow: inset 0 0 0 2px #00594f, inset 0 0 0 4px #fff, inset 0 0 0 6px #00594f;
}
header.usa-header .usa-nav__inner .usa-nav__primary .usa-nav__primary-item a {
	outline-color: #fff;
	outline-offset: 2px;
}

.header-logo-link-mobile:is(:focus, :focus-visible) {
	outline: 2px solid #00594f;
	outline-offset: 2px;
}
#mobile--search-toggle:is(:focus, :focus-visible) {
	outline: 2px solid #00594f;
	outline-offset: 2px;
}
#mobile--search-form input:is(:focus, :focus-visible) {
	outline: 2px solid #00594f;
	outline-offset: 2px;
}

footer .footer--content .footer--widget-area a:is(:focus, :focus-visible) {
    outline-color: currentColor;
    outline-offset: 2px;
}

@media screen and (max-width: 1023px) {
	.usa-header .usa-navbar .navbar-mobile-controls .usa-accordion .usa-accordion__button:is(:focus, :focus-visible) {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
	.usa-header .usa-navbar .navbar-mobile-controls .usa-accordion .usa-accordion__content a:is(:focus, :focus-visible) {
		outline: 2px solid #fff;
		outline-offset: 4px;
	}
	.usa-header .usa-navbar .navbar-mobile-controls .header--mobile-nav-btn:is(:focus, :focus-visible) {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
	header.usa-header .usa-nav .usa-nav__close:is(:focus, :focus-visible) {
		outline-color: #00594f;
	}
	header.usa-header .usa-nav .usa-nav__primary > li.top-nav-menu-item a:is(:focus, :focus-visible) {
		box-shadow: inset 0 0 0 2px #00594f, inset 0 0 0 4px #f5f4f0, inset 0 0 0 6px #00594f;
		outline: none;
	}
	header.usa-header .usa-nav__inner .usa-nav__primary .usa-nav__primary-item a:is(:focus, :focus-visible) {
		box-shadow: inset 0 0 0 2px #00594f, inset 0 0 0 4px #f5f4f0, inset 0 0 0 6px #00594f;
		outline: none;
	}
	header.usa-header .usa-nav .usa-nav__primary > li.cta-link a:is(:focus, :focus-visible) {
		box-shadow: inset 0 0 0 2px #bbcaad, inset 0 0 0 4px #00594f;
		outline: none;
	}
}


/* =============================================================================
   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 #fff !important; /* CUSTOMIZE */
	outline-offset: 3px !important;
}

/**
 * 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.
 */
 header.usa-header .usa-navbar {
	overflow: visible;
}
 header.usa-header .usa-navbar .usa-logo .header-logo-link{
	outline-offset: 2px;
	display: block;
}

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

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	header.usa-header .top-navbar {
		padding-top: 16px;
		padding-bottom: 16px;
	}
	.usa-header .top-navbar .grid-container {
		flex-direction: column;
		gap: 10px;
		align-items: center;
	}
	/* Left nav: never shrink */
	.usa-header .top-navbar .top-navbar-links:first-child {
		flex-shrink: 0;
	}
	/* Secondary (right) nav: single row, no wrapping */
	.usa-header .top-navbar .top-navbar-links:nth-child(2) {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
	}
	/* Tighten spacing and font so all 4 items fit on one row */
	.usa-header .top-navbar .top-navbar-links:nth-child(2) > li {
		display: flex;
		align-items: center;
	}
	.usa-header .top-navbar .top-navbar-links:nth-child(2) > li:last-child {
		margin-right: 0;
	}
	/* CTA button: never shrink, tighter padding to save horizontal space */
	.usa-header .top-navbar .top-navbar-links li.cta-link {
		flex-shrink: 0;
	}
	.usa-header .top-navbar .top-navbar-links .cta-link a {
		padding: 12px 14px !important;
	}

	header.usa-header .primary-navbar-container {
		position: relative;
	}
	header.usa-header .usa-navbar {
		margin-right: 0;
		max-width: 200px;
		position: absolute;
	}
		header.usa-header .usa-navbar .usa-logo {
			padding-bottom: 0;
		}
	header.usa-header .primary-navbar-container .usa-nav {

	}
		header.usa-header--extended .usa-nav__inner {
			flex-direction: column;
		}
			header.usa-header .usa-nav__inner .usa-nav__secondary {
				position: initial;
			}

}


/* =============================================================================
   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.
 *
 * 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;
}
*/


/* =============================================================================
   5b. Navigation — mobile header corrections
   ============================================================================= */

/**
 * 1. Logo — USWDS header JS injects style="display:flex" directly on .usa-logo,
 *    overriding the SCSS rule (display:none). !important wins over the inline style.
 */
 #mobile--search-toggle {
	right: 12px;
}

@media (max-width: 1023px) {
	.primary-navbar-container .usa-navbar {
		padding: 8px 12px;
		height: auto;
	}
    .usa-header .usa-navbar .usa-logo {
        display: none !important;
    }
	.usa-header .usa-navbar .navbar-mobile-controls {
		display: flex;
		align-items: center;
		gap: 10px;
		height: initial;
	}
	.usa-header .usa-navbar .navbar-mobile-controls .usa-accordion .usa-accordion__button {
		height: 38px;
	}
	.usa-header .usa-navbar .navbar-mobile-controls .header--mobile-nav-btn {
		height: 38px;
		margin-left: auto;
	}
}
@media (max-width: 1023px) {
	.usa-search.usa-search--small {
		height: initial;
	}
}
/**
 * 2. Pusch Ridge CTA link in the mobile navbar bar.
 *    Matches the desktop .cta-link mixin:
 *    lapo-forest (#003333) text on lapo-pistachio (#BBCAAD) background.
 */
@media (max-width: 1023px) {
    .mobile-web-link a {
        display:         inline-block;
        padding:         10px 14px;
        background-color: #BBCAAD;
        color:           #003333 !important;
        font-weight:     bold;
        text-decoration: none;
        line-height:     1;
        white-space:     nowrap;
    }
    .mobile-web-link a:hover {
        background-color: #F5F4F0;
        color:            #00594F !important;
        text-decoration:  none;
    }
    .mobile-web-link a:focus,
    .mobile-web-link a:focus-visible {
        outline:        2px solid #fff !important;
        outline-offset: 2px !important;
    }
}
@media (max-width: 450px) {
    .usa-header .usa-navbar span.mobile-web-link.navbar-mobile-controls {
        display: none;
    }
}

/* =============================================================================
   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;
}

/**
 * GF gravity-theme custom checkboxes — visible focus ring.
 *
 * GF's gravity-theme hides the native <input type="checkbox"> visually
 * (opacity:0 or clip-path) and uses the adjacent <label>::before as the
 * visual indicator. When keyboard focus lands on the native input the browser
 * default focus ring appears on an invisible element — the user sees nothing.
 *
 * Fix: show a focus ring on the <label> itself when the hidden input is focused.
 * The label is the element the user sees and acts as the click target.
 */
.gform_wrapper.gravity-theme .gfield-choice-input:focus + label,
.gform_wrapper.gravity-theme .gfield-choice-input:focus-visible + label,
.gform_wrapper .gfield--type-consent .gfield-choice-input:focus + label,
.gform_wrapper .gfield--type-consent .gfield-choice-input:focus-visible + label {
	outline:        2px solid #00594F !important;
	outline-offset: 3px !important;
	border-radius:  2px;
}

.gform_wrapper .gfield label {
	color: #fff;
}
.gform_wrapper .gfield label a {
    color: #fff;
	outline-color: #fff;
	outline-offset: 2px;
}
.gform_wrapper.gravity-theme label .gfield_required {
    color: #fff;
}
.gform_wrapper.gravity-theme .gfield_checkbox input[type=checkbox] + label {
	align-items: baseline;
    padding: 5px 0 5px 30px;
	outline-color: #fff;
	outline-offset: 2px;
}
.gform_wrapper.gravity-theme .gfield_checkbox input[type=checkbox] + label::after {
	width: 20px;
    height: 20px;
	margin-top: 4px;
}
.gform_wrapper.gravity-theme .gfield--type-consent input[type=checkbox] {
	opacity: 0;
    float: left;
    width: 0;
    display: none;
}
.gform_wrapper.gravity-theme .gfield--type-consent input[type=checkbox] + label  {
    position: relative;
    padding-left: 30px;
    display: inline-block;
    min-height: 25px;
	padding: 5px 0 5px 30px;
	outline-color: #fff;
	outline-offset: 2px;
}
.gform_wrapper.gravity-theme .gfield--type-consent input[type=checkbox] + label::after {
    position: absolute;
    content: " ";
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
	margin-top: 4px;
    background-color: #fff;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}
.gform_wrapper.gravity-theme .gfield--type-consent input[type=checkbox]:checked + label::after  {
    background-color: #efefef;
    background-image: url('../img/checkbox-check-print.svg');
}

/* =============================================================================
   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.
 *
 * transition-delay: 0ms cancels any TI transition that would delay the show;
 * position: relative allows an injected close button to be positioned inside.
 */
.ti-disclaimer.site-ti-disclaimer-open {
	display:          block !important;
	visibility:       visible !important;
	opacity:          1 !important;
	transition-delay: 0ms !important;
	position:         relative;
}

.ti-disclaimer:not(.site-ti-disclaimer-open) {
	display:    none;
	visibility: hidden;
	opacity:    0;
}

/**
 * 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;
	}
}

.ti-widget .ti-next:is(:focus, :focus-visible),
.ti-widget .ti-prev:is(:focus, :focus-visible) {
	outline: 3px solid #005fcc;
	outline-offset: 3px;
	border-radius: 50%;
}

/* Allow drag/swipe without blocking vertical page scroll.
   grab cursor signals the area is draggable on desktop. */
.ti-widget .ti-reviews-container-wrapper,
.ti-widget .ti-reviews-container {
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
}
.ti-widget .ti-reviews-container-wrapper:active,
.ti-widget .ti-reviews-container:active {
	cursor: grabbing;
}

/**
 * Verified-by-Trustindex tooltip — keyboard open state.
 *
 * fixTrustindexWidget() adds tabindex="0" to .ti-verified-review spans and
 * toggles .site-ti-vtip-open on Enter/Space. The parent .ti-stars needs
 * overflow:visible so the absolutely-positioned tooltip can escape the star
 * container without being clipped.
 */
.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; /* ring is on the trigger span, not the tooltip itself */
}
.ti-stars .ti-verified-review[tabindex="0"]:is(:focus, :focus-visible) {
	outline:        2px solid;
	outline-offset: 2px;
	border-radius:  2px;
}

/**
 * Verified tooltip close button — injected by fixTrustindexWidget().
 * CUSTOMIZE: colors and size.
 */
.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;
}

/**
 * "Verified by Trustindex" info-icon — promoted to disclosure button by JS.
 * Provides a visible focus indicator when tabindex="0" is present.
 */
.ti-info-icon[tabindex="0"]:is(:focus, :focus-visible) {
	outline:        2px solid;
	outline-offset: 3px;
	border-radius:  50%;
}


/* =============================================================================
   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:  #BBCAAD !important;
	color:       #00594F !important;
	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 #FBAF32 !important;
	outline-offset: 2px !important;
}
button#skip-chat.screenreader-text:hover {
	background: #ffffff !important;
	color:      #00594F !important;
}

/**
 * Fancybox / lightbox z-index conflict.
 * Some lightbox plugins add .with-fancybox to <html> and set high z-index
 * layers that can render the chatbot widget inaccessible (hidden behind the
 * overlay). Uncomment when the chatbot is hidden behind a lightbox.
 * CUSTOMIZE: adjust z-index to sit above the lightbox but below critical
 * overlays (modals, consent managers).
 */
/*
html.with-fancybox further-embedded-vsa {
	position: relative;
	z-index:  1 !important;
}
*/


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

/**
 * Blanket animation/transition kill — uncomment on sites where third-party
 * plugins fire animations that cannot be individually targeted below.
 *
 * WHY opt-in rather than always-on:
 * The targeted rules below are precise. This blanket rule also kills functional
 * transitions (focus ring fades, disclosure animations). Enable it only when
 * targeted rules are insufficient.
 */
/*
@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;
	}
}
*/

@media (prefers-reduced-motion: reduce) {
	.site-sub-arrow svg {
		transition: none;
	}
	.site-ti-play-pause,
	.site-ti-disclaimer-close,
	.site-ti-vtip-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.
 *
 * 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.
 */


/* ── 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 ──────────────────────────────────────────────────── */

body.site-lightbox-open {
	overflow: hidden !important;
}

.mfp-wrap.mfp-ready,
.mfp-wrap.mfp-ready .mfp-container {
	overflow: hidden !important;
}


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

.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 */
}
.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
   ============================================================================= */

/*
.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
   ============================================================================= */

/* 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
   ============================================================================= */

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


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

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


/* =============================================================================
   17. Content — split-column lists
   ============================================================================= */

/**
 * Remove bullet markers from presentational ul wrappers.
 *
 * fixSplitColumnList() sets role="presentation" on ul.wp-block-list elements
 * inside split-column layouts. That strips the list semantics from the AT tree,
 * but the CSS list-style-type: disc still renders a ::marker pseudo-element.
 * NVDA announces that marker as "bullet" before every item — defeating the fix.
 * Setting list-style: none here removes the marker entirely.
 */
.wp-block-columns[role="list"] ul.wp-block-list[role="presentation"] {
	list-style: none;
}
.wp-block-columns[role="list"] ul.wp-block-list[role="presentation"] li {
	position: relative;
}
.wp-block-columns[role="list"] ul.wp-block-list[role="presentation"] li:before {
    font-size: 0.8em;
    content: '●' / '';
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: -1.1ch;
    transform: translate(-1.5ch);
    top: 0.5em;
}

/* =============================================================================
   18. Footer — dark-background focus rings
   ============================================================================= */

.usa-footer__secondary-section .link--social:focus,
.usa-footer__secondary-section .link--social:focus-visible,
.usa-footer__secondary-section .address a:focus,
.usa-footer__secondary-section .address a:focus-visible,
.usa-footer__secondary-section .copyright-text a:focus,
.usa-footer__secondary-section .copyright-text a:focus-visible {
	outline:        2px solid #FBAF32 !important;
	outline-offset: 3px !important;
}

ul.link--social-list {
	list-style: none;
	margin:      0;
	padding:     0;
	display:     flex;
	align-items: center;
	gap:         25px;
}

/* Footer 5th-column links — converted from standalone <h3>s to a proper list.
   Styled to visually match the <h3 class="wp-block-heading"> headings in
   columns 1–4 (bold, same color/size, no bullet). */
.footer--widget-area .footer-nav-heading-list {
	list-style: none;
	padding:    0;
	margin:     0;
}
footer#footer .footer--widget-area .footer-nav-heading-list > li {
	margin-bottom: 1em;
}
footer#footer .footer--widget-area .footer-nav-heading-list > li > a {
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    display: block;
}


@media screen and (max-width: 1023px) {
	footer#footer .footer--widget-area .footer-nav-heading-list {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	footer .footer--content .footer--widget-area strong {
		display: block;
	}
	footer .footer--content .footer--widget-area strong a {
		display: block;
	}

}
@media screen and (max-width: 639px) {
	footer#footer .footer--widget-area .footer-nav-heading-list > li {
		margin-bottom: 0;
	}
}