/*
 * Bootstrap 3 -> 5 compatibility styles for the legacy WWW site.
 *
 * Bootstrap 5 removed a number of class names that legacy pages, shared controls
 * and CMS-authored content still emit. This layer re-implements the ones in use
 * (and a few common ones) on top of Bootstrap 5 so the migration off bootstrap3/
 * does not change layout. Load this AFTER bootstrap5/css/bootstrap.min.css.
 *
 * Bootstrap 3 breakpoints: xs <768, sm 768-991, md 992-1199, lg >=1200.
 */

/*
 * ---- Base typography ----
 * The single biggest visual change from the upgrade: v3 set the base body text
 * to 14px / line-height 1.42857143, while v5 bumped it to 16px / 1.5 (1rem).
 * Every piece of content that inherits the body size (paragraphs, panels,
 * tables, lists, labels, form controls, buttons) therefore grew ~14%. v5 also
 * switched headings to viewport-scaled "responsive font sizes"
 * (e.g. `h3 { font-size: calc(1.3rem + .6vw) }`) instead of v3's fixed px.
 * Restore v3's fixed typography so pages match production. This file loads in
 * the slot the old bootstrap3.css occupied (right after the framework), so
 * page/CMS stylesheets that intentionally set their own sizes still win.
 */
body {
	font-size: 14px;
	line-height: 1.42857143;
}
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
/* v3 form controls and buttons were 14px; v5 makes them 1rem (16px). */
.form-control,
.form-select,
.input-sm,
.btn {
	font-size: 14px;
}

/*
 * ---- Link decoration ----
 * v3's Reboot left links undecorated (text-decoration: none) and only
 * underlined them on hover/focus. v5's Reboot underlines every link by
 * default, which the entire legacy site (nav, account links, CMS content)
 * was never designed for. Restore the v3 default site-wide.
 */
a {
	text-decoration: none;
}
a:hover,
a:focus {
	text-decoration: underline;
}

/* ---- Responsive visibility (hidden-xs / visible-xs family) ---- */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
	display: none !important;
}

@media (max-width: 767px) {
	.visible-xs { display: block !important; }
	table.visible-xs { display: table !important; }
	tr.visible-xs { display: table-row !important; }
	th.visible-xs, td.visible-xs { display: table-cell !important; }
	.visible-xs-block { display: block !important; }
	.visible-xs-inline { display: inline !important; }
	.visible-xs-inline-block { display: inline-block !important; }
	.hidden-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
	.visible-sm { display: block !important; }
	table.visible-sm { display: table !important; }
	tr.visible-sm { display: table-row !important; }
	th.visible-sm, td.visible-sm { display: table-cell !important; }
	.visible-sm-block { display: block !important; }
	.visible-sm-inline { display: inline !important; }
	.visible-sm-inline-block { display: inline-block !important; }
	.hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.visible-md { display: block !important; }
	table.visible-md { display: table !important; }
	tr.visible-md { display: table-row !important; }
	th.visible-md, td.visible-md { display: table-cell !important; }
	.visible-md-block { display: block !important; }
	.visible-md-inline { display: inline !important; }
	.visible-md-inline-block { display: inline-block !important; }
	.hidden-md { display: none !important; }
}

@media (min-width: 1200px) {
	.visible-lg { display: block !important; }
	table.visible-lg { display: table !important; }
	tr.visible-lg { display: table-row !important; }
	th.visible-lg, td.visible-lg { display: table-cell !important; }
	.visible-lg-block { display: block !important; }
	.visible-lg-inline { display: inline !important; }
	.visible-lg-inline-block { display: inline-block !important; }
	.hidden-lg { display: none !important; }
}

.visible-print { display: none !important; }
@media print {
	.visible-print { display: block !important; }
	.hidden-print { display: none !important; }
}

/*
 * v3 display utilities removed in v5. `.hidden` in particular is used by shared
 * controls (nav, footers, Institutional master, signup) and toggled by JS, so
 * without it those elements incorrectly render. `.show` is intentionally NOT
 * redefined because v5 uses it as component state (collapse/dropdown/modal).
 */
