/*!
Theme Name: Justread Recipes
Theme URI: https://gretathemes.com/wordpress-themes/justread/
Author: GretaThemes
Author URI: https://gretathemes.com
Description: Justread Recipes is a food-blog styled variant of Justread, recolored and re-fonted to match the nevaehrecipes.com look — soft off-white background, black-and-white footer, orange active-nav accent, compact bold uppercase logo, and Work Sans throughout.
Version: 1.4.1-recipes
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: justread
Tested up to: 5.6.1
Requires PHP: 5.6
Tags: blog, news, food-and-drink, grid-layout, one-column, three-columns, custom-background, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks
AMP: true

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

JustRead is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
}

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

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

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

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

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button, .site-main #infinite-handle span button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button, .site-main #infinite-handle span button {
	overflow: visible;
}

button, .site-main #infinite-handle span button,
select {
	text-transform: none;
}

button, .site-main #infinite-handle span button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled], .site-main #infinite-handle span button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner, .site-main #infinite-handle span button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body {
	color: #0a0a0a;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	color: #0f161a;
	line-height: 1.25;
	clear: both;
	margin: 1.5em 0 .5em;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
	margin-top: 0;
}

h1 {
	font-size: 2.4em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.2em;
}

h4 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

h5 {
	font-size: .8em;
}

h6 {
	font-size: .7em;
}

p {
	margin: 0 0 1.6em;
}

p:last-child {
	margin-bottom: 0;
}

blockquote {
	font-size: 1.2em;
	font-style: italic;
	border-top: 4px solid currentColor;
	padding: 1em 0 0 2.5em;
	margin: 0 0 1.6em;
	position: relative;
}

blockquote:before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: .06em;
	font-size: 3em;
	font-style: normal;
}

blockquote cite {
	display: block;
	margin-top: .8em;
	font-size: 14px;
	font-size: 0.875rem;
	text-transform: uppercase;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-style: normal;
	color: #757575;
}

blockquote cite:before {
	content: '\2014';
	margin-right: .5rem;
}

address {
	margin: 0 0 1.6em;
}

pre {
	background: #263238;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: .8em;
	line-height: 1.6;
	margin-bottom: 1.6em;
	overflow: auto;
	padding: 2em;
	color: #e3e6e8;
}

code, kbd, tt, var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 0.84090145em;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #f5f7f8;
	/* Fallback for when there is no custom background color defined. */
}

hr {
	background-color: rgba(38, 50, 56, 0.1);
	border: 0;
	height: 1px;
	margin-bottom: 1.6em;
	clear: both;
}

ul, ol {
	margin: 0 0 1.6em;
}

li > ul,
li > ol {
	margin-bottom: 0;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.6em;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
}

figure {
	margin: 0 0 1.6em;
	/* Extra wide images within figure tags don't overflow the content area. */
}

table {
	margin: 0 0 1.6em;
	width: 100%;
	font-size: 16px;
	font-size: 1rem;
}

th, td {
	padding: .5rem .75rem;
}

th:first-child, td:first-child {
	padding-left: 0;
}

th:last-child, td:last-child {
	padding-right: 0;
}

tr {
	border-bottom: 1px solid rgba(38, 50, 56, 0.1);
}

thead tr {
	border-width: .25rem;
}

thead th {
	text-transform: uppercase;
	text-align: left;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-size: 1rem;
}

.wp-block-pullquote.aligncenter, .wp-block-pullquote.alignwide, .wp-block-pullquote.alignfull, .wp-block-pullquote.alignleft, .wp-block-pullquote.alignright {
	text-align: left;
	padding: 1em 0 0 2.5em;
	background-color: #fff p;
	background-color-font-size: 24px;
}

.wp-block-pullquote.aligncenter cite, .wp-block-pullquote.alignwide cite, .wp-block-pullquote.alignfull cite, .wp-block-pullquote.alignleft cite, .wp-block-pullquote.alignright cite {
	font-size: 14px;
	text-align: left;
	color: #757575;
}

figure.wp-block-image.alignleft {
	padding: 1em 0 0 2.5em;
	margin-right: 1.5em;
}

figure.wp-block-image.alignright {
	padding: 1em 0 0 2.5em;
	margin-left: 1.5em;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.button,
.wp-block-button__link, button, .site-main #infinite-handle span button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	display: inline-block;
	border: 1px solid;
	border-color: #000;
	border-radius: 3px;
	background: #fff;
	color: #000;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1;
	padding: .6rem 1rem;
	transition: all .3s ease;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}

.button:hover,
.wp-block-button__link:hover,
button:hover,
.site-main #infinite-handle span button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: #fffcf4;
	color: #007BFF;
	border-color: #007BFF;
	opacity: 1;
	text-decoration: none;
}

.button:hover {
	text-decoration: none;
}

.wp-block-button.is-style-outline a {
	border: 2px solid #007BFF;
	background: transparent;
	color: #007BFF;
	border-radius: 3px;
	transition: all 0.3s;
}

