/* dev css test publish */

:root {
	--sjsu-blue: #0055a2;
	--sjsu-gold: #e5a823;
	--sjsu-gray: #939597;
	--sjsu-paseo-gray: #f1f1f1;
	--sjsu-normal-gray: #9b9b9b;
	--sjsu-display-font: 'Nunito Sans', Helvetica, Arial,sans-serif;
	--sjsu-body-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--sjsu-deco-width: 5px;
	--sjsu-gradient-blue-to-gold: linear-gradient(to right, rgba(28, 136, 244, 1) 0%, rgba(183, 183, 183, 1) 48%, rgba(229, 168, 35, 1) 100%) 1;
	--sjsu-gradient-blue: linear-gradient(to right, rgba(0, 66, 130, 1) 0%, rgba(28, 136, 244, 1) 100%) 1;
	--sjsu-marker-blue: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><linearGradient id="a" x1="100%" x2="0%" y1="50%" y2="50%"><stop offset="0%" stop-color="%231C88F4"/><stop offset="100%" stop-color="%23004282"/></linearGradient></defs><rect width="12" height="12" fill="none" fill-rule="evenodd" stroke="url(%23a)" stroke-width="3.5" rx="6" transform="translate(2 2)"/></svg>');
	--sjsu-gradient-gold: linear-gradient(to right, rgba(229, 129, 35, 1) 0%, rgba(229, 168, 35, 1) 100%) 1;
	--sjsu-marker-gold: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><defs><linearGradient id="a" x1="0%" x2="86.49%" y1="50%" y2="50%"><stop offset="0%" stop-color="%23E58123"/><stop offset="100%" stop-color="%23E5A823"/></linearGradient></defs><rect width="12" height="12" fill="none" fill-rule="evenodd" stroke="url(%23a)" stroke-width="3.5" rx="6" transform="translate(2 2.5)"/></svg>');
}


h1 {
	color:red;
}

p {
	--_font-weight: var(--font-weight, inherit);
	--_font-style: var(--font-style, inherit);
	font-weight: var(--font-weight);
	font-style: var(--font-style);
}

.o-callout {
	container-type:inline-size;
	container-name:callout;
	margin-bottom:3rem;
}

.o-callout__frame {
	display:grid;
	grid-template-rows: min-content 46px min-content;
	gap: 0;
}

.o-callout__copy {
	--_background-color: var(--background-color, inherit);
	--_color: var(--color, inherit);
	background-color: var(--_background-color);
	color: var(--_color);
	padding:1.6087rem 1rem 1.6087rem 1.6087rem;
	grid-column: 1 / 2;
}

.t--nomedia > .o-callout__copy {
	max-width:70ch;
	margin:0 auto;
	padding-right:1.6087rem;
}

.o-callout__copy > :not(p) {
	--_font-family: var(--font-family, var(--sjsu-display-font));
	--_font-size: var(--font-size, 1.3043rem);
	color: inherit;
	font-family: var(--_font-family);
	font-size: var(--_font-size);
	/*align-self:end;*/
}

/* TODO: use clamp for the widths to manage responsiveness */
.o-callout__copy > p {
	--_font-family: var(--font-family, var(--sjsu-body-font));
	--_font-size: var(--font-size, 1rem);
	color: inherit;
	/*align-self:start;*/	
	margin:0;
	font-family: var(--_font-family);
	font-size: var(--_font-size);
}

.o-callout__bg-overlap {
	--_background-color: var(--background-color, inherit);
	background-color: var(--_background-color);
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}

.o-callout__media {
	display:inherit;
	grid-row: 1 / 3;
	grid-column: 1 / 2;
	justify-self:center; 
}

/* not doing anything
.o-callout__image {
align-self:center;
}
*/

.o-callout__embed {
	min-width: 480px;
	aspect-ratio: 16 / 9;
	align-self:center;
}

.t--nomedia > .t--nomedia {
	display:none;
}

@container callout (inline-size <= 520px) {
	.o-callout__embed {
		width:320px;
	}
}

@container callout (inline-size >= 1024px) {
	.o-callout__frame {
		grid-template-rows:initial;
		/* This might not be necessary if constraints are put on the media */
		/* grid-template-columns:1fr 69px max-content; */
	}

	.o-callout__frame.t--nomedia {
		grid-template-columns: 1fr;
	}	

	.o-callout__copy {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}

	.--reverse .o-callout__copy {
		grid-column: -1 / -2;			
	}

	.o-callout__copy > * {
		max-width:55ch;
	}

	.o-callout__media {
		padding:1.6087rem 0;
		grid-column: 2 / 4;
		grid-row: 1 / 2;
		justify-self:initial;
	}
	
	.o-callout__embed {
		min-width: clamp(480px,100%,640px);
		aspect-ratio: 16 / 9;
		align-self:center;
	}	

	.--reverse .o-callout__media {
		grid-column: -2 / -4;
		justify-self: end;
	}

	.o-callout__bg-overlap {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		height:initial;
		width:69px;
	}
	.--reverse .o-callout__bg-overlap {
		grid-column: -2 / -3;
	}
	
	.o-callout__embed {
		width:640px;
	}
	
	.o-callout__image img {
		max-width:640px;
	}

}



