Theme Name: Carmack Child
Theme URI: https://wordpress.com/theme/carmack/
Description: Updated for tempestmag.org
Version: 1.0
Author: Geoff Bailey
Author URI: https://madebygeoff.com/
Template: carmack

/*------------------------- 
REFERENCE
Main color dark (grey homepage background): #c0cccb
Main color light (grey article background): #f1f4f3
Link color on light (dark blue): #09818d
Link color on dark (light blue): #4dabb4
Highlight color (yellow): #ffee00
Low contrast black: #333

--------------------------*/


/*------------------------- 
OVERALL STYLES 
--------------------------*/

body, html {
	font-size: 16px;
	font-size: 1rem;
	font-family: "Open sans", Arial, Helvetica, sans-serif;
	font-weight: 400;
	letter-spacing: .5px;
	background: #c0cccb;
}	

body.page-template {
	font-size: 16px;
	font-size: 1rem;
	font-family: "Open sans", Arial, Helvetica, sans-serif;
	font-weight: 400;
	letter-spacing: .5px;
	background: #c0cccb;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Raleway", sans-serif;
	font-weight: 200;
	color: #333;
	letter-spacing: .025rem;
}

a {
	color: #09818d;
	text-decoration: none;
}

a.button, button, input[type=submit] {
	background-color: #4dabb4;
	color: #f5faff;
}

a.button:focus,
a.button:hover,
button:focus,
button:hover,
input[type=submit]:focus,
input[type=submit]:hover {
	background: #000000;
	color: #4dabb4;
	text-decoration: none;
}

.the-content .button {
	background: #4dabb4;
	color: #f5faff;
}

.the-content .button:hover, .the-content .button:focus {
	background: #000000;
	color: #4dabb4;
	text-decoration: none;
}

.the-content .wp-block-button__link, .the-content .wp-block-button__link, .the-content .wp-block-button__link:not(.has-background) {
	background: #4dabb4;
	color: #f5faff;
}

.the-content .wp-block-button__link:focus,
.the-content .wp-block-button__link:hover {
	background: #000000;
	color: #4dabb4;
	text-decoration: none;
}

a.button-link {
	background: #09818d;
	color: #f5faff;
	width: 600px;
	padding: 1rem 3rem;
	text-decoration: none;
}

a.button-link:focus,
a.button-link:hover
{
	background: #4dabb4;
}

.the-content .wp-block-quote, .the-content .wp-block-quote.is-large, .the-content blockquote {
	padding: 0;
	margin: 1.5rem 1.5rem 1.5rem 3rem;
}

blockquote {
	font-family: "Open sans", sans-serif;
	font-style: italic;
	font-size: .9rem;
	line-height: 1.75;
	border: none;
	background: rgba(0,0,0,0.00);
	margin: 0;
}

.pullquote {
	font-family: "Raleway", sans-serif;
	font-style: italic;
	font-size: 1.5rem;
	border: none;
	border-top: 6px solid #ffee00;
	border-bottom: 2px solid #ffee00;
	padding: 3rem 3rem;
	position: relative;
	background: rgba(0,0,0,0.00);
	margin: 3rem 0;
	overflow: hidden;
}

ul.article {
  list-style: none;
  margin-left: 2rem;
  line-height: 1.5rem;
}

ul.article li {
	margin-bottom: 1rem;
}

ul.article li::before {
  content: "\25AA";
  color: #333; /* Change the color */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.2em; /* Also needed for space (tweak if needed) */
  margin-left: -1.2em; /* Also needed for space (tweak if needed) */
}

hr.half {
	border: none;
	border-bottom: 3px solid #ffee00;
	margin: 5rem auto;
}

hr.qtr {
	width: 25%;
	border: none;
	border-bottom: 3px solid #ffee00;
	margin: 5rem 0;
	ali
}

.wp-caption {
	margin: 2rem 0 2rem 0;
}

.wp-caption .wp-caption-text {
	text-align: left;
}

embed, iframe, object {
    max-width: 50%;
    height: 400px;
    float: left;
    margin-top: 1rem;
    margin-right: 3rem;
    border-left: solid 20px #ffee00;
 }

div#playht-iframe-wrapper {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	float: none;
	padding: 0;
}