.hidden { display: none !important; }
.hide { display: none !important; }

/*
 * ---- Base link decoration ----
 * v5's Reboot sets `a { text-decoration: underline }` by default, but v3 (still
 * live in production) defaulted to no underline and only underlined on hover.
 * The legacy site, shared controls and CMS content were all authored against
 * that, so v5's default leaks underlines onto nav/body links. Restore v3's
 * behavior. This equal-specificity rule wins because compat loads after v5.
 * Buttons, nav-links and dropdown items are kept undecorated even on hover so
 * component anchors don't regress.
 */
a { text-decoration: none; }
a:hover,
a:focus { text-decoration: underline; }
.btn:hover, .btn:focus,
.nav-link:hover, .nav-link:focus,
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus,
.dropdown-item:hover, .dropdown-item:focus { text-decoration: none; }
/* ---- Extra-small grid (col-xs-* removed in v4/v5) ---- */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}
.col-xs-1  { width: 8.33333333%; }
.col-xs-2  { width: 16.66666667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.33333333%; }
.col-xs-5  { width: 41.66666667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.33333333%; }
.col-xs-8  { width: 66.66666667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }
.col-xs-pull-6 { right: 50%; }
.col-xs-push-6 { left: 50%; }

/*
 * Responsive column widths for the larger v3 tiers. Legacy markup mixes
 * col-xs-* (base widths above) with col-sm/md/lg-* and relies on the larger
 * tier overriding col-xs at v3's breakpoints (>=768 / >=992 / >=1200) via
 * source order. Because this file loads AFTER bootstrap5.css, the col-xs base
 * widths would otherwise win at every width (e.g. `col-xs-12 col-sm-3` stays
 * full-width and wraps). Restate the larger tiers here so they win when active.
 */
@media (min-width: 768px) {
	.col-sm-1  { width: 8.33333333%; }
	.col-sm-2  { width: 16.66666667%; }
	.col-sm-3  { width: 25%; }
	.col-sm-4  { width: 33.33333333%; }
	.col-sm-5  { width: 41.66666667%; }
	.col-sm-6  { width: 50%; }
	.col-sm-7  { width: 58.33333333%; }
	.col-sm-8  { width: 66.66666667%; }
	.col-sm-9  { width: 75%; }
	.col-sm-10 { width: 83.33333333%; }
	.col-sm-11 { width: 91.66666667%; }
	.col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
	.col-md-1  { width: 8.33333333%; }
	.col-md-2  { width: 16.66666667%; }
	.col-md-3  { width: 25%; }
	.col-md-4  { width: 33.33333333%; }
	.col-md-5  { width: 41.66666667%; }
	.col-md-6  { width: 50%; }
	.col-md-7  { width: 58.33333333%; }
	.col-md-8  { width: 66.66666667%; }
	.col-md-9  { width: 75%; }
	.col-md-10 { width: 83.33333333%; }
	.col-md-11 { width: 91.66666667%; }
	.col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
	.col-lg-1  { width: 8.33333333%; }
	.col-lg-2  { width: 16.66666667%; }
	.col-lg-3  { width: 25%; }
	.col-lg-4  { width: 33.33333333%; }
	.col-lg-5  { width: 41.66666667%; }
	.col-lg-6  { width: 50%; }
	.col-lg-7  { width: 58.33333333%; }
	.col-lg-8  { width: 66.66666667%; }
	.col-lg-9  { width: 75%; }
	.col-lg-10 { width: 83.33333333%; }
	.col-lg-11 { width: 91.66666667%; }
	.col-lg-12 { width: 100%; }
}

/*
 * Column offsets: v3 used .col-*-offset-N, v5 renamed them to .offset-*-N.
 * Legacy markup and CMS content still emit the v3 names (e.g. col-sm-offset-4
 * to centre a col-sm-4), so re-implement them as margin-left, matching v5's
 * own offset mechanism. xs applies at all widths; sm/md/lg are min-width gated.
 */
