/*
Theme Name: meowbark Custom Theme
Author: Samantha Fung
Author URI: https://samanthafung.com/
Description: A custom theme developed for meowbark blog.
Version: 1.0
*/


* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	margin: 0 auto;
	max-width: 1600px;
	min-width: 320px;
	font-size: clamp(0.875rem, 0.6042rem + 0.6667vw, 1rem); /* 16 / 14 */
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	box-shadow: 5px 0px 5px rgba(0,0,0,.1), -5px 0px 5px rgba(0,0,0,.1);
	position: relative;
	color: #222222;
	line-height: 1.65;
	background: linear-gradient(#F7F5F3, rgba(239, 234, 230, 0));
}

img {
	pointer-events: none; /* Prevent image download */
}


/* -- Text Styles -- */

a {
	color: #A28C74;
	transition: color .5s ease;
}

a:hover {
	color: #6A5C4E;
}

span.bold {
	font-weight: bold;
}

h1, h2, h3, h4, h5, h6, a.post-title, .page-numbers, .nav-pagination a, #site-footer a {
	font-family: 'Quicksand', sans-serif;
}

h1 {
	font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.625rem); /* 42 / 30 */
	font-weight: 500;
	line-height: 1.2;
}

p#site-tagline {
	font-size: clamp(1rem, 0.8875rem + 0.4vw, 1.125rem); /* 18 / 16 */
	line-height: 1.2;
}

h2 {
	font-size: clamp(1.375rem, 0.5625rem + 2vw, 1.75rem); /* 28 / 22 */
	line-height: 1.3;
}

h2.single-title {
	font-size: clamp(1.5rem, 0.6875rem + 2vw, 1.875rem); /* 30 / 24 */
	font-weight: 600;
}

h3, h4, h5, h6 {
	font-size: clamp(1rem, 0.8875rem + 0.4vw, 1.125rem); /* 18 / 16 */
	line-height: 1.2;
	color: #6A5C4E;
}

a.post-title {
	font-size: clamp(1.25rem, 0.9792rem + 0.6667vw, 1.375rem); /* 22 / 20 */
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	color: #222222;
}

a.post-title:hover {
	text-decoration: underline;
}

a.post-date, a.post-category {
	font-size: clamp(0.8125rem, 0.7rem + 0.4vw, 0.9375rem); /* 15 / 13 */
	font-weight: bold;
	text-decoration: none;
	color: #A28C74;
}

a.post-date:hover, a.post-category:hover {
	color: #6A5C4E;
}

.single-content h2 {
	font-size: clamp(1.25rem, 1.025rem + 0.8vw, 1.5rem); /* 24 / 20 */
	line-height: 1.2;
}

.single-content blockquote p {
	font-size: clamp(0.9375rem, 0.825rem + 0.4vw, 1.0625rem); /* 15 / 17 */
	color: #70705C;
	line-height: 1.8;
}

.page-numbers, .nav-pagination a {
	font-size: clamp(1.125rem, 0.8542rem + 0.6667vw, 1.25rem); /* 20 / 18 */
	font-weight: 700;
	text-decoration: none;
	color: #A28C74;
	transition: color .5s ease;
}

.page-numbers:hover, .nav-pagination span.current {
	color: #6A5C4E;
}

.page-numbers.current {
	color: #6A5C4E;
}

p#site-copyright, #site-footer a, #site-footer p {
	font-size: clamp(0.75rem, 0.6146rem + 0.3333vw, 0.8125rem); /* 13 / 12 */
}

#site-footer a {
	font-weight: 700;
	text-decoration: none;
	color: #222222;
}


/* -- Button Styles -- */

a.button {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	text-align: center;
	display: block;
	min-width: 110px;
	padding: 8px 15px;
	text-decoration: none;
	color: #222222;
	background: #DADAD2;
	align-self: self-start;
	transition: background	.5s ease;
}

a.button:hover {
	background: #C8C8BC;
}


/* -- Common Elements -- */

main {
	width: 100%;
	margin: 0 auto;
	padding: 0 min(35px, 5%);
	overflow: hidden;
}

.container-image {
	border-radius: 3px;
	overflow: hidden;
}

.container-image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

a.image-link {
	font-size: 0;
	line-height: 0;
}

