/*
 * Стиловете на рецептата.
 *
 * Плъгинът ходи по чужди теми, значи не може да разчита на нищо освен на
 * себе си. Оттук: собствени променливи, без наследяване на цветове от
 * темата, и специфичност точно колкото да не бъде пометена.
 */

.duk-recipe {
	--duk-accent: #3F5E43;
	--duk-line: color-mix(in srgb, var(--duk-accent) 28%, transparent);
	--duk-soft: color-mix(in srgb, var(--duk-accent) 7%, transparent);
	--duk-ink: currentColor;

	margin: 2rem 0;
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.duk-recipe {
		--duk-line: rgba(63, 94, 67, .28);
		--duk-soft: rgba(63, 94, 67, .07);
	}
}

/* ---------- лентата с фактите ---------- */

.duk-recipe .duk-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 1px;
	margin: 0 0 1.75rem;
	padding: 0;
	background: var(--duk-line);
	border: 1px solid var(--duk-line);
	border-radius: 6px;
	overflow: hidden;
}

.duk-recipe .duk-fact {
	background: var(--duk-soft);
	padding: .75rem .9rem;
	margin: 0;
}

.duk-recipe .duk-fact dt {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--duk-accent);
	margin: 0 0 .2rem;
}

.duk-recipe .duk-fact dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---------- заглавия ---------- */

.duk-recipe .duk-heading {
	margin: 1.75rem 0 .75rem;
}

.duk-recipe .duk-heading:first-child {
	margin-top: 0;
}

.duk-recipe .duk-subheading {
	margin: 1.15rem 0 .5rem;
	font-size: 1em;
	font-weight: 700;
	color: var(--duk-accent);
}

/* ---------- продукти ---------- */

.duk-recipe .duk-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--duk-line);
}

.duk-recipe .duk-list li {
	margin: 0;
	padding: .5rem .25rem;
	border-bottom: 1px solid var(--duk-line);
}

.duk-recipe .duk-list label {
	display: flex;
	gap: .65rem;
	align-items: baseline;
	cursor: pointer;
	margin: 0;
}

.duk-recipe .duk-tick {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	accent-color: var(--duk-accent);
	cursor: pointer;
	transform: translateY(.15em);
}

.duk-recipe .duk-tick:checked + span {
	opacity: .5;
	text-decoration: line-through;
}

.duk-recipe .duk-amount {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.duk-recipe .duk-note {
	opacity: .7;
	font-style: italic;
}

/* ---------- стъпки ---------- */

.duk-recipe .duk-steplist {
	margin: 0;
	padding: 0 0 0 1.6rem;
}

.duk-recipe .duk-steplist li {
	margin: 0 0 1rem;
	padding-left: .35rem;
}

.duk-recipe .duk-steplist li::marker {
	color: var(--duk-accent);
	font-weight: 700;
}

.duk-recipe .duk-steplist p {
	margin: 0;
}

.duk-recipe .duk-tip {
	margin: .35rem 0 0 !important;
	padding-left: .75rem;
	border-left: 2px solid var(--duk-line);
	font-size: .92em;
	opacity: .8;
}

.duk-recipe .duk-recipe-note {
	margin: 1.5rem 0 0;
	padding: .8rem 1rem;
	background: var(--duk-soft);
	border-radius: 6px;
	font-size: .95em;
}

/* ---------- бутон за печат ---------- */

.duk-recipe .duk-actions-front {
	margin: 1.5rem 0 0;
}

.duk-recipe .duk-print {
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	color: var(--duk-accent);
	background: transparent;
	border: 1px solid var(--duk-accent);
	border-radius: 5px;
	padding: .5rem 1.1rem;
	cursor: pointer;
	min-height: 44px;
}

.duk-recipe .duk-print:hover,
.duk-recipe .duk-print:focus-visible {
	background: var(--duk-soft);
}

@media print {
	.duk-no-print {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.duk-recipe * {
		transition: none !important;
	}
}

/* ---------- умножител на порциите ---------- */

.duk-recipe .duk-multiplier {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .9rem;
	flex-wrap: wrap;
}

.duk-recipe .duk-multiplier-label {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--duk-accent);
	margin-right: .3rem;
}

.duk-recipe .duk-factor {
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .7rem;
	color: inherit;
	background: transparent;
	border: 1px solid var(--duk-line);
	border-radius: 5px;
	cursor: pointer;
}

.duk-recipe .duk-factor:hover {
	border-color: var(--duk-accent);
}

.duk-recipe .duk-factor.is-active {
	background: var(--duk-accent);
	border-color: var(--duk-accent);
	color: #fff;
}

/* ---------- редовете на мащабирането ---------- */

.duk-recipe .duk-scale {
	margin: 0 0 1rem;
}

.duk-recipe .duk-scale-row {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-wrap: wrap;
	margin: 0 0 .4rem;
}

.duk-recipe .duk-scale-row:last-child {
	margin-bottom: 0;
}

.duk-recipe .duk-scale .duk-multiplier {
	margin: 0;
}

.duk-recipe .duk-scale-label,
.duk-recipe .duk-multiplier-label {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--duk-accent);
	margin-right: .3rem;

	/*
	 * Еднаква ширина на трите етикета, за да не подскачат копчетата
	 * едно спрямо друго. Под 380 px се отпуска — там всеки ред и без
	 * това се пренася.
	 */
	min-width: 5.5rem;
}

