/* 3/2/25 - MR catalog api pull courses top spacing */
.courseblock {
  margin-top: 2rem;
	padding-top:.5rem;
	border-top:1px solid #cdcdcd;
}

/* 12/15/25 - MR break the following tag after the img snippet */
.snippet--img-caption-left + p + h2, .snippet--img-caption-right + p + h2 {
	clear: both;
}

/* 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 {
	font-size:3px;
	vertical-align: baseline;
	position: relative;
	top: 0.2em;
}
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%;
}


/* for icon containter and top container COMPONENTS */


.icon-container {
	--icon-size: 5rem; /* exact forced size for all icons */
	--text-size: 1.125rem;
	--gap-size: .25rem;
	--card-padding: .5rem;
	--header-size: 1.75rem; /* size for h2 */
	/* Single variable for icon container color */
	--icon-container-color: rgba(0, 61, 165, 0.1); /* default SLU Blue 10% */
}
/* If .icon-container is immediately preceded by an h2 */
h1 + div > .icon-container {
	margin: 0 0 1rem;
}



/* If .icon-container is NOT immediately preceded by an h2 */
.icon-container:not(:first-child):not(h1 + div > .icon-container) {
	margin: 3rem 0 3rem;
}

/* Icon container base */
.icon-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-size);
	justify-content: space-between;
	border: 3px solid var(--icon-color); /* fully opaque border */
	border-top: 25px solid var(--icon-color); /* fully opaque top border */
	padding: 0 1.5rem 1.5rem;
	background-color: rgba(var(--icon-color-rgb), 0.1); /* 10% background */
	border-radius: 0 0 1rem 1rem;
	/*box-shadow: 0.25rem 0.5rem 1.5rem rgba(var(--icon-color-rgb), 0.3);*/
}

/* Primary Colors */
.color-slu-blue-shield {
	--icon-color: #003DA5;
	--icon-color-rgb: 0, 61, 165;
}

.color-slu-blue {
	--icon-color: #003DA5;
	--icon-color-rgb: 0, 61, 165;
}

.color-college-church-gray {
	--icon-color: #C8C9C7;
	--icon-color-rgb: 200, 201, 199;
}

.color-iris-white {
	--icon-color: #FFFFFF;
	--icon-color-rgb: 255, 255, 255;
}

/* Secondary Colors */
.color-fountain-blue {
	--icon-color: #53C3EE;
	--icon-color-rgb: 83, 195, 238;
}

.color-grand-blue {
	--icon-color: #00244D;
	--icon-color-rgb: 0, 36, 77;
}

.color-billiken-bronze {
	--icon-color: #795D3E;
	--icon-color-rgb: 121, 93, 62;
}

.color-west-pine-beige {
	--icon-color: #E3DECB;
	--icon-color-rgb: 227, 222, 203;
}

.color-gateway-gold {
	--icon-color: #FFC72C;
	--icon-color-rgb: 255, 199, 44;
}

.color-rooftop-teal {
	--icon-color: #8FD6BD;
	--icon-color-rgb: 143, 214, 189;
}

.color-oriflamme-orange {
	--icon-color: #ED8B00;
	--icon-color-rgb: 237, 139, 0;
}

.color-valle-verde {
	--icon-color: #8EE764;
	--icon-color-rgb: 142, 231, 100;
}

.icon-header {
	width: 100%;
	text-align: center;

	margin:1rem 0 1rem;
	padding-bottom:.5rem;
	font-weight: 700;
	border-bottom:5px dotted var(--icon-color)
}

.icon-card {
	flex: 1 1 calc(25% - var(--gap-size));
	max-width: calc(25% - var(--gap-size));
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--card-padding);
	opacity: 0;
	transform: translateX(-30px); /* start slightly left */
	transition: transform 0.4s ease, opacity 0.4s ease;
	animation: slide-in 0.5s forwards;
}



