/* Last updated: 2023-05-11 */

/* 	Fonts (from Google):
    Special Elite: logo and text
	Oswald: headlines and details (tags etc) 
	Open Sans: excerpt & main text
	
	Core colors: 
	Yellow - #FFFF00 - RGB: 255, 255, 0 - HSL: 0.17, 1.00, 0.50
	SteelBlue - #4682B4; RGB: 70, 130, 180; HSL: 0.58, 0.44, 0.49
	Silver - #C0C0C0; RGB: 192, 192, 192 - HSL: 0.00, 0.00, 0.75
*/


/* 01 THE MAGIC NUMBER */

/* 	1 rem equals 12px when the grid is 1200px wide */
html { font-size: 90%; }	/* 75% of 16 = 12 - and 12 is the magic number */

/* 02 TYPE SETTINGS */

.heading-article { font-size: 3.9999rem; font-family:'Special Elite'; font-weight:600; line-height: 6rem;}
.heading-category { font-size: 2.6666rem; font-family:'Special Elite'; font-weight:600; line-height: 4rem;}

.subheading { font-size: 4rem; font-family:'Special Elite'; font-weight:600; line-height: 4rem; padding-top: 4rem; text-transform:none; }

.podlabel { font-size: 1.3333rem; font-family:'Oswald'; font-weight:400; text-transform:uppercase; padding-bottom: 0.8333rem;}
.podname { font-size: 1.3333rem; font-family:'Oswald'; font-weight:400; text-transform:uppercase; padding-bottom: 0.8333rem;}

.title-list { font-size: 1.3333rem; font-family:'Oswald'; font-weight:400; text-transform:uppercase; padding-top: 0.8333rem;}

.taglist { font-size: 1.3333rem; font-family:'Oswald'; font-weight:400; text-transform:uppercase; padding-top: 0.8333rem;}
.taglist-category { font-size: 1rem; font-family:'Oswald'; font-weight:400; text-transform:uppercase; padding-top: 0.6rem;}

.number-and-date { font-size: 1.3333rem; font-family:'Oswald'; font-weight:400; text-transform:uppercase; padding-top: 0.8333rem;}
.number-and-date-category { font-size: 1rem; font-family:'Oswald'; font-weight:400; text-transform:uppercase; padding-top: 0rem;}

.contributors { font-size: 1.3333rem; font-family:'Oswald'; font-weight:400; text-transform:uppercase; }

.contributor { font-size: 3.9999rem; font-family:'Special Elite'; font-weight:600; line-height: 6rem;}

.references { font-size: 1.3333rem; font-family:'Oswald'; font-weight:400; text-transform:uppercase; padding: 0 0 0  1.6666rem; }
 
.excerpt p { font-size: 1.3333rem; font-family:'Open Sans', cursive; line-height:2.25rem; text-align: justify; padding-top: 1.3333rem;}
.excerpt-home p { font-size: 1.3333rem; font-family:'Open Sans', cursive; line-height:2.25rem; text-align: justify;}
.excerpt-category p { font-size: 1rem; font-family:'Open Sans', cursive; line-height:1.6666rem; text-align: justify; padding-top: 0rem;}
.main-text p { font-size: 1.5rem; font-family:'Open Sans', cursive; line-height:2.7rem; text-align: justify;}

.highlight {color: #ff9900;}

/* 02.1 ANCHORS */
.heading-category a, .podname a,.taglist a, .title-list a, .taglist-category a,
.number-and-date a, .number-and-date-category a, 
.contributors a, .references a {color:SteelBlue; }

.heading-category a:visited, .podname a:visited, .title-list a:visited, .taglist a:visited, .taglist-category a:visited, 
.number-and-date a:visited, .number-and-date-category a:visited, 
.contributors a:visited, .references a:visited  {color:SteelBlue; }

.heading-category a:hover, .podname a:hover, .title-list a:hover, .taglist a:hover, .taglist-category a:hover,
.number-and-date a:hover, .number-and-date-category a:hover, 
.contributors a:hover, .references a:hover  {color:red; }

/* 03 THE MAIN FOUNDATIONS */

body {
	background-color:white;
}

#page {
	max-width:100%; /* the nav-bar & menu are full width */
	margin: -1.6rem auto 0 auto;
	background-color:transparent;
}

#content{
	margin: 0 auto;
	padding-top:2rem;
	max-width: 100rem;
	background-color:transparent;
}


#colophon {
	margin-top: 2rem;
}

img {
	width:100%;
	height:auto;
}

a {
	text-decoration: none;
	color: SteelBlue;
}

.divider {
	color:silver;
	padding: 0 1.6666rem;
}

.divider-wide {
	padding: 0;
}

hr {height:2px;border-width:0;color:silver;background-color:silver; margin-bottom: 2rem;}
hr.tighter {height:2px;border-width:0;color:silver;background-color:silver; margin-top: 0.5rem; margin-bottom: 0.5rem;}

/* 04 THE GRIDS */

/* 04.1 grid for home page */