iframe.playht-iframe-player {
	max-width: 100%;
	max-height: 90px;
	width: 100%;
	height: 90px;
	border-right: none;
	border-top: none;
	border-bottom: none;
	margin-top: -10rem;
	margin-bottom: 3rem;
}

@media only screen and (max-width: 480px) {
	div#playht-iframe-wrapper {width: 100%;}
	iframe.playht-iframe-player {margin-top: -3rem;}
	.wshare-and-subscribe-container {display: none;}
}

/*
 iframe.playht-iframe-player {
	max-height: 90px;
	width: 100%;
	height: 90px;
	border-right: none;
	border-top: none;
	border-bottom: none;
}

div#playht-iframe-wrapper {
	display: flex; 
	max-height: 90px; 
	justify-content: center;
	margin-top: 2rem;
	margin-bottom: -1rem;
}


@media only screen and (max-width: 480px) {
	.wshare-and-subscribe-container {display: none;}
}
*/
@media only screen and (max-width: 480px) {
	body, html { font-size: 16px; font-size: 1rem; }
	.the-content .wp-block-quote, .the-content .wp-block-quote.is-large, .the-content blockquote { margin: 1.5rem 1.5rem 1.5rem 1.5rem; }
	.pullquote { font-size: 1.1rem; font-weight: 400; padding: 1rem 1rem;}
	embed, iframe, object {max-width: 100%; float: none; margin-right: 0;
 }
}

/*------------------------- 
FORM STYLES 
--------------------------*/

.contact-form-embedded .mce-grp-fname {
	width: 49%;
	float: left;
	margin-right: 2%;
}

.contact-form-embedded .mce-grp-lname {
	width: 49%;
	float:left;
}

.contact-form-embedded .mce-grp-city {
	width: 79%;
	float:left;
	margin-right: 2%;
}

.contact-form-embedded .mce-grp-state {
	width: 19%;
	float:left;
}

span.required {
    float: right;
    color: red;
    text-transform: none;
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.75;
   }

button[type=submit] {
	width: 25%;
}

.contact-form-footer {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5rem;
	max-width: 700px;
	text-align: center;
}

.contact-form-footer .mce-grp-fname {
	width: 49%;
	float: left;
	margin-right: 2%;
}

.contact-form-footer .mce-grp-lname {
	width: 49%;
	float:left;
}

@media only screen and (max-width: 480px) {
	.contact-form-embedded .mce-grp-fname { width: 100%; float: none; margin-right: 0; }
	.contact-form-embedded .mce-grp-lname { width: 100%; float: none; }
	.contact-form-embedded .mce-grp-city { width: 100%; float: none; margin-right: 0; }
	.contact-form-embedded .mce-grp-state { width: 50%; float: none; }
	.contact-form-footer { max-width: 90%; margin-bottom: 3rem}
	.contact-form-footer input[type=email] { width: 100%; }
	.contact-form-footer .mce-grp-fname { width: 100%; float: none; margin-right: 0; }
	.contact-form-footer .mce-grp-lname { width: 100%; float: none; }
	button[type=submit] { width: 50%; }
}


/*------------------------- 
MASTHEAD STYLES 
--------------------------*/

.masthead .menu {
	font-size: 12px;
	font-size: .75rem;
	font-weight: 400;
	padding: 0 2.77778% 10px 2.77778%;
}

.masthead .menu-wrapper {
	background-color: #c0cccb;
}

.masthead .custom-logo-link img {
	max-height: 8rem;
	position: relative;
	top: 39px;
	z-index: 25;
}

.masthead .custom-logo-link {
	padding: 0rem 2.77778%;
	margin-top: -25px;
}

.masthead .menu li ul {
	background: #c0cccb;
}

.masthead .menu li a {
	z-index: 30;
}

.masthead .menu a:not(.button) {
	color: #333;
}

a:not(.button):focus, .masthead .menu li ul li a:not(.button) {
	color: #333;
}

a:not(.button):focus, .masthead .menu li ul li a:not(.button):hover {
	color: #333;
}

.masthead .branding {
	z-index: 50;
	background: rgba(0, 0, 0, 0);
}


/*------------------------- 
OVERLAY MENU STYLES 
--------------------------*/

.masthead .branding button.open-overlay {
	background: #4dabb4;
	margin-left: 2.77778%;
}