.container-heading {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.container-heading h2 {
	margin: 0 auto;
	display: inline-block;
	position: relative;
}

.container-heading h2::before, .container-heading h2::after {
	content: "";
	position: absolute;
	width: 100vw;
	height: 5px;
	border-bottom: solid 1px #A28C74;
	top: 50%;
}

.container-heading h2::before {
	left: 100%; /* Line on right side */
	transform: translate(15px, -50%);
}

.container-heading h2::after {
	right: 100%; /* Line on left side */
	transform: translate(-15px, -50%);
}



/* -- Site Header -- */

header#site-header {
	width: 100%;
	margin: 0 auto;
	padding: clamp(35px, 5%, 55px) min(35px, 5%);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

header#site-header h1, header#site-header p#site-tagline {
	margin: 0;
}

/* -- Site Main Nav -- */

ul#menu-main-menu {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 35px;
}

ul#menu-main-menu li {
	padding: 5px 20px;
	background: rgba(214, 204, 194, 0);
	transition: background .5s ease;
}

ul#menu-main-menu li:hover, ul#menu-main-menu li.current-menu-item {
	background: #D6CCC2;
}

ul#menu-main-menu li a {
	font-family: 'Quicksand', sans-serif;
	font-size: clamp(0.9375rem, 0.7688rem + 0.6vw, 1.125rem); /* 18 / 15 */
	font-weight: 600;
	color: #222222;
	text-decoration: none;
	text-transform: uppercase;
}

/* -- Categories Nav -- */

nav.nav-categories {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
}

nav.nav-categories h3 {
	margin-top: 0;
	margin-bottom: 25px;
	display: inline-block;
	position: relative;
}

nav.nav-categories h3::before, nav.nav-categories h3::after {
	content: "";
	position: absolute;
	width: 100vw;
	height: 5px;
	border-bottom: solid 1px #A28C74;
	top: 50%;
}

nav.nav-categories h3::before {
	left: 100%; /* Line on right side */
	transform: translate(15px, -50%);
}

nav.nav-categories h3:after {
	right: 100%; /* Line on left side */
	transform: translate(-15px, -50%);
}

nav.nav-categories ul {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

nav.nav-categories ul li {
	padding: 8px 15px;
	background: #DADAD2;
	transition: background .5s ease;
}

nav.nav-categories ul li:hover {
	background: #C8C8BC;
}

nav.nav-categories ul li a {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	color: #6A5C4E;
	text-decoration: none;
}

nav.nav-categories ul li.current-menu-item {
	background: #70705C;
}

nav.nav-categories ul li.current-menu-item a {
	color: #ffffff;
}

nav.nav-categories ul li a::before {
	/* Category Image Icon */
	margin-right: 8px;
	display: inline-block;
	font: var(--fa-font-solid);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

nav.nav-categories ul li.menu-item-17 a::before {
	/* Dog Category Icon */
	content: "\f6d3";
}
nav.nav-categories ul li.menu-item-72 a::before {
	/* Cat Category Icon */
	content: "\f6be";
}
nav.nav-categories ul li.menu-item-20 a::before {
	/* Wellness Category Icon */
	content: "\f5bb";
}
nav.nav-categories ul li.menu-item-19 a::before {
	/* Travel Category Icon */
	content: "\f185";
}
nav.nav-categories ul li.menu-item-18 a::before {
	/* Pole Dancing Category Icon */
	content: "\f004";
	font: var(--fa-font-regular);
}
nav.nav-categories ul li.menu-item-16 a::before {
	/* Uncategorized Category Icon */
	content: "\e80a";
}


/* -- Site Footer -- */

footer#site-footer {
	width: 100%;
	margin: clamp(35px, 5%, 65px) auto 0 auto;
	padding: 35px min(35px, 5%);
	background: linear-gradient(rgba(239, 234, 230, 0), #F7F5F3);
	text-align: center;
}

footer#site-footer::before {
	content: "";
	border-top: solid 1px #A28C74;
	width: 100%;
	margin: 0 auto;
	max-width: 850px;
	display: block;
	transform: translateY(-35px);
}

footer#site-footer nav {
	margin-top: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

footer#site-footer p {
	margin: 0;
}


/* -- Block - Posts -- */

div.block-posts {
	width: 100%;
	margin: 0 auto;
	padding: 25px 0 35px 0;
}

/* -- Block - Box -- */

.block-box {
	width: 100%;
	max-width: 850px;
	margin: 0 auto clamp(25px, 5%, 45px) auto;
	padding: clamp(25px, 5%, 65px);
	background: #EFEAE6;
	border-radius: 3px;
}