.o-profile {
	--bgcolor: white;
}

.o-profile__media img {
	display:block;
	margin:0 auto;
}

.o-profile__copy {
	padding-top:1rem;
	margin-top:1rem;	
}

.o-profile__heading {
	font-size:1.3044rem;
}

.o-profile__text {
	font-size:.7826rem;
}

.o-program-card {

}

.o-program-card__heading {

	margin-bottom:2.5rem;
}

.o-program-card__text {

	max-width:70ch;
}


.o-snapshot {
	/* what would end up here? */	
	list-style-type:none;
	margin-bottom:2rem;
}

.o-snapshot > * {
	--_background-color: var(--background-color, var(--sjsu-paseo-gray));
	--_border-image: var(--border-image, var(--sjsu-gradient-blue-to-gold));
	--_color: var(--color, inherit);
	background-color: var(--_background-color);
	border-top-style: solid;
	border-top-width: var(--sjsu-deco-width);
	border-image: var(--_border-image);
	color: var(--_color);
	max-width:70ch;
}

.o-snapshot > :not(p) {	
	font-family: var(--sjsu-display-font);
	font-size:1.3044rem;
}

.o-snapshot > p {
	font-size:.7826rem;
}

td:has([data-select-list]) {
	border:3px solid yellow;
}



.o-testimonial {
	--_background-color: var(--background-color, white);
	--_color: var(--color, inherit);
	background-color: var(--_background-color);
	color: var(--_color);
	display:grid;
	grid-template-rows: 125px 21px auto;
}

.o-testimonial.nomedia {
	grid-template-rows: 21px auto;
}

.o-testimonial.noquote {
	grid-template-rows: 125px auto;
}

.o-testimonial.nomedia.noquote {
	grid-template-rows: auto;
}

.o-testimonial.featured {
	max-width: 60ch;
	margin: 3rem auto;
	display:block;
}

.o-testimonial__iconquot {
	background-color:white;
	padding:0 1rem 0 0;
	display:block;
	position:relative;
	z-index:1;	
}

.o-testimonial.featured .o-testimonial__iconquot {
	margin: 0 auto -32px auto;
	padding: 0 1rem 10px;
}

.o-testimonial.featured .o-testimonial__person {
	display:grid;
	grid-template-columns: auto auto;
	gap:0.5rem;
}

.o-testimonial.featured.nomedia .o-testimonial__person {
	grid-template-columns: auto;
}

.o-testimonial.featured .o-testimonial__media + .o-testimonial__name {
	/* justify-self:start; */
	text-align:start;
}

.o-testimonial.featured .o-testimonial__name {
	justify-self:center;
	align-self:center;
	text-align:center;
	max-width:375px;
	margin-bottom:0;
	--font-size: .7826rem;
}

.o-testimonial.featured.t--nomedia .o-testimonial__name > span {
	margin:0 auto;
}

.o-testimonial.featured .o-testimonial__copy {
	padding:1.5rem 0 0 0;
	--font-size: 1rem;
}

.o-testimonial.featured .o-testimonial__media {
	/* justify-self:end; */
}

.o-testimonial__media {
	display:block;
	justify-self:center;
	--_border-radius: var(--border-radius, 50%);
	--_dimensions: var(--dimensions, 125px);
	width: var(--_dimensions);
	height: var(--_dimensions);
	border-radius: var(--_border-radius);
}

.o-testimonial__copy {
	--_border-image: var(--border-image, var(--sjsu-gradient-blue-to-gold));
	--_border-width: var(--border-width, 3px);	
	--font-size:.7826rem;
	align-self:start;
	padding:1.5rem 0 0 30px;
	border-top-style: solid;
	border-top-width: var(--_border-width);
	border-image: var(--_border-image);
}

.noquote:not(.nomedia) .o-testimonial__copy {
	margin-top:1.5rem;
}

.noquote .o-testimonial__copy {
	padding-left:0;
}

.o-testimonial__quote {
	--_font-size: var(--font-size, 1rem);
	font-size:var(--_font-size);

}

.o-testimonial__name {
	--_font-size: var(--font-size, 1rem);
	font-size:var(--_font-size);
}

