/*
 * EmolRecipe — single post styles.
 *
 * Loaded only on is_singular('post') — see inc/enqueue.php.
 */

.emol-single__header {
	margin-bottom: 1.25rem;
}

/* Breadcrumbs (spec §6.7 item 1). */
.emol-breadcrumbs {
	font-size: 0.9rem;
	color: var(--emol-text-light);
	margin-bottom: 0.75rem;
}

.emol-breadcrumbs a {
	color: var(--emol-text-light);
	text-decoration: none;
}

.emol-breadcrumbs a:hover {
	color: var(--emol-primary);
}

.emol-breadcrumbs__sep {
	margin: 0 0.5em;
}

/* Jump to Recipe smooth scroll (spec §6.8). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Jump to Recipe (spec §6.7 item 3) — standalone pill directly above
   the article body, independent of the movable share row. */
.emol-single__buttons {
	margin: 0 auto 1.5rem;
	max-width: 720px;
}

.emol-single__buttons .emol-btn--jump {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	height: 46px;
	padding: 0 1.6em;
	border: 2px solid var(--emol-primary);
	border-radius: 999px;
	background-color: transparent;
	color: var(--emol-primary);
	font-weight: 700;
	font-size: 0.98rem;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
}

/* Terracotta fill wipes in from the left on hover; the fork-knife
   icon nudges down like it's diving toward the recipe. */
.emol-single__buttons .emol-btn--jump::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--emol-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 260ms ease-out;
}

.emol-single__buttons .emol-btn--jump .emol-icon {
	transition: transform 260ms ease-out;
}

@media (prefers-reduced-motion: no-preference) {
	.emol-single__buttons .emol-btn--jump:hover,
	.emol-single__buttons .emol-btn--jump:focus-visible {
		color: #fff;
	}

	.emol-single__buttons .emol-btn--jump:hover::before,
	.emol-single__buttons .emol-btn--jump:focus-visible::before {
		transform: scaleX(1);
	}

	.emol-single__buttons .emol-btn--jump:hover .emol-icon {
		transform: translateY(3px);
	}
}

/* Reduced motion: simple solid-fill hover, no wipe/nudge. */
@media (prefers-reduced-motion: reduce) {
	.emol-single__buttons .emol-btn--jump:hover,
	.emol-single__buttons .emol-btn--jump:focus-visible {
		background-color: var(--emol-primary);
		color: #fff;
	}
}

@media (max-width: 767px) {
	.emol-single__buttons {
		padding: 0 1rem;
	}
}

.emol-btn--outline {
	background: none;
	border: 2px solid var(--emol-primary);
	color: var(--emol-primary);
	border-radius: var(--emol-radius);
	padding: 0.5em 1.25em;
	font-family: var(--emol-font-body);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 150ms, color 150ms;
}

.emol-btn--outline:hover {
	background-color: var(--emol-primary);
	color: #fff;
}

/* Unified actions row: share + print + save — one consistent size
   (spec §6.7 items 9–10; position set in the Customizer). */
.emol-single__actions,
.emol-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.emol-single__actions {
	margin: 1.25rem 0;
}

.emol-share__label {
	font-weight: 700;
}

.emol-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 44px;
	height: 44px;
	justify-content: center;
	padding: 0 1.25em;
	border: 0;
	border-radius: var(--emol-radius);
	background-color: var(--emol-bg-alt);
	color: var(--emol-text);
	font-family: var(--emol-font-body);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 150ms;
}

.emol-share__btn:hover {
	opacity: 0.85;
}

/* Official brand colors — deliberate, documented exception to the
   no-hardcoded-colors rule: brand marks are fixed worldwide and do
   not follow the site palette (identical in dark mode). */
.emol-share__btn--pinterest {
	background-color: #e60023;
	color: #fff;
}

.emol-share__btn--facebook {
	background-color: #1877f2;
	color: #fff;
}

.emol-share__btn--copy.is-copied {
	background-color: var(--emol-secondary);
	color: #fff;
}

.emol-share__btn--copy.is-copied .emol-icon {
	display: none;
}

