/*
Theme Name: Petal and Plate
Theme URI: https://petalandplate.ca
Author: Petal and Plate
Description: A cheerful, calm block theme for Petal and Plate, a food and gardening blog for healthy families. Periwinkle and lavender with blush, butter and mint accents; Fraunces, Nunito and Caveat type; the round garden badge logo.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petal-and-plate
Tags: blog, food-and-drink, full-site-editing, block-patterns, custom-colors, one-column, grid-layout
*/

/* Fraunces is set to its soft, wonky style for the whimsical look */
h1, h2, h3, h4, h5, h6,
.wp-block-site-title,
.wp-block-post-title,
.wp-block-query-title,
.pp-wordmark,
.wp-block-pullquote,
.wp-block-quote {
	font-variation-settings: "SOFT" 100, "WONK" 1;
	text-wrap: balance;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--periwinkle);
	outline-offset: 3px;
}

/* ---------- Badge logo ---------- */
.pp-badge { display: block; max-width: 100%; height: auto; }
.pp-badge__ring { fill: var(--pp-ring, var(--wp--preset--color--periwinkle)); }
.pp-badge__inner { fill: var(--pp-inner, var(--wp--preset--color--base)); }
.pp-badge__text {
	fill: var(--pp-ring-text, #FFFFFF);
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	font-size: 10.5px;
	letter-spacing: 2.6px;
}
.pp-badge__petals { fill: var(--pp-petal, var(--wp--preset--color--blush)); }
.pp-badge__centre { fill: var(--pp-centre, var(--wp--preset--color--butter)); }

/* ---------- Header ---------- */
.pp-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.pp-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--wp--preset--color--ink); }
.pp-brand:hover { color: var(--wp--preset--color--ink); }
.pp-wordmark {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 1;
	white-space: nowrap;
}
/* The loopy upright Fraunces "&", slanted (the true italic "&" has a different shape) */
.pp-amp {
	display: inline-block;
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 500;
	font-style: normal;
	transform: skewX(-14deg);
	color: var(--wp--preset--color--periwinkle);
	margin: 0 0.18em 0 0.22em;
}
.pp-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

/* ---------- Hero ---------- */
.pp-hero h1 em { color: var(--wp--preset--color--periwinkle-deep); font-weight: 500; }
.pp-hand {
	font-family: var(--wp--preset--font-family--caveat);
	font-weight: 700;
	line-height: 1.1;
}
.pp-hero-art { position: relative; aspect-ratio: 1; width: 100%; max-width: 320px; margin-inline: auto; }
.pp-blob { position: absolute; border-radius: 50%; }
.pp-blob--1 { inset: 4% 10% 18% 4%; background: var(--wp--preset--color--lavender); opacity: .55; border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%; }
.pp-blob--2 { width: 34%; height: 34%; right: 4%; bottom: 6%; background: var(--wp--preset--color--butter); opacity: .85; }
.pp-blob--3 { width: 22%; height: 22%; left: 6%; bottom: 10%; background: var(--wp--preset--color--blush); }
.pp-hero-art .pp-badge { position: absolute; inset: 12%; width: 76%; height: 76%; }
@media (prefers-reduced-motion: no-preference) {
	.pp-hero-art .pp-badge { animation: pp-spin 60s linear infinite; }
	@keyframes pp-spin { to { transform: rotate(360deg); } }
}

/* ---------- Category tiles ---------- */
.pp-tile { border-radius: 24px; transition: transform .2s ease; height: 100%; }
.pp-tile:hover { transform: translateY(-3px) rotate(-0.5deg); }
.pp-tile a { color: inherit; text-decoration: none; }
.pp-tile a::after { content: ""; position: absolute; inset: 0; }
.pp-tile { position: relative; }

/* ---------- Post cards ---------- */
.pp-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 24px;
	overflow: hidden;
	height: 100%;
}
.pp-card .wp-block-post-featured-image { margin: 0; }
.pp-card .wp-block-post-featured-image img { border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; }
.pp-card .wp-block-post-featured-image:empty,
.pp-card .wp-block-post-featured-image:not(:has(img)) {
	display: none;
}
.pp-card .wp-block-post-title a:hover { color: var(--wp--preset--color--periwinkle-deep); }

