/*
 * UG sub-pages - shared layer (Student Life, Careers, ... under
 * /ug-in-business-management-and-entrepreneurship/). Loaded before each
 * page's own stylesheet (css/ug-student-life.css, css/ug-careers.css).
 *
 * Holds what the prebuilt Tailwind output (css/new-output.css) doesn't
 * cover and both pages use: the .ugs-wrap page wrap, full-bleed children,
 * type helpers, the sub-nav pill, the photo marquee and the shared-carousel
 * tweaks. Everything sits under .ugs-wrap: header.php resets
 * `div.wrap h1-h5 { all: unset }` at (0,1,2), so a heading rule needs two
 * classes to win. Sizes are Figma px on the 1440 frame.
 */

/* ------------------------------------------------ page chrome (UG palette) */
/* Same overrides template-ugp.php inlines: maroon page, header and footer. */

body {
	background: #4B0000 !important;
}

footer {
	background: #7c2023 !important;
}

footer .text-light-green {
	color: white !important
}

/* style.css (inlined after this sheet) paints the header var(--bs-heading-color)
   green below 1200px; the extra html raises specificity so UG maroon wins. */
html body:not(.home) .header {
	background: #4b0000;
}

@media screen and (max-width: 900px) {
	html .active-mobile-menu .header {
		background: #4b0000 !important;
	}
}

.header .menu ul li.current-menu-item>a,
.header .menu ul li.current-menu-parent>a {
	color: #f1e6d0;
}

.header .menu ul li a:hover {
	--green: #f1e6d0;
}

.header .menu ul li .sub-menu li a {
	--submenu-bg-color: #5f0a0a;

}

.header .menu-item-has-children::after {
	--red: #f1e6d0;
}

.header .menu ul li .sub-menu li a:hover {
	--submenu-bg-hover: #f1e6d0;
	--submenu-text-hover-color: #5f0a0a;
}

footer .footer-title {
	font-family: "Manrope", sans-serif;
	font-style: normal;
	color: #fff !important;
	margin-bottom: 1rem;
	font-size: 1.2rem;
}

footer .sub-menu {
	padding-left: 0;
	display: none;
}

footer *:not(.footer-title) {
	font-size: .9rem;
}

.ugs-wrap {
	--ugs-cream: #fbf4d7;
	--ugs-red: #ba3b41;
	--ugs-ink: #1c1415;
	--ugs-gap: 52px;
	padding-bottom: 80px;
}

@media (min-width: 1024px) {
	.ugs-wrap {
		--ugs-gap: 80px;
	}
}

.ugs-wrap > * + * {
	margin-top: var(--ugs-gap);
}

/* Full-bleed children span the whole grid and drop the wrap's side padding */
.ugs-wrap > .ugs-bleed {
	grid-column: 1 / -1;
	padding-left: 0;
	padding-right: 0;
}

.ugs-wrap .ugs-serif {
	font-family: 'New York Large', 'New York', Georgia, serif;
	font-style: italic;
	font-weight: 600;
	color: var(--ugs-cream);
}

.ugs-wrap .ugs-light {
	font-weight: 300;
}

.ugs-wrap .ugs-section-title {
	display: block;
	font-size: 32px;
	font-weight: 300;
	line-height: 1.3;
	color: #fff;
}

.ugs-wrap .ugs-section-title .ugs-serif {
	font-size: 1.15em;
	line-height: 1.1;
}

.ugs-wrap .ugs-section-title--center {
	text-align: center;
}

@media (min-width: 1024px) {
	.ugs-wrap .ugs-section-title {
		font-size: 47px;
		line-height: 1.4;
	}
}

/* ---------------------------------------------------------------- sub-nav */

/* The site header is position: fixed (57px tall on phones, 78px on desktop),
   so the page content clears it here. */
.ugs-wrap .ugs-subnav {
	margin-top: 73px;
}

@media (min-width: 1024px) {
	.ugs-wrap .ugs-subnav {
		margin-top: 94px;
	}
}

/* The pill itself (list, items, phone scrolling) is in /assets/css/ug-subnav.css,
   shared with the UG landing page. */

/* ---------------------------------------------------------------- marquee */
/* "Mesa on the field" bentos and the Maverion collage. The track holds the
   set twice and slides by one set width, so the loop is seamless. It keeps
   moving on hover (client asked, 2026-10-16). */

.ugs-wrap .ugs-marquee {
	overflow: hidden;
	--marquee-gap: 20px;
	--marquee-duration: 60s;
}

.ugs-wrap .ugs-marquee__track {
	display: flex;
	width: max-content;
	gap: var(--marquee-gap);
	padding: 8px 0 12px;
	animation: ugs-marquee var(--marquee-duration) linear infinite;
}

.ugs-wrap .ugs-marquee__set {
	display: flex;
	gap: var(--marquee-gap);
}

@keyframes ugs-marquee {
	to {
		transform: translateX(calc(-50% - var(--marquee-gap) / 2));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ugs-wrap .ugs-marquee {
		overflow-x: auto;
	}

	.ugs-wrap .ugs-marquee__track {
		animation: none;
	}

	.ugs-wrap .ugs-marquee__set[aria-hidden="true"] {
		display: none;
	}
}

/* ----------------------------------------------- shared TNS carousels */
/* Sections on common/card-carousel-tns-base.php, like the /ug carousels. */

.ugs-wrap .ugs-carousel-hl {
	font-weight: 600;
	color: var(--ugs-cream);
}

@media (min-width: 1024px) {
	.ugs-wrap .ugs-carousel-hl {
		color: var(--ugs-red);
	}
}

@media (max-width: 900px) {
	.ugs-wrap .ugs-carousel .tns-carousel-container > div > div {
		width: 82vw;
	}
}

/* ----------------------------------------------------- image placeholders */
/* mesa_ug_subpage_img() renders this until the image file is delivered. */

.ugs-wrap .ugs-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 8px;
	border: 1px dashed rgba(251, 244, 215, .45);
	background: rgba(251, 244, 215, .08);
	color: rgba(251, 244, 215, .75);
	font-size: 11px;
	line-height: 1.3;
	text-align: center;
	word-break: break-all;
}

/* ------------------------------------------------- "Applications open" card */
/* ug-subpages/apply-banner.php - mobile only sticky bar at the bottom of the
   screen (outside .ugs-wrap, so unscoped) */
.ugs-apply-bar {
	display: none;
}

@media (max-width: 1023px) {
	.ugs-apply-bar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		padding: 18px 0 calc(14px + env(safe-area-inset-bottom));
		background: linear-gradient(to top, #4b0000 75%, rgba(75, 0, 0, 0));
	}

	body:has(.ugs-apply-bar) {
		padding-bottom: calc(104px + env(safe-area-inset-bottom));
	}
}

.ugs-apply {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 22px;
	padding: 14px 10px 14px 16px;
	border-radius: 20px;
	background: #fbf4d7;
	outline: 1px solid #e0b33c;
	outline-offset: 5px;
	text-align: left;
}

.ugs-apply__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #ba3b41;
}

.ugs-apply__text {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: #1c1415;
}

.ugs-apply__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 14px;
	background: #ba3b41;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fbf4d7;
}