.emol-share__btn--copy.is-copied::before {
	content: '✓';
	font-weight: 700;
}

/* Share-row micro-interactions (transform/opacity only). */
@media (prefers-reduced-motion: no-preference) {
	.emol-share__btn {
		transition: transform 160ms ease-out, opacity 150ms;
	}

	.emol-share__btn:hover {
		transform: translateY(-2px);
	}

	.emol-share__btn .emol-icon {
		transition: transform 160ms ease-out;
	}

	.emol-share__btn:hover .emol-icon {
		transform: rotate(-8deg) scale(1.12);
	}
}

/* Top-of-post affiliate disclosure (Customizer option). */
.emol-disclosure-top {
	font-size: 0.85rem;
	font-style: italic;
	color: var(--emol-text-light);
	margin-bottom: 1.25rem;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* The save-heart matches the row's button size. */
.emol-single__actions .emol-fav {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--emol-radius);
	background-color: var(--emol-bg-alt);
	border: 0;
	cursor: pointer;
}

/* Size variants (Customizer: Share Buttons Size). */
.emol-actions--small .emol-share__btn,
.emol-actions--small .emol-fav {
	height: 36px;
	font-size: 0.85rem;
}

.emol-actions--small .emol-fav {
	width: 36px;
}

.emol-actions--large .emol-share__btn,
.emol-actions--large .emol-fav {
	height: 52px;
	font-size: 1.05rem;
}

.emol-actions--large .emol-fav {
	width: 52px;
}

/* Icon-only variant (Customizer: Share Buttons Style): square buttons,
   labels hidden (aria-labels keep them accessible). */
.emol-actions--icon_only .emol-share__label,
.emol-actions--icon_only .emol-share__btn > span {
	display: none;
}

.emol-actions--icon_only .emol-share__btn {
	width: 44px;
	min-width: 0;
	padding: 0;
}

.emol-actions--icon_only.emol-actions--small .emol-share__btn {
	width: 36px;
}

.emol-actions--icon_only.emol-actions--large .emol-share__btn {
	width: 52px;
}

/* Mobile: icon+text buttons become a tidy 2-per-row grid instead of a
   ragged wrap; icon-only stays a single row. */
@media (max-width: 480px) {
	.emol-actions--icon_text .emol-share {
		width: 100%;
	}

	.emol-actions--icon_text .emol-share__label {
		flex: 1 1 100%;
	}

	.emol-actions--icon_text .emol-share__btn {
		flex: 1 1 calc(50% - 0.75rem);
	}
}

.emol-single__title {
	font-size: var(--emol-font-size-h1, 40px);
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
	.emol-single__title {
		font-size: 28px;
	}
}

/* Meta line. */
.emol-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	color: var(--emol-text-light);
	font-size: 0.95rem;
}

.emol-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.emol-chip {
	display: inline-block;
	padding: 0.2em 0.75em;
	border-radius: 999px;
	background-color: var(--emol-secondary);
	color: #fff;
	font-size: 0.8rem;
	text-decoration: none;
}

/* Featured image. */
.emol-single__thumbnail {
	margin-bottom: 2rem;
}

