/*
Theme Name: Open Investigation
Author: Justin Von Strasburg
*/

/*
Colors
#ffffff - white
#000000 - black
#f8c840 - yellow
#525152 - gray
*/

*,
::before,
::after {
	box-sizing: border-box;
}

html {
	background-color: #ffffff;
	font-size: 120%;
	font-size: clamp(105%, 1.15vw, 605%);
}

body {
	font-family: "Montserrat", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	line-height: 1.6;
	color: #000000;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background-image: url(img/dots-yellow-on-white.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 35%;
}

::selection {
	background: #000000;
	text-shadow: none;
	color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	line-height: 1.2;
	color: #000000;
}

h1 {
	font-size: 2.5em;
	margin: 0 0 1em 0;	
}

h2 {
	font-size: .85em;
	margin: 0 0 1.5em 0;	
	text-align: center;
	font-weight: 600;
	letter-spacing: .05em;
}

h2 span {
	color: #f8c840;
	margin: 0 .25em;
}

h3 {
	font-size: 1.15em;
	margin: 0 0 .5em 0;	
}

h4 {
	font-size: 1.25em;
	margin: 0 0 .5em 0;	
}

h5, h6 {
	font-size: 1.15em;
	margin: 0 0 .5em 0;	
}

p {
	margin: 0 0 1.5em 0;
}

p.lead {
	font-size: 1.25em;
}

ul, ol {
	margin: 0 0 1.5em 1em;
	padding: 0 0 0 0;
}

ul li,
ol li {
	margin: 0 0 .5em 0;
}

address {
	font-style: normal;
}

a,
a:visited {
	color: #000000;
	text-decoration: none;
	font-weight: 600;
	border-bottom: .15em solid #000000;
}

a:active,
a:hover {
	color: #f8c840;
	outline: 0;
	text-decoration: none;
	border-bottom: .15em solid #f8c840;
}

strong {
	font-weight: 700;
}

figure {
	margin: 0;
	padding: 0;
}

figcaption {
	font-size: .85em;
	text-transform: uppercase;
	font-style:normal;
	letter-spacing: .05em;
}

blockquote {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 1.5em;
	font-family: Georgia, 'Times New Roman', Times, serif;
}

blockquote p {
	margin: 0 0 0 0;
}

details {
	border: .05em solid #000000;
	border: .10em solid #f8c840;
	border-radius: 4px;
	padding: 0.5em 0.5em 0;
	padding: 1em 1em .5em 1em;
	margin: 0 0 .5em 0;
}

summary {
	font-weight: 600;
	margin: -0.5em -0.5em 0;
	padding: 0.5em;
	cursor: pointer;
}

details[open] {
	padding: 1em;
}

details[open] summary {
	border-bottom: .05em solid #000000;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

[id] {
	scroll-margin-top: 1.5em;
}

.button,
.button:visited {
	display: inline-block;
	background: #000000;
	padding: .75em 1.25em;
	margin: 0 0 1em 0;
	text-transform: uppercase;
	font-size: .80em;
	color: #f8c840;
	border: none;
}

.button:hover {
	background: #000000;
	padding: .75em 1.25em;
	color: #ffffff;
	border: none;
}

@media (min-width: 60em) {

	.button,
	.button:visited {
		margin: 0 .5em 1em .5em;
	}
	
}

img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
	margin: 0;
}

.masthead {
	margin: 0 0 0 0;
	padding: 0 0 1.5em 0;
	text-align: center;
	display: flex;
	flex-direction: column;
}

