/*
Theme Name: prepwork
Text Domain: prepwork
Description: Warm editorial food-blog theme for Easier Meal Prep — cream paper, spruce green ink, terracotta accents, Fraunces + Karla.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

/* This file holds the WordPress theme header (above) plus truly global
 * rules only. Tailwind handles everything else.
 *
 * - Design tokens live in theme.css's @theme block.
 * - Prose + form styles live in presets.css.
 * - Layout, color, typography utilities come from Tailwind v4.
 *
 * Do NOT add component classes here (.btn-primary, .card, etc.). Use
 * Tailwind utilities in templates instead.
 */

html {
	scroll-behavior: smooth;
}

/* Critical pre-Tailwind fallbacks. This file loads as a plain stylesheet
 * before the Tailwind runtime compiles in draft preview, so these rules
 * prevent the flash of unstyled content (giant SVG logo, white page). */
body {
	margin: 0;
	background-color: #FAF6EE;
	color: #262B22;
}

img, svg {
	max-width: 100%;
}

/* Structural fallbacks matching the most-used utilities, so the layout
 * holds its shape during the draft-preview compile beat. Tailwind applies
 * identical values once compiled; at publish these are simply redundant. */
[x-cloak] { display: none !important; }
body { font-family: "Karla", ui-sans-serif, system-ui, sans-serif; }
.hidden { display: none; }
.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-6xl { max-width: 72rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-2xl { max-width: 42rem; }
.no-underline { text-decoration: none; }
.text-center { text-align: center; }
a { color: inherit; }
/* Anchors sitting on the brand-green background need light text. The
 * unlayered `a { color: inherit }` above otherwise beats Tailwind's
 * `text-white` utility (which lives in @layer utilities), leaving dark
 * text on the green "Dig in" button. This unlayered, higher-specificity
 * rule restores white text on any green-background link. */
a.bg-primary,
a.bg-primary:hover { color: #ffffff; }

/* Content/body images: the daily publish flow inserts a mix of landscape
 * and portrait photos as bare <figure><img> with no class, so tall
 * portrait shots render full-height inside .prose. Crop every content
 * image to a uniform 16:9 band. Unlayered so it beats the prose img
 * defaults in presets.css. */
.prose figure img,
.prose > img,
.prose p > img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 1rem;
}

/* Primary (desktop) nav is `hidden lg:block`. The unlayered `.hidden`
 * fallback above beats Tailwind's layered `.lg:block`, so for logged-out
 * visitors (who get the compiled dist/styles.css) the nav never shows.
 * This unlayered, higher-specificity rule restores it at the lg breakpoint. */
@media (min-width: 1024px) {
	nav[aria-label="Primary"] { display: block; }
}

/* Arbitrary aspect-ratio utilities that the compiled Tailwind build drops
 * (it doesn't emit bracket values). Defining them here, unlayered, keeps the
 * post-card thumbnails (3/2) and the home hero image (4/3) correctly cropped
 * for logged-out visitors instead of collapsing. */
.aspect-\[3\/2\]  { aspect-ratio: 3 / 2; }
.aspect-\[4\/3\]  { aspect-ratio: 4 / 3; }
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }

.font-display { font-family: "Fraunces", Georgia, serif; }
.list-none, .site-nav, .mobile-nav, .footer-links { list-style: none; margin: 0; padding: 0; }
.site-nav { display: flex; gap: 1.75rem; }
.site-nav a, .mobile-nav a, .footer-links a { text-decoration: none; }

/* Printable Prep Sheet — the click-magnet card at the foot of value/how-to
 * posts (emitted by the daily write-article step as a raw <div class="prep-sheet">).
 * Unlayered here so it survives the Tailwind compile and styles correctly for
 * logged-out visitors, same reasoning as the fallbacks above. Styled to match the
 * Prepwork palette: cream paper, spruce ink/green, terracotta value callout,
 * Fraunces headings + Karla body. */
