/*
Theme Name: Christen's Recipes
Theme URI: https://christensrecipes.com/
Author: Christen Campbell
Description: A modern, recipe-first block theme for ChristensRecipes.com.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.5
Version: 0.1.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: christensrecipes
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	color-scheme: light;
}

body {
	margin: 0;
	overflow-wrap: break-word;
}

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

a {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

:where(a, button, input, select, summary, textarea, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid
		var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}

::selection {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--purple-tint);
}

.site-header {
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.site-header__inner {
	min-height: 5rem;
	padding-block: var(--wp--preset--spacing--30);
}

.site-header .wp-block-site-title {
	margin-block: 0;
}

.site-header .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 2.75rem;
}

.site-header .wp-block-site-title a::before,
.site-footer .wp-block-site-title a::before {
	flex: 0 0 auto;
	width: 2.75rem;
	aspect-ratio: 1;
	background: url("./assets/logo/apron-purple-gray.svg") center / contain
		no-repeat;
	content: "";
}

.site-footer .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.site-navigation .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: var(--wp--preset--spacing--20);
}

.header-search {
	flex: 0 1 14rem;
	margin-block: 0;
}

.header-search .wp-block-search__inside-wrapper {
	padding: 0;
	border: 0;
}

.header-search .wp-block-search__input {
	min-width: 0;
	height: 2.75rem;
	border-color: var(--wp--preset--color--control-border);
	border-radius: var(--wp--preset--border-radius--control);
}

.site-main {
	padding-block: var(--wp--preset--spacing--70);
}

.site-footer {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.site-footer__inner {
	padding-block: var(--wp--preset--spacing--60);
}

.post-meta {
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--graphite);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.front-page-feature {
	padding-block-end: var(--wp--preset--spacing--70);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.feature-card {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
	align-items: stretch;
	overflow: hidden;
	background: var(--wp--preset--color--purple-wash);
	border: 1px solid var(--wp--preset--color--purple-tint);
	border-radius: var(--wp--preset--border-radius--panel);
	box-shadow: var(--wp--preset--shadow--soft);
}

.feature-card__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3rem);
}

.feature-card__content > :first-child {
	margin-block-start: 0;
}

.feature-card__content > :last-child {
	margin-block-end: 0;
}

.feature-card__eyebrow {
	color: var(--wp--preset--color--purple-gray);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.recipe-media {
	position: relative;
	min-height: 12rem;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--purple-wash),
		var(--wp--preset--color--purple-tint)
	);
}

.recipe-media__placeholder,
.recipe-media .wp-block-post-featured-image,
.recipe-media .wp-block-post-featured-image a {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.recipe-media__placeholder::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(38%, 8rem);
	aspect-ratio: 1;
	background: url("./assets/logo/apron-purple-gray.svg") center / contain
		no-repeat;
	content: "";
	opacity: 0.22;
	transform: translate(-50%, -50%);
}

.recipe-media:has(.wp-block-post-featured-image img)
	.recipe-media__placeholder {
	display: none;
}

.recipe-media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feature-card__media {
	height: 100%;
	min-height: 25rem;
	aspect-ratio: auto;
}

.feature-card .wp-block-post-title {
	margin-block: var(--wp--preset--spacing--30);
}

.feature-card .wp-block-post-title a,
.recipe-card .wp-block-post-title a {
	text-decoration: none;
}

.feature-card .wp-block-post-excerpt__more-link,
.recipe-card .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.65rem 1rem;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--brand-purple);
	border-radius: var(--wp--preset--border-radius--control);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
}

.feature-card .wp-block-post-excerpt__more-link:hover,
.recipe-card .wp-block-read-more:hover {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--purple-gray);
}

.front-page-feature .wp-block-post-featured-image {
	overflow: hidden;
}

.wp-block-post-template.recipe-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	padding: 0;
}

.recipe-card {
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--card);
	box-shadow: var(--wp--preset--shadow--card);
}

.recipe-card__content {
	padding: var(--wp--preset--spacing--40);
}

.recipe-card__content > :first-child {
	margin-block-start: 0;
}

.wp-block-post-template.archive-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	margin-block: var(--wp--preset--spacing--60);
}

.archive-pagination {
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.wp-block-post-content > .wp-block-ryelle-recipe,
.wp-block-post-content > .rmb-recipe-block {
	margin-block: var(--wp--preset--spacing--60);
	padding: clamp(1rem, 4vw, 2rem);
	background: var(--wp--preset--color--purple-wash);
	border: 1px solid var(--wp--preset--color--purple-tint);
	border-radius: var(--wp--preset--border-radius--panel);
}

.rmb-recipe__meta-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--wp--preset--color--border);
}

.rmb-recipe__meta-item-label {
	display: block;
	color: var(--wp--preset--color--purple-gray);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.rmb-recipe-block__ingredients li,
.rmb-recipe-block__directions li {
	padding-inline-start: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--20);
}

@media (width <= 50rem) {
	.site-header__inner {
		flex-wrap: wrap;
	}

	.header-search {
		flex: 1 1 100%;
		order: 3;
	}

	.feature-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.feature-card__media {
		min-height: auto;
		aspect-ratio: 4 / 3;
	}
}

@media (width <= 35rem) {
	.site-header .wp-block-site-title a {
		gap: 0;
		font-size: 0;
	}

	.wp-block-post-template.recipe-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	@page {
		margin: 0.65in;
	}

	html,
	body {
		color: #000 !important;
		background: #fff !important;
		font-size: 11pt;
	}

	header.wp-block-template-part,
	footer.wp-block-template-part,
	.wp-block-post-navigation-link,
	.wp-block-post-terms {
		display: none !important;
	}

	.site-main {
		padding-block: 0;
	}

	a {
		color: #000 !important;
		text-decoration: underline;
	}

	h1,
	h2,
	h3,
	h4 {
		color: #000 !important;
		break-after: avoid;
	}

	.wp-block-post-content > .wp-block-ryelle-recipe,
	.wp-block-post-content > .rmb-recipe-block {
		padding: 0;
		background: #fff !important;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.wp-block-post-content > .wp-block-ryelle-recipe .wp-block-image,
	.wp-block-post-content > .rmb-recipe-block .wp-block-image {
		display: none;
	}

	.rmb-recipe__meta-list {
		border-color: #000;
		break-inside: avoid;
	}

	.rmb-recipe-block__ingredients,
	.rmb-recipe-block__directions,
	.rmb-recipe-block__ingredients li,
	.rmb-recipe-block__directions li {
		break-inside: avoid;
	}
}