/*
 * modern.css -- visual refresh layered on top of the legacy stylesheets.
 * Loaded last from base.html. To revert the whole look, remove the
 * <link> to this file (and the Inter font link) from base.html.
 */

:root {
	--navy: #002566;
	--navy-dark: #001a4a;
	--blue: #2a5db0;
	--blue-soft: #e8effa;
	--steel: #6a88b3;
	--line: #dde5f0;
	--text: #2b3445;
	--muted: #5b6678;
	--radius: 12px;
	--shadow: 0 1px 2px rgba(16, 35, 80, .06), 0 8px 24px rgba(16, 35, 80, .08);
}

/* ---------- page + typography ---------- */
html {
	background: #eef2f8 !important;
	font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif !important;
	color: var(--text) !important;
}

body {
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.65;
	padding-top: 0 !important;
	background: transparent;
	-webkit-font-smoothing: antialiased;
}

#container {
	background: #fff !important;
	margin-top: 0 !important;
	border-radius: 0 0 var(--radius) var(--radius) !important;
	box-shadow: var(--shadow);
	padding-bottom: 40px !important;
}

a { transition: color .15s ease, background-color .15s ease, box-shadow .15s ease; }

/* ---------- banner ---------- */
#banner {
	/* full-bleed: spans the whole browser width */
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	height: 150px !important;
	border-radius: 0 !important;
	/* navy fade (left->right) over the photo */
	background: linear-gradient(90deg, var(--navy-dark) 0%, var(--navy) 38%, rgba(0, 37, 102, .6) 58%, rgba(0, 37, 102, .1) 100%),
	            url("../images/header-hero.jpg") center 35% / cover no-repeat,
	            var(--navy) !important;
}

/* centered content column inside the full-width banner */
#banner .banner-inner {
	position: relative;
	width: 94%;
	max-width: 1600px;
	height: 150px;
	margin: 0 auto;
	background: url("../images/structure/logo.png") no-repeat scroll 24px 22px;
}

#banner h1,
#banner h1 a:link, #banner h1 a:visited {
	font-family: inherit !important;
	letter-spacing: .2px;
}

#banner h1 {
	padding: 82px 0 0 128px !important;
	font-size: 1.5em !important;
	font-weight: 600 !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

#quickfind { padding: 22px 28px 5px 0 !important; }
#quickfind form table { background: rgba(255,255,255,.12); border-radius: 8px; padding: 2px; }
#quickfind ul { margin: 0 0 6px; padding: 0; text-align: right; }
#quickfind li { display: inline; margin-left: 14px; font-size: .85em; }
#quickfind a, #quickfind a:link, #quickfind a:visited { color: #cfdcf5 !important; text-decoration: none; }
#quickfind a:hover { color: #fff !important; text-decoration: underline; }
#quickfind input[type=text] {
	border: 0; border-radius: 6px 0 0 6px; padding: 5px 10px; outline: none;
}
#quickfind #google-search, #quickfind input[type=submit] {
	border: 0; border-radius: 0 6px 6px 0; padding: 5px 14px;
	background: #3b6cb7; color: #fff; cursor: pointer;
}
#quickfind #google-search:hover { background: #4a7bc8; }

/* ---------- navigation ---------- */
#navbar {
	height: auto !important;
	min-height: 50px;
	background: #fff !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	font-family: inherit !important;
	font-size: 1em !important;
	position: sticky;
	top: 0;
	z-index: 50;
}

#navbar > ul {
	width: 94%;
	max-width: 1600px;
	margin: 0 auto !important;
	padding: 0 12px !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#navbar > ul > li { padding: 0 !important; display: block !important; position: relative; }

/* dropdown stays hidden until Bootstrap adds .open */
#navbar .dropdown-menu { display: none; padding: 6px 0 !important; margin: 0 !important; }
#navbar .dropdown.open > .dropdown-menu { display: block; }
#navbar .dropdown-menu li { display: block !important; padding: 0 !important; }

#navbar a:link, #navbar a:visited {
	display: block;
	padding: 15px 16px;
	color: var(--navy) !important;
	font-weight: 500;
	border-bottom: 3px solid transparent;
}

