/*
Theme Name: Meal Prep Plans Sheet Pan
Theme URI: https://mealprepplans.com
Description: One warm parchment page inside a dark pan rim. Recipes are zones on the pan; every one carries the same facts line. GeneratePress child theme.
Author: Meal Prep Plans
Template: generatepress
Version: 2.0.0
*/

/* Display face: Fraunces 600 (Google Fonts, OFL), self-hosted, latin subset, 35 KB. */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/Fraunces.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--pan: #f3e9d8;        /* parchment ground */
	--zone: #e8d6b8;       /* toasted zone */
	--zone-2: #efdfc6;     /* zone, hover */
	--ink: #2a2420;        /* char: text and the rim */
	--ink-2: #5b524a;      /* secondary text, still 5:1 on the zone */
	--rule: rgba(42, 36, 32, 0.15);
	--tomato: #b53a25;     /* one job: action */
	--olive: #4f5a2e;      /* one job: the facts labels */
	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	--rim: 10px;
	--r: 6px;
	--measure: 68ch;
	--gutter: clamp(20px, 4vw, 56px);
}

/* ---------- ground, rim, browser surfaces ---------- */
html { caret-color: var(--tomato); scrollbar-color: var(--ink) var(--pan); }
body.mpp-pan {
	background: var(--pan);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
/* the pan: a dark rim around the viewport with a soft inner lip; the only depth on the site */
body.mpp-pan::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
	border: var(--rim) solid var(--ink);
	border-radius: calc(var(--rim) + 6px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 3px 18px rgba(42, 36, 32, 0.22);
}
::selection { background: rgba(181, 58, 37, 0.22); color: var(--ink); }
:focus-visible { outline: 2px solid var(--tomato); outline-offset: 3px; border-radius: 3px; }
a { color: var(--tomato); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: rgba(181, 58, 37, 0.5); transition: text-decoration-color 160ms ease-out, color 160ms ease-out; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3, h4, .main-title {
	font-family: var(--serif);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.012em;
	line-height: 1.12;
	text-wrap: balance;
	margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 1.95rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

/* ---------- containers: the pan is the only surface ---------- */
.site.grid-container,
.site-content,
.content-area,
.separate-containers .inside-article,
.one-container .inside-article,
.separate-containers .site-main > *,
.separate-containers .site-main,
.site-header,
.main-navigation,
.site-footer,
.site-info {
	background: transparent;
	box-shadow: none;
}
.site.grid-container { max-width: 1180px; padding: 0 var(--gutter); }
/* header and footer live outside the content box in this layout; give them the same box and gutter */
.inside-header, .footer-widgets-container, .inside-site-info { max-width: 1180px; padding-left: var(--gutter); padding-right: var(--gutter); }
.site-content { padding: 0; }
.separate-containers .inside-article, .one-container .inside-article { padding: 0; }
.separate-containers .site-main { margin: 0; }
#right-sidebar:not(:has(.widget)) { display: none; }
body.mpp-pan .content-area { width: 100%; float: none; }

/* ---------- header ---------- */
.inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rule);
}
.site-branding { display: block; }
.main-title { font-size: 1.55rem; line-height: 1; margin: 0; letter-spacing: -0.02em; }
.main-title a { color: var(--ink); text-decoration: none; }
.main-title a:hover { color: var(--tomato); }
.site-description { display: none; }
.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul { display: flex; gap: 2px; }
.main-navigation .main-nav ul li a {
	font: 600 0.76rem/1 var(--sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
	padding: 12px 12px;
	text-decoration: none;
	transition: color 160ms ease-out;
}
.main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus-within > a { color: var(--ink); background: transparent; }
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--ink);
	background: transparent;
	text-decoration: underline;
	text-decoration-color: var(--ink);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.5em;
}
.main-navigation .menu-toggle { color: var(--ink); background: transparent; font: 600 0.76rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.main-navigation .menu-toggle:hover, .main-navigation .menu-toggle:focus { background: transparent; color: var(--tomato); }
.main-navigation .menu-toggle .gp-icon { color: var(--ink); }
/* when GeneratePress places the menu under the header rather than inside it */
body:not(.nav-float-right):not(.nav-float-left) .main-navigation { border-bottom: 1px solid var(--rule); }
body:not(.nav-float-right):not(.nav-float-left) .inside-header { border-bottom: 0; padding-bottom: 8px; }
@media (max-width: 768px) {
	:root { --gutter: 16px; }
	.inside-header { padding-top: 16px; padding-bottom: 12px; }
	.main-title { font-size: 1.35rem; }
	.main-navigation .main-nav ul { display: block; }
	.main-navigation .main-nav ul li a { padding: 12px 0; border-top: 1px solid var(--rule); }
	.main-navigation .main-nav ul li.current_page_item > a,
	.main-navigation .main-nav ul li[class*="current-menu-"] > a { text-underline-offset: 0.3em; }
}

/* ---------- the facts line: identical on every zone ---------- */
.mpp-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 12px 0 0;
	font-size: 0.86rem;
	line-height: 1.3;
}
.mpp-facts > div { display: flex; flex-direction: column; gap: 2px; }
.mpp-facts dt { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive); }
.mpp-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.mpp-facts dd a { color: var(--ink); text-decoration-color: rgba(42, 36, 32, 0.35); }
.mpp-facts dd a:hover { color: var(--tomato); }