.icon-card:nth-child(1) { animation-delay: 0s; }
.icon-card:nth-child(2) { animation-delay: 0.1s; }
.icon-card:nth-child(3) { animation-delay: 0.2s; }
.icon-card:nth-child(4) { animation-delay: 0.3s; }
.icon-card:nth-child(5) { animation-delay: 0.4s; }
/* add more nth-child rules if you have more cards */

@keyframes slide-in {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.icon-wrapper {
	width: var(--icon-size);
	height: var(--icon-size);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* ensures images larger than container are clipped */
}

.icon-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* preserves aspect ratio, fits within forced size */
	display: block;
}

.icon-text {
	margin-top: 0.75rem;
	font-size: var(--text-size);
	font-weight: 700;
	line-height: 1.5;
	color:#222;

	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Default: main content, 4 across */
.icon-card {
	flex: 1 1 calc(25% - var(--gap-size));
	max-width: calc(25% - var(--gap-size));
}

/* Sidebar: 2x2 layout */
.sidebar .icon-card {
	flex: 1 1 calc(50% - var(--gap-size));
	max-width: calc(50% - var(--gap-size));
}

/* Mobile: 2x2 layout for all containers */
@media (max-width: 48rem) {
	.icon-card {
		flex: 1 1 calc(50% - var(--gap-size));
		max-width: calc(50% - var(--gap-size));
	}
}

.top-container {
	display: flex;
	gap: 1rem;
	padding: 1.25rem 1.5rem; /* top smaller, bottom full */
	border: 3px solid var(--icon-color);
	border-radius: 1rem 1rem 0 0;
	align-items: center; /* vertically center both cells */
	box-sizing: border-box;

	/* Tight, bright radial burst anchored to bottom behind left cell */
	background-image: radial-gradient(
		circle at 20% 90%, /* left cell horizontally, bottom edge vertically */
		#ffffff 0%, /* bright center */
		#f1f1f1 18%, /* tight white core */
		#ffffff 35% /* quick fade to container gray */
	);
	background-repeat: no-repeat;
}

.top-side {
	flex: 0 0 40%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 2rem 1.5rem 1rem;
	box-sizing: border-box;
	border-right:5px dotted var(--icon-color)
}

.top-side svg {
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: auto; /* pushes SVG to bottom of the side cell */
}

.top-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1rem 1.5rem 1.5rem 1rem;
	box-sizing: border-box;
}

.top-content h2 {
	margin: 0 0 0.5rem 0;
	line-height:1.2
}

.top-content h2 span {
	font-style: italic;
	font-weight: bold;
}

.top-content p {
	margin: 0;
	font-size: inherit;
	font-weight: bold;
}

@media (max-width: 768px) {
	.top-container {
		flex-direction: column;
		align-items: stretch;
	}

	.top-side,
	.top-content {
		flex: 1 1 100%;
		padding: 1rem;
	}

	.top-side {
		border-right:5px dotted #fff;
		border-bottom:5px dotted var(--icon-color)
	}
}
.top-container:has(~ .icon-container) {
	margin-bottom: -3rem;
}
}

ul {
	list-style-type: disc !important;
}

/* ---------------- Component: Squares, Side by Side --------------------------------------------------------------------- */
.component-side-by-side-section {
	width: 100%;
	margin: 3rem auto;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr; /* two columns on desktop */
	grid-template-rows: 1fr;        /* equal height rows */
	grid-gap: 0;
	justify-items: stretch;
	align-items: stretch;

	border-top: 10px solid var(--icon-color);
	border-top: 10px double rgba(var(--icon-color-rgb), 1);
	border-bottom: 10px solid var(--icon-color);
	border-bottom: 10px double rgba(var(--icon-color-rgb), 1);


	/* 	max-height:35rem
	*/
}

#content > .component-side-by-side-section:first-of-type {
	margin-top: 0;
	margin-bottom:1rem;
}
/*#content > .component-side-by-side-section:first-of-type .box img.img-square {border:10px inset rgba(var(--icon-color-rgb), .5)}
#content > .component-side-by-side-section:first-of-type .box img.img-square {border-right:10px double var(--icon-color)}
*/
.component-side-by-side-section + .component-side-by-side-section {
	margin-top: calc(-3rem + -10px);
}