#navbar a:hover, #navbar a:active {
	color: var(--blue) !important;
	text-decoration: none !important;
	border-bottom-color: var(--blue);
	background: var(--blue-soft);
}

#navbar .dropdown-menu {
	margin-top: 0;
	padding: 6px 0;
	border: 1px solid var(--line) !important;
	border-radius: 0 0 10px 10px !important;
	box-shadow: var(--shadow);
}
#navbar .dropdown-menu a:link, #navbar .dropdown-menu a:visited { border-bottom: 0; padding: 9px 18px; }

/* ---------- cards / columns ---------- */
.card {
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow) !important;
	overflow: hidden;
}

#left-column, #news {
	border: 1px solid var(--line) !important;
	border-radius: var(--radius);
}

#left-column h2, #right-column h2 {
	font-family: inherit !important;
	font-size: 1.05em !important;
	font-weight: 600 !important;
	background: var(--navy) !important;
	letter-spacing: .2px;
}
#left-column h2 { padding: 12px 18px !important; }

#left-column li, #left-column li li {
	font-size: .95em !important;
	border-top: 1px solid #edf1f7 !important;
	background-image: none !important;
	padding: 8px 18px !important;
}

#left-column a:link, #left-column a:visited,
#content a:link, #content a:visited { color: var(--blue) !important; }
#left-column a:hover, #content a:hover { color: var(--navy) !important; text-decoration: underline; }

/* right sidebar on the home page */
#right-column {
	background: var(--navy) !important;
	border-radius: var(--radius);
	margin-left: 1em !important;
}
#right-column ul, #right-column li { background: transparent !important; }
#right-column li { font-size: .9em !important; padding: .55em 0 !important; line-height: 1.45; }
#right-column h2 { background: transparent !important; padding: .9em 1.2em .2em !important; }
#right-column h2:empty { display: none; }
#right-column a:link, #right-column a:visited { color: #e3ecfb !important; }
#right-column a:hover { color: #fff !important; text-decoration: underline; }

/* call-to-action button */
#right-column h2 a[href="/apply"] {
	display: block;
	text-align: center;
	padding: 12px 16px;
	margin: 4px 0 6px;
	background: #fff;
	color: var(--navy) !important;
	border-radius: 999px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
#right-column h2 a[href="/apply"]:hover {
	background: #ffd447;
	text-decoration: none !important;
	transform: translateY(-1px);
}

/* "Next Courses" block + inline-styled headings */
#courses h1 {
	background: var(--navy) !important;
	border-radius: 10px;
	padding: 12px 18px !important;
	font-size: 1.1em !important;
	font-weight: 600;
}
#courses h2 {
	background: var(--blue-soft) !important;
	color: var(--navy) !important;
	border-radius: 8px;
	padding: 8px 14px !important;
	font-size: 1em !important;
	font-weight: 600;
	margin-top: 18px;
}

/* ---------- page content ---------- */
#content h1, h1.page-title {
	font-family: inherit !important;
	font-weight: 700 !important;
	color: var(--navy) !important;
	letter-spacing: -.3px;
}
#content h2 { font-weight: 600 !important; color: var(--navy) !important; }
#content h3 { font-weight: 600 !important; color: #8a3b12 !important; }
#content h4 {
	background: var(--navy) !important;
	border-radius: 8px;
	padding: 8px 14px;
	font-weight: 600;
}

#content p { line-height: 1.7 !important; }

/* course panels: one solid navy heading bar (no steel-blue wrapper behind the h4) */
#content .panel { border-color: var(--navy) !important; border-radius: 10px !important; overflow: hidden; box-shadow: 0 1px 2px rgba(16,35,80,.06); }
#content .panel-info > .panel-heading {
	background: var(--navy) !important;
	border-color: var(--navy) !important;
	color: #fff;
	padding: 10px 16px;
}
#content .panel-heading h4 {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0;
	margin: 0;
	color: #fff !important;
}