.grid-container-home {
	display: grid;
	grid-template-columns: 8.333% 83% 8.333%;
	grid-template-areas:
	'margin-left	podlabel		margin-right'
	'margin-left	heading			margin-right'
	'margin-left	podname			margin-right'
	'margin-left	excerpt			margin-right'
	'margin-left	divider-one		margin-right'
	'margin-left	audio-insert	margin-right'
	'margin-left	contributors	margin-right'
	'margin-left	divider-two		margin-right'
	'margin-left	home-text		margin-right'
	;

	grid-gap: 0rem;
	background-color: transparent;
	padding: 0;
}

.home-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: minmax(200px, auto);
	grid-gap: 2rem% 1rem%;
}

.grid-item-home{
	text-align:left;
	padding: 0;
	margin:0;
}
.home-margin-left {grid-area:home-margin-left; padding:0;margin:0;}
.home-margin-right{grid-area:home-margin-right; padding:0;margin:0;}

.podlabel {grid-area: podlabel;}
.home-heading {grid-area: home-heading;}
.podname  {grid-area: podname;}
.home-text{grid-area: home-text; padding-top:0; margin-top:0;}


/* 04.2 grid for contributors page: the category cards */

.grid-container-cards {
	display: grid;
	grid-template-columns: 8.333% 83% 8.333%;
	grid-template-areas:
	'card-margin-left	card-container		card-margin-right';

	background-color: transparent;
	padding: 0;
}
.card-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	column-gap: 1.3333rem;
	row-gap: 0rem;
}

.card-margin-left {grid-area:card-margin-left;}
.card-margin-right{grid-area:card-margin-right;}
.card-container{grid-area:card-container;}



.card {
	display: flex;
	flex-direction:column;
	border-radius: 4px;
	position: relative;
	background-color:silver;
 	line-height: 1.3333rem;
	padding: 0 0.3333rem;
}

.thumbnail img {
	height:auto;
	width:15rem;
	object-fit: cover;
	padding-top:0.3333rem;
}
	
.card-content {
	font-family:'Open Sans Condensed';
	font-size: 1.3333rem;
	font-weight:300;
	line-height: 0rem;
	display: flex;
	flex-direction: column;
	flex: 0 1.0416rem 1.0416rem 1.0416rem;
	text-align:center;
	background-color: black;
	margin: 0 0.1111rem 0.3333rem 0;
}

.card-content a, .card-content a:visited{
	color:yellow;
}

.card-content a:hover{
	color:red;
}

/* 04.3 single contributor page */

.grid-container-single-contributor {
	display: grid;
	grid-template-columns: 8.33% 83% 8.33% ;
	grid-template-areas:
	'margin-left	main-image		margin-right'
	'margin-left	contributor			margin-right'
	'margin-left	main-text		margin-right'
	'margin-left	references		margin-right'
	;

	grid-gap: 0rem;
	background-color: transparent;
	padding: 2rem 0 0 0;
}

.grid-item{
	text-align:left;
}
.contributor-margin-left {grid-area:margin-left; padding:0; margin:0; }

.main-image{grid-area:main-image; padding: 0;}
.contributor {grid-area: contributor; font-size:4rem; padding:0;}
.main-text{grid-area: main-text; padding:0; }
.references{grid-area: references;}

.contributor-margin-right{grid-area:margin-right; padding:0; margin:0; }

.main-image > img{
	object-fit:cover;
	width:33.3332rem;
	display:block;
	margin: 0 auto;
	border-radius: 50%;
}

/* 04.4 podcasts category page */

.grid-container-podcasts {
	display: grid;
	grid-template-columns: 8.33% 12.66% 4.16% 50% 8.33%;
	grid-template-areas:
	'margin-left	title-list		blanko		podcasts	margin-right'
	;

	grid-gap: 0rem;
	background-color: transparent;
	padding: 2rem 0 0 0;
}

.grid-item{
	text-align:left;
}
.podcasts-margin-left {grid-area:margin-left; }
.title-list {grid-area: title-list;}
.blanko{grid-area: blanko;}
.podcasts{grid-area: podcasts;}
.podcasts-margin-right {grid-area:margin-right; }




/* 04.5 single podcast page */

.grid-container-single-podcast {
	display: grid;
	grid-template-columns: 8.333% 83% 8.333%;
	grid-template-areas:
	'margin-left	podname			margin-right'
	'margin-left	heading			margin-right'
	'margin-left	taglist			margin-right'
	'margin-left	excerpt			margin-right'
	'margin-left	divider-one		margin-right'
	'margin-left	number-and-date	margin-right'
	'margin-left	audio-insert	margin-right'
	'margin-left	contributors	margin-right'
	'margin-left	divider-two		margin-right'
	'margin-left	main-image		margin-right'
	'margin-left	main-text		margin-right'
	'margin-left	divider-three	margin-right'
	'margin-left	references		margin-right'
	;

	grid-gap: 0rem;
	background-color: transparent;
	padding: 2rem 0 0 0;
}

.grid-item{
	text-align:left;
}
.pod-margin-left {grid-area:margin-left; }