.menu-overlay nav ul li {
    font-weight: 300;
    list-style: none;
    font-size: 18px;
	font-size: 1.25rem;
	line-height: 1;

}

.menu-overlay nav ul li li {
	font-size: 14px;
	font-size: 1rem;
}

.menu-overlay .close-overlay {
	background-color: #4dabb4;
	color: #f5faff;
}

/*------------------------- 
SHOWCASE STYLES
--------------------------*/

.showcase {
	margin-bottom: 0;
	padding-bottom: 35%;
}

.showcase .item h2 a.entry {
	font-family: "Raleway";
	font-weight: 100;
	font-size: 2.5rem;
	color: rgb(255,255,255);
	background: #4dabb4;
	line-height: .9;
	padding: 2rem 2.5rem;
	bottom: -2rem;
}

.showcase-subtitle {
	font-size: 1.75rem;
	line-height: .9;
}

.showcase nav .tab {
	width: 1.25em;
	height: 1.25em;
    background: #c0cccb;
    border: 2px solid #f1f4f3;
}

@media only screen and (max-width: 480px) {
	.showcase { padding-bottom: 75%; }
	.showcase .item h2 a.entry { font-weight: 200; font-size: 1.5rem; line-height: 1.25; padding: 1rem 1.5rem; bottom: -3.5rem;}
	.showcase-subtitle { font-size: 1.25rem; line-height: .9; }
	.showcase nav .tab { width: 1em; height: 1em; margin-top: 1rem; }
}

/*-------------------------------------------------------------------------------
ALL GRID PAGE STYLES
-------------------------------------------------------------------------------*/

main.full-width {
    width: 100%;
}

header.entry-header {
	margin-top: 4em;
}

h1.entry-page-title {
	font-weight: 100;
	margin-bottom: 0;
	padding-right: 45px;
	display:flex;
}

h1.entry-page-title::after {
  content: "";
  border-bottom-style: solid;
  border-bottom-width: 2px;
  display: inline-block;
  justify-content: right;
  flex-grow: 1;
  position: relative;
  top: -13px;
  left: 10px;
  color: #ffee00;
  margin-right: 15px;
}

/* Sub-title */
.subtitle-page {
	font-family: "Raleway", sans-serif;
	font-weight: 200;
	font-size: 1.5rem;
}

.the-content h3 {
	font-size: 2.5rem;
	font-weight: 200;
	margin-bottom: 2rem;
	color: #333;
	line-height: 1.25;
}

.wpnbha .entry-title a {
	font-size: 1.5rem;
	font-weight: 300;
}

.author a {
	font-weight: 400;
	color: #09818d;
	text-decoration: none;
}

.carrot-divider {
	float:right;
	width: 30px;
	position:relative;
	top: -60px;
	left: -20px;

}

@media only screen and (max-width: 480px) {
	.wp-block-columns.has-background, .wp-block-cover.has-background, .wp-block-group.has-background { padding: 0; }
}

/*------------------------- 
ADDITIONAL HOMEPAGE STYLES
--------------------------*/

.logo-break {
	max-width: 60%;
	padding: 6.5rem 1.5rem 1.5rem 3rem;
}

.editor-block .the-content .alignfull {
	margin: 0;
}

.the-content h1, .the-content h2, .the-content h3 {
	margin-top: 3rem;
}

.singular .wp-block-newspack-blocks-homepage-articles .entry-title, .wp-block-newspack-blocks-homepage-articles .entry-title {
	margin-top:.5rem;
	margin-bottom: 1rem;
}

.entry-wrapper {
	margin-bottom: 2em;
}

main.full-width-home {
    width: 100%;
    background: #c0cccb;
}

@media only screen and (max-width: 480px) {
	.logo-break { max-width: 100%; padding: 4.5rem 1.1rem 0rem 1.1rem; }
	.singular .wp-block-newspack-blocks-homepage-articles article, .wp-block-newspack-blocks-homepage-articles article { margin-bottom: 2rem; }
}


/*-------------------------------------------------------------------------------
SINGLE ARTICLE STYLES
-------------------------------------------------------------------------------*/


/* Sub-title */
.content-single article .entry-title {
	font-weight: 100;
}

