/* =====================================================
   Eventgroove Hero Selector
   Tweak the variables below to match your brand.
   ===================================================== */

.eg-hero {
	/* Eventgroove brand palette — pulled from www.eventgroove.com production CSS */
	--eg-primary: #00c8c8;          /* Brand teal — used on Screen 2 CTA buttons */
	--eg-primary-hover: #00aaba;    /* Darker teal — used on form button hover */
	--eg-primary-tint: rgba(0, 200, 200, 0.10);

	/* Selector button — gradient matching the current homepage hero CTA
	   (orange on the left, yellow on the right) */
	--eg-cta-gradient: linear-gradient(135deg, #f4913a 0%, #f9c343 100%);
	--eg-cta-gradient-hover: linear-gradient(135deg, #f7a14d 0%, #fbcd5e 100%);
	--eg-cta-shadow: 0 8px 20px rgba(244, 145, 58, 0.30);

	--eg-text: #333333;             /* Body text color used site-wide */
	--eg-muted: #666666;
	--eg-border: #e5e5e5;
	--eg-surface: #ffffff;
	--eg-radius: 10px;              /* Matches the rounded corners on existing CTA buttons */
	--eg-anim: 300ms;
	--eg-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);

	position: relative;
	z-index: 100;                  /* Lift module above following Divi sections */
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: var(--eg-text);
}

/* Cascade Lato to every child element inside the module */
.eg-hero,
.eg-hero * {
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Lift the parent Divi section/row that wraps the module so the
   dropdown can paint above the following section. Modern :has() —
   if this doesn't apply (very old browser), the section z-index can
   also be set manually in Divi → Section Settings → Advanced → Custom CSS. */
.et_pb_section:has(> .et_pb_row .eg-hero),
.et_pb_section:has(.eg-hero),
.et_pb_row:has(.eg-hero),
.et_pb_column:has(.eg-hero) {
	position: relative;
	z-index: 50;
	overflow: visible !important;
}

/* Box-model reset — defeat any Divi/theme styles that bleed in
   (list bullets, indented padding, oversized line-height, etc.).
   The body prefix raises specificity above Divi's content-area selectors
   like .et_pb_text_inner ul li { ... } which apply at viewport sizes
   where the visitor is most likely to see bullets. */
body .eg-hero,
body .eg-hero ul.eg-hero__selector-menu,
body .eg-hero ul.eg-hero__selector-menu > li,
body .eg-hero ul.eg-hero__selector-menu > li.eg-hero__selector-option {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	background-image: none !important;
	text-indent: 0 !important;
}
body .eg-hero ul.eg-hero__selector-menu {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
body .eg-hero ul.eg-hero__selector-menu > li {
	padding-left: 22px !important;
	padding-right: 22px !important;
	margin: 0 !important;
	display: block !important;
}
body .eg-hero ul.eg-hero__selector-menu > li::before,
body .eg-hero ul.eg-hero__selector-menu > li::after,
body .eg-hero ul.eg-hero__selector-menu > li::marker {
	content: none !important;
	display: none !important;
	background: none !important;
}

/* ---------- Screens ---------- */

.eg-hero__screen {
	opacity: 1;
	transform: translateX(0);
	transition: opacity var(--eg-anim) ease, transform var(--eg-anim) ease;
}

.eg-hero__screen[hidden] {
	display: none;
}

.eg-hero__screen.is-leaving {
	opacity: 0;
	transform: translateX(-32px);
}

.eg-hero__screen.is-entering {
	opacity: 0;
	transform: translateX(32px);
}

/* ---------- Screen 1 ---------- */

.eg-hero__headline {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.15;
	margin: 0 0 0.5em;
	font-weight: 700;
	color: var(--eg-text);
}

.eg-hero__subhead {
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	color: var(--eg-muted);
	margin: 0 0 1.75em;
	line-height: 1.5;
}

/* Selector dropdown */
.eg-hero__selector {
	position: relative;
	z-index: 100;                  /* Stacking context for the menu */
	display: inline-block;
	width: 100%;
	max-width: 440px;
	text-align: left;
}

.eg-hero__selector-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	font-size: 1.1rem;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0.01em;
	background: var(--eg-cta-gradient);
	color: var(--eg-text); /* WCAG AA: 5.39:1 on orange end, 7.77:1 on yellow end */
	border: 0;
	border-radius: var(--eg-radius);
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(244, 145, 58, 0.20);
	transition: background var(--eg-anim) ease, box-shadow var(--eg-anim) ease, transform 150ms ease;
}

.eg-hero__selector-btn:hover {
	background: var(--eg-cta-gradient-hover);
	box-shadow: var(--eg-cta-shadow);
	transform: translateY(-1px);
}

.eg-hero__selector-btn:active {
	transform: translateY(0);
}

.eg-hero__selector-btn:focus-visible {
	outline: 3px solid #f4913a;
	outline-offset: 3px;
}

.eg-hero__selector-arrow {
	display: inline-flex;
	color: var(--eg-text);
	transition: transform 200ms ease;
}

.eg-hero__selector-btn[aria-expanded="true"] .eg-hero__selector-arrow {
	transform: rotate(180deg);
}

.eg-hero__selector-menu {
	list-style: none !important;
	margin: 6px 0 0 !important;
	padding: 6px 0 !important;
	background: var(--eg-surface);
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	box-shadow: var(--eg-shadow);
	position: absolute;
	left: 0;
	right: 0;
	z-index: 9999;                 /* Render above anything below the module */
	max-height: 60vh;
	overflow-y: auto;
}

.eg-hero__selector-option {
	margin: 0 !important;
	padding: 12px 22px !important;
	cursor: pointer;
	font-size: 1rem;
	color: var(--eg-text);
	line-height: 1.4;
	transition: background 120ms ease;
	text-indent: 0 !important;
}

.eg-hero__selector-option:hover,
.eg-hero__selector-option:focus,
.eg-hero__selector-option.is-focused {
	background: var(--eg-primary-tint);
	outline: none;
}

/* ---------- Screen 2 ---------- */

.eg-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.95rem;
	color: var(--eg-muted);
	cursor: pointer;
	padding: 6px 10px;
	margin: 0 0 0.75rem;
	border-radius: 4px;
	transition: color 120ms ease, background 120ms ease;
}

.eg-hero__back:hover {
	color: var(--eg-primary);
	background: var(--eg-primary-tint);
}

.eg-hero__step2-headline {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.2;
	margin: 0 0 0.5em;
	font-weight: 700;
}

.eg-hero__step2-sub {
	color: var(--eg-muted);
	margin: 0 0 1.5em;
	font-size: 1.05rem;
}

.eg-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.eg-hero__cta {
	display: inline-block;
	padding: 14px 26px;
	border-radius: var(--eg-radius);
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	transition: transform 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
	cursor: pointer;
}

.eg-hero__cta--primary {
	background: var(--eg-primary);
	color: #fff;
	border: 2px solid var(--eg-primary);
}

.eg-hero__cta--primary:hover {
	background: var(--eg-primary-hover);
	border-color: var(--eg-primary-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 200, 200, 0.25);
}

.eg-hero__cta--secondary {
	background: transparent;
	color: var(--eg-primary);
	border: 2px solid var(--eg-primary);
}

.eg-hero__cta--secondary:hover {
	background: var(--eg-primary-tint);
	color: var(--eg-primary-hover);
}

/* ---------- Accessibility & responsive ---------- */

@media (prefers-reduced-motion: reduce) {
	.eg-hero__screen,
	.eg-hero__selector-arrow,
	.eg-hero__cta,
	.eg-hero__back {
		transition: none !important;
	}
	.eg-hero__screen.is-leaving,
	.eg-hero__screen.is-entering {
		transform: none;
	}
}

@media (max-width: 980px) {
	/* Repeat the list-reset rules inside the mobile breakpoint so that
	   any Divi mobile-only ul/li styles (which live inside their own
	   @media block) lose to ours via the cascade. */
	body .eg-hero ul.eg-hero__selector-menu,
	body .eg-hero ul.eg-hero__selector-menu > li {
		list-style: none !important;
		list-style-type: none !important;
		background-image: none !important;
	}
	body .eg-hero ul.eg-hero__selector-menu > li::before,
	body .eg-hero ul.eg-hero__selector-menu > li::after,
	body .eg-hero ul.eg-hero__selector-menu > li::marker {
		content: none !important;
		display: none !important;
	}
	body .eg-hero ul.eg-hero__selector-menu > li {
		padding: 12px 22px !important;
		margin: 0 !important;
	}
}

@media (max-width: 560px) {
	.eg-hero__selector { max-width: 100%; }
	.eg-hero__selector-btn { font-size: 1rem; padding: 14px 18px; }
	.eg-hero__ctas { flex-direction: column; align-items: stretch; }
	.eg-hero__cta { width: 100%; text-align: center; }
}