.component-side-by-side-section .box {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column; /* allows content stretching inside */
}

/* Box A and B desktop placement */
.component-side-by-side-section .box.a {
	grid-column: 1;
	grid-row: 1;
	justify-self: end;
	transition: ease all .3s;
	background: radial-gradient(
		circle at center top,
		rgba(var(--icon-color-rgb), 0.1) 0%,
		rgba(var(--icon-color-rgb), 0.025) 70%,
		rgba(var(--icon-color-rgb), 0.8) 100%
	);
}

.component-side-by-side-section .box.b {
	grid-column: 2;
	grid-row: 1;
	justify-self: start;
	transition: ease all .3s;
	background: radial-gradient(
		circle at center top,
		rgba(var(--icon-color-rgb), 0.1) 0%,
		rgba(var(--icon-color-rgb), 0.025) 70%,
		rgba(var(--icon-color-rgb), 0.8) 100%
	);
}

/* Content inside boxes */
.component-side-by-side-section .box .content-wrap {
	margin: 1rem;
	padding: 1rem;
	flex-grow: 1; /* fills remaining box height */
}

/* Images inside boxes */
.component-side-by-side-section .box img.img-square {
	width: 100%;
	height: auto;
	display: block;
	margin:0;

	flex-shrink: 0; /* prevent squishing */
}

.box.a img {
	border-top-right-radius:10rem;
} 
.box.b img {
	border-top-left-radius:10rem;
}

/* Desktop-specific margins */
.component-side-by-side-section .box.a .content-wrap {
	margin: 2rem 5rem 2rem 8rem;
}

.component-side-by-side-section .box.b .content-wrap {
	margin: 2rem 8rem 2rem 5rem;
}

/* Paragraph spacing */
.component-side-by-side-section .box .content-wrap h2 {

	padding:0 .5rem .5rem;
	border-bottom: 5px dashed rgba(var(--icon-color-rgb), 0.7);
}

/* Paragraph spacing */
.component-side-by-side-section .box .content-wrap p, .component-side-by-side-section .box .content-wrap .buttons {
	padding:0 .5rem .5rem;
}
.component-side-by-side-section .box .content-wrap .buttons {

	margin-top:1.5rem;
}

a.glow-on-hover {
	/*     width: 220px; */
	min-height: 50px;
	border: 3px solid var(--icon-color);
	outline: none;
	color: #003da5;
	/*     background: none; */
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: .25rem;
	margin: .25rem .25rem .5rem 0;
	padding:1rem 2rem;
	font-weight:700;
	display:block;
}

.glow-on-hover:before {
	content: '';
	/*     background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); */
	background: linear-gradient(45deg, #003DA5, #C8C9C7, #53C3EE, #795D3E, #E3DECB, #FFC72C, #8FD6BD, #ED8B00, #8EE764);
	/* 	background: linear-gradient(45deg, var(--icon-color));
	*/
	position: absolute;
	top: -2px;
	left:-2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(10px);
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	animation: glowing 20s linear infinite;
	opacity: 0;
	transition: opacity .3s ease-in-out;
	border-radius: .25rem;
}

.glow-on-hover:active {
	color: #fff
}

.glow-on-hover:active:after {
	background: transparent;
}

.glow-on-hover:hover:before {
	opacity: 1;
}

.glow-on-hover:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	left: 0;
	top: 0;
	border-radius: 10px;
}

@keyframes glowing {
	0% { background-position: 0 0; }
	50% { background-position: 400% 0; }
	100% { background-position: 0 0; }
}