/* Category pills, coloured by category */
.wp-block-post-terms.taxonomy-category { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wp-block-post-terms.taxonomy-category .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms.taxonomy-category a {
	display: inline-block;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--lavender);
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-weight: 800;
	text-decoration: none;
}
.wp-block-post-terms.taxonomy-category a[href*="/in-the-garden"] { background: var(--wp--preset--color--mint); }
.wp-block-post-terms.taxonomy-category a[href*="/in-the-kitchen"],
.wp-block-post-terms.taxonomy-category a[href*="/weeknight-meals"] { background: var(--wp--preset--color--blush); }
.wp-block-post-terms.taxonomy-category a[href*="/family-table"],
.wp-block-post-terms.taxonomy-category a[href*="/budget-cooking"] { background: var(--wp--preset--color--butter); }

/* ---------- Pagination ---------- */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers { text-decoration: none; font-weight: 700; }
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--periwinkle-deep);
	color: #FFFFFF;
	border-radius: 999px;
	padding: 0.15rem 0.65rem;
}

/* ---------- Single post ---------- */
.pp-single .wp-block-post-content > p:first-of-type::first-letter {
	font-family: var(--wp--preset--font-family--fraunces);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	float: left;
	font-size: 3.6em;
	line-height: 0.85;
	padding: 0.08em 0.1em 0 0;
	color: var(--wp--preset--color--periwinkle-deep);
	font-weight: 600;
}
.wp-block-post-content a { text-underline-offset: 3px; }
.wp-block-post-navigation-link a { text-decoration: none; font-weight: 700; }

/* ---------- Footer ---------- */
.pp-footer { --pp-ring: var(--wp--preset--color--periwinkle); --pp-inner: var(--wp--preset--color--ink); }
.pp-footer a { color: #FFFFFF; text-decoration: none; }
.pp-footer a:hover { color: var(--wp--preset--color--blush); }
.pp-footer .pp-hand { color: var(--wp--preset--color--blush); }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--periwinkle-deep);
	border: 2px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--periwinkle-deep);
	color: #FFFFFF;
	border-color: var(--wp--preset--color--periwinkle-deep);
}

@media (max-width: 600px) {
	.pp-wordmark { font-size: 1.3rem; }
	.pp-brand .pp-badge { width: 52px; height: 52px; }
}