.col-xs-offset-0  { margin-left: 0; }
.col-xs-offset-1  { margin-left: 8.33333333%; }
.col-xs-offset-2  { margin-left: 16.66666667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.33333333%; }
.col-xs-offset-5  { margin-left: 41.66666667%; }
.col-xs-offset-6  { margin-left: 50%; }
.col-xs-offset-7  { margin-left: 58.33333333%; }
.col-xs-offset-8  { margin-left: 66.66666667%; }
.col-xs-offset-9  { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }

@media (min-width: 768px) {
	.col-sm-offset-0  { margin-left: 0; }
	.col-sm-offset-1  { margin-left: 8.33333333%; }
	.col-sm-offset-2  { margin-left: 16.66666667%; }
	.col-sm-offset-3  { margin-left: 25%; }
	.col-sm-offset-4  { margin-left: 33.33333333%; }
	.col-sm-offset-5  { margin-left: 41.66666667%; }
	.col-sm-offset-6  { margin-left: 50%; }
	.col-sm-offset-7  { margin-left: 58.33333333%; }
	.col-sm-offset-8  { margin-left: 66.66666667%; }
	.col-sm-offset-9  { margin-left: 75%; }
	.col-sm-offset-10 { margin-left: 83.33333333%; }
	.col-sm-offset-11 { margin-left: 91.66666667%; }
}

@media (min-width: 992px) {
	.col-md-offset-0  { margin-left: 0; }
	.col-md-offset-1  { margin-left: 8.33333333%; }
	.col-md-offset-2  { margin-left: 16.66666667%; }
	.col-md-offset-3  { margin-left: 25%; }
	.col-md-offset-4  { margin-left: 33.33333333%; }
	.col-md-offset-5  { margin-left: 41.66666667%; }
	.col-md-offset-6  { margin-left: 50%; }
	.col-md-offset-7  { margin-left: 58.33333333%; }
	.col-md-offset-8  { margin-left: 66.66666667%; }
	.col-md-offset-9  { margin-left: 75%; }
	.col-md-offset-10 { margin-left: 83.33333333%; }
	.col-md-offset-11 { margin-left: 91.66666667%; }
}

@media (min-width: 1200px) {
	.col-lg-offset-0  { margin-left: 0; }
	.col-lg-offset-1  { margin-left: 8.33333333%; }
	.col-lg-offset-2  { margin-left: 16.66666667%; }
	.col-lg-offset-3  { margin-left: 25%; }
	.col-lg-offset-4  { margin-left: 33.33333333%; }
	.col-lg-offset-5  { margin-left: 41.66666667%; }
	.col-lg-offset-6  { margin-left: 50%; }
	.col-lg-offset-7  { margin-left: 58.33333333%; }
	.col-lg-offset-8  { margin-left: 66.66666667%; }
	.col-lg-offset-9  { margin-left: 75%; }
	.col-lg-offset-10 { margin-left: 83.33333333%; }
	.col-lg-offset-11 { margin-left: 91.66666667%; }
}

/* ---- Float / alignment helpers ---- */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.center-block { display: block; margin-right: auto; margin-left: auto; }
.clearfix::after { display: block; clear: both; content: ""; }

/* ---- Images ---- */
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-rounded { border-radius: 6px; }
.img-circle { border-radius: 50%; }

/* ---- Dropdowns: v3 used <ul class="dropdown-menu"><li><a>, v5 uses .dropdown-item ---- */
.dropdown-menu > li > a {
	display: block;
	width: 100%;
	padding: 4px 16px;
	clear: both;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	color: #1e2125;
	background-color: #e9ecef;
	text-decoration: none;
}
.dropdown-menu > .divider,
.dropdown-menu > li.divider {
	height: 0;
	margin: 8px 0;
	overflow: hidden;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}
