/**
 * Рецепт под текстом материала.
 *
 * Геометрия повторяет действующий сайт: список ингредиентов слева на 60%,
 * пищевая ценность справа на 35%, отбивка точками между названием
 * и количеством, квадрат-отметка слева от строки. Цвета берутся
 * из токенов темы — на действующем сайте тёмный вид даёт плагин тёмной
 * темы, которого в MASTER нет, и снимать оттуда нечего.
 *
 * Переменные с запасным значением: плагин обязан выглядеть прилично
 * и при другой теме, где токенов проекта нет.
 */

.nn-recipe,
.nn-recipe-steps {
	margin-bottom: var(--nn-space-6, 2rem);
}

.nn-recipe__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nn-space-3, 0.75rem);
	margin-bottom: var(--nn-space-5, 1.5rem);
}

.nn-recipe__title {
	margin: 0;
	font-family: var(--nn-font-heading, inherit);
	font-size: var(--nn-fs-2xl, 2rem);
	line-height: var(--nn-lh-heading, 1.2);
}

/* ---------------------------------------------------------------
 * Порции
 * --------------------------------------------------------------- */

.nn-recipe__serves {
	display: flex;
	align-items: center;
	gap: var(--nn-space-2, 0.5rem);
	color: var(--nn-color-text-muted, #85a1bb);
	font-size: var(--nn-fs-card, 0.9rem);
}

.nn-recipe__serves-button {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: var(--nn-radius-card, 6px);
	background-color: var(--nn-color-surface, #242633);
	color: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--nn-transition, 0.3s ease);
}

.nn-recipe__serves-button:hover {
	background-color: var(--nn-color-accent, #04e2ff);
	color: var(--nn-color-bg, #1d1f27);
}

.nn-recipe__serves-input {
	width: 44px;
	padding: 2px 0;
	border: 0;
	border-bottom: 1px solid var(--nn-color-field-border, #f0f0f0);
	background: none;
	color: var(--nn-color-text, #cfd8dd);
	font-weight: var(--nn-fw-bold, 700);
	text-align: center;
	/* Стрелки счётчика лишние: рядом свои кнопки, как на действующем сайте. */
	appearance: textfield;
}

.nn-recipe__serves-input::-webkit-outer-spin-button,
.nn-recipe__serves-input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* ---------------------------------------------------------------
 * Ингредиенты и пищевая ценность
 * --------------------------------------------------------------- */

.nn-recipe__body {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nn-space-5, 1.5rem);
	align-items: flex-start;
}

.nn-recipe__list {
	flex: 1 1 60%;
	min-width: 260px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nn-recipe__item {
	display: flex;
	position: relative;
	justify-content: space-between;
	gap: var(--nn-space-2, 0.5rem);
	padding: 3px 0 3px 35px;
	overflow: hidden;
	cursor: pointer;
}

/* Квадрат-отметка: строку можно «вычеркнуть» по клику, как на оригинале. */
.nn-recipe__item::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	z-index: 3;
	width: 18px;
	height: 18px;
	border: 1px solid var(--nn-color-field-border, #f0f0f0);
	border-radius: 2px;
}

/* Отбивка точками тянется через всю строку, а текст закрывает её фоном. */
.nn-recipe__item::after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 35px;
	z-index: 1;
	width: 100%;
	border-bottom: 1px dotted var(--nn-color-field-border, #f0f0f0);
	opacity: 0.5;
}

.nn-recipe__item.is-checked {
	opacity: 0.4;
}

.nn-recipe__item.is-checked::before {
	background-color: var(--nn-color-accent, #04e2ff);
}

.nn-recipe__name,
.nn-recipe__amount {
	position: relative;
	z-index: 2;
	background-color: var(--nn-color-bg, #1d1f27);
}

.nn-recipe__name {
	padding: 2px 4px 2px 0;
}

.nn-recipe__amount {
	padding: 2px 0 2px 4px;
	white-space: nowrap;
}

.nn-recipe__group {
	padding-top: 15px;
	font-weight: var(--nn-fw-bold, 700);
}

.nn-recipe__nutrition {
	flex: 1 1 30%;
	min-width: 220px;
	padding: 15px;
	border-radius: var(--nn-radius-card, 6px);
	background-color: var(--nn-color-surface, #242633);
	font-size: var(--nn-fs-xs, 0.8rem);
}

.nn-recipe__nutrition-title {
	margin-bottom: var(--nn-space-2, 0.5rem);
	font-weight: var(--nn-fw-bold, 700);
}

.nn-recipe__nutrition-row {
	display: flex;
	justify-content: space-between;
	margin: 5px 0;
}

/* ---------------------------------------------------------------
 * Шаги
 * --------------------------------------------------------------- */

.nn-recipe__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nn-space-5, 1.5rem);
	color: var(--nn-color-text-muted, #85a1bb);
	font-size: var(--nn-fs-card, 0.9rem);
}

.nn-recipe__video,
.nn-recipe__print {
	border: 0;
	background: none;
	padding: 0;
	color: var(--nn-color-accent, #04e2ff);
	font: inherit;
	cursor: pointer;
}

.nn-recipe-steps__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: nn-recipe-step;
}

.nn-recipe-steps__item {
	display: flex;
	gap: var(--nn-space-5, 1.5rem);
	padding: 10px 0;
	counter-increment: nn-recipe-step;
}

.nn-recipe-steps__item::before {
	content: counter(nn-recipe-step);
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--nn-color-surface, #242633);
	color: var(--nn-color-accent, #04e2ff);
	font-weight: var(--nn-fw-bold, 700);
	line-height: 32px;
	text-align: center;
}

.nn-recipe-steps__media {
	flex: 0 0 240px;
	margin: 0;
}

.nn-recipe-steps__media img {
	width: 100%;
	height: auto;
	border-radius: var(--nn-radius-card, 6px);
}

.nn-recipe-steps__text {
	flex: 1 1 auto;
}

.nn-recipe-steps__text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 599px) {

	.nn-recipe-steps__item {
		flex-wrap: wrap;
		gap: var(--nn-space-3, 0.75rem);
	}

	.nn-recipe-steps__media {
		flex: 1 1 100%;
		order: 1;
	}
}

/* ---------------------------------------------------------------
 * Печать: на бумаге нужен рецепт, а не обвязка сайта
 * --------------------------------------------------------------- */

@media print {

	.nn-recipe__serves-button,
	.nn-recipe__print,
	.nn-recipe__video {
		display: none;
	}

	.nn-recipe__item::after {
		border-bottom-color: #999;
	}

	.nn-recipe__name,
	.nn-recipe__amount,
	.nn-recipe__nutrition {
		background: none;
	}
}

/* ---------------------------------------------------------------
 * Общий блок под материалом
 *
 * На действующем сайте это выделенная врезка со светлой подложкой
 * и восклицательным знаком слева. Подложку берём из токенов темы:
 * светлая на тёмном фоне читалась бы как ошибка вёрстки. Рамка,
 * значок и выделения — в золотой гамме разделов рецепта (23.09),
 * как и блок оценки звёздами рядом.
 * --------------------------------------------------------------- */

.nn-note {
	position: relative;
	margin-bottom: var(--nn-space-6, 2rem);
	padding: var(--nn-space-5, 1.5rem) var(--nn-space-5, 1.5rem) var(--nn-space-5, 1.5rem) 4rem;
	border: 1px solid var(--nn-color-gold-dim, rgba(195, 154, 81, 0.45));
	border-radius: var(--nn-radius-card, 6px);
	background-color: var(--nn-color-surface, #242633);
}

.nn-note::before {
	content: "!";
	position: absolute;
	top: var(--nn-space-5, 1.5rem);
	left: var(--nn-space-5, 1.5rem);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--nn-gradient-gold, #c39a51);
	color: var(--nn-color-on-gold, #2a1f0c);
	font-weight: var(--nn-fw-bold, 700);
	line-height: 28px;
	text-align: center;
}

.nn-note strong,
.nn-note b {
	color: var(--nn-color-gold, #c39a51);
}

.nn-note li::marker {
	color: var(--nn-color-gold, #c39a51);
}

.nn-note p:last-child {
	margin-bottom: 0;
}

@media (max-width: 599px) {

	.nn-note {
		padding: var(--nn-space-4, 1rem);
	}

	/* На узком экране значок съедал бы треть строки. */
	.nn-note::before {
		display: none;
	}
}

@media print {

	.nn-note {
		display: none;
	}
}

/* ---------------------------------------------------------------
 * Разделы рецепта: значок, номер, линия
 *
 * Классы проставляет NN_Recipe_Sections по тексту заголовка: текст
 * материала хранится обычным текстом, разметки блоков в нём нет.
 * Значок — маска из public/icons, залитая золотом темы. У адреса
 * значка есть версия (?v=3): сервер разрешает кэшировать SVG на месяц,
 * и без неё новые рисунки доходят до читателя через 30 дней.
 * Перерисовали значок — поднимите число.
 *
 * Внутри .nn-sections (есть опознанные разделы) — раскладка образца
 * заказчика: колонка значков слева, номер раздела перед заголовком,
 * тонкая линия между разделами. Вне обёртки значок стоит в строке.
 * --------------------------------------------------------------- */

.nn-section__icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	margin-right: var(--nn-space-3, 0.75rem);
	vertical-align: -0.15em;
	background: var(--nn-gradient-gold, #c39a51);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Браузер без масок покажет заголовок без значка, а не золотой квадрат. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {

	.nn-section__icon {
		display: none;
	}
}

.nn-section--description .nn-section__icon {
	-webkit-mask-image: url("icons/glass.svg?v=3");
	mask-image: url("icons/glass.svg?v=3");
}

.nn-section--taste .nn-section__icon {
	-webkit-mask-image: url("icons/glass.svg?v=3");
	mask-image: url("icons/glass.svg?v=3");
}

.nn-section--ingredients .nn-section__icon {
	-webkit-mask-image: url("icons/ingredients.svg?v=3");
	mask-image: url("icons/ingredients.svg?v=3");
}

.nn-section--steps .nn-section__icon {
	-webkit-mask-image: url("icons/steps.svg?v=3");
	mask-image: url("icons/steps.svg?v=3");
}

.nn-section--tips .nn-section__icon {
	-webkit-mask-image: url("icons/tips.svg?v=3");
	mask-image: url("icons/tips.svg?v=3");
}

.nn-section--variants .nn-section__icon {
	-webkit-mask-image: url("icons/variants.svg?v=3");
	mask-image: url("icons/variants.svg?v=3");
}

.nn-section--aging .nn-section__icon {
	-webkit-mask-image: url("icons/aging.svg?v=3");
	mask-image: url("icons/aging.svg?v=3");
}

.nn-section--storage .nn-section__icon {
	-webkit-mask-image: url("icons/storage.svg?v=3");
	mask-image: url("icons/storage.svg?v=3");
}

.nn-section--serving .nn-section__icon {
	-webkit-mask-image: url("icons/serving.svg?v=3");
	mask-image: url("icons/serving.svg?v=3");
}

.nn-section--health .nn-section__icon {
	-webkit-mask-image: url("icons/health.svg?v=3");
	mask-image: url("icons/health.svg?v=3");
}

.nn-section--warning .nn-section__icon {
	-webkit-mask-image: url("icons/warning.svg?v=3");
	mask-image: url("icons/warning.svg?v=3");
}

.nn-section--related .nn-section__icon {
	-webkit-mask-image: url("icons/related.svg?v=3");
	mask-image: url("icons/related.svg?v=3");
}

.nn-section--history .nn-section__icon {
	-webkit-mask-image: url("icons/history.svg?v=3");
	mask-image: url("icons/history.svg?v=3");
}

.nn-section--equipment .nn-section__icon {
	-webkit-mask-image: url("icons/equipment.svg?v=3");
	mask-image: url("icons/equipment.svg?v=3");
}

/* Оборудование: короткие пункты — в две колонки, маркеры золотом. */
.nn-recipe-equipment {
	margin-bottom: var(--nn-space-5, 1.5rem);
}

.nn-recipe-equipment__list {
	margin: 0;
	padding-left: 1.1em;
	column-gap: var(--nn-space-6, 2rem);
	columns: 2;
}

.nn-recipe-equipment__list li {
	break-inside: avoid;
}

.nn-recipe-equipment__list li::marker {
	color: var(--nn-color-gold, #c39a51);
}

@media (max-width: 599px) {

	.nn-recipe-equipment__list {
		columns: 1;
	}
}

.nn-sections {
	--nn-sections-gutter: 64px;
	--nn-sections-icon: 44px;
	padding-left: var(--nn-sections-gutter);
	counter-reset: nn-section;
}

/* Заголовок раздела и шапка блока рецепта — одна и та же «строка раздела». */
.nn-sections > h2.nn-section,
.nn-sections .nn-recipe__header {
	position: relative;
	margin: var(--nn-space-5, 1.5rem) 0 var(--nn-space-3, 0.75rem) calc(-1 * var(--nn-sections-gutter));
	padding: var(--nn-space-4, 1rem) 0 0 var(--nn-sections-gutter);
	border-top: 1px solid var(--nn-color-gold-dim, rgba(195, 154, 81, 0.45));
}

/* Над первым разделом линию уже провела шапка материала. */
.nn-sections > h2.nn-section:first-child {
	margin-top: 0;
	border-top: 0;
}

.nn-sections h2.nn-section {
	display: block;
	min-height: calc(var(--nn-sections-icon) - var(--nn-space-4, 1rem));
	color: var(--nn-color-gold, #c39a51);
	font-family: var(--nn-font-heading, inherit);
	font-size: var(--nn-fs-md, 1.125rem);
	font-weight: var(--nn-fw-bold, 700);
	line-height: var(--nn-lh-h3, 1.4);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	counter-increment: nn-section;
}

.nn-sections .nn-recipe__header h2.nn-section {
	margin: 0;
}

.nn-sections h2.nn-section::before {
	content: counter(nn-section) ". ";
}

.nn-sections h2.nn-section .nn-section__icon {
	position: absolute;
	top: var(--nn-space-4, 1rem);
	left: 0;
	width: var(--nn-sections-icon);
	height: var(--nn-sections-icon);
	margin: 0;
}

.nn-sections h3.nn-section {
	color: var(--nn-color-gold-bright, #f3e3b0);
	font-size: var(--nn-fs-base, 1rem);
}

.nn-sections p,
.nn-sections ul,
.nn-sections ol {
	margin-bottom: var(--nn-space-3, 0.75rem);
}

.nn-sections ul:not([class]) {
	padding-left: 1.1em;
}

.nn-sections ul:not([class]) li::marker {
	color: var(--nn-color-gold, #c39a51);
}

.nn-sections li + li {
	margin-top: 2px;
}

/* Выделенное начало пункта: «Более сладкий:», «Вкус:». */
.nn-sections strong,
.nn-sections b {
	color: var(--nn-color-gold-bright, #f3e3b0);
}

/* Рецепт внутри разделов — плотнее, как на образце. */
.nn-sections .nn-recipe,
.nn-sections .nn-recipe-steps {
	margin-bottom: 0;
}

.nn-sections .nn-recipe__header {
	align-items: center;
	margin-bottom: var(--nn-space-3, 0.75rem);
}

.nn-sections .nn-recipe__item::before {
	border-color: var(--nn-color-gold-dim, rgba(195, 154, 81, 0.45));
}

.nn-sections .nn-recipe__item::after {
	border-bottom-color: var(--nn-color-gold, #c39a51);
}

.nn-sections .nn-recipe__item.is-checked::before {
	background-color: var(--nn-color-gold, #c39a51);
}

.nn-sections .nn-recipe-steps__item {
	gap: var(--nn-space-3, 0.75rem);
	padding: 3px 0;
}

.nn-sections .nn-recipe-steps__item::before {
	width: 24px;
	height: 24px;
	margin-top: 1px;
	background: var(--nn-gradient-gold, #c39a51);
	color: var(--nn-color-on-gold, #2a1f0c);
	font-size: var(--nn-fs-xs, 0.8rem);
	line-height: 24px;
}

.nn-sections .nn-recipe-steps__text p {
	margin: 0;
}

/* Предупреждение: текст приглушён, значок тот же золотой — как на образце. */
.nn-sections h2.nn-section--warning ~ p {
	color: var(--nn-color-text, #cfd8dd);
}

@media (max-width: 599px) {

	.nn-sections {
		--nn-sections-gutter: 44px;
		--nn-sections-icon: 32px;
	}
}

@media print {

	.nn-section__icon {
		display: none;
	}

	.nn-sections {
		padding-left: 0;
	}
}