/*
Theme Name: Recipe Card
Theme URI: https://recipecard.io/theme/
Author: WPZOOM
Author URI: https://www.wpzoom.com/
Description: A radically minimal, lightning-fast block theme for recipe sites and food blogs. Designed as the perfect companion for Recipe Card Blocks — beautiful typography, an app-like reading experience, and zero bloat.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: recipe-card
Tags: blog, food-and-drink, one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, block-styles, rtl-language-support, threaded-comments, translation-ready
*/

/* ---------------------------------------------------------------------------
 * Everything visual lives in theme.json. This file only covers what
 * theme.json cannot express yet. Keep it small — that is the product.
 * ------------------------------------------------------------------------- */

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	overflow-y: scroll;
}

/* Type niceties */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title {
	text-wrap: balance;
}

.wp-block-post-content p {
	text-wrap: pretty;
}

/* Numbers that line up (times, servings, ingredient amounts) */
.wp-block-post-date,
.recipe-card-meta,
.wp-block-wpzoom-recipe-card-block-details {
	font-variant-numeric: tabular-nums;
}

/* Underlines that feel considered */
.wp-block-post-content a:not(.wp-block-button__link),
.wp-block-comments a {
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
}

/* Visible, consistent focus */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Buttons: quiet hover, no color swap */
.wp-block-button__link:hover,
.wp-element-button:hover {
	opacity: 0.82;
}

/* Reduced motion: opt everything out */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Header search: quiet pill, desktop only */
.recipe-card-header-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.45em 1em;
	background: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--x-small);
}

.recipe-card-header-search .wp-block-search__input:focus {
	background: var(--wp--preset--color--base);
	outline: none;
	border-color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.recipe-card-header-search {
		display: none;
	}
}

/* Subscribe shows once per context: a pill beside the nav on desktop,
   a menu item inside the overlay on mobile. */
@media (min-width: 782px) {
	/* Beats core's `.wp-block-navigation .wp-block-navigation-item` display rule. */
	.wp-block-navigation li.recipe-card-nav-subscribe {
		display: none;
	}
}

@media (max-width: 781px) {
	.wp-block-buttons.recipe-card-header-subscribe {
		display: none;
	}
}

/* The mobile overlay: give it the theme's own typography and breathing room
   rather than core's defaults. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.015em;
	justify-content: flex-start;
	text-align: left;
}

/* The header nav is right-aligned; full screen, that reads as a mistake.
   Two wrappers carry that alignment — the container itself (via
   `.items-justified-right`, which needs matching specificity to beat) and
   the content wrapper around it. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
}

/* Brand mark in the header */
.recipe-card-brand-mark {
	display: inline-flex;
	color: var(--wp--preset--color--contrast);
}

.recipe-card-brand-mark svg {
	display: block;
}

/* Featured-image placeholder (posts without a thumbnail) */
.recipe-card-thumb-placeholder {
	background-color: var(--wp--preset--color--subtle);
	border-radius: var(--wp--custom--radius--medium, 14px);
	color: var(--wp--preset--color--border);
	margin: 0;
}

.recipe-card-thumb-placeholder,
.recipe-card-thumb-placeholder a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.recipe-card-thumb-placeholder svg {
	width: 24%;
	max-width: 88px;
}

/* ---------------------------------------------------------------------------
 * Block styles registered in functions.php
 * ------------------------------------------------------------------------- */

/* Group: Card — quiet surface for collections, notes, promos */
.is-style-card {
	background-color: var(--wp--preset--color--subtle);
	border-radius: var(--wp--custom--radius--large, 22px);
	padding: var(--wp--preset--spacing--40);
}

/* Group: Outlined card */
.is-style-card-outline {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large, 22px);
	padding: var(--wp--preset--spacing--40);
}

/* Navigation links & meta rows: no wrapping surprises */
.is-style-meta-row {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---------------------------------------------------------------------------
 * Recipe Index block
 * ------------------------------------------------------------------------- */

.rc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 7px 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
	white-space: nowrap;
}

.rc-chip.is-active {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.rc-index__search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 520px;
	padding: 12px 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--muted);
}

.rc-index__search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.rc-index__search input[type="search"]:focus {
	outline: none;
}

.rc-index__search button {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.rc-index__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--30);
}

