:root {
	--font-headline: 'Montserrat', sans-serif;
	--font-standard: 'Source Sans Pro', sans-serif;

	--il-orange-rgb: 255, 95, 5;
	
	--UNUSED-il-blue: #13294B;
	--UNUSED-il-orange: #FF5F05;
	--UNUSED-il-altgeld: #C84113;
	--UNUSED-il-gray-1: #F4F4F4;
	--UNUSED-il-gray-2: #707070;
	/* --il-black: #000000; */
	/* --il-cloud-1: #E8E9EB;
	--il-cloud-3: #D2D2D2; */

	--UNUSED-color-dark-primary: var(--il-blue); /* Dark Blue: "Illini Blue" */
	--UNUSED-color-dark-secondary: var(--il-orange); /* Bright Orange: "Illini Orange" */
	--UNUSED-color-dark-tertiary: var(--il-altgeld); /* Dark Orange: "Altgeld Orange" */
	--UNUSED-color-dark-grey: var(--il-gray-2); /* Dark Grey */
	
	--UNUSED-color-light-secondary: var(--il-cloud-1); /* Light color: "Cloud 1" */
	--UNUSED-color-light-tertiary: var(--il-cloud-3); /* Slightly less light color: "Cloud 2" */
	--UNUSED-color-light-grey: var(--il-gray-1); /* Light grey */

	--UNUSED-link-color-default: var(--color-dark-primary);
	--UNUSED-link-color-interaction: var(--color-dark-tertiary);
	--UNUSED-link-color-visited: var(--color-dark-grey);

	--UNUSED-button-color: white;
	--UNUSED-button-bg-color: var(--color-dark-primary);
	--UNUSED-button-border-color: var(--color-dark-primary);

	--UNUSED-button-ghost-color: var(--color-dark-primary);
	--UNUSED-button-ghost-bg-color: transparent;
	--UNUSED-button-ghost-border-color: var(--color-dark-primary);

	/* For 16px base font size, fluid from Minor Third (1.2) @ 400px viewport width to Perfect Fourth (1.333) @ 1200px viewport width */
	--s-5: clamp(0.402rem,0.484rem + -0.328vw,0.238rem);
	--s-4: clamp(0.482rem,0.565rem + -0.33vw,0.317rem);
	--s-3: clamp(0.578rem,0.656rem + -0.312vw,0.422rem);
	--s-2: clamp(0.694rem,0.76rem + -0.262vw,0.563rem);
	--s-1: clamp(0.833rem,0.875rem + -0.166vw,0.75rem);
	--s0: clamp(1rem,1rem + 0vw,1rem);
	--s1: clamp(1.2rem,1.134rem + 0.266vw,1.333rem);
	--s2: clamp(1.44rem,1.272rem + 0.674vw,1.777rem);
	--s3: clamp(1.728rem,1.408rem + 1.282vw,2.369rem);
	--s4: clamp(2.074rem,1.532rem + 2.17vw,3.159rem);
	--s5: clamp(2.489rem,1.628rem + 3.446vw,4.212rem);

	--pad-vert-large: var(--s4); /* Large vertical padding on major page layout elements */
	--pad-horiz-large: var(--s4); /* Large horizontal padding on major page layout elements */
	--pad-vert-standard: var(--s2); /* Standard vertical padding on major page layout elements */
	--pad-horiz-standard: var(--s3); /* Standard horizontal padding on major page layout elements */
	--pad-vert-med: var(--s-1); /* Medium vertical padding on major page layout elements */
	--pad-horiz-med: var(--s0); /* Medium horizontal padding on major page layout elements */
	--pad-vert-narrow: var(--s-3); /* Narrow vertical padding on major page layout elements */
	--pad-horiz-narrow: var(--s-3); /* Narrow horizontal padding on major page layout elements */
	
	--gap-horiz-large: var(--s2); /* Large horizontal spacing between grouped items */
	--gap-vert-large: var(--s2); /* Large vertical spacing between grouped items */
	--gap-horiz-standard: var(--s0); /* Standard horizontal spacing between grouped items */
	--gap-vert-standard: var(--s0); /* Standard vertical spacing between grouped items */
	--gap-horiz-med: var(--s-1); /* Medium horizontal spacing between grouped items */
	--gap-vert-med: var(--s-1); /* Medium vertical spacing between grouped items */
	--gap-horiz-narrow: var(--s-3); /* Narrow horizontal spacing between grouped items */
	--gap-vert-narrow: var(--s-3); /* Narrow vertical spacing between grouped items */

	--radius-small: 7px;
	--radius-standard: 20px;
	--radius-large: 50px;

	font-size: calc(.1vw + 1em);
}