/* Sub-title */
.subtitle {
	font-family: "Raleway", sans-serif;
	font-weight: 200;
	font-size: 1.5rem;
	line-height: 1.25rem;
	color: #333;
}

.content-single h4 {
	margin-top: 3rem;
	line-height: 1.25;
}

/* Intro */
.intro {
	font-family: "Raleway", sans-serif;
	font-weight: 200;
	font-size: 1.25rem;
	font-style: italic;
	line-height: 2rem;
	width: 70%;
	margin-top: 5rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3em;
}

/* Art */
.intro-art {
	font-family: "Raleway", sans-serif;
	font-weight: 200;
	font-size: 1.25rem;
	font-style: italic;
	line-height: 2rem;
	width: 70%;
	margin-top: 0rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3em;
}

div.carrot-art-initial {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
}

.carrot-art {
	height: 125px;
	position: relative;
	left: -80px;
	top: 112px;
}

/* Review */
.review_info {
	width: 50%;
	margin-top: 1rem;
	margin-bottom: 3rem;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(192, 204, 203, .3);
	border-left: solid 25px #ffee00;
	border-bottom: solid 2px #ffee00;
}

.review_info img {
	width: 175px;
}

.info_left {
		float:left;
		padding: 1rem;
}

.info_right {
	color: #666;
	line-height: 1.25;
	padding: 3rem 1rem 1rem 1rem;
}

.info_right .info_title {
	font-family: "Raleway", sans-serif;
	font-weight: 300;
	line-height: 2;
}

.info_right .review_title {
	font-size: 28px;
	line-height: 1;
}

.info_right .review_subtitle {	
	font-size: 20px;
	line-height: 1;
}

.review_info::after {
  content: "";
  clear: both;
  display: table;
}

/* Byline */
.byline {
	font-weight: 300;
	font-style: italic;
}

/* Drop caps */
.dropcap {
	float: left;
	font-family: "Raleway", sans-serif;
	font-weight: 100;
	margin: .12em 0.1em 0 0;
	font-size: 64px;
	font-size: 5.5rem;
	line-height: 1.25;
	line-height: 0.75;
}

/* Drop caps - Interview Speaker */
.dropcap-speaker {
	float: left;
	font-family: "Raleway", sans-serif;
	font-weight: 200;
	color: #4dabb4;
	margin: .2em 0.3em 0 0em;
	font-size: 64px;
	font-size: 3rem;
	line-height: 1.25;
	line-height: 0.75;
}

/* Images */
figcaption {
	font-size: .85rem;
	font-style: italic;
	margin-bottom: 1.5rem;
}

.entry-single h4 {
	font-size: 1.75rem;
}

/* Reply */
.reply {
	font-family: "Raleway", sans-serif;
	font-style: italic;
	padding: 3rem 0 1.5rem 0;
}


/* Next two make sure that articles submitted with classic and block editor match formatting */
.editor-classic .the-content {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	float: none;
	padding: 0;
}

/* This was fucking up the logo on the home page. Might fix later.
.editor-block.themes-sidebar1-inactive .the-content > * {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
*/

/* Zero out article header margins and then reset */
.post-meta-data {
	margin-left: 0;
}

.content-single article .entry-title {
	margin-left: 0;
	margin-bottom: 0;
}

.entry-header {
	margin-left: 1.1rem;
}

/* Misc formatting */

body.single {
 background: #f1f4f3;	
}


.wp-block-separator.is-style-wide {
	width: 85%;
	margin: 0 0 1.1rem;
	border-bottom: 6px solid #ffee00;
}

.contributor p:last-child, .entry-single .contributor {
	margin-bottom: 3rem;
}

.contributor {
	padding: 1.5rem 1rem;
	margin: 1.5rem 0 4.5rem 0;
	border-top: 3px solid #ffee00;
}

.contributor h2 {
	font-weight: 600;
}

.content-comments {
	padding: 3rem;
}

.comment-navigation a, .image-navigation a, .post-navigation a {
	padding: 4.5rem 1rem;
}

