:root {
	--msu-blue: #6391ba;
	--msu-blue-dark: #4d7aa3;
	--msu-blue-light: #80b8fa;
	--msu-gray: #9a9999;
	--msu-footer: #a7a7a7;
	--bs-body-font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--bs-body-font-size: .95rem;
	--bs-link-color-rgb: 77, 122, 163;
	--bs-link-hover-color-rgb: 102, 181, 250;
}

body { letter-spacing: .3px; }

/* Keep the footer at the bottom of the window on short pages */
body { display: flex; flex-direction: column; min-height: 100vh; }
#content { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons: black, square corners (every button on the site uses .btn-primary) */
.btn { --bs-btn-border-radius: 0; border-radius: 0; background-image: none; }
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #000;
	--bs-btn-border-color: #000;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #333;
	--bs-btn-hover-border-color: #333;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #333;
	--bs-btn-active-border-color: #333;
	--bs-btn-disabled-bg: #000;
	--bs-btn-disabled-border-color: #000;
	--bs-btn-focus-shadow-rgb: 0, 0, 0;
	font-weight: 700;
	letter-spacing: .5px;
}
.btn:hover { text-decoration: none; }
.form-control::file-selector-button { background: #000; color: #fff; }
.form-control:hover:not(:disabled):not([readonly])::file-selector-button { background: #333; }
.progress-bar { background-color: var(--msu-blue); }
.text-primary { color: var(--msu-blue-dark) !important; }

/* ---------- Header ---------- */
#site-header { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.site-logo img { display: block; width: 300px; max-width: 100%; height: auto; }
.account-link {
	color: var(--msu-blue);
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
}
.account-link img { width: 16px; margin-right: 4px; vertical-align: -2px; }
.divider { display: inline-block; height: 20px; margin: 0 12px; border-left: 1px solid #b5b5b5; }

#site-header .nav-link {
	color: #212121;
	font-weight: 900;
	font-size: .8rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: .9rem 1.5rem;
}
#site-header .nav-link:hover,
#site-header .nav-link.active { color: var(--msu-blue-light); text-decoration: none; }
.navbar-toggler { font-size: .8rem; font-weight: 700; text-transform: uppercase; color: #555; border: 0; }
.navbar-toggler-icon { width: 1.2em; height: 1.2em; }

@media (max-width: 575.98px) {
	.site-logo img { width: 170px; }
	.account-link img { display: none; }
	.divider { margin: 0 8px; }
}

/* ---------- Page banners ---------- */
.page-hero {
	background-color: #333;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #eee;
	text-align: center;
	padding: 4rem 1rem;
	margin-bottom: 2rem;
}
.page-hero h1 {
	color: #fff;
	text-shadow: 1px 1px 2px #000;
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}
.page-hero-kicker {
	font-size: clamp(1rem, 1.5vw, 1.4rem);
	font-weight: 700;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #000;
	margin: 0;
}
hr.small { width: 35px; margin: 12px auto 10px; border-top: 2px solid rgba(204, 204, 204, .8); opacity: 1; }

.page-hero-home { min-height: 85vh; display: flex; align-items: center; justify-content: center; }
.page-hero-home h1 { font-size: clamp(2.2rem, 5vw, 5rem); text-transform: none; letter-spacing: 1px; }

.bg-home      { background-image: url(../img/bg-home-2026.webp); }
.bg-contact   { background-image: url(../img/bg-contact.webp); }
.bg-course    { background-image: url(../img/bg-course.webp); }
.bg-dashboard { background-image: url(../img/bg-dashboard.webp); }
.bg-error     { background-image: url(../img/bg-error.webp); }
.bg-login     { background-image: url(../img/bg-login.webp); }
.bg-register  { background-image: url(../img/bg-register.webp); }

/* ---------- Content ---------- */
.section-title { font-size: 1.5rem; font-weight: 700; }
.section-title a { color: #212529; }
.course-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.link-more { color: var(--msu-blue-light); font-weight: 700; }

.hover-zoom { transition: transform .6s ease, opacity .6s ease; will-change: transform; }
a:hover .hover-zoom, .position-relative:hover .hover-zoom { transform: scale(1.06); opacity: .92; }

/* Home page: slide in on scroll (js/site.js adds .is-visible) */
.js .reveal { opacity: 0; transition: opacity .6s ease-out, transform .6s ease-out; }
.js .reveal-left { transform: translateX(-60px); }
.js .reveal-right { transform: translateX(60px); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Dashboard */
.category-bar {
	background: #000;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 1px;
	padding: .6rem 1rem;
	margin: 1.5rem 0 0;
}
.category-bar:first-child { margin-top: 0; }
.account-details dt { font-size: .75rem; text-transform: uppercase; color: #6c757d; font-weight: 700; }
.account-details dd { margin-bottom: .6rem; }

/* Forms */
.form-select-highlight { background-color: #fff9c4; }
.form-control[readonly] { background-color: var(--bs-secondary-bg); }

/* Quiz */
.quiz-panel { max-width: 50rem; }

/* Admin */
.admin-card { transition: border-color .15s, box-shadow .15s; }
.admin-card:hover { border-color: var(--msu-blue); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--msu-footer);
	color: #fff;
	letter-spacing: 1.5px;
	padding: 4rem 0 3rem;
	margin-top: 3rem;
}
.site-footer h2 { font-size: .85rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.site-footer .footer-org { font-size: 1.5rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: .75rem; }
.site-footer a, .site-footer .btn-link { color: #f4f2f2; }
.site-footer a:hover, .site-footer .btn-link:hover { color: #fff; }
.site-footer li { padding-bottom: .4rem; }
.site-footer hr { border-color: #ece9e9; border-width: 2px; opacity: 1; margin: 2rem 0 1.25rem; }
.site-footer .social svg { width: 30px; height: 30px; fill: #ececec; }
.site-footer .social a:hover svg { fill: #fff; }
.footer-legal { font-size: .8rem; text-transform: lowercase; }
.footer-legal .btn-link { font-size: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; }

/* ---------- Back to top ---------- */
.scroll-to-top {
	position: fixed;
	left: 10px;
	bottom: 10px;
	z-index: 1020;
	padding: .4rem .75rem;
	font-size: .75rem;
	color: var(--msu-gray);
	background: rgba(255, 255, 255, .9);
	border-radius: .25rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
.scroll-to-top.show { opacity: 1; visibility: visible; }
.scroll-to-top:hover { color: var(--msu-blue-light); text-decoration: none; }

/* Keep slide-in animations from causing sideways scrolling on phones */
#content { overflow-x: clip; }