/* ---------- home: the serve and the tray ---------- */
.mpp-serve {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px 56px;
	align-items: center;
	padding: 56px 0 40px;
}
.mpp-serve.has-photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mpp-serve__title { font-size: clamp(2.3rem, 5vw, 3.2rem); line-height: 1.05; max-width: 18ch; margin: 0 0 6px; }
.mpp-serve__title a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--tomato), var(--tomato));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 3px;
	animation: mpp-serve-draw 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 240ms forwards;
}
.mpp-serve__title a:hover { color: var(--tomato); }
@keyframes mpp-serve-draw { to { background-size: 100% 3px; } }
.mpp-serve .mpp-facts { font-size: 0.95rem; margin-top: 16px; }
.mpp-serve__excerpt { max-width: 52ch; font-size: 1.1rem; color: var(--ink-2); margin: 20px 0 0; }
.mpp-serve__actions { margin: 26px 0 0; }
.mpp-cta {
	display: inline-block;
	font: 600 0.82rem/1 var(--sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--tomato);
	padding: 15px 22px 14px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.mpp-cta:hover { background: var(--ink); color: #fff; }
.mpp-cta:active { transform: translateY(1px); }
.mpp-serve__photo { display: block; border-radius: var(--r); overflow: hidden; background: var(--zone); aspect-ratio: 4 / 3; }
.mpp-serve__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mpp-tray { padding: 8px 0 24px; border-top: 1px solid var(--rule); }
.mpp-tray__title { font-size: 1.15rem; margin: 22px 0 16px; }
.mpp-tray__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mpp-tray__list li { margin: 0; }
.mpp-zone {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	min-height: 150px;
	padding: 22px 22px 20px;
	background: var(--zone);
	border-radius: var(--r);
	color: var(--ink);
	text-decoration: none;
	transition: background-color 160ms ease-out;
}
.mpp-zone:hover, .mpp-zone:focus-visible { background: var(--zone-2); }
.mpp-zone__title { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.mpp-zone:hover .mpp-zone__title { color: var(--tomato); }
.mpp-tray__more { margin: 18px 0 0; font-size: 0.95rem; color: var(--ink-2); }
.mpp-tray__more a { margin: 0 4px; }

/* the hub copy under the pan */
.home .site-main > article.page .entry-header { display: none; }
.home .site-main > article.page { margin: 0; }
.home .site-main > article.page .entry-content { max-width: var(--measure); padding: 12px 0 40px; margin-top: 0; }
.home .site-main > article.page .entry-content > :first-child { margin-top: 0; }
.mpp-tray { border-bottom: 1px solid var(--rule); margin-bottom: 8px; }

@media (max-width: 900px) {
	.mpp-serve.has-photo { grid-template-columns: minmax(0, 1fr); }
	.mpp-serve__photo { order: -1; aspect-ratio: 3 / 2; }
	.mpp-tray__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.mpp-serve { padding: 36px 0 28px; gap: 22px; }
	.mpp-serve__title { max-width: none; }
	.mpp-serve__excerpt { font-size: 1.02rem; }
	.mpp-tray__list { grid-template-columns: minmax(0, 1fr); }
	.mpp-zone { min-height: 0; }
}

/* ---------- archives: zones on the pan ---------- */
.blog .site-main, .archive .site-main, .search .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	padding: 28px 0 40px;
}
.blog .site-main > .page-header, .archive .site-main > .page-header, .search .site-main > .page-header,
.blog .site-main > nav, .archive .site-main > nav, .search .site-main > nav,
.blog .site-main > .paging-navigation, .archive .site-main > .paging-navigation { grid-column: 1 / -1; }
.archive .page-header, .search .page-header { padding: 8px 0 12px; margin: 0; }
.archive .page-header .page-title, .search .page-header .page-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 0; }
.archive .page-header .page-title span { font-style: normal; }
.archive .page-header .archive-description { max-width: var(--measure); color: var(--ink-2); margin-top: 8px; }
.blog article.post, .archive article.post, .search article.post {
	margin: 0;
	background: var(--zone);
	border-radius: var(--r);
	overflow: hidden;
	transition: background-color 160ms ease-out;
}
.blog article.post:hover, .archive article.post:hover, .search article.post:hover { background: var(--zone-2); }
.blog article.post .inside-article, .archive article.post .inside-article, .search article.post .inside-article {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px 24px 22px;
}
.blog .post-image, .archive .post-image, .search .post-image { order: -1; margin: -24px -24px 20px; }
.blog .post-image a, .archive .post-image a { display: block; }
.blog .post-image img, .archive .post-image img, .search .post-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.blog .post-image .jpibfi, .archive .post-image .jpibfi { display: none; }
.blog article.post .entry-header, .archive article.post .entry-header { margin: 0; }
.blog article.post .entry-title, .archive article.post .entry-title, .search article.post .entry-title { font-size: 1.42rem; line-height: 1.15; margin: 0; }
.blog article.post .entry-title a, .archive article.post .entry-title a, .search article.post .entry-title a { color: var(--ink); text-decoration: none; }
.blog article.post .entry-title a:hover, .archive article.post .entry-title a:hover { color: var(--tomato); }
.blog article.post .entry-meta, .archive article.post .entry-meta, .search article.post .entry-meta { font-size: 0.8rem; color: var(--ink-2); margin: 8px 0 0; order: 5; }
.blog article.post .entry-meta .byline, .archive article.post .entry-meta .byline, .entry-meta .gp-icon { display: none; }
.blog .entry-summary, .archive .entry-summary, .search .entry-summary { margin: 14px 0 0; font-size: 0.95rem; color: var(--ink-2); }
.blog .entry-summary p, .archive .entry-summary p { margin: 0; }
.read-more { display: inline-block; margin-top: 10px; font: 600 0.78rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.blog footer.entry-meta, .archive footer.entry-meta, .search footer.entry-meta { margin-top: auto; padding-top: 16px; }
.blog .tags-links, .archive .tags-links, .search .tags-links { display: none; }
.blog .cat-links, .archive .cat-links, .search .cat-links { display: block; font-size: 0.86rem; line-height: 1.3; }
.blog .cat-links::before, .archive .cat-links::before, .search .cat-links::before { content: "Category"; display: block; margin-bottom: 2px; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive); }
.cat-links a, .tags-links a { color: var(--ink); text-decoration: none; }
.cat-links a:hover, .tags-links a:hover { color: var(--tomato); }
.paging-navigation, .post-navigation { padding: 8px 0 0; font-size: 0.9rem; }
.paging-navigation a, .post-navigation a { text-decoration: none; }

/* ---------- single recipe: one calm measure ---------- */
.single .site-main > article, .page:not(.home) .site-main > article { padding: 36px 0 56px; }
.single .entry-header, .page:not(.home) .entry-header { margin: 0 0 8px; }
.single .entry-title, .page:not(.home) .entry-title { font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.06; margin: 0; max-width: 22ch; }
.single .entry-meta { font-size: 0.85rem; color: var(--ink-2); margin: 14px 0 0; }
.single .entry-meta .byline { display: none; }
.mpp-prep {
	max-width: var(--measure);
	gap: 8px 40px;
	margin: 26px 0 30px;
	padding: 16px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	font-size: 1rem;
}
.single .featured-image, .single .post-image { margin: 0 0 32px; max-width: var(--measure); }
.single .featured-image img, .single .post-image img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.entry-content { max-width: var(--measure); }
.entry-content p, .entry-content ul, .entry-content ol { font-size: 1.125rem; line-height: 1.7; margin: 0 0 1.35em; }
.entry-content ul { padding-left: 1.3em; }
.entry-content ul li { margin: 0 0 0.45em; padding-left: 0.2em; }
.entry-content ul li::marker { color: var(--ink-2); }
.entry-content h2 { font-size: clamp(1.6rem, 2.6vw, 1.95rem); margin: 2.3em 0 0.6em; }
.entry-content h3 { font-size: 1.32rem; margin: 1.8em 0 0.5em; }
.entry-content h2 + h3, .entry-content h2 + p, .entry-content h3 + p { margin-top: 0; }
/* the method: numbered panels, one step each, plain type */
.entry-content > ol { list-style: none; padding: 0; counter-reset: mpp-step; border-top: 1px solid var(--rule); }
.entry-content > ol > li { counter-increment: mpp-step; position: relative; padding: 14px 0 14px 3rem; margin: 0; border-bottom: 1px solid var(--rule); }
.entry-content > ol > li::before {
	content: counter(mpp-step);
	position: absolute;
	left: 0;
	top: 12px;
	font: 600 1.25rem/1.25 var(--serif);
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.entry-content img { border-radius: var(--r); height: auto; }
.entry-content a[rel~="sponsored"], .entry-content a[href*="amazon.com"], .entry-content a[href*="amzn.to"] { font-weight: 600; text-decoration-thickness: 1.5px; text-decoration-color: currentColor; }
.entry-content blockquote { margin: 1.6em 0; padding: 20px 24px; background: var(--zone); border-radius: var(--r); border: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; }
.entry-content blockquote p { font-size: inherit; margin: 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; margin: 0 0 1.5em; }
.entry-content th, .entry-content td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.entry-content th { font: 600 0.72rem/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive); }
.entry-content iframe { max-width: 100%; border-radius: var(--r); }
.entry-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }
.single .tags-links, .single .cat-links { font-size: 0.85rem; color: var(--ink-2); }
.single footer.entry-meta { max-width: var(--measure); margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); }
.post-navigation { max-width: var(--measure); }
.comments-area { max-width: var(--measure); padding: 32px 0 0; border-top: 1px solid var(--rule); }
.comments-area input, .comments-area textarea, .wpcf7 input, .wpcf7 textarea { background: #fff; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); padding: 10px 12px; }
.comments-area input:focus, .comments-area textarea:focus, .wpcf7 input:focus, .wpcf7 textarea:focus { border-color: var(--tomato); outline: none; }
button, input[type="submit"], .button, .entry-content form button, .entry-content form input[type="submit"] { font: 600 0.8rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--tomato); border: 0; border-radius: 999px; padding: 14px 20px; cursor: pointer; }
button:hover, input[type="submit"]:hover, .button:hover { background: var(--ink); color: #fff; }
.entry-content form button, .entry-content form input[type="submit"] { background: var(--tomato) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font: 600 0.8rem/1 var(--sans) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 14px 20px !important; }
.entry-content form button:hover, .entry-content form input[type="submit"]:hover { background: var(--ink) !important; }
.entry-content form input[type="email"] { border: 1px solid var(--rule) !important; background: #fff !important; border-radius: 4px !important; color: var(--ink); }
.entry-content form input[type="email"]:focus { border-color: var(--tomato) !important; outline: none; }

/* ---------- sidebar (only when it holds a widget) ---------- */
.sidebar .widget { background: var(--zone); border-radius: var(--r); padding: 20px 22px; margin-bottom: 16px; box-shadow: none; }
.sidebar .widget-title { font-size: 1rem; margin: 0 0 10px; }
.sidebar .widget ul { list-style: none; padding: 0; margin: 0; }
.sidebar .widget li { padding: 6px 0; border-top: 1px solid var(--rule); }
.sidebar .widget li:first-child { border-top: 0; }
.sidebar .widget a { color: var(--ink); text-decoration: none; }
.sidebar .widget a:hover { color: var(--tomato); }

/* ---------- footer ---------- */
.site-footer { margin-top: 24px; }
.footer-widgets, .footer-widgets-container, .inside-footer-widgets { background: transparent; }
.footer-widgets { border-top: 1px solid var(--rule); padding: 24px 0 8px; }
.footer-widgets .widget { background: transparent; padding: 0; margin: 0; }
.footer-widgets .widget_nav_menu ul { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.footer-widgets .widget_nav_menu li { padding: 0; border: 0; }
.footer-widgets .widget_nav_menu a { font: 600 0.74rem/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.footer-widgets .widget_nav_menu a:hover { color: var(--tomato); }
.site-info { border-top: 1px solid var(--rule); font-size: 0.84rem; color: var(--ink-2); }
.inside-site-info { padding-top: 24px; padding-bottom: 36px; }
.site-info a { color: var(--ink-2); }
.site-info a:hover { color: var(--tomato); }
.footer-bar { display: none; }

/* ---------- phone rim, motion guard ---------- */
@media (max-width: 768px) { :root { --rim: 6px; } }
.admin-bar.mpp-pan::after { top: 32px; }
@media (max-width: 782px) { .admin-bar.mpp-pan::after { top: 46px; } }
@media (prefers-reduced-motion: reduce) {
	.mpp-serve__title a { animation: none; background-size: 100% 3px; }
	.mpp-cta:active { transform: none; }
}