/* ---------------- Mobile ---------------- */
@media screen and (max-width: 1024px) {

	.component-side-by-side-section {
		display: grid !important;
		grid-template-columns: 1fr !important; /* single column */
		grid-auto-rows: auto; /* rows size naturally */
		grid-gap: 0;
		align-items: stretch;
		justify-items: stretch;
		margin: 1rem auto;

	}
	.component-side-by-side-section .box {
		flex: 0 0 auto; /* prevent stretching beyond content */
		grid-column: 1 !important;
		grid-row: auto !important; /* each box gets its own row */
		width: 100%;
		min-height: auto;
	}
	/* Optional: smaller margin on mobile */
	.component-side-by-side-section .box.a, .component-side-by-side-section .box.b {
		margin:0 0 0 0;
	}
	.component-side-by-side-section .box h2 {
		margin:0 0;
		padding:0;
	}
	/* Optional: smaller margin on mobile */
	.component-side-by-side-section .box.a .content-wrap, .component-side-by-side-section .box.b .content-wrap {
		margin:0 1rem 1.5rem 1rem;
	}
}


/* ---------------- Component: New Second version of  Section Swappable --------------------------------------------------------------------- */
/* ---------------- Component: New Second version of  Section Swappable --------------------------------------------------------------------- */
/* ---------------- Component: New Second version of  Section Swappable --------------------------------------------------------------------- */
/* ---------------- Component: New Second version of  Section Swappable --------------------------------------------------------------------- */


:root {
	--radius: 10rem;
	--padding-inner: 5rem; /* toward image */
	--padding-outer: 10rem; /* toward outer edge */
}

/* Full-bleed section */
.swap-section {
	width: 100%;
	margin: calc(-1rem) 0 2rem;
	padding: 0;
	box-sizing: border-box;

	border-top: 10px solid var(--icon-color);
	border-top: 5px double rgba(var(--icon-color-rgb), 1);
	border-bottom: 10px solid var(--icon-color);
	border-bottom: 5px double rgba(var(--icon-color-rgb), 1);	
}

.swap-section .bottom-decor {
	position: relative; /* ensure ::after is positioned relative to this container */
}

.swap-section .bottom-decor {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom:-5rem;                  /* stick to bottom of container */
	height: 4rem;               /* max height */

	background-repeat: repeat-y;
	background-size: auto 100%; /* scale to container height */
	background-position: bottom center;
	pointer-events: none; /* clicks go through */
	z-index:10; /* above background, below main content */

}


/* Flex container */
.swap-section .container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 0;
	flex-direction: row; /* default image left */
	box-sizing: border-box;
	max-width: 100%;

	background: radial-gradient(
		circle at 31% 0%,             /* center ~35% from left edge */
		rgba(var(--icon-color-rgb), 0.0) 0%,    /* lightest at center */
		rgba(var(--icon-color-rgb), 0.025) 33%, /* slightly darker moving out */
		rgba(var(--icon-color-rgb), 0.9) 56%, /* slightly darker moving out */
		rgba(var(--icon-color-rgb), 1.0) 100%   /* darkest at edges */
	);
}

/* Responsive clamp for smaller screens */
@media (max-width: 48rem) {
	.swap-section .container {
		background: radial-gradient(
			circle at 50% 75%,             /* center ~35% from left edge */
			rgba(var(--icon-color-rgb), 0.1) 0%,    /* lightest at center */
			rgba(var(--icon-color-rgb), 0.025) 28%, /* slightly darker moving out */
			rgba(var(--icon-color-rgb), 0.9) 90%, /* slightly darker moving out */
			rgba(var(--icon-color-rgb), 1.0) 100%   /* darkest at edges */
		);
	}
}

/* Swap sides */
.swap-section.image-right .container {
	flex-direction: row-reverse;
}

/* Columns */
.image-column,
.content-block {
	flex: 1 1 0;
	box-sizing: border-box;
}

/* Image flush in its column */
.image-column {
	margin: 0;
	padding: 0;
}

.image-block {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 24rem;
	object-fit: cover;
	margin: 0;
	padding: 0;
	border-radius: 0;
	transition: border-radius 0.3s;
}

/* Image top corner radius */
.swap-section.image-left .image-block {
	border-top-left-radius: 0;
	border-top-right-radius: var(--radius);
}

