/*
 * Editable section wrapper for admin-managed page layouts.
 */

.eventit-section {
	position: relative;
	width: 100%;
	padding-block: clamp(3.25rem, 7vw, 5.5rem);
	color: var(--color-on-dark-muted, rgba(255, 255, 255, 0.76));
}

.eventit-section.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.editor-styles-wrapper .eventit-section.alignfull {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

.eventit-section--spacing-none {
	padding-block: 0;
}

.eventit-section--spacing-compact {
	padding-block: clamp(2rem, 4vw, 3rem);
}

.eventit-section--spacing-large {
	padding-block: clamp(4.5rem, 9vw, 7rem);
}

.eventit-section__inner {
	width: min(calc(100% - 2rem), var(--site-max-width, 78rem));
	margin-inline: auto;
}

.eventit-section__inner--narrow {
	width: min(calc(100% - 2rem), var(--content-max-width, 54rem));
}

.eventit-section__inner--full {
	width: 100%;
	max-width: none;
}

.eventit-section__inner > * {
	margin-top: 0;
}

.eventit-section__inner > *:last-child {
	margin-bottom: 0;
}

.eventit-section__inner > * + * {
	margin-top: var(--space-xl, 2rem);
}

/*
 * A component keeps its standalone colour preset as a fallback, but an
 * Event IT Section is the source of truth when the component is nested.
 * This lets editors build the homepage colour rhythm with section presets
 * without every component painting an opaque band over its wrapper.
 */
.eventit-section__inner > .feature-showcase,
.eventit-section__inner > .solution-showcase,
.eventit-section__inner > .cta-centered,
.eventit-section__inner > .review-grid-section,
.eventit-section__inner > .case-study,
.eventit-section__inner > .faq-accordion {
	background: transparent;
}

.eventit-section__inner > .cta-centered {
	padding-block: 0;
}

.eventit-section__inner > .faq-accordion {
	padding-block: 0;
}

.eventit-section--blue {
	background: var(--color-blue-overlay, #002238);
	color: var(--color-on-dark-muted, rgba(255, 255, 255, 0.76));
}

.eventit-section--blue-white-split {
	background: linear-gradient(
		180deg,
		var(--color-blue-overlay, #002238) 0,
		var(--color-blue-overlay, #002238) clamp(32rem, 48%, 42rem),
		#fff clamp(32rem, 48%, 42rem),
		#fff 100%
	);
	color: var(--color-on-dark-muted, rgba(255, 255, 255, 0.76));
}

.eventit-section--white {
	background: #fff;
	color: var(--color-grey-charcoal, #515151);
}

.eventit-section--grey {
	background: var(--color-surface-light, #f1f1f1);
	color: var(--color-blue-dark, #022a44);
}

.site-main .eventit-section--blue h1,
.site-main .eventit-section--blue h2,
.site-main .eventit-section--blue h3,
.site-main .eventit-section--blue h4,
.site-main .eventit-section--blue h5,
.site-main .eventit-section--blue h6,
.site-main .eventit-section--blue-white-split h1,
.site-main .eventit-section--blue-white-split h2,
.site-main .eventit-section--blue-white-split h3,
.site-main .eventit-section--blue-white-split h4,
.site-main .eventit-section--blue-white-split h5,
.site-main .eventit-section--blue-white-split h6,
.editor-styles-wrapper .eventit-section--blue h1,
.editor-styles-wrapper .eventit-section--blue h2,
.editor-styles-wrapper .eventit-section--blue h3,
.editor-styles-wrapper .eventit-section--blue h4,
.editor-styles-wrapper .eventit-section--blue h5,
.editor-styles-wrapper .eventit-section--blue h6,
.editor-styles-wrapper .eventit-section--blue-white-split h1,
.editor-styles-wrapper .eventit-section--blue-white-split h2,
.editor-styles-wrapper .eventit-section--blue-white-split h3,
.editor-styles-wrapper .eventit-section--blue-white-split h4,
.editor-styles-wrapper .eventit-section--blue-white-split h5,
.editor-styles-wrapper .eventit-section--blue-white-split h6 {
	color: var(--color-white, #f1f1f1);
}

.site-main .eventit-section--white h1,
.site-main .eventit-section--white h2,
.site-main .eventit-section--white h3,
.site-main .eventit-section--white h4,
.site-main .eventit-section--white h5,
.site-main .eventit-section--white h6,
.site-main .eventit-section--grey h1,
.site-main .eventit-section--grey h2,
.site-main .eventit-section--grey h3,
.site-main .eventit-section--grey h4,
.site-main .eventit-section--grey h5,
.site-main .eventit-section--grey h6,
.editor-styles-wrapper .eventit-section--white h1,
.editor-styles-wrapper .eventit-section--white h2,
.editor-styles-wrapper .eventit-section--white h3,
.editor-styles-wrapper .eventit-section--white h4,
.editor-styles-wrapper .eventit-section--white h5,
.editor-styles-wrapper .eventit-section--white h6,
.editor-styles-wrapper .eventit-section--grey h1,
.editor-styles-wrapper .eventit-section--grey h2,
.editor-styles-wrapper .eventit-section--grey h3,
.editor-styles-wrapper .eventit-section--grey h4,
.editor-styles-wrapper .eventit-section--grey h5,
.editor-styles-wrapper .eventit-section--grey h6 {
	color: var(--color-blue-dark, #022a44);
}

.site-main .eventit-section--blue a:not(.btn),
.site-main .eventit-section--blue-white-split a:not(.btn),
.editor-styles-wrapper .eventit-section--blue a:not(.btn),
.editor-styles-wrapper .eventit-section--blue-white-split a:not(.btn) {
	color: var(--color-white, #f1f1f1);
	text-decoration: none;
	text-decoration-color: rgba(255, 255, 255, 0.45);
	text-underline-offset: 0.16em;
}

.site-main .eventit-section--blue a:not(.btn):hover,
.site-main .eventit-section--blue a:not(.btn):focus,
.site-main .eventit-section--blue-white-split a:not(.btn):hover,
.site-main .eventit-section--blue-white-split a:not(.btn):focus,
.editor-styles-wrapper .eventit-section--blue a:not(.btn):hover,
.editor-styles-wrapper .eventit-section--blue a:not(.btn):focus,
.editor-styles-wrapper .eventit-section--blue-white-split a:not(.btn):hover,
.editor-styles-wrapper .eventit-section--blue-white-split a:not(.btn):focus {
	color: var(--color-grey-light, #a6a4a4);
	text-decoration: underline;
}

.site-main .eventit-section--white a:not(.btn),
.site-main .eventit-section--grey a:not(.btn),
.editor-styles-wrapper .eventit-section--white a:not(.btn),
.editor-styles-wrapper .eventit-section--grey a:not(.btn) {
	color: var(--color-brand-red, #b80000);
	text-decoration: none;
	text-decoration-color: rgba(184, 0, 0, 0.35);
	text-underline-offset: 0.16em;
}

.site-main .eventit-section--white a:not(.btn):hover,
.site-main .eventit-section--white a:not(.btn):focus,
.site-main .eventit-section--grey a:not(.btn):hover,
.site-main .eventit-section--grey a:not(.btn):focus,
.editor-styles-wrapper .eventit-section--white a:not(.btn):hover,
.editor-styles-wrapper .eventit-section--white a:not(.btn):focus,
.editor-styles-wrapper .eventit-section--grey a:not(.btn):hover,
.editor-styles-wrapper .eventit-section--grey a:not(.btn):focus {
	color: var(--color-blue-dark, #022a44);
	text-decoration: underline;
}

/* Article-style lists on grey sections use navy links (see the support page). */
.site-main .eventit-section--grey ul.wp-block-list a:not(.btn),
.editor-styles-wrapper .eventit-section--grey ul.wp-block-list a:not(.btn) {
	color: var(--color-blue-dark, #022a44);
}

@media (max-width: 47.9375rem) {
	.eventit-section {
		padding-block: 3rem;
	}

	.eventit-section--spacing-none {
		padding-block: 0;
	}

	.eventit-section--spacing-compact {
		padding-block: 2rem;
	}

	.eventit-section--spacing-large {
		padding-block: 4rem;
	}
}