/* ============================================
   UGA Main Navigation Block
   ============================================ */

:root {
	--ugamainnav-height: 80px;
	--ugamainnav-height-sticky: 60px;
	--ugamainnav-padding-x: clamp(1rem, 4vw, 2.5rem);
	--ugamainnav-gap: clamp(1rem, 2vw, 2rem);
	--ugamainnav-z: 50;
	--ugamainnav-transition: 200ms ease;
	--ugamainnav-color-text: #1a1a1a;
	--ugamainnav-color-bg: #ffffff;
	--ugamainnav-color-accent: #BA0C2F;
	--ugamainnav-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.10);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ugamainnav-transition: 0ms;
	}
}

/* Skip link */
.ugamainnav__skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 9999;
	padding: 0.75rem 1rem;
	background: var(--ugamainnav-color-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0.25rem;
	transition: top var(--ugamainnav-transition);
}
.ugamainnav__skip-link:focus {
	top: 1rem;
}

/* Sentinel — 1px element above sticky nav for IntersectionObserver */
.ugamainnav__sentinel {
	position: relative;
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

/* Header container */
.ugamainnav {
	position: sticky;
	top: 0;
	z-index: var(--ugamainnav-z);
	width: 100%;
	background-color: var(--ugamainnav-color-bg);
	color: var(--ugamainnav-color-text);
	box-shadow: var(--ugamainnav-shadow);
	transition:
		background-color var(--ugamainnav-transition),
		color var(--ugamainnav-transition),
		box-shadow var(--ugamainnav-transition);
}

/* Bar (the row inside the header) */
.ugamainnav__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--ugamainnav-gap);
	min-height: var(--ugamainnav-height);
	padding: 0 var(--ugamainnav-padding-x);
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
	transition: min-height var(--ugamainnav-transition);
}

/* Logo */
.ugamainnav__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: inherit;
	text-decoration: none;
}
.ugamainnav__logo:hover,
.ugamainnav__logo:focus,
.ugamainnav__logo:active,
.ugamainnav__logo:visited {
	color: inherit;
	text-decoration: none;
}
.ugamainnav__logo-text {
	font-family: var(--wp--preset--font-family--merriweather);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	white-space: nowrap;
	transition: font-size var(--ugamainnav-transition);
}

/* Collapsible region (nav links + search; collapses to overlay on mobile) */
.ugamainnav__collapsible {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ugamainnav-gap);
}

/* Nav wrapper around the core/navigation output */
.ugamainnav__nav-wrap {
	min-width: 0;
}

/* ===== Desktop: tighten chevron spacing ===== */
/* The core nav block renders the chevron as a separate <button> sibling to the
   <a>. Pull it flush against the label. */
.ugamainnav .wp-block-navigation-submenu {
	display: flex;
	align-items: center;
}
.ugamainnav .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	/* Claws back most of the label's 0.75rem padding-right so the chevron reads
	   as attached to its label rather than floating between two items. */
	margin-left: -9px;
	padding: 0 2px;
	line-height: 1;
	/* Optical correction, not a geometric one: align-items centers the chevron
	   on the label's full line box, but the labels are uppercase, so the visual
	   mass sits above that center and the chevron reads as low. Lift it to the
	   cap-height midpoint. */
	transform: translateY(-2px);
}

/* Core/navigation block output */
.ugamainnav .wp-block-navigation {
	font-size: 0.9375rem;
	--wp--style--block-gap: 0;
}
.ugamainnav .wp-block-navigation > .wp-block-navigation__container {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(0.25rem, 1.5vw, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ugamainnav .wp-block-navigation-item {
	position: relative;
	margin: 0;
}
.ugamainnav .wp-block-navigation-item__content {
	display: inline-block;
	padding: 0.625rem 0.75rem;
	color: inherit;
	text-decoration: none;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	position: relative;
	transition: color var(--ugamainnav-transition);
}
.ugamainnav .wp-block-navigation-item__content:hover,
.ugamainnav .wp-block-navigation-item__content:focus-visible,
.ugamainnav .current-menu-item > .wp-block-navigation-item__content,
.ugamainnav .current-menu-parent > .wp-block-navigation-item__content,
.ugamainnav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--ugamainnav-color-accent);
}

