/*
 * EmolRecipe — main stylesheet.
 *
 * Hand-written reset + base layout using the CSS Custom Property
 * tokens defined in style.css's :root block. Full visual design
 * (homepage sections, header builder, cards, animations, etc.) is
 * M3 — this file only needs to render M1's dummy content sanely,
 * with no console errors and no external requests.
 */

/* ---------- Fonts (locally hosted — no external CDN) ---------- */

@font-face {
	font-family: 'Playfair Display';
	src: url('../fonts/playfair-display-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Playfair Display';
	src: url('../fonts/playfair-display-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/nunito-sans-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/nunito-sans-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/nunito-sans-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Reset ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--emol-bg);
	color: var(--emol-text);
	font-family: var(--emol-font-body);
	font-size: var(--emol-font-size-base);
	line-height: var(--emol-line-height-base);
}

img,
picture,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--emol-font-heading);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.5em;
}

h1 {
	font-size: var(--emol-font-size-h1, 40px);
}

h2 {
	font-size: var(--emol-font-size-h2, 30px);
}

h3 {
	font-size: var(--emol-font-size-h3, 24px);
}

h4 {
	font-size: var(--emol-font-size-h4, 20px);
}

h5 {
	font-size: var(--emol-font-size-h5, 18px);
}

h6 {
	font-size: var(--emol-font-size-h6, 16px);
}

ul,
ol {
	padding-left: 1.25em;
}

/* ---------- Accessibility ---------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.emol-skip-link {
	position: absolute;
	top: -999px;
	left: 0;
	z-index: 100000;
	background: var(--emol-btn-bg, var(--emol-primary));
	color: #fff;
	padding: 0.75em 1em;
}

.emol-skip-link:focus {
	top: 0;
	width: auto;
	height: auto;
	clip: auto;
}

/* ---------- Layout ---------- */

.emol-layout {
	max-width: var(--emol-container-width);
	margin: 0 auto;
	padding: 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

/* Full-width container ignores the max-width cap. */
.emol-container-full .emol-layout {
	max-width: none;
}

/* Boxed container: the page ground switches to the alt tone so the
   white content card visibly floats on it. */
body.emol-container-boxed {
	background-color: var(--emol-bg-alt);
}

.emol-container-boxed .emol-layout {
	background-color: var(--emol-bg);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	border-radius: var(--emol-radius);
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* The footer keeps its green identity in every container style. */
.emol-container-boxed .emol-header {
	background-color: var(--emol-bg);
}

/* Per-device visibility helpers (homepage sections, ad zones). */
@media (max-width: 767px) {
	.emol-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.emol-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.emol-layout:has(.emol-sidebar) {
		grid-template-columns: 1fr 30%;
	}

	.emol-sidebar-width-25 .emol-layout:has(.emol-sidebar) {
		grid-template-columns: 1fr 25%;
	}

	.emol-sidebar-width-35 .emol-layout:has(.emol-sidebar) {
		grid-template-columns: 1fr 35%;
	}

	/* Sidebar on the left: swap the visual order of the two columns. */
	.emol-sidebar-left .emol-layout:has(.emol-sidebar) {
		grid-template-columns: 30% 1fr;
	}

	.emol-sidebar-left .emol-layout__main {
		order: 2;
	}

	.emol-sidebar-left .emol-sidebar {
		order: 1;
	}

	/* Sticky last widget. */
	.emol-sidebar-sticky .emol-sidebar {
		position: sticky;
		top: 1.5rem;
		align-self: start;
	}
}

.emol-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}

/* Archive column counts / list layout from the Customizer option. */
.emol-archive-grid-2 .emol-grid {
	grid-template-columns: repeat(2, 1fr);
}

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

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

.emol-archive-list .emol-grid {
	grid-template-columns: 1fr;
}

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

/* Ad zones: reserved height keeps CLS at 0 (spec 6.16). */
.emol-ad-zone {
	margin: 1.5rem auto;
	text-align: center;
	border: 1px solid var(--emol-bg-alt);
	border-radius: var(--emol-radius);
	padding: 0.5rem;
}

.emol-ad-zone__label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--emol-text-light);
	margin-bottom: 0.25rem;
}

/* ---------- Cookie bar (spec §6.17) ---------- */

/* The display rule below would defeat the hidden attribute without this. */
.emol-cookie-bar[hidden] {
	display: none;
}

.emol-cookie-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 300;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.5rem;
	background-color: var(--emol-text);
	color: var(--emol-bg);
	padding: 0.85rem 1.25rem;
	font-size: 0.92rem;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

.emol-cookie-bar__text {
	margin: 0;
}

.emol-cookie-bar__text a {
	color: inherit;
	text-decoration: underline;
}

.emol-cookie-bar__actions {
	display: flex;
	gap: 0.6rem;
}

