/**
 * Стиль рецепта для всех материалов сайта (NN_Recipe_Article).
 *
 * Повторяет раздел «Разделы рецепта» из recipe.css: колонка значков
 * слева, номер раздела перед заголовком, золотой заголовок прописными,
 * тонкая золотая линия между разделами, золотые маркеры и выделения.
 * Работает по готовой разметке материала: разделы — его заголовки H2,
 * текст не переписывается. Если в тексте есть опознанные разделы
 * рецепта (.nn-sections), раскладку даёт recipe.css — здесь она не
 * дублируется.
 *
 * Значок раздела — общий, маска из icons/section.svg; сайт может задать
 * свой через `--nn-article-icon`. У адреса — версия (?v=1), см. recipe.css.
 *
 * Переменные с запасным значением: см. recipe.css.
 */

/* Колонка значков — только когда есть разделы: без H2 она была бы пустым
 * отступом слева. */
.nn-entry--article-style .nn-entry__content:not(:has(.nn-sections)):has(> h2) {
	--nn-article-gutter: 64px;
	--nn-article-icon-size: 44px;
	padding-left: var(--nn-article-gutter);
	counter-reset: nn-article-section;
}

/* Заголовок раздела — «строка раздела» рецепта. */
.nn-entry--article-style .nn-entry__content:not(:has(.nn-sections)) > h2 {
	position: relative;
	clear: both;
	min-height: calc(var(--nn-article-icon-size) - var(--nn-space-4, 1rem));
	margin: var(--nn-space-5, 1.5rem) 0 var(--nn-space-3, 0.75rem) calc(-1 * var(--nn-article-gutter));
	padding: var(--nn-space-4, 1rem) 0 0 var(--nn-article-gutter);
	border-top: 1px solid var(--nn-color-gold-dim, rgba(195, 154, 81, 0.45));
	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-article-section;
}

/* Над первым разделом в начале текста линию уже провела шапка. */
.nn-entry--article-style .nn-entry__content:not(:has(.nn-sections)) > h2:first-child {
	margin-top: 0;
	border-top: 0;
}

.nn-entry--article-style .nn-entry__content:not(:has(.nn-sections)) > h2::before {
	content: counter(nn-article-section) ". ";
}

.nn-entry--article-style .nn-entry__content:not(:has(.nn-sections)) > h2::after {
	content: "";
	position: absolute;
	top: var(--nn-space-4, 1rem);
	left: 0;
	width: var(--nn-article-icon-size);
	height: var(--nn-article-icon-size);
	background: var(--nn-gradient-gold, #c39a51);
	-webkit-mask: var(--nn-article-icon, url("icons/section.svg?v=1")) center / contain no-repeat;
	mask: var(--nn-article-icon, url("icons/section.svg?v=1")) center / contain no-repeat;
}

/* Подзаголовки — как h3 разделов рецепта. */
.nn-entry--article-style .nn-entry__content h3,
.nn-entry--article-style .nn-entry__content h4 {
	color: var(--nn-color-gold-bright, #f3e3b0);
	font-size: var(--nn-fs-base, 1rem);
}

/* Выделенное начало абзаца («SPICED WHISKY», вопрос FAQ) и маркеры. */
.nn-entry--article-style .nn-entry__content strong,
.nn-entry--article-style .nn-entry__content b {
	color: var(--nn-color-gold-bright, #f3e3b0);
}

/* Жирный внутри заголовка (`<h2><strong>ОВЕН</strong></h2>`) — цветом заголовка. */
.nn-entry--article-style .nn-entry__content :is(h2, h3, h4) :is(strong, b) {
	color: inherit;
}

.nn-entry--article-style .nn-entry__content ul:not([class]) li::marker,
.nn-entry--article-style .nn-entry__content ol:not([class]) li::marker {
	color: var(--nn-color-gold, #c39a51);
}

@media (max-width: 599px) {

	.nn-entry--article-style .nn-entry__content:not(:has(.nn-sections)):has(> h2) {
		--nn-article-gutter: 44px;
		--nn-article-icon-size: 32px;
	}
}

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

	.nn-entry--article-style .nn-entry__content > h2::after {
		display: none;
	}
}

@media print {

	.nn-entry--article-style .nn-entry__content {
		padding-left: 0;
	}

	.nn-entry--article-style .nn-entry__content > h2::after {
		display: none;
	}
}