:root { --ecs-event-banner-height: 0px; }

.ecs-event-banner {
	--ecs-event-banner-bg: var(--ecs_dblue);
	--ecs-event-banner-text: var(--ecs_white);
	background: var(--ecs-event-banner-bg);
	color: var(--ecs-event-banner-text);
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 10001;
}

.ecs-event-banner--dark-blue { --ecs-event-banner-bg: var(--ecs_dblue); --ecs-event-banner-text: var(--ecs_white); }
.ecs-event-banner--cyan { --ecs-event-banner-bg: var(--ecs_cyan); --ecs-event-banner-text: var(--ecs_dblue); }
.ecs-event-banner--dark-cyan { --ecs-event-banner-bg: var(--ecs_dcyan); --ecs-event-banner-text: var(--ecs_dblue); }
.ecs-event-banner--orange { --ecs-event-banner-bg: var(--ecs_orange); --ecs-event-banner-text: var(--ecs_dblue); }
.ecs-event-banner--purple { --ecs-event-banner-bg: var(--ecs_purple); --ecs-event-banner-text: var(--ecs_dblue); }
.ecs-event-banner--light-blue { --ecs-event-banner-bg: var(--ecs_lblue); --ecs-event-banner-text: var(--ecs_white); }
.ecs-event-banner--bright-blue { --ecs-event-banner-bg: var(--ecs_bblue); --ecs-event-banner-text: var(--ecs_dblue); }
.ecs-event-banner--gray { --ecs-event-banner-bg: var(--ecs_gray); --ecs-event-banner-text: var(--ecs_dblue); }
.ecs-event-banner--white { --ecs-event-banner-bg: var(--ecs_white); --ecs-event-banner-text: var(--ecs_dblue); }

body.ecs-has-event-banner .header-section {
	top: var(--ecs-event-banner-height) !important;
}

.ecs-event-banner__inner {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 52px;
	padding-bottom: 9px;
	padding-top: 9px;
	position: relative;
}

.ecs-event-banner__content {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: center;
	max-width: calc(100% - 70px);
}

.ecs-event-banner__logo {
	display: block;
	flex: 0 0 auto;
	height: auto;
	max-height: 34px;
	max-width: 150px;
	width: auto;
}

.ecs-event-banner__message {
	color: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
	text-align: center;
}

.ecs-event-banner__button,
.ecs-event-banner__button:visited {
	--ecs-banner-button-bg: var(--ecs_cyan);
	--ecs-banner-button-text: var(--ecs_dblue);
	background: var(--ecs-banner-button-bg) !important;
	border-color: var(--ecs-banner-button-bg) !important;
	color: var(--ecs-banner-button-text) !important;
	flex: 0 0 auto;
	margin: 0;
	min-width: 0;
	padding: 0 !important;
	transform: none !important;
}

.ecs-event-banner__button span {
	display: inline-block;
	padding: 15px 20px;
}
.ecs-event-banner__button:hover,
.ecs-event-banner__button:focus,
.ecs-event-banner__button:active {
	transform: none !important;
}

.ecs-event-banner__button--dark-blue { --ecs-banner-button-bg: var(--ecs_dblue); --ecs-banner-button-text: var(--ecs_white); }
.ecs-event-banner__button--cyan { --ecs-banner-button-bg: var(--ecs_cyan); --ecs-banner-button-text: var(--ecs_dblue); }
.ecs-event-banner__button--dark-cyan { --ecs-banner-button-bg: var(--ecs_dcyan); --ecs-banner-button-text: var(--ecs_dblue); }
.ecs-event-banner__button--orange { --ecs-banner-button-bg: var(--ecs_orange); --ecs-banner-button-text: var(--ecs_dblue); }
.ecs-event-banner__button--purple { --ecs-banner-button-bg: var(--ecs_purple); --ecs-banner-button-text: var(--ecs_dblue); }
.ecs-event-banner__button--light-blue { --ecs-banner-button-bg: var(--ecs_lblue); --ecs-banner-button-text: var(--ecs_white); }
.ecs-event-banner__button--bright-blue { --ecs-banner-button-bg: var(--ecs_bblue); --ecs-banner-button-text: var(--ecs_dblue); }
.ecs-event-banner__button--gray { --ecs-banner-button-bg: var(--ecs_gray); --ecs-banner-button-text: var(--ecs_dblue); }
.ecs-event-banner__button--white { --ecs-banner-button-bg: var(--ecs_white); --ecs-banner-button-text: var(--ecs_dblue); }
.ecs-event-banner__button--outline,
.ecs-event-banner__button--outline:visited {
	background: transparent !important;
	color: var(--ecs-banner-button-bg) !important;
}

.ecs-event-banner__close {
	align-items: center;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 28px;
	height: 38px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
}
.ecs-event-banner__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media only screen and (max-width: 767px) {
	.ecs-event-banner--hide-mobile { display: none !important; }
	.ecs-event-banner__inner { min-height: 0; padding: 12px 44px 12px 14px; }
	.ecs-event-banner__content { flex-wrap: wrap; gap: 7px 10px; max-width: 100%; }
	.ecs-event-banner__logo { max-height: 27px; max-width: 120px; }
	.ecs-event-banner__message { font-size: 14px; }
	.ecs-event-banner__button, .ecs-event-banner__button:visited { padding: 0 !important; }
	.ecs-event-banner__button span { padding: 15px 20px; }
}

/* Compact announcement-strip sizing and hover isolation. */
.ecs-event-banner__inner {
	min-height: 0;
	padding-top: 5px;
	padding-bottom: 5px;
}

.ecs-event-banner__content {
	gap: 10px;
}

.ecs-event-banner__message {
	font-size: 14px;
	line-height: 1.15;
}