html {
	font-size: 100%;
}

body {
	font-size: 100%;
	font-family: var(--font-standard);
	line-height: 1.7;
	background-color: white;
	padding: 0;
	margin: 0;
}

label {
	font-size: 1.125em;
	font-weight: bold;
}

select {
	color: var(--il-button-foreground-color);
	background-color: var(--il-button-background-color);
	border-radius: 0.25em;
	border: 2px solid var(--il-button-border-color);
	display: inline-block;
	margin: 6px 0;
	padding: 10px 20px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"] {
	width: 100%;
}

textarea {
	width: 100%;
	min-height: 10em;
}

.il-theme-orange-gradient select {
	font: 700 1.1875rem/1.25rem var(--il-font-sans);
}

select.short { max-width: 20ch; }
select.med { max-width: 30ch; }
select.long { max-width: 40ch; }

button.short { padding-block: 0.25em; }
/* button.med { padding-block: 0.25em; }
button.tall { padding-block: 0.25em; } */

svg {
	--svg-color-default: var(--il-blue);
	color: var(--svg-color, var(--svg-color-default));
	fill: currentColor;
	stroke: currentColor;
}

/** GENERAL-USE CLASSES **/

.text-start { text-align: left; }
.text-center { text-align: center; }
.text-end { text-align: right; }


/** Message Center Classes **/

.message {
	margin-block-end: var(--s0);
}

.message > * {
	--message-bg-default: white;

	background-color: var(--message-bg,var(--message-bg-default));
	border-radius: var(--radius-small);
	margin-block-start: var(--s0);
	padding: var(--pad-vert-med) var(--pad-horiz-med);
}

.messageSuccess {
	--message-bg: #ddffdd;
}

/* Not currently available via MessageCenter */
/* .messageInfo {
	--message-bg: #ddffff;
} */

.messageWarning {
	--message-bg: #ffffdd;
}

.messageFailure {
	--message-bg: rgba(var(--il-orange-rgb), 0.3);
}


/** Illinois Theme **/

.il-theme-white svg,
.il-theme-gray svg {
	--svg-color: var(--il-blue);
}
.il-theme-blue svg,
.il-theme-blue-gradient svg,
.il-theme-orange svg,
.il-theme-orange-gradient svg {
	--svg-color: #fff;
}

/* See https://set.studio/some-simple-ways-to-make-content-look-good/ */
/* il-page .section-content :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-headline);
	line-height: 1.1;
	text-wrap: balance;
} */

/* il-page h1 { font-size: var(--s4); max-width: 20ch; font-weight: 700; }
il-page h2 { font-size: var(--s3); max-width: 28ch; font-weight: 600; }
il-page h3 { font-size: var(--s2); max-width: 28ch; font-weight: 600; }
il-page h4 { font-size: var(--s2); max-width: 28ch; font-weight: 600; font-style: italic; }
il-page h5 { font-size: var(--s2); max-width: 28ch; font-weight: 500; font-style: italic; }
il-page h6 { font-size: var(--s1); max-width: 28ch; font-weight: 500; font-style: italic; } */

il-page .section-content > * + * {
	margin-block-start: var(--flow-space, 1em);
}

il-page .section-content :is(h1, h2, h3, blockquote) {
	--flow-space: 1.5em;
}

il-page .section-content :is(h1, h2, h3) + * {
	--flow-space: 0.5em;
}

.il-formatted > il-section > *,
.il-fixed-width > * {
	padding-block: var(--pad-vert-large);
	padding-inline: 20px; /* Magic number to align with navbar */
	max-width: var(--il-content-max-width);
	margin: auto; /* Center main content */
}

.fixed-background-color {
	background: var(--il-background-color);
}

/* Allow orange gradient on components not currently supported by Toolkit */
.il-formatted .il-theme-orange-gradient il-call-to-action,
.il-formatted il-call-to-action.il-theme-orange-gradient,
.il-theme-orange-gradient,
.il-theme-orange-gradient il-call-to-action,
il-call-to-action.il-theme-orange-gradient,
il-clickable-card .il-theme-orange-gradient il-call-to-action,
il-clickable-card il-call-to-action.il-theme-orange-gradient,
il-statistic .il-theme-orange-gradient il-call-to-action,
il-statistic il-call-to-action.il-theme-orange-gradient {
	--il-background-color: var(--il-gradient-orange);
	--il-text-color: #fff;
	--il-heading-color: #fff;
	--il-link-color: #fff;
	--il-focused-link-color: var(--il-blue);
	--il-visited-link-color: #fff;
	--il-button-background-color: transparent;
	--il-button-foreground-color: #fff;
	--il-button-border-color: #fff;
	--il-focused-button-background-color: #fff;
	--il-focused-button-foreground-color: var(--il-orange);
	--il-focused-button-border-color: #fff;
	font-size: 1.125em;
}