.block-box .container {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.block-box .container h2 {
	margin-top: 0;
}

.block-box .container p:first-of-type {
	margin-top: 0;
}

.block-box .container p:last-of-type {
	margin-bottom: 0;
}

/* -- Block - Comments */

.block-comments {
    width: 100%;
    max-width: 850px;
    margin: 45px auto 0 auto;
	overflow: hidden;
	text-align: center;
}

.block-comments .container {
	display: flex;
    flex-direction: column;
    width: 100%;
	text-align: left;
}

.block-comments > h3 {
	margin-top: 0;
	margin-bottom: 25px;
	display: inline-block;
	position: relative;
}

.block-comments > h3::before, .block-comments > h3::after {
	content: "";
	position: absolute;
	width: 100vw;
	height: 5px;
	border-bottom: solid 1px #A28C74;
	top: 50%;
}

.block-comments > h3::before {
	left: 100%; /* Line on right side */
	transform: translate(15px, -50%);
}

.block-comments > h3:after {
	right: 100%; /* Line on left side */
	transform: translate(-15px, -50%);
}

/* Reply box */
.block-comments div#respond {
    padding: 25px;
    border-radius: 3px;
    background: #EDEDE9;
}

.block-comments div#respond h3 {
	font-size: clamp(1rem, 0.8875rem + 0.4vw, 1.125rem); /* 16 / 18 */
	margin-top: 0;
	margin-bottom: 10px;
}

.block-comments div#respond h3 small a {
    float: right;
}

.block-comments div#respond form#commentform {
	display: flex;
    flex-direction: column;
}

.block-comments div#respond form#commentform input[type="text"], .block-comments div#respond form#commentform input[type="email"], .block-comments div#respond form#commentform textarea {
    min-height: 2rem;
    width: 100%;
	max-width: 350px;
    border: none;
    margin-left: 5px;
    font-size: clamp(0.875rem, 0.6042rem + 0.6667vw, 1rem); /* 16 / 14 */
    font-family: inherit;
    padding: 5px;
}

.block-comments div#respond form#commentform textarea {
	max-width: unset;
	margin: 5px 0 0 0;
	height: 100px;
	resize: none;
}

.block-comments div#respond form#commentform p {
	display: flex;
    justify-content: flex-start;
    align-items: baseline;
	margin-bottom: 5px;
}

.block-comments div#respond form#commentform p label {
	flex: none;
}

.block-comments div#respond form#commentform p.comment-notes {
	font-size: clamp(0.75rem, 0.6375rem + 0.4vw, 0.875rem); /* 14 / 12 */
	display: block;
}

.block-comments div#respond form#commentform p.comment-form-url {
    display: none; /* Hide Website form field */
}

.block-comments div#respond form#commentform p.comment-form-author {
    order: 1;
}

.block-comments div#respond form#commentform p.comment-form-email {
    order: 2;
}

.block-comments div#respond form#commentform p.comment-form-comment {
    order: 3;
	flex-direction: column;
}

.block-comments div#respond form#commentform p.comment-form-cookies-consent {
    order: 4;
	display: block;
}

.block-comments div#respond form#commentform p.form-submit {
    order: 5;
}

.block-comments div#respond form#commentform p.form-submit input[type="submit"] {
	font-weight: 700;
	font-family: 'Quicksand', sans-serif;
	font-size: inherit;
	line-height: inherit;
	text-align: center;
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	color: #222222;
	background: #DADAD2;
	border: none;
	transition: background	.5s ease;
}

.block-comments div#respond form#commentform p.form-submit input[type="submit"]:hover {
	background: #C8C8BC;
	cursor: pointer;
}

/* -- List - Comments -- */

ol.list-comments, ol.list-comments ol.children {
	list-style: none;
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
}

ol.list-comments ol.children {
	margin-top: 25px;
    margin-left: 45px;
    border-left: solid 1px #A28C74;
}

ol.list-comments li {
	background: #ffffff;
	padding: 25px;
	border-radius: 3px;
	margin-bottom: 15px;
}

ol.list-comments ol.children li {
    margin-bottom: 25px;
    padding: 0 25px;
}

ol.list-comments ol.children li:last-of-type {
	margin-bottom: 0;
}

ol.list-comments li div.comment-metadata a {
	font-size: clamp(0.8125rem, 0.7rem + 0.4vw, 0.9375rem); /* 15 / 13 */
	text-decoration: none;
}

