/* ==========================================================================
   Round-4 — MOBILE UI FIXES
   Loads after style.css (round4-*.css glob) so these override the base.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER / NAV — the big one.
   style.css forces `.main-nav > ul { display:flex }` at ALL widths, which
   overrode GeneratePress's mobile menu (GP hides the nav below the mobile
   breakpoint and reveals it via the hamburger). Result: on phones BOTH the
   hamburger AND the full menu rendered, and the menu overflowed off-screen.
   Below 768px, hand control back to GP's mobile menu.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* Collapse the horizontal desktop nav; GP's hamburger (.menu-toggle) adds
	   .toggled to .main-navigation to reveal it as a full-width dropdown. */
	.main-navigation .main-nav,
	.main-navigation .main-nav > ul {
		flex-wrap: wrap;
	}
	.main-navigation .main-nav > ul {
		display: none;         /* hidden until toggled */
		width: 100%;
	}
	.main-navigation.toggled .main-nav > ul {
		display: block;
	}
	.main-navigation .main-nav > ul > li {
		display: block;
		width: 100%;
		margin: 0;
		white-space: normal;
		text-align: center;
	}
	.main-navigation .main-nav > ul > li > a {
		padding: 0.9em 1em;
		border-top: 1px solid var(--ugis-line);
	}
	/* the "Coaching Programs" CTA becomes a full-width row in the open menu */
	.main-navigation .ugis-nav-cta {
		margin-left: 0;
	}
	.main-navigation .ugis-nav-cta a {
		display: block;
		text-align: center;
		margin: 0.6em 1em;
	}
	/* header search: keep it tidy inside the mobile header row rather than
	   floating over the hero. */
	.ugis-search {
		margin-left: auto;
	}
	.ugis-search-form-wrap {
		right: 0;
		left: auto;
	}
}

/* --------------------------------------------------------------------------
   2. Global overflow guard — nothing should push the page sideways on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	html, body {
		overflow-x: hidden;
		max-width: 100%;
	}
	img, video, iframe, figure {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   3. Section rhythm — trim oversized vertical padding on phones so pages
   aren't an endless scroll, and give side breathing room.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ugis-section {
		padding: 28px 0;
	}
	.ugis-section > .wp-block-group__inner-container,
	.ugis-section .wp-block-group__inner-container {
		padding-left: 18px;
		padding-right: 18px;
	}
	h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
	h2 { font-size: 1.6rem; }
	h3 { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   4. Impact carousel — size items to the phone width (one full card visible
   with a peek of the next), and shrink the far-side arrows so they don't
   cover the content.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ugis-impact-carousel {
		padding: 0 0.5rem;
	}
	.ugis-impact-item {
		height: 200px;
	}
	.ugis-impact-item.ugis-yt-facade {
		width: 300px;
		max-width: 82vw;
	}
	.ugis-impact-item.ugis-impact-pic {
		width: 200px;
		max-width: 60vw;
	}
	.ugis-impact-arrow {
		width: 38px;
		height: 38px;
		font-size: 1.4rem;
		background: rgba(224, 26, 34, 0.9);
	}
}

/* --------------------------------------------------------------------------
   5. "Meet Coach Emmanuel" cert strip under the portrait — 3 colour plates
   on one nowrap line can get cramped on the narrowest phones; let them shrink
   gracefully.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.ugis-coach-badges .ugis-creds--cert .ugis-cred--logo {
		padding: 0.35rem;
	}
	.ugis-coach-badges .ugis-creds--cert .ugis-cred--logo img {
		max-height: 34px;
	}
}

/* --------------------------------------------------------------------------
   6. Footer credential logos + social icons — keep them centered and wrapping
   on small screens instead of stretching.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ugis-creds--row,
	.ugis-creds-group {
		justify-content: center;
	}
	.ugis-creds--cert .ugis-cred--logo img,
	.ugis-creds--media-color .ugis-cred--logo img {
		max-height: 38px;
	}
}

/* --------------------------------------------------------------------------
   7. Alumni roster / service / testimonial cards — comfortable 2-up (or 1-up)
   with readable captions on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.ugis-roster-card__name { font-size: 1rem; }
	.ugis-roster-card__credential { font-size: 0.78rem; }
}