.il-theme-blue-to-white {
	--il-heading-color: #fff;
	background: linear-gradient(to bottom, var(--il-blue) 50%, #fff 50%, #fff 100%);
}

/* Toolkit table formatting overrides */
.il-formatted thead th, il-call-to-action thead th, il-clickable-card thead th, il-statistic thead th {
	background-color: var(--il-blue);
}

.il-formatted tbody th, il-call-to-action tbody th, il-clickable-card tbody th, il-statistic tbody th {
	border: none;
}

.il-formatted tbody th:first-of-type, il-call-to-action tbody th:first-of-type, il-clickable-card tbody th:first-of-type, il-statistic tbody th:first-of-type {
	border: none;
}

.il-formatted tbody th:last-of-type,il-call-to-action tbody th:last-of-type,il-clickable-card tbody th:last-of-type,il-statistic tbody th:last-of-type {
	border: none;
}

.il-formatted td, il-call-to-action td, il-clickable-card td, il-statistic td {
	border: none;
}

.section {
	--section-pad-top-default: var(--pad-vert-large);
	--section-pad-bottom-default: var(--pad-vert-large);
}
.section > *,
.il-formatted > .section > * {
	padding-block-start: var(--section-pad-top,var(--section-pad-top-default));
	padding-block-end: var(--section-pad-bottom,var(--section-pad-bottom-default));
}

/* Top & Bottom padding */
.section-size-large { --section-pad-top: var(--pad-vert-large); --section-pad-bottom: var(--pad-vert-large); }
.section-size-standard { --section-pad-top: var(--pad-vert-standard); --section-pad-bottom: var(--pad-vert-standard); }
.section-size-med { --section-pad-top: var(--pad-vert-med); --section-pad-bottom: var(--pad-vert-med); }
.section-size-narrow { --section-pad-top: var(--pad-vert-narrow); --section-pad-bottom: var(--pad-vert-narrow); }
.section-size-none { --section-pad-top: 0 0; }

/* Top padding only */
.section-size-top-large { --section-pad-top: var(--pad-vert-large); }
.section-size-top-standard { --section-pad-top: var(--pad-vert-standard); }
.section-size-top-med { --section-pad-top: var(--pad-vert-med); }
.section-size-top-narrow { --section-pad-top: var(--pad-vert-narrow); }
.section-size-top-none { --section-pad-top: 0; }

/* Bottom padding only */
.section-size-bottom-large { --section-pad-bottom: var(--pad-vert-large); }
.section-size-bottom-standard { --section-pad-bottom: var(--pad-vert-standard); }
.section-size-bottom-med { --section-pad-bottom: var(--pad-vert-med); }
.section-size-bottom-narrow { --section-pad-bottom: var(--pad-vert-narrow); }
.section-size-bottom-none { --section-pad-bottom: 0; }


.section-short > *,
.il-formatted > .section-short > * {
	padding-block: 1em;
}

.section-short-top > *,
.il-formatted > .section-short-top > * {
	padding-block-start: 1em;
}

.section-short-bottom > *,
.il-formatted > .section-short-bottom > * {
	padding-block-end: 1em;
}

il-breadcrumbs-page {
	font-size: 1rem;
}

.il-formatted .il-lede, .il-formatted il-lede, .il-lede, il-lede {
	padding: var(--pad-vert-narrow) var(--pad-horiz-narrow);
	/* Can't target "il-lede > p" in shadow DOM, so we counteract it on the outer element */
	margin: -0.5em auto 0 auto;
}

.il-formatted .il-theme-blue .il-lede, .il-formatted .il-theme-blue il-lede {
	color: #fff;
}

.il-formatted .il-button.inverted,
.il-formatted .il-theme-white .il-button.inverted {
	--il-button-background-color: var(--il-blue);
	--il-button-foreground-color: #fff;
	--il-button-border-color: var(--il-blue);

	--il-focused-button-background-color: #fff;
	--il-focused-button-foreground-color: var(--il-blue);
	--il-focused-button-border-color: var(--il-blue);
}

.il-formatted .il-theme-blue .il-button.inverted {
	--il-button-background-color: #fff;
	--il-button-foreground-color: var(--il-blue);
	--il-button-border-color: #fff;
	
	--il-focused-button-background-color: var(--il-blue);
	--il-focused-button-foreground-color: #fff;
	--il-focused-button-border-color: #fff;
}

.il-formatted .il-button.btn-lg {
	font-size: var(--s1);
	padding: var(--pad-vert-standard) var(--pad-horiz-standard);
}

.il-formatted .il-button.btn-med {
	font-size: var(--s1);
	padding: var(--pad-vert-med) var(--pad-horiz-med);
}


/** Cards **/

.il-formatted .card-list {
	display: grid;
	grid-template-columns: repeat(auto-fill,350px);
	gap: var(--s1) var(--s1);
	list-style: none;
	justify-content: center;
}

.il-formatted .card-list li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Equal height cards */
.equal-height-cards :is(il-card,il-clickable-card,il-profile-card) {
	height: 100%;
}

/* Allow inline styles to set image's center point */
.il-formatted il-clickable-card img,
il-clickable-card img,
.il-formatted il-profile-card img,
il-profile-card img {
	--pos-x: 50%;
	--pos-y: 50%;
	object-position: var(--pos-x) var(--pos-y);
	object-fit: cover;
	aspect-ratio: 1/1;
}

.il-formatted il-profile-card img,
il-profile-card img {
	width: calc(100% + 24px);
}

.il-card.il-align-left h2, .il-card.il-align-left h3, .il-card.il-align-left h4, .il-card.il-align-left h5, .il-card.il-align-left h6,
.il-formatted .il-card.il-align-left h2, .il-formatted .il-card.il-align-left h3, .il-formatted .il-card.il-align-left h4, .il-formatted .il-card.il-align-left h5, .il-formatted .il-card.il-align-left h6,
.il-formatted il-card.il-align-left h2, .il-formatted il-card.il-align-left h3, .il-formatted il-card.il-align-left h4, .il-formatted il-card.il-align-left h5, .il-formatted il-card.il-align-left h6, il-card.il-align-left h2, il-card.il-align-left h3, il-card.il-align-left h4, il-card.il-align-left h5, il-card.il-align-left h6,
.il-card.il-align-left *, .il-formatted .il-card.il-align-left *, il-card.il-align-left * {
	text-align: left;
}


il-image-feature.outline,
il-image-feature.outline img {
	outline: 1px solid var(--il-text-color, var(--il-blue));
}

il-image-feature.img-contain img {
	object-fit: contain;
}

il-image-feature img {
	--img-bg-default: #fff;
	background: var(--img-bg,var(--img-bg-default));
}


/* HOMEPAGE */

h1.home-title-grid {
	display: grid;
	grid-template:
		"math science tech education"
		"acronym acronym acronym acronym"
		"name name name name";
	gap: var(--gap-vert-standard) var(--gap-horiz-large);
}

h1.home-title-grid svg {
	width: auto;
	height: auto;
}

.home-title-svg-math {
	grid-area: math;
}

.home-title-svg-science {
	grid-area: science;
}

.home-title-svg-tech {
	grid-area: tech;
}

.home-title-svg-education {
	grid-area: education;
}

.home-title-acronym {
	font-family: var(--il-font-serif);
	font-size: 28.5vw;
	line-height: 8rem;
	text-align: center;
	color: var(--il-orange);
	grid-area: acronym;
}

@media screen and (min-width: 350px) {
	.home-title-acronym {
		font-size: clamp(4rem,29vw,10rem);
	}
}

.home-title-name {
	font-size: var(--s4);
	line-height: 1.2;
	grid-area: name;
	text-align: center;
	margin-block-start: var(--s5);
}

@media screen and (min-width: 600px) {
	h1.home-title-grid {
		grid-template:
			". math science tech education ."
			". acronym acronym acronym acronym ."
			"name name name name name name";
	}
}

@media screen and (min-width: 1024px) {
	h1.home-title-grid {
		grid-template:
			"math science acronym tech education"
			"name name name name name";
	}

	.home-title-acronym {
		font-size: var(--s5);
		font-size: 8rem;
		line-height: 0.8;
	}
}

.home il-lede {
	margin-block-start: -1em;
}

.home #call-to-action > .section-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.home #call-to-action .el-grid {
	max-width: 72ch;
}