.emol-single__thumbnail img {
	width: 100%;
	border-radius: 12px;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Content column and rhythm. */
.emol-single__content {
	max-width: 720px;
	margin: 0 auto;
}

.emol-single__content > p:first-of-type {
	font-size: 1.15rem;
}

.emol-single__content p {
	margin-bottom: 1.4em;
}

.emol-single__content h2 {
	padding-left: 0.85rem;
	border-left: 4px solid var(--emol-primary);
	margin-top: 2.2em;
	margin-bottom: 0.8em;
}

.emol-single__content h3 {
	margin-top: 1.6em;
	margin-bottom: 0.4em;
}

.emol-single__content img {
	border-radius: 12px;
	margin: 2rem 0;
}

/* Pin-it button on content images. */
.emol-pin-wrap {
	position: relative;
	display: block;
}

.emol-pin {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.4em 0.9em;
	border: 0;
	border-radius: 999px;
	background-color: #e60023;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	opacity: 0;
	transition: opacity 150ms ease-out;
}

.emol-pin-wrap:hover .emol-pin,
.emol-pin.is-persistent {
	opacity: 1;
}

/* Video area: shared .emol-video block styles moved to main.css (the
   facade also renders in the homepage video section). Only the
   single-post width constraint lives here. */
.emol-single .emol-video {
	margin: 0 auto 2rem;
	max-width: 720px;
}

/* Table of Contents (PHP-generated). */
.emol-toc {
	max-width: 720px;
	margin: 1.5rem auto;
	padding: 1rem 1.25rem;
	background-color: var(--emol-bg-alt);
	border-radius: var(--emol-radius);
}

/* Two columns on wide screens keeps long lists compact. */
@media (min-width: 768px) {
	.emol-toc ol {
		columns: 2;
		column-gap: 2rem;
	}

	.emol-toc li {
		break-inside: avoid;
	}
}

.emol-toc > summary {
	font-family: var(--emol-font-heading);
	font-weight: 700;
	cursor: pointer;
}

.emol-toc ol {
	margin: 0.75rem 0 0;
}

.emol-toc a {
	color: var(--emol-text);
	text-decoration: none;
}

.emol-toc a:hover {
	color: var(--emol-primary);
}

/* Author box. */
.emol-author-box {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	max-width: 720px;
	margin: 2.5rem auto;
	padding: 1.25rem;
	background-color: var(--emol-bg-alt);
	border-radius: var(--emol-radius);
}

.emol-author-box__avatar img {
	border-radius: 50%;
}

.emol-author-box__name {
	font-family: var(--emol-font-heading);
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.emol-author-box__bio {
	margin: 0;
	color: var(--emol-text-light);
}

/* Related posts. */
.emol-related {
	max-width: var(--emol-container-width);
	margin: 3rem auto 0;
}

.emol-related__title {
	text-align: center;
	margin-bottom: 1.5rem;
}

.emol-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
	.emol-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* Rating display (meta line). */
.emol-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
}

.emol-star {
	color: var(--emol-text-light);
	opacity: 0.4;
}

.emol-star.is-full {
	color: var(--emol-accent);
	opacity: 1;
}

.emol-rating__count {
	color: var(--emol-text-light);
	font-size: 0.85rem;
	margin-left: 0.25rem;
}

/* Rating input (comment form) — accessible radio set, styled as stars. */
.emol-rating-input {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 0.1rem;
	margin-bottom: 1rem;
}

.emol-rating-input__label {
	margin-left: 0.5rem;
	order: 1;
	color: var(--emol-text-light);
}

.emol-rating-input input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.emol-rating-input label {
	font-size: 1.6rem;
	line-height: 1;
	color: var(--emol-text-light);
	opacity: 0.4;
	cursor: pointer;
}

.emol-rating-input input:checked ~ label,
.emol-rating-input label:hover,
.emol-rating-input label:hover ~ label {
	color: var(--emol-accent);
	opacity: 1;
}

.emol-rating-input input:focus + label {
	outline: 2px solid var(--emol-primary);
	outline-offset: 2px;
}

/* Recipe card area frame (spec §6.7). */
.emol-recipe-card-area {
	background-color: var(--emol-bg-alt);
	border-top: 3px solid var(--emol-primary);
	border-radius: var(--emol-radius);
	padding: 1.5rem;
	margin: 2rem auto;
	max-width: 720px;
}

/* Identity bridge for third-party recipe cards (spec §11): a light
   frame in the theme's palette; the plugin keeps its own internals. */
.emol-single__content .wprm-recipe-container,
.emol-single__content .tasty-recipes,
.emol-single__content .mv-create-card {
	background-color: var(--emol-bg-alt);
	border-top: 3px solid var(--emol-primary);
	border-radius: var(--emol-radius);
	padding: 1.25rem;
	margin: 2rem 0;
}

.emol-single__content .wprm-recipe-container h2,
.emol-single__content .wprm-recipe-container h3 {
	font-family: var(--emol-font-heading);
}