.wp-block-button.is-style-outline a:hover {
	opacity: .8;
	text-decoration: unset;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid rgba(38, 50, 56, 0.1);
	border-radius: 3px;
	padding: .6875rem 1rem;
	line-height: 1;
	font-size: 16px;
	font-size: 1rem;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

select {
	border: 1px solid rgba(38, 50, 56, 0.1);
	padding: .4rem .5rem;
}

textarea {
	width: 100%;
	line-height: inherit;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: #007BFF;
	text-decoration: none;
	transition: all .3s;
}

a:hover {
	text-decoration: underline;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
/* Main navigation */
.main-navigation {
	text-transform: uppercase;
	font-size: 12px;
	font-size: 0.75rem;
	letter-spacing: .1em;
	font-weight: bold;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 10px 20px rgba(38, 50, 56, 0.1);
	float: left;
	position: absolute;
	top: 101%;
	left: 0;
	z-index: 99999;
	background: #fff;
	width: 220px;
	transform: translate3d(0, 10px, 0);
	opacity: 0;
	visibility: hidden;
	transition: all .3s;
}

.main-navigation ul ul ul {
	left: 100%;
	top: 0;
}

.main-navigation ul ul li {
	width: 100%;
}

.main-navigation ul ul a {
	border-bottom: 1px solid rgba(38, 50, 56, 0.1);
	padding-top: .75rem;
	padding-bottom: .75rem;
}

.main-navigation ul ul li:first-child > a {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}

.main-navigation ul ul li:last-child > a {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	transform: translate3d(0, 0, 0);
	opacity: 1;
	visibility: visible;
}

.main-navigation .menu-item-has-children > a::after,
.main-navigation .page_item_has_children > a::after {
	content: "";
	display: block;
	background: url(images/angle-down.svg) center right no-repeat;
	background-size: 12px 12px;
	width: 12px;
	height: 12px;
	position: absolute;
	z-index: 1001;
	right: 0;
	top: 50%;
	margin-top: -6px;
}

.main-navigation li .menu-item-has-children > a::after,
.main-navigation li .page_item_has_children > a::after {
	background-image: url(images/angle-right.svg);
	right: .75rem;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
	color: inherit;
	border-color: #007BFF;
}

.main-navigation li li:hover > a,
.main-navigation li li.focus > a {
	color: inherit;
	border-color: rgba(38, 50, 56, 0.1);
}

.main-navigation a {
	display: block;
	text-decoration: none;
	padding: 24px 16px 21px;
	color: #586674;
	border-bottom: 3px solid transparent;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
	color: inherit;
	border-color: #007BFF;
}

li .main-navigation .current_page_item > a, li
.main-navigation .current-menu-item > a, li
.main-navigation .current_page_ancestor > a, li
.main-navigation .current-menu-ancestor > a {
	border-color: rgba(38, 50, 56, 0.1);
}

.main-navigation li .current_page_item > a,
.main-navigation li .current-menu-item > a,
.main-navigation li .current_page_ancestor > a,
.main-navigation li .current-menu-ancestor > a {
	border-color: rgba(38, 50, 56, 0.1);
}

.menu-toggle {
	color: inherit;
	text-indent: -999em;
	margin-left: 4px;
	position: relative;
	padding: 0 0 0 1.25rem;
	background: transparent;
	border: none;
	font-weight: bold;
	font-size: 16px;
	font-size: 1rem;
}

.menu-toggle:before {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 0.9375rem;
	display: block;
	border-top: 0.5625rem double currentColor;
	border-bottom: 0.1875rem solid currentColor;
	transition: all .5s;
}

/* Small menu. */
.main-navigation.toggled .menu {
	position: absolute;
	right: 0;
	top: 101%;
	width: 100%;
}

.main-navigation.toggled ul {
	display: block;
	background: #fff;
	width: 100%;
	box-shadow: 0 10px 20px rgba(38, 50, 56, 0.1);
}

.main-navigation.toggled ul ul {
	visibility: visible;
	opacity: 1;
	position: static;
	float: none;
	transform: none;
	box-shadow: none;
}

.main-navigation.toggled ul ul a {
	padding-left: 2rem;
}

.main-navigation.toggled ul ul ul a {
	padding-left: 4rem;
}

.main-navigation.toggled li {
	float: none;
}

.main-navigation.toggled li:hover a {
	border-color: rgba(38, 50, 56, 0.1);
}

.main-navigation.toggled a {
	padding-top: .75rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid rgba(38, 50, 56, 0.1);
}

.main-navigation.toggled .menu-item-has-children > a:after,
.main-navigation.toggled .page_item_has_children > a:after {
	display: none;
}

@media (min-width: 1024px) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

/* Comment navigation */
.comment-navigation {
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	margin: 1rem 0;
}

.comment-navigation a {
	color: #757575;
}

.comment-list + .comment-navigation {
	margin: -3rem 0 2rem;
}

.comment-navigation .nav-previous {
	float: left;
}

.comment-navigation .nav-next {
	float: right;
	text-align: right;
}

/* Posts pagination */
.pagination {
	padding: 3rem 3rem 0;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	font-weight: bold;
}

a.page-numbers {
	background: #e2e6e9;
	padding: .75rem 1rem;
	border-radius: 2px;
	color: inherit;
	transition: all .2s;
	margin: 0 2px;
}

a.page-numbers:hover {
	text-decoration: none;
	background: #757575;
	color: #fff;
}

.current {
	background: none;
	color: inherit;
	background: #fff;
	line-height: 1;
	padding: .75rem 1rem;
	border-radius: 2px;
	border: 1px solid #e2e6e9;
}

/* Single post navigation */
.post-navigation {
	margin-top: 1.5rem;
}

.adjacent {
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.post-navigation .nav-links {
		display: flex;
		justify-content: center;
		margin-left: -3rem;
	}
	.adjacent {
		display: flex;
		width: 50%;
		padding: 1.5rem 0 1.5rem 3rem;
	}
}

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

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin: 1em 1.5em .5em 0;
}

.alignleft.wp-caption {
	margin-bottom: .5em;
}

.alignright {
	display: inline;
	float: right;
	margin: 1em 0 .5em 1.5em;
}

.alignright.wp-caption {
	margin-bottom: .5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Grids
--------------------------------------------------------------*/
.grid {
	display: flex;
	flex-wrap: wrap;
	padding: 0 .5rem;
}

.grid > * {
	padding: .5rem;
	width: 100%;
}

@media (min-width: 768px) {
	.grid {
		padding: 0 1.5rem;
	}
	.grid > * {
		padding: 1.5rem;
	}
	.grid--2 > *,
	.grid--3 > *,
	.grid--4 > * {
		width: 50%;
	}
}

@media (min-width: 1024px) {
	.grid--4 > *,
	.grid--3 > * {
		width: 33.3333%;
	}
}

@media (min-width: 1280px) {
	.grid--4 > * {
		width: 25%;
	}
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	/* Make sure select elements fit in widgets. */
}

.widget select {
	width: 100%;
	padding: .6875rem 1rem;
}

.widget ul {
	list-style: none;
	padding-left: 0;
}

.widget li {
	margin-bottom: .5rem;
}

.widget li ul {
	margin-top: .5rem;
}

.widget li li {
	padding-left: 0.8rem;
}

.widget-title {
	font-size: 14px;
	font-size: 0.875rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid rgba(38, 50, 56, 0.1);
	padding-bottom: .5rem;
}

.search-field {
	width: 100%;
}

.widget_wpcom_social_media_icons_widget a {
	color: inherit;
	font-size: 20px;
	font-size: 1.25rem;
}

.widget_wpcom_social_media_icons_widget a:hover {
	color: #0a0a0a;
}

/* Calendar widget */
#next {
	text-align: right;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/* Search form */
.form-wrapper {
	height: 0;
	background: #007BFF;
	padding: 0 2rem;
	transition: all .3s;
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.form-wrapper {
		padding-left: 6rem;
		padding-right: 6rem;
	}
}

.form-wrapper.is-visible {
	height: auto;
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.form-wrapper.is-visible .search-close {
	display: inline-block;
}

.form-wrapper .search-close {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 32px;
	font-size: 2rem;
	background: none;
	border: none;
	display: none;
}

@media (min-width: 768px) {
	.form-wrapper .search-close {
		top: 2rem;
		right: 2rem;
	}
}

.form-wrapper .search-field {
	font-size: 28.8px;
	font-size: 1.8rem;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	background: none;
	color: #fff;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #fff;
	width: 30em;
	max-width: 100%;
	margin: 0 auto;
	display: block;
	padding-left: 0;
	padding-right: 0;
}

.form-wrapper .search-field:focus {
	outline: none;
}

.form-wrapper .search-field::placeholder {
	color: #fff;
	opacity: .3;
}

.search-field {
	max-width: 30em;
}

/* Header */
.site-header {
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	background: #fff;
	border-bottom: 1px solid rgba(38, 50, 56, 0.1);
	padding: 0 1rem;
	margin-bottom: 4rem;
	position: relative;
	z-index: 2;
}

@media (min-width: 768px) {
	.site-header {
		padding: 0 3rem;
	}
}

.social-icons {
	display: flex;
	align-items: stretch;
}

.social-icons .jetpack-social-navigation {
	display: none;
}

@media (min-width: 1024px) {
	.social-icons .jetpack-social-navigation {
		display: flex;
		align-items: center;
	}
}

.social-icons .jetpack-social-navigation ul {
	margin: -7px 12px 0 0;
}

.social-icons .jetpack-social-navigation li {
	margin-right: 4px;
}

.social-icons .jetpack-social-navigation a {
	color: inherit;
}

.social-icons .jetpack-social-navigation a:hover {
	color: #007BFF;
}

/* Reference site's search icon is a plain minimal icon, no button box --
   overriding the generic bordered-button look for this one specifically. */
.social-icons .search-toggle {
	border: none;
	background: transparent;
	color: #2d2d2d;
	border-radius: 0;
	padding-left: 1rem;
	padding-right: 1rem;
}

.social-icons .search-toggle:hover {
	background: transparent;
	color: #007BFF;
	border-color: transparent;
}

.social-icons .search-toggle .icon {
	width: 16px;
	height: 16px;
}

@media (max-width: 1023px) {
	.social-icons .search-toggle {
		border: none;
		background: none;
		color: inherit;
		padding-left: 6px;
		padding-right: 6px;
	}
}

.navbar {
	display: flex;
	align-items: center;
	flex: 1;
}

.site-branding {
	margin: .5rem 1.5rem .5rem 0;
}

.site-title {
	margin: 0;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.25;
}

.site-title a {
	text-decoration: none;
	color: #0f161a;
}

.site-description {
	font-size: 12px;
	font-size: 0.75rem;
	color: #586674;
	font-weight: bold;
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.site-content {
	max-width: 100%;
	margin: 0 auto;
}

.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
}

/* Card */
.card {
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(38, 50, 56, 0.05);
	background: #fff;
	position: relative;
	transition: all .3s ease;
	width: 100%;
}

.card:hover {
	box-shadow: 0 8px 16px rgba(38, 50, 56, 0.1);
}

.card:hover .card__media img {
	transform: scale(1.1);
}

.card__body {
	padding: 1.5rem 2rem;
}

.card__subtitle {
	font-size: 12px;
	font-size: 0.75rem;
	color: #757575;
	text-transform: uppercase;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	letter-spacing: 1px;
}

.card__subtitle.cat-links {
	padding: 0;
	float: left;
	width: auto;
}

.card__title {
	font-size: 1.2em;
	margin: 0 0 8px;
	word-wrap: break-word;
}

.card__title a {
	color: inherit;
}

.card__content {
	clear: both;
	font-size: 16px;
	font-size: 1rem;
}

.card__media {
	display: block;
	overflow: hidden;
	border-radius: 4px 4px 0 0;
}

.card__media img {
	display: block;
	width: 100%;
	transition: all .3s ease;
}

.card__footer {
	font-size: 12px;
	font-size: 0.75rem;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card__footer img {
	vertical-align: middle;
	border-radius: 50%;
	margin-right: 3px;
}

.card__footer a {
	color: #757575;
}

.card__footer .byline,
.card__footer .posted-on {
	margin-top: 24px;
	margin-bottom: -3px;
}

.card a:hover {
	color: #007BFF;
	text-decoration: none;
}

.icon-bookmark {
	display: none;
}

.sticky .icon-bookmark {
	display: inline-block;
	position: absolute;
	top: 1rem;
	right: 1rem;
	fill: #c2ccd0;
}

/* Archive page */
.hfeed .site-content {
	max-width: 1280px;
}

.hfeed.error404 .site-content {
	max-width: 58.5rem;
	padding: 2rem;
}

.hfeed .format-quote blockquote {
	font-size: 1.5em;
	border-top: none;
	margin-bottom: 0;
	text-align: center;
	padding: 1em;
}

.hfeed .format-quote blockquote > * {
	position: relative;
	z-index: 2;
}

.hfeed .format-quote blockquote:before {
	top: 50%;
	left: 50%;
	margin-top: -39px;
	margin-left: -39px;
	font-size: 8em;
	color: rgba(38, 50, 56, 0.1);
	z-index: 1;
	line-height: 1;
}

.hfeed .format-quote blockquote cite {
	font-size: 12px;
	font-size: 0.75rem;
	position: absolute;
	left: -1.5rem;
	bottom: -2.7rem;
}

.hfeed .format-quote blockquote cite a {
	color: inherit;
}

.hfeed .format-quote blockquote cite a:hover {
	color: #007BFF;
}

.hfeed .format-quote .card__footer {
	display: block;
	text-align: right;
}

.hfeed .format-quote .byline {
	display: none;
}

.page-header {
	margin: 3rem;
	padding: 2rem;
	background: #e2e6e9;
	border-radius: 4px;
}

.page-title {
	font-size: 1.2em;
	margin: 0;
}

.archive-description {
	font-size: 16px;
	font-size: 1rem;
	margin-top: .5em;
}

.updated:not(.published) {
	display: none;
}

.page-links {
	clear: both;
}

/* Single posts and pages */
.page .site-content,
.single .site-content {
	width: 58.5rem;
}

.page .hentry,
.single .hentry {
	padding: 0;
}

.page .entry-header,
.single .entry-header {
	margin-bottom: 4rem;
	text-align: center;
}

.page .entry-title,
.single .entry-title {
	margin: 0 0 8px;
	word-wrap: break-word;
	font-size: 28.8px;
	font-size: 1.8rem;
}

@media (max-width: 959px) {
	.page .entry-title,
	.single .entry-title {
		padding: 0 10px;
	}
}

@media (min-width: 768px) {
	.page .entry-title,
	.single .entry-title {
		font-size: 38.4px;
		font-size: 2.4rem;
	}
}

.page .entry-meta,
.single .entry-meta {
	font-weight: bold;
	font-size: 12px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #757575;
}

.page .entry-meta a,
.single .entry-meta a {
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	color: #757575;
}

.page .entry-meta .on,
.single .entry-meta .on {
	font-style: italic;
	font-weight: normal;
	text-transform: none;
	margin: 0 5px;
}

.page .entry-meta .comments-link:before,
.single .entry-meta .comments-link:before {
	content: '\2014';
	display: inline-block;
	margin: 0 5px;
}

.page .entry-meta .avatar,
.single .entry-meta .avatar {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 5px;
}

.page .entry-body,
.single .entry-body {
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 7px 50px 0 rgba(38, 50, 56, 0.07);
	padding: 2rem;
	position: relative;
}

.page .entry-media,
.single .entry-media {
	position: relative;
	margin: -2rem -2rem 4rem;
}

@media (min-width: 768px) {
	.page .entry-media,
	.single .entry-media {
		margin: -4rem -4rem 4rem;
	}
}

@media (min-width: 1024px) {
	.page .entry-media,
	.single .entry-media {
		margin: -4rem -8rem 4rem;
	}
}

.page .singular-thumbnail,
.single .singular-thumbnail {
	display: block;
	width: 100%;
}

@media (min-width: 1024px) {
	.page .singular-thumbnail,
	.single .singular-thumbnail {
		border-radius: 4px 4px 0 0;
	}
}

.page .entry-content > p:first-child,
.single .entry-content > p:first-child {
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-size: 1.2em;
	font-weight: 300;
	color: #757575;
}

.page .entry-content pre,
.single .entry-content pre {
	margin-left: -2rem;
	margin-right: -2rem;
	padding-left: 2rem;
	padding-right: 2rem;
}

@media (min-width: 768px) {
	.page .entry-body,
	.single .entry-body {
		padding-left: 4rem;
		padding-right: 4rem;
	}
	.page .entry-content pre,
	.single .entry-content pre {
		margin-left: -4rem;
		margin-right: -4rem;
		padding-left: 4rem;
		padding-right: 4rem;
	}
}

@media (min-width: 1024px) {
	.page .entry-body,
	.single .entry-body {
		padding: 4rem 8rem;
	}
	.page .entry-content pre,
	.single .entry-content pre {
		margin-left: -8rem;
		margin-right: -8rem;
		padding-left: 8rem;
		padding-right: 8rem;
	}
}

.entry-content {
	word-wrap: break-word;
}

.entry-footer {
	margin: 3rem -1rem 0;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-size: 14px;
	font-size: 0.875rem;
	display: flex;
	flex-wrap: wrap;
}

.cat-links,
.tags-links {
	flex-basis: 100%;
	padding: 1rem;
}

@media (min-width: 768px) {
	.cat-links,
	.tags-links {
		flex-basis: 50%;
	}
}

.cat-links__title,
.tags-links__title {
	text-transform: uppercase;
	display: block;
	color: #757575;
	font-size: 12px;
	font-size: 0.75rem;
	margin-bottom: 1em;
	border-bottom: 1px solid rgba(38, 50, 56, 0.1);
}

.tag-cloud-link,
.tags-links a {
	display: inline-block;
	border: 1px solid #007BFF;
	color: #007BFF;
	padding: .2em 1em;
	border-radius: 99px;
	transition: all .2s;
	margin: 0 .25rem .5rem 0;
	text-transform: lowercase;
}

.tag-cloud-link:hover,
.tags-links a:hover {
	background: #007BFF;
	color: #fff;
	text-decoration: none;
}

.entry-footer .edit-link {
	flex-basis: 100%;
	padding-left: 1rem;
	margin-top: 2rem;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-size: 14px;
	font-size: 0.875rem;
}

.entry-footer .edit-link a {
	color: #757575;
}

/* Jetpack sharing icons */
.adjacent .sharedaddy {
	display: none;
}

@media (min-width: 1200px) {
	.sticky-sharing .sharedaddy {
		position: absolute !important;
		top: 0;
		left: -72px;
		width: 64px;
		text-align: center;
		will-change: min-height;
	}
	.sticky-sharing .sharedaddy .sd-title.sd-title:before {
		display: none;
	}
	.sticky-sharing .sharedaddy .sd-content li {
		display: block;
		margin-right: 0;
	}
	.sticky-sharing .sharedaddy .sh-sharing {
		transform: translate(0, 0);
		/* For browsers don't support translate3d. */
		transform: translate3d(0, 0, 0);
	}
}

/* No content */
.no-results {
	width: 100%;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comments-area {
	font-size: 16px;
	font-size: 1rem;
	width: 36em;
	max-width: 100%;
	padding: 2em;
	margin: 4rem auto 0;
}

.comments-title {
	font-size: 16px;
	font-size: 1rem;
	color: #757575;
	margin: 0 0 2rem;
	text-align: center;
}

.comment-list {
	list-style: none;
	padding-left: 0;
	margin-bottom: 4rem;
}

.comment-list .comment-respond {
	margin-bottom: 1.6rem;
}

.comment > .children {
	padding-left: 1.6rem;
	list-style: none;
}

.comment-body {
	padding: 27.6px 1.6rem 1.6rem;
	border-radius: .25rem;
	background: #fff;
	margin-bottom: 1.6rem;
}

.comment-meta {
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	margin-bottom: 1.6em;
}

.comment-author {
	font-size: 1rem;
	line-height: 1.25;
}

.comment-author .avatar {
	border-radius: 100%;
	margin-right: 8px;
	float: left;
	margin-top: -2px;
}

.says {
	display: none;
}

.comment-metadata {
	font-size: .75rem;
	margin-left: 48px;
}

.comment-metadata a {
	color: #757575;
}

.comment-metadata .edit-link {
	margin-left: .25rem;
}

.reply {
	display: inline-block;
	margin-top: 1.6rem;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
}

.reply a {
	color: #757575;
}

.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		flex-direction: row;
		align-items: center;
	}
	.comment-form-author label,
	.comment-form-email label,
	.comment-form-url label {
		order: 2;
		margin-left: 1em;
	}
}

.required {
	color: #e7040f;
}

.no-comments {
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	color: #757575;
}

/*--------------------------------------------------------------
## Gutenberg
--------------------------------------------------------------*/
@media (min-width: 768px) {
	.entry-content .alignfull {
		margin-left: calc(50% - 49.5vw);
		margin-right: calc(50% - 49.4vw);
		width: auto;
		max-width: 1000%;
		background-color: #fff;
		padding-bottom: 24px;
	}
	.entry-content .alignfull iframe {
		width: 100%;
	}
}

.entry-content .alignwide,
.entry-content .is-large {
	margin-left: -8rem;
	width: calc(100% + 16rem);
	max-width: calc(100% + 16rem);
}

@media (max-width: 1023px) {
	.entry-content .alignwide, .entry-content .alignfull {
		margin-left: -2rem;
		width: calc(100% + 4rem);
		max-width: calc(100% + 4rem);
	}
}

.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
	padding: 1em 0 0 2.5em;
}

.wp-block-quote.is-large cite,
.wp-block-quote.is-large footer,
.wp-block-quote.is-style-large cite,
.wp-block-quote.is-style-large footer {
	font-size: 14px;
	text-align: left;
}

/* Footer */
.site-footer {
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	font-size: 14px;
	font-size: 0.875rem;
	margin-top: 5rem;
	border-top: 1px solid rgba(38, 50, 56, 0.1);
	color: #757575;
}

.footer-widgets {
	max-width: 1280px;
	margin: 0 auto;
	border-bottom: 1px solid rgba(38, 50, 56, 0.1);
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.footer-widgets .widget_wpcom_social_media_icons_widget li {
	display: inline-block;
}

.footer-widgets .widget_wpcom_social_media_icons_widget .genericon {
	font-size: 24px;
}

.site-info {
	font-size: 12px;
	font-size: 0.75rem;
	text-align: center;
	padding: 2rem;
}

.site-info a {
	color: inherit;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .pagination,
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/* Load more button */
.infinite-loader,
#infinite-handle {
	flex-basis: 100%;
	text-align: center;
}

#infinite-handle span {
	background: none;
	border-radius: 0;
	padding: 0;
	display: inline-block;
	color: inherit;
}

.site-main #infinite-handle span button {
	background: #e2e6e9;
	border-color: #e2e6e9;
	color: inherit;
}

.site-main #infinite-handle span button:hover {
	background: #757575;
	border-color: #757575;
	opacity: 1;
	color: #fff;
}

