/*!
Theme Name: Justread
Theme URI: https://gretathemes.com/wordpress-themes/justread/
Author: GretaThemes
Author URI: https://gretathemes.com
Description: Justread is a clean and modern WordPress theme that focuses on reading experience. Justread has a grid layout with single column content. The theme uses system fonts and SVG for fast loading. Enjoy reading long content with comfortability.
Version: 1.4.1
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: #263238;
	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: #6f8590;
}

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: #6f8590;
}

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: #06c;
	border-radius: 3px;
	background: #06c;
	color: #fff;
	font-size: 14px;
	font-size: 0.875rem;
	line-height: 1;
	padding: .75rem 1.25rem;
	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 {
	opacity: .8;
	text-decoration: none;
}

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

.wp-block-button.is-style-outline a {
	border: 2px solid #06c;
	background: transparent;
	color: #06c;
	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: #06c;
	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: #06c;
}

.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: #06c;
}

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: #6f8590;
}

.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: #6f8590;
	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: #263238;
}

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

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/* Search form */
.form-wrapper {
	height: 0;
	background: #06c;
	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: #06c;
}

.social-icons .search-toggle {
	border-radius: 0;
	padding-left: 1.6rem;
	padding-right: 1.6rem;
}

@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: #6f8590;
	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: #6f8590;
}

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

.card a:hover {
	color: #06c;
	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: #06c;
}

.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: #6f8590;
}

.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: #6f8590;
}

.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: #6f8590;
}

.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: #6f8590;
	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 #06c;
	color: #06c;
	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: #06c;
	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: #6f8590;
}

/* 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: #6f8590;
	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: #6f8590;
}

.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: #6f8590;
}

.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: #6f8590;
}

/*--------------------------------------------------------------
## 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: #6f8590;
}

.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: #6f8590;
	border-color: #6f8590;
	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: #6f8590;
}

/*--------------------------------------------------------------
# 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: #6f8590;
}

/*--------------------------------------------------------------
## 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 */
/* ==========================================================
   Equal height blog cards - added by ChatGPT
   Keeps all post boxes/cards aligned with the same height.
   ========================================================== */
.home .site-main.grid > article,
.archive .site-main.grid > article,
.search .site-main.grid > article,
.blog .site-main.grid > article {
	display: flex;
}

.home .site-main.grid > article > .card,
.archive .site-main.grid > article > .card,
.search .site-main.grid > article > .card,
.blog .site-main.grid > article > .card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 520px;
	overflow: hidden;
}

.home .card .card__media,
.archive .card .card__media,
.search .card .card__media,
.blog .card .card__media {
	flex: 0 0 230px;
	height: 230px;
	overflow: hidden;
}

.home .card .card__media img,
.archive .card .card__media img,
.search .card .card__media img,
.blog .card .card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home .card .card__body,
.archive .card .card__body,
.search .card .card__body,
.blog .card .card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.home .card .entry-header,
.archive .card .entry-header,
.search .card .entry-header,
.blog .card .entry-header {
	flex: 0 0 auto;
}

.home .card .card__title,
.archive .card .card__title,
.search .card .card__title,
.blog .card .card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.1em;
}

.home .card .card__content,
.archive .card .card__content,
.search .card .card__content,
.blog .card .card__content {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 4.8em;
}

.home .card .card__content p,
.archive .card .card__content p,
.search .card .card__content p,
.blog .card .card__content p {
	margin-bottom: 0;
}

.home .card .card__footer,
.archive .card .card__footer,
.search .card .card__footer,
.blog .card .card__footer {
	margin-top: auto;
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	.home .site-main.grid > article > .card,
	.archive .site-main.grid > article > .card,
	.search .site-main.grid > article > .card,
	.blog .site-main.grid > article > .card {
		min-height: 0;
	}
}


/* Final cleanup: hide category and date/author inside post boxes */
.home .card .card__subtitle,
.archive .card .card__subtitle,
.search .card .card__subtitle,
.blog .card .card__subtitle,
.home .card .cat-links,
.archive .card .cat-links,
.search .card .cat-links,
.blog .card .cat-links,
.home .card .card__footer,
.archive .card .card__footer,
.search .card .card__footer,
.blog .card .card__footer,
.home .card .posted-on,
.archive .card .posted-on,
.search .card .posted-on,
.blog .card .posted-on,
.home .card .byline,
.archive .card .byline,
.search .card .byline,
.blog .card .byline {
	display: none !important;
}

/* Keep the cards balanced after removing category/date */
.home .card .card__body,
.archive .card .card__body,
.search .card .card__body,
.blog .card .card__body {
	justify-content: flex-start;
}


/* ==========================================================
   Professional Blog UI + Animated Article Cards
   Added for a cleaner food/blog layout, smoother motion,
   stronger readability, and better visual engagement.
   ========================================================== */
:root {
	--jr-bg: #f7f8fb;
	--jr-surface: #ffffff;
	--jr-text: #172026;
	--jr-muted: #6b7a86;
	--jr-accent: #ff6b35;
	--jr-accent-dark: #e95520;
	--jr-border: rgba(23, 32, 38, 0.08);
	--jr-shadow: 0 14px 40px rgba(23, 32, 38, 0.08);
	--jr-shadow-hover: 0 24px 60px rgba(23, 32, 38, 0.16);
}

body {
	background: radial-gradient(circle at top left, rgba(255,107,53,.08), transparent 32rem), var(--jr-bg);
	color: var(--jr-text);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 8px 30px rgba(23, 32, 38, 0.06);
	border-bottom: 1px solid var(--jr-border);
	margin-bottom: 3rem;
}

.admin-bar .site-header {
	top: 32px;
}

.site-title a {
	letter-spacing: -0.03em;
}

.site-description {
	font-weight: 600;
	letter-spacing: .02em;
}

.main-navigation a {
	transition: color .2s ease, transform .2s ease;
}

.main-navigation a:hover {
	color: var(--jr-accent);
}

.site-main.grid {
	max-width: 1240px;
	margin: 0 auto;
}

.home .site-main.grid > article,
.archive .site-main.grid > article,
.search .site-main.grid > article,
.blog .site-main.grid > article {
	perspective: 1000px;
}

.card {
	border: 1px solid var(--jr-border);
	border-radius: 22px;
	box-shadow: var(--jr-shadow);
	background: var(--jr-surface);
	transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
	will-change: transform;
}

.card:hover {
	transform: translateY(-10px);
	box-shadow: var(--jr-shadow-hover);
	border-color: rgba(255, 107, 53, 0.25);
}

.card:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(255,107,53,.13), transparent 42%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.card:hover:before {
	opacity: 1;
}

.card__media {
	border-radius: 22px 22px 0 0;
	background: #eef1f4;
	position: relative;
}

.card__media:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	background: linear-gradient(to top, rgba(0,0,0,.20), transparent);
	opacity: .75;
	pointer-events: none;
}

