/*
 * Accessibility (WCAG 2.1 AA) overrides, loaded after the theme's other styles
 * (enqueued in functions.php). Several rules need !important to win over the Custom CSS & JS
 * snippets, which print their styles later in the page.
 * The accent color (Customizer, #00baf2) is darkened to #007ea5 in functions.php.
 */

/* Footer
--------------------------------------------- */

/* Contact card text was #b2b3b5 (3.9:1) and its links #a4a8ac (3.4:1) on the navy footer */
body .site-footer,
body .footer-widgets,
body .site-footer a,
body .footer-widgets a {
	color: #dcdddf;
}

body .site-footer a:hover,
body .site-footer a:focus,
body .footer-widgets a:hover,
body .footer-widgets a:focus {
	color: #fff;
}

/* The copyright line was faded to 40% opacity (1.7:1); keep it quieter than the rest at 4.9:1 */
body .site-footer > .wrap > p {
	opacity: 1 !important;
	color: #c8c9cb;
}

/* Text colors
--------------------------------------------- */

/* Testimonial quote attributions ("–Mike") were #999 (2.8:1) */
body cite {
	color: #6b6b6b;
}

/* Home slider
--------------------------------------------- */

/* The slide dots are 12px buttons 20px apart; space them 26px apart so each has a 24px target
   (2.5.8) without changing their size */
body .n2-bullet {
	margin: 0 7px !important;
}

/* Best of Las Vegas badges
--------------------------------------------- */

/* The desktop and mobile badges swap by hiding the image, which left the hidden one's link as an
   invisible tab stop. Hide the whole widget instead. */
.widget_media_image:has(img.bolv-banner-mobile) {
	display: none;
}

@media (max-width: 767px) {
	.widget_media_image:has(img.bolv-banner-mobile) {
		display: block;
	}

	.widget_media_image:has(img.bolv-banner-desktop) {
		display: none;
	}
}

/* Background video pause button (added in functions.php)
--------------------------------------------- */

.a11y-video-pause {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 5;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.a11y-video-pause:hover,
.a11y-video-pause:focus {
	background: #000 !important;
}

.a11y-video-pause:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Text over photos and video
--------------------------------------------- */

/* Home hero: white text over the office photo had only a 15% dark overlay (2.2:1 where the wall
   is bright). Darken the band behind the heading and intro; the edges stay lighter. */
body .front-page-1.page-header:before {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.3) 0%,
		rgba(0, 0, 0, 0.62) 28%,
		rgba(0, 0, 0, 0.62) 78%,
		rgba(0, 0, 0, 0.3) 100%
	) !important;
	opacity: 1 !important;
}

/* Spanish home: the same heading and intro sit straight on the video (about 1:1 on the white
   parts). Dim the video itself so the text (outside its container) stays on top. */
#test-video-swap-container video {
	filter: brightness(0.45);
}

/* Until the video loads (or if it doesn't) the white text would sit on white. The video is
   positioned, so it still paints over this background once it plays. */
body .es-home .wrap:has(> #custom_html-3) {
	background-color: #1f2a33;
}

/* Smile transformations slider: navy and white captions on the bright blue pattern were
   2.8-2.9:1. Darken the slide background (not the photos) and make the heading white. */
body .n2-ss-align:has(.n2-font-7a8d5fc077778e2ab8210e982a84c161-hover) {
	/* painted over the pattern image but under the slides and their photos */
	box-shadow: inset 0 0 0 100vmax rgba(0, 45, 80, 0.55);
}

body .n2-font-7a8d5fc077778e2ab8210e982a84c161-hover,
body .n2-font-7a8d5fc077778e2ab8210e982a84c161-hover * {
	color: #fff !important;
}

/* The current slide's dot was navy, which the darker background swallowed: make it bright blue
   with a white ring so it stands apart from the white dots */
body .n2-bullet.n2-active {
	background-color: #00baf2 !important;
	box-shadow: 0 0 0 2px #fff;
}

/* Spanish home: the header's "In English" link is dark text over the (now dimmed) video */
@media (min-width: 897px) {
	body .nav-es .genesis-nav-menu > .menu-item > a {
		color: #fff;
	}
}

/* About page "Our motto" banner text was #647585 on the grey band (4.4:1) */
body .grey-banner > p {
	color: #56646f;
}