/* Global stuff and helper classes */
:root {
		--utah-red: #be0000;
		--header: "factoria", "Vitesse", sans-serif;
		--header-main-height: 80px;
		--header-nav-height: 44px;
		--header-height: calc(var(--wp-admin--admin-bar--height) + var(--header-main-height) + var(--header-nav-height));
}
@media (max-width: 1024px) {
		:root {
				--header-nav-height: 0px;
		}
}

.visually-hidden {
		opacity: 0;
		position: absolute;
		left: -99999px;
		overflow: hidden;
		pointer-events: none;
}

.bold {
		font-weight: bold;
}

.utah-red {
		color: var(--utah-red);
}

.uu-bottom-header .uu-header-title h1 {
		font-weight: normal; /* Fixes the weird fuzzy site title */
}

.home-header {
		text-align: center;
		font-family: var(-header);
		font-size: 74px !important; /* Overrides the SO-programmed size */
		@media (max-width: 600px) {
				font-size: 38px !important;
		}
}

.callout {
		text-transform: uppercase;
		font-size: 1.7em;
		font-weight: bold;
		text-align: center;
}

#blockuletterhead::before {
		content: '';
		display: block;
		height: 70px;
		margin-block: 20px;
		background-image: url('https://orientation.utah.edu/wp-content/uploads/sites/31/2024/11/BlockU_redweb.jpg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
}

.uu-page-title::after {
		background: rgba(0,0,0,.7); /* Featured image overlay a11y fix - was .5 originally */
}

a span.fa-solid {
		color: inherit;
}

.entry-content a:not(.button) {
	text-decoration: underline;
}

.uu-team-member-widget-view-bio-btn.modal-btn:focus {
  outline: 3px solid black; /* A11y fix - focus state not noticable otherwise */
}


.formassembly iframe {
		width: 100%;
}
#tfaContent .wFormContainer {
		max-width: unset !important;
}

.hero-image img {
    max-height: 500px !important;
    object-fit: cover;
		object-position: top;
}

.centered-links .textwidget {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
}
.centered-links .textwidget > div {
		display: inline-block;
		padding: 5px;
		margin: 5px;
}

/* Fix header bar overlapping content headers in anchor links */
:target {
		scroll-margin-top: 155px;
}

/* Team members - Switch emails for "Email me" link */
.uu-team-member-widget-email > :last-child {
		flex-grow: 1;
}
.uu-team-member-widget-email a[href^="mailto"] {
		display: inline-block;
		width: 100%;
		color: transparent;
		position: relative;
}
.uu-team-member-widget-email a[href^="mailto"]::after {
		display: inline-block;
		content: "Email Me";
		color: #47494a;
		text-decoration: underline;
		position: absolute;
		width: 100%;
		background: white;
		left: 0; top: 0;
}

/* Team members - Force all photos to line up regardless of dimensions */
.uu-team-member-widget-img .main-photo {
		aspect-ratio: 3 / 4;
		object-fit: cover;
}

/* Main menu responsive/adaptive fix */
#header_nav {
		position: absolute;
		top: 100%;
		width: 100%;
		height: auto;
		background-color: black;
		text-align: center;
}
#header_nav #primary-menu {
		justify-content: center;
}
#header_nav #primary-menu > .menu-item > a {
		padding: 15px;
}
#header_nav #primary-menu .sub-menu {
    padding: 5px;
    grid-template-columns: 1fr; /* Make it one column, not two */
		grid-gap: 5px;
		min-width: 150px;
}
#header_nav #primary-menu .sub-menu > li:not(.menu-item) {
		display: none; /* Hide sub-menu titles - not HTML-safe (unescaped &, etc) */
}
#header_nav #primary-menu .sub-menu .menu-item a {
    padding: 10px 15px; /* Enlarge the clickable/tappable area for easier access */
		white-space: nowrap;
}
#header_nav #primary-menu .sub-menu .menu-item a:hover,
#header_nav #primary-menu .sub-menu .menu-item a:focus {
		color: white;
		background-color: var(--utah-red);
}
.uu-bottom-header .uu-header-nav ul li a,
.uu-bottom-header .uu-header-nav ul li a:visited {
  background-color: inherit; /* Overrides background-color */
}
@media only screen and (min-width: 1025px) {
		#primary { margin-top: 117px !important; }
}

/* Underlined header + helper class (.header-line on h*) + centered option (.title-center on widget) */
.header-line::after,
.widget-title::after {
		content: '';
		display: block;
		width: 3.5rem;
		height: 4px;
		background-color: var(--utah-red);
		margin-top: .5em;
}
.title-center .widget-title,
.title-center h1,
.title-center h2,
.title-center h3 {
		text-align: center;
}
.title-center .widget-title::after,
.title-center h1::after,
.title-center h2::after,
.title-center h3::after {
		margin-inline: auto;
}

