@import url('https://fonts.googleapis.com/css2?family=Kreon:wght@300..700&display=swap');

:root {
	--max-width: 850px;
	}

html{
	scroll-behavior: smooth;
	}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

body, input, button, select, option, text{
	font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 1rem;
	line-height: 1.5rem;
	background-color: #e8e8e8;
	color: #004068;
	}

a, a:link, a:visited, a:focus, .link{
	text-decoration: none;
	cursor: pointer;
	position: relative;
	font-weight: 500;
	color: #bd6300;
	}
a:hover, .link:hover{
	text-decoration: underline;
	text-underline-offset: .25rem;
	text-decoration-thickness: 1.5px;
	color: #e77d08;
	}	


/* Header ----------------- */
header{
	display: grid;
	gap: .5rem;
	text-align: center;
	background-color: #297496;
	align-items: center;
	padding: .5rem 1rem 1rem 1rem;
	min-height: 6rem;
	}
header img{
	width: 8rem;
	cursor: pointer;
	margin: 0 auto;
	}
nav{
	margin-left: auto;	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .3rem .75rem;
	font-weight: 500;
	}
nav a.active{
	text-decoration: underline;
	text-underline-offset: .25rem;
	}	
nav a, nav a:link, nav a:visited, nav a:focus{ 
	color: #bceeff; 
	display: block;
    line-height: 1.25rem;
	}
nav a:hover{ 
	color: #fff; 
	text-decoration: none; }
nav a.active{ color: #fff; }


/* Main ----------------- */
h1{ 
	font-family: Kreon;
	color: #0099bc;
	padding: 1rem 0;
	font-size: 2.5rem;
	line-height: 2.25rem;
	font-weight: 600;
	margin: 0;
	}

h2{ 
	color: #0099bc;
	font-family: Kreon;
	margin: 0;
	padding: 1.5rem 0 1.5rem 0;
	font-size: 1.75rem;
	line-height: 2rem;
	font-weight: 600;
	}
section > h2:first-child { padding-top: 1rem; }

h3{ 
	color: #000;
	font-weight: normal;
	font-size: 1.45rem;
	margin: 0;
	padding: 2.5rem 0 .5rem 0;
	}

h4{ 
	font-size: 1rem;
	margin: 0;
	padding: 1.5rem 0 0 0;
	}

p { padding: .75rem 0; }

ul{ 
	margin: .75rem 1rem;
	padding-left: 1.25rem;
	}
li{
	line-height: 1.4rem;
	padding: .5rem;
	}

img{
  	display: block;          
  	max-width: 100%;         
  	height: auto;           
  	object-fit: cover;      
  	object-position: center;  
  	border: 0;               
	}
p+img{ padding-top: 2rem; }

video{
	display: block;
  	width: 100%;
  	height: auto;	
  	border-radius: .5rem;
	}

/* Youtube iframe wrapper */
.video {
  	width: 100%;
  	aspect-ratio: 16 / 9;
  	border-radius: .5rem;
  	overflow: hidden;
	}	
.video iframe {
  	width: 100%;
  	height: 100%;
  	border: 0;
  	display: block;
	}

main{
	width: 100%;
	background-color: #fff;
	padding-bottom: 2rem;
	}

section{
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1rem 1rem;
	}
section.breadcrumb{ padding-bottom: 0; }	
section.wave{
	background-position: bottom;
	background-size: 200%;
	background-image: url('../images/border/section-wave.svg');
	background-repeat: no-repeat;
	border: none;
	padding-bottom: 4rem;
	}
section.full{ 
	margin: 0; 
	max-width: 100%;
	}
section#banner{
	background-image: url('../images/home/arizona-landscape-small.jpg');
	background-size: cover;
	background-position: center 60%;
	height: 16rem;
	display: flex;
	justify-content: center;
	align-items: center;
	}
section#banner img{
	padding: 1rem;
    max-width: 40rem;
    filter: drop-shadow(0 0 10px rgb(0 54 73 / 50%));
	}


.inline-menu{
	margin: 0;
	padding: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	font-weight: 500;
	gap: .75rem 0;
	}
.inline-menu div{ 
	border-right: 2px solid #000;
    padding: 0 .5rem 0 0;
    margin: 0 .5rem 0 0;
    line-height: 1rem;
	}
.inline-menu div:first-child{ padding-left: 0; }
.inline-menu div:last-child{ 
	border: none; 
	padding: 0;
	margin: 0;
	} 