.emol-cookie-bar__accept {
	min-height: 40px;
	padding: 0.35em 1.4em;
}

.emol-cookie-bar__decline {
	background: none;
	border: 1px solid currentColor;
	color: inherit;
	border-radius: var(--emol-radius);
	min-height: 40px;
	padding: 0.35em 1.2em;
	font: inherit;
	cursor: pointer;
}

/* On a phone the bar wrapped to two rows and ate 17% of the screen.
   Tighter type, padding and button box bring it to roughly half that.
   The 44px tap target is deliberately preserved — shrinking the two
   buttons below it would trade an accessibility pass for a few pixels. */
@media (max-width: 600px) {
	.emol-cookie-bar {
		gap: 0.4rem 0.9rem;
		padding: 0.45rem 0.8rem;
		font-size: 0.78rem;
	}

	.emol-cookie-bar__text {
		line-height: 1.4;
		text-align: center;
	}

	.emol-cookie-bar__actions {
		gap: 0.45rem;
	}

	.emol-cookie-bar__accept,
	.emol-cookie-bar__decline {
		min-height: 44px;
		padding: 0.3em 0.9em;
		font-size: 0.82rem;
	}
}

/* ---------- Micro-interactions (transform/opacity only) ---------- */

@media (prefers-reduced-motion: no-preference) {
	.emol-header__icon {
		transition: transform 180ms ease-out;
	}

	.emol-header__icon:hover {
		transform: translateY(-1px) scale(1.1);
	}

	.emol-theme-toggle:hover .emol-icon {
		transform: rotate(40deg);
	}

	.emol-theme-toggle .emol-icon {
		transition: transform 250ms ease-out;
	}

	.emol-search-toggle:hover .emol-icon {
		transform: rotate(-12deg) scale(1.1);
	}

	.emol-search-toggle .emol-icon {
		transition: transform 180ms ease-out;
	}

	.emol-fav .emol-icon {
		transition: transform 180ms ease-out;
	}

	.emol-fav:hover .emol-icon {
		transform: scale(1.15);
	}

	.emol-fav.is-active .emol-icon {
		animation: emol-heartbeat 450ms ease-out;
	}
}

.emol-fav.is-active .emol-icon {
	fill: var(--emol-primary);
	stroke: var(--emol-primary);
}

@keyframes emol-heartbeat {
	0% { transform: scale(1); }
	30% { transform: scale(1.35); }
	55% { transform: scale(0.92); }
	80% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

/* ---------- Card ---------- */

.emol-card {
	border-radius: var(--emol-radius);
	overflow: hidden;
	background-color: var(--emol-bg);
	transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}

.emol-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(45, 42, 38, 0.12);
}

.emol-card__thumbnail,
.emol-card__thumbnail-placeholder {
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--emol-bg-alt);
	overflow: hidden;
}

.emol-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease-out;
}

.emol-card:hover .emol-card__thumbnail img {
	transform: scale(1.04);
}

.emol-card__body {
	padding: 0.85rem 0.25rem;
}

.emol-card__title {
	font-size: 1.25rem;
	margin: 0 0 0.35rem;
}

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

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

.emol-card__excerpt {
	color: var(--emol-text-light);
	font-size: 0.95rem;
}

.emol-card__type {
	color: var(--emol-secondary);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 0.25rem;
}

.emol-card__link {
	display: inline-block;
	margin-top: 0.5rem;
	color: var(--emol-primary);
	font-weight: 700;
	text-decoration: none;
}

.emol-card__link:hover {
	text-decoration: underline;
}

.emol-card__price {
	color: var(--emol-accent);
	font-weight: 700;
	font-size: 1.1rem;
}

.emol-card__media {
	position: relative;
}

/* ---------- Favorites heart ---------- */

.emol-fav {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--emol-text-light);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: color 150ms ease-out, transform 150ms ease-out;
}

.emol-fav:hover {
	transform: scale(1.08);
}

.emol-fav.is-active {
	color: var(--emol-primary);
}

.emol-fav.is-active .emol-icon {
	fill: var(--emol-primary);
}

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

.emol-single__actions .emol-fav {
	position: static;
	width: auto;
	height: 44px;
	padding: 0 1rem;
	gap: 0.4rem;
	border-radius: var(--emol-radius);
}

/* ---------- Search overlay ---------- */

.emol-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 300;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 8vh 1rem 1rem;
}

/* The class-level `display: flex` above would otherwise beat the UA
   [hidden] rule, so the overlay could never hide. Make hidden win. */
.emol-search-overlay[hidden] {
	display: none;
}

.emol-search-overlay__inner {
	position: relative;
	width: min(640px, 100%);
	background-color: var(--emol-bg);
	border-radius: var(--emol-radius);
	padding: 1.5rem;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.emol-search-overlay__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	border: 0;
	background: none;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	color: var(--emol-text);
}

