/* ==========================================================================
   E3 Connect Hub – "Spectrum" colour update
   Adds the blues, pinks and aqua of the E3 2026 event key visual to the
   purple-only scheme. Layout is unchanged: this file only overrides colours.
   ========================================================================== */

:root {
	--sp-pink: #E14FE8;
	--sp-orchid: #C45BCC;
	--sp-lavender: #8342C4;
	--sp-cobalt: #2D4CB9;
	--sp-blue: #1E5BE6;
	--sp-azure: #00C8F5;
	--sp-azure-ink: #0A84C6;      /* azure dark enough for text/icons on white */
	--sp-orange: #F05820;

	/* Lines and borders: pink → purple → blue → aqua, like the wave lines. */
	--sp-line: linear-gradient(120deg, #E14FE8 0%, #8342C4 38%, #2D4CB9 68%, #00C8F5 100%);
	/* Filled buttons and the active menu tab. */
	--sp-fill: linear-gradient(100deg, #C845DC 0%, #6A3FD2 38%, #2D4CB9 70%, #1784E4 100%);
	/* Headings: the "REGISTRATION" gradient. */
	--sp-title: linear-gradient(90deg, #F05820 0%, #E8407A 28%, #C24BD8 55%, #6A5AE8 78%, #1E9BE8 100%);
	--sp-title-dark: linear-gradient(90deg, #FF7A2E 0%, #FF4F9A 28%, #D86BF0 55%, #8C8CFF 78%, #3FE0FF 100%);

	--e3-lavender: #8342C4;
	--e3-gradient: var(--sp-fill);
	--e3-ring: 0 0 0 3px rgba(0, 184, 240, .4);
}

/* --------------------------------------------------------------------------
   Page background: cream with soft aqua / pink glows and faint wave lines
   -------------------------------------------------------------------------- */

body:not(.e3-is-screen)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		url("../images/spectrum-waves.svg") left bottom / 100% 300px no-repeat,
		radial-gradient(900px 600px at 100% 0%, rgba(0, 200, 245, .13), transparent 65%),
		radial-gradient(700px 520px at 0% 55%, rgba(225, 79, 232, .09), transparent 65%),
		radial-gradient(800px 500px at 70% 100%, rgba(45, 76, 185, .08), transparent 65%);
	opacity: 1;
}

body:not(.e3-is-screen)::after {
	/* Fades the wave lines so they stay a quiet background detail. */
	content: "";
	position: fixed;
	left: 0; right: 0; bottom: 0;
	height: 300px;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(rgba(250, 248, 244, .55), rgba(250, 248, 244, .72));
}

/* Gradient-border helper used by pills and cards */
.e3-nav .wp-block-navigation-item__content,
.e3-fact,
.e3-search,
.e3-tier,
.e3-partner,
.e3-speaker,
.e3-video,
.e3-form--contact {
	border-color: transparent !important;
	background: linear-gradient(#fff, #fff) padding-box, var(--sp-line) border-box;
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */

.e3-content > h1,
.e3-content > .wp-block-heading:first-child {
	width: fit-content;
	max-width: 100%;
	background: var(--sp-title);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}

/* --------------------------------------------------------------------------
   Menu pills
   -------------------------------------------------------------------------- */

.e3-nav .wp-block-navigation-item__content:hover {
	background: linear-gradient(#EEF9FF, #F7EEFD) padding-box, var(--sp-line) border-box;
}

.e3-nav .current-menu-item > .wp-block-navigation-item__content,
.e3-nav .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--sp-fill) padding-box, var(--sp-fill) border-box !important;
	box-shadow: 0 10px 26px rgba(30, 91, 230, .28), 0 0 0 4px rgba(0, 200, 245, .16);
}

.e3-account a { color: var(--sp-blue); }

/* --------------------------------------------------------------------------
   About: hero + fact cards
   -------------------------------------------------------------------------- */

.e3-hero { box-shadow: 0 18px 44px rgba(30, 63, 216, .18); }
.e3-hero__kicker { color: var(--sp-cobalt); }

@media (hover: hover) and (min-width: 901px) {
	.e3-hero__kicker::after { color: var(--sp-pink); }
}

/* Each fact card gets its own colour from the key visual. */
.e3-fact { border-width: 3px; }
.e3-fact:nth-child(1) { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #2D4CB9, #1E5BE6) border-box; }
.e3-fact:nth-child(2) { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #E14FE8, #8342C4) border-box; }
.e3-fact:nth-child(3) { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #00C8F5, #1E5BE6) border-box; }
.e3-fact:nth-child(4) { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #F05820, #E14FE8) border-box; }
.e3-fact:nth-child(1) .e3-fact__label { color: var(--sp-blue); }
.e3-fact:nth-child(2) .e3-fact__label { color: #B83BC4; }
.e3-fact:nth-child(3) .e3-fact__label { color: var(--sp-azure-ink); }
.e3-fact:nth-child(4) .e3-fact__label { color: #D9481A; }
.e3-fact__label { font-weight: 600; }

@media (max-width: 900px) {
	.e3-hero__panel { border-top: 0; box-shadow: inset 0 4px 0 0 transparent; }
	.e3-hero__panel::before {
		content: "";
		position: absolute;
		left: 0; right: 0; top: 0;
		height: 4px;
		background: var(--sp-line);
	}
	.e3-hero__panel { position: relative !important; }
}

/* --------------------------------------------------------------------------
   Gallery + lightbox
   -------------------------------------------------------------------------- */

.e3-content .wp-block-gallery.e3-gallery > figure.wp-block-image { background: #E6F2FB; }
.e3-content .wp-block-gallery.e3-gallery > figure.wp-block-image:hover { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(0, 200, 245, .65); }
.e3-gallery figure.wp-block-image figcaption { background: linear-gradient(transparent, rgba(30, 20, 90, .82)); }

.e3-lb {
	background:
		radial-gradient(700px 500px at 0% 100%, rgba(225, 79, 232, .22), transparent 70%),
		radial-gradient(700px 500px at 100% 0%, rgba(0, 200, 245, .20), transparent 70%),
		rgba(10, 14, 60, .95);
}
.e3-lb__btn:hover { background: rgba(0, 200, 245, .35); }

/* --------------------------------------------------------------------------
   Partner directory
   -------------------------------------------------------------------------- */

.e3-search .e3-icon { color: var(--sp-azure-ink); }
.e3-tier.is-active { background: var(--sp-fill) padding-box, var(--sp-fill) border-box; }

.e3-partner:hover,
.e3-video:hover { box-shadow: 0 16px 36px rgba(0, 150, 230, .18), 0 6px 16px rgba(225, 79, 232, .10); }

.e3-partner__titles { border-bottom: 2px solid transparent; border-image: var(--sp-line) 1; }
.e3-partner__info .e3-icon { color: var(--sp-azure-ink); }
.e3-partner__info li:nth-child(2) .e3-icon { color: var(--sp-blue); }
.e3-partner__info li:nth-child(3) .e3-icon { color: #B83BC4; }
.e3-partner__info li:nth-child(4) .e3-icon { color: var(--sp-lavender); }
.e3-partner__info a { color: var(--sp-blue); }

.e3-btn:hover { box-shadow: 0 10px 22px rgba(30, 91, 230, .30), 0 0 0 3px rgba(0, 200, 245, .18); }

.e3-pager button:hover { background: #E6F6FD; }

/* --------------------------------------------------------------------------
   Speakers
   -------------------------------------------------------------------------- */

.e3-speaker__photo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0, 200, 245, .7); }
.e3-speaker:nth-child(even) .e3-speaker__photo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(225, 79, 232, .7); }
.e3-speaker__more { color: var(--sp-blue); }
.e3-speaker__talk { color: #3a2a7a; }

/* --------------------------------------------------------------------------
   Relive: video cards
   -------------------------------------------------------------------------- */

.e3-video__icon {
	background: linear-gradient(135deg, #E14FE8 0%, #8342C4 50%, #1E5BE6 100%);
	box-shadow: 0 10px 30px rgba(10, 12, 60, .45), 0 0 0 6px rgba(63, 216, 255, .35);
}

/* --------------------------------------------------------------------------
   Modals and forms
   -------------------------------------------------------------------------- */

.e3-modal__backdrop { background: rgba(30, 40, 110, .38); }
.e3-modal__panel { border-top: 5px solid transparent; border-image: var(--sp-line) 1; border-image-width: 5px 0 0 0; }
.e3-modal__close:hover { background: #E6F6FD; }
.e3-modal__title { color: var(--sp-cobalt); }
.e3-thanks p { color: var(--sp-cobalt); }

.e3-field input:focus,
.e3-field textarea:focus { border-color: var(--sp-azure); box-shadow: 0 0 0 3px rgba(0, 200, 245, .18); }

/* --------------------------------------------------------------------------
   Full-screen pages (Login, E3 2027): blue key-visual background
   -------------------------------------------------------------------------- */

.e3-screen {
	position: relative;
	background:
		url("../images/spectrum-waves.svg") left bottom / 100% 42% no-repeat,
		radial-gradient(900px 640px at 8% 12%, rgba(200, 69, 220, .55), transparent 62%),
		radial-gradient(800px 600px at 96% 92%, rgba(0, 200, 245, .45), transparent 60%),
		radial-gradient(600px 420px at 85% 10%, rgba(0, 223, 254, .18), transparent 65%),
		linear-gradient(135deg, #4B2BD8 0%, #2440D8 35%, #1E5BE6 65%, #1290EA 100%);
}

/* Thin white frame, as on the event key visual */
.e3-screen::before {
	content: "";
	position: absolute;
	inset: 18px;
	border: 1.5px solid rgba(255, 255, 255, .55);
	pointer-events: none;
}

.e3-screen-content { position: relative; z-index: 1; }

.e3-login__card {
	border-top: 6px solid transparent;
	border-image: var(--sp-line) 1;
	border-image-width: 6px 0 0 0;
	box-shadow: 0 30px 70px rgba(14, 18, 80, .35), 0 0 60px rgba(0, 200, 245, .25);
}

.e3-login__card h1.e3-login__title {
	width: fit-content;
	margin-left: auto !important;
	margin-right: auto !important;
	background: linear-gradient(90deg, #C845DC 0%, #6A3FD2 45%, #2D4CB9 75%, #1784E4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.e3-input > .e3-icon,
.e3-input__toggle[aria-pressed="true"] { color: var(--sp-blue); }
.e3-input:focus-within { border-color: var(--sp-azure); }
.e3-login-form__invite a { color: var(--sp-blue); }

/* E3 2027 */
.e3-screen h1.e3-next__title {
	width: fit-content;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	background: var(--sp-title-dark);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 4px 18px rgba(10, 10, 60, .35));
}

.e3-notify__btn {
	background: rgba(255, 255, 255, .10);
	color: #fff;
	border: 2px solid rgba(63, 216, 255, .95);
	box-shadow: 0 0 26px rgba(63, 216, 255, .45), inset 0 0 22px rgba(63, 216, 255, .18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.e3-notify__btn:hover {
	background: rgba(63, 216, 255, .22);
	box-shadow: 0 0 34px rgba(63, 216, 255, .65), inset 0 0 22px rgba(63, 216, 255, .25);
}

/* --------------------------------------------------------------------------
   Tablet / phone: top bar and full-screen menu
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.e3-sidebar {
		background: #fff;
		border-bottom: 3px solid transparent;
		border-image: var(--sp-line) 1;
		box-shadow: 0 6px 20px rgba(30, 63, 216, .10);
	}
}

@media (max-width: 600px) {
	.e3-nav .wp-block-navigation__responsive-container-open {
		background: var(--sp-fill);
		box-shadow: 0 6px 16px rgba(30, 91, 230, .30);
	}

	.e3-nav .wp-block-navigation__responsive-container.is-menu-open {
		background:
			url("../images/spectrum-waves.svg") left bottom / 100% 240px no-repeat,
			radial-gradient(500px 420px at 100% 0%, rgba(0, 200, 245, .18), transparent 65%),
			radial-gradient(500px 420px at 0% 60%, rgba(225, 79, 232, .12), transparent 65%),
			#FAF8F4 !important;
	}

	.e3-screen::before { inset: 10px; }
}

/* Editor preview of the full-screen pages */
.editor-styles-wrapper .e3-login,
.editor-styles-wrapper .e3-next {
	background: linear-gradient(135deg, #4B2BD8 0%, #2440D8 35%, #1E5BE6 65%, #1290EA 100%);
}