.ecs-event-banner__logo {
	max-height: 26px;
	max-width: 130px;
}

.ecs-event-banner .ecs-event-banner__button,
.ecs-event-banner .ecs-event-banner__button:link,
.ecs-event-banner .ecs-event-banner__button:visited,
.ecs-event-banner .ecs-event-banner__button:hover,
.ecs-event-banner .ecs-event-banner__button:focus,
.ecs-event-banner .ecs-event-banner__button:active {
	font-size: 13px !important;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0 !important;
	transform: none !important;
	-webkit-transform: none !important;
}

.ecs-event-banner .ecs-event-banner__button span,
.ecs-event-banner .ecs-event-banner__button:hover span,
.ecs-event-banner .ecs-event-banner__button:focus span,
.ecs-event-banner .ecs-event-banner__button:active span {
	font-size: 13px !important;
	line-height: 1 !important;
	padding: 8px 14px !important;
	transform: none !important;
	-webkit-transform: none !important;
}

.ecs-event-banner .ecs-event-banner__button::before,
.ecs-event-banner .ecs-event-banner__button::after,
.ecs-event-banner .ecs-event-banner__button span::before,
.ecs-event-banner .ecs-event-banner__button span::after {
	transform: none !important;
	-webkit-transform: none !important;
}

@media only screen and (max-width: 767px) {
	.ecs-event-banner__inner {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.ecs-event-banner__message {
		font-size: 13px;
	}

	.ecs-event-banner .ecs-event-banner__button span,
	.ecs-event-banner .ecs-event-banner__button:hover span,
	.ecs-event-banner .ecs-event-banner__button:focus span,
	.ecs-event-banner .ecs-event-banner__button:active span {
		padding: 7px 12px !important;
	}
}

/* Optional Wistia background video, using the current Wistia web component. */
.ecs-event-banner {
	overflow: hidden;
}

.ecs-event-banner__video,
.ecs-event-banner__video-overlay {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.ecs-event-banner__video {
	overflow: hidden;
	z-index: 0;
}

.ecs-event-banner__video-inner {
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.ecs-event-banner__video-inner wistia-player,
.ecs-event-banner__video-inner wistia-player:not(:defined) {
	display: block !important;
	height: 100% !important;
	inset: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	position: absolute !important;
	width: 100% !important;
}

.ecs-event-banner__video-inner video,
.ecs-event-banner__video-inner iframe {
	height: 100% !important;
	object-fit: cover !important;
	width: 100% !important;
}

.ecs-event-banner__video-overlay {
	background: color-mix(in srgb, var(--ecs-event-banner-bg) 38%, transparent);
	z-index: 1;
}

.ecs-event-banner__inner {
	z-index: 2;
}

/* The theme button component adds a hover arrow; compact event banners do not. */
.ecs-event-banner .ecs-event-banner__button::before,
.ecs-event-banner .ecs-event-banner__button::after,
.ecs-event-banner .ecs-event-banner__button span::before,
.ecs-event-banner .ecs-event-banner__button span::after,
.ecs-event-banner .ecs-event-banner__button:hover::before,
.ecs-event-banner .ecs-event-banner__button:hover::after,
.ecs-event-banner .ecs-event-banner__button:hover span::before,
.ecs-event-banner .ecs-event-banner__button:hover span::after,
.ecs-event-banner .ecs-event-banner__button:focus::before,
.ecs-event-banner .ecs-event-banner__button:focus::after,
.ecs-event-banner .ecs-event-banner__button:focus span::before,
.ecs-event-banner .ecs-event-banner__button:focus span::after {
	background: none !important;
	border: 0 !important;
	content: none !important;
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 0 !important;
}


/* Theme-derived banner gradients. Banners intentionally run left-to-right. */
.ecs-event-banner--bg-solid { background: var(--ecs-event-banner-bg); }
.ecs-event-banner--bg-dark-blue-fade { background: linear-gradient(90deg, #0d3347 0%, rgba(13, 51, 71, .48) 100%); --ecs-event-banner-text: var(--ecs_white); }
.ecs-event-banner--bg-blue-purple { background: linear-gradient(90deg, #27516f 0%, rgba(145, 140, 255, .78) 100%); --ecs-event-banner-text: var(--ecs_white); }
.ecs-event-banner--bg-purple-rise { background: linear-gradient(90deg, rgba(145, 140, 255, .55) 0%, #918cff 100%); --ecs-event-banner-text: var(--ecs_dblue); }
.ecs-event-banner--bg-cyan-purple { background: linear-gradient(90deg, #05c2de 0%, #918cff 100%); --ecs-event-banner-text: var(--ecs_dblue); }
.ecs-event-banner--bg-dark-blue-sweep { background: linear-gradient(90deg, #0d3347 0%, #27516f 100%); --ecs-event-banner-text: var(--ecs_white); }

/* Keep each banner button's selected color and brighten it slightly on hover. */
.ecs-event-banner__button,
.ecs-event-banner__button:visited {
	--ecs-banner-button-hover: color-mix(in srgb, var(--ecs-banner-button-bg) 84%, white);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}
.ecs-event-banner__button:not(.ecs-event-banner__button--outline):hover,
.ecs-event-banner__button:not(.ecs-event-banner__button--outline):focus-visible {
	background: var(--ecs-banner-button-hover) !important;
	border-color: var(--ecs-banner-button-hover) !important;
}
.ecs-event-banner__button--outline:hover,
.ecs-event-banner__button--outline:focus-visible {
	background: var(--ecs-banner-button-hover) !important;
	border-color: var(--ecs-banner-button-hover) !important;
	color: var(--ecs_dblue) !important;
}