/*
 * Recipe Engine Frontend Styles — NYT Cooking Pantry Design System
 *
 * Free Google Font Substitutes:
 * - nyt-cheltenham (Display Title)     -> 'Newsreader', Georgia, 'Times New Roman', serif
 * - nyt-karnak     (Section / Labels)  -> 'Zilla Slab', Rockwell, Georgia, serif
 * - nyt-imperial   (Story / Steps)     -> 'Source Serif 4', Georgia, 'Times New Roman', serif
 * - nyt-franklin   (UI / Ingredients)  -> 'Libre Franklin', -apple-system, BlinkMacSystemFont, Arial, sans-serif
 */

:root {
	--re-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
	--re-font-slab: 'Zilla Slab', Georgia, 'Times New Roman', serif;
	--re-font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--re-font-ui: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	--re-color-text: #222222;
	--re-color-subdued: #717171;
	--re-color-stroke: #cccccc;
	--re-color-stroke-thick: #222222;
	--re-color-accent: #df321b;
	--re-color-bg: #ffffff;
	--re-color-bg-raised: #f2f2f2;
}

/* 1. Hide redundant theme title/thumbnail/sidebar on single recipe pages (including Divi 4/5 & block themes) */
body.single-recipe .entry-header,
body.single-recipe .et_post_meta_wrapper,
body.single-recipe .wp-block-post-title,
body.single-recipe .wp-block-post-featured-image,
body.single-recipe .post-thumbnail,
body.single-recipe #sidebar,
body.single-recipe aside#secondary,
body.single-recipe .widget-area,
body.single-recipe #main-content .container::before {
	display: none !important;
}

/* 2. Force full-width container on single recipe pages (removes Divi 79% #left-area column constraint) */
body.single-recipe #left-area,
body.single-recipe #primary,
body.single-recipe .content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	margin-right: 0 !important;
}

body.single-recipe #main-content .container,
body.single-recipe .entry-content,
body.single-recipe .wp-block-post-content {
	width: 100% !important;
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px;
	padding-right: 20px;
}

.re-nyt-recipe {
	max-width: 1160px;
	margin: 16px auto 64px;
	background: var(--re-color-bg);
	color: var(--re-color-text);
	font-family: var(--re-font-ui);
	box-sizing: border-box;
}

.re-nyt-recipe *,
.re-nyt-recipe *::before,
.re-nyt-recipe *::after {
	box-sizing: border-box;
}

/* 8-Column NYT Grid System */
.re-nyt-grid {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	column-gap: 40px;
	align-items: start;
}

/* Dividers — Tight bottom spacing matching NYT Cooking model page */
.re-nyt-recipe hr.re-nyt-divider {
	display: block;
	width: 100%;
	height: 0;
	border: none;
	background: transparent;
	padding: 0 !important;
}

.re-nyt-recipe hr.re-nyt-divider-thin {
	border-top: 1px solid var(--re-color-stroke) !important;
	margin: 20px 0 10px 0 !important;
}

.re-nyt-recipe hr.re-nyt-divider-thick {
	border-top: 5px solid var(--re-color-stroke-thick) !important;
	margin: 28px 0 10px 0 !important;
}

/* Top Split Hero Section */
.re-nyt-hero {
	margin-bottom: 0;
	align-items: center;
}

.re-nyt-hero.re-has-media .re-nyt-hero-text {
	grid-column: 1 / 4;
}

.re-nyt-hero.re-no-media .re-nyt-hero-text {
	grid-column: 1 / 9;
}

.re-nyt-hero-figure {
	grid-column: 4 / 9;
	margin: 0 !important;
}

.re-nyt-hero-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.re-nyt-figcaption {
	font-family: var(--re-font-ui);
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--re-color-subdued);
	margin-top: 6px;
}

/* Display Title (nyt-cheltenham substitute -> Newsreader 300) */
.re-nyt-recipe h1.re-nyt-title {
	font-family: var(--re-font-display);
	font-weight: 300;
	font-size: 2.875rem;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--re-color-text);
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
}

.re-nyt-recipe p.re-nyt-subtitle {
	font-family: var(--re-font-display);
	font-weight: 300;
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.35;
	color: var(--re-color-text);
	margin: 0 0 6px 0 !important;
	padding: 0 !important;
}