.home #call-to-action .el-grid a {
	max-width: 15em;
}

/* .home #call-to-action .el-grid > :first-child {
	text-align: end;
}

.home #call-to-action .el-grid > :last-child {
	text-align: start;
} */

/* ABOUT PAGE */

.about-grid {
	/* max 2 columns */
	--max-col-width: 41ch;
}

.about-grid > * {
	--gap-vert: var(--s2);
	--gap-horiz: var(--s2);
	display: flex;
	align-items: center;
	padding: var(--pad-vert-standard) var(--pad-horiz-standard);
}

.about-grid > * > * {
	--align-items: center;
}

.map-embed {
	border: 1px solid var(--il-text-color, var(--il-blue));
}


/* RESOURCES PAGE */

.resource {
	--flow-space: var(--s2);

	display: flex;
	flex-direction: column;
	background-color: var(--il-gray-1);
}

.resource > .el-with-sidebar > :first-child {
	min-height: 20ch;
}

.resource details {
	margin: 0;
	padding: 0;
}

.resource details summary {
	margin: 0;
	padding: var(--s-4) var(--s0);
}

.resource details summary + * {
	background-color: var(--il-cloud-3);
	padding: var(--s2) var(--s0);
}

.resource details .el-with-sidebar > :last-child {
	background-color: var(--il-gray-1);
}

