/*
	Theme Name: Eva blog
	Theme URI: 
	Description: Eva Blog is a lightweight theme for blogs or photography portfolios. Its design is clean and minimalistic, focusing all the attention on the content. With a retro vibe, Eva is perfect for those pages that want to impress with stunning visuals and content. It is based on the Gutenberg block editor and its galleries.
	Version: 2.0
	Author: Julia Menéndez
	Author URI: https://juliamenndez.com
	Tags: blog, photography
	Text Domain: eva-blog
	Tested up to: 6.1.1
	Requires PHP: 5.2.4

	License: GPL
	License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* html element 62.5% font-size for REM use */
html {
	font-size: 62.5%;
	background-color: #fff8e7;
	scroll-behavior: smooth;
}

body {
	font: 300 18px/1.4 Helvetica, Arial, sans-serif;
	color: #333;
}

/* clear */
.clear:before,
.clear:after {
    content:' ';
    display: table;
}

.clear:after {
    clear: both;
}

.clear {
    *zoom: 1;
}

img {
	max-width: 100%;
	vertical-align: bottom;
}

a {
	color:#333;
	transition: all 0.2s ease-in;
} 

a:hover {
	color:#ed8b8b;
}

input:focus {
	outline:0;
	border: 1px solid #ed8b8b;
}


button,
input[type="submit"] {
	-webkit-appearance: none;
    padding: 0.8rem 3rem;
    font-size: 1.4rem;
	text-transform: uppercase;
	color: #fff;
	background-color: #333;
    border: 1px solid #333;
	
	transition: all 0.2s ease-in-out;
}
	button:hover, 
	button:focus,
	button:active,
	input[type="submit"]:hover,
	input[type="submit"]:focus,
	input[type="submit"]:active {
		background-color: #fff;
		color: #333;
	}

input {
	padding: 0.8rem 1.5rem;
	font-size: 1.4rem;
    border: 1px solid #333;
}

.search {
	margin: 2rem 0;
}

blockquote {
	margin-top: 4rem;
	margin-bottom: 4rem;
	margin-left: 0;
}

	blockquote p {
		margin-bottom: 0;
		font-size: 2rem;
		font-weight: 400;
	}

	blockquote cite {
		font-size: 1.6rem;
		font-style: normal;
	}
	
.page-navigation {
	margin-top: 4rem;
	font-size: 1.6rem;

}
	.pagination .nav-links .page-numbers { 
		margin: 0 0.5rem;
	}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* main */
main {
	padding-left: 15px;
	padding: 15px;
}

/* wrapper */
body > .wrapper a:focus {
	outline: 2px dotted #f08b82;
}

.wrapper {
	max-width: 1280px;
	width: 95%;
	margin: 0 auto;
	position: relative;
}

/* header */
.header {
	margin-top: 4rem;
	margin-bottom: 3rem;
	text-align: center;
}

/* logo */
.logo a {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 4rem;
	text-decoration: none;
}

.logo a {
	color: inherit;
}

.site-description p {
	margin-top: 0;
	font-size: 1.4rem;
	font-weight: 400;
	font-style: italic;
}

.mobile-menu-button a {
	font-size: 1.4rem;
	line-height: 1;
	text-decoration: none;
}


/* nav */
.nav ul {
	padding-left: 0;
	list-style: none;
}

	.nav ul li {
		display: inline-block;
		margin: 0 2.5rem;
	}

	.nav ul li:first-child {
		margin-left: 0;
	}

	.nav ul li:last-child {
		margin-right: 0;
	}

.nav a {
	font-size: 2rem;
	font-weight: 300;
	text-decoration: none;
}

.main-menu {
	display: none;
}

.main-menu.visible {
	display: block;
	position: absolute;
	width: 100%;
	z-index: 10;
}

	.main-menu ul {
		width: 80%;
		margin: 0 auto;
		background-color: #fff;
	}

	.main-menu ul li {
		display: block;
		margin: 0;
	}

	.main-menu ul li a {
		font-size: 1.4rem;
	}