.re-nyt-recipe p.re-nyt-sub-subtitle {
	font-family: var(--re-font-ui);
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: var(--re-color-subdued);
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
}

.re-nyt-byline {
	font-family: var(--re-font-ui);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: var(--re-color-text);
	margin-top: 10px;
}

.re-nyt-date {
	font-family: var(--re-font-ui);
	font-weight: 400;
	font-size: 0.8125rem;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--re-color-subdued);
	margin-top: 4px;
}

/* Labels & Section Titles (nyt-karnak substitute -> Zilla Slab 700 Uppercase) */
.re-nyt-recipe .re-nyt-label {
	font-family: var(--re-font-slab);
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1.45;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--re-color-text);
	margin: 0 !important;
	padding: 0 !important;
}

.re-nyt-recipe h2.re-nyt-section-title {
	font-family: var(--re-font-slab);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--re-color-text);
	margin: 0 0 16px 0 !important;
	padding: 0 !important;
}

/* Intro Section: Timing + Actions (Left 3 cols) & Story Headnote (Right 5 cols) */
.re-nyt-stats {
	grid-column: 1 / 4;
}

.re-nyt-stats-list {
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.re-nyt-stat-row {
	display: grid;
	grid-template-columns: 115px 1fr;
	align-items: baseline;
	column-gap: 12px;
	margin: 0 !important;
}

.re-nyt-stat-val {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--re-font-ui);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: var(--re-color-text);
}

.re-nyt-headnote {
	grid-column: 4 / 9;
	font-family: var(--re-font-body);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.55;
	letter-spacing: 0.01em;
	color: var(--re-color-text);
}

.re-nyt-recipe p.re-nyt-lead {
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
	font-weight: 600;
}

.re-nyt-recipe .re-nyt-story-body p {
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
}

.re-nyt-recipe .re-nyt-story-body p:last-child {
	margin-bottom: 0 !important;
}

/* NYT Cooking-style inline underlined tags (no bullets) */
.re-nyt-tags {
	margin-top: 14px;
	font-family: var(--re-font-ui);
	font-size: 0.875rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
}

.re-nyt-recipe ul.re-nyt-tag-list,
.re-nyt-recipe ul.re-nyt-tag-list li.re-nyt-tag-item {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.re-nyt-recipe ul.re-nyt-tag-list li.re-nyt-tag-item::before {
	display: none !important;
	content: none !important;
}

.re-nyt-tag-item {
	display: inline !important;
}

.re-nyt-tag-item a {
	color: var(--re-color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}

.re-nyt-tag-item a:hover {
	color: var(--re-color-subdued);
}

.re-nyt-tag-item::after {
	content: ", ";
	color: var(--re-color-subdued);
}

.re-nyt-tag-item:last-child::after {
	content: "";
}

/* NYT Cooking-style Action Pill Buttons (Under Yield in Left Column) */
.re-nyt-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	font-family: var(--re-font-ui);
}

.re-nyt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--re-color-stroke);
	border-radius: 20px;
	background-color: var(--re-color-bg);
	color: var(--re-color-text);
	font-family: var(--re-font-ui);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
	text-decoration: none;
	user-select: none;
}

.re-nyt-btn:hover,
.re-nyt-btn[aria-expanded="true"] {
	background-color: var(--re-color-bg-raised);
	border-color: #b5b5b5;
}

.re-nyt-btn:focus-visible {
	outline: 2px solid var(--re-color-text);
	outline-offset: 2px;
}

.re-nyt-btn-icon {
	display: block;
	flex-shrink: 0;
}

.re-nyt-share-wrap {
	position: relative;
	display: inline-block;
}

.re-nyt-share-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 50;
	min-width: 190px;
	padding: 6px 0;
	background: var(--re-color-bg);
	border: 1px solid var(--re-color-stroke);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.re-nyt-share-menu[hidden] {
	display: none !important;
}

.re-nyt-share-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 16px;
	border: none;
	background: transparent;
	color: var(--re-color-text);
	font-family: var(--re-font-ui);
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.re-nyt-share-item:hover {
	background-color: var(--re-color-bg-raised);
	color: var(--re-color-text);
}

.re-nyt-share-item.is-copied {
	color: #1b7f37;
	font-weight: 600;
}

/* Main Workspace: Ingredients (Left 3 cols) & Preparation (Right 5 cols) */
.re-nyt-ingredients {
	grid-column: 1 / 4;
}