div.carrot-initial {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

.carrot {
	height: 125px;
	position: relative;
	left: -70px;
	top: 112px;
}

@media only screen and (max-width: 480px) {
	.editor-classic .the-content { width: 90%; }
	.content-single article .entry-title { font-weight: 200; }
	.subtitle { font-weight: 400; }
	.byline { font-weight: 400; }
	.intro { font-size: 1.1rem; font-weight: 400; width: 90%; margin-top: 2rem; margin-bottom: -2em;}
	div.carrot-initial { width: 90%; visibility: hidden;}
	.carrot { height: 100px; left: -55px; top: 95px; }
	.dropcap-speaker { font-size: 1.75rem; 	font-size: 24px; font-weight: 400;}
	.comment-navigation a, .image-navigation a, .post-navigation a { padding: 1rem 1rem; }
	.review_info { margin-bottom: 3rem; }
}



/*-------------------------------------------------------------------------------
ARCHIVE STYLES
-------------------------------------------------------------------------------*/

.entry-archive {
	max-width: 1200px;
}

.archive h1.entry-archive-title {
	font-weight: 200;
	display:flex;
}

.archive h1.entry-archive-title::after {
  content: "";
  border-bottom-style: solid;
  border-bottom-width: 6px;
  display: inline-block;
  justify-content: right;
  flex-grow: 1;
  position: relative;
  top: -13px;
  left: 10px;
  color: #ffee00;
}

.content-posts article h2.entry-title {
	font-size: 3rem;
	font-weight: 200;
	line-height: 3.25rem;
	margin-bottom: 0;
}

.content-posts article .subtitle {
	font-size: 1.25rem;
}

.content-posts article .excerpt-archive {
	font-size: .95rem;
	font-weight: 300;
}

.archive .entry-archive-header {
    margin-top: 2em;
}




/*-------------------------------------------------------------------------------
SEARCH STYLES
-------------------------------------------------------------------------------*/

.entry-search {
	padding: 0 1.1em 12em 1.1em;
}

form.search-form button.search-submit {
	top: 65px;
}

.search h1.entry-archive-title {
	font-weight: 200;
	padding-top: 1em;
}

.search-wrapper {
	border-top: 3px solid #ffee00;
}

.content-posts article .thumbnail {
	padding-bottom: 4em;
}

input[type=search]{
   -moz-appearance: none;/* older firefox */
   -webkit-appearance: none; /* safari, chrome, edge and ie mobile */
   appearance: none; /* rest */
}



/*-------------------------------------------------------------------------------
CALENDAR STYLES
-------------------------------------------------------------------------------*/

.ics-calendar h3 {
	color: #ffee00;
	font-size: 1.5rem;
	padding: 1rem 0;
}

dl dt {
    font-weight: normal;
}

dl.events {
	margin: 0;
}

.title {
	font-weight: bold;
}

.ics-calendar-description {
	font-size: 85%;
}

.ics-calendar-list-event::after {
  content: "";
  clear: both;
  display: table;
}

.ics-calendar-list-event {
  padding-bottom: 2rem;
}

.ics-calendar-list-date {
	width: 75px;
	max-width: 15%;
	float: left;
	clear: left;
	color: #f1f4f3;
  	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  	font-weight: 100;
  	padding-right: 16px;
  	border-right: 1px #f1f4f3 solid;
}

.ics-calendar-list-event-wrapper {
	float: left;
	padding: 0 0 0 16px;
	width: 85%;
}

.day-label {
font-weight: 200;
}

.date-label {
	font-size: 3rem;
	position: relative;
	top: -25px;
}

/*-------------------------------------------------------------------------------
FOOTER STYLES
-------------------------------------------------------------------------------*/

#footer {
	background:#9eaba9;
	padding-top: 0;
}

#footer .scroll-to-top {
	padding-top: 2em;
}




/*------------------------- 
BASIC MISC FORMATTING
--------------------------*/

body:not(.has-site-title):not(.themes-overlay-visible) .masthead .branding-wrapper {
	margin-bottom: 0;
}




/*------------------------- 
MOBILE FORMATTING
--------------------------*/

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

	.content-single article .entry-title {
		line-height: 1.2;
	}

	.subtitle {
		padding-top: .5rem;
		line-height: 1.5;
	}
}


/*-------------------------------------------------------------------------------
WOO COMMERCE / STRIPE STYLES
-------------------------------------------------------------------------------*/

.wc-stripe-elements-field {
	height: 28px;
}