/* =====================================================
   Online Events mini-site navigation
   ===================================================== */

/* Overall nav container */
.event-mini-site .online-events-nav {
	display: flex;
	align-items: center;
	margin-top: 0.5rem;
}

/* Menu list layout */
.event-mini-site .online-events-nav ul {
	display: flex;
	flex-wrap: nowrap;              /* allow wrapping if many items */
	gap: 1.25rem;                 /* space between menu items */
	justify-content: flex-end;    /* push menu to the right */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Prevent awkward line breaks in menu items */
.event-mini-site .online-events-nav li {
	white-space: nowrap;
}

/* Base link styling */
.event-mini-site .online-events-nav a {
	position: relative;           /* required for ::after underline */
	font-weight: 600;
	font-size: 0.95rem;
	color: #2b2b2b;
	text-decoration: none;
	padding: 0.5rem 0;
	transition: color 0.2s ease;
}

/* Hover state */
.event-mini-site .online-events-nav a:hover {
	color: #005ea2;
}

/* =====================================================
   Active page underline (persistent)
   ===================================================== */

.event-mini-site .online-events-nav li.current-menu-item > a::after,
.event-mini-site .online-events-nav li.current_page_item > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: #005ea2;
}

/* =====================================================
   Header alignment safety
   ===================================================== */

.event-mini-site .site-header .navbar {
	align-items: center;
}

/* -----------------------------------------------------
   Mobile fix: prevent intro card from overlapping header
   ----------------------------------------------------- */

@media (max-width: 768px) {

	/* Give the header more vertical space on mobile */
	.event-mini-site .event-hero,
	.event-mini-site .online-events-hero,
	.event-mini-site .page-hero {
		padding-bottom: 4rem;
	}

	/* OR if the overlap is caused by negative margin on the card */
	.event-mini-site .intro-card,
	.event-mini-site .welcome-card {
		margin-top: 1rem;
	}
}


/* -----------------------------------------------------
   Mobile: move wave (::after) lower so it covers subtitle
   ----------------------------------------------------- 

@media (max-width: 768px) {

	body.event-mini-site section.inner-wave-banner.bg-image.wave::after {
		bottom: -5rem;
	}

}*/

/* =====================================================
   Mobile-only header adjustment:
   Move hero text into intro card
   ===================================================== */

/* Hide the large hero text on mobile */
@media (max-width: 768px) {
	body.event-mini-site .inner-wave-banner .hero-text {
		display: none;
	}
}

/* Show the duplicated hero text inside the intro card on mobile */
@media (max-width: 768px) {
	body.event-mini-site .mobile-hero-text {
		margin-top:30px;
                display: block;
		text-align: center;
		margin-bottom: 1.5rem;
	}
}

/* Hide the duplicated hero text on desktop */
@media (min-width: 769px) {
	body.event-mini-site .mobile-hero-text {
		display: none;
	}
}

/* =====================================================
   Mobile-only: logo-only header, text moved to intro card
   ===================================================== */

@media (max-width: 768px) {

	/* Hide ALL text inside the hero/banner on mobile */
	body.event-mini-site .inner-wave-banner h1,
	body.event-mini-site .inner-wave-banner h2,
	body.event-mini-site .inner-wave-banner h3,
	body.event-mini-site .inner-wave-banner p,
	body.event-mini-site .inner-wave-banner .hero-text,
	body.event-mini-site .inner-wave-banner .banner-text,
	body.event-mini-site .inner-wave-banner .title,
	body.event-mini-site .inner-wave-banner .subtitle {
		display: none !important;
	}

	/* Show the duplicated hero text inside the intro card */
	body.event-mini-site .mobile-hero-text {
		display: block;
		text-align: center;
		margin-bottom: 1.5rem;
	}

}

/* =====================================================
   Mobile: override hard-coded logo width attribute
   ===================================================== */

@media (max-width: 768px) {

	body.event-mini-site img.wp-image-9798 {
		width: 340px !important;
		max-width: 100% !important;
		height: auto !important;
	}

}

/* =====================================================
   Mobile: drastically reduce banner height
   ===================================================== */

@media (max-width: 768px) {

	body.event-mini-site section.inner-wave-banner {
		height: 220px !important;
		min-height: 220px !important;
	}

}

/* Desktop: pull intro card UP toward subtitle */
@media (min-width: 992px) {

	body.event-mini-site .intro-card {
		position: relative;
		top: -80px;
	}

}


/* Desktop: vertically center intro card text relative to image */
@media (min-width: 992px) {

	body.event-mini-site
	.intro-card
	.border-radius-big
	> .row {
		display: flex;
		align-items: center;
	}

}

/* Desktop: fine-tune vertical centering of intro card text */
@media (min-width: 992px) {

	body.event-mini-site .intro-card .col-lg-7 {
		transform: translateY(-20px);
	}

}

/* Desktop: pull first gold button row closer to intro card */
@media (min-width: 992px) {

	body.event-mini-site .eck-row.row-1 {
		margin-top: -100px;
	}

}

/* ==========================================
   Online Events SUB-PAGES – cap banner height
   (same pattern as Doug’s video page)
   ========================================== */

/* Desktop */
@media screen and (min-width: 992px) {
  body.event-mini-site section.simple-heading {
    max-height: 200px;
    overflow: hidden;
  }
}

/* Mobile */
@media screen and (max-width: 768px) {
  body.event-mini-site section.simple-heading {
    max-height: 210px;
    overflow: hidden;
  }
}