/*
Theme Name: Rainy Autumn
Theme URI: http://smdesigns.org/rainy-autumn
Author: Amber S.
Author URI: http://smdesigns.org
Description: A Genesis child theme based on the provided HTML and CSS for Rainy Autumn 1.0.
Version: 1.0
Template: genesis
License: GNU General Public License v2 or later
License URI: https://wordpress.org/about/license/
Tags: blue, white, tans, featured images, side-by-side, off canvas nav, minimalistic, blog, responsive, simple, right sidebar, left sidebar, light
Text Domain: rainy-autumn
*/

@import url('../genesis/style.css');

@import url('https://fonts.googleapis.com/css?family=Zilla+Slab|Montserrat|Amiri|Libre+Baskerville|Roboto|Allura|Cormorant+Garamond');

html{
font-family: serif;
ms-text-size-adjust: 100%;
webkit-text-size-adjust: 100%;
font-size: 62.5%;
margin: 0 auto;
padding: 0 auto;}

body {
margin:0;
font: 12px 'Zilla Slab', serif;
line-height:1.5;
text-align: justify;
color:#3E3A39;
background-color:#F5F4F2;
overflow-x:hidden;}

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
display: block;}

.container{
margin: 0 auto;
padding: 0 15px;}

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

:after,:before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}

ol, ul {
list-style: none;}

blockquote:before, blockquote:after,
q:before, q:after {
content: "";}

blockquote, q {
quotes: "" "";}

a:focus {
outline: thin dotted;}

a:hover, a:active {
outline: 0;}

h3, h5, h6{
color: #7a3b2e;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 400;
letter-spacing: 2px;
line-height: 1.2;
margin: 0 0 30px;
text-transform: uppercase;}

a {
cursor: pointer;
text-decoration: none;}

a:hover {
cursor: pointer;
text-decoration: none;}

cite,em,i {
font-style: italic;}

img{
border: 0;}

audio, canvas, progress, video {
display:inline-block;
vertical-align:baseline}

.clear {
clear:both;}

.clearfix:after {
content:'';
display:block;
font-size:0;
height:0;
clear:both;}

.hidden {
display:none!important;}

.image {
height:auto;
display:block;
max-width:100%;}

.pull-right {
 float:right!important;}

.pull-left {
 float:left!important;}

.aligncenter {
 text-align:center;}

@media (min-width:1440px) {
 .container {
width:1280px;}}

@media (max-width:1440px) and (min-width:1260px) {
 .container {
width:1180px;}}
@media (max-width:1260px) and (min-width:992px) {
 .container {
width:1080px;}}

p{
margin:0;
padding:0px 0px 10px 0px;}

