/* ==========================================================================
   MSA Header -- self-contained. Owns its own tokens so it renders correctly
   even before msa-site.css loads.
   ========================================================================== */

.msa-header {
	--msa-crimson: #C42031;
	--msa-black: #000000;
	--msa-grey: #414141;
	--msa-white: #FFFFFF;

	--msa-teal: #00B1BA;
	--msa-blue: #264398;
	--msa-yellow: #FFD508;
	--msa-purple: #A73C96;

	--msa-mega-bg: #111111;
	--msa-field-bg: #F1F1EF;
	--msa-field-bg-dark: #1C1C1C;
	--msa-hairline: rgba(255, 255, 255, 0.14);
	--msa-link-dim: #B5B5B5;

	--msa-display: "Bebas Neue", Impact, sans-serif;
	--msa-body: "Roboto", Arial, sans-serif;

	--msa-width: 1240px;
	--msa-bar-h: 90px;
	--msa-radius: 999px;

	position: relative;
	font-family: var(--msa-body);
}

.msa-header *,
.msa-header *::before,
.msa-header *::after {
	box-sizing: border-box;
}

.msa-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------- Header bar */

.msa-header__bar {
	background: var(--msa-white);
	width: 100%;
}

/*
 * Sticky bar.
 *
 * Fixed rather than position:sticky. A sticky element only travels inside its
 * own parent's box, and .msa-header is no taller than the bar itself -- the mega
 * menu beside it is taken out of the flow -- so there was nowhere to travel and
 * the bar scrolled away like anything else.
 *
 * Only the bar is pinned, never .msa-header. The mega menu is the bar's sibling
 * and relies on its own position:fixed resolving against the viewport; pinning
 * the wrapper would trap it in the wrapper's stacking context, which is exactly
 * what the Elementor container sticky did to it.
 *
 * The spacer holds the bar's height while it is out of the flow. Its height and
 * the pinned offset are measured in JS, so with no JS the bar simply scrolls,
 * which is a better failure than a bar pinned over the page at the wrong height.
 */
.msa-header__spacer {
	display: none;
	height: var(--msa-bar-pinned-h, 0px);
}

.msa-header--sticky.is-pinned .msa-header__spacer {
	display: block;
}

.msa-header--sticky.is-pinned .msa-header__bar {
	position: fixed;
	top: var(--msa-bar-pinned-top, 0px);
	left: 0;
	right: 0;
	z-index: 900;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

.msa-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: 100%;
	max-width: var(--msa-width);
	min-height: var(--msa-bar-h);
	margin: 0 auto;
	padding: 14px 20px;
}

.msa-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
	line-height: 1;
}

.msa-header__logo img {
	display: block;
	height: 56px;
	width: auto;
}

.msa-header__logo-text {
	font-family: var(--msa-display);
	font-size: 30px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--msa-black);
}

.msa-header__logo--mega .msa-header__logo-text {
	color: var(--msa-white);
}

.msa-header__search {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

/* ------------------------------------------------------------- Search field */

.msa-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.msa-search--bar {
	max-width: 430px;
}

.msa-search__input {
	width: 100%;
	height: 46px;
	padding: 0 58px 0 22px;
	border: 1px solid transparent;
	border-radius: var(--msa-radius);
	background: var(--msa-field-bg);
	font-family: var(--msa-body);
	font-size: 15px;
	color: var(--msa-grey);
	appearance: none;
	-webkit-appearance: none;
}

.msa-search__input::placeholder {
	color: #8A8A85;
	opacity: 1;
}

.msa-search__input:focus {
	outline: none;
	border-color: var(--msa-crimson);
}

.msa-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Elementor's Theme Style sets a form-field radius with a selector that
   out-specifies a single class, which flattens the pill. Match its weight so
   the search keeps the same shape as the buttons and the hero search. */
.msa-header .msa-header__search .msa-search input.msa-search__input,
.msa-header .msa-mega .msa-search input.msa-search__input {
	border-radius: var(--msa-radius);
}

.msa-header .msa-search button.msa-search__submit {
	border-radius: 50%;
}

.msa-search__submit {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--msa-crimson);
	color: var(--msa-white);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.msa-search__submit:hover {
	background: #A81A29;
}

.msa-search__submit svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

/* Larger variant inside the mega menu. */
.msa-search--mega .msa-search__input {
	height: 58px;
	padding: 0 70px 0 26px;
	background: var(--msa-field-bg-dark);
	border-color: var(--msa-hairline);
	color: var(--msa-white);
	font-size: 16px;
}

.msa-search--mega .msa-search__input::placeholder {
	color: #7C7C7C;
}

.msa-search--mega .msa-search__submit {
	right: 8px;
	width: 42px;
	height: 42px;
}

.msa-search--mega .msa-search__submit svg {
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------------------- Menu toggle */

.msa-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--msa-radius);
	background: var(--msa-black);
	color: var(--msa-white);
	font-family: var(--msa-display);
	font-size: 19px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.msa-menu-toggle:hover {
	background: var(--msa-crimson);
}

.msa-menu-toggle__icon {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 18px;
	height: 12px;
}

.msa-menu-toggle__icon span {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
}

.msa-menu-toggle__label {
	padding-top: 2px;
}

/* --------------------------------------------------------------- Mega menu */

.msa-mega {
	position: fixed;
	inset: 0;
	z-index: 9990;
	background: var(--msa-mega-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.msa-mega[hidden] {
	display: none;
}

.msa-mega.is-open {
	opacity: 1;
	visibility: visible;
}

.admin-bar .msa-mega {
	top: 32px;
}

.msa-mega__inner {
	width: 100%;
	max-width: var(--msa-width);
	margin: 0 auto;
	/* No top padding: the top row carries the bar's own metrics instead, so
	   the overlay reads as opening directly over the header rather than as a
	   separate panel that happens to start near it. */
	padding: 0 20px 80px;
}

.msa-mega__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: var(--msa-bar-h);
	padding-block: 14px;
}

.msa-mega__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 46px;
	padding: 0 26px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--msa-radius);
	background: transparent;
	color: var(--msa-white);
	font-family: var(--msa-display);
	font-size: 19px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.msa-mega__close:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--msa-white);
}