/* Active underline indicator */
.ugamainnav .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.375rem;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--ugamainnav-transition);
}
.ugamainnav .wp-block-navigation-item__content:hover::after,
.ugamainnav .wp-block-navigation-item__content:focus-visible::after,
.ugamainnav .current-menu-item > .wp-block-navigation-item__content::after,
.ugamainnav .current-menu-parent > .wp-block-navigation-item__content::after,
.ugamainnav .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Submenu (desktop dropdown) */
.ugamainnav .wp-block-navigation-submenu__toggle {
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 0 0.25rem;
}
.ugamainnav .wp-block-navigation__submenu-icon {
	display: inline-block;
	vertical-align: middle;
}
.ugamainnav .wp-block-navigation__submenu-container {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 0.5rem 0;
	background: #ffffff;
	color: var(--ugamainnav-color-text);
	list-style: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border-radius: 0 0 4px 4px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--ugamainnav-transition),
		transform var(--ugamainnav-transition),
		visibility var(--ugamainnav-transition);
	z-index: calc(var(--ugamainnav-z) + 1);
}
.ugamainnav .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.ugamainnav .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ugamainnav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}
.ugamainnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.5rem 1.25rem;
	box-sizing: border-box;
	white-space: normal;
}
.ugamainnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}
.ugamainnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: rgba(0, 0, 0, 0.04);
	color: var(--ugamainnav-color-accent);
}

/* Search */
.ugamainnav__search {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
.ugamainnav__search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	border-radius: 50%;
	transition: background-color var(--ugamainnav-transition);
}
.ugamainnav__search-toggle:hover,
.ugamainnav__search-toggle:focus-visible {
	background-color: rgba(0, 0, 0, 0.06);
}
.ugamainnav__search-form {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	display: flex;
	align-items: stretch;
	background: #ffffff;
	color: var(--ugamainnav-color-text);
	padding: 0.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--ugamainnav-transition),
		transform var(--ugamainnav-transition),
		visibility var(--ugamainnav-transition);
	z-index: calc(var(--ugamainnav-z) + 1);
}
.ugamainnav__search-toggle[aria-expanded='true'] + .ugamainnav__search-form {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ugamainnav__search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid #d0d0d0;
	padding: 0.5rem 0.75rem;
	font-size: 0.9375rem;
	outline: none;
	border-radius: 2px 0 0 2px;
	width: 240px;
	background: #fff;
	color: var(--ugamainnav-color-text);
}
.ugamainnav__search-input:focus {
	border-color: var(--ugamainnav-color-accent);
	box-shadow: 0 0 0 2px rgba(186, 12, 47, 0.2);
}
.ugamainnav__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 0 0.5rem;
	background: var(--ugamainnav-color-accent);
	border: none;
	color: #ffffff;
	cursor: pointer;
	border-radius: 0 2px 2px 0;
}
.ugamainnav__search-submit:hover,
.ugamainnav__search-submit:focus-visible {
	background: #8f0924;
}