/* footer */
.footer {
	margin-top: 4rem;
}
	.footer .footer-top,
	.footer .footer-bottom {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.footer .footer-top {
		text-align: center;
	}

	.footer .social-nav {
		margin-bottom: 2rem;
	}

	.footer .social-nav li {
		display: block;
		margin: 0;
	}
	
	.footer .social-nav li a {
		font-size: 1.4rem;
	}

	.footer-bottom {
		margin-top: 3rem;
		padding-bottom: 1rem;
		padding-top: 1rem;
		background-color: #fff;
	}

		.footer-bottom .wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.footer-bottom .copyright {
			order: 2;
		}

		.footer-bottom .nav {
			order: 1
		}

		.footer-bottom .nav ul {
			margin: 0;
		}

		.footer-bottom .nav ul li {
			position: relative;
			margin: 0;
			padding-right: 2rem;
			line-height: 1;
		}

		.footer-bottom .nav ul li::after {
			content: '';
			position: absolute;
			top: 2px;
			right: 0.6rem;
			width: 1px;
			height: 2rem;
			background-color: #333;
		}

		.footer-bottom .nav ul li:last-child {
			padding-right: 0;
		}

		.footer-bottom .nav ul li:last-child::after {
			display: none;
		}

		.footer-bottom .nav ul li a,
		.footer-bottom .copyright {
			font-size: 1.4rem;
		}

.to-top-btn	{
	display: none;
	position: fixed;
	bottom: 2rem;
	right: 15px;
	padding: 0.2rem 0.5rem 0.5rem;
	font-size: 1.2rem;
	text-decoration: none;
	background-color: #fff;
	box-shadow: 0 0 12px rgba(0,0,0,0.1);

	transition:.5s ease-in-out;
}
/*------------------------------------*\
    PAGES
\*------------------------------------*/
.home article.post,
.search article.post,
.archive article.post {
	margin-bottom: 7rem;
	text-align: center;
}

.search h1,
.archive h1 {
	margin-bottom: 8rem;
    font-size: 2.8rem;
    font-weight: 100;
	text-align: center;
}

.page .page-title {
	margin-bottom: 7rem;
	text-align: center;
}

#post-404 {
	text-align: center;
}

	#post-404 h2 {
		font-size: 2.2rem;
		font-weight: 300;
	}


/*------------------------------------*\
    POSTS
\*------------------------------------*/
article.post .post-title {
	margin-bottom: 0;
	font-size: 1.8rem;
	font-weight: 400;
}

article.post .post-title a {
	text-decoration: none;
}

article.post .category,
article.post .tags {
	display: block;
	margin-top: 0;
	padding-left: 0;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.6rem;
	font-style: italic;
	list-style: none;
}

article.post .category a,
article.post .tags a  {
	text-decoration: none;
}

.post-hero {
	height: 15rem;
	width: calc(100% + 30px);
	margin-left: -15px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.post-content {
	display: flex;
	flex-direction: column;
	margin-top: 7rem;
}

	.post-header {
		margin-bottom: 4rem;
		padding-right: 0;
	}

		.post-header h1 {
			margin-top: 0;
			font-size: 2.4rem;
			font-weight: 400;
		}

	.post-details {
		font-family: Georgia, 'Times New Roman', Times, serif;
		font-size: 1.8rem;
	}

		.post-details .date {
			font-family: Helvetica, sans-serif;
			font-size: 1.8rem;
		}

.wp-block-gallery  {
	width: 100%;
	margin-top: 6rem;
	margin-bottom: 6rem;
}

.nav-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 4rem;
	font-size: 1.6rem;
	}

		.nav-links a {
			font-size: 1.6rem
		}

.pagination .nav-links {
	flex-direction: row;
	justify-content: center;
}
		
/*------------------------------------*\
    COMMENTS
\*------------------------------------*/
.comments {
	margin-top: 4rem;
	font-family: Helvetica, sans-serif;
	font-size: 1.6rem;
}

	.comments .comment-form {
		width: 100%;
	}

	.comments .comment-form textarea {
		width: 100%;
		padding: 1rem 1.5rem;
	}

	.comments ul {
		padding-left: 0;
		list-style: none;
	}
	
	.comments ul li {
		margin-bottom: 3rem;
	}

	.comment-author,
	.comment-meta {
		font-size: 1.6rem;
	}

	.comment-author .avatar {
		width: 50px;
		height: 50px;
	}

/*------------------------------------*\
    SIDEBAR
\*------------------------------------*/
.sidebar {
	margin-top: 4rem;
	padding: 1rem;
	border: 1px solid #333;
}

.sidebar .widget_search form {
	display: flex;
	flex-direction: column;
}
	.sidebar .widget_search form input {
		width: 100%;
	}

	.sidebar .widget_search form input[type="submit"] {
		margin-top: 1rem;
		padding: 1rem;
		font-size: 1rem;
	}

.sidebar > div {
	margin: 4rem 0;
	font-size: 1.6rem;
}

	.sidebar h3 {
		margin-bottom: 0;
		font-size: 2rem;
	}

.sidebar ul {
	list-style: square;
}

.desktop-sidebar {
	display: none;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:320px) {

}

@media only screen and (min-width:480px) {

}