.msa-mega__close span[aria-hidden] {
	font-family: var(--msa-body);
	font-size: 20px;
	line-height: 1;
}

.msa-mega__close-label {
	padding-top: 2px;
}

.msa-mega__search {
	margin-top: 30px;
}

/* Columns */

.msa-mega__columns {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 34px;
	margin-top: 54px;
}

.msa-mega__column {
	border-top: 3px solid var(--msa-accent, var(--msa-crimson));
	padding-top: 18px;
}

.msa-mega__heading {
	margin: 0 0 16px;
	font-family: var(--msa-display);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--msa-white);
}

.msa-mega__links,
.msa-mega__links .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.msa-mega__links li {
	margin: 0 0 11px;
}

.msa-mega__links a {
	display: inline-block;
	font-family: var(--msa-body);
	font-size: 15px;
	line-height: 1.35;
	color: var(--msa-link-dim);
	text-decoration: none;
	transition: color 0.18s ease;
}

.msa-mega__links a:hover,
.msa-mega__links a:focus-visible,
.msa-mega__links .current-menu-item > a {
	color: var(--msa-white);
}

/* Second level -- used for the three campus pages under Where We Are. */
.msa-mega__links .sub-menu {
	margin: 9px 0 14px 2px;
	padding-left: 13px;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.msa-mega__links .sub-menu li {
	margin-bottom: 8px;
}

.msa-mega__links .sub-menu a {
	font-size: 14px;
	color: #8E8E8E;
}

.msa-mega__empty {
	margin: 0;
	font-size: 13px;
	color: #6E6E6E;
	font-style: italic;
}

/* Menu footer */

.msa-mega__footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 46px;
	padding-top: 28px;
	border-top: 1px solid var(--msa-hairline);
}

.msa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 28px;
	border-radius: var(--msa-radius);
	font-family: var(--msa-display);
	font-size: 18px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	transition: background-color 0.2s ease;
}

.msa-btn--crimson {
	background: var(--msa-crimson);
	color: var(--msa-white);
}

.msa-btn--crimson:hover {
	background: #A81A29;
	color: var(--msa-white);
}

.msa-mega__note {
	flex: 1 1 260px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #7C7C7C;
}

/* ------------------------------------------------------------------- State */

body.msa-menu-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ Focus */

.msa-header a:focus-visible,
.msa-header button:focus-visible,
.msa-header input:focus-visible {
	outline: 2px solid var(--msa-crimson);
	outline-offset: 3px;
}

.msa-mega a:focus-visible,
.msa-mega button:focus-visible {
	outline: 2px solid var(--msa-white);
	outline-offset: 3px;
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
	.msa-mega__columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 30px 26px;
	}
}

@media (max-width: 1024px) {
	.msa-header__search {
		display: none;
	}

	.msa-header__inner {
		justify-content: space-between;
	}
}

@media (max-width: 782px) {
	.admin-bar .msa-mega {
		top: 46px;
	}
}

@media (max-width: 767px) {
	.msa-header {
		--msa-bar-h: 74px;
	}

	.msa-header__logo img {
		height: 44px;
	}

	/*
	 * Bigger than the desktop button, not smaller. This is the only way into the
	 * menu on a phone and it was the smallest thing in the bar; 54px clears the
	 * 44px minimum tap target with room to spare.
	 */
	.msa-menu-toggle,
	.msa-mega__close {
		height: 54px;
		padding: 0 24px;
		font-size: 19px;
	}

	.msa-menu-toggle__icon {
		width: 22px;
		height: 15px;
	}

	/*
	 * Each menu link becomes a full-width row with real vertical padding, so the
	 * target is the whole line rather than just the glyphs. inline-block leaves
	 * everything either side of the text dead, which is most of the row.
	 */
	.msa-mega__links a {
		display: block;
		padding: 11px 0;
		font-size: 16px;
	}

	.msa-mega__links li + li {
		margin-top: 0;
	}

	.msa-mega__close {
		gap: 10px;
	}

	.msa-mega__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 40px;
	}

	.msa-mega__inner {
		padding-bottom: 60px;
	}

	.msa-search--mega .msa-search__input {
		height: 52px;
	}
}

@media (max-width: 520px) {
	.msa-mega__columns {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.msa-menu-toggle__label {
		display: none;
	}

	.msa-menu-toggle {
		padding: 0 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msa-mega,
	.msa-menu-toggle,
	.msa-search__submit,
	.msa-mega__links a {
		transition: none;
	}
}