.emol-search-results {
	margin-top: 1rem;
}

.emol-search-results__cats {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

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

.emol-search-results__posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.emol-search-results__posts a {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.5rem;
	border-radius: var(--emol-radius);
	text-decoration: none;
	color: var(--emol-text);
}

.emol-search-results__posts a:hover,
.emol-search-results__posts a:focus {
	background-color: var(--emol-bg-alt);
}

.emol-search-results__posts img,
.emol-search-results__noimg {
	width: 56px;
	height: 56px;
	border-radius: var(--emol-radius);
	object-fit: cover;
	background-color: var(--emol-bg-alt);
	flex: 0 0 auto;
}

.emol-search-results__meta {
	display: flex;
	flex-direction: column;
}

.emol-search-results__cat {
	font-size: 0.8rem;
	color: var(--emol-text-light);
}

.emol-search-results__all {
	display: inline-block;
	margin-top: 0.75rem;
	font-weight: 700;
	color: var(--emol-primary);
}

/* ---------- Buttons ---------- */

.emol-btn {
	display: inline-block;
	padding: 0.7em 1.4em;
	min-height: 44px;
	border: 2px solid var(--emol-btn-bg, var(--emol-primary));
	border-radius: var(--emol-radius);
	background-color: var(--emol-btn-bg, var(--emol-primary));
	color: #fff;
	font-family: var(--emol-font-body);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: transform 150ms ease-out, filter 150ms ease-out;
}

.emol-btn:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
	color: #fff;
}

.emol-btn--outline {
	background-color: transparent;
	color: var(--emol-primary);
}

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

/* Affiliate buttons/links use the accent color exclusively (spec 6.6). */
.emol-btn-affiliate {
	display: inline-block;
	padding: 0.7em 1.4em;
	min-height: 44px;
	border-radius: var(--emol-radius);
	background-color: var(--emol-accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: filter 150ms ease-out, transform 150ms ease-out;
}

.emol-btn-affiliate:hover {
	filter: brightness(0.94);
	transform: translateY(-1px);
	color: #fff;
}

/* ---------- Content links with a sliding underline ---------- */

.emol-single__content a:not(.emol-btn):not(.emol-btn-affiliate) {
	color: var(--emol-primary);
	text-decoration: none;
	background-image: linear-gradient(var(--emol-primary), var(--emol-primary));
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 200ms ease-out;
}

.emol-single__content a:not(.emol-btn):not(.emol-btn-affiliate):hover {
	background-size: 100% 2px;
}

/* An affiliate link inside content: accent color + thick underline. */
.emol-single__content a.emol-affiliate {
	color: var(--emol-accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	background-image: none;
}

/* ---------- Icons ---------- */

.emol-icon {
	vertical-align: middle;
	flex: 0 0 auto;
}

/* ---------- Blockquote ---------- */

.emol-single__content blockquote {
	position: relative;
	margin: 2rem 0;
	padding: 1.25rem 1.25rem 1.25rem 3rem;
	background-color: var(--emol-bg-alt);
	border-radius: var(--emol-radius);
	font-style: italic;
}

.emol-single__content blockquote::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--emol-primary);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M14 4a4 4 0 0 0-4 6l-6 9M10 10l2 2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Section headings with decorative divider ---------- */

.emol-section {
	margin: 3rem auto;
	max-width: var(--emol-container-width);
	padding: 0 1.5rem;
}

.emol-section__title {
	text-align: center;
	margin-bottom: 0.35rem;
}

.emol-section__divider {
	display: block;
	width: 120px;
	height: 12px;
	margin: 0 auto 1.75rem;
	color: var(--emol-primary);
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.6em 0.75em;
	border: 1px solid var(--emol-text-light);
	border-radius: var(--emol-radius);
	background-color: var(--emol-bg);
	color: var(--emol-text);
	font-family: var(--emol-font-body);
	font-size: 1rem;
}

input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--emol-primary);
	outline-offset: 1px;
}

/* ---------- Comments ---------- */

.emol-comments {
	margin-top: 3rem;
	max-width: 720px;
}

.emol-comments__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.emol-comments__list .comment {
	padding: 1rem 0;
	border-top: 1px solid var(--emol-bg-alt);
}

/* ---------- Reading progress + back to top ---------- */

/* Driven by transform, never width: animating width forces layout on
   every scroll frame and cannot run on the compositor, which is what
   Lighthouse flags as a non-composited animation. scaleX is free.
   The logical inset + RTL origin keep it filling from the reading edge
   in both directions. */
.emol-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	transform: scaleX(0);
	transform-origin: left center;
	background-color: var(--emol-primary);
	z-index: 9999;
	will-change: transform;
}

[dir="rtl"] .emol-reading-progress {
	transform-origin: right center;
}

