/* import theme-font.css for font types */
@import url('theme-fonts.css');

/* import theme-palette.css for color scheme */
@import url('theme-palette.css');

:root {
	--alignment: center;
	--footer-height: 35px;
}


/* Baseline Defaults */
* {box-sizing: border-box}
html {
	font-size: 18px;
	height: 100%;
}

body {
	font-family: var(--font-1), Arial, Helvetica, sans-serif;
	text-align: var(--alignment);
	min-height: 100%;
	position: relative;
	padding-bottom: var(--footer-height);
	background-color: var(--bg-color-1);
}

/* Headers */
h1 {
	font-family: var(--font-2), 'Arial Narrow Bold', sans-serif;
	font-size: 1.8em;
	font-weight: bold;
}
h2 {
	font-family: var(--font-2), 'Arial Narrow Bold', sans-serif;
	font-size: 1.4rem;
	font-weight: bold;
}
h3 {
	font-family: var(--font-3), 'Arial Narrow Bold', sans-serif;
	font-size: 1.8rem;
	margin: 5px;
	line-height: 1em;
}
h4 {
	font-family: var(--font-3), 'Arial Narrow Bold', sans-serif;
	font-size: 1.6rem;
	margin: 5px;
	line-height: 1em;
}
h5 {
	font-size: 1.2rem;
	font-weight: bold;
}
/* Common Element Defaults */
a {
	color: var(--link-color-1);
}
a:hover {
	color: var(--link-color-1-hover);
}
img {
	max-width: 100%;
	height: auto;
}
button {
	font-family: var(--font-3);
	font-size: 1.74em;
	background-color: var(--bg-color-2);
	padding: 3px 15px 5px;
	outline-offset: -6px;
	outline: 2px dashed white;
	margin-top: 8px;
}

/* ////////////////////////// */


/* Main Site Components */
header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	background-color: var(--bg-color-2);
	padding: .5% 1.5%;
}
header .logo-area {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	flex-wrap: wrap;
	font-family: var(--font-3);
	max-width: 306px;
}
header .logo-area .subtitle {
	font-size: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1em;
	margin-top: 5px;
	flex:2;
}
header .logo-area a>img {
	height: 80px;
	width: auto;
	min-width:100px;
}
header .logo-area a {
	color: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	flex:1;
	margin: auto;
}

main {
	margin: 0 auto;
	width: 100%;
}

nav#site-menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-family: var(--font-3);
	gap:5px;
	font-size: 1.5rem;
}
nav#site-menu ul a li {
	background-color: black;
	color: white;
	padding: 2px 10px 5px;
}
nav#site-menu ul a:nth-child(1n):hover li {
	color: var(--pink);
}
nav#site-menu ul a:nth-child(2n):hover li {
	color: var(--orange);
}
nav#site-menu ul a:nth-child(3n):hover li {
	color: var(--yellow);
}
nav#site-menu ul a:nth-child(4n):hover li {
	color: var(--blue);
}
nav#site-menu ul a:nth-child(5n):hover li {
	color: var(--puce);
}
.automenu-submenu {
    background: rgba(255, 255, 255, .95);
    padding: 2px 5px;
    -webkit-box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.55);
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

footer {
	font-size: .8em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-height);
	display: flex;
    justify-content: center;
    align-items: center;
}

/* sections */

.sect-text {
	max-width: 980px;
	padding: 10px 3%;
	margin: auto;
}
.sect-text:empty {
	display:none;
}

.episodes-info {
	font-size: .8em;
}


/* items */

.item {
	max-width: 980px;
	padding: 15px 3%;
	margin: auto;
}

.item h3 {
	font-family: var(--font-3);
}

.item-text {
	text-align: left;
}

.item-tags {
	width: 100%;
	margin: 8px auto 4px;
	padding: 4px 8px;
	background-color: #ebdfd5;
	border-radius: 3px;
	text-align: left;
}
.item-tags > ul.item-tag-list {
	display: inline;
}
.item-tags:empty {
	display: none;
}

/* #sect_5 = 'Episodes' */

.item {
	background-color: var(--bg-color-3);
	margin: 10px auto 15px;
}

#sect_5 .item-embed-wrapper {
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-position: center center;
}

.item .cast-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}

.item:nth-child(1n) {
	box-shadow: 5px 5px var(--pink);
}
.item:nth-child(2n) {
	box-shadow: 5px 5px var(--orange);
}
.item:nth-child(3n) {
	box-shadow: 5px 5px var(--yellow);
}
.item:nth-child(4n) {
	box-shadow: 5px 5px var(--blue);
}

.cast-wrapper img {
	max-width: unset;
}

.cast-wrapper .item-text,
.cast-wrapper h3 {
	text-align: left;
	padding-left: 15px;
	margin:0;
}