.inline-menu div.active, 
.inline-menu div.active a, 
.inline-menu div.active a:link, 
.inline-menu div.active a:visited, 
.inline-menu div.active a:focus { 
	color: #000; 
	text-decoration: underline; 
	text-underline-offset: .25rem;
	text-decoration-thickness: 1.5px;
	}
section > .inline-menu:last-child{ padding-bottom: 0; }

.columns-2{
	display: grid;
	gap: 1rem;
	}
.columns-2 img{
	max-width: 80%;
    margin: 0 auto;
	}

/* Experience  */	
.experience, 
.team-member{
	display: grid;
	gap: 1rem;
	padding: 1.5rem 0;
	}

.experience img, 
.team-member img{ 
	width: 10rem; 
	border-radius: .5rem; 
	}
.experience .title{
	font-size: 1.25rem;
	color: #000;
	}
.experience .process{
	display: inline-block;
	padding: .3rem .5rem;
	background-color: #d2f1ff;
	font-weight: 500;
	margin-top: .5rem;
	}
.experience .about{ padding-top: .5rem; }
.experience .about > p:first-child{ padding-top: 0; }
.experience .about > p{ padding-bottom: 0; }


/* Event */
.event img{ border-radius: .5rem; }
.event .caption{ 
	color: #666;
	font-size: .9rem;
	}
.event .title{ 
	padding: 1rem 0 .5rem 0;
	font-size: 1.25rem; 
	color: #000;
	}
.event .location, .event .hours{ padding: .5rem 0; }



/* Publications */	
#publications .date{ font-weight: 600;}


/* TEAM */	
.team-member{
	display: grid;
	gap: 1rem;
	padding: 1.5rem 0;
	}
.team-member img{ 
	width: 10rem; 
	border-radius: .5rem;
	}


/* Footer ----------------- */
footer{ 
	display: grid;
	padding: 1rem; 
	padding-bottom: 4rem;
	font-size: .9rem;
	align-items: center;
	justify-items: center;
	gap: 1rem;
	}				
footer a:link, footer a:visited{ color: #1378a6; }
footer a:hover{ color: #000; }		

footer .links{
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	line-height: 1rem;
	}

footer .logos{
	display: flex;
	gap: 2rem;
	align-items: center;
	justify-content: center;
	width: max-content;
	}
footer img.asu{ width: 14rem; }
footer img.nsf{ width: 6rem; }






@media print, (min-width:650px) { 
	
	header{ 
		grid-template-columns: max-content auto; 
		gap: 2rem;
		}
	header img{ width: 12rem; }

	nav{
		margin-left: auto;
		font-size: 1.1rem;
		justify-content: right;
		padding: 1rem 0 0 0;
		}
		

	h1{ 
		padding-top: 1rem; 
		font-size: 2.75rem;
		line-height: 2.5rem;
		}

	h2{ font-size: 2rem; }

	
	section{ padding: 2rem 1rem; }
	section.wave{
		padding-bottom: 6rem;
		background-size: 100%;
		}

	section#banner{ 
		background-image: url('../images/home/arizona-landscape.jpg');
		height: 30rem; }

	.columns-2{ 
		grid-template-columns: 1fr 1fr; 
		gap: 3rem; 
		}
	.columns-2 img{ 
		align-self:center; 
		max-width: 100%;
		}

	footer {
		grid-template-columns: max-content auto;
		justify-items: left;
		gap: 2rem;
		}
	footer .links{ margin-left: auto; }



	.experience, 
	.team-member{ 
		gap: 2rem;
		grid-template-columns: max-content auto; 
		}
	
	.experience img, 
	.team-member img{ width: 10rem; }

	.event .img-wrapper{ position:relative; }
	.event .caption{ 
		text-align: right; 
		position: absolute;
		bottom: -1.5rem;
        width: 100%;
		}
	
	.team-member{
		gap: 2rem;
		grid-template-columns: max-content auto;
		}
	



}	

@media print, (min-width:750px) {
	.columns-2{ grid-template-columns: auto 22rem; }
	footer .links{ gap: 1rem; }
}

@media print, (min-width:950px) {
	header{ padding: .5rem 2rem 1rem 2rem; }

	nav { gap: 2rem; }
	nav a.active{ text-decoration: none; }	
	nav a.active::before {
		content: "";
		position: absolute;
		display: block;
		height: .3rem;
		bottom: -.5rem;
		width: 100%;
		background-image: url('../images/border/nav-wave.svg');
		background-repeat: repeat-x;
		}
	footer{ padding: 1rem 2rem 5rem 2rem; }
}

@media print{
	footer a::after { content: " (" attr(data-shorturl) ")"; }

}