/*
Theme Name: etp
Theme URI: https://eatthispodcast.com
Author: Jeremyt Cherfas
Author URI: https://jeremycherfas.net
Description: IndieWeb theme from scratch
Text Domain: etp
Version: 1.1.8
License: GNU General Public License v2 or later
*/

:root {
  --ratio: 1.5; /* basis of the modular scale */
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));

  --measure: 75ch;
}

/* All fonts using system fonts */
body {
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
font-weight: normal;
}


/* Universal Block */
* {
    max-inline-size: var(--measure)
}

html,
body,
div,
header,
nav,
main,
footer {
  max-inline-size: none;
}

h1,
h2, h3, h4,
.brand,
.menuitem,
.date {
    font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-weight: normal;
}

p {
	line-height: 1.4;
	font-size: var(--s0);
}  

a {
	color: #981e1c;
}
body {
	background-color: ivory;
/* 	font-family: charter; */
}

figcaption {
	font-style: italic;
	text-align: center;
}

/* Individual elements */
.brand {
/*
 padding-inline-start: var(--s1);
 padding-inline-end: var(--s2);
 
 font-family: cooperhewitt;
 font-weight: 200;
 */
}

.date {
	white-space: nowrap;
}

.navbar-brand {
 font-weight: 500;
 font-size: var(--s1);
}

.menuitem {
	font-size: var(--s1);
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menuitem:hover,
.brand:hover {
	background-color: #f4f498;
}

.menuitem a,
.brand a {
	text-decoration: none;
}
/* Centers the content, but no intrinsic centering */
.big-box {
	background-color: ivory;
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: 112ch; /* Good spacing at max width */
    padding-inline-start: var(--s1);
    padding-inline-end: var(--s1);
}

.top-box {
/* 	background-color: pink; */
	padding-top: var(--s1);
    padding-bottom: var(--s1);
    align-items: initial;
}

.main-box > :last-child {
	background-color: #f1fffc;
	border-left: 1px solid;
	border-bottom: 1px solid;  /* To restore line removed from bottom-box */
	margin-inline-start: calc(-1 * var(--s0)); /* Expands box to edge */
	margin-inline-end: calc(-1 * var(--s1));
	padding-inline-start: var(--s0); /* Aligns content with above */
	padding-inline-end: var(--s1);
	}

.main-content {
	padding-right: var(--s-2);
}

.sidebar * {
/*     font-family: cooperhewitt; */
}

.bottom-box {
/* 	border-top: 1px solid; removed here to prevent doubling up*/
	background-color: #f1fffc;
	margin-inline-start: calc(-1 * var(--s1)); /* Expands box to edge */
	margin-inline-end: calc(-1 * var(--s1));
	padding-inline-start: var(--s1); /* Aligns content with above */
	padding-inline-end: var(--s1);

}

/* Switcher layout for Menu top-box */
.top-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: stretch;
}

.top-box > * {
  flex-grow: 1;
  flex-basis: calc(( 30rem - 100%) * 999);
}

.top-box > :nth-last-child(n+ 6),
.top-box > :nth-last-child(n+ 6) ~ * {
  flex-basis: 100%;
}

/* Gives 1st element bloginfo additional space */
.top-box > :nth-child(1) {
	flex-grow:5;
}

/* Switcher layout for title and date */
.title-etc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: end;
  min-height: var(--s3);
}

.title-etc > * {
  flex-grow: 1;
  flex-basis: calc(( 30rem - 100%) * 999);
}

.title-etc > :nth-last-child(n+ 3),
.title-etc > :nth-last-child(n+ 3) ~ * {
  flex-basis: 100%;
}

.title-etc > :nth-child(1) {
    flex-grow: 4;
}

/* Podcast player */
[id^="powerpress_player_"] { /* Operator targets starts with */
	margin-top: var(--s0);
	margin-inline-end: var(--s1);
}

p.powerpress_links{
	margin-top: var(--s-4);
	margin-bottom: var(--s0);
}


/* Switcher layout for meta */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: center;
  height: var(--s3);
  border-bottom: 1px solid; /* Defines end of Article */
  margin-inline-start: calc(-1 * var(--s1));
  padding-inline-start: var(--s1);
  margin-inline-end: calc(-1 * var(--s2));
  padding-inline-end: var(--s3);
}

.meta > * {
  flex-grow: 1;
  flex-basis: calc(( 30rem - 100%) * 999);
}

.meta > :nth-last-child(n+ 3),
.meta > :nth-last-child(n+ 3) ~ * {
  flex-basis: 100%;
}

