/* ==========================================================================
   Meridian — recipe UX layer
   --------------------------------------------------------------------------
   Presentation only. Recipe data, schema, print and the card itself belong to
   Tasty Recipes; nothing here duplicates that. This file restyles the theme's
   existing markup into a food-site experience:

     .vce-loop-wrap  > article.vce-post   archive / related card grid
     article.vce-single                    single recipe article
     .vce-recipe-actions                   jump / print bar (include/recipe-ux.php)

   Loaded after main.css / min.css, so equal-specificity rules win.
   Palette follows the Cuisine reference: olive, gold, warm off-white.
   ========================================================================== */

:root {
	--rx-olive: #324428;
	--rx-olive-dk: #24311d;
	--rx-gold: #BC9C29;
	--rx-ink: #1c1c1a;
	--rx-muted: #6b7268;
	--rx-line: #e4e6e0;
	--rx-surface: #F6F4F4;
	--rx-radius: 4px;
	--rx-gap: 32px;
}

/* ==========================================================================
   1. Archive / related card grid
   ========================================================================== */

.vce-loop-wrap,
.vce-related-box .main-box-inside {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--rx-gap);
	align-items: start;
}

/* The theme floats and clears its cards; grid needs that undone. */
.vce-loop-wrap > article.vce-post,
.vce-related-box .main-box-inside > article.vce-post {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	/* Grid items default to min-width:auto, so a long title or a wide image
	   pushes its column past its share and the row goes uneven. Measured at
	   375px: 192px/124px without this, 158px/158px with it. */
	min-width: 0;
}

.vce-loop-wrap .entry-title,
.vce-loop-wrap .entry-meta,
.vce-loop-wrap .meta-category,
.vce-related-box .entry-title {
	min-width: 0;
	overflow-wrap: break-word;
}

.vce-loop-wrap:after,
.vce-related-box .main-box-inside:after { content: none; }

/* --- the image does the selling ---------------------------------------- */

.vce-loop-wrap .meta-image,
.vce-related-box .meta-image {
	margin: 0 0 14px;
	border-radius: var(--rx-radius);
	overflow: hidden;
	background: var(--rx-surface);
	aspect-ratio: 4 / 3;
}

.vce-loop-wrap .meta-image a,
.vce-related-box .meta-image a { display: block; height: 100%; }

.vce-loop-wrap .meta-image img,
.vce-related-box .meta-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s cubic-bezier(.2,.6,.2,1);
}

.vce-loop-wrap article:hover .meta-image img,
.vce-related-box article:hover .meta-image img { transform: scale(1.045); }

/* --- category eyebrow --------------------------------------------------- */

.vce-loop-wrap .meta-category,
.vce-related-box .meta-category {
	display: block;
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
}

.vce-loop-wrap .meta-category a,
.vce-related-box .meta-category a { color: var(--rx-gold); }
.vce-loop-wrap .meta-category a:hover { color: var(--rx-olive); }

/* --- title -------------------------------------------------------------- */

.vce-loop-wrap .entry-title,
.vce-related-box .entry-title {
	margin: 0 0 8px;
	line-height: 1.28;
	font-size: 19px;
	text-wrap: balance;
}

.vce-loop-wrap .entry-title a,
.vce-related-box .entry-title a { color: var(--rx-olive); }
.vce-loop-wrap .entry-title a:hover { color: var(--rx-gold); }

/* --- metadata stays minimal on a recipe card ---------------------------- */

.vce-loop-wrap .entry-meta,
.vce-related-box .entry-meta {
	font-size: 12.5px;
	color: var(--rx-muted);
	letter-spacing: .01em;
	margin: 0;
}

.vce-loop-wrap .entry-content {
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--rx-muted);
}

.vce-loop-wrap .vce-read-more {
	align-self: flex-start;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rx-olive);
	border-bottom: 2px solid var(--rx-gold);
	padding-bottom: 2px;
}