ul.children-with-custom-marker {
	display:flex;
	flex-wrap:wrap;
	list-style-position:inside;
	flex-direction:column;
	margin-left:0;
	max-height: 7rem;
	/* max-width:58ch; */
	/* This declaration is collapsing space and making it look weird, but I am not entirely sure why I had it originally */
}

ul.children-with-custom-marker > li {
	--_list-style-image: var(--list-style-image, initial);
	list-style-image: var(--_list-style-image);
}

ul.children-with-custom-marker > li::marker {
	font-size:1.5em;
	line-height:0;
}

.u-bar {
	margin-bottom:2rem;
}

.u-cardify {
	display: grid;			
	grid-template-columns: repeat(auto-fill, minmax(30ch,1fr));
	gap: 1rem;
	list-style:none;
	margin-left:0;
}

.u-cardify > * {
	padding:1rem;
}


.u-deco-top:not(.u--children) {
	--borderimage: initial;
	border-top-style:solid;
	border-top-width: var(--sjsu-deco-width);
	border-image: var(--borderimage);
}

.u-deco-top.u--children > * {
	--borderimage: initial;	
	border-top-style:solid;
	border-top-width:var(--sjsu-deco-width);
	border-image: var(--borderimage);
}



.u-deco-roundify {
	border-radius:50%;
	max-height:200px;
	max-width: 200px;
}

.u-accent-color--blue {
	--border-image: var(--sjsu-gradient-blue);
	--list-style-image: var(--sjsu-marker-blue);
}

.u-accent-color--gold {
	--border-image: var(--sjsu-gradient-gold);
	--list-style-image: var(--sjsu-marker-gold);	
}


.u-theme--white-on-blue {
	--background-color: var(--sjsu-blue);
	--color: white;
}

.u-theme--black-on-gray {
	--background-color: var(--sjsu-paseo-gray);
	--color: black;
}

.u-color--sjsu-blue:not(.u--children) {
	--bgcolor: var(--sjsu-blue);
	--textcolor: white;
}

.u-color--sjsu-blue.u--children > * {
	--bgcolor: var(--sjsu-blue);
	--textcolor: white;
}

.u-color--sjsu-paseo-gray:not(.u--children) {
	--bgcolor: var(--sjsu-paseo-gray);
	--textcolor: black;
}

.u-color--sjsu-paseo-gray.u--children > * {
	--bgcolor: var(--sjsu-paseo-gray);
	--textcolor: black;
}

.u-color--sjsu-gradient-blue:not(.u--children) {
	--borderimage: var(--sjsu-gradient-blue);
}

.u-color--sjsu-gradient-blue.u--children > * {
	--borderimage: var(--sjsu-gradient-blue);
}

.u-color--sjsu-gradient-gold:not(.u--children) {
	--borderimage: var(--sjsu-gradient-gold);
}

.u-color--sjsu-gradient-gold.u--children > * {
	--borderimage: var(--sjsu-gradient-gold);
}

.u-color--sjsu-gradient-blue-to-gold:not(.u--children) {
	--borderimage: var(--sjsu-gradient-blue-to-gold);
}

.u-color--sjsu-gradient-blue-to-gold.u--children > * {
	--borderimage: var(--sjsu-gradient-blue-to-gold);
}

.u-bold {
	font-weight: bold;
}

.u-italic {
	font-style: italic;
}


.t-program-section p, .t-program-section li {
	max-width: 70ch;
}

.t-program-banner {
	margin-bottom: 1rem;
}

.t-program-toc-heading {
	margin-top:2rem;
	font-size: 1rem;
}

.t-program-toc-listing {
	list-style-type: none;
	margin:0;
	column-count: 2;
}

.t-program-toc-listing li {
	--_border-color: var(--border-color, var(--sjsu-blue));
	border-top-width:1px;
	border-top-style:solid;
	border-color: var(--_border-color);
	--_background-color: var(--background-color, white);
	background-color: var(--_background-color);	
}

.t-program-toc-listing li:nth-child(5), .t-program-toc-listing li:last-child {
	border-bottom-width:1px;
	border-bottom-style:solid;
}

.t-program-toc-listing p {
	margin:0;
	font-size:.875rem;
}


.t-program-toc-listing span {
	font-size:.75rem;
	display:inline-block;
	margin-right:.75rem;
	padding:.75rem;
	--_background-color: var(--background-color, var(--sjsu-paseo-gray));
	background-color: var(--_background-color);
	font-family: var(--sjsu-display-font);
}


.t-program-toc-listing a {
	text-decoration: none;
	display:block;
}

.t-program-toc-listing a:hover, .t-program-toc-listing a:focus {
	font-weight: bold;
	text-decoration: underline;
} 

.t-program-toc-listing a:hover span, .t-program-toc-listing a:focus span {
	--_background-color: var(--sjsu-gold, initial);
	background-color: var(--_background-color);
	color: black;
}