@media (prefers-reduced-motion: no-preference) {
	.emol-reading-progress {
		transition: transform 100ms linear;
	}
}

.emol-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: var(--emol-btn-bg, var(--emol-primary));
	color: #fff;
	cursor: pointer;
	z-index: 999;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.emol-to-top.is-visible {
	display: flex;
}

/* ---------- Reveal-on-scroll animation ---------- */

.emol-js .emol-reveal {
	opacity: 0;
	transform: translateY(12px);
}

.emol-js .emol-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 400ms ease-out, transform 400ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}

	.emol-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Top Bar ---------- */

.emol-topbar {
	background-color: var(--emol-secondary);
	color: #fff;
	font-size: 0.9rem;
}

.emol-topbar__inner {
	max-width: var(--emol-container-width);
	margin: 0 auto;
	padding: 0.4rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.emol-topbar__message a {
	color: #fff;
}

/* ---------- Header / Nav ---------- */

.emol-header {
	background-color: var(--emol-bg);
	border-bottom: 1px solid var(--emol-bg-alt);
}

.emol-header__inner {
	max-width: var(--emol-container-width);
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.emol-header__zone {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.emol-header__zone--left {
	margin-right: auto;
}

.emol-header__zone--center {
	margin: 0 auto;
}

.emol-header__zone--right {
	margin-left: auto;
}

.emol-header__logo img {
	max-height: 56px;
	width: auto;
	transition: max-height 200ms ease-out;
}

.emol-site-branding__title {
	margin: 0;
	font-family: var(--emol-font-heading);
	font-size: 1.6rem;
	white-space: nowrap;
}

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

.emol-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--emol-text);
	cursor: pointer;
	position: relative;
}

.emol-favorites-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background-color: var(--emol-btn-bg, var(--emol-primary));
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

/* Dark-mode toggle: show sun in dark theme, moon in light. */
.emol-theme-toggle__sun {
	display: none;
}

[data-theme="dark"] .emol-theme-toggle__sun {
	display: inline-flex;
}

[data-theme="dark"] .emol-theme-toggle__moon {
	display: none;
}

/* Primary menu (desktop). */
.emol-primary-navigation {
	display: flex;
}

.emol-primary-menu {
	display: flex;
	list-style: none;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	align-items: center;
}

.emol-primary-menu a {
	color: var(--emol-text);
	text-decoration: none;
	font-weight: 700;
}

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

.emol-primary-menu .sub-menu {
	position: absolute;
	z-index: 50;
	min-width: 200px;
	margin-top: 0.5rem;
	padding: 0.5rem 0;
	list-style: none;
	background-color: var(--emol-bg);
	border: 1px solid var(--emol-bg-alt);
	border-radius: var(--emol-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.emol-primary-menu .menu-item {
	position: relative;
}

.emol-primary-menu .menu-item:hover > .sub-menu,
.emol-primary-menu .menu-item:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.emol-primary-menu .sub-menu a {
	display: block;
	padding: 0.4rem 1rem;
	font-weight: 400;
}

/* Mega menu: full-width dynamic panel (spec §6.17). Desktop only —
   mobile uses the Drawer. */
.emol-primary-menu .emol-has-mega {
	position: static;
}

/* A flagged item may still have a normal WP sub-menu; hide it, the
   mega panel replaces it. */
.emol-primary-menu .emol-has-mega > .sub-menu {
	display: none;
}

.emol-mega-panel {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 50;
	width: 100%;
	max-width: var(--emol-container-width);
	margin: 0.75rem auto 0;
	padding: 1.5rem;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2rem;
	background-color: var(--emol-bg);
	border: 1px solid var(--emol-bg-alt);
	border-radius: var(--emol-radius);
	box-shadow: 0 12px 30px rgba(47, 37, 37, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.emol-primary-menu .emol-has-mega:hover > .emol-mega-panel,
.emol-primary-menu .emol-has-mega:focus-within > .emol-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.emol-mega-panel__cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 1rem;
}

.emol-mega-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	color: var(--emol-text);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
}

.emol-mega-cat__thumb {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--emol-bg-alt);
	background-size: cover;
	background-position: center;
	transition: transform 200ms ease-out;
}

.emol-mega-cat:hover .emol-mega-cat__thumb {
	transform: scale(1.06);
}

.emol-mega-cat:hover .emol-mega-cat__name {
	color: var(--emol-primary);
}

.emol-mega-panel__latest {
	border-inline-start: 1px solid var(--emol-bg-alt);
	padding-inline-start: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.emol-mega-panel__heading {
	font-family: var(--emol-font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--emol-text-light);
}

.emol-mega-recipe {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--emol-text);
	text-decoration: none;
}

.emol-mega-recipe__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--emol-radius);
	background-color: var(--emol-bg-alt);
	background-size: cover;
	background-position: center;
}

