/*
 * ARVE-compatible CSS for A+A Responsive Video Replacement.
 *
 * The `html` prefix reproduces ARVE's specificity bump, which is what let it
 * override theme rules on .arve wrappers.
 */

html .arve,
html .wp-block-nextgenthemes-arve-block {
	display: block;
	width: auto;
	margin-bottom: 1.5em;
	transition: max-width 0.35s ease-in-out, margin 0.35s ease-in-out;
}

html .arve.alignfull {
	max-width: 100dvw !important;
}

html .arve.alignleft,
html .arve.alignright {
	margin-top: 0.4em;
	width: 100%;
}

html .arve.alignleft {
	margin-right: 1.5em;
}

html .arve.alignright {
	margin-left: 1.5em;
}

html .arve.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

html .arve-inner {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
}

html .arve-embed {
	display: block;
	position: relative;
	width: 100%;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

html .arve-embed--has-aspect-ratio {
	aspect-ratio: 16 / 9;
}

html .arve-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #000;
}

html .arve-video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	background-color: #000;
}

html .arve-fallback-link {
	display: inline-block;
	word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
	html .arve,
	html .wp-block-nextgenthemes-arve-block {
		transition: none;
	}
}