/* Spinner */
.spinner {
	left: 50% !important;
	margin-left: -8px;
}

/* Infinite footer */
#infinite-footer .container {
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	border-color: rgba(38, 50, 56, 0.1);
}

#infinite-footer .blog-info a {
	color: #0f161a;
}

#infinite-footer .blog-credits,
#infinite-footer .blog-credits a {
	color: #757575;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 2rem;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption-text {
	text-align: center;
	margin-top: .875rem;
	font-size: .875rem;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
	color: #757575;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 50%;
	padding: 0 5px;
}

@media (min-width: 576px) {
	.gallery-columns-2 .gallery-item {
		max-width: 50%;
	}
	.gallery-columns-3 .gallery-item {
		max-width: 33.33%;
	}
	.gallery-columns-4 .gallery-item {
		max-width: 25%;
	}
	.gallery-columns-5 .gallery-item {
		max-width: 20%;
	}
	.gallery-columns-6 .gallery-item {
		max-width: 16.66%;
	}
	.gallery-columns-7 .gallery-item {
		max-width: 14.28%;
	}
	.gallery-columns-8 .gallery-item {
		max-width: 12.5%;
	}
	.gallery-columns-9 .gallery-item {
		max-width: 11.11%;
	}
}

.gallery-caption {
	display: block;
}

