/**
 * Educante Newsletter
 *
 * Colours and fonts are inherited from the Elementor global kit
 * (--e-global-*) so the section follows the site theme. The fallbacks
 * mirror the current kit values and only apply if Elementor is absent.
 */

/*
 * Vertical breathing room inside the section. The same value is used above the
 * content and below it, and is mirrored on the footer side of the dividing
 * rule so the rule sits optically centred between the two blocks.
 */
:root {
	--educante-newsletter-edge: clamp( 44px, 4.5vw, 72px );
}

.educante-newsletter {
	--educante-newsletter-accent: var( --e-global-color-primary, #69bfac );
	--educante-newsletter-accent-contrast: #fff;
	--educante-newsletter-surface: var( --e-global-color-31223ed, #f3faf8 );
	--educante-newsletter-text: var( --e-global-color-text, #32373c );
	--educante-newsletter-radius: 8px;
	--educante-newsletter-gap: 24px;

	box-sizing: border-box;
	width: 100%;
	/*
	 * Spacing above lives in padding, not margin: a margin here collapses
	 * through the wrapper and pushes the footer away, leaving a white strip.
	 * The section must sit flush against the footer.
	 */
	margin: 0;
	/* Small, fixed gap under the content — the footer brings its own spacing. */
	padding: var( --educante-newsletter-edge ) 20px 24px;
	border-bottom: 2px solid var( --educante-newsletter-accent );
	background-color: var( --educante-newsletter-surface );
	color: var( --educante-newsletter-text );
	font-family: var( --e-global-typography-text-font-family, inherit );
}

/* Inside the popup the section is the whole panel — no outer spacing. */
.educante-newsletter-popup .educante-newsletter {
	padding-top: 40px;
}

/*
 * The footer's first Elementor container carries margin-top: 80px, which
 * collapses out of the footer and leaves a white strip under this section.
 * Only that margin is cancelled — the footer's own padding is left alone so
 * its internal layout stays exactly as designed.
 */
.educante-newsletter + footer .footer-width-fixer > .elementor > .elementor-element:first-child,
.educante-newsletter + footer > .footer-width-fixer .elementor-element:first-child {
	margin-top: 0;
}

.educante-newsletter *,
.educante-newsletter *::before,
.educante-newsletter *::after {
	box-sizing: border-box;
}

.educante-newsletter__inner {
	display: flex;
	flex-wrap: wrap;
	/* Align both columns at the top so the field label lines up with the heading. */
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp( 24px, 5vw, 56px );
	max-width: 1140px;
	margin: 0 auto;
}

.educante-newsletter__intro {
	flex: 1 1 340px;
	min-width: 0;
}

.educante-newsletter__heading {
	margin: 0;
	font-family: var( --e-global-typography-primary-font-family, inherit );
	font-size: clamp( 1.5rem, 2.8vw, 2.25rem );
	line-height: 1.15;
	color: var( --educante-newsletter-text );
}

.educante-newsletter__text {
	margin: 20px 0 0;
	font-size: 1rem;
	line-height: 1.6;
	opacity: 0.75;
}

.educante-newsletter__form {
	flex: 1 1 400px;
	min-width: 0;
}

/* --- Fluent Forms overrides, scoped to this section --- */

.educante-newsletter .fluentform .ff-el-group {
	margin-bottom: 14px;
}

.educante-newsletter .fluentform .ff-el-group:last-of-type {
	margin-bottom: 0;
}

.educante-newsletter .fluentform .ff-el-input--label label {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var( --educante-newsletter-text );
}

.educante-newsletter .fluentform .ff-el-form-control {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid rgba( 50, 55, 60, 0.18 );
	border-radius: var( --educante-newsletter-radius );
	background-color: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: var( --educante-newsletter-text );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.educante-newsletter .fluentform .ff-el-form-control:focus {
	border-color: var( --educante-newsletter-accent );
	box-shadow: 0 0 0 3px rgba( 105, 191, 172, 0.25 );
	outline: none;
}

/* Consent checkbox */

.educante-newsletter .fluentform .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.875rem;
	line-height: 1.5;
	cursor: pointer;
}

.educante-newsletter .fluentform .ff-el-form-check-input {
	--educante-checkbox-size: 18px;

	flex: 0 0 auto;
	width: var( --educante-checkbox-size );
	height: var( --educante-checkbox-size );
	/*
	 * Centre the box on the first text line instead of using a fixed offset,
	 * so it stays aligned whatever font size the theme applies.
	 */
	margin-top: calc( ( 1em * 1.5 - var( --educante-checkbox-size ) ) / 2 );
	accent-color: var( --educante-newsletter-accent );
	cursor: pointer;
}

.educante-newsletter .fluentform .ff-el-form-check-label a {
	color: var( --educante-newsletter-accent );
	text-decoration: underline;
}

/* Submit button */

/* Understated text button — the section should read as part of the page. */
.educante-newsletter .fluentform .ff-btn-submit {
	min-height: 44px;
	margin-top: 4px;
	padding: 10px 28px;
	border: none;
	border-radius: var( --educante-newsletter-radius );
	background-color: var( --educante-newsletter-accent );
	color: var( --educante-newsletter-accent-contrast );
	font-family: var( --e-global-typography-accent-font-family, inherit );
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.educante-newsletter .fluentform .ff-btn-submit:hover,
.educante-newsletter .fluentform .ff-btn-submit:focus-visible {
	filter: brightness( 0.93 );
}

.educante-newsletter .fluentform .ff-btn-submit:active {
	transform: translateY( 1px );
}

.educante-newsletter .fluentform .ff-el-group {
	text-align: left;
}

/* Validation and confirmation messages */

.educante-newsletter .fluentform .error,
.educante-newsletter .fluentform .text-danger,
.educante-newsletter .fluentform .ff-el-is-error .error {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #c0392b;
}

.educante-newsletter .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #c0392b;
}

.educante-newsletter .ff-message-success {
	padding: 16px 20px;
	border: 1px solid var( --educante-newsletter-accent );
	border-radius: var( --educante-newsletter-radius );
	background-color: #fff;
	font-size: 1rem;
	line-height: 1.5;
}

/* --- Unsubscribe page --- */

.educante-unsub {
	max-width: 560px;
	margin: 0 auto;
	padding: 8px 0 24px;
	font-family: var( --e-global-typography-text-font-family, inherit );
	color: var( --e-global-color-text, #32373c );
}

.educante-unsub__title {
	margin: 0 0 12px;
	font-family: var( --e-global-typography-primary-font-family, inherit );
	font-size: clamp( 1.5rem, 3vw, 2rem );
	line-height: 1.2;
}

.educante-unsub__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	opacity: 0.85;
}

.educante-unsub--success .educante-unsub__title {
	color: var( --e-global-color-primary, #69bfac );
}

.educante-unsub--error .educante-unsub__title {
	color: #c0392b;
}

.educante-unsub__form {
	margin-top: 24px;
}

.educante-unsub__label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.educante-unsub__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.educante-unsub__input {
	flex: 1 1 240px;
	min-width: 0;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid rgba( 50, 55, 60, 0.18 );
	border-radius: 8px;
	background-color: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: inherit;
}

.educante-unsub__input:focus {
	border-color: var( --e-global-color-primary, #69bfac );
	box-shadow: 0 0 0 3px rgba( 105, 191, 172, 0.25 );
	outline: none;
}

.educante-unsub__button {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 12px 28px;
	border: none;
	border-radius: 8px;
	background-color: var( --e-global-color-primary, #69bfac );
	color: #fff;
	font-family: var( --e-global-typography-accent-font-family, inherit );
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.educante-unsub__button:hover,
.educante-unsub__button:focus-visible {
	filter: brightness( 0.93 );
}

@media ( max-width: 480px ) {
	.educante-unsub__button {
		width: 100%;
	}
}

/* Mobile: stack everything, keep the tap target large */

@media ( max-width: 782px ) {
	.educante-newsletter__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
	}

	/*
	 * Stacked, the flex-basis of each column would act as a minimum HEIGHT and
	 * leave a large gap, so both fall back to their content height.
	 */
	.educante-newsletter__intro,
	.educante-newsletter__form {
		flex: 0 0 auto;
	}

	.educante-newsletter .fluentform .ff-btn-submit {
		width: 100%;
	}
}

@media ( max-width: 400px ) {
	.educante-newsletter {
		padding-left: 16px;
		padding-right: 16px;
	}

	.educante-newsletter__heading {
		font-size: 1.25rem;
	}
}