.re-nyt-yield {
	font-family: var(--re-font-ui);
	font-size: 1rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
	margin: 0 0 16px 0 !important;
	padding: 0 !important;
	color: var(--re-color-text);
}

.re-nyt-yield strong {
	font-weight: 700;
}

.re-nyt-yield span {
	font-weight: 500;
}

/* Strictly remove circles/bullets and left indentation from Ingredients list across all WP/Divi themes */
.re-nyt-recipe ul.re-nyt-ingredients-list {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.re-nyt-recipe ul.re-nyt-ingredients-list li.re-nyt-ingredient-item {
	list-style: none !important;
	list-style-type: none !important;
	font-family: var(--re-font-ui);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: var(--re-color-text);
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
}

.re-nyt-recipe ul.re-nyt-ingredients-list li.re-nyt-ingredient-item::before,
.re-nyt-recipe ul.re-nyt-ingredients-list li.re-nyt-ingredient-item::marker {
	display: none !important;
	content: none !important;
}

.re-nyt-ingredient-item .re-ing-amount,
.re-nyt-ingredient-item .re-ing-unit {
	font-weight: 500;
}

.re-nyt-ingredient-item .re-ing-name {
	font-weight: 400;
}

/* Preparation Column */
.re-nyt-preparation {
	grid-column: 4 / 9;
}

.re-nyt-recipe .re-nyt-steps-list {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.re-nyt-recipe .re-nyt-step-item {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 0 26px 0 !important;
	padding: 0 !important;
}

.re-nyt-recipe .re-nyt-step-item:last-child {
	margin-bottom: 0 !important;
}

.re-nyt-recipe h3.re-nyt-step-heading {
	font-family: var(--re-font-ui);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: var(--re-color-text);
	margin: 0 0 6px 0 !important;
	padding: 0 !important;
}

.re-nyt-step-text {
	font-family: var(--re-font-body);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.55;
	letter-spacing: 0.01em;
	color: var(--re-color-text);
}

.re-nyt-recipe .re-nyt-step-text p {
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
}

.re-nyt-recipe .re-nyt-step-text p:last-child {
	margin-bottom: 0 !important;
}

.re-nyt-step-figure {
	margin: 14px 0 0;
}

.re-nyt-step-figure img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Tip / Chef's Notes Box */
.re-nyt-tip {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--re-color-stroke);
}

.re-nyt-recipe .re-nyt-tip .re-nyt-label {
	margin-bottom: 6px !important;
}

.re-nyt-tip-text {
	font-family: var(--re-font-body);
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--re-color-text);
}

.re-nyt-recipe .re-nyt-tip-text p {
	margin: 0 !important;
	padding: 0 !important;
}

/* Tablet & Mobile Breakpoints (matches NYT Cooking 1024px / 768px breakpoints) */
@media screen and (max-width: 1023px) {
	.re-nyt-recipe h1.re-nyt-title {
		font-size: 2.25rem;
	}

	.re-nyt-grid {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	.re-nyt-hero.re-has-media .re-nyt-hero-text,
	.re-nyt-hero.re-no-media .re-nyt-hero-text,
	.re-nyt-hero-figure,
	.re-nyt-stats,
	.re-nyt-headnote,
	.re-nyt-ingredients,
	.re-nyt-preparation {
		grid-column: 1 / -1;
	}

	.re-nyt-ingredients {
		padding-bottom: 24px;
		border-bottom: 1px solid var(--re-color-stroke);
	}
}

/* Clean Print Stylesheet when user clicks Print */
@media print {
	body header:not(.re-nyt-hero),
	body nav,
	body footer,
	.site-header,
	.site-footer,
	#main-header,
	#main-footer,
	.re-nyt-actions,
	.re-nyt-tags {
		display: none !important;
	}

	.re-nyt-recipe {
		margin: 0 !important;
		max-width: 100% !important;
	}

	.re-nyt-recipe h1.re-nyt-title {
		font-size: 24pt;
	}

	.re-nyt-headnote,
	.re-nyt-step-text {
		font-size: 10.5pt;
	}

	.re-nyt-ingredient-item {
		font-size: 10pt;
	}

	.re-nyt-hero-figure img {
		max-height: 240px;
		width: auto;
	}
}