.emol-mega-recipe__title {
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.35;
}

.emol-mega-recipe:hover .emol-mega-recipe__title {
	color: var(--emol-primary);
}

@media (prefers-reduced-motion: reduce) {
	.emol-mega-panel {
		transition: none;
	}
}

/* Mega panels are desktop-only; the Drawer covers mobile. */
@media (max-width: 1023px) {
	.emol-mega-panel {
		display: none;
	}
}

/* Sticky header. */
.emol-header-sticky .emol-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.emol-header.is-shrunk .emol-header__inner {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

.emol-header.is-shrunk .emol-header__logo img {
	max-height: 42px;
}

/* Transparent header on the front page. */
.emol-header-transparent .emol-header {
	position: absolute;
	left: 0;
	right: 0;
	background-color: transparent;
	border-bottom-color: transparent;
}

.emol-header-transparent .emol-header.is-shrunk {
	background-color: var(--emol-bg);
}

/* Drawer toggle (hamburger) — hidden on desktop. */
.emol-drawer-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
}

.emol-drawer-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--emol-text);
}

/* ---------- Mobile Drawer ---------- */

.emol-drawer-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.45);
	z-index: 200;
}

.emol-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(85vw, 340px);
	z-index: 201;
	background-color: var(--emol-bg);
	padding: 1.25rem;
	overflow-y: auto;
	visibility: hidden;
	transform: translateX(-100%);
	transition: transform 200ms ease-out, visibility 200ms;
}

.emol-drawer-open .emol-drawer {
	visibility: visible;
	transform: translateX(0);
}

.emol-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.emol-drawer__title {
	font-family: var(--emol-font-heading);
	font-size: 1.3rem;
}

.emol-drawer__close {
	border: 0;
	background: none;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	color: var(--emol-text);
	min-width: 44px;
	min-height: 44px;
}

.emol-drawer__categories,
.emol-drawer__menu {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.emol-drawer__categories a,
.emol-drawer__menu a {
	display: block;
	padding: 0.6rem 0;
	color: var(--emol-text);
	text-decoration: none;
	border-bottom: 1px solid var(--emol-bg-alt);
	font-size: 1.05rem;
}

/* Category rows: circular dish thumbnail + name (spec §6.17). */
.emol-drawer__categories a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.emol-drawer__cat-thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--emol-bg-alt);
	background-size: cover;
	background-position: center;
}

/* Drawer search: full-width field, styled submit. */
.emol-drawer__search input[type="search"],
.emol-drawer__search input[type="text"] {
	width: 100%;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--emol-text-light);
	border-radius: var(--emol-radius);
	background-color: var(--emol-bg);
	color: var(--emol-text);
	font-size: 1rem;
}

.emol-drawer__search input[type="submit"],
.emol-drawer__search button[type="submit"] {
	margin-top: 0.5rem;
	width: 100%;
	min-height: 44px;
	border: 0;
	border-radius: var(--emol-radius);
	background-color: var(--emol-btn-bg, var(--emol-primary));
	color: #fff;
	font-family: var(--emol-font-body);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

@media (max-width: 1023px) {
	.emol-drawer-toggle {
		display: inline-flex;
	}

	.emol-header__zone--center,
	.emol-header__zone .emol-primary-navigation {
		display: none;
	}
}

/* ---------- Footer ---------- */

/* Footer: herb-green ground with the page tone as text (spec §6.6 —
   works in both themes: cream-on-green light, charcoal-on-sage dark). */
.emol-footer {
	background-color: var(--emol-secondary);
	color: var(--emol-bg);
	margin-top: 3rem;
	padding: 2.5rem 1.5rem 1.5rem;
}

.emol-footer a {
	color: inherit;
}

.emol-footer .emol-widget {
	background: none;
}

.emol-footer .emol-widget__title {
	font-family: var(--emol-font-heading);
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.2rem;
	color: inherit;
	border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.emol-footer .emol-chef-widget__bio,
.emol-footer .emol-popular-widget__title,
.emol-footer .emol-site-info {
	color: inherit;
}

.emol-footer .emol-site-info {
	opacity: 0.8;
	border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	padding-top: 1.25rem;
}

.emol-footer .emol-footer-menu {
	border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	margin-top: 1.5rem;
	padding-top: 1rem;
}

/* Light cards (newsletter/products) keep their own text color. */
.emol-footer .emol-newsletter,
.emol-footer .emol-products-widget__card {
	color: var(--emol-text);
}

.emol-footer-widgets {
	max-width: var(--emol-container-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
}

.emol-site-info {
	max-width: var(--emol-container-width);
	margin: 1.5rem auto 0;
	color: var(--emol-text-light);
	font-size: 0.9rem;
}

/* ---------- Newsletter ---------- */

.emol-newsletter {
	background-color: var(--emol-bg-alt);
	border-radius: var(--emol-radius);
	padding: 1.5rem;
	max-width: 720px;
	margin: 2rem auto;
	text-align: center;
}

.emol-newsletter__title {
	font-family: var(--emol-font-heading);
	margin-bottom: 0.35rem;
}

.emol-newsletter__desc {
	color: var(--emol-text-light);
	margin-bottom: 1rem;
}

.emol-newsletter__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.emol-newsletter__fields input {
	flex: 1 1 200px;
	max-width: 280px;
}

.emol-newsletter__rgpd {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.75rem;
	font-size: 0.85rem;
	color: var(--emol-text-light);
	text-align: left;
}

.emol-newsletter__rgpd input {
	margin-top: 0.2rem;
}

.emol-newsletter__notice--ok {
	color: var(--emol-secondary);
	font-weight: 700;
}

.emol-newsletter__notice--err {
	color: var(--emol-primary);
	font-weight: 700;
}

/* Honeypot: visually and semantically hidden but present for bots. */
.emol-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Empty states ---------- */

.emol-empty-state {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--emol-text-light);
}

/* ---------- Category chips ---------- */

.emol-category-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.emol-category-chips__item {
	background-color: var(--emol-secondary);
	color: #fff;
	border-radius: 999px;
	padding: 0.4em 1em;
	text-decoration: none;
	font-size: 0.9rem;
}

/* ---------- Homepage: hero ---------- */

.emol-hero {
	position: relative;
	max-width: var(--emol-container-width);
	margin: 1.5rem auto;
	padding: 0 1.5rem;
}

.emol-hero__track {
	position: relative;
	border-radius: var(--emol-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--emol-bg-alt);
}

.emol-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 800ms ease-in-out;
	/* Stacked slides must not intercept clicks meant for the visible one. */
	pointer-events: none;
}

.emol-hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.emol-hero__media,
.emol-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.emol-hero__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2rem;
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}

