/*
 * Harmoni — WordPress-specific styles.
 *
 * css/all.css is the designer's build and must not be edited. Anything that
 * only exists because the site runs on WordPress (Contact Form 7 chrome,
 * plugin output) belongs here.
 */

/* Contact Form 7 */

/* The design only draws an error border on <input>/<textarea>; the styled
   selects are jQuery UI selectmenu buttons, so mirror the state onto them. */
.wpcf7-form-control-wrap.error .select-item .ui-selectmenu-button,
.wpcf7-form-control-wrap.error .ui-selectmenu-button {
	border-color: var(--red);
}

/* CF7's own validation tips are replaced by .error-msg (see static/js/theme.js). */
.wpcf7-not-valid-tip {
	display: none !important;
}

/* CF7 wraps every control in its own span; the theme demotes it to
   .wpcf7-inner so it never competes with the design's .wpcf7-form-control-wrap
   grid cell. Keep it out of the layout entirely. */
.wpcf7-inner {
	display: block;
}

/* Form-level response message ("one or more fields have an error", mail
   failures, …). Success is handled by the thank-you popup instead. */
.wpcf7 form .wpcf7-response-output,
.wpcf7-form .wpcf7-response-output {
	margin: max(16px, 20rem) 0 0;
	padding: max(12px, 14rem) max(16px, 18rem);
	font-size: var(--min);
	line-height: 130%;
	letter-spacing: -0.02em;
	color: var(--red);
	border: 1px solid var(--red);
	border-radius: max(4px, 4rem);
}

/* CF7 sets its own per-state border colours at a higher specificity, so match
   it selector-for-selector. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	color: var(--red);
	border-color: var(--red);
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output {
	color: var(--ocean);
	border-color: var(--ocean_20);
}

/* Keep the submit spinner from pushing the button around. */
.wpcf7-spinner {
	position: absolute;
	margin: 0 0 0 max(12px, 12rem);
}

.form-button {
	position: relative;
}

.fusion-text p img{
	    width: 100%;
    object-fit: contain;
}

/* Section video blocks */

/* Sections reuse the case study's .case-video cover + play button. That block
   is sized for the case layout (a fixed height), so hold the design's 16:9
   ratio instead when it sits inside a section. */
.section-video {
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: max(10px, 10rem);
}

.problem-video {
	margin: max(36px, 50rem) 0 0;
}

.approach-video {
	margin: max(24px, 30rem) 0 0;
}

/* YouTube popups embed an <iframe> where the design has a <video>. */
.video-popup-wrap .video-frame {
	display: block;
	border: 0;
}

/* The marquee logo is a <div> for hand-picked partners and an <a> when it links
   to an event; the design's styles hang off .partner-logo either way. */
a.partner-logo {
	display: block;
}