.rc-index__alpha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.rc-index__alpha a,
.rc-index__alpha span {
	padding: 6px 8px;
	text-decoration: none;
}

.rc-index__alpha span[aria-hidden] {
	color: var(--wp--preset--color--border);
}

.rc-index__count {
	margin-left: auto;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.rc-index__group {
	margin-top: var(--wp--preset--spacing--50);
}

.rc-index__letter {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	scroll-margin-top: 24px;
}

.rc-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rc-index__item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.rc-index__thumb,
.rc-index__thumb img,
.rc-index__thumb-placeholder {
	width: 72px;
	height: 72px;
	flex: none;
	border-radius: var(--wp--custom--radius--small);
	object-fit: cover;
	display: block;
}

.rc-index__thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--border);
}

.rc-index__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.rc-index__title {
	font-weight: 600;
	text-decoration: none;
	text-wrap: balance;
}

.rc-index__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.rc-index__empty {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 600px) {
	.rc-index__term {
		display: none;
	}

	.rc-index__item {
		gap: 14px;
	}

	.rc-index__thumb,
	.rc-index__thumb img,
	.rc-index__thumb-placeholder {
		width: 56px;
		height: 56px;
	}
}

/* ---------------------------------------------------------------------------
 * Collections block
 * ------------------------------------------------------------------------- */

.rc-collections {
	display: grid;
	grid-template-columns: repeat(var(--rc-collections-columns, 2), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.rc-collection {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rc-collection__stack {
	display: flex;
	gap: 6px;
	border-radius: var(--wp--custom--radius--medium);
	overflow: hidden;
	margin-bottom: 8px;
}

.rc-collection__stack img {
	width: 33.333%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}

.rc-collection__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 1;
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--border);
}

.rc-collection__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.rc-collection__title a {
	text-decoration: none;
}

.rc-collection__count {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.rc-collection__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.rc-collections {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Recipe Card Blocks harmonization.
 * Until the plugin ships its CSS custom-property layer, nudge the card
 * toward the theme's typography and geometry. Intentionally gentle.
 * ------------------------------------------------------------------------- */

.wp-block-wpzoom-recipe-card-block-recipe-card,
.wp-block-wpzoom-recipe-card-block-ingredients,
.wp-block-wpzoom-recipe-card-block-directions,
.wp-block-wpzoom-recipe-card-block-details,
.wp-block-wpzoom-recipe-card-block-nutrition {
	font-family: inherit;
}

.wp-block-wpzoom-recipe-card-block-recipe-card {
	border-radius: var(--wp--custom--radius--large, 22px);
	overflow: hidden;
}

/* Mint lifts its round photo above the card's top edge, so the card must not clip it. */
.wp-block-wpzoom-recipe-card-block-recipe-card.is-style-mint {
	overflow: visible;
}

.wp-block-wpzoom-recipe-card-block-recipe-card .recipe-card-image img {
	border-radius: var(--wp--custom--radius--medium, 14px);
}

.wp-block-wpzoom-recipe-card-block-recipe-card .recipe-card-heading .recipe-card-title {
	font-family: inherit;
	letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------------------
 * Page builders
 *
 * The reading column (content size) is right for recipe text, but a layout
 * built in Elementor brings its own sections and columns and needs room.
 * Elementor content gets the wide size, and on pages the title lines up with it.
 * ------------------------------------------------------------------------- */

.wp-block-post-content.is-layout-constrained > .elementor {
	max-width: var(--wp--style--global--wide-size);
}

/* The theme's wide column is the box: top-level "boxed" sections and containers fill it,
   so builder content shares its left and right edge with the header and the title. */
.wp-block-post-content > .elementor > .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 100%;
}

.wp-block-post-content > .elementor > .e-con.e-con-boxed {
	--content-width: 100%;
}

body.page.elementor-page main.is-layout-constrained > .wp-block-group:has(> .wp-block-post-title),
body.page.elementor-page main.is-layout-constrained > .wp-block-group > .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size);
}

/* ---------------------------------------------------------------------------
 * Print: a recipe you can actually cook from
 * ------------------------------------------------------------------------- */

@media print {
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.wp-block-comments,
	.wp-site-blocks > .wp-block-group:has(.wp-block-search) {
		display: none !important;
	}

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

	.wp-block-post-content a {
		text-decoration: none;
	}
}