/*
 Theme Name: Chords Child
 Template: chords
 Description: Child theme for Chords
 Version: 1.1
*/

/* -------------------------------------------------------------------------
   Oddusee hero background video
   Only applies when the homepage hero has a background video set for that
   site (body of rules is scoped to #home-slider.has-bg-video), so every
   other site on the network renders exactly as before.
   ---------------------------------------------------------------------- */

#home-slider.has-bg-video {
	position: relative;
	overflow: hidden;
	background-color: rgb(11, 11, 13);
}

#home-slider.has-bg-video .hero-bg-video,
#home-slider.has-bg-video .hero-bg-video-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

#home-slider.has-bg-video .hero-bg-video {
	z-index: 0;
	overflow: hidden;
	background-color: rgb(11, 11, 13);
}

#home-slider.has-bg-video .hero-bg-media {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
	object-fit: cover;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* Darkens the footage just enough for white hero text to stay readable. */
#home-slider.has-bg-video .hero-bg-video-overlay {
	z-index: 1;
	background-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.28) 42%,
		rgba(0, 0, 0, 0.68) 100%
	);
}

#home-slider.has-bg-video .flex-viewport,
#home-slider.has-bg-video .slides {
	position: relative;
	z-index: 2;
}

/* The video is the backdrop now, so slide artwork must not paint over it. */
#home-slider.has-bg-video .slides li {
	background-image: none !important;
	background-color: transparent !important;
}

#home-slider.has-bg-video .flex-control-nav {
	z-index: 20;
}

#home-slider.has-bg-video .slide-content {
	color: rgb(255, 255, 255);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

#home-slider.has-bg-video .slide-title {
	color: rgb(255, 255, 255);
}

#home-slider.has-bg-video .slide-subtitle {
	color: rgb(246, 243, 236);
}