/**
 * Brookhaven Performance — YouTube facade + Load More.
 *
 * The facade stands in for an <iframe>, so it has to take the geometry the
 * theme already gives iframes. Theme rules that size a video by element name
 * (style.css) name .bfd-yt alongside iframe; the two rules below cover the
 * ported live.css, which is kept byte-for-byte and is not edited here.
 */

.rounded .bfd-yt {
	border-radius: 20px;
}

/* --- The facade ------------------------------------------------- */

.bfd-yt {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #000;
}

/* When core's embed stylesheet is loaded it reserves the 16:9 box with a
   padding pseudo-element and lays the iframe over it. The facade carries its
   own aspect ratio, so that reservation would double the height. */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:has( > .bfd-yt )::before {
	content: none;
}

.bfd-yt__button {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.bfd-yt__thumb {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	/* Contained on black, exactly as the player letterboxes or pillarboxes a
	   video whose shape does not match the frame it was placed in. */
	object-fit: contain;
	border-radius: inherit;
}

.bfd-yt__glyph {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.bfd-yt__glyph-bg {
	fill: #212121;
	fill-opacity: 0.8;
	transition: fill 0.15s ease, fill-opacity 0.15s ease;
}

.bfd-yt__glyph-arrow {
	fill: #fff;
}

.bfd-yt__button:hover .bfd-yt__glyph-bg,
.bfd-yt__button:focus-visible .bfd-yt__glyph-bg {
	fill: #f00;
	fill-opacity: 1;
}

.bfd-yt__button:focus-visible {
	outline: 3px solid #29499b;
	outline-offset: 3px;
}

/* The real player, once the visitor has asked for it. */
.bfd-yt > iframe.bfd-yt__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
}

/* Side-by-side videos are sized by height, with width falling out of the
   aspect ratio. A block-level box would fill the row instead, so the facade
   shrinks to fit the way the replaced iframe did. */
.service-videos .service-video .bfd-yt {
	display: inline-block;
}

/* --- Load More --------------------------------------------------- */

.bfd-more {
	margin: 30px 0 60px;
	text-align: center;
}

.bfd-more__button {
	display: inline-block;
	padding: 14px 34px;
	border: 2px solid #29499b;
	border-radius: 30px;
	color: #29499b;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	background: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bfd-more__button:hover,
.bfd-more__button:focus-visible {
	background: #29499b;
	color: #fff;
}

.bfd-more--busy .bfd-more__button {
	opacity: 0.6;
	pointer-events: none;
}

.bfd-more__status {
	margin: 12px 0 0;
	font-size: 16px;
	color: #161616;
}

.bfd-more__status:empty {
	display: none;
}