/*
 * Receptkort v2 — slaktarpapper (bbqlovers-core)
 * Använder temats CSS-variabler (SHAPE §0) med egna reservvärden, så kortet
 * ser rätt ut även om temat inte definierar dem. Allt är scopat under
 * .recipe-card--v2 och använder nya klassnamn (rc-*), så äldre
 * .recipe-card__*-regler i temat inte läcker in.
 */

.recipe-card--v2 {
	--rc-paper: var(--paper, #EBCDB2);
	--rc-paper-ink: var(--paper-ink, #3A2418);
	--rc-ink: var(--ink, #17202A);
	--rc-red: var(--red, #B92326);
	--rc-red-dark: var(--red-dark, #8E1A1D);
	--rc-blue: var(--blue, #1C2B3A);
	--rc-tile: var(--tile, #FAFAF7);
	--rc-grease: var(--grease, #2B2B2B);
	--rc-done: #6B5547; /* 4.6:1 på papper */
	--rc-rule: rgba(58, 36, 24, 0.28);
	--rc-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--rc-display: var(--font-display, "Big Shoulders Display", "Arial Narrow", sans-serif);
	--rc-text: var(--font-body, "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif);

	position: relative;
	display: block;
	max-width: min(100%, 1100px);
	margin: 48px auto;
	padding: 0 0 8px;
	background: var(--rc-paper);
	color: var(--rc-paper-ink);
	border: 0;
	border-radius: 0;
	font-family: var(--rc-text);
	font-size: 17px;
	line-height: 1.5;
	box-sizing: border-box;
	scroll-margin-top: 80px;
}
.recipe-card--v2 *,
.recipe-card--v2 *::before,
.recipe-card--v2 *::after { box-sizing: border-box; }

/* Förklädesrand: ENDA ornamentet, på kortets överkant */
.recipe-card--v2 .rc-stripe {
	height: 12px;
	background: repeating-linear-gradient(90deg, var(--rc-blue) 0 3px, var(--rc-tile) 3px 6px);
}

.recipe-card--v2 .rc-head,
.recipe-card--v2 .rc-resume,
.recipe-card--v2 .rc-timeline,
.recipe-card--v2 .rc-body { padding-inline: clamp(16px, 4vw, 40px); }

.recipe-card--v2 .rc-head { padding-top: clamp(20px, 3vw, 32px); }

.recipe-card--v2 .rc-title {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	font-family: var(--rc-display);
	font-weight: 800;
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.08; /* Å/Ä/Ö-prickar får inte krocka med raden ovanför */
	letter-spacing: 0;
	text-transform: none;
	color: var(--rc-paper-ink);
	text-wrap: balance;
}

/* ---- Fakta: prislappar ---- */
.recipe-card--v2 .rc-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}
.recipe-card--v2 .rc-fact {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	min-width: 84px;
	margin: 0;
	padding: 6px 12px 6px 22px;
	background: #fff;
	color: var(--rc-paper-ink);
	border: 2px solid var(--rc-red);
	border-radius: 3px;
	line-height: 1.15;
}
/* Det stansade hålet */
.recipe-card--v2 .rc-fact::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--rc-paper);
	box-shadow: inset 0 0 0 1.5px var(--rc-red);
}
.recipe-card--v2 .rc-fact__label {
	font-family: var(--rc-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rc-red-dark);
}
.recipe-card--v2 .rc-fact__value {
	font-family: var(--rc-text);
	font-weight: 700;
	font-size: 19px;
	color: var(--rc-paper-ink);
}

/* ---- Verktygsrad ---- */
.recipe-card--v2 .rc-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}
.recipe-card--v2 .rc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 16px;
	margin: 0;
	background: transparent;
	color: var(--rc-paper-ink);
	border: 2px solid var(--rc-paper-ink);
	border-radius: 0;
	font-family: var(--rc-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms var(--rc-ease), color 160ms var(--rc-ease);
}
.recipe-card--v2 .rc-btn[hidden] { display: none; }
.recipe-card--v2 .rc-btn:hover,
.recipe-card--v2 .rc-btn[aria-pressed="true"] {
	background: var(--rc-paper-ink);
	color: var(--rc-paper);
}
/* Skärm-tänd-knappen: ett tänt läge syns som ifylld knapp med en lysande markör */
.recipe-card--v2 .rc-btn--wake[aria-pressed="true"]::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	background: var(--rc-paper);
	border-radius: 50%;
}
.recipe-card--v2 .rc-btn--small { min-height: 40px; padding: 6px 12px; font-size: 14px; }

.recipe-card--v2 .rc-btn:focus-visible,
.recipe-card--v2 .rc-check:focus-visible {
	outline: 2px solid var(--rc-red);
	outline-offset: 2px;
}

/* ---- "Du var här" ---- */
.recipe-card--v2 .rc-resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-bottom: 18px;
	padding-block: 10px;
	background: var(--rc-tile);
	border-block: 1px solid var(--rc-rule);
	color: var(--rc-ink);
}
.recipe-card--v2 .rc-resume[hidden] { display: none; }
.recipe-card--v2 .rc-resume__text { flex: 1 1 200px; font-weight: 600; }
.recipe-card--v2 .rc-resume .rc-btn { border-color: var(--rc-ink); color: var(--rc-ink); }
.recipe-card--v2 .rc-resume .rc-btn:hover { background: var(--rc-ink); color: var(--rc-tile); }

.recipe-card--v2 .rc-flag {
	display: inline-block;
	margin: 0 0 6px 0;
	padding: 2px 10px;
	background: var(--rc-red-dark);
	color: #fff;
	font-family: var(--rc-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* ---- Understrukturer ---- */
.recipe-card--v2 .rc-sechead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 12px; }
.recipe-card--v2 .rc-sechead .rc-sub { margin: 0; }
.recipe-card--v2 .rc-count { font-size: 14px; line-height: 1.3; color: var(--rc-done); font-variant-numeric: tabular-nums; }
.recipe-card--v2 .rc-sub {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-family: var(--rc-display);
	font-weight: 800;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.08;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rc-paper-ink);
}
.recipe-card--v2 .rc-group {
	margin: 18px 0 6px;
	padding: 0;
	font-family: var(--rc-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rc-red-dark);
}

/* ---- Tidslinje ---- */
.recipe-card--v2 .rc-timeline { margin-bottom: 24px; }
.recipe-card--v2 .rc-timeline__list { margin: 0; padding: 0; list-style: none; }
.recipe-card--v2 .rc-tl {
	display: grid;
	grid-template-columns: minmax(8.5rem, 11rem) 1fr auto;
	align-items: center;
	gap: 4px 12px;
	margin: 0;
	padding: 6px 0;
	border-top: 1px solid var(--rc-rule);
}
.recipe-card--v2 .rc-tl:last-child { border-bottom: 1px solid var(--rc-rule); }
.recipe-card--v2 .rc-tl__label { display: flex; align-items: baseline; gap: 8px; font-weight: 700; }
.recipe-card--v2 .rc-tl__name { overflow-wrap: normal; word-break: normal; hyphens: none; }
.recipe-card--v2 .rc-tl__no { flex: none; font-size: 12px; font-weight: 600; line-height: 1; color: var(--rc-done); font-variant-numeric: tabular-nums; }
.recipe-card--v2 .rc-tl__no::before { content: "#"; opacity: 0.7; }
.recipe-card--v2 .rc-tl__dur { font-variant-numeric: tabular-nums; }
.recipe-card--v2 .rc-tl__track { position: relative; display: block; height: 14px; }
.recipe-card--v2 .rc-tl__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--rc-x, 0%);
	width: var(--rc-w, 10%);
	background: var(--rc-blue);
}
.recipe-card--v2 .rc-tl__dur { font-size: 15px; text-align: right; white-space: nowrap; }
.recipe-card--v2 .rc-timeline__total { margin: 10px 0 0; font-size: 17px; }
.recipe-card--v2 .rc-timeline__sum { font-weight: 600; white-space: nowrap; }
.recipe-card--v2 .rc-timeline__total strong { font-weight: 700; }
.recipe-card--v2 .rc-timeline__note { margin: 6px 0 0; font-size: 14px; color: var(--rc-done); }

/* ---- Brödet: ingredienser vänster (sticky), steg höger ---- */
.recipe-card--v2 .rc-body { display: grid; gap: 28px; padding-bottom: clamp(16px, 3vw, 32px); }
@media (min-width: 900px) {
	.recipe-card--v2 .rc-body { grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
	.recipe-card--v2 .rc-ingredients { position: sticky; top: 24px; align-self: start; }
}

.recipe-card--v2 .rc-list { margin: 0; padding: 0; list-style: none; counter-reset: rc-step; }
.recipe-card--v2 .rc-item { margin: 0; padding: 0; border-top: 1px solid var(--rc-rule); }
.recipe-card--v2 .rc-list > .rc-item:last-child { border-bottom: 1px solid var(--rc-rule); }
.recipe-card--v2 .rc-item__label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	padding: 10px 2px;
	margin: 0;
	cursor: pointer;
	font-size: 17px;
	line-height: 1.45;
	color: var(--rc-paper-ink);
}
.recipe-card--v2 .rc-item__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.recipe-card--v2 .rc-item__text a { color: var(--rc-red-dark); text-decoration: underline; text-underline-offset: 2px; }
.recipe-card--v2 .rc-item__text img { max-width: 100%; height: auto; }

/* Kryssrutan: riktig input, men tecknad */
.recipe-card--v2 .rc-check {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 1px 0 0;
	padding: 0;
	background: var(--rc-tile);
	border: 2px solid var(--rc-paper-ink);
	border-radius: 0;
	cursor: pointer;
	display: inline-grid;
	place-content: center;
}
.recipe-card--v2 .rc-check::after {
	content: "";
	width: 14px;
	height: 14px;
	background: var(--rc-paper-ink);
	clip-path: polygon(14% 44%, 0 59%, 38% 100%, 100% 20%, 86% 5%, 38% 69%);
	transform: scale(0);
	transition: transform 160ms var(--rc-ease);
}
.recipe-card--v2 .rc-check:checked::after { transform: scale(1); }

/* Stegnummer: numret bär ordningen */
.recipe-card--v2 .rc-step { counter-increment: rc-step; }
.recipe-card--v2 .rc-step .rc-item__label { position: relative; }
.recipe-card--v2 .rc-step .rc-check { order: 3; }
.recipe-card--v2 .rc-step .rc-item__label::before {
	content: counter(rc-step);
	order: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	background: var(--rc-paper-ink);
	color: var(--rc-paper);
	font-family: var(--rc-display);
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.recipe-card--v2 .rc-step .rc-item__text { order: 2; }
.recipe-card--v2 .rc-step .rc-check { margin-left: auto; }

/* ---- Klart-läge: fettkritsstreck (ritat, inte text-decoration) ----
 * Texten ligger i en inline .rc-strike. Strecket är en SVG-bana (ojämna kanter,
 * ~3,3 px hög, lutad ca -1,7 grader, --grease vid 85 %) i naturlig storlek
 * (340 x 20 px) som klonas per rad (box-decoration-break: clone) och sticker
 * ut ~4 px före/efter texten (padding + negativ marginal). Från 480 px (bredare
 * rader) skalas banan efter radens bredd (flackare). Ritas upp via background-size.
 * Banans färg är --grease (#2B2B2B) inbakad i bilden. Funkar utan JS via :checked. */
.recipe-card--v2 .rc-item__text { transition: color 220ms var(--rc-ease); }
.recipe-card--v2 .rc-strike {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-inline: 4px;
	margin-inline: -4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 20' preserveAspectRatio='none'%3E%3Cpath fill='%232B2B2B' fill-opacity='.85' fill-rule='evenodd' d='M0.0 14.2 L15.5 12.9 L29.3 12.5 L48.2 12.5 L61.9 11.3 L77.1 10.9 L92.7 10.7 L110.2 10.6 L122.8 9.6 L138.6 9.5 L156.2 8.8 L170.5 8.1 L187.3 7.9 L199.1 7.2 L215.1 6.9 L231.5 6.2 L246.5 6.1 L263.3 5.9 L279.3 5.1 L294.0 4.5 L310.9 4.2 L323.2 3.7 L340.0 3.9 L340.0 5.4 L326.2 6.9 L309.0 7.5 L292.6 7.6 L277.5 8.1 L261.1 9.4 L248.8 9.6 L230.7 9.5 L217.3 10.1 L202.1 10.2 L186.5 10.7 L171.1 11.2 L154.4 12.0 L140.9 12.9 L121.9 12.9 L109.5 13.9 L93.4 14.0 L77.0 14.2 L60.1 14.2 L47.0 15.6 L32.1 15.6 L16.0 15.9 L0.0 16.0Z M47 13.9 L54 13.7 L54.5 14.3 L47.5 14.5Z M131 11.3 L138 11.1 L138.5 11.7 L131.5 11.9Z M214 8.5 L221 8.3 L221.5 8.9 L214.5 9.1Z M289 6.1 L296 5.9 L296.5 6.5 L289.5 6.7Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-size: 0 20px;
	transition: background-size 320ms var(--rc-ease);
}
.recipe-card--v2 .rc-check:checked ~ .rc-item__text .rc-strike { background-size: 340px 20px; }
@media (min-width: 480px) {
	.recipe-card--v2 .rc-strike { background-size: 0% 20px; }
	.recipe-card--v2 .rc-check:checked ~ .rc-item__text .rc-strike { background-size: 100% 20px; }
}
.recipe-card--v2 .rc-check:checked ~ .rc-item__text { color: var(--rc-done); }
.recipe-card--v2 .rc-check:checked ~ .rc-item__text a { color: var(--rc-done); }
.recipe-card--v2 .rc-step .rc-check:checked ~ .rc-item__text { color: var(--rc-done); }
.recipe-card--v2 .rc-step:has(.rc-check:checked) .rc-item__label::before {
	background: transparent;
	color: var(--rc-done);
	box-shadow: inset 0 0 0 2px var(--rc-done);
}

/* Lägesmeddelanden / ingen JS: strecket funkar ändå via :checked */
@media (prefers-reduced-motion: reduce) {
	.recipe-card--v2 .rc-item__text,
	.recipe-card--v2 .rc-strike,
	.recipe-card--v2 .rc-check::after,
	.recipe-card--v2 .rc-btn { transition: none; }
}

/* Telefon: numret och kryssrutan delar en kompakt rad, texten får hela kortets bredd */
@media (max-width: 480px) {
	.recipe-card--v2 .rc-step .rc-item__label { flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0 12px; }
	.recipe-card--v2 .rc-step .rc-item__label::before { order: 1; }
	.recipe-card--v2 .rc-step .rc-check { order: 2; margin: 0 0 0 auto; width: 28px; height: 28px; }
	.recipe-card--v2 .rc-step .rc-item__text { order: 3; flex: 1 1 100%; }
	.recipe-card--v2 .rc-flag { margin-top: 8px; }
}

/* Smal skärm: tidslinjen staplar etikett över stapel */
@media (max-width: 520px) {
	.recipe-card--v2 { margin-block: 32px; font-size: 16px; }
	.recipe-card--v2 .rc-tl { grid-template-columns: 1fr auto; }
	.recipe-card--v2 .rc-tl__track { grid-column: 1 / -1; grid-row: 2; }
	.recipe-card--v2 .rc-fact { min-width: 76px; }
}

/* Ingen annonsyta inuti kortet (belt and braces — annonsfiltret placerar aldrig något där). */
.recipe-card--v2 .ad-slot-wrap { display: none !important; }

/* ---- Utskrift: bara kortet ---- */
@media print {
	/* Reservlösning utan JS: göm allt utom kortet. Skriptet (beforeprint) tar
	   dessutom bort syskonen ur layouten så inga tomma sidor skrivs ut. */
	html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
	body * { visibility: hidden !important; }
	[data-rc-print-hide] { display: none !important; }
	.recipe-card--v2,
	.recipe-card--v2 * { visibility: visible !important; }
	.recipe-card--v2 {
		position: absolute !important;
		left: 0;
		top: 0;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		background: #fff !important;
		color: #000 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	html.rc-printing .recipe-card--v2 { position: static !important; }
	.recipe-card--v2 .rc-stripe { height: 6px; }
	.recipe-card--v2 .rc-toolbar,
	.recipe-card--v2 .rc-resume,
	.recipe-card--v2 .rc-flag { display: none !important; }
	.recipe-card--v2 .rc-body { display: block !important; }
	.recipe-card--v2 .rc-ingredients { position: static !important; margin-bottom: 18px; }
	.recipe-card--v2 .rc-item { break-inside: avoid; }
	.recipe-card--v2 .rc-fact { border-color: #000; }
	.recipe-card--v2 .rc-fact__label { color: #000; }
	.recipe-card--v2 .rc-item__text a { color: #000; text-decoration: none; }
	.recipe-card--v2 .rc-step .rc-item__label::before { background: #000; color: #fff; }
	.recipe-card--v2 .rc-tl__bar { background: #000; }
}

/* Delrubriker i instruktioner och anmärkningar i ingredienslistan (<p>+<br>-läget) */
.recipe-card--v2 .rc-stephead {
	margin: 18px 0 0;
	padding: 6px 0 4px;
	border-top: 1px solid var(--rc-rule);
	font-family: var(--rc-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rc-red-dark);
	list-style: none;
}
.recipe-card--v2 .rc-stephead + .rc-item { border-top: 0; }
.recipe-card--v2 .rc-note { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--rc-paper-ink); }
.recipe-card--v2 .rc-note a { color: var(--rc-red-dark); }

/* Avslutande hälsning efter stegen (inte ett steg) */
.recipe-card--v2 .rc-outro {
	margin: 20px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--rc-rule);
	font-family: var(--rc-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var(--rc-paper-ink);
}

/* Metoden står i guiden: väg dit istället för stegslista */
.recipe-card--v2 .rc-elsewhere { margin: 0 0 8px; font-weight: 600; }
.recipe-card--v2 .rc-jump { margin: 0 0 8px; padding: 0; list-style: none; }
.recipe-card--v2 .rc-jump li { margin: 0; padding: 0; border-top: 1px solid var(--rc-rule); }
.recipe-card--v2 .rc-jump li:last-child { border-bottom: 1px solid var(--rc-rule); }
.recipe-card--v2 .rc-jump a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 2px;
	color: var(--rc-paper-ink);
	font-weight: 600;
	text-decoration: none;
}
.recipe-card--v2 .rc-jump a::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin: 0 6px 4px auto;
	border-right: 2px solid var(--rc-red-dark);
	border-bottom: 2px solid var(--rc-red-dark);
	transform: rotate(45deg);
}
.recipe-card--v2 .rc-jump a:hover { color: var(--rc-red-dark); }
.recipe-card--v2 .rc-jump a:focus-visible { outline: 2px solid var(--rc-red); outline-offset: 2px; }

/* 1-2 steg utan avsnitt att hänvisa till: vanlig text, ingen kryssbar lista */
.recipe-card--v2 .rc-plainsteps { margin: 0; padding: 0; list-style: none; }
.recipe-card--v2 .rc-plainsteps li { margin: 0; padding: 10px 2px; border-top: 1px solid var(--rc-rule); font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.recipe-card--v2 .rc-plainsteps li:last-child { border-bottom: 1px solid var(--rc-rule); }

/* Utskrift när metoden står i guiden: hela artikelns brödtext skrivs ut (skriptet sätter .rc-print-scope) */
@media print {
	.rc-print-scope, .rc-print-scope * { visibility: visible !important; }
	html.rc-printing-guide .recipe-card--v2 { position: static !important; margin: 0 0 18px !important; }
	html.rc-printing-guide .rc-print-scope .ad-slot-wrap,
	html.rc-printing-guide .rc-print-scope iframe { display: none !important; }
	.recipe-card--v2 .rc-jump a { color: #000; }
	.recipe-card--v2 .rc-jump a::after { display: none; }
	.recipe-card--v2 .rc-check:checked ~ .rc-item__text { color: #000; }
}