.duk-recipe .duk-serv-step,
.duk-recipe .duk-sys {
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .7rem;
	color: inherit;
	background: transparent;
	border: 1px solid var(--duk-line);
	border-radius: 5px;
	cursor: pointer;
}

.duk-recipe .duk-serv-step:hover,
.duk-recipe .duk-sys:hover {
	border-color: var(--duk-accent);
}

.duk-recipe .duk-sys.is-active {
	background: var(--duk-accent);
	border-color: var(--duk-accent);
	color: #fff;
}

.duk-recipe .duk-serv-input {
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	width: 3.4rem;
	min-height: 44px;
	padding: 0 .3rem;
	text-align: center;
	color: inherit;
	background: transparent;
	border: 1px solid var(--duk-line);
	border-radius: 5px;
}

/* Стрелките на полето само отнемат ширина — броят се сменя с копчетата. */
.duk-recipe .duk-serv-input::-webkit-outer-spin-button,
.duk-recipe .duk-serv-input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.duk-recipe .duk-serv-input {
	appearance: textfield;
}

.duk-recipe .duk-serv-unit {
	font-size: .9rem;
	opacity: .75;
}

/* Видим фокус: обхождането с клавиатура не бива да е сляпо. */
.duk-recipe .duk-factor:focus-visible,
.duk-recipe .duk-sys:focus-visible,
.duk-recipe .duk-serv-step:focus-visible,
.duk-recipe .duk-serv-input:focus-visible {
	outline: 2px solid var(--duk-accent);
	outline-offset: 2px;
}

@media (max-width: 380px) {
	.duk-recipe .duk-scale-label,
	.duk-recipe .duk-multiplier-label {
		min-width: 0;
		width: 100%;
	}
}

/* ---------- допълнителното по продукта ---------- */

.duk-recipe .duk-ing-image {
	width: 2rem;
	height: 2rem;
	object-fit: cover;
	border-radius: 4px;
	vertical-align: -.55rem;
	margin-right: .45rem;
}

.duk-recipe .duk-ing-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: .2em;
}

.duk-recipe .duk-ing-link:hover {
	text-decoration-style: solid;
	color: var(--duk-accent);
}

.duk-recipe .duk-ing-sub {
	display: block;
	font-size: .85rem;
	font-style: italic;
	opacity: .75;
	margin-top: .1rem;
}

/* ---------- филтрите на архива ---------- */

.duk-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75rem 1rem;
	margin: 0 0 2rem;
	padding: 1rem 1.15rem;
	border: 1px solid rgba(127, 127, 127, .25);
	border-radius: 6px;
}

.duk-filters .duk-filter {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin: 0;
	flex: 1 1 9rem;
}

.duk-filters label {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	opacity: .75;
}

.duk-filters select {
	font: inherit;
	font-size: .95rem;
	padding: .45rem .5rem;
	min-height: 44px;
	max-width: 100%;
	border: 1px solid rgba(127, 127, 127, .35);
	border-radius: 5px;
	background: transparent;
	color: inherit;
}

.duk-filters .duk-filter--go {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: .75rem;
}