.emol-hero__title {
	color: #fff;
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 800;
	margin-bottom: 1rem;
}

/* Visitor slide controls. Sit inside the track so they centre on the
   image, above the slides' stacking order. Logical inset keeps them on
   the correct edge in both LTR and RTL. */
.emol-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	color: var(--emol-text);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(47, 37, 37, 0.18);
}

.emol-hero__arrow--prev {
	inset-inline-start: 0.75rem;
}

.emol-hero__arrow--next {
	inset-inline-end: 0.75rem;
}

.emol-hero__arrow:hover,
.emol-hero__arrow:focus-visible {
	background-color: #fff;
	color: var(--emol-primary);
}

@media (max-width: 767px) {
	.emol-hero__arrow {
		width: 36px;
		height: 36px;
	}

	.emol-hero__arrow .emol-icon {
		width: 22px;
		height: 22px;
	}
}

.emol-hero__dots {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1rem;
}

.emol-hero__dot {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background-color: var(--emol-bg-alt);
	cursor: pointer;
}

.emol-hero__dot.is-active {
	background-color: var(--emol-primary);
}

/* ---------- Sidebar widget polish ---------- */

.emol-widget {
	background-color: var(--emol-bg);
	margin-bottom: 1.75rem;
}

/* Sidebar widgets float as separate cards, visually detached from the
   content column (owner request — preview-style). Warm-tinted shadow,
   not plain black. */
.emol-sidebar .emol-widget {
	border: 1px solid var(--emol-bg-alt);
	border-radius: 12px;
	padding: 1.25rem;
	box-shadow: 0 12px 30px rgba(47, 37, 37, 0.07);
}

[data-theme="dark"] .emol-sidebar .emol-widget {
	background-color: var(--emol-bg-alt);
	border-color: transparent;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.emol-widget__title {
	font-family: var(--emol-font-body);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--emol-text);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--emol-primary);
	margin: 0 0 1rem;
}

/* Chef bio widget. */
.emol-chef-widget {
	text-align: center;
}

.emol-chef-widget__photo {
	display: block;
	width: 110px;
	height: 110px;
	margin: 0 auto 0.75rem;
	border-radius: 50%;
	background-color: var(--emol-bg-alt);
	background-size: cover;
	background-position: center;
}

.emol-chef-widget__name {
	font-family: var(--emol-font-heading);
	font-size: 1.2rem;
	margin: 0 0 0.35rem;
}

.emol-chef-widget__bio {
	color: var(--emol-text-light);
	font-size: 0.95rem;
	margin: 0 0 0.6rem;
}

.emol-chef-widget__link {
	color: var(--emol-primary);
	font-weight: 700;
	text-decoration: none;
}

/* Popular posts widget. */
.emol-popular-widget {
	list-style: none;
	margin: 0;
	padding: 0;
}