/* Standard button style + usage as navigation link */
#main .button {
		color: var(--utah-red);
		display: inline-block;
		background: white;
		padding: 15px 20px;
		border: 2px solid var(--utah-red);
		border-radius: 5px;
		text-transform: uppercase;
		text-decoration: none !important;
		&.main, &.active, &:target {
				color: white;
				background: var(--utah-red);
				&:hover {
						background: #890000; /* Red Rocks */
						color: white !important;
				}
		}
		&:hover {
				background: #e2e6e6; /* Salt Flat Grey */
				color: var(--utah-red) !important;
		}
		&.disabled {
				color: #707271;
				border-color: #707271;
				cursor: not-allowed;
				background: white;
				background: linear-gradient(135deg, white 50%, rgba(112, 114, 113, .3) calc(50% + 1px), rgba(112, 114, 113, .3) calc(50% + 2px), white calc(50% + 3px));
				&:hover {
						color: #707271 !important;
						background: linear-gradient(135deg, white 50%, rgba(112, 114, 113, .3) calc(50% + 1px), rgba(112, 114, 113, .3) calc(50% + 2px), white calc(50% + 3px));
				}
		}
}
#main .button-group {
		box-sizing: border-box;
		display: inline-flex;
		flex-flow: row wrap;
		margin-block: 15px;
		border: 2px solid var(--utah-red);
		border-radius: 5px;
		overflow: hidden;
		background-color: white;
		.button {
				flex-grow: 1;
				border: 1px solid var(--utah-red);
				border-radius: 0;
				padding: 15px !important;
		}
		&.vertical {
				flex-flow: column;
				width: 100%;
		}
}
p:has(.button) {
		margin-block: 15px;
}
.nav-links a {
		margin-bottom: .5em;
}

/* Social media links w/ icons */
.social-link {
		margin: 0;
}
.social-link span {
		font-size: 4em;
		margin-bottom: 1rem;
}

/* Quick Links widget fix (add .home-links to widget - add class with .links- for specific widths) */
.links-1 { --how-many-links: 1; }
.links-2 { --how-many-links: 2; }
.links-3 { --how-many-links: 3; }
.links-4 { --how-many-links: 4; }
.links-5 { --how-many-links: 5; }
.home-links .uu-quick-links-tab a {
		flex-basis: calc(100% / var(--how-many-links, 4));
}

/* Cards redux, found on staff bio page */
.plain-cards #uu-card-widget-container .uu-card-widget-card .uu-card-widget-card-copy p {
		color: black;
}
.plain-cards #uu-card-widget-container .uu-card-widget-card {
    justify-content: center;
}
.plain-cards #uu-card-widget-container .uu-card-widget-card .uu-card-widget-card-title-red,
.plain-cards #uu-card-widget-container .uu-card-widget-card .uu-card-widget-card-title-black {
    margin: 0;
}

/* Make columns in a row the same height (.equal-height on row) */
.equal-height {
		align-items: stretch !important;
		box-sizing: border-box;
}
.equal-height .widget,
.equal-height .widget > *,
.equal-height .widget > * > * {
		height: 100%;
		box-sizing: border-box;
}
.equal-height .widget .textwidget {
		height: calc(100% - 20px);
		box-sizing: border-box;
}

/* Orientation Leader card style (.orientation-leader on card widget) */
.panel-grid:has(.orientation-leader) {
	align-items: stretch !important;
}
.widget:has(.orientation-leader),
.orientation-leader,
.orientation-leader > div {
		height: 100%;
}
.orientation-leader .textwidget {
		height: calc(100% - 20px);
		box-sizing: border-box;
    background: #E1E1E1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1em;
}
.orientation-leader p:has(img) {
    order: -1;
}
/* OL Listing Page Grid */
#ol-bios > div {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
		& > div {
					padding: 10px;
					margin-bottom: 0 !important;				
		}
}
#ol-bios .so-widget-uu-team-member-widget { height: 100%; }
#ol-bios .uu-team-member-widget-card { height: 100%; margin: 0; }
#ol-bios .uu-team-member-widget-body {
  padding: 10px 15px;
  height: 100%;
  justify-content: space-between; /* Push Bio button to bottom */
}
#ol-bios .uu-team-member-widget-title { /* Actually Name, not title  */
  margin: 0;
  h3 {
			font-family: var(--header);
			font-size: 1.1rem;
			margin-block: 0 .2em;
			border-bottom: 2px solid #be0000;
	}
}
#ol-bios .uu-team-member-widget-name { /* Actually Hometown, not name */
  margin-block: 0 .5em;
}
#ol-bios .uu-team-member-widget-pronouns { /* Actually Major, not pronouns */
  line-height: 1.2em;
}

/* FAQ card style with FA icons in body (.faq-cards on card widget) */
.faq-cards .uu-card-widget-card, /* FAQ page */
.post-131 .uu-card-widget-card, /* UOnline page */
.post-129 .uu-card-widget-card, /* Transfer resources page */
.post-799 .uu-card-widget-card /* Connect with your academic college page */
{
		position: relative; /* For layering the button over the card */
}
.faq-cards div#uu-card-widget-container {
		grid-template-columns: repeat(auto-fill, minmax(325px, 1fr)) !important;
}
.faq-cards .uu-card-widget-card-img-icon {
		display: none !important;
}
.faq-cards .uu-card-widget-card-body {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
}
.faq-cards .uu-card-widget-card-body > * {
    margin: 0 !important;
}
.faq-cards .uu-card-widget-card-copy span {
    font-size: 3em;
}
.faq-cards a:hover .uu-card-widget-card-title-red {
		text-decoration: underline;
}
.faq-cards .uu-btn,
.post-131 .uu-btn,
.post-129 .uu-btn,
.post-799 .uu-btn { /* Linked cards require button text :( */
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
}

/* Chatbot covers up back to top button on mobile, this fixes it */
#page:has(~ webchat-widget) #back-to-top-btn.active {
		z-index: 99999;
		right: 1.5rem;
		bottom: calc(1.5rem + 56px + 10px); /* Space from bottom + height of button + spacing between buttons */
		background-color: var(--utah-red);
		opacity: 1;
		color: white;
		border-radius: 100px;
		display: flex;
		min-width: 56px;
		width: fit-content;
		height: 56px;
		padding: 0;
		justify-content: center;
		align-items: center;
}