.masthead__logo h1 {
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

.masthead__logo img {
	max-width: 8em;
	margin: 0 auto;
}

.masthead__links {
	background-color: #525152;
	margin: 0 0 1.5em 0;
	order: -1;
}

.masthead__links__social {
	display: grid;
	grid-column-gap: 12%;
	grid-template-columns: repeat(4, 1fr);
	width: 12em;
	margin: 0 auto;
	padding: .5em 0;
}

.masthead__links a {
	color: #ffffff;
	text-transform: uppercase;
	border-bottom: .15em solid transparent;
}

.masthead__links a:hover {
	color: #f8c840;
}

.masthead__links__andy {
	font-size: .85em;
	display: none;
}

.masthead__nav {
	margin: 1em 0 0 0;
}

.masthead__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.masthead__nav ul li {
	display: inline-block;
	margin: 0 1em 1em 1em;
	padding: 0 0 0 0;
}

.masthead__nav ul li a,
.masthead__nav ul li a:visited {
	color: #000000;
	text-decoration: none;
	font-size: .85em;
	font-weight: 800;
	text-transform: uppercase;
	border-bottom: .45em solid #000000;
}

.masthead__nav ul li a:active,
.masthead__nav ul li a:hover {
	color: #f8c840;
	outline: 0;
	text-decoration: none;
	border-bottom: .45em solid #f8c840;
}

@media (min-width: 60em) {

	.masthead {
		padding: 6em 0 6em 0;
		text-align: left;
		display: block;
	}

	.masthead__logoandnav {
		position: absolute;
		top: 3.5em;
		left: 19em;
		left: 22%;
		left: 11%;
		display: flex;
		flex-direction: row;
	}

	.masthead__nav {
		margin: 6.90em 0 0 0;
	}

	.masthead__nav ul li {
		margin: 0 0 0 3em;
	}

	.masthead__links {
		margin: 0 0 1.5em 0;
		padding: 0 1em 0 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.masthead__links__social {
		width: 13em;
		margin: 0 1em 0 0;
		padding: .5em 1em;
		border-left: 1px solid #ffffff;
		border-right: 1px solid #ffffff;
	}

	.masthead__links__andy {
		display: block;
	}

}

.podcast {
	padding: 0 0 3em 0;
}

.welcome__intro {
	background-color: #f8c840;
	padding: 2em 0 1em 0;
	text-align: center;
}

.welcome__intro__pp img {
	width: 2em;
	margin: 0 auto;
}

.welcome__intro__pp p {
	text-transform: uppercase;
	font-weight: 700;
	font-size: .85em;
}

.welcome__intro__logo {
	padding: 0 2em 0 0;
}

.welcome__intro__logo h1 {
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

.welcome__intro__tagline {
	padding: 0 1em;
}

.welcome__intro__tagline p {
	font-size: 1.15em;
}

.welcome__intro__tagline a {
	font-size: 1.15em;
	font-weight: 800;
}

.welcome__intro__tagline a:active,
.welcome__intro__tagline a:hover {
	color: #000000;
	outline: 0;
	text-decoration: none;
	border-bottom: .15em solid transparent;
}

.welcome__andy {
	background-color: #f8c840;
	padding: 0 0 6em 0;
}

.welcome__andy img {
	width: 14em;
	margin: 0 auto;
}

.welcome__featured {
	padding: 0 3em;
	margin: -2em 0 0 0;
}

.synopsis {
	padding: 5em 1em 0 1em;
}

.synopsis__callout {
	text-align: center;
	margin: 0 0 3em 0;
}

.synopsis__melanie {
	padding: 2em 0 0 0;
}

.synopsis__melanie img {
	width: 10em;
	margin: 0 auto 2em auto;
}

@media (min-width: 60em) {

	.podcast {
		padding: 0 0 9em 0;
		background: url(img/paper.jpg);
		background-repeat: no-repeat;
		background-position: bottom right;
	}

	.section-welcome {
		display: grid;
		grid-column-gap: 2%;
		grid-template-columns: 62.5% 35.5%;
		padding: 0 3em 0 0;
	}

	.welcome {
		padding: 0 10% 0 0;
		position: relative;
	}

	.welcome__intro {
		padding: 2em 0 6em 0;
		clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);

		background-image: url(img/dots-orange-on-yellow-1.jpg);
		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: 60%;
	}

	.welcome__intro__logo {
		padding: 0 27% 0 9%;
	}

	.welcome__andy {
		background-color: transparent;
		padding: 0 0 6em 0;
		position: absolute;
		top: 11em;
		right: -.65em;
		width: 25%;
		z-index: 10;
	}
	
	.welcome__andy img {
		width: 100%;
	}

	.welcome__featured {
		width: 60%;
		margin: -2em auto 0 auto;
	}

	.synopsis {
		padding: 5em 0 0 0;
	}

}

.episode h3 {
	background-color: #ffffff;
	position: relative;
	padding: 1.15em 1em .5em 1em; 
	margin: 0 0 0 0;
}

.episode h3 a {
	border-bottom: .15em solid transparent;
}

.episode h3 span {
	background-color: #000000;
	position: absolute;
	top: -1em;
	left: 0;
	padding: .5em 1.5em;
	color: #f8c840;
	font-size: .65em;
}

.episode img {
	margin: 0 0 .75em 0;
}

.episode div p {
	font-size: .85em;
	margin: 0 0 .75em 0;
}

.episode div a {
	font-size: .85em;
}

.section-subscribe-and-episodes {
	background-color: #f8c840;
	background-image: url(img/dots-orange-on-yellow-2.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 45%;
}

.subscribe {
	margin: 0 0 0 0;
	padding: 3em 2em 8em 2em;
	text-align: center;
}

.subscribe__links {
	display: grid;
	grid-column-gap: 10%;
	grid-template-columns: repeat(4, 1fr);
	max-width: 15em;
	margin: 0 auto 1.5em auto;
}

.subscribe__links a {
	border-bottom: .15em solid transparent;
}

.episodes {
	margin: 0 0 0 0;
	padding: 3em 1em;
}

@media (min-width: 60em) {

	.episodes {
		padding: 3em 3em;
	}
	
	.episodes__more {
		text-align: center;
	}

}

.episodes h2 {
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

.episodes__list {
	list-style: none;
	margin: -5em 0 0 0;
	padding: 0 0 0 0;
}

.episodes__list__item {
	margin: 0 0 3em 0;
}

@media (min-width: 60em) {

	.episodes__list {
		display: grid;
		grid-column-gap: 4%;
		grid-template-columns: repeat(4, 1fr);
	}

}

.page-episode__banner {
	margin: 0 0 3em 0;
}

.page-episode__header span {
	display: block;
}

.page-episode__header p {
	margin: -2em 0 0 0;
}

.page-episode__header,
.page-episode__player,
.page-episode__content,
.page-episode__links,
.page-episode__supportingcontent,
.page__content {
	padding: 0 1em 0 1em;
	margin: 0 auto 3em auto;
}

@media (min-width: 60em) {

	.page-episode__banner {
		width: 75%;
		width: 78%;
		margin: 0 auto 3em auto;
	}

	.page-episode__header,
	.page-episode__player,
	.page-episode__content,
	.page-episode__links,
	.page-episode__supportingcontent,
	.page__content {
		width: 56%;
	}
	
	.page__content h1 {
		text-align: center;
	}

}

.page-episodes__header {
	border-bottom: 1px solid #000000;
	margin: 0 1em;
	padding: 0 0 3em 0;
}

.page-episodes__header .subscribe {
	padding-bottom: 3em;
}

.page-episodes__season {
	margin: 3em 0 0 0;
}

.page-episodes__season__header {
	margin: 0 0 4em 0;
	padding: 0 1em;
}

.page-episodes__season__content {
	background-color: #f8c840;
	background-image: url(img/dots-orange-on-yellow-2.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 45%;
	padding: 3em 1em 3em 1em;
}

@media (min-width: 60em) {
	
	.page-episodes__header {
		text-align: center;
		margin: 0 auto 0 auto;
		width: 77%;
	}
	
	.page-episodes__season__header {
		text-align: center;
		margin: 0 auto 6em auto;
		width: 77%;
	}
	
	.page-episodes__season__content {
		padding: 3em 3em 0 3em;
	}

}

.section-support {
	padding: 3em 1em;
}

@media (min-width: 60em) {

	.section-support {
		padding: 3em 3em;
		text-align: center;
	}

	.support {
		margin: 0 auto;
		width: 62.5%;
		font-size: 1.15em;
	}

}

.footer {
	background-color: #525152;
	color: #ffffff;
	padding: 2em 1em 3em 1em;
}

.footer p {
	margin: 0 0 0 0;	
}

@media (min-width: 60em) {

	.footer {
		padding: 2em 3em 3em 3em;
		display: grid;
		grid-column-gap: 3%;
		grid-template-columns: 75% 22%;
	}

}

.footer a,
.footer a:visited {
	color: #f8c840;
	border-bottom: .15em solid #f8c840;
}

.footer a:active,
.footer a:hover {
	color: #000000;
	border-bottom: .15em solid #000000;
}