/*Switcher layout for Collection elements */
.collection {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
  margin-bottom: var(--s0);
}

.collection > * {
  flex-grow: 1;
  flex-basis: calc(( 25rem - 100%) * 999);
}

.collection > :nth-last-child(n+ NaN),
.collection > :nth-last-child(n+ NaN) ~ * {
  flex-basis: 100%;
}

.copy h2 {
	margin-top: 0;
}

/* Sidebar layout for main-box */
.main-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  border-top: 1px solid;
  border-bottom: 1px solid;
  	margin-inline-start: calc(-1 * var(--s1)); /* Expands box to edge */
	margin-inline-end: calc(-1 * var(--s1));
	padding-inline-start: var(--s1); /* Aligns content with above */
	padding-inline-end: var(--s1);
}

.main-box > :last-child {
  flex-basis: 20rem; 
  flex-grow: 1;
}

.main-box > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

/* Switcher layout for Footer bottom-box */
.bottom-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.bottom-box > * {
  flex-grow: 1;
  flex-basis: calc(( 40rem - 100%) * 999);
    margin-bottom: var(--s1);
}

/* Image placement */

.alignleft,
img.alignleft {
	float: left;
	margin-inline-end: var(--s0);
	margin-bottom: var(--s-1);
}

.alignright,
img.alignright {
	float: right;
	margin-inline-start: var(--s0);
	margin-bottom: var(--s-1);
}

/* Spaces recent episodes and adds line */
.recents {
	margin-top: var(--s0);
	border-top: 1px solid;
}

/* Space and line for About ETP, get in touch */
.widget_text > h2 {
	border-top: 1px solid;
	margin-top: var(--s1);
	padding-top: var(--s1);
}

.widget_text {
    border-bottom: 1px solid;
    padding-bottom: var(--s1);
}

/* Socials */
.socials {
	display: flex;
	gap: var(--s0);
	justify-content: center;
	margin-top: var(--s0);
	padding-bottom: var(--s0);
	border-bottom: 1px solid;
}

/* Pagination */
.pagination {
	display: flex;
	gap: var(--s0);
	justify-content: center;
	margin-top: var(--s0);
	padding-bottom: var(--s0);
	border-bottom: 1px solid;
}

.pagination, .archive-tags * {
	font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-weight: normal;
    font-size: var(--s1);
} 

.archive-tags {
/*     margin-top: var(--s1); */
    padding-bottom: var(--s0);
/*     padding-top: var(--s1); */
/*     border-top: 1px solid; */
/*     border-bottom: 1px solid; */
    
}

.archive-tags a {
	text-decoration: none;
}

.archive-tags a:hover {
	background-color: #f4f498; /* Same as top menu */
}

/* Archive page */
.page-indicator {
	text-align: center;
}

/* Custom Comments */

.comments-area {
  border-bottom: 1px solid; /* Defines end of Comment area */
  margin-inline-start: calc(-1 * var(--s1));
  padding-inline-start: var(--s1);
  margin-inline-end: calc(-1 * var(--s2));
  padding-inline-end: var(--s3);}

.comments-area input, textarea {
	width: 100%;
}

.comment-list {
	padding: 0;
}

.custom-comment-container {
    display: flex;
    gap: var(--s-1);
    padding: var(--s-2);
    border: 1px solid #ddd;
    margin-bottom: var(--s-2);
/*     border-radius: 8px; */
/*     background-color: #f1fffc; */
}

#comments > ul {
	list-style-type: none;
}
/* 
.custom-comment-avatar img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}
 */

.custom-comment-content {
    flex-grow: 1;
}

/* 
.custom-comment-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}
 */

/* 
.custom-comment-author {
    font-weight: bold;
    color: #333;
}
 */

/* 
.custom-comment-date {
    margin-left: 10px;
    color: #999;
}
 */

/* 
.custom-comment-text {
    font-size: 1em;
    line-height: 1.6;
}
 */

.custom-comment-awaiting-moderation {
    color: #e74c3c;
    font-style: italic;
}

/* 
.custom-comment-reply a {
    text-decoration: none;
    color: #0073aa;
}
 */

/* 
.custom-comment-reply a:hover {
    text-decoration: underline;
}
 */

.like .custom-comment-reply {
    display: none;
}

.mention .custom-comment-reply {
    display: none;
}

.entry-title a {
	text-decoration: none;	
}

.entry-title a:hover {
	background-color: #f4f498; /* Same as top menu */
}