/* Grid layouts (D–F) are already compact — keep them denser. */
.vce-loop-wrap > article.vce-lay-d,
.vce-loop-wrap > article.vce-lay-e,
.vce-loop-wrap > article.vce-lay-f { font-size: 14px; }

/* ==========================================================================
   2. Single recipe article
   ========================================================================== */

article.vce-single .entry-header { margin-bottom: 22px; }

article.vce-single .entry-title {
	line-height: 1.14;
	text-wrap: balance;
	margin-bottom: 12px;
}

article.vce-single .meta-category {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
article.vce-single .meta-category a { color: var(--rx-gold); }

article.vce-single .entry-meta {
	font-size: 13px;
	color: var(--rx-muted);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rx-line);
}

/* Featured image: full-bleed within the column, never letterboxed. */
article.vce-single > .meta-image,
article.vce-single .meta-image {
	margin: 0 0 26px;
	border-radius: var(--rx-radius);
	overflow: hidden;
}
article.vce-single .meta-image img { width: 100%; height: auto; display: block; }

article.vce-single .vce-photo-caption {
	font-size: 12.5px;
	color: var(--rx-muted);
	padding: 8px 2px 0;
	font-style: italic;
}

/* ==========================================================================
   3. Article body — the sections a recipe post is actually made of
   ========================================================================== */

article.vce-single .entry-content {
	font-size: 18px;
	line-height: 1.72;
	color: var(--rx-ink);
}

article.vce-single .entry-content > p { margin: 0 0 1.15em; }

article.vce-single .entry-content > h2 {
	margin: 1.9em 0 .55em;
	padding-top: .55em;
	border-top: 2px solid var(--rx-line);
	font-size: 27px;
	line-height: 1.22;
	color: var(--rx-olive);
	text-wrap: balance;
}

article.vce-single .entry-content > h3 {
	margin: 1.5em 0 .45em;
	font-size: 21px;
	line-height: 1.28;
	color: var(--rx-olive);
}

article.vce-single .entry-content > h4 {
	margin: 1.3em 0 .4em;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rx-muted);
}

/* Ingredient and step lists get room to breathe. */
article.vce-single .entry-content ul,
article.vce-single .entry-content ol { margin: 0 0 1.3em; padding-left: 1.35em; }
article.vce-single .entry-content li { margin-bottom: .55em; }

article.vce-single .entry-content ol > li::marker {
	font-weight: 700;
	color: var(--rx-olive);
}

/* Tips / Storage / Notes read better as a set-aside block. */
article.vce-single .entry-content blockquote {
	margin: 1.6em 0;
	padding: 18px 22px;
	background: var(--rx-surface);
	border-left: 4px solid var(--rx-gold);
	border-radius: 0 var(--rx-radius) var(--rx-radius) 0;
	font-style: normal;
	font-size: 16.5px;
}
article.vce-single .entry-content blockquote p:last-child { margin-bottom: 0; }

article.vce-single .entry-content img { border-radius: var(--rx-radius); }

/* Inline FAQ pairs, when written as h3 + p or a details element. */
article.vce-single .entry-content details {
	border-bottom: 1px solid var(--rx-line);
	padding: 14px 0;
}
article.vce-single .entry-content details summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--rx-olive);
	list-style: none;
}
article.vce-single .entry-content details summary::-webkit-details-marker { display: none; }
article.vce-single .entry-content details summary::after {
	content: "+";
	float: right;
	color: var(--rx-gold);
	font-size: 20px;
	line-height: 1;
}
article.vce-single .entry-content details[open] summary::after { content: "\2013"; }

/* ==========================================================================
   4. Jump to Recipe / Print bar
   ========================================================================== */

.vce-recipe-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 26px;
	padding: 14px 16px;
	background: var(--rx-surface);
	border-radius: var(--rx-radius);
	align-items: center;
}

.vce-recipe-actions .rx-label {
	flex: 1 1 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rx-muted);
}

.vce-recipe-actions a,
.vce-recipe-actions button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;             /* touch target */
	padding: 0 18px;
	border: 0;
	border-radius: var(--rx-radius);
	background: var(--rx-olive);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease;
}

