/*
 * MHG Academy — theme additions.
 * assets/css/legacy-design.css holds the site's existing design rules (extracted from the previous
 * theme/plugins, only the rules the site uses). Put new or changed rules here, not in that file.
 */

/* Fallback header (only when the core plugin is inactive). */
.mhg-fallback-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5em 0;
}

/* Embedded videos (lessons): the old theme sized these with JS; the design CSS makes the
   embed figure a flex box, so the wrapper needs an explicit width and ratio. */
.wp-block-embed .wp-block-embed__wrapper {
	width: 100%;
}
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
	position: relative;
}
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}
.wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
	padding-top: 75%;
}
.wp-block-embed.wp-has-aspect-ratio iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Screen-reader skip link. */
.skip-link.screen-reader-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	z-index: 100000;
	padding: 0.5em 1em;
	background: #fff;
}

/* Contact Form 7 submit button states. CF7 keeps the button disabled until the acceptance box is
   checked, and adds .submitting to the form while a request is running. */
.wpcf7 .wpcf7-submit-style .wpcf7-submit[disabled],
.wpcf7 .wpcf7-submit-style .wpcf7-submit[disabled]:hover {
	cursor: not-allowed !important;
}
.wpcf7 .wpcf7-submit-style:hover .wpcf7-submit[disabled] + .submit-style-in {
	background-color: var(--theme-color-text_light) !important;
}
.wpcf7 .wpcf7-submit-style .wpcf7-submit:focus-visible + .submit-style-in {
	outline: 2px solid var(--theme-color-text_hover3);
	outline-offset: 3px;
}
.wpcf7 form.submitting .wpcf7-submit-style {
	opacity: .7;
}
.wpcf7 form.submitting .wpcf7-submit-style .wpcf7-submit {
	cursor: progress !important;
}

/* Header placed over the page content (pages with "Header position: over"): on phones the hero behind it
   is a photo or a colour (e.g. the About page), so the header row keeps the background of its colour scheme
   there instead of being transparent. On wider screens it stays transparent until the page is scrolled. */
@media (max-width: 767px) {
	body.header_position_over .top_panel .sc_layouts_row.elementor-section[class*="scheme_"] {
		background-color: var(--theme-color-bg_color);
	}
}