.resource details .el-with-sidebar > :last-child * + * {
	margin-block-start: 0;
}

.resource details .el-with-sidebar * + * > p:first-child {
	line-height: 1.4;
}

.resource details .el-with-sidebar * + * > p:not(:first-child) {
	line-height: 1.25;
	margin-block-start: 0.5em;
}

/* .resource > * + * {
	margin-top: calc(-1 * var(--border-width, var(--border-width-default)));
} */

.full-bleed {
	margin: 0;
	padding: 0;
}

img.cover {
	object-fit: cover;
}

img.contain {
	object-fit: contain;
}

.title {
	font-weight: bold;
}


/* Every Layout: Sidebar (https://every-layout.dev/layouts/sidebar/) */
.el-with-sidebar {
	--align-items-default: stretch;
	--justify-sidebar-default: center;
	--sidebar-width-default: initial;
	--sidebar-bg-default: #fff;
	--content-bg-default: transparent;
	--min-inline-size-default: 50%;
	display: flex;
	flex-wrap: wrap;
	align-items: var(--align-items,var(--align-items-default));
	gap:
		var(--gap-vert, var(--gap-vert-standard))
		var(--gap-horiz, var(--gap-horiz-standard));
}

.el-with-sidebar.with-grid-lines > *:not(.full-bleed) {
	padding: 
		var(--gap-vert, var(--gap-vert-standard))
		var(--gap-horiz, var(--gap-horiz-standard));
}

.el-with-sidebar:not(.reversed) > :first-child,
.el-with-sidebar.reversed > :last-child {
	flex-basis: var(--sidebar-width,var(--sidebar-width-default));
	flex-grow: 1;
	background: var(--sidebar-bg,var(--sidebar-bg-default));
}

.el-with-sidebar.fill-sidebar:not(.reversed) > :first-child,
.el-with-sidebar.fill-sidebar.reversed > :last-child {
	display: flex;
	justify-content: var(--justify-sidebar, var(--justify-sidebar-default));
}

.el-with-sidebar:not(.reversed) > :last-child,
.el-with-sidebar.reversed > :first-child {
	flex-basis: 0;
	flex-grow: 999;
	min-inline-size: var(--min-inline-size, var(--min-inline-size-default));
	background: var(--content-bg,var(--content-bg-default));
}

/* Every Layout: Grid (https://every-layout.dev/layouts/grid/) */
.el-grid {
	display: grid;
	gap:
		var(--gap-vert, var(--gap-vert-standard))
		var(--gap-horiz, var(--gap-horiz-standard));
}

/* .el-grid.with-grid-lines {
	gap: 1px;
}

.el-grid.with-grid-lines > * {
	padding: 
		var(--gap-vert, var(--gap-vert-standard))
		var(--gap-horiz, var(--gap-horiz-standard));
	outline: 1px solid var(--il-gray-2);
} */

@supports (width: min(250px, 100%)) {
	.el-grid {
		--max-col-width-default: 250px;
		grid-template-columns: repeat(auto-fit, minmax(min(var(--max-col-width,var(--max-col-width-default)), 100%), 1fr));
	}
}

.with-grid-lines {
	--border-width-default: 1px;
	gap: var(--border-width, var(--border-width-default));
}

.with-grid-lines > * {
	/* IL Theme assumes all components are on a white bg, so card border color matches bg color for themes other than white and gray */
	/* outline: var(--border-width, var(--border-width-default)) solid var(--il-card-border-color,var(--il-gray-2)); */
	outline: var(--border-width, var(--border-width-default)) solid var(--il-gray-2);
}