.swap-section.image-right .image-block {
	border-top-left-radius: var(--radius);
	border-top-right-radius: 0;
}

/* Content block */
.swap-section .content-block {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	padding-left: clamp(2rem, 10vw, var(--padding-inner));
	padding-right: clamp(2rem, 15vw, var(--padding-outer));
}

.content-block {
	display: flex;
	flex-direction: column;
	justify-content: center;    /* center everything vertically */
	padding-top: 1rem;          /* minimum top padding */
	padding-bottom: 1rem;       /* minimum bottom padding */
	box-sizing: border-box;

	/* keep your horizontal padding/clamp logic */
	padding-left: clamp(2rem, 10vw, var(--padding-inner));
	padding-right: clamp(2rem, 15vw, var(--padding-outer));
	min-height: 24rem;          /* match image max-height for consistent layout */	
}


.swap-section {
/* 	position: relative; */
}

.swap-section::after {
	/*content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 10px; 
	bottom: 4px;
	pointer-events: none;
	opacity: 0.5;

	 background-image: 
		url('/-icons/line-fleur-de-lis.svg');
		url('/-icons/line-fleur-de-lis.svg'); 
	background-repeat: repeat-x, repeat-x;
	background-repeat: repeat-x;	
	background-position: top left, bottom left;
	background-size: auto 2rem, auto 2rem;*/
}


/* Swap-side padding for desktop */
.swap-section.image-left .content-block {
	padding-left: var(--padding-inner);
	padding-right: var(--padding-outer);
}

.swap-section.image-right .content-block {
	padding-left: var(--padding-outer);
	padding-right: var(--padding-inner);
}

.swap-section p.dept-name {
	text-transform:uppercase;
	font-weight:bold;color:#003da5;
	margin-bottom:.5rem;
	line-height:1.5;
	padding:.25rem .75rem .375rem;
	font-size:1rem;letter-spacing:2px;
	border-bottom:2px dotted var(--icon-color)}

/* Headings */
.swap-section h1 {
	padding-left: .5rem;
	margin-bottom:0;
	padding-bottom:0;
	/*   border-top: 5px double rgba(var(--icon-color-rgb), .9);
	border-left: 5px double rgba(var(--icon-color-rgb), .9); */
}

.swap-section p {
	margin:0 0 1rem;
	padding:0 .5rem;
/* 	margin-bottom:1rem; */
}

/* Text wrapper: vertical center with minimum top/bottom padding */
.text-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;      /* vertical centering */
	flex: 1 1 auto;               /* allow wrapper to fill content-block */
	padding-top: 0rem;            /* minimum top padding */
	padding-bottom: 1rem;         /* minimum bottom padding */
	box-sizing: border-box;
}

/* Text content */
.text-content {
	max-height: 15rem;
	overflow: hidden;
	position: relative;
	transition: max-height 1.8s ease-in-out;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Fade-in for image-block on load (pure CSS) */
.image-block {
	opacity: 0;
	transform: scale(1.02);
	animation: fadeInBg 1.5s ease-in-out forwards;
}

@keyframes fadeInBg {
	0% {
		opacity: 0;
		transform: scale(1.02);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Responsive: stack vertically on small screens */
@media (max-width: 48rem) {
	.swap-section .container {
		flex-direction: column;
	}

	.image-column,
	.content-block {
		flex: none;
		width: 100%;
	}

	.image-block {
		border-radius: var(--radius) var(--radius) 0 0;
		max-height: 20rem;
	}
}

/* Responsive clamp for smaller screens */
@media (max-width: 64rem) {
	.swap-section.image-left .content-block {
		padding-left: clamp(2rem, 6vw, var(--padding-inner));
		padding-right: clamp(2rem, 6vw, var(--padding-outer));
	}

	.swap-section.image-right .content-block {
		padding-left: clamp(2rem, 6vw, var(--padding-outer));
		padding-right: clamp(2rem, 6vw, var(--padding-inner));
	}
}

@media (max-width: 48rem) {
	.swap-section .content-block {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}