.card__media img {
	transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.card:hover .card__media img {
	transform: scale(1.08) rotate(.7deg);
	filter: saturate(1.08) contrast(1.03);
}

.card__body {
	padding: 1.35rem 1.45rem 1.55rem;
}

.card__title {
	font-size: clamp(1.05rem, 1.3vw, 1.28rem);
	line-height: 1.35;
	letter-spacing: -0.025em;
	margin-bottom: .75rem;
}

.card__title a {
	background-image: linear-gradient(var(--jr-accent), var(--jr-accent));
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	transition: background-size .28s ease, color .28s ease;
}

.card__title a:hover {
	color: var(--jr-text);
	background-size: 100% 2px;
}

.card__content {
	color: var(--jr-muted);
	line-height: 1.72;
}

.card__footer {
	border-top: 1px solid var(--jr-border);
	padding-top: 1rem;
	margin-top: 1.2rem;
	color: var(--jr-muted);
}

.card__read-more {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1.15rem;
	font-size: .88rem;
	font-weight: 800;
	letter-spacing: .01em;
	color: #fff !important;
	background: linear-gradient(135deg, var(--jr-accent), var(--jr-accent-dark));
	padding: .72rem 1rem;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(255, 107, 53, 0.24);
	transition: transform .25s ease, box-shadow .25s ease;
}

.card__read-more:hover {
	transform: translateX(3px);
	box-shadow: 0 16px 34px rgba(255, 107, 53, 0.32);
	text-decoration: none;
}

.card__read-more:after {
	content: "→";
	font-size: 1rem;
	line-height: 1;
}

.card__category-pill {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	margin-bottom: .85rem;
	padding: .4rem .68rem;
	border-radius: 999px;
	background: rgba(255, 107, 53, .10);
	color: var(--jr-accent-dark);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Scroll reveal animation for articles */
.js .site-main.grid > article {
	opacity: 0;
	transform: translateY(34px) scale(.985);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
	transition-delay: calc(var(--jr-card-index, 0) * 80ms);
}

.js .site-main.grid > article.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.no-js .site-main.grid > article,
.js .site-main.grid > article.no-animation {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}

	.js .site-main.grid > article {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 767px) {
	.site-header {
		margin-bottom: 1.5rem;
	}

	.home .site-main.grid > article > .card,
	.archive .site-main.grid > article > .card,
	.search .site-main.grid > article > .card,
	.blog .site-main.grid > article > .card {
		min-height: auto;
	}

	.home .card .card__media,
	.archive .card .card__media,
	.search .card .card__media,
	.blog .card .card__media {
		flex-basis: 210px;
		height: 210px;
	}

	.card__body {
		padding: 1.15rem;
	}
}

/* ==========================================================
   ALX Recipes - Premium Header Redesign
   Added by ChatGPT: professional, clean, responsive header
   ========================================================== */
:root {
	--alx-orange: #ff6a21;
	--alx-green: #506736;
	--alx-blue: #0666c8;
	--alx-ink: #17202a;
	--alx-muted: #64748b;
	--alx-line: rgba(15, 23, 42, .08);
	--alx-soft: #f8fafc;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 92px;
	margin: 0 0 3.2rem;
	padding: 0 clamp(1rem, 4vw, 4rem);
	background: rgba(255, 255, 255, .94);
	border-bottom: 1px solid var(--alx-line);
	box-shadow: 0 14px 40px rgba(15, 23, 42, .055);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.admin-bar .site-header {
	top: 32px;
}

.site-header:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--alx-orange), var(--alx-green), var(--alx-blue));
	opacity: .95;
}

.navbar {
	min-width: 0;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 4vw, 4.25rem);
}

.site-branding {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: 92px;
	margin: 0;
}

.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	padding: .4rem 0;
}

.site-branding .custom-logo {
	display: block;
	width: auto;
	max-width: clamp(160px, 18vw, 255px);
	max-height: 76px;
	object-fit: contain;
	filter: drop-shadow(0 8px 16px rgba(15, 23, 42, .08));
	transition: transform .28s ease, filter .28s ease;
}

.site-branding .custom-logo-link:hover .custom-logo {
	transform: translateY(-2px) scale(1.015);
	filter: drop-shadow(0 12px 20px rgba(15, 23, 42, .12));
}

.site-title {
	font-size: clamp(1.35rem, 2vw, 1.9rem);
	font-weight: 900;
	letter-spacing: -.04em;
}

.site-description {
	display: none;
}

.main-navigation {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	font-size: .78rem;
	letter-spacing: .12em;
	font-weight: 900;
	text-transform: uppercase;
}

.main-navigation ul {
	align-items: center;
	gap: .25rem;
}

.main-navigation li {
	float: none;
}

.main-navigation a {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .78rem 1rem;
	color: #475569;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	transition: color .25s ease, background .25s ease, transform .25s ease;
}

.main-navigation a:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(255,106,33,.12), rgba(80,103,54,.10));
	opacity: 0;
	transform: scale(.94);
	transition: opacity .25s ease, transform .25s ease;
}

.main-navigation a:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: .28rem;
	width: 26px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--alx-orange), var(--alx-green));
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	transition: transform .25s ease;
}

.main-navigation li:hover > a,
.main-navigation li.focus > a,
.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: var(--alx-ink);
	border: 0;
	background: transparent;
	transform: translateY(-1px);
}

.main-navigation li:hover > a:before,
.main-navigation li.focus > a:before,
.main-navigation .current_page_item > a:before,
.main-navigation .current-menu-item > a:before,
.main-navigation .current_page_ancestor > a:before,
.main-navigation .current-menu-ancestor > a:before {
	opacity: 1;
	transform: scale(1);
}

.main-navigation li:hover > a:after,
.main-navigation li.focus > a:after,
.main-navigation .current_page_item > a:after,
.main-navigation .current-menu-item > a:after,
.main-navigation .current_page_ancestor > a:after,
.main-navigation .current-menu_ancestor > a:after {
	transform: translateX(-50%) scaleX(1);
}

.main-navigation ul ul {
	left: 50%;
	top: calc(100% + 12px);
	width: 240px;
	padding: .55rem;
	border: 1px solid var(--alx-line);
	border-radius: 18px;
	box-shadow: 0 22px 50px rgba(15, 23, 42, .12);
	transform: translate3d(-50%, 10px, 0);
	overflow: hidden;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	transform: translate3d(-50%, 0, 0);
}

.main-navigation ul ul a {
	width: 100%;
	justify-content: flex-start;
	min-height: 40px;
	padding: .72rem .9rem;
	border: 0;
	letter-spacing: .055em;
	border-radius: 12px;
}

.main-navigation ul ul a:after {
	display: none;
}

.main-navigation .menu-item-has-children > a::after,
.main-navigation .page_item_has_children > a::after {
	position: static;
	width: 10px;
	height: 10px;
	margin: 0 0 0 .45rem;
	transform: none;
	background-size: 10px 10px;
}

.social-icons {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-left: clamp(.7rem, 2vw, 2rem);
}