/* Hamburger (mobile/collapsed) */
.ugamainnav__hamburger {
	display: none;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	margin-inline-start: auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.ugamainnav__hamburger-line {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform var(--ugamainnav-transition), opacity var(--ugamainnav-transition);
}
.ugamainnav__hamburger[aria-expanded='true'] .ugamainnav__hamburger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.ugamainnav__hamburger[aria-expanded='true'] .ugamainnav__hamburger-line:nth-child(2) {
	opacity: 0;
}
.ugamainnav__hamburger[aria-expanded='true'] .ugamainnav__hamburger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Measurement helper — used by JS to test inline layout without committing visually */
.ugamainnav.is-measuring .ugamainnav__collapsible {
	visibility: hidden;
}
.ugamainnav.is-measuring .ugamainnav__hamburger {
	display: none !important;
}

/* ===== Collapsed (mobile) mode — JS-driven via overflow detection ===== */
.ugamainnav.is-collapsed:not(.is-measuring):not(.is-menu-open) .ugamainnav__collapsible {
	display: none;
}
.ugamainnav.is-collapsed .ugamainnav__hamburger {
	display: flex;
}

/* Fallback at 900px when JS hasn't loaded or sized */
@media (max-width: 900px) {
	.ugamainnav:not(.is-menu-open) .ugamainnav__collapsible {
		display: none;
	}
	.ugamainnav .ugamainnav__hamburger {
		display: flex;
	}
}

/* ===== Open mobile panel ===== */
@keyframes ugamainnav-dropdown-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ugamainnav.is-menu-open .ugamainnav__collapsible {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 0;
	background: #ffffff;
	color: var(--ugamainnav-color-text);
	z-index: calc(var(--ugamainnav-z) + 10);
	overflow-y: auto;
	max-height: calc(100svh - var(--ugamainnav-height-sticky));
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	animation: ugamainnav-dropdown-in var(--ugamainnav-transition) ease forwards;
}

/* ── Mobile panel: search second ── */
.ugamainnav.is-menu-open .ugamainnav__search {
	order: 2;
	width: 100%;
	padding: 1rem var(--ugamainnav-padding-x);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}
.ugamainnav.is-menu-open .ugamainnav__search-toggle {
	display: none;
}
.ugamainnav.is-menu-open .ugamainnav__search-form {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	padding: 0;
	background: transparent;
	width: 100%;
	display: flex;
}
.ugamainnav.is-menu-open .ugamainnav__search-input {
	width: 100%;
	flex: 1 1 auto;
}

/* ── Mobile panel: nav links third ── */
.ugamainnav.is-menu-open .ugamainnav__nav-wrap {
	order: 3;
	width: 100%;
	flex: 0 0 auto;
	padding: 0.5rem 0;
}
.ugamainnav.is-menu-open .wp-block-navigation > .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

/* Top-level nav items */
.ugamainnav.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.ugamainnav.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 0.5rem var(--ugamainnav-padding-x);
	font-size: 1.0625rem;
	font-weight: 600;
	white-space: normal;
	border-bottom: none;
}
.ugamainnav.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* Items that are direct children of the top-level container get a bottom divider */
.ugamainnav.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Parent item row: keep link + chevron on one line */
.ugamainnav.is-menu-open .wp-block-navigation-submenu {
	flex-wrap: wrap;
}
.ugamainnav.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	flex: 1 1 auto;
}
.ugamainnav.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
	margin-left: 0;
	padding-right: var(--ugamainnav-padding-x);
	/* The desktop lift is tuned to the compact desktop row; these rows are
	   taller and left-aligned, so it just reads as misalignment here. */
	transform: none;
}

/* Subnav container: always visible, indented below parent */
.ugamainnav.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	height: auto !important;
	overflow: visible !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	min-width: 0 !important;
	color: inherit;
	box-shadow: none;
	background: transparent;
	padding: 0;
}

/* Neutralise desktop hover/focus-within dropdown repositioning inside mobile overlay */
.ugamainnav.is-menu-open .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.ugamainnav.is-menu-open .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
	position: static !important;
	transform: none !important;
	width: 100% !important;
	min-width: 0 !important;
	top: auto !important;
	left: auto !important;
}

/* Hide chevron toggle — submenus are always expanded on mobile */
.ugamainnav.is-menu-open .wp-block-navigation-submenu__toggle {
	display: none;
}
.ugamainnav.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block !important;
	/* asymmetric: only the left side is indented; right matches parent so no horizontal overflow */
	padding: 0.35rem var(--ugamainnav-padding-x) 0.35rem calc(var(--ugamainnav-padding-x) + 2rem) !important;
	font-size: 0.875rem;
	box-sizing: border-box;
	width: 100%;
}

/* Force solid style when menu is open (always solid white, even on homepage) */
.ugamainnav.is-menu-open {
	background-color: var(--ugamainnav-color-bg);
	color: var(--ugamainnav-color-text);
	box-shadow: var(--ugamainnav-shadow);
}


/* Reduced height — collapsed (hamburger) or sticky */
.ugamainnav.is-collapsed .ugamainnav__bar,
.ugamainnav.is-sticky .ugamainnav__bar {
	min-height: var(--ugamainnav-height-sticky);
}
.ugamainnav.is-collapsed .ugamainnav__logo-text,
.ugamainnav.is-sticky .ugamainnav__logo-text {
	font-size: 1.125rem;
}

@media (max-width: 900px) {
	.ugamainnav__bar {
		min-height: var(--ugamainnav-height-sticky);
	}
	.ugamainnav__logo-text {
		font-size: 1.125rem;
	}
}

/* Screen reader only utility */
.ugamainnav .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}