.duk-filters button {
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	min-height: 44px;
	padding: 0 1.2rem;
	color: #fff;
	background: var(--duk-accent, #3F5E43);
	border: 1px solid var(--duk-accent, #3F5E43);
	border-radius: 5px;
	cursor: pointer;
}

.duk-filters .duk-clear {
	font-size: .85rem;
	opacity: .75;
}

.duk-empty {
	margin: 0 0 2rem;
	padding: 1rem 1.15rem;
	border-left: 3px solid var(--duk-accent, #3F5E43);
	background: rgba(127, 127, 127, .07);
}

/* ---------- към рецептата ---------- */

.duk-jump {
	margin: 0 0 1.5rem;
}

.duk-jump a {
	display: inline-block;
	font-weight: 600;
	text-decoration: none;
	padding: .55rem 1.1rem;
	min-height: 44px;
	line-height: 1.9;
	border: 1px solid var(--duk-accent, #3F5E43);
	border-radius: 5px;
	color: var(--duk-accent, #3F5E43);
}

.duk-jump a:hover,
.duk-jump a:focus-visible {
	background: var(--duk-accent, #3F5E43);
	color: #fff;
}

/* ---------- видим фокус навсякъде ---------- */

/*
 * Обхождането с клавиатура не бива да е сляпо. Копчетата на
 * мащабирането вече имат фокус; тук са останалите.
 */
.duk-recipe .duk-print:focus-visible,
.duk-recipe .duk-tick:focus-visible,
.duk-filters select:focus-visible,
.duk-filters button:focus-visible,
.duk-filters .duk-clear:focus-visible,
.duk-jump a:focus-visible {
	outline: 2px solid var(--duk-accent, #3F5E43);
	outline-offset: 2px;
}

/* ---------- лепкави продукти на широк екран ---------- */

/*
 * ЗАЩО ЧАК ОТ 1000 px
 * -------------------
 * Под тази ширина двете колони стават твърде тесни и „200 г брашно“ се
 * пренася на два реда. Една колона е по-добра от две счупени.
 *
 * ЗАЩО ЦЯЛОТО ПРАВИЛО Е ЗАД @supports
 * -----------------------------------
 * Стъпките отиват във втората колона само когато НАИСТИНА има продукти
 * до тях — това го може единствено :has(). Браузър без :has() получава
 * старото оформление в една колона, което си работи. По-добре старо и
 * цяло, отколкото ново и с празна колона.
 */
@supports selector(:has(*)) {
	@media (min-width: 1000px) {
		.duk-recipe:has(.duk-ingredients):has(.duk-steps) {
			display: grid;
			grid-template-columns: minmax(15rem, 21rem) 1fr;
			gap: 0 2.5rem;
			align-items: start;
		}

		.duk-recipe:has(.duk-ingredients):has(.duk-steps) > .duk-facts,
		.duk-recipe:has(.duk-ingredients):has(.duk-steps) > .duk-recipe-note,
		.duk-recipe:has(.duk-ingredients):has(.duk-steps) > .duk-actions-front {
			grid-column: 1 / -1;
		}

		.duk-recipe:has(.duk-ingredients):has(.duk-steps) > .duk-ingredients {
			/*
			 * Отстъпът отгоре е променлива: темите с лепкава заглавка я
			 * задават и списъкът спира под нея, вместо да се скрие зад.
			 */
			position: sticky;
			top: var(--duk-sticky-top, 1.5rem);
			max-height: calc( 100vh - var(--duk-sticky-top, 1.5rem) - 2rem );
			overflow-y: auto;
			overscroll-behavior: contain;
		}

		.duk-recipe:has(.duk-ingredients):has(.duk-steps) > .duk-steps {
			grid-column: 2;
			margin-top: 0;
		}
	}
}

/* ---------- тъмна тема ---------- */

/*
 * Картата няма свой фон — стои върху фона на темата. Затова тук се
 * оправят само линиите и акцентът: тъмнозеленото на светло е добро, а
 * на тъмно изчезва.
 *
 * Ако темата има свой превключвател, той обикновено слага клас или
 * data-атрибут; затова правилото се повтаря и за тях.
 */
@media (prefers-color-scheme: dark) {
	.duk-recipe,
	.duk-filters {
		--duk-line: rgba(255, 255, 255, .18);
		--duk-soft: rgba(255, 255, 255, .06);
		--duk-accent: #8fbe96;
	}

	.duk-recipe .duk-factor.is-active,
	.duk-recipe .duk-sys.is-active {
		color: #14150f;
	}
}

[data-theme="dark"] .duk-recipe,
[data-theme="dark"] .duk-filters,
.dark .duk-recipe,
.dark .duk-filters {
	--duk-line: rgba(255, 255, 255, .18);
	--duk-soft: rgba(255, 255, 255, .06);
	--duk-accent: #8fbe96;
}

[data-theme="dark"] .duk-recipe .duk-factor.is-active,
[data-theme="dark"] .duk-recipe .duk-sys.is-active,
.dark .duk-recipe .duk-factor.is-active,
.dark .duk-recipe .duk-sys.is-active {
	color: #14150f;
}