/* Footer navigation sits on plum, so its links are white */
.pp-footer .wp-block-navigation a,
.pp-footer .wp-block-navigation .wp-block-navigation-item__content { color: #FFFFFF; }
.pp-footer .wp-block-navigation a:hover { color: var(--wp--preset--color--blush); }

/* Pages built with Elementor manage their own widths */
.wp-block-post-content > .elementor { max-width: none !important; }

/* Footer sits flush against the last homepage band */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

/* Keep brand headings on Elementor pages, whose site settings set their own heading font */
.wp-site-blocks .wp-block-post-title,
.wp-site-blocks .wp-block-query-title {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* Smaller spinning badge on phones */
@media (max-width: 781px) {
	.pp-hero-art { max-width: 240px; }
}

/* ==========================================================
   Blog posts: easy to scan on a phone
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
.wp-block-post-content [id] { scroll-margin-top: 1.5rem; }

/* Section headings get a little flower and extra room above, so sections are easy to spot */
.wp-block-post-content > h2.wp-block-heading {
	position: relative;
	margin-top: 2.75em;
	padding-left: 1.4em;
}
.wp-block-post-content > h2.wp-block-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.22em;
	width: 0.95em;
	height: 0.95em;
	background: url("assets/images/flower.svg") center / contain no-repeat;
}
.wp-block-post-content > h3.wp-block-heading { margin-top: 2em; }

/* Lists: periwinkle bullets and a little more breathing room */
.wp-block-post-content ul.wp-block-list li::marker { color: var(--wp--preset--color--periwinkle); }
.wp-block-post-content .wp-block-list li + li { margin-top: 0.45em; }

/* Jump to recipe */
.pp-jump { margin-block: 1.25rem 1.75rem; }

/* Shared box styling */
.pp-glance,
.pp-tip,
.pp-recipe-card {
	border-radius: 24px;
	padding: clamp(1.25rem, 4vw, 2rem);
	margin-block: 2rem;
}
.pp-glance > *,
.pp-tip > * { margin-block: 0; }
.pp-glance > * + *,
.pp-tip > * + * { margin-top: 0.6rem; }

/* At a glance / Why you'll love it */
.pp-glance { background: var(--wp--preset--color--tint); }
.pp-glance h3.wp-block-heading { margin-top: 0; }
.pp-glance ul.wp-block-list { padding-left: 1.2em; }
.pp-glance--garden { background: color-mix(in srgb, var(--wp--preset--color--mint) 35%, var(--wp--preset--color--surface)); }

/* Tip box */
.pp-tip { background: color-mix(in srgb, var(--wp--preset--color--mint) 45%, var(--wp--preset--color--surface)); }
.pp-box-label { font-size: 1.6rem; color: var(--wp--preset--color--ink); line-height: 1; }

/* Quick facts chips */
.pp-facts { gap: 0.5rem !important; margin-block: 1rem; }
.pp-facts > p {
	margin: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
.pp-facts > p strong {
	color: var(--wp--preset--color--periwinkle-deep);
	font-weight: 800;
	margin-right: 0.25em;
}

/* Recipe card */
.pp-recipe-card {
	background: var(--wp--preset--color--surface);
	border: 2px solid var(--wp--preset--color--lavender);
	margin-top: 3rem;
}
.pp-recipe-card > * { margin-block: 0; }
.pp-recipe-card > * + * { margin-top: 0.9rem; }
.pp-recipe-card > h2.wp-block-heading { margin-top: 0.1rem; padding-left: 0; }
.pp-recipe-card > h2.wp-block-heading::before { display: none; }
.pp-recipe-card > h3.wp-block-heading {
	margin-top: 1.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px dotted var(--wp--preset--color--lavender);
}
.pp-card-eyebrow { color: var(--wp--preset--color--periwinkle-deep); font-size: 1.5rem; line-height: 1; }
.pp-card-intro { color: var(--wp--preset--color--ink-soft); }
.pp-recipe-card .pp-facts > p { background: var(--wp--preset--color--tint); border-color: transparent; }

/* Ingredients: a circle to tick off in your head while you cook */
.pp-ingredients { list-style: none; padding-left: 0; }
.pp-ingredients li {
	position: relative;
	padding: 0.55rem 0 0.55rem 2rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin: 0 !important;
}
.pp-ingredients li:last-child { border-bottom: 0; }
.pp-ingredients li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.85rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--lavender);
	border-radius: 50%;
}

/* Numbered steps in periwinkle circles */
.pp-steps { list-style: none; padding-left: 0; counter-reset: pp-step; }
.pp-steps li {
	position: relative;
	counter-increment: pp-step;
	padding-left: 2.75rem;
	min-height: 2rem;
	margin: 0 0 1rem !important;
}
.pp-steps li::before {
	content: counter(pp-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--wp--preset--color--periwinkle-deep);
	color: #FFFFFF;
	font-weight: 800;
	font-size: 0.95rem;
	display: grid;
	place-items: center;
}

/* Notes inside the recipe card */
.pp-card-notes {
	background: color-mix(in srgb, var(--wp--preset--color--blush) 35%, var(--wp--preset--color--surface));
	border-radius: 18px;
	padding: 1rem 1.25rem;
	margin-top: 1.5rem !important;
}
.pp-card-notes > * { margin-block: 0; }
.pp-card-notes > * + * { margin-top: 0.5rem; }
.pp-card-notes h3.wp-block-heading { border: 0; padding: 0; margin-top: 0; }

/* Sign-off */
.pp-signoff { font-size: 1.75rem; color: var(--wp--preset--color--periwinkle-deep); margin-top: 2rem; }

/* Phones: bigger, easier text and full-width boxes */
@media (max-width: 600px) {
	.pp-single .wp-block-post-content { font-size: 1.0625rem; line-height: 1.75; }
	.pp-recipe-card, .pp-glance, .pp-tip { border-radius: 20px; }
	.pp-jump .wp-block-button { width: 100%; }
	.pp-jump .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; }
}