.emol-popular-widget li + li {
	margin-top: 0.75rem;
}

.emol-popular-widget a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--emol-text);
	text-decoration: none;
}

.emol-popular-widget a:hover .emol-popular-widget__title {
	color: var(--emol-primary);
}

.emol-popular-widget__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--emol-radius);
	background-color: var(--emol-bg-alt);
	background-size: cover;
	background-position: center;
}

.emol-popular-widget__title {
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.4;
}

/* Featured products widget. */
.emol-products-widget {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.emol-products-widget__card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--emol-text);
	text-decoration: none;
	background-color: var(--emol-bg-alt);
	border-radius: var(--emol-radius);
	padding: 0.6rem;
}

.emol-products-widget__card:hover .emol-products-widget__name {
	color: var(--emol-accent);
}

.emol-products-widget__thumb {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: var(--emol-radius);
	background-color: var(--emol-bg);
	background-size: cover;
	background-position: center;
}

.emol-products-widget__name {
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.4;
}

/* Sidebar newsletter fits the column. */
.emol-sidebar .emol-newsletter,
.emol-footer .emol-newsletter {
	padding: 1rem;
	margin: 0;
}

/* ---------- Content components (n8n pipeline classes) ----------
   The import pipeline marks up these boxes in post content; the theme
   owns their styling (tokens only → dark mode works automatically). */

.key-takeaways {
	background-color: var(--emol-bg-alt);
	border-inline-start: 4px solid var(--emol-accent);
	border-radius: 0 var(--emol-radius) var(--emol-radius) 0;
	padding: 1.1rem 1.3rem;
	margin: 1em 0 2em;
}

.tips-tricks {
	background-color: var(--emol-bg-alt);
	border-inline-start: 4px solid var(--emol-secondary);
	border-radius: 0 var(--emol-radius) var(--emol-radius) 0;
	padding: 1.1rem 1.3rem;
	margin: 1em 0 2em;
}

.key-takeaways p,
.tips-tricks p {
	margin-bottom: 0.8em;
}

.key-takeaways p:last-child,
.tips-tricks p:last-child {
	margin-bottom: 0;
}

/* Elegant centered inline image (500px inside the 720px column). */
.recipe-inline-image {
	max-width: 500px;
	margin: 50px auto;
	text-align: center;
}

/* Every image dropped into the article body gets the same subtle
   hover lift — excludes the recipe card and sidebar/footer widgets,
   which sit outside .emol-single__content. */
@media (prefers-reduced-motion: no-preference) {
	.emol-single__content img {
		transition: transform 300ms ease;
	}

	.emol-single__content img:hover {
		transform: translateY(-3px);
	}
}

.recipe-inline-image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(47, 37, 37, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
	.recipe-inline-image img {
		transition: transform 300ms ease, box-shadow 300ms ease;
	}

	.recipe-inline-image img:hover {
		transform: translateY(-3px);
		box-shadow: 0 16px 35px rgba(47, 37, 37, 0.12);
	}
}

/* Inline affiliate product box: image + badge + title + CTA. */
.affiliate-box {
	display: flex;
	align-items: center;
	gap: 18px;
	border: 2px solid var(--emol-accent);
	background-color: var(--emol-bg-alt);
	border-radius: 12px;
	padding: 18px;
	margin: 30px 0;
}

.affiliate-img {
	width: 150px;
	height: 150px;
	object-fit: contain;
	border-radius: var(--emol-radius);
	background-color: var(--emol-bg);
	padding: 6px;
	flex: 0 0 auto;
}

.affiliate-content {
	flex: 1;
	min-width: 0;
}

.affiliate-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--emol-text-light);
	background-color: color-mix(in srgb, var(--emol-accent) 18%, transparent);
	padding: 4px 8px;
	border-radius: 6px;
	margin-bottom: 6px;
}

.affiliate-title {
	color: var(--emol-accent);
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.affiliate-desc {
	font-size: 0.9rem;
	color: var(--emol-text-light);
	margin: 0 0 10px;
}

.affiliate-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0.4em 1.1em;
	background-color: var(--emol-accent);
	color: #fff;
	text-decoration: none;
	border-radius: var(--emol-radius);
	font-weight: 700;
	font-size: 0.98rem;
}

@media (prefers-reduced-motion: no-preference) {
	.affiliate-btn {
		transition: transform 160ms ease-out, opacity 150ms;
	}

	.affiliate-btn:hover {
		transform: translateY(-2px);
		opacity: 0.9;
	}
}

@media (max-width: 768px) {
	.affiliate-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 16px;
	}

	.affiliate-img {
		width: 110px;
		height: 110px;
	}

	.recipe-inline-image {
		max-width: 100%;
		margin: 35px auto;
	}
}

/* ---------- Mobile hero button ---------- */

