/* 10/22/25 - MR super tigheten up space*/
.Hero__cta {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* 10/1/25 - MR super and sub fix being tested*/
sup, sub {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}
sub { 
	top: 0.4em; 
}
/* 9/18/25 - MR sidebar empty ul fix*/
ul:not(:has(li)) {
	display: none;
}

/* 9/15/25 - MR quote feature template date change*/
.accordion.media-acc {padding:0;margin:0;margin-bottom:.25rem;margin-left:.125rem}

/* 6/13/25 - MR quote smaller in sidebav and emdash to cite */
.sidebar blockquote p, blockquote {font-size: 70%;}	
blockquote cite::before {
	content: "\2014";
}

blockquote:not([class]) {
	position: relative;
	padding-left: 3.5rem;
	margin: 2rem 0;
	font-size: 1.75rem;
	font-family: var(--serif);
	font-weight: 400;
}

/* 1/24/25 - MR ADA compliance fixes */
#skip a {
	display: block;
	position: absolute;
	left: -999px;
	top: -999px;
}

#skip a:focus {
	left: 0;
	top: 0;
	padding: 3px;
	background: #ffc;
	border:1px solid #990000;
}

.flickity-prev-next-button:disabled { display: none; }	

/* 12/18/24 - MR content area component restyle fron refresh */

.comp-wrap {display:flex;flex-direction:row;}

.comp-wrap .comp-content-area {width: calc(100%/3);}

@media (max-width: 70em) {
	.comp-wrap{display:flex;flex-direction:column;}
	.comp-wrap .comp-content-area {width: calc(100%/1);}
}