/* home page announcements: full-width card, items in a 3-column grid */
#left-column .announcements-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
#left-column .announcements-grid > li {
	margin-right: -1px;                     /* hairline dividers overlap; card clips the outer edge */
	padding: 14px 20px !important;
	border-top: 1px solid #edf1f7 !important;
	border-right: 1px solid #edf1f7;
	font-size: .95em !important;
	line-height: 1.55;
	overflow-wrap: anywhere;
}
@media (max-width: 1000px) { #left-column .announcements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { #left-column .announcements-grid { grid-template-columns: 1fr; } }

/* students page expand/collapse bars */
.expand, .compress {
	background-color: var(--navy) !important;
	border-top: 0 !important;
	color: #fff;
	padding: .45em !important;
	cursor: pointer;
}
.expand:hover, .compress:hover { background-color: var(--blue) !important; }
.shadeContainer { border: 1px solid var(--line) !important; border-radius: var(--radius); overflow: hidden; }

/* generic tables (courses, students, emails) */
#content table { border-collapse: collapse; }
#content table td, #content table th { padding: 8px 12px; border-bottom: 1px solid #edf1f7; }

/* images */
.carousel-inner { border-radius: var(--radius); overflow: hidden; }

/* ---------- home hero (carousel + overlay + buttons) ---------- */
.hero { position: relative; }
.hero .carousel-inner { max-height: 460px !important; }
.hero .carousel-inner > .item > img { max-height: 460px !important; min-height: 320px; }
.hero::after {   /* darken left side so text is readable */
	content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
	/* --hero-shade: strength of the dark side behind the headline (0 = none, .78 was the original) */
	--hero-shade: .7;
	/* diagonal: darkest in the lower-left corner, fading out toward the top-right */
	background: linear-gradient(to top right, rgba(0, 20, 60, var(--hero-shade)) 0%, rgba(0, 20, 60, calc(var(--hero-shade) * .5)) 40%, rgba(0, 20, 60, 0) 72%);
}
/* mirror selected carousel photos (originals untouched). Remove a line to un-flip that slide. */
.hero .carousel-inner img[src$="banner-image-2.jpg"],
/*.hero .carousel-inner img[src$="banner-image-3.jpg"],*/
.hero .carousel-inner img[src$="banner-image-4.jpg"],
.hero .carousel-inner img[src$="banner-image-5.jpg"] { transform: scaleX(-1); }

.hero-overlay {
	position: absolute; z-index: 5; left: 40px; top: 50%; transform: translateY(-50%);
	max-width: 560px; color: #fff;
}
#left-column .hero-overlay h2 {
	margin: 0 0 10px !important; padding: 0 !important; background: none !important; color: #fff !important;
	font-size: 2.2em !important; line-height: 1.15; font-weight: 700 !important; letter-spacing: -.5px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
#left-column .hero-overlay p { margin: 0 0 20px; font-size: 1.1em; line-height: 1.5; color: #e6eefb; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
#left-column a.hero-btn, #left-column a.hero-btn:link, #left-column a.hero-btn:visited {
	display: inline-block; margin: 0 10px 8px 0; padding: 12px 26px; border-radius: 999px;
	font-weight: 600; text-decoration: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
#left-column a.hero-btn.primary, #left-column a.hero-btn.primary:link, #left-column a.hero-btn.primary:visited { background: #ffd447; color: var(--navy) !important; }
#left-column a.hero-btn.primary:hover { background: #ffe07a; transform: translateY(-1px); }
#left-column a.hero-btn.ghost, #left-column a.hero-btn.ghost:link, #left-column a.hero-btn.ghost:visited { background: rgba(255,255,255,.12); color: #fff !important; border: 2px solid #fff; padding: 10px 24px; }
#left-column a.hero-btn.ghost:hover { background: #fff; color: var(--navy) !important; }
@media (max-width: 800px) {
	.hero-overlay { left: 20px; right: 20px; max-width: none; }
	#left-column .hero-overlay h2 { font-size: 1.5em !important; }
	#left-column .hero-overlay p { display: none; }
}

/* forms / buttons used on admin-ish pages */
.btn, button, input[type=submit] { border-radius: 8px; }
input[type=text], input[type=email], input[type=file], select, textarea {
	border: 1px solid #c6d2e4; border-radius: 8px; padding: 7px 10px;
}
input:focus, select:focus, textarea:focus {
	outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42, 93, 176, .18);
}