/*# sourceMappingURL=style.css.map */

/*--------------------------------------------------------------
# Pro Features
--------------------------------------------------------------*/

/* Reading progress bar */
.reading-progress-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: transparent;
	z-index: 99999;
	pointer-events: none;
}

.reading-progress-bar {
	height: 100%;
	width: 0;
	background: #007BFF;
	transition: width 0.1s linear;
}

/* Equal height cards on home/archive grid */
.hfeed .grid > article {
	display: flex;
}

.hfeed .grid article .card {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hfeed .grid article .card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hfeed .grid article .card__footer {
	margin-top: auto;
}

/* Dark mode toggle button — use .social-icons parent for specificity over button defaults */
.social-icons .dark-mode-toggle {
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.75rem;
	border-radius: 0;
	line-height: 1;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.social-icons .dark-mode-toggle:hover {
	opacity: 1;
	background: transparent;
}

.social-icons .dark-mode-toggle svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 1023px) {
	.social-icons .dark-mode-toggle {
		padding-left: 4px;
		padding-right: 4px;
	}
}

.dark-mode-toggle .icon-sun {
	display: none;
}

.dark-mode-toggle .icon-moon {
	display: block;
}

.dark-mode .dark-mode-toggle .icon-sun {
	display: block;
}

.dark-mode .dark-mode-toggle .icon-moon {
	display: none;
}

/* Related posts */
.related-posts {
	max-width: 50em;
	margin: 3rem auto 4rem;
	padding: 0 1.5rem;
}

@media (min-width: 768px) {
	.related-posts {
		padding: 0;
	}
}

.related-posts__title {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-bottom: 1px solid rgba(38, 50, 56, 0.1);
	padding-bottom: 1rem;
	margin: 0 0 2rem;
}

.related-posts__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 600px) {
	.related-posts__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.related-post .card__title {
	font-size: 1em;
}

/* Force consistent image height + equal-height cards in related posts */
.related-posts__grid .related-post {
	display: flex;
}

.related-posts__grid .related-post .card {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.related-post .card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px 4px 0 0;
}

.related-post .card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/*--------------------------------------------------------------
# Dark Mode
--------------------------------------------------------------*/
.dark-mode {
	color-scheme: dark;
}

.dark-mode body {
	background: #121820;
	color: #c8d2da;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
	color: #e2e8ed;
}

.dark-mode a {
	color: #4d9fff;
}

.dark-mode .site-header {
	background: #1c2430;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .site-title a {
	color: #e2e8ed;
}

.dark-mode .site-description {
	color: #8a8a8a;
}

.dark-mode .main-navigation a {
	color: #8a8a8a;
}

.dark-mode .main-navigation li:hover > a,
.dark-mode .main-navigation li.focus > a,
.dark-mode .main-navigation .current_page_item > a,
.dark-mode .main-navigation .current-menu-item > a,
.dark-mode .main-navigation .current_page_ancestor > a,
.dark-mode .main-navigation .current-menu-ancestor > a {
	color: #e2e8ed;
	border-color: #4d9fff;
}

.dark-mode .main-navigation ul ul,
.dark-mode .main-navigation.toggled ul {
	background: #1c2430;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .main-navigation ul ul a,
.dark-mode .main-navigation.toggled a {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .card {
	background: #1c2430;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-mode .card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.dark-mode .card__subtitle,
.dark-mode .card__footer a,
.dark-mode .card__footer .byline,
.dark-mode .card__footer .posted-on {
	color: #8a8a8a;
}

.dark-mode .card__title a {
	color: #e2e8ed;
}

.dark-mode .card a:hover {
	color: #4d9fff;
}

.dark-mode pre {
	background: #0d1117;
}

.dark-mode hr,
.dark-mode tr {
	border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="url"],
.dark-mode input[type="password"],
.dark-mode input[type="search"],
.dark-mode input[type="number"],
.dark-mode input[type="tel"],
.dark-mode textarea,
.dark-mode select {
	color: #c8d2da;
	background: #242e3a;
	border-color: rgba(255, 255, 255, 0.12);
}

.dark-mode .form-wrapper {
	background: #1c2430;
}

.dark-mode .site-footer {
	background: #0e1419;
}


.dark-mode .site-info {
	color: #8a8a8a;
}

.dark-mode .site-info a {
	color: #8a8a8a;
}

.dark-mode .related-posts__title {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark-mode mark,
.dark-mode ins {
	background: #3a3000;
	color: #e2e8ed;
}

.dark-mode .comment-navigation a {
	color: #8a8a8a;
}

.dark-mode blockquote {
	color: #c8d2da;
}

.dark-mode .wp-caption-text {
	color: #8a8a8a;
}

.dark-mode .site-main #infinite-handle span button {
	background: #242e3a;
	border-color: #242e3a;
	color: #c8d2da;
}

.dark-mode .site-main #infinite-handle span button:hover {
	background: #4d9fff;
	border-color: #4d9fff;
	color: #fff;
}

/*--------------------------------------------------------------
# Post Page Navigation (page break next/prev)
--------------------------------------------------------------*/
.post-page-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 2rem 0 1rem;
	padding: 2px 5px;
	border-radius: 3px;
}

.post-page-nav__btn {
	display: inline-block;
	background: #000;
	color: #fff;
	padding: 5px 8px;
	border-radius: 3px;
	text-decoration: none;
	width: fit-content;
	white-space: nowrap;
}

.post-page-nav__btn:hover {
	background: #333;
	color: #fff;
	text-decoration: none;
}

.post-page-nav__before {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	color: #757575;
}

.post-page-nav__spacer {
	width: fit-content;
	visibility: hidden;
}

.dark-mode .post-page-nav__btn {
	background: #fff;
	color: #000;
}

.dark-mode .post-page-nav__btn:hover {
	background: #e0e0e0;
	color: #000;
}


/*--------------------------------------------------------------
# Ad Zones
--------------------------------------------------------------*/
.justread-ad {
	text-align: center;
	overflow: hidden;
}

.justread-ad--ad-after-header {
	padding: 0.5rem 0;
	background: #f5f7f8;
}

.justread-ad--ad-before-content,
.justread-ad--ad-after-content {
	margin: 2rem 0;
}

.justread-ad--ad-footer {
	padding: 1rem;
	background: #f5f7f8;
}

.dark-mode .justread-ad--ad-after-header,
.dark-mode .justread-ad--ad-footer {
	background: #0e1419;
}

/* Read More expander (Single Page mode) */
.justread-read-more-wrap {
	margin: 1.5rem 0;
	text-align: center;
}

.justread-read-more-btn {
	display: inline-block;
	padding: .65rem 2rem;
	background: #fff;
	color: #000;
	border: 1px solid #000;
	border-radius: 4px;
	cursor: pointer;
	font-size: .95rem;
	font-weight: 600;
	transition: all .2s;
}

.justread-read-more-btn:hover {
	background: #fffcf4;
	color: #007BFF;
	border-color: #007BFF;
}

.justread-more-content {
	display: none;
}

.justread-more-content.is-open {
	display: block;
}

.dark-mode .justread-read-more-btn {
	background: #1a6fb5;
}

/* Pagination — mobile fix */
@media (max-width: 767px) {
	.pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 6px;
	}

	.pagination .nav-links a.page-numbers,
	.pagination .nav-links span.page-numbers {
		margin: 0;
	}
}

/*--------------------------------------------------------------
# Nevaeh Recipes skin
Styled after https://nevaehrecipes.com — food-blog look: soft
off-white page background, black/white footer, orange active-nav
accent, and a handwritten script logo over a clean sans body.
Fonts are enqueued in functions.php (justread_recipes_fonts).
--------------------------------------------------------------*/

body {
	background-color: #f7f4f6;
	font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	/* Original theme's reading-mode base is 20px; that's what was making
	   headings, card titles, and widget titles all render oversized since
	   they're sized in em off this. 16px matches the reference site and
	   shrinks all of those proportionally in one place. */
	font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
}

/* .site-title text sizing/weight now lives on .site-title__line1/__line2
   (see the header logo lockup section below) since the title renders as
   two stacked spans instead of one line. */

.main-navigation a {
	font-family: 'Work Sans', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	color: #2d2d2d;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
	color: #fb8500;
	border-color: #fb8500;
}

.site-footer {
	background: #000;
	color: #fff;
	border-top: none;
}

.site-footer a,
.site-info a {
	color: #007BFF;
}

.site-footer a:hover,
.site-info a:hover {
	color: #fff;
}

.footer-widgets .widget-title {
	color: #fff;
}

/* Core Search block button (sidebar widget) loads its own class-based
   style, which beats the plain `button{}` rule above on specificity --
   override it directly so it matches the same white/black/blue-hover look. */
.wp-block-search__button {
	background: #fff;
	color: #000;
	border: 1px solid #000;
	border-radius: 3px;
}

.wp-block-search__button:hover {
	background: #fffcf4;
	color: #007BFF;
	border-color: #007BFF;
}

/*--------------------------------------------------------------
## Homepage: single-column post list + sidebar (index.php only)
Styled after nevaehrecipes.com's blog list. archive.php / search.php
keep the original card grid untouched.
--------------------------------------------------------------*/
.site-content-layout {
	display: flex;
	align-items: flex-start;
	gap: 3rem;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.site-main.post-list {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
}

/* First post is the featured/hero item and spans both columns; every post
   after it takes a single column. */
.post-list .post-list__item:first-child {
	grid-column: 1 / -1;
}

/* Pagination is a grid child too (it's a sibling of the articles inside
   .post-list) -- span it full width instead of collapsing into one column. */
.site-main.post-list > .pagination {
	grid-column: 1 / -1;
}

@media (max-width: 700px) {
	.site-main.post-list {
		grid-template-columns: 1fr;
	}
}

.post-list .card--list {
	width: 100%;
	height: 100%;
	box-shadow: none;
	border-radius: 4px;
	border: 1px solid rgba(38, 50, 56, 0.08);
	padding-bottom: 2rem;
}

.post-list .card--list .card__body {
	padding: 0;
}

/* Title/meta and excerpt get inset padding from the card edges; the photo
   (.card__media, below) stays edge-to-edge/full-bleed within the card. */
.post-list .card--list .entry-header {
	padding: 2rem 2rem 0;
}

.post-list .card--list .entry-content {
	padding: 0 2rem;
}

@media (max-width: 600px) {
	.post-list .card--list .entry-header {
		padding: 1.25rem 1.25rem 0;
	}
	.post-list .card--list .entry-content {
		padding: 0 1.25rem;
	}
}

.post-list .card--list .card__title {
	font-size: 1.75em;
	margin-bottom: .25rem;
}

.post-list .card--list .card__footer--meta {
	justify-content: flex-start;
	gap: .5rem;
	color: #757575;
	margin-bottom: 1.5rem;
}

.post-list .card--list .card__footer--meta .byline,
.post-list .card--list .card__footer--meta .posted-on {
	margin: 0;
}

.post-list .card--list .card__media {
	display: block;
	border-radius: 4px;
	margin-bottom: 1.5rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.post-list .card--list .card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-list .card--list .card__content {
	font-size: 1.05rem;
	line-height: 1.7;
}

/* Sidebar */
#secondary.widget-area {
	flex: 0 0 320px;
	width: 320px;
}

@media (max-width: 900px) {
	.site-content-layout {
		flex-direction: column;
	}
	#secondary.widget-area {
		width: 100%;
		flex-basis: auto;
	}
}

.author-bio {
	text-align: center;
	margin-bottom: 2.5rem;
	padding: 2rem;
	background: #fff;
	border-radius: 8px;
}

.author-bio__avatar {
	margin-bottom: 1rem;
}

.author-bio__avatar img {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	margin: 0 auto;
	border-radius: 0;
}

.author-bio__avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 220px;
	height: 220px;
	max-width: 100%;
	margin: 0 auto;
	border-radius: 0;
	background: #f0f0f0;
}