.social-icons .search-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 18px;
	color: #fff;
	background: linear-gradient(135deg, var(--alx-blue), #004fa8);
	box-shadow: 0 14px 28px rgba(6, 102, 200, .26);
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.social-icons .search-toggle:before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.28);
	pointer-events: none;
}

.social-icons .search-toggle:hover,
.social-icons .search-toggle:focus {
	transform: translateY(-2px);
	box-shadow: 0 18px 34px rgba(6, 102, 200, .34);
	background: linear-gradient(135deg, var(--alx-orange), var(--alx-blue));
}

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

.form-wrapper {
	background: linear-gradient(135deg, rgba(6,102,200,.98), rgba(80,103,54,.96));
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.15);
}

.form-wrapper.is-visible {
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}

.form-wrapper .search-field {
	font-weight: 800;
	letter-spacing: -.03em;
}

@media (max-width: 1023px) {
	.site-header {
		min-height: 76px;
		padding: 0 1rem;
	}

	.navbar {
		gap: 1rem;
	}

	.site-branding {
		min-height: 76px;
	}

	.site-branding .custom-logo {
		max-width: 168px;
		max-height: 58px;
	}

	.main-navigation {
		order: 3;
		flex: 0 0 auto;
		justify-content: flex-end;
	}

	.menu-toggle {
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 15px;
		color: var(--alx-ink);
		background: var(--alx-soft);
		box-shadow: inset 0 0 0 1px var(--alx-line);
	}

	.menu-toggle:before {
		left: 13px;
		top: 15px;
		width: 20px;
		height: 13px;
		border-top-width: 7px;
		border-bottom-width: 2px;
	}

	.main-navigation.toggled .menu {
		left: 1rem;
		right: 1rem;
		top: calc(100% + 10px);
		width: auto;
		padding: .75rem;
		border: 1px solid var(--alx-line);
		border-radius: 20px;
		box-shadow: 0 22px 50px rgba(15, 23, 42, .14);
	}

	.main-navigation.toggled a {
		justify-content: flex-start;
		width: 100%;
		padding: .85rem 1rem;
		border: 0;
	}

	.social-icons {
		margin-left: auto;
		gap: .45rem;
	}

	.social-icons .search-toggle {
		width: 46px;
		height: 46px;
		border-radius: 15px;
		padding: 0;
		color: #fff;
		background: linear-gradient(135deg, var(--alx-blue), #004fa8);
	}
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 520px) {
	.site-header {
		min-height: 68px;
		margin-bottom: 1.8rem;
		padding: 0 .75rem;
	}

	.site-branding {
		min-height: 68px;
	}

	.site-branding .custom-logo {
		max-width: 138px;
		max-height: 48px;
	}

	.social-icons .search-toggle,
	.menu-toggle {
		width: 42px;
		height: 42px;
		border-radius: 14px;
	}
}

/* Smart folding header upgrade */
.site-header {
	transition: min-height .28s ease, padding .28s ease, transform .35s ease, box-shadow .28s ease, background .28s ease;
	will-change: transform;
}

.site-header.is-compact {
	min-height: 70px;
	box-shadow: 0 12px 34px rgba(15, 23, 42, .10);
	background: rgba(255, 255, 255, .97);
}

.site-header.is-compact .site-branding {
	min-height: 70px;
}

.site-header.is-compact .site-branding .custom-logo {
	max-height: 54px;
	max-width: clamp(138px, 14vw, 190px);
}

.site-header.is-compact .main-navigation a {
	min-height: 38px;
	padding-top: .55rem;
	padding-bottom: .55rem;
}

.site-header.is-compact .social-icons .search-toggle {
	width: 44px;
	height: 44px;
	border-radius: 15px;
}

.site-header.is-hidden {
	transform: translate3d(0, -105%, 0);
}

.site-header.is-visible-again {
	transform: translate3d(0, 0, 0);
}

.site-header .menu-toggle {
	transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.main-navigation.toggled .menu-toggle {
	background: linear-gradient(135deg, rgba(255,106,33,.12), rgba(6,102,200,.10));
	box-shadow: inset 0 0 0 1px rgba(6,102,200,.20), 0 12px 24px rgba(15,23,42,.10);
}

.main-navigation.toggled .menu {
	animation: jrSmartMenuDrop .26s ease both;
}

@keyframes jrSmartMenuDrop {
	from {
		opacity: 0;
		transform: translate3d(0, -8px, 0) scale(.98);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@media (max-width: 1023px) {
	.site-header.is-compact {
		min-height: 64px;
		padding-left: .85rem;
		padding-right: .85rem;
	}

	.site-header.is-compact .site-branding {
		min-height: 64px;
	}

	.site-header.is-compact .site-branding .custom-logo {
		max-width: 134px;
		max-height: 44px;
	}

	.site-header.is-compact .social-icons .search-toggle,
	.site-header.is-compact .menu-toggle {
		width: 40px;
		height: 40px;
		border-radius: 13px;
	}

	.main-navigation.toggled .menu {
		max-height: calc(100vh - 96px);
		overflow-y: auto;
		background: rgba(255, 255, 255, .98);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header *,
	.main-navigation.toggled .menu {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================
   ALX Recipes - Premium Smart Token Menu v2
   Professional aligned navigation, soft pill container,
   active item indicator, clean search button, better mobile menu.
   ========================================================== */
:root {
	--alx-menu-bg: rgba(255, 255, 255, .82);
	--alx-menu-pill: rgba(248, 250, 252, .92);
	--alx-menu-border: rgba(15, 23, 42, .09);
	--alx-menu-shadow: 0 18px 45px rgba(15, 23, 42, .08);
	--alx-menu-text: #334155;
	--alx-menu-active: #111827;
}

.site-header {
	min-height: 104px;
	padding-inline: clamp(1.15rem, 4.8vw, 5.6rem);
	background:
		linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)),
		radial-gradient(circle at 6% 50%, rgba(255,106,33,.10), transparent 20rem),
		radial-gradient(circle at 94% 50%, rgba(6,102,200,.08), transparent 18rem);
}

.site-header:before {
	height: 4px;
	background: linear-gradient(90deg, #ff6a21 0%, #ff8b4d 28%, #506736 55%, #0666c8 100%);
}

.navbar {
	max-width: 1320px;
	gap: clamp(1.4rem, 3.5vw, 5rem);
}

.site-branding {
	min-height: 104px;
}

.site-branding .custom-logo {
	max-width: clamp(185px, 18vw, 270px);
	max-height: 82px;
}

.main-navigation {
	justify-content: center;
	align-self: center;
}

.main-navigation .menu,
.main-navigation > ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	width: auto;
	min-height: 58px;
	padding: .42rem;
	border: 1px solid var(--alx-menu-border);
	border-radius: 999px;
	background: var(--alx-menu-bg);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--alx-menu-shadow);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.main-navigation li {
	display: flex;
	align-items: center;
}

.main-navigation a {
	min-height: 46px;
	padding: .85rem 1.12rem;
	border-radius: 999px;
	color: var(--alx-menu-text);
	font-size: .74rem;
	letter-spacing: .105em;
	line-height: 1;
	white-space: nowrap;
	box-shadow: none;
	isolation: isolate;
}

.main-navigation a:before {
	background:
		linear-gradient(135deg, rgba(255,106,33,.15), rgba(80,103,54,.12)),
		#fff;
	box-shadow: 0 10px 24px rgba(15,23,42,.08), inset 0 0 0 1px rgba(255,106,33,.12);
}

.main-navigation a:after {
	bottom: .42rem;
	height: 4px;
	width: 24px;
	background: linear-gradient(90deg, var(--alx-orange), var(--alx-green), var(--alx-blue));
	box-shadow: 0 4px 10px rgba(255,106,33,.25);
}

.main-navigation li:hover > a,
.main-navigation li.focus > a,
.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: var(--alx-menu-active);
	transform: translateY(-2px);
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
	background: #fff;
	box-shadow: 0 12px 26px rgba(15,23,42,.08), inset 0 0 0 1px rgba(255,106,33,.12);
}

.main-navigation ul ul {
	left: 50%;
	top: calc(100% + 16px);
	width: 255px;
	padding: .65rem;
	border-radius: 22px;
	background: rgba(255,255,255,.98);
	box-shadow: 0 28px 65px rgba(15,23,42,.16);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.main-navigation ul ul:before {
	content: "";
	position: absolute;
	left: 50%;
	top: -7px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-left: 1px solid var(--alx-menu-border);
	border-top: 1px solid var(--alx-menu-border);
	transform: translateX(-50%) rotate(45deg);
}

.main-navigation ul ul li {
	display: block;
}

.main-navigation ul ul a {
	min-height: 42px;
	padding: .82rem .95rem;
	border-radius: 14px;
	font-size: .72rem;
	letter-spacing: .07em;
}

.social-icons {
	margin-left: clamp(.8rem, 1.8vw, 2rem);
	padding: .42rem;
	border: 1px solid var(--alx-menu-border);
	border-radius: 24px;
	background: rgba(255,255,255,.82);
	box-shadow: var(--alx-menu-shadow);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.social-icons .search-toggle {
	width: 50px;
	height: 50px;
	border-radius: 18px;
	background:
		linear-gradient(135deg, rgba(255,255,255,.18), transparent),
		linear-gradient(135deg, var(--alx-blue), #0759ad);
	box-shadow: 0 12px 28px rgba(6,102,200,.28);
}

.social-icons .search-toggle:hover,
.social-icons .search-toggle:focus {
	transform: translateY(-2px) scale(1.03);
	background:
		linear-gradient(135deg, rgba(255,255,255,.22), transparent),
		linear-gradient(135deg, var(--alx-orange), var(--alx-blue));
}

.site-header.is-compact {
	min-height: 76px;
	padding-inline: clamp(1rem, 4.2vw, 4.8rem);
}

.site-header.is-compact .site-branding {
	min-height: 76px;
}

.site-header.is-compact .main-navigation .menu,
.site-header.is-compact .main-navigation > ul {
	min-height: 50px;
	padding: .34rem;
}

.site-header.is-compact .main-navigation a {
	min-height: 40px;
	padding: .68rem .95rem;
	font-size: .70rem;
}

.site-header.is-compact .social-icons {
	padding: .34rem;
	border-radius: 20px;
}

@media (max-width: 1180px) and (min-width: 1024px) {
	.site-header {
		padding-inline: 1.4rem;
	}

	.navbar {
		gap: 1.4rem;
	}

	.site-branding .custom-logo {
		max-width: 190px;
	}

	.main-navigation a {
		padding-inline: .82rem;
		letter-spacing: .08em;
	}
}

@media (max-width: 1023px) {
	.site-header {
		min-height: 78px;
		padding-inline: 1rem;
	}

	.navbar {
		width: auto;
		flex: 1 1 auto;
	}

	.site-branding {
		min-height: 78px;
	}

	.site-branding .custom-logo {
		max-width: 170px;
		max-height: 58px;
	}

	.main-navigation {
		flex: 0 0 auto;
	}

	.main-navigation .menu,
	.main-navigation > ul {
		display: none;
	}

	.main-navigation.toggled .menu {
		display: block;
		position: absolute;
		left: .85rem;
		right: .85rem;
		top: calc(100% + 12px);
		width: auto;
		min-height: auto;
		padding: .7rem;
		border-radius: 24px;
		background: rgba(255,255,255,.98);
		box-shadow: 0 28px 70px rgba(15,23,42,.18);
	}

	.main-navigation.toggled li {
		display: block;
	}

	.main-navigation.toggled a {
		min-height: 46px;
		justify-content: flex-start;
		padding: .92rem 1rem;
		border-radius: 16px;
		font-size: .78rem;
	}

	.main-navigation.toggled a:after {
		left: 1rem;
		bottom: .46rem;
		transform: scaleX(0);
		transform-origin: left;
	}

	.main-navigation.toggled li:hover > a:after,
	.main-navigation.toggled li.focus > a:after,
	.main-navigation.toggled .current_page_item > a:after,
	.main-navigation.toggled .current-menu-item > a:after,
	.main-navigation.toggled .current_page_ancestor > a:after,
	.main-navigation.toggled .current-menu-ancestor > a:after {
		transform: scaleX(1);
	}

	.social-icons {
		margin-left: .6rem;
		padding: .34rem;
		border-radius: 20px;
	}

	.social-icons .search-toggle,
	.menu-toggle {
		width: 44px;
		height: 44px;
		border-radius: 15px;
	}

	.menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		box-shadow: 0 10px 24px rgba(15,23,42,.08), inset 0 0 0 1px var(--alx-menu-border);
	}
}

@media (max-width: 520px) {
	.site-header {
		padding-inline: .72rem;
	}

	.site-branding .custom-logo {
		max-width: 138px;
		max-height: 48px;
	}

	.social-icons {
		gap: .35rem;
		margin-left: .35rem;
		padding: .28rem;
		border-radius: 18px;
	}

	.social-icons .search-toggle,
	.menu-toggle {
		width: 40px;
		height: 40px;
		border-radius: 14px;
	}
}


/* ==========================================================
   ALX Recipes - Marble / Epoxy Background Refresh
   Warm-cool orange marble wall with soft flowing waves,
   designed to feel clean, premium, and food-blog friendly.
   ========================================================== */
:root {
	--alx-marble-base: #faf6f2;
	--alx-marble-cream: #fffdfb;
	--alx-marble-warm: #f7eee7;
	--alx-marble-orange: rgba(255, 146, 96, .14);
	--alx-marble-orange-strong: rgba(255, 123, 63, .18);
	--alx-marble-white-line: rgba(255, 255, 255, .88);
	--alx-marble-green: rgba(80, 103, 54, .06);
}

html {
	background-color: var(--alx-marble-base);
}

body {
	position: relative;
	background-color: var(--alx-marble-base);
	background-image:
		radial-gradient(circle at 16% 10%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 20%),
		radial-gradient(circle at 84% 14%, rgba(255,153,109,.14) 0, rgba(255,153,109,0) 24%),
		radial-gradient(circle at 88% 78%, var(--alx-marble-green) 0, rgba(80,103,54,0) 24%),
		radial-gradient(140% 120% at -10% 16%,
			transparent 0 54%,
			var(--alx-marble-orange) 54.4% 55.1%,
			var(--alx-marble-white-line) 55.1% 55.85%,
			transparent 55.85% 62.5%,
			rgba(255, 170, 131, .10) 62.5% 63.1%,
			transparent 63.1% 100%),
		radial-gradient(150% 130% at 112% 44%,
			transparent 0 58%,
			rgba(255, 137, 82, .13) 58.4% 59.15%,
			rgba(255,255,255,.82) 59.15% 59.9%,
			transparent 59.9% 66.5%,
			rgba(255, 188, 160, .10) 66.5% 67.15%,
			transparent 67.15% 100%),
		radial-gradient(185% 120% at 42% 108%,
			transparent 0 63%,
			rgba(255, 140, 88, .11) 63.4% 64.0%,
			rgba(255,255,255,.74) 64.0% 64.7%,
			transparent 64.7% 72%,
			rgba(255, 198, 170, .08) 72% 72.5%,
			transparent 72.5% 100%),
		linear-gradient(135deg, var(--alx-marble-cream) 0%, var(--alx-marble-warm) 48%, #ffffff 100%);
	background-attachment: fixed;
	background-size: cover;
	color: var(--jr-text);
}

.site {
	position: relative;
	isolation: isolate;
}

.site:before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 18%),
		radial-gradient(circle at 50% 0%, rgba(255,255,255,.34), transparent 42%);
}

.site-header {
	background: rgba(255, 253, 250, .86);
	border-bottom-color: rgba(255, 123, 63, .10);
	box-shadow: 0 16px 44px rgba(124, 93, 73, .10);
}

.site-header:before {
	background: linear-gradient(90deg, rgba(255,123,63,.95), rgba(255,154,110,.95), rgba(80,103,54,.78));
}

.site-content,
.site-main,
.widget-area,
.footer-widget-area {
	position: relative;
	z-index: 1;
}

.card,
.widget,
.site-footer {
	box-shadow: 0 18px 44px rgba(132, 106, 88, .10);
}

.site-footer {
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

@media (max-width: 767px) {
	body {
		background-attachment: scroll;
		background-image:
			radial-gradient(circle at 18% 10%, rgba(255,255,255,.96) 0, rgba(255,255,255,0) 22%),
			radial-gradient(circle at 84% 12%, rgba(255,153,109,.14) 0, rgba(255,153,109,0) 22%),
			radial-gradient(175% 120% at -18% 15%, transparent 0 62%, rgba(255, 146, 96, .12) 62.4% 63.05%, rgba(255,255,255,.84) 63.05% 63.7%, transparent 63.7% 100%),
			radial-gradient(175% 120% at 118% 45%, transparent 0 62%, rgba(255, 137, 82, .12) 62.4% 63.05%, rgba(255,255,255,.80) 63.05% 63.7%, transparent 63.7% 100%),
			linear-gradient(135deg, var(--alx-marble-cream) 0%, var(--alx-marble-warm) 50%, #ffffff 100%);
	}
}


/* ==========================================================
   ALX Recipes - Professional Readable Typography System
   Makes recipes and blog posts easier to read with less effort:
   larger text, calmer line-height, better spacing, balanced titles,
   comfortable article width, and clean text contrast.
   ========================================================== */
:root {
	--alx-readable-font: "Cairo", "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
	--alx-readable-text: #25313a;
	--alx-readable-heading: #142027;
	--alx-readable-muted: #667784;
	--alx-readable-width: 760px;
	--alx-readable-wide: 980px;
	--alx-reading-surface: rgba(255, 255, 255, .78);
}

body {
	font-family: var(--alx-readable-font);
	font-size: clamp(16.5px, .35vw + 15px, 18px);
	line-height: 1.78;
	font-weight: 400;
	letter-spacing: .005em;
	color: var(--alx-readable-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
	font-family: inherit;
}

.single .site-main,
.page .site-main {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.single .entry-header,
.page .entry-header {
	max-width: var(--alx-readable-wide);
	margin-left: auto;
	margin-right: auto;
	padding: clamp(1rem, 3.2vw, 2.7rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 2.5vw, 2rem);
	text-align: center;
}

.single .entry-title,
.page .entry-title {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	color: var(--alx-readable-heading);
	font-size: clamp(2.05rem, 4.2vw, 4rem);
	line-height: 1.08;
	letter-spacing: -0.045em;
	font-weight: 850;
	text-wrap: balance;
}

.single .entry-meta,
.page .entry-meta,
.entry-footer,
.posted-on,
.byline,
.cat-links,
.tags-links {
	font-size: .92rem;
	line-height: 1.55;
	color: var(--alx-readable-muted);
}

.single .entry-content,
.page .entry-content,
.single .entry-summary,
.page .entry-summary {
	max-width: var(--alx-readable-width);
	margin-left: auto;
	margin-right: auto;
	padding: clamp(1.25rem, 2.4vw, 2rem);
	background: var(--alx-reading-surface);
	border: 1px solid rgba(255, 123, 63, .08);
	border-radius: 28px;
	box-shadow: 0 20px 60px rgba(132, 106, 88, .09);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--alx-readable-text);
	font-size: clamp(1.03rem, .28vw + .98rem, 1.14rem);
	line-height: 1.9;
}

.single .entry-content p,
.page .entry-content p,
.single .entry-summary p,
.page .entry-summary p {
	margin: 0 0 1.45em;
}

.single .entry-content > p:first-of-type,
.page .entry-content > p:first-of-type {
	font-size: clamp(1.08rem, .35vw + 1rem, 1.22rem);
	line-height: 1.88;
	color: #1f2f38;
}

.single .entry-content h2,
.page .entry-content h2,
.single .entry-content h3,
.page .entry-content h3,
.single .entry-content h4,
.page .entry-content h4 {
	max-width: var(--alx-readable-width);
	margin: 2.15em 0 .72em;
	color: var(--alx-readable-heading);
	font-weight: 850;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.single .entry-content h2,
.page .entry-content h2 {
	font-size: clamp(1.55rem, 2.2vw, 2.35rem);
	line-height: 1.18;
	padding-top: .15rem;
}

.single .entry-content h3,
.page .entry-content h3 {
	font-size: clamp(1.28rem, 1.55vw, 1.75rem);
	line-height: 1.25;
}

.single .entry-content h4,
.page .entry-content h4 {
	font-size: clamp(1.1rem, 1.1vw, 1.35rem);
	line-height: 1.32;
}

.single .entry-content ul,
.page .entry-content ul,
.single .entry-content ol,
.page .entry-content ol {
	margin: 0 0 1.55em 1.25em;
	padding-left: 1.1em;
	line-height: 1.88;
}

.single .entry-content li + li,
.page .entry-content li + li {
	margin-top: .48em;
}

.single .entry-content strong,
.page .entry-content strong,
.single .entry-content b,
.page .entry-content b {
	font-weight: 800;
	color: #17252d;
}

.single .entry-content a,
.page .entry-content a {
	color: #d95d1f;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: .08em;
	text-underline-offset: .18em;
	transition: color .2s ease, text-decoration-thickness .2s ease;
}

.single .entry-content a:hover,
.page .entry-content a:hover {
	color: #a94312;
	text-decoration-thickness: .14em;
}

.single .entry-content blockquote,
.page .entry-content blockquote {
	margin: 2rem 0;
	padding: 1.1rem 1.25rem 1.1rem 1.35rem;
	border-left: 5px solid rgba(255, 107, 53, .82);
	border-radius: 18px;
	background: rgba(255, 123, 63, .075);
	color: #273741;
	font-size: 1.08em;
	line-height: 1.85;
}

.single .entry-content blockquote p:last-child,
.page .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.single .entry-content img,
.page .entry-content img,
.single .entry-content figure,
.page .entry-content figure {
	border-radius: 20px;
}

.single .entry-content figcaption,
.page .entry-content figcaption,
.wp-caption-text {
	margin-top: .65rem;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--alx-readable-muted);
	text-align: center;
}

.single .entry-content table,
.page .entry-content table {
	font-size: .98rem;
	line-height: 1.65;
	background: rgba(255,255,255,.72);
	border-radius: 18px;
	overflow: hidden;
}

.single .entry-content th,
.page .entry-content th,
.single .entry-content td,
.page .entry-content td {
	padding: .85rem .95rem;
}

.card__title {
	font-weight: 850;
	letter-spacing: -0.035em;
}

.card__content,
.card__excerpt,
.card p {
	line-height: 1.78;
	color: #5f6f7a;
}

.card__read-more {
	font-size: .9rem;
	letter-spacing: .015em;
}

.widget {
	font-size: .98rem;
	line-height: 1.7;
}

.widget-title {
	letter-spacing: -0.025em;
	font-weight: 850;
	color: var(--alx-readable-heading);
}

[dir="rtl"] .single .entry-content,
[dir="rtl"] .page .entry-content,
.rtl .single .entry-content,
.rtl .page .entry-content {
	text-align: right;
	letter-spacing: 0;
}

[dir="rtl"] .single .entry-content ul,
[dir="rtl"] .page .entry-content ul,
[dir="rtl"] .single .entry-content ol,
[dir="rtl"] .page .entry-content ol,
.rtl .single .entry-content ul,
.rtl .page .entry-content ul,
.rtl .single .entry-content ol,
.rtl .page .entry-content ol {
	margin-left: 0;
	margin-right: 1.25em;
	padding-left: 0;
	padding-right: 1.1em;
}

[dir="rtl"] .single .entry-content blockquote,
[dir="rtl"] .page .entry-content blockquote,
.rtl .single .entry-content blockquote,
.rtl .page .entry-content blockquote {
	border-left: 0;
	border-right: 5px solid rgba(255, 107, 53, .82);
	padding-left: 1.25rem;
	padding-right: 1.35rem;
}

@media (max-width: 900px) {
	.single .entry-content,
	.page .entry-content,
	.single .entry-summary,
	.page .entry-summary {
		max-width: calc(100% - 2rem);
	}
}

@media (max-width: 767px) {
	body {
		font-size: 16.5px;
		line-height: 1.76;
	}

	.single .entry-header,
	.page .entry-header {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.single .entry-title,
	.page .entry-title {
		font-size: clamp(1.9rem, 9vw, 2.65rem);
		line-height: 1.12;
	}

	.single .entry-content,
	.page .entry-content,
	.single .entry-summary,
	.page .entry-summary {
		max-width: calc(100% - 1rem);
		padding: 1.15rem;
		border-radius: 22px;
		font-size: 1.02rem;
		line-height: 1.82;
	}

	.single .entry-content p,
	.page .entry-content p,
	.single .entry-summary p,
	.page .entry-summary p {
		margin-bottom: 1.25em;
	}

	.single .entry-content h2,
	.page .entry-content h2 {
		font-size: 1.55rem;
		line-height: 1.2;
	}

	.single .entry-content h3,
	.page .entry-content h3 {
		font-size: 1.28rem;
	}
}

/* ==========================================================
   ALX Recipes - Expanded Reading Layout
   Reduces the large side margins so the article uses the screen better.
   ========================================================== */
:root {
	--alx-readable-width: 1080px;
	--alx-readable-wide: 1200px;
}

.page .site-content,
.single .site-content {
	width: min(1320px, calc(100vw - 3rem));
	max-width: 1320px;
}

.single .site-main,
.page .site-main {
	max-width: 1320px;
	width: 100%;
}

.single .entry-header,
.page .entry-header {
	max-width: 1200px;
	padding-left: clamp(1rem, 2vw, 2rem);
	padding-right: clamp(1rem, 2vw, 2rem);
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.single .entry-title,
.page .entry-title {
	max-width: 1120px;
}

.single .entry-content,
.page .entry-content,
.single .entry-summary,
.page .entry-summary {
	max-width: min(1120px, calc(100vw - 4rem));
	padding: clamp(1.5rem, 2.8vw, 2.6rem) clamp(1.6rem, 3.2vw, 3.4rem);
}

.single .entry-content h2,
.page .entry-content h2,
.single .entry-content h3,
.page .entry-content h3,
.single .entry-content h4,
.page .entry-content h4 {
	max-width: 100%;
}

@media (min-width: 1400px) {
	.page .site-content,
	.single .site-content,
	.single .site-main,
	.page .site-main {
		max-width: 1440px;
	}

	.single .entry-content,
	.page .entry-content,
	.single .entry-summary,
	.page .entry-summary {
		max-width: 1180px;
	}
}

@media (max-width: 900px) {
	.page .site-content,
	.single .site-content {
		width: calc(100vw - 1.5rem);
	}

	.single .entry-content,
	.page .entry-content,
	.single .entry-summary,
	.page .entry-summary {
		max-width: calc(100vw - 1.5rem);
	}
}

@media (max-width: 767px) {
	.page .site-content,
	.single .site-content {
		width: calc(100vw - .75rem);
	}

	.single .entry-content,
	.page .entry-content,
	.single .entry-summary,
	.page .entry-summary {
		max-width: calc(100vw - .75rem);
		padding-left: 1rem;
		padding-right: 1rem;
	}
}


/* ==========================================================
   ALX Recipes - TRUE Full Width Reading Fix
   Aggressively removes the old Justread 58.5rem container and
   8rem inner padding that made posts look small on desktop.
   ========================================================== */
@media (min-width: 1024px) {
	body.single .site-content,
	body.page .site-content {
		width: min(1580px, calc(100vw - 20px)) !important;
		max-width: min(1580px, calc(100vw - 20px)) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single .content-area,
	body.page .content-area,
	body.single .site-main,
	body.page .site-main,
	body.single article,
	body.page article,
	body.single .hentry,
	body.page .hentry {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.single .entry-header,
	body.page .entry-header {
		width: 100% !important;
		max-width: 1380px !important;
		padding-left: clamp(1rem, 2vw, 2.5rem) !important;
		padding-right: clamp(1rem, 2vw, 2.5rem) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 2rem !important;
	}

	body.single .entry-body,
	body.page .entry-body {
		width: 100% !important;
		max-width: 100% !important;
		padding: clamp(2rem, 3vw, 3rem) clamp(2rem, 4.5vw, 4.5rem) !important;
		border-radius: 28px !important;
	}

	body.single .entry-content,
	body.page .entry-content,
	body.single .entry-summary,
	body.page .entry-summary {
		width: 100% !important;
		max-width: 1180px !important;
		box-sizing: border-box !important;
		padding: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	body.single .entry-content p,
	body.page .entry-content p,
	body.single .entry-content ul,
	body.page .entry-content ul,
	body.single .entry-content ol,
	body.page .entry-content ol,
	body.single .entry-content h2,
	body.page .entry-content h2,
	body.single .entry-content h3,
	body.page .entry-content h3,
	body.single .entry-content h4,
	body.page .entry-content h4 {
		max-width: 100% !important;
	}
}

@media (min-width: 1400px) {
	body.single .site-content,
	body.page .site-content {
		width: min(1700px, calc(100vw - 24px)) !important;
		max-width: min(1700px, calc(100vw - 24px)) !important;
	}

	body.single .entry-content,
	body.page .entry-content,
	body.single .entry-summary,
	body.page .entry-summary {
		max-width: 1260px !important;
	}
}

@media (max-width: 1023px) {
	body.single .site-content,
	body.page .site-content {
		width: calc(100vw - 16px) !important;
		max-width: calc(100vw - 16px) !important;
	}

	body.single .entry-body,
	body.page .entry-body {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}

	body.single .entry-content,
	body.page .entry-content,
	body.single .entry-summary,
	body.page .entry-summary {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 767px) {
	body.single .site-content,
	body.page .site-content {
		width: calc(100vw - 8px) !important;
		max-width: calc(100vw - 8px) !important;
	}

	body.single .entry-body,
	body.page .entry-body {
		padding: 1rem !important;
		border-radius: 20px !important;
	}
}

/* ==========================================================
   ALX Recipes - Ad Safe Reading Width
   Keeps side advertising spaces while making the article area
   wider and cleaner. This overrides the previous full-width fix.
   ========================================================== */
:root {
	--alx-ad-slot-desktop: 210px;
	--alx-ad-slot-laptop: 150px;
	--alx-reader-max: 1040px;
	--alx-reader-inner: 960px;
}

@media (min-width: 1200px) {
	body.single .site-content,
	body.page .site-content {
		width: min(1540px, calc(100vw - 40px)) !important;
		max-width: min(1540px, calc(100vw - 40px)) !important;
		padding-left: var(--alx-ad-slot-desktop) !important;
		padding-right: var(--alx-ad-slot-desktop) !important;
		box-sizing: border-box !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.single .content-area,
	body.page .content-area,
	body.single .site-main,
	body.page .site-main,
	body.single article,
	body.page article,
	body.single .hentry,
	body.page .hentry {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.single .entry-header,
	body.page .entry-header {
		max-width: var(--alx-reader-max) !important;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single .entry-body,
	body.page .entry-body {
		width: 100% !important;
		max-width: var(--alx-reader-max) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: clamp(2.1rem, 3vw, 3rem) clamp(2.2rem, 3.6vw, 3.6rem) !important;
		box-sizing: border-box !important;
		border-radius: 28px !important;
	}

	body.single .entry-content,
	body.page .entry-content,
	body.single .entry-summary,
	body.page .entry-summary {
		width: 100% !important;
		max-width: var(--alx-reader-inner) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	body.single .site-content,
	body.page .site-content {
		width: min(1180px, calc(100vw - 28px)) !important;
		max-width: min(1180px, calc(100vw - 28px)) !important;
		padding-left: var(--alx-ad-slot-laptop) !important;
		padding-right: var(--alx-ad-slot-laptop) !important;
		box-sizing: border-box !important;
	}

	body.single .entry-body,
	body.page .entry-body,
	body.single .entry-header,
	body.page .entry-header {
		max-width: 900px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media (max-width: 1023px) {
	body.single .site-content,
	body.page .site-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}


/* ==========================================================
   ALX Recipes - Featured Image Containment Fix
   Keeps the main article image inside the white reading card
   while preserving side spaces reserved for ads.
   ========================================================== */
body.single .entry-body,
body.page .entry-body {
	overflow: hidden !important;
}

body.single .entry-media,
body.page .entry-media {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto clamp(2rem, 3vw, 3.2rem) !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	border-radius: 22px !important;
	overflow: hidden !important;
	background: #fff !important;
}

body.single .entry-media .singular-thumbnail,
body.page .entry-media .singular-thumbnail,
body.single .entry-media img,
body.page .entry-media img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 22px !important;
	object-fit: cover !important;
	box-sizing: border-box !important;
}

@media (min-width: 1200px) {
	body.single .entry-media,
	body.page .entry-media {
		max-width: var(--alx-reader-inner) !important;
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	body.single .entry-media,
	body.page .entry-media {
		max-width: 100% !important;
	}
}

@media (max-width: 767px) {
	body.single .entry-media,
	body.page .entry-media,
	body.single .entry-media .singular-thumbnail,
	body.page .entry-media .singular-thumbnail,
	body.single .entry-media img,
	body.page .entry-media img {
		border-radius: 16px !important;
	}
}

/* ==========================================================
   ALX Recipes Dynamic Hero Slider
   Auto-filled from posts with Featured Images.
   Keeps ad-safe layout while adding a premium visual hero.
   ========================================================== */
.jr-hero-slider {
	position: relative;
	width: min(100% - clamp(28px, 7vw, 220px), 1280px);
	margin: clamp(24px, 4vw, 54px) auto clamp(32px, 5vw, 70px);
	border-radius: clamp(26px, 3vw, 44px);
	overflow: hidden;
	background: rgba(255, 255, 255, .72);
	box-shadow: 0 32px 80px rgba(79, 55, 39, .16);
	border: 1px solid rgba(255, 123, 63, .10);
	isolation: isolate;
}

.jr-hero-slider:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0) 38%, rgba(255,255,255,.10)),
		radial-gradient(circle at 16% 20%, rgba(255,255,255,.18), transparent 30%);
}

.jr-hero-slider__viewport {
	position: relative;
	overflow: hidden;
}

.jr-hero-slider__track {
	display: flex;
	transition: transform .78s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.jr-hero-slide {
	position: relative;
	min-width: 100%;
	height: clamp(390px, 42vw, 620px);
	margin: 0 !important;
	overflow: hidden;
}

.jr-hero-slide__link {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff;
	text-decoration: none;
}

.jr-hero-slide__image-wrap,
.jr-hero-slide__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.jr-hero-slide__image {
	display: block;
	object-fit: cover;
	transform: scale(1.045);
	transition: transform 5.8s ease;
}

.jr-hero-slide.is-active .jr-hero-slide__image {
	transform: scale(1.105);
}

.jr-hero-slide__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(9, 21, 30, .52) 0%, rgba(9, 21, 30, .34) 36%, rgba(9, 21, 30, .06) 74%, rgba(9, 21, 30, .16) 100%),
		linear-gradient(180deg, rgba(9, 21, 30, .10), rgba(9, 21, 30, .22));
}

.jr-hero-slide__content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: min(760px, 68%);
	padding: clamp(34px, 4.4vw, 64px) clamp(26px, 3.6vw, 44px) clamp(44px, 5.6vw, 72px) clamp(56px, 5.8vw, 92px);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .75s cubic-bezier(.22, .61, .36, 1);
}

.jr-hero-slide.is-active .jr-hero-slide__content {
	opacity: 1;
	transform: translateY(0);
}

.jr-hero-slide__category {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	margin-bottom: 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: #fb5625;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.jr-hero-slide__title {
	max-width: min(780px, 98%);
	margin: 0 0 14px;
	font-size: clamp(28px, 4.3vw, 58px);
	line-height: 1.02;
	letter-spacing: -.045em;
	color: #fff;
	text-shadow: 0 10px 24px rgba(0,0,0,.24);
}

.jr-hero-slide__excerpt {
	max-width: min(620px, 94%);
	margin: 0 0 20px;
	font-size: clamp(15px, 1.3vw, 19px);
	line-height: 1.62;
	color: rgba(255,255,255,.92);
	text-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.jr-hero-slide__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: 15px 24px;
	border-radius: 999px;
	background: linear-gradient(135deg, #ff7b3d, #fb4f20);
	color: #fff;
	font-size: 15px;
	font-weight: 900;
	letter-spacing: .03em;
	box-shadow: 0 18px 36px rgba(251, 86, 37, .34);
}

.jr-hero-slider__control {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(34px, 4.2vw, 56px);
	height: clamp(58px, 8vw, 92px);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	color: rgba(255,255,255,.62);
	font-size: clamp(48px, 6vw, 82px);
	font-weight: 300;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
	transform: translateY(-50%);
	box-shadow: none !important;
	text-shadow: 0 4px 18px rgba(0,0,0,.38);
	transition: opacity .22s ease, color .22s ease, transform .22s ease, text-shadow .22s ease;
	opacity: .72;
}

.jr-hero-slider__control:hover,
.jr-hero-slider__control:focus {
	background: transparent !important;
	color: rgba(255,255,255,.96);
	transform: translateY(-50%) scale(1.04);
	opacity: 1;
	text-shadow: 0 6px 22px rgba(0,0,0,.52);
	outline: none;
}

.jr-hero-slider__control--prev { left: clamp(18px, 3vw, 42px); }
.jr-hero-slider__control--next { right: clamp(18px, 3vw, 42px); }

.jr-hero-slider__dots {
	position: absolute;
	left: 50%;
	bottom: clamp(16px, 2.5vw, 30px);
	z-index: 5;
	display: flex;
	gap: 9px;
	transform: translateX(-50%);
	padding: 9px 11px;
	border-radius: 999px;
	background: rgba(255,255,255,.22);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.jr-hero-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.62);
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}

.jr-hero-slider__dot.is-active {
	width: 30px;
	background: #fff;
}

@media (max-width: 1024px) {
	.jr-hero-slider {
		width: calc(100% - 40px);
	}
	.jr-hero-slide {
		height: clamp(360px, 54vw, 520px);
	}
	.jr-hero-slide__content {
		width: min(700px, 76%);
		padding: 32px 28px 38px 54px;
	}
}

@media (max-width: 700px) {
	.jr-hero-slider {
		width: calc(100% - 22px);
		margin-top: 22px;
		border-radius: 24px;
	}
	.jr-hero-slide {
		height: 430px;
	}
	.jr-hero-slide__shade {
		background: linear-gradient(180deg, rgba(9,21,30,.16), rgba(9,21,30,.82));
	}
	.jr-hero-slide__content {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		padding: 34px 26px 72px;
		transform: none;
	}
	.jr-hero-slide.is-active .jr-hero-slide__content {
		transform: none;
	}
	.jr-hero-slide__title {
		font-size: clamp(29px, 9vw, 42px);
	}
	.jr-hero-slide__excerpt {
		font-size: 15px;
		line-height: 1.6;
		margin-bottom: 20px;
	}
	.jr-hero-slider__control {
		width: 32px;
		height: 64px;
		font-size: 52px;
		line-height: 1;
		opacity: .65;
	}
	.jr-hero-slider__control--prev { left: 12px; }
	.jr-hero-slider__control--next { right: 12px; }
}

/* ==========================================================
   ALX Recipes - Final Hero Slider Text Position Override
   Strong override to move the slider writing to the upper area,
   reduce title size, and keep CTA lower-left as requested.
   ========================================================== */
@media (min-width: 701px) {
	.jr-hero-slide__content {
		position: absolute !important;
		top: clamp(36px, 5vw, 70px) !important;
		left: clamp(46px, 6vw, 96px) !important;
		bottom: clamp(44px, 5vw, 70px) !important;
		width: min(900px, 74%) !important;
		max-width: min(900px, 74%) !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		transform: translateY(10px) !important;
	}

	.jr-hero-slide.is-active .jr-hero-slide__content {
		transform: translateY(0) !important;
	}

	.jr-hero-slide__category {
		margin: 0 0 clamp(16px, 2vw, 24px) !important;
		padding: 9px 17px !important;
		font-size: 12px !important;
	}

	.jr-hero-slide__title {
		width: min(880px, 100%) !important;
		max-width: min(880px, 100%) !important;
		margin: 0 0 clamp(12px, 1.6vw, 18px) !important;
		font-size: clamp(34px, 3.75vw, 54px) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.035em !important;
	}

	.jr-hero-slide__excerpt {
		width: min(620px, 78%) !important;
		max-width: min(620px, 78%) !important;
		margin: 0 !important;
		font-size: clamp(15px, 1.22vw, 18px) !important;
		line-height: 1.58 !important;
	}

	.jr-hero-slide__button {
		margin-top: auto !important;
		margin-bottom: 0 !important;
		padding: 14px 25px !important;
	}
}

@media (min-width: 1100px) {
	.jr-hero-slide__title {
		font-size: clamp(38px, 3.45vw, 56px) !important;
	}
}

@media (max-width: 700px) {
	.jr-hero-slide__content {
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 30px 24px 72px !important;
	}
	.jr-hero-slide__title {
		font-size: clamp(28px, 8vw, 40px) !important;
		line-height: 1.08 !important;
	}
	.jr-hero-slide__excerpt {
		font-size: 15px !important;
		line-height: 1.55 !important;
	}
}