/* ---------- footer ---------- */
#footer { border-top: 0 !important; margin-top: 24px; color: var(--muted); }
#footer p, #footer a:link, #footer a:visited { color: var(--muted) !important; }

/* ---------- hamburger button (hidden on desktop) ---------- */
#nav-toggle { display: none; }

/* ---------- small screens ---------- */
@media (max-width: 800px) {
	html, body { overflow-x: hidden; }
	#container, #footer { width: 100% !important; border-radius: 0 !important; }
	#banner h1 { font-size: 1.05em !important; }
	#quickfind { display: none; }
	#left-column { width: 100% !important; margin: 0 !important; float: none !important; }
	/* pages that kept the old two-column offsets (e.g. students) */
	#content { margin-left: 12px !important; margin-right: 12px !important; }	/* home.html's carousel wrapper has inline margin-right:-11px (leftover from the fixed-width
	   layout) which pushes the carousel past the screen edge on phones */
	#left-column > .row { margin-left: 0 !important; margin-right: 0 !important; }
	#left-column .carousel, #left-column .carousel-inner { max-width: 100% !important; }
	.home-side { float: none !important; width: auto !important; min-height: 0 !important; margin: 16px 12px; }
	.home-side #left-column { float: none !important; width: auto !important; }
	#right-column { margin-left: 0 !important; }

	/* on the home page show the main content first, sidebar after it */
	#container:has(.home-side) { display: flex; flex-direction: column; }
	#container:has(.home-side) > #left-column { order: 1; }
	#container:has(.home-side) > .home-side { order: 2; }
	#container:has(.home-side) > #footer { order: 3; }   /* home.html's unclosed div nests the footer inside #container */
	#container:has(.home-side) > #forprint { order: 4; }
	#nav-toggle .nav-text { color: var(--navy); font-size: 1em; }

	/* wide tables (requirements, students, emails): scroll sideways inside their own box
	   instead of being clipped by the page */
	#content table, table.table {
		display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
	}
	#content table th, #content table td, table.table th, table.table td { min-width: 110px; }
	#content table td:first-child, table.table td:first-child { min-width: 130px; }

	/* hamburger nav */
	#nav-toggle {
		display: flex; align-items: center; gap: 12px; width: 100%;
		padding: 14px 18px; background: #fff; border: 0; border-radius: 0;
		color: var(--navy); font: inherit; font-weight: 600; cursor: pointer;
	}
	#nav-toggle .bars {
		display: block; width: 22px; height: 2px; background: var(--navy);
		box-shadow: 0 -7px 0 var(--navy), 0 7px 0 var(--navy);
		transition: background .15s ease;
	}
	#navbar.nav-open #nav-toggle .bars { background: transparent; }   /* middle bar fades, leaving a tidy "=" */
	#navbar > ul {
		display: none; width: 100% !important; max-width: none; padding: 0 !important;
		flex-direction: column; align-items: stretch; border-top: 1px solid var(--line);
	}
	#navbar.nav-open > ul { display: flex; }
	#navbar > ul > li { width: 100%; border-bottom: 1px solid #f0f3f8; }
	#navbar a:link, #navbar a:visited {
		padding: 14px 20px; border-bottom: 0; border-left: 3px solid transparent;
	}
	#navbar a:hover, #navbar a:active { border-left-color: var(--blue); border-bottom-color: transparent; }
	#navbar .dropdown-menu {
		position: static; float: none; width: 100%; box-shadow: none; background: #f6f8fc;
		border: 0 !important; border-radius: 0 !important;
	}
	#navbar .dropdown-menu a:link, #navbar .dropdown-menu a:visited { padding-left: 38px; }
}

@media (max-width: 600px) {
	#banner, #banner .banner-inner { height: 104px !important; }
	#banner .banner-inner { background-size: 215px auto; background-position: 14px 14px; }
	#banner h1 { padding: 62px 0 0 70px !important; font-size: .8em !important; }
	.hero .carousel-inner > .item > img { min-height: 260px; }
	#left-column .hero-overlay h2 { font-size: 1.25em !important; margin-bottom: 8px !important; }
	#left-column a.hero-btn { padding: 9px 18px; font-size: .9em; margin-right: 6px; }
	#left-column a.hero-btn.ghost { padding: 7px 16px; }
}