@media (max-width: 480px) {
	.emol-hero .emol-btn {
		padding: 0.45em 1em;
		font-size: 0.95rem;
	}

	.emol-hero__title {
		font-size: 1.4rem;
	}
}

/* ---------- Mobile header/topbar fit ---------- */

/* Nothing may push the page wider than the viewport. */
body {
	overflow-x: clip;
}

@media (max-width: 767px) {
	.emol-topbar__inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.25rem 0.75rem;
		text-align: center;
		padding: 0.35rem 1rem;
	}

	.emol-topbar {
		font-size: 0.82rem;
	}

	.emol-site-branding__title {
		font-size: 1.35rem;
	}

	.emol-header__inner {
		gap: 0.5rem;
		padding: 0.6rem 1rem;
	}

	.emol-header__zone {
		min-width: 0;
		gap: 0.25rem;
	}
}

/* ---------- Footer menu row ---------- */

.emol-footer-menu {
	max-width: var(--emol-container-width);
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
}

.emol-footer-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
}

.emol-footer-menu__list a {
	color: inherit;
	text-decoration: none;
	font-size: 0.95rem;
}

.emol-footer-menu__list a:hover {
	text-decoration: underline;
}

/* ---------- Social icons (Top Bar / Header / anywhere) ---------- */

.emol-social {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.emol-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: inherit;
	border-radius: 50%;
	transition: opacity 150ms;
}

.emol-social__link:hover {
	opacity: 0.75;
}

.emol-topbar .emol-social__link {
	width: 32px;
	height: 32px;
	color: #fff;
}

/* ---------- Video facade (single post + homepage section) ---------- */

.emol-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: #000;
	border-radius: 12px;
	overflow: hidden;
}

.emol-video video,
.emol-video__iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.emol-video__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: none;
}

/* Real <img> (see emolrecipe_get_video_poster_html) — object-fit
   reproduces the cover framing the old CSS background gave us. */
.emol-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.emol-video__btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--emol-primary);
	color: #fff;
	font-size: 1.6rem;
	padding-left: 4px;
}

/* ---------- Homepage: video cards ---------- */

.emol-video-card__title {
	font-family: var(--emol-font-body);
	font-size: 1.25rem;
	margin: 0.75rem 0 0;
}

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

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

/* ---------- Homepage: category strip ---------- */

.emol-catstrip__track {
	display: flex;
	justify-content: center;
	justify-content: safe center;
	gap: 1.25rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	scroll-snap-type: x mandatory;
}

.emol-catstrip__item {
	flex: 0 0 auto;
	text-align: center;
	text-decoration: none;
	color: var(--emol-text);
	scroll-snap-align: start;
}

.emol-catstrip__circle {
	display: block;
	width: 88px;
	height: 88px;
	margin: 0 auto 0.5rem;
	border-radius: 50%;
	background-color: var(--emol-bg-alt);
	background-size: cover;
	background-position: center;
}

.emol-catstrip__name {
	font-weight: 700;
	font-size: 0.9rem;
}

/* ---------- Homepage: sections ---------- */

.emol-section--alt {
	background-color: var(--emol-bg-alt);
	max-width: none;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.emol-section--alt > * {
	max-width: var(--emol-container-width);
	margin-left: auto;
	margin-right: auto;
}

.emol-grid--auto {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.emol-section__cta {
	text-align: center;
	margin-top: 2rem;
}

/* ---------- Homepage: chef ---------- */

.emol-chef__inner {
	display: flex;
	gap: 2rem;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}

.emol-chef__photo img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
}

.emol-chef__body {
	max-width: 520px;
}

@media (min-width: 768px) {
	.emol-chef__inner {
		flex-wrap: nowrap;
		text-align: left;
	}
}

/* ---------- 404 ---------- */

.emol-404 {
	text-align: center;
	padding: 4rem 1rem;
}

.emol-404__suggestions {
	margin-top: 2.5rem;
}

/* ---------- Print (spec §6.7): keep content + recipe card only ---------- */

@media print {
	.emol-header,
	.emol-topbar,
	.emol-footer,
	.emol-sidebar,
	.emol-drawer,
	.emol-drawer-overlay,
	.emol-to-top,
	.emol-reading-progress,
	.emol-ad-zone,
	.emol-related,
	.emol-author-box,
	.emol-hero__dots,
	.emol-hero__arrow,
	.emol-catstrip,
	.emol-comments,
	.emol-single__buttons,
	.emol-single__actions,
	.emol-share,
	.emol-breadcrumbs,
	.emol-fav,
	.emol-cookie-bar,
	.emol-skip-link {
		display: none !important;
	}

	.emol-layout {
		display: block;
		max-width: none;
	}

	.emol-single__content {
		max-width: none;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	a[href]::after {
		content: " (" attr( href ) ")";
		font-size: 0.85em;
		color: #555;
	}
}