/**
 * Formularios de HubSpot con la cara de macmillan/formulario.
 *
 * Solo el embed de desarrollador (<div class="hs-form-html">): ese pinta el
 * formulario en nuestra pagina. El de iframe (hs-form-frame) es de HubSpot y no
 * hay CSS que le llegue.
 *
 * Se maqueta con las variables --hsf-* que HubSpot deja para eso: sus reglas
 * leen var(--hsf-x, var(--hsf-default-x)), y las --hsf-default-* son lo que se
 * elige en su editor. Puestas en el contenedor ganan a eso sin pelear por
 * especificidad. Las medidas son las de formulario/style.css.
 */
.hs-form-html {
	--hsf-global__font-family: var( --font );
	--hsf-global__font-size: var( --body-size );
	--hsf-global__color: var( --text );
	--hsf-global__error-color: var( --sem-error );

	/* La tarjeta. */
	--hsf-background__background-color: var( --surface );
	--hsf-background__background-image: none;
	--hsf-background__border-style: none;
	--hsf-background__border-radius: 24px;
	--hsf-background__padding: 40px;

	--hsf-row__horizontal-spacing: 20px;
	--hsf-row__vertical-spacing: var( --s-5 );
	--hsf-module__vertical-spacing: var( --s-2 );

	--hsf-heading__font-family: var( --font );
	--hsf-heading__color: var( --text );
	--hsf-richtext__font-family: var( --font );
	--hsf-richtext__font-size: var( --body-sm-size );
	--hsf-richtext__color: var( --text-soft );

	--hsf-field-label__font-family: var( --font );
	--hsf-field-label__font-size: var( --body-size );
	--hsf-field-label__color: var( --text );
	--hsf-field-label-requiredindicator__color: var( --text );
	--hsf-field-description__font-family: var( --font );
	--hsf-field-description__font-size: var( --body-sm-size );
	--hsf-field-description__color: var( --text-soft );
	--hsf-field-footer__font-family: var( --font );
	--hsf-field-footer__font-size: var( --body-sm-size );
	--hsf-field-footer__color: var( --text-soft );

	/* Los campos: borde de 1 en el gris funcional, radio 8 y 14 de relleno. */
	--hsf-field-input__font-family: var( --font );
	--hsf-field-input__font-size: var( --body-size );
	--hsf-field-input__color: var( --text );
	--hsf-field-input__background-color: var( --surface );
	--hsf-field-input__placeholder-color: var( --text-soft );
	--hsf-field-input__border-color: var( --border-fn );
	--hsf-field-input__border-style: solid;
	--hsf-field-input__border-width: 1px;
	--hsf-field-input__border-radius: var( --rad-sm );
	--hsf-field-input__padding: 14px 16px;

	--hsf-field-textarea__font-family: var( --font );
	--hsf-field-textarea__font-size: var( --body-size );
	--hsf-field-textarea__color: var( --text );
	--hsf-field-textarea__background-color: var( --surface );
	--hsf-field-textarea__placeholder-color: var( --text-soft );
	--hsf-field-textarea__border-color: var( --border-fn );
	--hsf-field-textarea__border-style: solid;
	--hsf-field-textarea__border-width: 1px;
	--hsf-field-textarea__border-radius: var( --rad-sm );
	--hsf-field-textarea__padding: 14px 16px;

	--hsf-field-dropdown-options__border-radius: var( --rad-sm );

	--hsf-field-checkbox__color: var( --accent );
	--hsf-field-checkbox__background-color: var( --surface );
	--hsf-field-checkbox__border-color: var( --border-fn );
	--hsf-field-checkbox__border-style: solid;
	--hsf-field-checkbox__border-width: 1px;
	--hsf-field-radio__color: var( --accent );
	--hsf-field-radio__background-color: var( --surface );
	--hsf-field-radio__border-color: var( --border-fn );
	--hsf-field-radio__border-style: solid;
	--hsf-field-radio__border-width: 1px;

	/* El boton, el de .mm-boton: pildora roja con el borde de 2 transparente
	   que le cuadra el alto. Sin la bolita del hover, que pide un ::before que
	   el boton de HubSpot no tiene: el rojo oscuro entra de golpe. */
	--hsf-button__font-family: var( --font );
	--hsf-button__font-size: var( --body-size );
	--hsf-button__font-weight: 600;
	--hsf-button__color: var( --text-inverse );
	--hsf-button__background-color: var( --accent );
	--hsf-button__background-image: none;
	--hsf-button__border-style: solid;
	--hsf-button__border-width: 2px;
	--hsf-button__border-color: transparent;
	--hsf-button__border-radius: var( --rad-pill );
	--hsf-button__padding: calc( var( --s-3 ) - 2px ) calc( var( --s-5 ) - 2px );
	--hsf-button__box-shadow: none;
	--hsf-button--hover__background-color: var( --accent-hover );
	--hsf-button--hover__color: var( --text-inverse );
	--hsf-button--focus__background-color: var( --accent-hover );
	--hsf-button--focus__color: var( --text-inverse );
	--hsf-navigationrow-buttons-single__justify-content: start;

	--hsf-erroralert__font-family: var( --font );
	--hsf-erroralert__font-size: var( --body-sm-size );
	--hsf-erroralert__color: var( --sem-error );
	--hsf-infoalert__font-family: var( --font );
	--hsf-infoalert__font-size: var( --body-sm-size );
	--hsf-infoalert__color: var( --text );
}

/* Lo que HubSpot no saca a variable: el peso de las etiquetas y el foco. */
.hs-form-html .hsfc-FieldLabel {
	font-weight: 600;
}

/* El rotulo de una casilla es una frase, no un nombre de campo: peso normal,
   como el consentimiento de macmillan/formulario. */
.hs-form-html .hsfc-CheckboxField .hsfc-FieldLabel {
	font-weight: 400;
}

/* La imagen de cabecera que se pone en HubSpot va de fondo, con un
   background-size: auto en linea: en media columna se cortaba. Contra un estilo
   en linea de HubSpot solo vale el !important. */
.hs-form-html .hsfc-Step__Banner {
	background-size: contain !important;
}

.hs-form-html :is( input, select, textarea, button ):focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: 2px;
}

/* ------------------------------ Banda de foto y formulario (patron)
 *
 * macmillan/hubspot-imagen: la foto y el formulario a media banda. Las columnas
 * se estiran a lo que mida el formulario y la foto llena la suya, recortada:
 * aqui es ambiente, no producto.
 */
.mm-banda .mm-hubspot__fila.wp-block-columns {
	gap: var( --s-8 );
}

/* La foto y el formulario arrancan a la misma altura: fuera el margen que el
   editor pone entre bloques. */
.mm-hubspot__fila .wp-block-column > * {
	margin-block: 0;
}

/* Es un core/cover: su foto ya va recortada a la caja. Vertical y con su
   proporcion, no con el alto del formulario, que la dejaba altisima. */
.mm-hubspot__foto.wp-block-cover {
	min-height: 0;
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
}

/* Movil, como la tarjeta del formulario: menos relleno y menos hueco. La foto,
   apilada encima, con una proporcion fija en vez de la altura del formulario. */
@media ( max-width: 767px ) {
	.hs-form-html {
		--hsf-background__padding: 28px 22px;
		--hsf-background__border-radius: var( --rad-lg );
		--hsf-row__vertical-spacing: 18px;
	}

	.mm-banda .mm-hubspot__fila.wp-block-columns {
		gap: var( --s-4 );
	}

	.mm-hubspot__foto.wp-block-cover {
		aspect-ratio: 4 / 3;
		border-radius: var( --rad-lg );
	}
}