header{
width: 100%;
top: 0;
z-index: 9999;
padding-bottom: 15px;
height: 150px;
position: fixed;
box-shadow: 0 25px 30px -30px rgba(117,117,117,.2);
background-color: #F5F4F2;}

.header-top{
margin: 0px auto;
padding-top: 3px;
display: table;
width: 100%;
height: 50px;
z-index: 4;
border-bottom: 6px solid #DADDE0;
background-color: #A4745C;}

.topbar{
float: left;
text-align: left;
display: inline;
width: 1400px;
position: fixed;
left: 160px;
font-size: 14px;
padding: 0px 5px;}

.topbar a{
color: #F5F4F2;}

.topbar a:hover{
color: #2E2E2E;}

.topbar ul li{
list-type: none;
display: inline-block;
position: relative;
padding: 0px 5px;
border: none;}

.header-main{
display: grid;
width: 1400px;
margin: 0px auto;
padding-top: 20px;
position: relative;
z-index: 3;
grid-column-gap: 25px;
grid-template-columns: repeat(2, 1fr));

grid-template-areas:
"title nav"
"sub-title nav";}

.title{
grid-area: title;
font: 3.5rem 'Amiri', serif;
text-transform: uppercase;
letter-spacing: 4px;
text-align: center;
color: #7d2930;}

.sub-title{
grid-area: sub-title;
font: 12px 'Cormorant Garamond', serif;
text-transform: uppercase;
letter-spacing: 2px;
margin-top:-15px;
text-align: center;
color: #6f2924;}

.sidenav{
display: none;}

.openbutton{
display: hidden;}

nav{
grid-area: nav;
text-align: center;
display: block;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 10px;
padding: 0;
font: normal 10px 'Montserrat', sans-serif;}

nav a {
cursor: pointer;
display: block;
padding: 0px 15px;
color: #A4745C;
text-decoration: none;}

nav a:hover{
cursor: pointer;
display: block;
padding: 0 15px;
color: #4C3F36;}

nav ul{
display: inline-block;
list-type: none;
text-align: center;
padding: 3px 10px;
border-right: 0;}

nav ul li{
list-type: none;
display: inline-block;
position: relative;
padding: 0px 10px;
border-right: 1px solid #666666;}

nav ul li.last{
list-type: none;
display: inline-block;
position: relative;
padding: 0px 10px;
border-right: 0;}

nav ul li.mobile{
display: none;}

nav ul ul {
display: none;
position: absolute;
top: 100%;
height: auto;
text-align: left;
background: transparent;
padding: 5px;
line-height: 2.5;
border-right: 0 !important;}

.toggle-nav{
display: none;}

.social{
display: none;}

/* ---- Intro Post ---- */
.introblurb {
display: grid;
grid-template-columns: 550px 50px 400px;
grid-template-areas: 
"intro-textbox border-bar intro-images";
max-width: 1100px;
width: 100%;
margin: 13% auto 0px;
padding: 25px 0; 
background-color: #E1DFDC; 
clear: both;
place-items: center; }

.intro-textbox {
grid-area: intro-textbox;
width: 450px;
padding-top: 50px;
text-align: center;
font: 16px 'Montserrat', sans-serif;
line-height: 1.9;
letter-spacing: 0.01em;
color: #74818C;
font-weight: 100;}

.intro-textbox h1 {
font: italic 20px 'Cardo';
letter-spacing: 0.05em;
color: #92A6B1;
margin: 0;}

.intro-textbox h2 {
font: normal 25px 'Cardo';
text-transform: capitalize;
color: #3D465A;
margin: -10px 0 15px;}

hr.intro-bar {
border-top: 1px solid #5C5C5C;
width: 75%;
margin: 0 auto 20px;}

.intromore a {
background: #74818C;
color: #fff;
padding: 5px 15px 3px;
display: inline-block;
text-decoration: none;
text-transform: uppercase;}

.intromore a:hover {
background: #C4734B;}

.intro-images {
grid-area: intro-images;
position: relative;
padding-bottom: 100px;}

img.firstimage {
width: 300px;
height: 300px;
border: 15px solid #ffffff;
position: relative;
top: 100px;
left: 100px;}

img.secondimage {
width: 300px;
height: 300px;
border: 15px solid #ffffff;
position: absolute;
top: 0;
left: 0;}

.container{
margin: 0px auto;
padding: 85px 0px;
max-width: 1400px;}

.container a{
color: #7E898F;}

.container a:hover{
color: #3E3A39;}

.categories{
display: grid;
margin: 0 auto;
width: 100%;
grid-column-gap: 50px;
padding: 20px 0px;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
'writing life';}

a.cat{
display: block;
margin: 0px;
max-width: 100%;}

.catheader{
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
border: 0px;
padding: 10px;
position: relative;
width: 50%;
top: 25px;
z-index: 2;
background-color: white;}

.cat-writing{
grid-area: writing;
background-image: url('stock/novelprogress.jpg');
background-repeat: no-repeat;
background-size: cover;
min-height: 18vh;
background-position: 80% 80%;}

.cat-life{
grid-area: life;
background-image: url('stock/workwithme.jpg');
background-repeat: no-repeat;
background-size: cover;
min-height: 18vh;
background-position: 80% 80%;}

.categories h1{
text-transform: uppercase;
font: normal 9px Montserrat, sans-serif;
line-height: normal;
border-bottom: 1px solid #d3cecd;
width: max-content;
margin: 0 auto;
margin-bottom: 0px;
line-height: 1.7rem;
padding-bottom: 4px;
margin-bottom: 18px;
text-align: center;}

.categories h1 a{
color: #854F32;
text-decoration: none;}

.categories h1 a:hover{
color: #C1805C;}

.categories h2{
font-family: 'Amiri', serif;
font-style: normal;
font-weight: 400;
letter-spacing: 2px;
line-height: 1.2;
margin: -10px 0 15px;
text-align: center;
text-transform: uppercase;
border: mone;}

/*-------- Main Blog -----*/
.layout {
display: grid;
grid-template-columns: 1fr 350px;
grid-template-rows: 1fr auto;
grid-template-areas:
"featured aside"
"grid aside";
gap: 20px;
max-width: 1400px;
margin: 0 auto;
padding: 0px;}

.main-content {
display: contents;}

.featured {
grid-area: featured;
background: #ffffff;
padding: 20px;}

.grid {
grid-area: grid;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;}


.featured {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
background: #fff;
padding: 20px;
}

.featureimg {
width: 100%;
height: 250px; /* Adjust this value to control visible height */
overflow: hidden;
}

.featureimg img {
width: 100%;
height: 100%;
object-fit: cover; /* Crop image without stretching */
object-position: center; /* Center the focal point */
display: block;
}

.post {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 15px;
background: #fff;
padding: 15px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.entry h1{
letter-spacing: 2px;
margin-bottom: 16px;
font: normal 10px 'Roboto', sans-seirf;
text-align: left;
text-transform: uppercase;}

.entry h1 a{
color: #6B4F3B;
text-decoration: none;}

.entry h1 a:hover{
color: #C9AD8B;}

.entry h2{
font-family: 'Amiri', serif;
font-style: normal;
font-weight: 400;
letter-spacing: 2px;
line-height: 1.2;
margin: -10px 0 15px;
text-align: left;
text-transform: uppercase;}

.entry h2 a{
color: #6B4F3B;
text-decoration: none;}

.entry h2 a:hover{
color: #C9AD8B;
text-decoration: none;}

hr{
font-weight: 300;
display: block;
margin-left: 0px;
text-align: left;
border-top: 1px solid #3C2016;
border-bottom: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
width: 15%;}

.readmore a {
display: inline-block;
background: #A4745C;
color: #fff;
text-transform: uppercase;
padding: 12px 24px;
font-size: 12px;
text-decoration: none;
}

.readmore a:hover {
background: #E1DFDC;
}

/*----- Main Sidebar ------*/
aside{
grid-area: aside;
padding: 20px;}
	
aside h1{
font: 12px'Amiri', serif;
letter-spacing: 2px;
margin-bottom: 20px;
font-weight: 100;
padding: 10px 0;
text-align: center;
text-transform: uppercase;}
	
aside h1 ::after {
border-bottom: 1px solid #4d6c73;
content: "";
display: block;
margin: 0 auto 10px;
padding-bottom: 20px;
width: 30%;}
	
aside .inside{
background: #ffffff;
border: 0px solid #c6ccd2;
box-shadow: 0 0 0px #c6ccd2;
padding: 20px;
margin: 20px 0px;
border-radius: 3px;}
	
/* ---- Forms --- */
	
input[type=text] {
width: 75%;
padding: 12px 20px;
margin: 8px 0;
color: #2d2d2a;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #2d2d2a;}

input[type=button], input[type=submit], input[type=reset] {
background-color: #C9AD8B;
color: #ffffff;
padding: 12px 20px;
border: none;
cursor: pointer;
width: 75%;
border-radius: 3px;}
	
/* ---- Story Bar ---- */
.storybar{
width:150px;
height:15px;
background:#FFFFFF;
border:1px solid #454140;}

.percent{
width:5%;
height:14px;
background:#A1B1BC;
border-bottom:1px solid #454140;
font-size:8px;
float: left;}

.project{
text-align: center;
display: block;
width: 80%;
margin: 0 auto;
padding: 0 auto;}

.bar{
text-align: center;
display: block;
margin-left: 22%;
margin-right: 28%}

/* ---- Main Footer ----*/	
footer {
display: grid;
grid-template-areas:
"top"
"bottom";
color: #2E2E2E;
box-shadow: 0 -25px 30px -30px rgba(117, 117, 117, 0.2);
clear: both;}

.footer-top {
grid-area: top;
background: #fffffff;
display: grid;
gap: 25px;
grid-template-columns: 380px 2fr 1fr;
padding: 50px 40px 20px;
}

.subscribe{
text-align:center;
padding-right: 50px;}

.subscribe h4,
.about h4,
.footer-links h4 {
font: 14px 'Montserrat', sans-serif;;
margin-bottom: 10px;
color: #4C3F36;
text-align: center;
text-transform: uppercase;
}

.subscribe input {
padding: 12px 14px;
border: none;
border-radius: 3px;
margin-right: 5px;
}

.subscribe button {
padding: 12px 14px;
background: #74818C;
color: #fff;
border: none;
text-transform: uppercase;
cursor: pointer;
}

.subscribe button:hover {
background: #C4734B;
}

.about {
text-align: justify;
font: 12px 'Montserrat', sans-serif;
line-height: 2;
color: #4C3F36;}

.about a {
color: #343e40;}

.about a:hover {
color: #8A8378;}

.about-img {
float: left;
width: 120px;
margin: 0 20px 10px 0;
border-radius: 6px;
border: 10px solid #DADDE0;}

.footer-links {
text-align: center;
font: 12px 'Montserrat', sans-serif;}

.footer-links ul {
display: inline-block;
text-align: left;
padding: 0;
margin: 0;
list-style: none;}

.footer-links li {
margin: 5px 0px;
padding: 5px 0px;}

.footer-links a {
color: #343e40;}

.footer-links a:hover {
color: #8A8378;}

.footer-bottom {
bottom: 0;
display: block;
height: 55px;
padding-bottom: 10px;
clear: both;
background: #BCC6CC;
border-top: 6px solid #DADDE0;
font: lighter 8px 'Montserrat', sans-serif;
text-transform: uppercase;
letter-spacing: 3.5px;
}

.footer-bottom .links{
float: left;
text-transform: uppercase;
margin: 20px 5px 5px 5px;
padding: 0px 0px 0px 30px;
text-align: center !important;}

.footer-bottom .links a{
display: inline-block;
padding: 0px 20px;
color: #343e40;}

.footer-bottom .credits a{
color: #343e40;}

.footer-bottom .links a:hover{
color: #7E898F;}

.footer-bottom .credits a:hover{
color: #7E898F;}

.footer-bottom .credits{
float: right;
color: #0e1e25;
text-align: center !important;
margin: 20px 25px 5px 5px;
padding-right:  50px;
text-transform: uppercase;}