html {font-size: 22px;} /* 1rem = 18px */

@view-transition {
    navigation: auto;
}

body {
	background-color: #F6F5F1;
	font-family: serif;
	line-height: 1.45;
	color: #000;
	margin: 0;
	}
a {color:#336699;}
a:hover{color:#AD4C3B;}

div#wrapper {
	margin-top: 4rem;
	margin-left: 10%;
	width: 80%;
	}

h1, h2, h3, h4 {
	font-family: sans-serif;
	margin-bottom: 0;
	}
h2, h3, h4, p, ol, ul { /* H1 is as wide as screen. Other elements use 30em width column */
	max-width: 30em;
	}

/* TYPESCALE: 0.667 / 1 / 1.5 / 2.25 / 3.375 / 5.063 */
h1 { /* Standard page title */
	font-size: /* 2.25rem */ 3.375rem;
	line-height: 1em;
	margin-bottom: 2rem; } 
h1.hub { /* GIANT page title for hub screens */
	font-size: /* 3.375rem */ 5.063rem;
	line-height: 1em;
	}
h2 {font-size: 1.5rem;}
h3 {font-size: 1rem;}
h4 {font-size: 1rem; font-style: italic; }


p {	margin-top: 0;} /* Pushes Ps to right after Hns */
p.lede {font-size: 1.5rem } /* Large size lead paragraph */
p.caption, p.date { /* .caption used in IMG divs. .date used for last updated lines on various screens */
	font-family: sans-serif; 
	font-size: 0.667rem;
	width: 100%;
	}
p.tagline { /* Used above the title on Method screens to summarize the Method */
	font-family: sans-serif;
	font-size: 1.5rem;
	font-weight: 200;
	width: 100%;
	}

dt {font-family: sans-serif; font-weight: bold;}
dd {margin-bottom: 1rem;}

ul, ol {margin-bottom: 1rem;}
ol ol, ul ul {margin-bottom:0;}
ol ol {list-style-type: lower-alpha;}

/*
	SPECIAL HELPERS
*/
.category {text-transform: uppercase;}
.landing {border-top: 0.5rem solid #4C87BA;}
.method {border-top: 0.5rem solid #91B956;}
.note {border-top: 0.5rem solid #B769CA;}

/*
    COLORS
	Light maroon: #DE7D6C
	Maroon: #AD4C3B
	Pink: #E68DAC
	Mauve: #B65C7C
	Light reddish brown: #E6B063
	Reddish brown: #B57F33
	Light brown: #E9CA70
	Brown: #B89940
	Light tan: #EDE488
	Tan: #BDB359
	Light olive green: #CAD570
	Olive green: #99A43F
	Light green: #CAD570
	Green: #A5C574
	Dark green: #739443
	Blue: #7CB9E9
	Dark blue: #4C87BA
	Purple: #B769CA
	Dark purple: #85389A
*/

/*
	TABLE components
*/
div.table {overflow-x:auto;} /* Adds horizontal scrollbar to tables with content that's too wide */ 
table { /* By default, table width collapses to contents */
	border-collapse: collapse;
	margin: 1rem 0 2rem 0;
	}
th, td {
	text-align: left;
	padding: 0.5rem;
	border-bottom: 1px solid #ddd;
	}
thead th {
	border-bottom: 3px solid #ddd;
	padding-bottom: 0.25rem;
	}
tr:hover {background-color: #efefef;}

table.wide { /* Wide tables stretch to 100% when that makes content easier to consume */
	font-family: sans-serif;
	font-size: 0.667rem;
	width: 100%;
	}
caption { /* Table caption */
	font-family: sans-serif; 
	font-size: 1rem;
	padding: 0.5rem;
	}
	


/*
	IMAGE components
	Only difference between markup for both image components is class on the container div.
*/
div.image { /* container to sandbox stretched images */
	margin: 2rem 0;
	}
div.image img { /* By default, images stretched to 100% width */
	border: 1px solid #efefef;
	width: 100%;
	}
div.image p.caption {
	text-align: center;
	color: #666;
	max-width: 100%;
	}

div.image-small { /* "Small" images are stretched to 50% width */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	margin: 2rem 0;
	}
div.image-small img {
	border: 1px solid #efefef;
	width: 50%;
	}
div.image-small p.caption {
	/* font-size: 1rem; */
	color: #666;
	margin-left: 1rem;
	margin-bottom: 0;
	width: 50%;
	}
/* If the screen size is 50rem wide or less, set the widths to 100% and stack image and caption */
	@media screen and (max-width: 50rem) {
		div.image-small {
			display: block;
	}
	div.image-small p.caption {
		margin-left: 0;
	}
}











/*
	HEADER and FOOTER
*/
header, footer {
	color: #666;
	font-family: sans-serif;
	font-size: 0.667rem;
	font-weight: 400;
	padding: 2rem 1rem;
	}
footer {
	background-color: #000;
	color: #777;
}
footer p {
	margin: auto;
	margin-bottom: 1rem;
	max-width: 80%;
	text-align: center;
}
footer p a {
	color: #4C87BA;
}

header a {color:#666;text-decoration: none;}
footer{margin-top:5rem;}

header nav { /* Global nav links */
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	}
header nav a {
	line-height: 0.725rem;
	margin: 0rem;
	padding: 0 1rem;
	}
header nav a strong {
	color:#336699;
}
header nav a:hover {
	color:#666;
}
header nav a:hover strong {
	color:#AD4C3B;
}
header img#logo {
	margin: 0;
}
/* If the screen size is 50rem wide or less, set the widths to 100% */
@media screen and (max-width: 50rem) {
	header {
		padding: 1rem 0;
		margin:0;
	}
	header nav {
		display: block;
		margin-left: 10%;
		}
	header nav a {
		padding: 0;
	}
	header nav a p:first-child {
		margin: 0;
	}
	span.sub {
		display:none;
	}
}







blockquote footer{ /* Blockquotes include footers for more info. These styles override the footer styles set above */
	background-color: white;
	border-top: 1px #666;
	margin-top: 0;
	padding: 0;
	}





/*
	BREADCRUMB
*/
nav.breadcrumb {font-family:sans-serif;font-size: 0.667rem;color:#666;}
nav.breadcrumb a {color:#666;text-decoration:none;}
/*
	ARTICLE IMAGE - if exists, float right
*/
img.article-image {width:50%;float:right;margin-left:1rem;margin-bottom:1rem;}
@media screen and (max-width: 50rem) {
	img.article-image {float:none;width:100%;margin:0;}
	}


/* 
	INTRO containers
	Can be used once per screen.
	Main text in left column. Secondary content in right column.
	Used on Hub and Method screens
*/
div#intro-wrapper {
	display: grid;
	grid-template-columns: 2fr 1fr;
	column-gap: 2rem;
	grid-column-gap: 2rem;
	align-items: start;
	}
div#intro-wrapper h2, div#intro-wrapper h3, div#intro-wrapper h4, div#intro-wrapper p {
	width: inherit;
	}
.intro-secondary {font-family: sans-serif;font-size: 0.667rem;}
.intro-secondary h3 {line-height: 2.9rem;} /* aligns h4 with h2 in primary column */
.intro-secondary h4 {
	font-style: normal;
	}
.intro-secondary h4, .intro-secondary p {
	font-size: 0.725rem;
	}
.intro-secondary ul {margin-top: 0;} /* aligns with top of p.lefe */
.intro-secondary em.category {
	text-transform: uppercase;
	color: #666;
	font-style: normal;
}
.intro-secondary em.date {
	color: #666;
	font-style: normal;
}
/* If the screen size is 50rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 50rem) {
	div#intro-wrapper {
		grid-template-columns: 1fr;
		}
	}








/* 
	CALL TO ACTION container
	for links and file downloads
*/
.call-to-action {
	background-color: #fff;
	border: 1px solid #38A340;
	border-radius: 0.5em;
	font:1rem;
	margin-bottom: 1rem;
	padding: 0rem 1rem 0.5rem 1rem;
	
	display: grid;
	grid-template-columns: 2fr 1fr;
	column-gap: 1rem;
	grid-column-gap: 2rem;
	align-items: center;
	max-width: 30em;
	}
a.cta-link { /*for downloads, a is around the div.call-to-action */
	color: #38A340;
	text-decoration: none;
	transition: all 0.23s ease-in-out 0s;
	}
a.cta-link:hover {color: #409444;}
.call-to-action div img {display:block;margin:auto;margin-top:0.5rem} /*center download icon */
.call-to-action div{font-family:sans-serif;font-size:0.667rem;text-align: center;} /* center text */
.call-to-action div:first-child{font-family:serif;text-align: left;} /* left align text on left */
/* If the screen size is 50rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 50rem) {
	.call-to-action {
		grid-template-columns: 1fr;
	}
	}







/* .resource: Thumbnail left, title and content right */
div.resource {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	margin: 2rem 0;
	}
div.resource img {
	border: 1px solid #efefef;
	margin-right: 1rem;
	width: 8rem;
	}
/* div.resource div.info {
	margin-left: 1rem;
	} */
div.resource h3 {
	margin-top: 0;
	}
div.resource p {
	color: #666;
	font-family: sans-serif;
	}
/* If the screen size is 50rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 50rem) {
	div.resource {
		display: block;
		margin: 2rem 0;
		}
	div.resource div.info {
		margin-left: 0;
		}
	}





/*
	RESOURCE CARDS
	the little horizontally laid out cards in lists of articles
	they have the cool little color bar at the top
*/
div.resource-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	column-gap: 1rem;
	row-gap: 1rem;
	padding-top: 1rem;
}
div.resource-card {
	background-color: #fff;
	border-top-width: 0.25rem;
	color: #666;
	font-family: sans-serif;
	font-size: 0.667rem;
	padding: 0.5rem;
}





/* ****************************************
	SPECIAL LAYOUT STYLING 
	FOR MUTLI-COLUMN LAYOUTS
**************************************** */
/*
	TILES container - four across blocks
*/
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	column-gap: 1rem;
	grid-column-gap: 2rem;
	}
.tiles div.resource {
	display: block;
	}
.tiles div.resource img {
	border: 1px solid #efefef;
	margin: 0;
	width: 100%;
	}
.tiles div.resource h3 {
	margin: 0.5rem 0;
}
.tiles div.resource p {
	padding: 0.5em;
}
/*
	TWO-COLUMNS container - two across blocks
*/
div.two-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2rem;
	grid-column-gap: 4rem;
	align-items: start;
	}
.two-columns div.resource {
	display: inherit;
	}
/* If the screen size is 50rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 50rem) {
	div.two-columns {
		grid-template-columns: 1fr;
		}
	}





/*
	EMAIL SIGN UP FORM
*/
div#email-signup {
	margin-top: 5rem;
	text-align: center;
}
div#email-signup h3 {
	margin:auto;
	margin-top: 0;
}
div#email-signup input {
	border: 1px solid #38A340;
	box-sizing: border-box;
	border-radius: 0.125em;
	display: block;
	font-size: 1rem;
	padding: 0.25rem 0.5rem;
	margin: 0.5rem auto;
	width: 10rem;
}
div#email-signup input[type=submit] {
	background-color: #38A340;
	color:#fff;
	width: fit-content;
}
div#email-signup p {
	/* border-top: 1px solid #38A340; */
	font: 0.667rem sans-serif;
	margin: 1rem auto;
}




@media screen and (max-width: 50rem) {

	div#wrapper {
		margin-top: 0;
	}
}



/* If the screen size is 30rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 30rem) {
	
	/* SCALE: 0.667 / 1 / 1.5 / 2.25 / 3.375 / 5.063 */
	h1 {
		font-size: 2.25rem;
	}
	h1.hub {
		font-size: 2.25rem;
	}
	h2 {font-size: 1.5rem }
	h3 {font-size: 1rem }
	h4 {font-size: 1rem; font-style: italic; }
	
	p.lede {font-size: 1.25rem }
	p.caption, p.date {
		font-size: 0.667rem;
	}
	p.tagline {
		font-size: 1.25rem;
	}
	caption {
		font-size: 0.725rem;
	}
	p, h1, h2, h3, h4 {
		width: 100%;
	}
}