ol.list-comments li a.comment-reply-link {
	font-family: 'Quicksand', sans-serif;
	width: max-content;
	font-weight: 700;
	text-align: center;
	display: block;
	padding: 4px 15px;
	text-decoration: none;
	color: #222222;
	background: #DADAD2;
	transition: background	.5s ease;
}

ol.list-comments li a.comment-reply-link:hover {
	background: #C8C8BC;
}


/* -- List - Blog -- */

ul.list-blog {
	width: 100%;
	margin: 0 auto;
	max-width: 650px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 55px;
}

ul.list-blog li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
}

ul.list-blog li .container-image {
	width: 100%;
	aspect-ratio: 16 / 9;
}

ul.list-blog li .container-image:hover img {
	transform: scale(1.05);
}

ul.list-blog li .container-image img {
	transition: transform .5s ease;
}

ul.list-blog li .container-text {
	padding: 0 25px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

ul.list-blog li .container-text > p {
	margin: 0;
}

.post-details {
	display: flex;
	align-items: center;
	gap: 10px;
}

.post-details .post-date::after {
	content: "|";
	margin-left: 10px;
	display: inline-block;
	font-weight: 400;
	color: #A28C74 !important;
}


/* -- List - Blog (Grid) -- */

ul.list-blog.grid {
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	gap: 35px;
	flex-wrap: wrap;
}

ul.list-blog.grid li {
	width: calc(49% - (25px / 2));
}

ul.list-blog.grid li .container-image {
	aspect-ratio: 1 / 1;
}

ul.list-blog.grid li .container-text {
	text-align: left;
	padding: 0;
}


/* -- Nav - Pagination -- */

.nav-pagination {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 45px;
}

div.nav-pagination ul.page-numbers, nav.nav-pagination .container {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

nav.nav-pagination .container {
	justify-content: space-between;
}


/* -- Singles Page -- */

.single-header, .single-content {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
}

.single-header {
	/* padding-top: clamp(25px, 5%, 45px); */
}

.single-header h2 {
	margin: 0;
	text-align: center;
}

.single-header .post-details {
	margin: 20px auto 30px;
	justify-content: center;
}

.single-header .container-image {
	width: 100%;
    max-width: 650px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
}

.single-content {
	padding: clamp(15px, 3%, 20px) 25px;
}

.single-content h2 {
	margin-top: clamp(25px, 3%, 35px);
}

.single-content blockquote {
	width: 100%;
	margin: clamp(15px, 3rem, 35px) auto;
	padding-left: 25px;
	border-left: solid 1px #70705C;
}

.single-content .wp-block-image {
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Related Posts */

div.related-posts {
	width: 100%;
	max-width: 850px;
	margin: 45px auto 0 auto;
	text-align: center;
	overflow: hidden;
}

div.related-posts h3 {
	margin-top: 0;
	margin-bottom: 25px;
	display: inline-block;
	position: relative;
}

div.related-posts h3::before, div.related-posts h3::after {
	content: "";
	position: absolute;
	width: 100vw;
	height: 5px;
	border-bottom: solid 1px #A28C74;
	top: 50%;
}

div.related-posts h3::before {
	left: 100%; /* Line on right side */
	transform: translate(15px, -50%);
}

div.related-posts h3:after {
	right: 100%; /* Line on left side */
	transform: translate(-15px, -50%);
}


/* -- Home Page (Blog Home) -- */

body.home div.block-posts {
	padding-top: 0;
}


/* -- About Page -- */

div#about-text .container h2 {
	margin-bottom: 35px;
}

div#about-photos {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	gap: 35px;
}

div#about-photos .container-image {
	aspect-ratio: 6 / 4;
}

div#about-photos .container-image:last-of-type img {
	object-position: bottom;
}


/* -- Contact Page -- */

div#contact-text .content {
	width: 100%;
	margin: 0 auto;
}

div#contact-text .container h2 {
	margin-bottom: 15px;
}


/* -- Default/Error Pages -- */
body.error404 main, div.error404, body.page-template-default main {
	width: 90%;
	margin: 0 auto;
}
body.error404 main, div.error404 {
    text-align: center;
}

/* -- Post Grid (Universal) -- */

/* -- Single Post Content Styles -- */

/* -- PAGES START -- */
/* -- PAGES END -- */

/* -- RESPONSIVE DESIGN -- */