input[type=text] {
	max-width: 70ch;
}

<!-- SVG for double quotes
url('data:image/svg+xml,<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Group 3</title>
<defs>
<path d="M54.2567233,0 C41.621019,3.77518469 31.2176224,14.2016454 31.2176224,27.3480524 L31.2176224,27.3480524 C31.2176224,34.7523506 35.5286274,41.25 43.2562278,41.25 L43.2562278,41.25 C49.4997522,41.25 54.2567233,36.1123237 54.2567233,29.9168905 L54.2567233,29.9168905 C54.2567233,23.5703492 50.5403397,19.6415379 42.9589171,18.5837811 L42.9589171,18.5837811 C43.8508491,13.2949966 48.1618541,6.64875756 55,2.26662189 L55,2.26662189 L54.2567233,0 Z M23.0415784,0 C10.4033965,3.77518469 0,14.2016454 0,27.3480524 L0,27.3480524 C0,34.7523506 4.311005,41.25 12.0410829,41.25 L12.0410829,41.25 C18.2846074,41.25 23.0415784,36.1123237 23.0415784,29.9168905 L23.0415784,29.9168905 C23.0415784,23.5703492 19.3227172,19.6415379 11.7412947,18.5837811 L11.7412947,18.5837811 C12.6332267,13.2949966 16.9467093,6.64875756 23.7823776,2.26662189 L23.7823776,2.26662189 L23.0415784,0 Z" id="path-1"></path>
<linearGradient x1="32.6735082%" y1="49.9987954%" x2="100.000986%" y2="49.9987954%" id="linearGradient-3">
<stop stop-color="#E4A824" offset="29.878715%"></stop>
<stop stop-color="#E48225" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-3">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M54.2567233,0 C41.621019,3.77518469 31.2176224,14.2016454 31.2176224,27.3480524 L31.2176224,27.3480524 C31.2176224,34.7523506 35.5286274,41.25 43.2562278,41.25 L43.2562278,41.25 C49.4997522,41.25 54.2567233,36.1123237 54.2567233,29.9168905 L54.2567233,29.9168905 C54.2567233,23.5703492 50.5403397,19.6415379 42.9589171,18.5837811 L42.9589171,18.5837811 C43.8508491,13.2949966 48.1618541,6.64875756 55,2.26662189 L55,2.26662189 L54.2567233,0 Z M23.0415784,0 C10.4033965,3.77518469 0,14.2016454 0,27.3480524 L0,27.3480524 C0,34.7523506 4.311005,41.25 12.0410829,41.25 L12.0410829,41.25 C18.2846074,41.25 23.0415784,36.1123237 23.0415784,29.9168905 L23.0415784,29.9168905 C23.0415784,23.5703492 19.3227172,19.6415379 11.7412947,18.5837811 L11.7412947,18.5837811 C12.6332267,13.2949966 16.9467093,6.64875756 23.7823776,2.26662189 L23.7823776,2.26662189 L23.0415784,0 Z" id="Fill-1" fill="url(#linearGradient-3)" mask="url(#mask-2)"></path>
</g>
</g>
</svg>')
-->

/*
.children-with-custom-marker {
display:flex;
flex-direction:column;
max-width:35ch;
}

.children-with-custom-marker > *::before {
display:inline-block;
width:23px;
height:23px;
margin-right:.25rem;

}

.children-with-custom-marker.custom-marker-color-gold > *::before {
content: url('data:image/svg+xml,<svg transform="scale(0.5) translate(0, 10)" transform-origin="center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17"><defs><linearGradient id="a" x1="0%" x2="86.49%" y1="50%" y2="50%"><stop offset="0%" stop-color="%23E58123"/><stop offset="100%" stop-color="%23E5A823"/></linearGradient></defs><rect width="12" height="12" fill="none" fill-rule="evenodd" stroke="url(%23a)" stroke-width="3.5" rx="6" transform="translate(2 2.5)"/></svg>');
}



.children-with-custom-marker.custom-marker-color-blue > *::before {
content: url('data:image/svg+xml,<svg transform="scale(0.5) translate(0, 10)" transform-origin="center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><linearGradient id="a" x1="100%" x2="0%" y1="50%" y2="50%"><stop offset="0%" stop-color="%231C88F4"/><stop offset="100%" stop-color="%23004282"/></linearGradient></defs><rect width="12" height="12" fill="none" fill-rule="evenodd" stroke="url(%23a)" stroke-width="3.5" rx="6" transform="translate(2 2)"/></svg>');
}

*/



.cms-warning {
	background-color:yellow;
}

.cms--character-limit::after {
	content: "You have too many characters in this field.";
}