@media only screen and (min-width:768px) {
	body {
		font-size: 22px;
	}

	/* Header */
	.header {
		margin-top: 8rem;
		margin-bottom: 6rem;
	}

	.logo a {
		font-size: 6rem;
	}
	.site-description p {
		font-size: 2.4rem;
	}

	.main-menu {
		display: block;
	}
		.main-menu ul {
			width: 100%;
			background-color: transparent;
		}

		.main-menu ul li {
			display: inline-block;
			margin: 0 2.5rem;
		}

		.main-menu ul li a {
			font-size: 2rem;
		}

	.mobile-menu-button {
		display: none;
	}

	/* Footer */
	.footer {
		margin-top: 8rem;
	}

	.footer .social-nav {
		margin-bottom: 0;
	}

	.footer .social-nav li {
		display: inline-block;
		margin: 0 2.5rem;
	}

	.footer .social-nav li a {
		font-size: 2.4rem;
	}

	.footer-bottom {
		margin-top: 6rem;
	}
		.footer-bottom .wrapper {
			flex-direction: row;
			justify-content: space-between;
		}

		.footer-bottom .copyright {
			order: 1;
		}

		.footer-bottom .nav {
			order: 2;
		}

		.footer-bottom .nav ul li a,
		.footer-bottom .copyright {
			font-size: 1.8rem;
		}
	
	.to-top-btn	{
		font-size: 1.6rem;
	}

	/* Posts */
	.home article.post,
	.search article.post,
	.archive article.post {
		margin-bottom: 14rem;
		
	}
	
	article.post .post-title {
		font-size: 2.2rem;
	}

	article.post .category,
	article.post .tags {
		font-size: 2rem;
	}

	.post-hero {
		height: 38rem;
	}

	.post-content {
		flex-direction: row;
		margin-top: 14rem;
	}

		.post-header {
			width: 25%;
			margin-bottom: 0;
			padding-right: 3rem;
		}

		.post-details {
			width: 75%;
			font-size: inherit;
		}

	.wp-block-gallery  {
		margin-top: 8rem;
		margin-bottom: 8rem;
	}

	.nav-links {
		flex-direction: row;
		margin-top: 8rem;
		font-size: 1.8rem;
	}

	.post-navigation .nav-links {
		justify-content: space-between;
	}

		.nav-links a {
			font-size: 1.8rem;
		}

	/* Pages */
	.page .page-title {
		margin-bottom: 14rem;
	}

	/* Elements */
	blockquote {
		margin-top: 8rem;
		margin-bottom: 8rem;
		margin-left: -2rem;
	}
	
		blockquote p {
			font-size: 2.8rem;
		}
	
		blockquote cite {
			font-size: 2rem;
		}
	
	.page-navigation {
		margin-top: 8rem;
		font-size: 1.8rem;
	}

	/* Comments */
	.comments {
		margin-top: 8rem;
		font-size: 1.8rem;
	}
	
		.comments .comment-form {
			width: 50%;
		}

		.comment-meta {
			float: right;
		}
	
		.mobile-sidebar {
			display: none;
		}

		.desktop-sidebar {
			display: block;
		}
	
}

@media only screen and (min-width:1024px) {
	.post-details:not(.has-sidebar) .wp-block-gallery  {
		width: calc(100vw - 40px);
		margin-left: calc(-1 * calc( 100vw * 0.25 ));
	}

	blockquote {
		margin-left: -4rem;
	}
}

@media only screen and (min-width:1140px) {

}

@media only screen and (min-width:1280px) {
	.post-header {
		padding-right: 4rem;
	}

}

@media only screen and (min-width:1320px) {
	.post-details:not(.has-sidebar) .wp-block-gallery  {
		width: 1280px;
		margin-left: calc(-1 * calc(1280px - calc(1280px * 0.75)) );
	}

}

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#ed8b8b;
	color:#FFF;
	text-shadow:none;
}

::-webkit-selection {
	background:#ed8b8b;
	color:#FFF;
	text-shadow:none;
}

::-moz-selection {
	background:#ed8b8b;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}

.alignright {
	float:right;
	margin:5px 0 20px 20px;
}

.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}

a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}

a img.alignnone {
	margin:5px 20px 20px 0;
}

a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}

a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.wp-caption {
	max-width:96%;
	text-align:center;
}

.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}

.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}

.wp-caption.alignright {
	margin:5px 0 20px 20px;
}

.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}

.sticky {
}

.bypostauthor {
}

.wp-caption .wp-caption-text,
.gallery-caption {
	font-size: 1.4rem;
	line-height:17px;
	margin:0;
	padding: 1rem 1.5rem;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}

	a,
	a:visited {
		text-decoration:underline;
	}

	a[href]:after {
		content:" (" attr(href) ")";
	}

	abbr[title]:after {
		content:" (" attr(title) ")";
	}

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}

	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}

	thead {
		display:table-header-group;
	}

	tr,img {
		page-break-inside:avoid;
	}

	img {
		max-width:100% !important;
	}

	@page {
		margin:0.5cm;
	}

	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}

	h2,
	h3 {
		page-break-after:avoid;
	}
}