.prep-sheet {
	max-width: 44rem;
	margin: 2.5rem auto;
	background: #FFFCF5;
	border: 1px solid #E4DECF;
	border-radius: 1rem;
	padding: 2rem 2.25rem 2.25rem;
	color: #262B22;
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	line-height: 1.6;
}
.prep-sheet h2 {
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0 0 0.6rem;
	color: #262B22;
}
.prep-sheet > p { font-size: 1rem; color: #55604C; margin: 0 0 1.25rem; }
.prep-sheet h3 {
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.2rem;
	margin: 1.5rem 0 0.75rem;
	color: #2F5D4A;
}
.prep-sheet ul { list-style: none; margin: 0; padding: 0; }
.prep-sheet ul li { padding: 0.7rem 0; border-bottom: 1px solid #EFE9DB; font-size: 0.95rem; color: #55604C; }
.prep-sheet ul li:last-child { border-bottom: none; }
.prep-sheet ul li strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #2F5D4A; margin-bottom: 0.15rem; }
.prep-sheet ol { margin: 0; padding-left: 1.4rem; }
.prep-sheet ol li { padding: 0 0 0.65rem 0.25rem; font-size: 0.95rem; color: #55604C; }
.prep-sheet .prep-total {
	display: block;
	background: #F7EDE4;
	border: 1px solid #E6C4AC;
	border-radius: 0.7rem;
	padding: 0.9rem 1.1rem;
	margin: 1.25rem 0 0.4rem;
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.05rem;
	color: #7A3F1E;
}
.prep-sheet table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; font-size: 0.9rem; }
.prep-sheet th { text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #2F5D4A; padding: 0 0.6rem 0.55rem 0; border-bottom: 1.5px solid #E4DECF; }
.prep-sheet td { padding: 0.7rem 0.6rem 0.7rem 0; border-bottom: 1px solid #EFE9DB; color: #55604C; vertical-align: top; }
.prep-sheet td:first-child { color: #262B22; font-weight: 600; }
.prep-sheet tr:last-child td { border-bottom: none; }
.print-prep-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: #FFFCF5;
	background: #2F5D4A;
	border: none;
	border-radius: 0.6rem;
	padding: 0.75rem 1.25rem;
	margin: 0.25rem 0 1.5rem;
}
.print-prep-btn:hover { background: #244638; }
@media print {
	body * { visibility: hidden; }
	.prep-sheet, .prep-sheet * { visibility: visible; }
	.prep-sheet { position: absolute; left: 0; top: 0; margin: 0; border: none; max-width: none; }
	.print-prep-btn { display: none; }
}

/* Per-item recipe dropdown — the collapsible recipe under each listicle item
 * (emitted by write-article as a raw <details class="recipe-toggle">). Replaces the
 * old prep-sheet as the on-page recipe payoff. Unlayered so it survives the Tailwind
 * compile and styles for logged-out visitors. Prepwork palette: cream card, spruce
 * green accents, Fraunces sub-heads + Karla body. */
.recipe-toggle {
	max-width: 44rem;
	margin: 0.4rem 0 1.8rem;
	background: #FFFCF5;
	border: 1px solid #E4DECF;
	border-radius: 0.85rem;
	overflow: hidden;
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
}
.recipe-toggle > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.1rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: #2F5D4A;
	user-select: none;
}
.recipe-toggle > summary::-webkit-details-marker { display: none; }
.recipe-toggle > summary::before {
	content: "\25B8";
	font-size: 0.85em;
	transition: transform 0.2s ease;
}
.recipe-toggle[open] > summary::before { transform: rotate(90deg); }
.recipe-toggle > summary:hover { background: #F3EFE4; }
.recipe-toggle-body { padding: 0.25rem 1.2rem 1.1rem; }
.recipe-toggle-body h4 {
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.02rem;
	margin: 0.9rem 0 0.35rem;
	color: #2F5D4A;
}
.recipe-toggle-body ul,
.recipe-toggle-body ol { margin: 0.3rem 0 0.7rem; padding-left: 1.3rem; }
.recipe-toggle-body li { padding: 0.15rem 0; font-size: 0.95rem; color: #55604C; }
.recipe-toggle-body .recipe-storage {
	font-size: 0.88rem;
	color: #55604C;
	border-top: 1px dashed #E4DECF;
	padding-top: 0.7rem;
	margin: 0.7rem 0 0;
}
.recipe-toggle-body .recipe-storage strong { color: #2F5D4A; }