.vce-recipe-actions a:hover,
.vce-recipe-actions button:hover { background: var(--rx-olive-dk); color: #fff; }

.vce-recipe-actions .rx-print {
	background: transparent;
	color: var(--rx-olive);
	box-shadow: inset 0 0 0 2px var(--rx-olive);
}
.vce-recipe-actions .rx-print:hover { background: var(--rx-olive); color: #fff; }

/* Hidden until the JS confirms a recipe card exists on the page. */
.vce-recipe-actions[hidden] { display: none; }

/* ==========================================================================
   5. Section headings on the homepage / archives
   ========================================================================== */

.main-box-title,
.vce-related-box .main-box-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rx-olive);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--rx-olive);
	margin-bottom: 24px;
}

.archive-title,
.vce-archive-title {
	margin-bottom: 8px;
	color: var(--rx-olive);
	text-wrap: balance;
}

/* ==========================================================================
   6. Responsive
   --------------------------------------------------------------------------
   Breakpoints deliberately match the ones already in responsive.css — 1023
   for tablet, 670 for mobile, 420 for small phones. Inventing new ones puts
   this file out of step with the theme and produces a band of widths where
   the two disagree about which layout is in force.

   Card widths themselves need no breakpoint: auto-fill + minmax reflows on
   its own, including when a sidebar is present or absent (.vce-sid-*), which
   the theme's fixed 375px cards cannot do.
   ========================================================================== */

@media only screen and (max-width: 1023px) {
	:root { --rx-gap: 26px; }

	.vce-loop-wrap,
	.vce-related-box .main-box-inside {
		grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	}

	article.vce-single .entry-content > h2 { font-size: 25px; }
}

@media only screen and (max-width: 670px) {
	:root { --rx-gap: 20px; }

	.vce-loop-wrap,
	.vce-related-box .main-box-inside {
		grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	}

	.vce-loop-wrap .entry-title,
	.vce-related-box .entry-title { font-size: 15.5px; }

	.vce-loop-wrap .entry-content { display: none; }   /* excerpts crowd a phone */
	.vce-loop-wrap .vce-read-more { display: none; }   /* the whole card is a link */

	article.vce-single .entry-content { font-size: 17px; line-height: 1.68; }
	article.vce-single .entry-content > h2 { font-size: 23px; }
	article.vce-single .entry-content > h3 { font-size: 19px; }
	article.vce-single .entry-content blockquote { padding: 14px 16px; }

	.vce-recipe-actions { padding: 12px; }
	.vce-recipe-actions .rx-label { flex: 1 0 100%; margin-bottom: 4px; }
	.vce-recipe-actions a,
	.vce-recipe-actions button { flex: 1 1 0; justify-content: center; padding: 0 12px; }
}

@media only screen and (max-width: 420px) {
	.vce-loop-wrap,
	.vce-related-box .main-box-inside { grid-template-columns: 1fr 1fr; }
	.vce-loop-wrap .entry-meta,
	.vce-related-box .entry-meta { display: none; }
	.vce-loop-wrap .meta-image,
	.vce-related-box .meta-image { margin-bottom: 10px; }
}

/* ==========================================================================
   7. Print — the article around a Tasty Recipes card
   ========================================================================== */

@media print {
	.vce-recipe-actions,
	.vce-related-box,
	#footer,
	.site-footer,
	#sidebar,
	.vce-sidebar,
	.share-bar,
	.vce-share-bar,
	#back-top,
	.vce-link-pages { display: none !important; }

	article.vce-single .entry-content { font-size: 12pt; line-height: 1.5; }
	article.vce-single .meta-image { max-width: 60%; }
}

@media (prefers-reduced-motion: reduce) {
	.vce-loop-wrap .meta-image img,
	.vce-related-box .meta-image img { transition: none; }
	.vce-loop-wrap article:hover .meta-image img { transform: none; }
}