.podname {grid-area: podname;}
.heading {grid-area: heading; font-size:4rem; padding:0;}
.taglist{grid-area: taglist;}
.excerpt{grid-area: excerpt; padding:0;}

.divider-one {grid-area: divider-one; }

.number-and-date{grid-area:number-and-date; padding: 0.8333rem 2.0833rem 1.1666rem 2.0833rem;}
.audio-insert{grid-area:audio-insert; background: silver; padding: 1.6666rem; margin: 0 2.0833rem;}
.contributors{grid-area:contributors; padding: 1.1666rem 0 0.8333rem 2.0833rem;}

.divider-two {grid-area: divider-two; }

.main-text{grid-area: main-text; padding:0;}
.divider-three {grid-area: divider-three; }
.references{grid-area: references;}

.pod-margin-right{grid-area:margin-right;}


/* 04.5 single newsletter page */

.grid-container-single-newsletter {
	display: grid;
	grid-template-columns: 8.333% 83% 8.333%;
	grid-template-areas:
	'margin-left	newsletter-title	margin-right'
	'margin-left	newsletter-text		margin-right'
	'margin-left	divider-three		margin-right'
	;

	grid-gap: 0rem;
	background-color: transparent;
	padding: 2rem 0 0 0;
}

.newsletter-title {grid-area: newsletter-title;}
.newsletter-text {grid-area: newsletter-text;}

.highlight {color: #ff9900;}


/* 05 THE HEADER & MENU */

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.site-branding {
	background-color:#333;
	padding:0;
}

.site-branding-inner {
	padding:2.08rem 0 0 18.6666%;
	max-width:100%;
	margin: 0 auto;
}

.site-branding-inner .logotype {
	font-family:'Special Elite', cursive;
	font-size:6rem;
}

.site-branding-inner .logotype a, .site-branding-inner .logotype a:visited{
	color:yellow;
}

.site-branding-inner .strapline {
	font-family:'Open Sans Condensed';
	font-size:1.6rem;
	color:silver;
	padding-left:4.1666rem;
}

 /* Add a black background color to the top navigation */
#topnav-outer {  /* the nav-bar & menu are full width */
  background-color: silver;
  width:100%;
}

.topnav-maxwidth-box {
	max-width:100%;
	margin: 0 auto;
}

.topnav {
	overflow: hidden;
	padding: 0 auto;
	padding-left:16.66%;
}

  .hidden-menu-item {visibility:hidden;}
  
/* Style the links inside the navigation bar */
.topnav a {
	font-family:'Open Sans Condensed';
	font-size: 1.3333rem;
	font-weight:300;
	float: left;
	display: block;
	color: yellow;
	text-align: center;
	padding: 0.5rem 2.0833rem 0.75rem 2.0833rem;
	text-decoration: none;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #fff;
  color: silver;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav a.visited {
	color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 



/* 06 MEDIA QUERIES */

@media only screen and (max-width: 960px) {
	html { font-size: 75%; }	/* 75% of 16 = 12 - and 12 is the magic number */

	#content{
		margin: 0 auto;
		max-width:920px;
	}
	
	 .card-container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	  }
  .strapline {visibility:hidden}
  
  }

@media only screen and (max-width: 640px) {
	html { font-size: 60%; }	/* 75% of 16 = 12 - and 12 is the magic number */

	#page {width:100%; max-width: 640px}

	#content{
		margin: 0 auto;
		max-width:620px;
	}
 .card-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
  }
.site-branding-inner .strapline {
	font-family:'Open Sans Condensed';
	font-size:0.1rem;
	color:silver;
	padding:0;
}
  .strapline {visibility:hidden}
 
	.grid-container-podcasts {
		display: grid;
		grid-template-columns: 7% 20% 7% 58% 7%;
		grid-template-areas:
		'margin-left 	title-list		blanko		podcasts	margin-right'
		;

		grid-gap: 0rem;
		background-color: transparent;
		padding: 2rem 0 0 0;
	}
 
}


 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */


@media screen and (max-width: 600px) {

	#page {width:100%; max-width: 600px}

.site-branding-inner {
	padding:2.08rem 0 2.08rem 8.33%;
	max-width:100%;
	margin: 0 auto;
}
.site-branding-inner .logotype {
	font-family:'Special Elite', cursive;
	font-size:6rem;
}
	.topnav a {display: none;}
	.topnav a.icon {
    float: right;
    display: block;
	padding: 8px 16px
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}

  .topnav.responsive a.icon {
	font-size: 2.666rem;
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
	font-size: 2.666rem;
    float: none;
    display: block;
    text-align: left;
  }
	
} 

.circular {
	border-radius: 50%;	
}

/* this makes YouTube videos 100% and 16:9 aspect */

.media-container {
    position: relative;
    padding-bottom: 56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}

.media-container iframe, .media-container object, .media-container embed {
    position: absolute;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* EXPERIMENTS */

.podcast-cover {
	object-fit:cover;
	width:100%;
	height:auto;
	padding-bottom: 1.6666rem;
}