.bg-blue,.bg-gray,.bg-white{padding:2rem;border:1px solid #cdcdcd}
.bg-blue {background-color:#003da5} 
.bg-gray {background-color:#C8C9C7} 
.bg-white {background-color:#ffffff}

h2.black,h3.black,.p--alt.black {color:#000000 !important;margin:0 !important;padding:0 0 .5rem;}
h2.blue,h3.blue,.p--alt.blue {color:#003da5 !important;margin:0 !important;padding:0 0 .5rem;}
h2.gray,h3.gray,.p--alt.gray {color:#C8C9C7 !important;margin:0 !important;padding:0 0 .5rem;}
h2.white,h3.white,.p--alt.white {color:#ffffff !important;margin:0 !important;padding:0 0 .5rem;}
.p--alt.black,.p--alt.blue,.p--alt.gray,.p--alt.white{font-weight:500;margin:0;padding: 0 !important;}
.p--alt.black ul,.p--alt.blue ul,.p--alt.gray ul,.p--alt.white ul{margin:0;padding:.5rem 2rem 0 !important;}

.comp-content-area h2 {line-height:1;border-bottom:2px solid #ffffff;margin-bottom:.5rem}


.sidebar img.headshot-left,.sidebar img.headshot-right {width:120px;height:auto}
.sidebar h2 {font-size:1.75rem;}
.sidebar h3 {font-size:1.5rem;}

/* 12/14/24 - MR image snippet img/h2 control on mobile*/	
.image-snippet h2 {font-size:x-large}
.image-snippet .subhead {font-size:1.125rem}
.headshot-left,.headshot-right{
	width:130px;
	height:auto;
	margin:0 1rem 1rem;
	float: left; 
	border-radius:5px
}
@media (min-width: 70em) {
	.image-snippet h2 {font-size:2rem}
	.image-snippet .subhead {font-size:1.375rem}
	.headshot-left,.headshot-right{width:200px;height:auto}
}

/* 12/12/24 - SF added to feature byline-widget-all to correct .contact usage in the next-steps portion of the refresh. */
.byline{
	margin:0 !important;
}

/* 12/04/24 - SF temporary solution for anchors in courseleaf accordions */
#requirementstextcontainer .toggle-group a[id]{
	margin-top:0 !important;
}

/* 12/03/24 - SF added to remove blue border box from MOCRA pagination */
#artTable_wrapper .active{
	border:0;
}

/* 11/26/24 - MR new gallery css to replace old gallery */	

/* Position the image container (needed to position the left and right arrows) */
.container-slideshow {
	position: relative;
	margin:2rem 0;
}

/* Hide the images by default */
.mySlides {
	display: none;
}

.mySlides:first-child {
	display: block;
}	

.mySlides img {
	position: relative;
	border:1px solid #000;
	border-radius: 50px 0 0;
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1.5s;

	/*added-fix for multiples and other sizing 8/12/25 MR*/
	height: auto;
	max-height:42rem;
	width: 100%;
	object-fit: contain; /* Keeps image contained within box */
	background:#003da5;
	background: #090979;
	background: radial-gradient(circle, rgba(9, 9, 121, 1) 47%, rgba(0, 36, 77, 1) 100%);
}

@keyframes fadeInOpacity {
	0% {
		opacity: .3;
		mix-blend-mode: darken;
		background-color:#003da5;
		filter: grayscale(1000%);
	}
	100% {
		opacity: 1;
	}
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
	cursor: pointer;
}

.slideshow-nav {
	display:flex;
	flex-direction:row;
	align-items: center;
	justify-content: center;
	gap:5px;
	min-width:20%;
	background-color:rgba(255, 255, 255, 0.7);
	float:right;
	margin-left:1rem;
	border:1px solid #cdcdcd;
	background-color:#003da5;

}

/* Next and previous buttons */
.slideshow-nav .prev,
.slideshow-nav .next {
	cursor: pointer;
	width: auto;
	padding: 1rem;
	margin-top: 0px;
	color: white;
	font-weight: 700;
	font-size: 1.25rem; 
	<!--border-radius:50% 0 0 50%; --> 
	user-select: none;
	-webkit-user-select: none;
	background-color: #003da5;
}

/* Position the "next button" to the right */
.slideshow-nav .next { 
	<!--border-radius:0 50% 50% 0; --> 
}

/* On hover, add a black background color with a little bit see-through */
.slideshow-nav .prev:hover,
.slideshow-nav .next:hover {
	background-color: rgba(83, 195, 238, 1);
	color: #003da5;
}

.slide-count {
	font-size: 1rem;
	font-weight:bolder;
	align-items: center;
	justify-content: center;
	text-align:center;
	text-transform:uppercase;
	width:6rem;
	color:#fff

}

/* Container for image text */
.caption-container {
	/* 	display:flex;
	flex-direction:row;
	justify-content: center; */
	min-height:6rem;
	/* 	align-items: center; */
	text-align: left;
	line-height:110%;
	background-color: #f9f9f9;
	color: #2b2b2b;
	font-size:110%;
	border:1px solid #cdcdcd;
	border-bottom:3px solid #cdcdcd;
	padding:1rem !important;
}

/*  div#caption {
min-width:73% 
max-width:73%
margin: 1rem;
} */

/* @media (min-width: 70em) { 
.caption-container {
padding: .25rem .5rem;
}
} */

@media (max-width: 60em) { 
	.row:after {
		display: none;
	}

	/* Mark commented out on 1/31/25 - this is hiding tables on mobile for museums, etc. */
	/* 	.row, .column, .demo {
	display: none;
} 
	*/
	/* 	.caption-container {
	flex-direction:column;
	align-items: center;
	justify-content: center;
	gap:10px;

} */

	/* 	div#caption {
	min-width:100%;
	padding:1rem;
	min-height:4rem;
} */
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Six columns side by side */
.column {
	float: left;
	width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
	opacity: 0.6;
	border:1px solid black;
	width:100px;
	height:100px;
}

.active,
.demo:hover {
	opacity: 1;
	border:2px solid #53C3EE;
	box-shadow: rgb(83, 195, 238) 0px 0px 20px 20px inset;
}	

/* 11/26/24 - MR to fix courseleaf right size col width fixed*/	
.flush {width:100%}

/* 11/25/24 - MR mobile version logo spacing below fixed*/	
.header__logo.school {
	min-width:240px
}
/* .header__main {padding:0 10px}
*/
@media (min-width: 48em) {
	.header__logo.school {
		min-width:300px
	}
}

@media (min-width: 70em) {
	.header__logo.school {
		min-width:350px
	}

}
/* 11/25/24 - MR hero text width control for better line break of first line*/	
@media (min-width: 70em) {
	.hundred{width:100%;}
	.ninety{width:90%;margin:0 auto}
	.eighty{width:80%;margin:0 auto}
	.seventy{width:70%;margin:0 auto}
}

/* 11/21/24 - MR podcast component up spacing below fixed*/		
.component-podcast-buzzsprout-episode {
	padding:0 0 .75rem;
	margin-bottom:1rem;
	border-bottom:1px solid #999;
}
.component-podcast-buzzsprout-episode .bodcopy {
	padding:0 1rem
}
.component-podcast-buzzsprout-episode iframe {
	aspect-ratio: unset;
	min-height:200px;
}	
/* 11/21/24 - MR c/s header main nav Tightened up spacing between  */
@media (min-width: 70em) {
	.header.header__colleges .header__nav a {padding:.5rem .25rem}
}
/* 11/21/24 - MR header logo name controls for left logo - check for existing styles when committing to main css*/
.logo-wrap {
	width: 100%;
	border:1px solid #cdcdcd;
	transition: 0.4s;
	padding:10px;padding:0;
}
.logo {
	height: 0;
	position: relative;
	padding-top: 81.75%;
	padding-top: 25%;
	> svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
.on {
	font-family:brandon-grotesque,sans-serif;
	text-transform:uppercase;			
	font-weight:700;
}				
.slu.on {
	font-size:1.25rem;
	letter-spacing: 3px;
}
.dash.on {
	font-weight:normal;
	font-size:3rem;
}				
.school.on {
	font-weight:700;
	font-size:.75rem;
	letter-spacing: 2px;
}
text {border:1px solid red;}

.sl.on {
	font-size:1.3rem;
	letter-spacing: 3.5px;
	font-weight:600;				
}
.univ.on {
	font-size:1.1rem;
	letter-spacing: 3px;
	font-weight:500;
}				
.tm.on {
	font-weight:500;
	font-size:.3rem;
}	

/* 11/21/24 - MR button spacing for groups of buttons*/
.button {margin:.25rem;}
h2#hero1 {color:#91ECFF;
	text-shadow: 0px 2px 0px rgba(0,0,0,0.9);
	background-color: rgba(0, 0, 0, 0.3);

}

/* 11/20/24 - adjusts old stat numbers size to allow 6 digit numbers - padding was not enough SF*/
/* Should not modify new */
.stat:not(.green):not(.light-blue):not(.orange) .stat__number {
	font-size: 3rem;
}

/* 11/19/24 - removes spacing after c/s landing hero - stupid Omni CMS p tag MR */
.Swoop + p {margin:0;}
/* 11/21/24 - removes spacing after SLU.edu homw hero - stupid Omni CMS p tag MR */
.Splash__content + p {margin:0;}

/* 11/18/24 - intended to correct newsfeed size of img, but keep proper card size for img MR */
ul.feed img
{
	width: 30%;
	height: auto;
}

/* 11/14/24 - sidebar class added for universal left sidebar MR/SF */
/* doesn't affect right sidebar on school landing page */

#filters .sidebar{
	padding:2rem;
	width:100%;
}

@media (min-width: 64em) {
	#filters .sidebar {
		width:calc(33.333% - 2rem);
		width:100%;
		float:left;
		clear:left;
		padding:0

	}
}
@media (min-width: 72em) {
	#filters .sidebar {
		width:calc(33.333% - 3rem);
		width:100%;
		padding:0
	}
}
@media (min-width: 80em) {
	#filters .sidebar {
		width:calc(33.333% - 4rem);
		width:100%;
		padding:0

	}
}
/* 2/7/25 MR added for slate double arrow on dropdown*/
#form_d03de797-0472-42bb-8086-12310d8efa1f select{appearance: none;}
div.form_responses select{appearance: none;}
/* 2/7/25 MR added for slate dob selects to go side by side*/
div.form_responses {
	display: flex;
}
/* 04/22/25 SF added to correct table snippet inside accordion snippet */
.accordion__item:not(.accordion__item--active) .table {
	display: none;
}

/* 10/9/25 MR — BE A BILLIKEN/YOU AT SLU VIEWBOOK */




/* ---------- BASE LIST STYLES ---------- */
.app .bab {
	list-style: none;
	padding-left: 0;
	margin: 2rem auto;
	width: 90%;
}

/* Optional reversed layout for ol */
ol.bab.reversed {
	display: flex;
	flex-direction: column-reverse;
}

/* ---------- SHARED
<li> STYLES ---------- */
.bab li {
	position: relative; /* needed for absolute ::before */
	border-top: 3px dotted #cdcdcd;
	transition: transform 0.5s ease-in-out, border 0.5s ease-in-out, /*box-shadow 0.5s ease-in-out; */
		box-sizing: border-box;
	counter-increment: custom-counter;
	z-index: 0;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.5s ease forwards;
	animation-delay: calc(var(--i) * 0.3s);
	animation-fill-mode: both;
}

ul.bab li {
	padding: 1rem 1rem 1rem 2.5rem;
} /* space for marker */
ol.bab li {
	padding: 1rem 1rem 1rem 5rem;
} /* space for marker */


/* Headings inside
<li> */
.bab li h2 {
	margin: 0;
	padding: 0;
}

.bab li p {
	margin: 0;
	padding:.5rem 0;
}

/* Hover Effects */
/* .bab li:hover {
box-shadow: 0px 0px 1rem 0.5rem rgba(100, 100, 100, 0.2);
z-index: 10;
} */

.bab li:nth-child(3n+1):hover {
	border-color: #8EE764;
}

.bab li:nth-child(3n+2):hover {
	border-color: #ED8B00;
}

.bab li:nth-child(3n):hover {
	border-color: #53C3EE;
}

.bab li:last-child {
	border-bottom: 3px dotted #cdcdcd;
}

/* reversed OL */
ol.bab.reversed li:last-child {
	border-top: 3px dotted #cdcdcd;
	border-bottom: none;
}
ol.bab.reversed li:first-child {
	border-bottom: 3px dotted #cdcdcd;
}

/* Fade in animation */
@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- CUSTOM MARKERS ---------- */

ol.bab li blockquote
 {
	margin: .25rem 0 .25rem 0;
	padding:1rem 1rem 1rem 3.25rem;
	font-size:120%;
	line-height: 1.2;
/* 	border-top:1px dotted #111;
	border-bottom:1px dotted #111; */
}

/* ol.bab li blockquote cite {
	font-size: 105%;
	line-height:1
} */

cite:not([class]) {
	display: flex;               /* flex container for dash + text */
	justify-content: flex-end;   /* flush right */
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	color: #777777;
	margin-top:1rem;
	margin-right:1rem;
}

cite:not([class])::before {
	content: "—";               /* em dash */
	margin-right: 0.25rem;      /* space between dash and text */
	flex-shrink: 0;             /* dash never shrinks */
}

/* For
<ol>
: use CSS counter */
ol.bab {
	counter-reset: custom-counter;
}

ol.bab li::before {
	content: counter(custom-counter);
	position: absolute;
	left: .5rem;          /* horizontal placement */
	top: 3rem;         /* vertical center */
	transform: translateY(-50%);
	width: 4rem;
	font-size: 6rem;
	font-weight: bolder;
	text-align: center;
}

ol.bab {
	counter-reset: custom-counter;
	list-style: none;
	margin: 0;
	padding: 0;
}

ol.bab li, ul.bab li{
	counter-increment: custom-counter;
	position: relative;
	margin: .25rem 0;
	padding-left: 9rem; /* space for large numbers */
}

ol.bab li::before,  ul.bab li::before{
	content: counter(custom-counter);
	position: absolute;
	/*   top: 2.3rem; */
	left: 0;
	width: 7.5rem;
	display: flex;
	justify-content: flex-end;
	white-space: nowrap;
	font-size: 5rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: #000;
	letter-spacing: -0.1em; /* tighten spacing between digits */
}

/* Shrink proportionally on mobile */
@media (max-width: 768px) {

	.bab h2:not([class]) {
		font-size: 1.5rem;
		line-height:1.2
	}

	ol.bab li, ul.bab li {
		counter-increment: custom-counter;
		position: relative;
		margin: .5rem 0;
		padding-left: 3rem; /* space for large numbers */
	}	

	ol.bab li::before, ul.bab li::before {
		top:2rem;
		left: 0;
		width: 2rem;
		font-size: 3rem;
	}	
}

ol.bab.smaller li::before {
	width: 3rem;
	font-size: 3rem;
	top: 1.5rem;
}

ul.bab, ol.bab {
	list-style: none;
	margin:1rem;
	font-weight:600
}

/* Base bullet style for
<ul>
*/
ul.bab li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 45%;         /* vertical center */
	transform: translateY(-50%);
	font-size: 3rem;
	line-height: 1;
	text-align: center;
}

/* Small variant */
.bab.smaller li p {
	margin: 0;
	padding: 0;
}

.bab.smaller li {
	padding: 1rem 1rem 1rem 4rem;
	font-weight:500;
	font-size:1.125rem;
}

		
		--h1::before {
  content: "BAB Quiz";     /* your span text here */
  position: absolute;
  top: .75rem;                 /* distance above the h1 */
  background: #003da5;          /* grey background */
  color: #fff;                  /* white text */
  padding: 0.4rem 1rem;         /* pill shape */
  border-radius: 9999px;        /* full pill */
  font-size: 0.9rem;
  display: inline-block;
  white-space: nowrap;
}
		--h1 {margin:0}



/* ---------- COLOR VARIATIONS ---------- */
.bab li:nth-child(3n+1)::before { color: #8EE764; }
.bab li:nth-child(3n+2)::before { color: #ED8B00; }
.bab li:nth-child(3n)::before   { color: #53C3EE; }

/* Target the number span inside each accordion item based on its order */
.accordion .accordion__item:nth-of-type(3n+1) .accordion-number {
	color: #8EE764;
}

.accordion .accordion__item:nth-of-type(3n+2) .accordion-number {
	color: #ED8B00;
}

.accordion .accordion__item:nth-of-type(3n) .accordion-number {
	color: #53C3EE;
}

/* Target the number span inside each accordion item based on its order */
.accordion .accordion__item:nth-of-type(3n+1) .subhead {
	border-bottom:10px solid #8EE764;
}

.accordion .accordion__item:nth-of-type(3n+2) .subhead {
	border-bottom:10px solid #ED8B00;
}

.accordion .accordion__item:nth-of-type(3n) .subhead {
	border-bottom:10px solid #53C3EE;
}

/* Ensure the accordion item uses relative positioning */
.accordion .accordion__item {
	position: relative; /* needed for absolute positioning of number */
}

/* Style the number span */
.accordion-number {
	position: absolute;
	left: 0; /* position at the start of the item */
	top:0; /* center vertically */
	/* transform: translateY(-50%); /* exact vertical centering */
	font-size: 3rem; /* relative to container height */
	font-weight: bold;
	line-height: 1; /* prevent extra spacing */
	z-index: 10; /* make sure it’s on top */
	display: inline-block;
	width: auto; /* adjusts to content */
	height: 90%; /* fills ~90% of container height */
	text-align: center;
	/* optional: make it expand beyond padding if needed */
	margin-left: -10px; /* adjust if container has internal padding */
}

/* Style the number */
.accordion-number {
	font-size: 3rem;      /* large number */
	font-weight: 700;
	line-height: 1;
	margin-left: 1rem;  /* spacing on the left */
	margin-right: 1rem;   /* spacing on the right */
	flex-shrink: 0;       /* prevent it from shrinking */
}

.accordion__toggle {
	display: flex;            /* keep number and title inline */
	align-items: center;      /* vertical center */
	align-items: flex-end;
	gap: 0.5rem;              /* optional space between number and title */
	min-height:100%
}
.accordion__toggle__text {
	margin-left:3.5rem;
	font-weight:700;
}

.accordion-digit {
	font-weight:500;
}


/* ---------- SUPPORT FOR H2 OR STRONG ---------- */
ul.bab li:has(> h2)::before,
ul.bab li:has(> strong)::before {
	top: 50%;  /* ensures always vertically centered */
}

/* ---------- IFRAME STYLING ---------- */
iframe.bab {
	height: 800px;
	width: 100%;
}
html {scroll-behavior: smooth;}
legend::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f00c"; /* fa-check */
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Size and spacing */
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.25rem;
	margin: 0.25rem 0.5rem 0 0;
	padding: 0.25rem;

	/* Style */
	color: #cdcdcd;
	border: 5px solid #cdcdcd;
	border-radius: 50%;
	transition: all 0.3s ease;
	max-width: 2.5rem;
	max-height: 2.5rem;
}

/* ✅ Change color when a radio inside the fieldset is selected */
fieldset:has(input[type="radio"]:checked) legend::before {
	color: white;
	background-color: #003da5; /* green */
	border-color: #fff;
	border: 5px solid #8FD6BD;
}

legend {
	font-size:2rem;color:#003da5;font-weight:bold;padding:0 0 0 1rem; margin:2rem 0 .5rem 0;
}

/* default state: all labels normal */
label span, label:hover span {
	color: #000;
	transition: color 0.3s ease, opacity 0.3s ease;
	opacity: 1;
}

/* dim all unselected labels when any radio is checked */
fieldset:has(input[type="radio"]:checked) label:not(:has(input[type="radio"]:checked)) span, fieldset:has(input[type="radio"]:checked) label:not(:has(input[type="radio"]:checked)) {
	opacity: .8; /* dim unselected */
	background-color:#f1f1f1;
	color:#003da5
}

/* Default styles for larger screens */
#bab-iframe {
	width: 100%; /* Example default width */
	height: 600px; /* Example default height */
	border: none;
}

/* Styles for mobile devices */
@media screen and (max-width: 768px) {
	#myIframe {
		width: 100%; /* Example default width */
		height: 600px; /* Adjust this value to your desired mobile height */
	}
}

.PDF_pageOuter {
	padding: 0;
	width: 100%;
}