.author-bio__hi {
	font-weight: 700;
	color: #000;
}

.author-bio__text {
	font-size: .9rem;
	line-height: 1.6;
	color: #757575;
	margin: 0;
}

/*--------------------------------------------------------------
## Header logo lockup + top bar
Bowl/whisk icon over a stacked two-line wordmark, plus a thin black
strip above the header -- styled after nevaehrecipes.com's header.
--------------------------------------------------------------*/
.top-bar-strip {
	background: #000;
	height: 20px;
}

/* Header layout: .site-header is the full-width white bar; inside it,
   .site-header-container is a centered, max-width wrapper holding exactly
   two groups spaced with justify-content: space-between -- the logo on the
   left, and (nav + dark-mode/search icons together) on the right. */
.site-header {
	display: block;
	padding: 0;
}

/* The base theme's float clearfix (:before/:after {content:"";display:table})
   still targets .site-header. Neither the old float layout nor this new
   flex one needs it, but leaving it in place risks it being picked up as a
   real flex item, so it's disabled here rather than relied on to no-op. */
.site-header::before,
.site-header::after {
	display: none;
}

.site-header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
}

@media (min-width: 768px) {
	.site-header-container {
		padding: 0 3rem;
	}
}

.site-header-right {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.main-navigation {
	display: flex;
}

.site-branding {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.site-logo-icon {
	display: block;
	line-height: 0;
	margin-bottom: .25rem;
}

.site-logo-icon svg {
	width: 34px;
	height: 34px;
}

/* Theme-owned logo file (images/logo.*), when present. */
.site-logo-image-link {
	display: block;
	margin-bottom: .25rem;
}

.site-logo-image {
	display: block;
	height: 56px;
	width: auto;
}

.site-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
}

.site-title a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.site-title__line1 {
	font-family: 'Work Sans', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1.1em;
	color: #0a0a0a;
}

.site-title__line2 {
	font-family: 'Work Sans', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: .6em;
	color: #0a0a0a;
	margin-top: .15em;
}

/*--------------------------------------------------------------
## Sidebar: white card widgets + horizontal Recent Posts thumbnails
--------------------------------------------------------------*/
#secondary.widget-area .widget {
	background: #fff;
	padding: 2rem;
	border-radius: 8px;
	margin-bottom: 2rem;
}

/* Recent Posts: small square thumbnail beside the title, one row per post
   (the block's own className, set when the widget content was configured). */
.justread-recent-posts-thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.justread-recent-posts-thumbs li {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1rem;
}

.justread-recent-posts-thumbs li:last-child {
	margin-bottom: 0;
}

.justread-recent-posts-thumbs .wp-block-latest-posts__featured-image {
	flex-shrink: 0;
	float: none;
	margin: 0;
}

.justread-recent-posts-thumbs .wp-block-latest-posts__featured-image img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
}

.justread-recent-posts-thumbs .wp-block-latest-posts__post-title {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	line-height: 1.3;
	color: #0a0a0a;
	text-decoration: none;
}

.justread-recent-posts-thumbs .wp-block-latest-posts__post-title:hover {
	color: #007BFF;
}