/* v5 renders its own caret via .dropdown-toggle::after; hide the explicit v3 one. */
.caret { display: none !important; }
/*
 * ...but collapse toggles (e.g. the account mobile "Menu" button) are NOT
 * .dropdown-toggle, so v5 adds no ::after and the rule above would leave them
 * with no caret at all. Restore the v3 caret triangle in that case.
 */
.navbar-toggle .caret {
	display: inline-block !important;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px dashed;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

/* ---- Inline lists (v3 styled > li directly) ---- */
.list-inline { padding-left: 0; list-style: none; }
.list-inline > li {
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
}

/* ---- Close button (v5 replaced .close with .btn-close) ---- */
.close {
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: 0.5;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.close:hover,
.close:focus { opacity: 0.75; }

/*
 * v3 .modal-header was a plain block: the .close button floated to the
 * top-right corner and the title (which the site centers via
 * `text-align: center`) spanned the full width. v5 turns .modal-header into a
 * flexbox with `justify-content: space-between`, which ignores the float,
 * pins the legacy <button class="close"> to the left and shoves the title
 * off-center. Restore the v3 block layout so floated close + centered title
 * render as designed.
 */
.modal-header {
	display: block;
}
.modal-header .close { margin-top: -2px; }

/* ---- Buttons (.btn-default removed in v4/v5) ---- */
.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus {
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}

/* .btn-block (full-width button) was removed in v5. */
.btn-block {
	display: block;
	width: 100%;
}
.btn-block + .btn-block { margin-top: 5px; }

/* .form-group (v3, margin-bottom:15px) was removed in v5 in favour of .mb-3. */
.form-group { margin-bottom: 15px; }

/*
 * v5 .form-control sets appearance:none, which strips the native dropdown arrow
 * from <select class="form-control">. v3's .form-control left the native arrow
 * in place (v5 moved select styling to .form-select, but the legacy markup uses
 * .form-control). Restore the native arrow so dropdowns like "All Subjects" and
 * "My Favorites" show their caret again.
 */
select.form-control {
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
	appearance: auto;
}

/*
 * ---- Input groups ----
 * v3 used a `display: table` model with an `.input-group-btn` wrapper around the
 * button; v5 switched to flexbox with `flex-wrap: wrap` and dropped
 * .input-group-btn / .input-group-addon. The legacy search boxes (Resources)
 * still emit the v3 markup, so under v5 the button wraps onto a second line
 * below a full-width field. Restore the v3 table model so the field and button
 * sit on one row.
 */
.input-group {
	position: relative;
	display: table;
	border-collapse: separate;
}
.input-group .form-control {
	position: relative;
	z-index: 2;
	float: left;
	width: 100%;
	margin-bottom: 0;
}
/* select2 (used on the Resources search) renders a .select2-container instead
   of a .form-control; treat it as the field cell too. */
.input-group > .select2-container {
	display: table-cell;
	width: 100%;
	vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
	display: table-cell;
}
.input-group-addon,
.input-group-btn {
	width: 1%;
	white-space: nowrap;
	vertical-align: middle;
}
.input-group-btn {
	position: relative;
	font-size: 0;
}
/* Buttons carry a default bottom margin site-wide; inside the input-group that
   margin fills the table cell top-aligned and pushes the button ~6px above the
   field. Zero it so vertical-align:middle centers it level with the field. */
.input-group-btn > .btn {
	position: relative;
	margin: 0;
	vertical-align: middle;
}
/* Join the button to the field: square off the sides that meet. */
.input-group .form-control:first-child,
.input-group > .select2-container:first-child .select2-choices,
.input-group-btn:first-child > .btn {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.input-group .form-control:last-child,
.input-group-btn:last-child > .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* ---- Navbar toggle (v3 .navbar-toggle -> v5 .navbar-toggler) ---- */
.navbar-toggle {
	display: block;
	padding: 9px 10px;
	background-color: transparent;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
}

/*
 * v5 makes .navbar > .container a flexbox, so .navbar-header shrinks to its
 * content width and a float:right toggle (the mobile "Menu" button) lands
 * mid-row instead of at the right edge. On mobile widths (where the toggle is
 * shown) lay the header out as its own flex row: full width, brand pinned left
 * and the "Menu" toggle pinned right, both vertically centered so the logo and
 * menu line up like production.
 */
@media (max-width: 767px) {
	.navbar-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	/* The toggle button precedes the brand in the markup; force the brand to the
	   left and the "Menu" toggle to the right regardless of source order. */
	.navbar-header .navbar-brand { order: 0; }
	.navbar-header .navbar-toggle { order: 1; }
}

/*
 * v3 navbar layout the legacy markup expects. v5 defaults .navbar-nav to a flex
 * column and hides any .collapse element that lacks .show, which would stack the
 * menu and hide it on desktop. Restore the v3 behavior for these pages only.
 */
.navbar-nav {
	display: block;
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.navbar-nav > li {
	position: relative;
	display: list-item;
}
.navbar-nav > li > a {
	position: relative;
	display: block;
	padding: 10px 15px;
	line-height: 20px;
}

@media (min-width: 768px) {
	.navbar-toggle { display: none; }
	/*
	 * v3 floated the brand block left so the collapsed menu could sit beside it
	 * on one row; v5 dropped .navbar-header entirely, leaving it an in-flow block
	 * that pushes .navbar-collapse onto a second row. Float it (and the brand)
	 * left to rejoin the row.
	 */
	.navbar-header { float: left; }
	.navbar-brand { float: left; }
	.navbar-nav { float: left; }
	.navbar-nav > li { float: left; }
	/* v3 .navbar-right pulled the menu to the far right; v5 removed the class. */
	.navbar-right { float: right !important; }
	/*
	 * v5 makes .navbar a flex container and gives .navbar-collapse
	 * `flex-basis: 100%`, which wraps the whole menu onto a second row beneath
	 * the brand. Restore the expanded (side-by-side) sizing v3 relied on.
	 */
	.navbar-collapse {
		width: auto;
		flex-basis: auto;
		flex-grow: 1;
		align-items: center;
	}
	.navbar-collapse.collapse {
		display: block !important;
		height: auto !important;
		padding-bottom: 0;
		overflow: visible !important;
	}
	/*
	 * This v5 build doesn't set a base `position: absolute` on .dropdown-menu, and
	 * the legacy navbar dropdowns are opened by the compat shim (not Popper), so
	 * the menu stays in-flow and pushes page content down when opened. Restore the
	 * v3 absolute overlay. Popper-managed menus set inline position/inset styles
	 * that still win, so they're unaffected.
	 */
	.navbar-nav .dropdown-menu {
		position: absolute;
		top: 100%;
	}
	.navbar-right .dropdown-menu {
		right: 0;
		left: auto;
	}
}

@media (max-width: 767px) {
	.navbar-collapse.collapse:not(.show) { display: none !important; }
	.navbar-nav > li { float: none; }
}

/*
 * v5's grid adds `.row > * { width: 100% }` to every direct child of a .row.
 * The header utility links (.navbar-login) are an absolutely-positioned,
 * non-column child of the .row wrapper, so v5 stretches them across the whole
 * row and they end up left-aligned over the logo. v3's .row set no child width,
 * so restore shrink-to-fit width and let the site's `right` offset align them.
 */
.main-navigation-wrapper .navbar-login { width: auto; }

/* ---- Panels (v3) -> approximate v5 cards ---- */
.panel {
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body { padding: 15px; }
.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; }
.panel-footer {
	padding: 10px 15px;
	background-color: #f5f5f5;
	border-top: 1px solid #ddd;
}
.panel-default { border-color: #ddd; }
.panel-default > .panel-heading {
	color: #333;
	background-color: #f5f5f5;
	border-color: #ddd;
}

/* ---- Misc removed helpers ---- */
.well {
	min-height: 20px;
	padding: 19px;
	margin-bottom: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
}
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th {
	padding: 5px;
}