/* #sect_10 = 'Newest Episodes' */

#sect_10 h2.sect-title {
	margin:0;
	background-color: var(--puce);
	padding: 8px 4% 12px;
	font-size: 2em;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	background-image: url('images/halftone_pink-fade.png');
	background-position: right;
	background-repeat: no-repeat;
}

#sect_10 .item {
	min-height:225px;
}

.item-date {
	opacity: .6;
	font-size: .8em;
}

/* home page */

main#page_1 .page-sects {
	margin: auto;
	display: grid;
	grid-template-areas:
	'a b';
	grid-template-columns: 33.3% 1fr;
	text-align: left;
}
.page-sects {
	width: 100%;
	max-width: 980px;
	margin: auto;
}
.page.home .page-sects {
	max-width: unset;
}

#sect_10 {
	grid-area: b;
}

#sect_11 {
	grid-area: a;
}

#sect_11 .headline > h2 {
	margin:0;
	color: #ffffff;
	background-color: #894dbc;
	padding: 0 3% 4px;
	font-size: 1.6em;
}

.scroll-wrapper {
	background: #d7d7d7;
}.scroll-wrapper .item-title {
	font-size: 1.5em;
}.scroll-wrapper .item {
	background: #ececec;
	box-shadow: unset !important;
}

.home-banner {
	grid-area: a;
    height: 380px;
    background-size: 65vw;
    background-position-x: right;
    background-position-y: 44%;
	background-repeat: no-repeat;
	background-color: #000000;
}

.home-banner-inner {
	display: flex;
	width:100%;
	height:100%;
}

.home-banner-left {
	display: flex;
	width: 100%;
}

.black-bg {
	color: var(--bg-color-1);
	background-color: #000000;
}
.home-banner-inner .black-bg {
	height: 100%;
	width: 35vw;
	min-width: 320px;
}
.black-bg .sect-text {
	padding: 2%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
}

.home-banner-left .black-bg-fade {
	width: 35%;
	height: 100%;
	background-image: linear-gradient(90deg, black 5%, transparent 80%);
}
.intro {
	flex:1;
}

.space-btwn {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.back-link {
	margin-top: 20px;
}
.sect-form > .contact-form {
	padding: 12px 2%;
    border-radius: 14px;
    border: 3px dashed var(--link-color-1-hover);
}

figure.item-image-wrapper {
    float:left;
    padding-right:2em;
}

div.episode-tile {
    padding:1em;
    background-color: #faeee4;
    border-radius:10px;
    text-align:center;
    clear:left;
}

/* socials */

.cms-socials {
	font-size: 40px;
}

ul.cms-socials-list {
	flex-direction: column;
	gap: unset;
}

#social_rss {
	color: goldenrod;
}

#social_1 { /*spotify*/
	color: #47e633;
}

#social_2 { /*instagram*/
	color: #ed6eed;
}

#social_3 { /*twitter/'x'*/
	color: #ffffff;
}

#social_5 { /*tumblr*/
	color: #604ad2;
}

#social_6 { /*discord*/
	color: #66a1ee;
}

.fa-bluesky {
	background-image: url(/assets/uploads/socials/icon_bsky.png);
	background-repeat:no-repeat;
    background-position:bottom;
	width:50px;
	height:50px;
}

.fa-kofi {
	background-image: url(/assets/uploads/socials/kofi_logo.png);
	background-repeat:no-repeat;
    background-position:5px center;
	width:50px;
	height:50px;
}

@media screen and (min-width: 651px) {
	.scroll-wrapper {
		display: flex;
		flex-flow: column;
		height:95%;
		position: relative;
		margin-bottom: 20px;
	}
	.scroll-wrapper > .scroll {
		overflow-y: scroll;
		flex: 1 1 auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
  }

@media screen and (max-width: 650px) {
	main#page_1 .page-sects {
		grid-template-areas: 'b'
							 'a';
		grid-template-columns: 1fr;
	}
	.header {
		align-items: center;
	} header .logo-area {
		flex-direction: column;
		align-self: center;
	}
	.home-banner {
		height: 280px;
		background-size: 100%;
		background-position-x: 0;
		background-position-y: -17vw;
	}
	.home-banner-inner .black-bg {
		height: fit-content;
		width:100%;
		min-width: unset;
		align-self: flex-end;
	}.black-bg .sect-text {
		flex-direction: column-reverse;
	}.black-bg .item-text {
		height: auto;
	}
	.home-banner-left .black-bg-fade {
		display: none;
	}
	.cms-socials {
		width: 100%;
	}
	ul.cms-socials-list {
		flex-direction: row;
		width: 100%;
		justify-content: space-around;
		gap: 10px;
	}
	.intro {
		margin: 5px auto 8px;
	}
  }