/*
Theme Name: Moja Delicja
Theme URI: https://mojadelicja.pl
Author: Moja Delicja
Description: Dedykowany, lekki szablon bloga kulinarnego Moja Delicja. Zastępuje motyw Julia + julia-child-master-ds oraz zestaw wtyczek, zachowując strukturę URL, meta dane i dane strukturalne Recipe pod SEO.
Version: 0.18.130
Requires at least: 6.9
Requires PHP: 8.1
Text Domain: moja-delicja
*/

/*
 * Ten plik pełni podwójną rolę w WordPressie: powyższy nagłówek komentarza
 * rejestruje motyw w panelu administracyjnym, a cała reszta pliku to
 * właściwy arkusz stylów strony (ładowany przez wp_enqueue_style w
 * functions.php).
 *
 * Paleta i typografia poniżej NIE są nowym projektem — to odtworzenie
 * rzeczywistych wartości z obecnej strony (bloki customify_output_style
 * i customify_fonts_output w motywie Julia), żeby po migracji blog
 * wyglądał znajomo dla czytelników. Świadomie pomijamy natomiast
 * layout z paskiem bocznym pełnym reklam/widgetów wtyczek — to on był
 * głównym źródłem "bajzlu" z audytu.
 */

/* ---------- fonty (hostowane lokalnie, assets/fonts/) ----------
 * W tym samym pliku co reszta stylów (zamiast osobnego fonts.css),
 * żeby przeglądarka nie musiała czekać na dwa osobne, blokujące
 * renderowanie zapytania sieciowe zamiast jednego. Tylko wagi/style
 * faktycznie użyte w regułach poniżej — sprawdzone co do jednej. */
@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/lora-400-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/lora-700-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'PT Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/pt-serif-400-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'PT Serif';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/pt-serif-400-italic-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'PT Serif';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/pt-serif-700-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/montserrat-400-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/montserrat-600-latin.woff2') format('woff2');
}

/* ---------- tokeny: kolory i typografia z obecnej strony ---------- */
:root {
	--md-ink: #383c50;          /* nagłówki, podstawowy tekst — z .u-page-title-color / h1-h6 */
	--md-near-black: #161616;   /* tło "brandowych" przycisków (zawsze z jasnym tekstem) + akcent — CELOWO takie samo w obu motywach (patrz niżej) */
	--md-cream: #f7f6f5;        /* tekst na ciemnych/brandowych przyciskach — CELOWO takie samo w obu motywach */
	--md-pale-blue: #e7f2f8;    /* tło cytatów, wyróżnień, paska sticky */
	--md-tan: #c18866;          /* akcent trzeciorzędny (tagi, obwódki karty przepisu) — średnia jasność, czytelny na jasnym i ciemnym tle bez zmian */
	--md-white: #ffffff;        /* tekst na kolorowych/ciemnych tłach (np. podpis na zdjęciu) — CELOWO takie samo w obu motywach */
	--md-border: #e3ddd3;
	--md-scrollbar-thumb: #f0ece5; /* jaśniejszy niż --md-border, dla dyskretnego paska przewijania składników */

	/* Accent colour for TEXT and for backgrounds behind white text.
	   --md-tan (#c18866) has only ~2.8:1 contrast on the cream/blue/white
	   backgrounds — WCAG AA needs 4.5:1 for text — so it stays for
	   borders, underlines and decoration only. --md-tan-text is a darker
	   shade of the same hue (≥ 4.9:1 on cream, pale blue and white); in
	   dark mode it switches back to --md-tan, which is ≥ 4.9:1 on the
	   dark backgrounds. --md-tan-fill: background under white text
	   (5.6:1), the same in both modes. */
	--md-tan-text: #945a37;
	--md-tan-fill: #945a37;
	/* Ingredients (tags) tiles: a fresh sage green, so they read apart
	   from the blue "Przepisy na:" category tiles. Icon colour ≥ 4.5:1
	   on the background in both modes. */
	--md-sage-bg: #ebf2e3;
	--md-sage-ink: #4b6630;
	/* Thin divider on coloured bands (breadcrumbs). */
	--md-hairline: rgba(56, 60, 80, 0.14);
	/* "Sezon na:" strip background: neutral grey, not the blue of the
	   header bands. Dark mode: the card surface. */
	--md-season-bg: #efefef;
	--md-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23383c50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	/* Osobne tokeny "powierzchni" (tło strony / tło kart) i koloru hover
	   linku — w przeciwieństwie do --md-cream/--md-near-black/--md-white
	   wyżej, TE mają się różnić między jasnym a ciemnym motywem (patrz
	   [data-theme="dark"] niżej). Rozdzielenie było konieczne, bo
	   --md-cream/--md-near-black pełnią PODWÓJNĄ rolę w arkuszu: są też
	   używane jako stały kolor tekstu na kolorowych przyciskach, który
	   nie powinien się zmieniać z motywem.
	   --md-surface: tło kart (.recipe-card, .jetpack-recipe, .author-bio...).
	   --md-page-bg: tło całej strony (<body>).
	   --md-link-hover: kolor linku po najechaniu/kliknięciu. */
	--md-surface: var(--md-white);
	--md-spot-bg: #263446;       /* "Zyskuje popularność" band */
	--md-spot-ink: #f4f1ec;
	--md-spot-accent: #f2cf97;
	--md-page-bg: var(--md-cream);
	--md-link-hover: var(--md-near-black);
	--md-dropcap: var(--md-cream); /* wielka ozdobna litera w tle tytułu (.entry-header__dropcap) — ma być subtelna, ledwie widoczna na tle nagłówka */

	--md-font-heading: Lora, Georgia, "Times New Roman", serif;
	--md-font-body: "PT Serif", Georgia, "Times New Roman", serif;
	--md-font-label: Montserrat, "Segoe UI", Arial, sans-serif;
}

/* Ciemny motyw — włączany przełącznikiem w nagłówku (patrz
   assets/js/dark-mode.js), zapamiętywany w localStorage. Domyślnie
   (brak zapisanego wyboru) respektujemy preferencję systemową
   przeglądarki/systemu operacyjnego odwiedzającego. Nadpisujemy TYLKO
   tokeny, które mają się różnić między motywami (patrz komentarz przy
   :root wyżej) — --md-near-black/--md-cream/--md-white/--md-tan
   celowo zostają bez zmian, żeby kolorowe przyciski/akcenty wyglądały
   tak samo w obu motywach. --md-dropcap MUSI być osobnym tokenem, a
   nie literalnym --md-cream — jasnokremowa litera na ciemnogranatowym
   tle nagłówka (--md-pale-blue w trybie ciemnym) wyglądała krzykliwie
   zamiast subtelnie. rgba zamiast koloru na sztywno, żeby "wtapiała
   się" w tło niezależnie od dokładnego odcienia. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		/* Navy dark theme (owner's choice, 12.10.2026): a clear deep navy
		   instead of a washed-out blue-grey next to warm greys — blue and
		   the copper accent read as one deliberate pair, linked to the blue
		   header of the light theme. */
		--md-ink: #e9e7e2;
		--md-page-bg: #14181d;
		--md-surface: #1d232a;
		--md-pale-blue: #1a2836;
		--md-spot-bg: #2b3e53;
		--md-border: #313b46;
		--md-scrollbar-thumb: #313b46;
		--md-menu-bg: #22313f; /* open mega panel: lighter than the page, not near-black */
		--md-link-hover: var(--md-tan);
		--md-dropcap: rgba(255, 255, 255, 0.06);
		--md-tan-text: var(--md-tan);
		--md-hairline: rgba(255, 255, 255, 0.12);
		--md-season-bg: var(--md-surface);
		--md-sage-bg: #1a3028;
		--md-sage-ink: #a3d4b1;
		--md-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23e7e4dd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}

:root[data-theme="dark"] {
	/* Navy dark theme (owner's choice, 12.10.2026): a clear deep navy
	   instead of a washed-out blue-grey next to warm greys — blue and
	   the copper accent read as one deliberate pair, linked to the blue
	   header of the light theme. */
	--md-ink: #e9e7e2;
	--md-page-bg: #14181d;
	--md-surface: #1d232a;
	--md-pale-blue: #1a2836;
	--md-spot-bg: #2b3e53;
	--md-border: #313b46;
	--md-scrollbar-thumb: #313b46;
	--md-menu-bg: #22313f; /* open mega panel: lighter than the page, not near-black */
	--md-link-hover: var(--md-tan);
	--md-dropcap: rgba(255, 255, 255, 0.06);
	--md-tan-text: var(--md-tan);
	--md-hairline: rgba(255, 255, 255, 0.12);
	--md-season-bg: var(--md-surface);
	--md-sage-bg: #1a3028;
	--md-sage-ink: #a3d4b1;
	--md-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23e7e4dd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* {
	box-sizing: border-box;
}

/* ---------- dostępność: tekst tylko dla czytników ekranu ----------
 * Standardowy wzorzec z rdzenia WordPressa. Bez tej klasy elementy
 * takie jak <h2 class="screen-reader-text"> generowane przez
 * the_post_navigation()/komentarze rdzenia WP byłyby WIDOCZNE na
 * stronie zamiast ukryte tylko dla technologii wspomagających.
 */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background-color: var(--md-page-bg);
	color: var(--md-ink);
	display: block;
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	left: 8px;
	top: 8px;
	padding: 12px 18px;
	z-index: 100000;
	text-decoration: none;
	border-radius: 4px;
}

/* .entry-header::before niżej używa szerokości 100vw do pełnoszerokiego
   niebieskiego tła — w części przeglądarek 100vw liczy się razem z
   szerokością paska przewijania, więc jest odrobinę SZERSZE niż realnie
   widoczny obszar strony. Niezauważalne na szerokim ekranie, ale na
   wąskim (telefon) dawało kilkanaście pikseli poziomego przepełnienia,
   które obcinało tekst z prawej strony. overflow-x:hidden na html to
   standardowe, bezpieczne zabezpieczenie przed tym efektem. */
html {
	overflow-x: hidden;
}

body {
	margin: 0;
	background: var(--md-page-bg);
	color: var(--md-ink);
	font-family: var(--md-font-body);
	font-size: 17px;
	line-height: 1.6;
	transition: background-color 0.15s ease, color 0.15s ease;
}

a {
	color: var(--md-ink);
	text-decoration-color: var(--md-tan);
}

a:hover,
a:active {
	color: var(--md-link-hover);
}

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

/* Stare wpisy mają zdjęcia z podpisem owinięte w <figure> z DOSŁOWNYM
   "style="width: 1094px"" wpisanym wprost w HTML przez WordPressa
   (tak zapisywał podpisy stary motyw) — samo "img { max-width: 100% }"
   nie wystarczy, bo to KONTENER ma sztywną szerokość, nie zdjęcie. */
.wp-caption,
.wp-caption img,
figure {
	max-width: 100% !important;
	height: auto;
}

/* The browser's default figure margin (40px left and right) shifted a
   full-width captioned photo 40px to the right — past the content edge,
   on phones past the screen. Zero-specificity (:where) so the alignment
   rules (alignleft/alignright/aligncenter, block styles) still win. */
:where(figure, .wp-caption) {
	margin-left: 0;
	margin-right: 0;
}

:where(figure.aligncenter, .wp-caption.aligncenter) {
	margin-left: auto;
	margin-right: auto;
}

.wp-caption-text {
	font-size: 0.85rem;
	color: var(--md-ink);
	/* 0.8, not 0.7: 0.7 gave only 4.2–4.5:1 on the light backgrounds
	   (cream, white, the pale-blue notes box) — below WCAG AA 4.5:1.
	   0.8 is ≥ 5.4:1 on all of them. */
	opacity: 0.8;
	text-align: center;
	margin: 6px 0 0;
}

/* Filmy (YouTube/Instagram/Vimeo embed, albo wprost <video>) też
   potrafią mieć sztywną szerokość/wysokość w HTML — bez tego wychodzą
   poza swój kontener na wąskich ekranach. */
iframe,
video,
embed,
object {
	max-width: 100%;
}

h1, h2, h3 {
	font-family: var(--md-font-heading);
	font-weight: 700;
	color: var(--md-ink);
	line-height: 1.25;
	text-wrap: balance;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.4rem; }

h4, h5, h6 {
	font-family: var(--md-font-body);
	font-weight: 700;
	color: var(--md-ink);
}

blockquote {
	font-family: var(--md-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.2;
	background: var(--md-pale-blue);
	margin: 1.5em 0;
	padding: 1.2em 1.4em;
	border-radius: 4px;
}

/* ---------- kontener ----------
 * Wartości wzięte wprost z old-theme-julia-parent/style.css
 * (.u-container-width{max-width:1300px}, .u-container-sides-spacing —
 * boczny margines 70px, schodzący do ~35px poniżej 768px). Motyw
 * dziecięcy (old-theme/) NIE nadpisuje tych reguł (sprawdzone —
 * odpowiednie selektory tam są zakomentowane albo dotyczą tylko
 * Disqusa), więc to one faktycznie renderują się na żywej stronie. */
.site-content,
.site-header__inner,
.site-nav-bar__inner,
.site-footer {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 70px;
}

@media (max-width: 1024px) {
	.site-content,
	.site-header__inner,
	.site-nav-bar__inner,
	.site-footer {
		padding: 0 42px;
	}
}

@media (max-width: 768px) {
	.site-content,
	.site-header__inner,
	.site-nav-bar__inner,
	.site-footer {
		padding: 0 22px;
	}
}


/* ---------- header + navigation ----------
 * Like the old site: pale-blue header with the logo centred, the menu
 * on its own row below, and that row sticks to the top while scrolling
 * (.site-nav-bar is a sibling of <header>, see header.php).
 * Desktop: each top-level item opens ONE full-width panel with its
 * subcategories in columns (instead of the old one-line black bar with
 * nested flyouts) — same dark look, but readable. Mobile: "Menu" button
 * + accordion. All links are plain server-rendered HTML (SEO); no
 * headings inside the menu.
 * Behaviour: assets/js/navigation.js, toggle buttons: inc/navigation.php. */
:root {
	--md-menu-bg: var(--md-near-black);
	--md-menu-ink: var(--md-cream);
}

.site-header {
	background: var(--md-pale-blue);
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding-block: 34px 14px;
}

.site-branding {
	grid-column: 2;
	text-align: center;
}

.site-nav-bar {
	position: sticky;
	/* Below the WP admin bar when logged in. */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--md-pale-blue);
	/* Same hairline as under the breadcrumbs: the beige --md-border read
	   as a second, different-coloured line on the blue band. */
	border-bottom: 1px solid var(--md-hairline);
	transition: box-shadow 0.2s ease;
}

.site-nav-bar.is-stuck {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.site-nav-bar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.main-navigation {
	grid-column: 2;
}

.site-nav-bar__tools {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	/* Room before the last menu item on wide screens. */
	gap: 4px;
	padding-left: 24px;
}

.nav-missing-notice {
	grid-column: 2;
	padding-block: 14px;
}

.primary-menu,
.primary-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu a {
	color: var(--md-ink);
	text-decoration: none;
}

/* Single post: its primary category inside the open panel/accordion
   (inc/navigation.php) — underlined, so it does not rely on colour. */
.primary-menu .sub-menu .is-current-category > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Home item drawn by the theme (inc/navigation.php). */
.menu-home-icon {
	display: inline-block;
	vertical-align: -4px;
}

.menu-toggle,
.submenu-toggle,
.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--md-ink);
	font: inherit;
	cursor: pointer;
}

.search-toggle {
	width: 44px;
	height: 44px;
}

.search-toggle:hover,
.submenu-toggle:hover {
	color: var(--md-tan-text);
}

/* "+" that turns into "−" when the item is open. */
.submenu-toggle {
	width: 28px;
	height: 28px;
	position: relative;
}

.submenu-toggle::before,
.submenu-toggle::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease;
}

.submenu-toggle::after {
	transform: rotate(90deg);
}

.is-open > .submenu-toggle::after {
	transform: rotate(0deg);
}

/* Search form (searchform.php) — used in the header panel, on the
   search results page and in the sidebar. */
.search-form {
	display: flex;
	gap: 8px;
}

.search-form .search-field {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--md-border);
	border-radius: 4px;
	background: var(--md-surface);
	color: var(--md-ink);
	font: inherit;
}

.search-form .search-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 4px;
	background: var(--md-near-black);
	color: var(--md-cream);
	font-family: var(--md-font-label);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Header search: a panel under the bar with one large underlined
   field — light in light mode, dark in dark mode (page surface
   tokens). The magnifier turns into an X while it is open (header.php,
   navigation.js). */
.search-toggle__close,
.search-toggle[aria-expanded="true"] .search-toggle__open {
	display: none;
}

.search-toggle[aria-expanded="true"] .search-toggle__close {
	display: block;
}

.site-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--md-surface);
	border-top: 1px solid var(--md-border);
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
	animation: md-menu-in 0.18s ease-out;
}

.site-search__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 22px 32px;
}

.site-search .search-form {
	gap: 16px;
	align-items: flex-end;
}

.site-search .search-field {
	padding: 8px 0;
	border: 0;
	border-bottom: 2px solid var(--md-border);
	border-radius: 0;
	background: transparent;
	color: var(--md-ink);
	font-family: var(--md-font-heading);
	font-size: 1.25rem;
}

.site-search .search-field::placeholder {
	color: var(--md-ink);
	opacity: 0.55;
}

.site-search .search-field:focus {
	outline: none;
	border-bottom-color: var(--md-ink);
}

.site-search .search-submit {
	background: var(--md-tan-fill);
	color: var(--md-white);
}

@media (max-width: 600px) {
	.site-search .search-field {
		font-size: 1.05rem;
	}

	.site-search .search-submit span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
}

@keyframes md-menu-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* ----- desktop ----- */
@media (min-width: 1200px) {
	.menu-toggle {
		display: none;
	}

	.primary-menu {
		display: flex;
		justify-content: center;
		gap: 8px 40px;
	}

	.primary-menu > li {
		display: flex;
		align-items: center;
	}

	.primary-menu > li > a {
		display: block;
		padding: 18px 0 16px;
		font-family: var(--md-font-label);
		font-weight: 600;
		font-size: 0.86rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		position: relative;
	}

	/* Narrower desktops: tighter spacing so the row always fits. */
	@media (max-width: 1365px) {
		.primary-menu {
			column-gap: 26px;
		}

		.primary-menu > li > a {
			letter-spacing: 0.08em;
		}
	}

	/* Bar above the active/hovered/open item — as on the old site, but
	   drawn just above the label (not at the very top edge of the bar,
	   where it looked detached from the word). */
	.primary-menu > li > a::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 6px;
		height: 3px;
		background: var(--md-ink);
		transform: scaleX(0);
		transition: transform 0.2s ease;
	}

	.primary-menu > li > a:hover::before,
	.primary-menu > li.is-open > a::before,
	.primary-menu > .current-menu-item > a::before,
	.primary-menu > .current-menu-ancestor > a::before,
	.primary-menu > .current-menu-parent > a::before,
	.primary-menu > .is-current-category > a::before {
		transform: scaleX(1);
	}

	/* Mega panel: full width of the sticky bar (the <li> is static, so
	   the bar is the containing block), subcategories in columns. An
	   item with its own children (e.g. Ciasta → Babki, Bezy…) keeps its
	   list together in one column. */
	.primary-menu > li > .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: 32px max(22px, calc((100% - 1160px) / 2)) 36px;
		background: var(--md-menu-bg);
		columns: 4 200px;
		column-gap: 48px;
		box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
	}

	.primary-menu > li.is-open > .sub-menu {
		display: block;
		animation: md-menu-in 0.18s ease-out;
	}

	/* Hover: with JS after a short pause (hover intent, .is-hovered
	   from navigation.js), so passing over the menu does not flash a
	   panel; without JS plain :hover. */
	@media (hover: hover) {
		html:not(.has-nav-js) .primary-menu > li:hover > .sub-menu,
		.primary-menu > li.is-hovered > .sub-menu {
			display: block;
		}
	}

	/* While the search form is open, hover must not pop a mega panel
	   underneath it (navigation.js sets .is-search-open; clicking "+"
	   closes the search first). */
	.site-nav-bar.is-search-open .primary-menu > li:not(.is-open):hover > .sub-menu,
	.site-nav-bar.is-search-open .primary-menu > li:not(.is-open).is-hovered > .sub-menu {
		display: none;
	}

	/* Without JS, keyboard users open the panel by tabbing into it. */
	html:not(.has-nav-js) .primary-menu > li:focus-within > .sub-menu {
		display: block;
	}

	.primary-menu > li > .sub-menu > li {
		break-inside: avoid;
		padding-bottom: 16px;
	}

	.primary-menu .sub-menu a {
		color: var(--md-menu-ink);
		font-family: var(--md-font-label);
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.primary-menu .sub-menu a:hover,
	.primary-menu .sub-menu .current-menu-item > a {
		color: var(--md-tan);
	}

	/* Single post: its primary category in the open panel
	   (inc/navigation.php); underline for all widths further up. */
	.primary-menu .sub-menu .is-current-category > a {
		color: var(--md-tan-text);
	}

	.primary-menu .sub-menu .sub-menu {
		margin-top: 10px;
		padding-left: 12px;
		border-left: 1px solid rgba(255, 255, 255, 0.15);
	}

	.primary-menu .sub-menu .sub-menu li + li {
		margin-top: 8px;
	}

	.primary-menu .sub-menu .sub-menu a {
		font-family: var(--md-font-body);
		font-size: 0.95rem;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		opacity: 0.85;
	}
}

@keyframes md-menu-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.primary-menu > li.is-open > .sub-menu {
		animation: none;
	}
}

/* ----- mobile / tablet (below 1200 px) -----
   The full desktop row (9 items + search) needs ~1100 px; at 1024 px it
   overflowed the bar and pushed the page wider than the screen, so the
   compact "Menu" layout is used up to 1199 px. */
@media (max-width: 1199px) {
	.site-header__inner {
		padding-block: 20px 10px;
	}

	.site-nav-bar__inner {
		grid-template-columns: 1fr auto;
	}

	.main-navigation {
		grid-column: 1;
	}

	.site-nav-bar__tools {
		grid-column: 2;
	}

	.menu-toggle {
		gap: 10px;
		min-height: 48px;
		font-family: var(--md-font-label);
		font-weight: 600;
		font-size: 0.86rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	/* Hamburger drawn in CSS (three lines → X when open). */
	.menu-toggle__icon,
	.menu-toggle__icon::before,
	.menu-toggle__icon::after {
		display: block;
		width: 20px;
		height: 2px;
		background: currentColor;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.menu-toggle__icon {
		position: relative;
	}

	.menu-toggle__icon::before,
	.menu-toggle__icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.menu-toggle__icon::before {
		top: -6px;
	}

	.menu-toggle__icon::after {
		top: 6px;
	}

	.main-navigation.is-open .menu-toggle__icon {
		background: transparent;
	}

	.main-navigation.is-open .menu-toggle__icon::before {
		transform: translateY(6px) rotate(45deg);
	}

	.main-navigation.is-open .menu-toggle__icon::after {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* Without JS the menu is simply shown expanded (links stay usable). */
	html:not(.has-nav-js) .menu-toggle {
		display: none;
	}

	.has-nav-js .primary-menu {
		display: none;
	}

	.primary-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		padding: 8px 22px 20px;
		background: var(--md-surface);
		box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15);
	}

	html:not(.has-nav-js) .primary-menu {
		position: static;
		box-shadow: none;
		background: none;
	}

	.has-nav-js .main-navigation.is-open .primary-menu {
		display: block;
	}

	.primary-menu > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--md-border);
	}

	.primary-menu > li > a {
		flex: 1;
		padding: 14px 0;
		font-family: var(--md-font-label);
		font-weight: 600;
		font-size: 0.9rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.primary-menu > li > .submenu-toggle {
		width: 44px;
		height: 44px;
	}

	.primary-menu > li > .sub-menu {
		flex-basis: 100%;
		padding: 0 0 14px 14px;
	}

	.has-nav-js .primary-menu > li:not(.is-open) > .sub-menu {
		display: none;
	}

	.primary-menu .sub-menu a {
		display: block;
		padding: 8px 0;
		font-size: 1rem;
	}

	.primary-menu .sub-menu .sub-menu {
		padding-left: 14px;
		border-left: 1px solid var(--md-border);
	}

	.primary-menu .current-menu-item > a,
	.primary-menu .is-current-category > a {
		color: var(--md-tan-text);
	}
}

/* Przełącznik jasny/ciemny motyw — patrz assets/js/dark-mode.js.
   Dwie nakładające się ikony (słońce/księżyc), pokazujemy tylko
   właściwą wg [data-theme] na <html> — ta sama logika co tokeny
   kolorów w :root wyżej (preferencja systemowa jako domyślna, atrybut
   nadpisuje po ręcznym kliknięciu). */
/* Right end of the menu bar (.site-nav-bar__tools): the search icon, then
   the light/dark switch last. The switch is a round button; the search
   stays a plain icon. Icons are about the same size as the hamburger on
   the left (≈20 px glyphs) and everything sits on one centre line. */
.theme-toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--md-border);
	border-radius: 50%;
	background: var(--md-surface);
	color: var(--md-ink);
	cursor: pointer;
}

.theme-toggle:hover {
	border-color: var(--md-tan);
	color: var(--md-tan-text);
}

.theme-toggle__icon {
	width: 22px;
	height: 22px;
}

.site-nav-bar__tools .search-toggle svg {
	width: 22px;
	height: 22px;
}

/* Phones: slightly smaller circle and icon, no extra gap. */
@media (max-width: 768px) {
	.theme-toggle {
		width: 36px;
		height: 36px;
	}

	.theme-toggle__icon {
		width: 20px;
		height: 20px;
	}

	.site-nav-bar__tools {
		gap: 2px;
	}
}

/* Dark mode switched on by the device: the toggle pulses softly (a ring
   that spreads and fades, three times) so the visitor sees they can go
   back to light. assets/js/dark-mode.js adds the class. */
.theme-toggle--hint {
	animation: md-toggle-hint 2.4s ease-out 3;
}

@keyframes md-toggle-hint {
	0% {
		box-shadow: 0 0 0 0 var(--md-tan);
	}
	70%,
	100% {
		box-shadow: 0 0 0 12px transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.theme-toggle--hint {
		animation: none;
		box-shadow: 0 0 0 3px var(--md-tan);
	}
}

.theme-toggle__icon--moon {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle__icon--sun {
		display: none;
	}

	:root:not([data-theme="light"]) .theme-toggle__icon--moon {
		display: block;
	}
}

.site-title {
	margin: 0;
	font-family: var(--md-font-heading);
	font-weight: 700;
	font-size: 2.4rem;
}

.site-title a {
	color: var(--md-ink);
	text-decoration: none;
}

.site-description {
	margin: 2px 0 0;
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--md-tan-text);
}

.custom-logo {
	max-height: 90px;
	width: auto;
}

/* Dark mode logo (inc/logo.php): the uploaded light version if there is
   one; otherwise the normal logo, unchanged (no CSS filter — it would
   recolour the round stamp too, which must stay as it is). */
.custom-logo--dark {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .custom-logo--light {
		display: none;
	}

	:root:not([data-theme="light"]) .custom-logo--dark {
		display: block;
	}
}

:root[data-theme="dark"] .custom-logo--light {
	display: none;
}

:root[data-theme="dark"] .custom-logo--dark {
	display: block;
}




/* "No menu — assign one" hint from header.php/footer.php — rendered
   ONLY for a logged-in administrator when no menu is assigned to the
   location. Deliberately low-key so it doesn't pass for real
   navigation. */
.nav-missing-notice {
	margin: 0;
	font-family: var(--md-font-label);
	font-size: 0.78rem;
}

.nav-missing-notice a {
	color: var(--md-tan-text);
}

/* Links to the parts of a page split with the Page Break block
   (wp_link_pages() in page.php). */
.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 1.5em 0;
	font-family: var(--md-font-label);
}

/* Legacy [row]/[col size="N"] shortcodes (inc/legacy-shortcodes.php) —
   12-column grid as in the old PixCodes plugin; columns stack on
   narrow screens. */
.md-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
	margin: 0 0 1.3em;
}

.md-col {
	flex: 1 1 100%;
	min-width: 0;
}

@media (min-width: 700px) {
	.md-col {
		flex: 0 1 calc(100% * var(--md-col-size, 12) / 12 - 40px);
	}
}

/* Search results page (search.php): form under the title, a bit
   wider than the description text. */
.archive-search {
	max-width: 560px;
	margin-top: 16px;
}

.listing-empty {
	font-size: 1.1rem;
	padding: 20px 0 60px;
}

.search-form .search-submit:focus-visible,
.search-form .search-field:focus-visible {
	outline: 3px solid var(--md-tan-text);
	outline-offset: 2px;
}

/* Header panel: the field's underline turning solid is the focus
   indicator there (a ring around an underlined field looked broken). */
.site-search .search-field:focus-visible {
	outline: none;
}

/* Narrow sidebar: icon-only button (name stays for screen readers) so
   the field keeps enough room. */
.widget-area .search-submit span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* ---------- pagination ----------
 * Posts (inc/pagination.php) and comment pages share the look: round
 * 48 px buttons with 8 px gaps (comfortable tap targets, nothing "too
 * close together" for Search Console), current page filled, visible
 * focus ring. Narrow columns: see "Compact pagination" below. */
.pagination,
.comments-pagination {
	margin: 8px 0 60px;
}

.pagination .nav-links,
.comments-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.page-numbers {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 48px;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--md-border);
	border-radius: 999px;
	background: var(--md-surface);
	color: var(--md-ink);
	font-family: var(--md-font-label);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

a.page-numbers:hover {
	border-color: var(--md-ink);
}

a.page-numbers:focus-visible {
	outline: 3px solid var(--md-tan);
	outline-offset: 2px;
}

.page-numbers.current {
	background: var(--md-ink);
	border-color: var(--md-ink);
	color: var(--md-page-bg);
}

.page-numbers.dots {
	min-width: 24px;
	padding: 0;
	border: 0;
	background: none;
}

.page-numbers.prev,
.page-numbers.next {
	padding: 0 20px;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pagination__arrow {
	flex: none;
}

/* Compact pagination — driven by the width of the pagination itself
   (container query), not the screen: next to the sidebar on a 1024 px
   laptop the column is as narrow as a phone. Previous/Next become
   round arrow buttons (their text stays for screen readers) on a second
   row below the numbers, so nothing overflows the page. */
.pagination,
.comments-pagination {
	container-type: inline-size;
}

@container (max-width: 760px) {
	.nav-links {
		gap: 10px 6px;
	}

	.page-numbers.dots {
		min-width: 18px;
	}

	/* Line break in the flex row: numbers first, arrows below. */
	.nav-links::after {
		content: "";
		order: 1;
		flex-basis: 100%;
		height: 0;
	}

	.page-numbers.prev,
	.page-numbers.next {
		order: 2;
		width: 48px;
		padding: 0;
	}

	.page-numbers.prev {
		margin-right: 10px;
	}

	.page-numbers.prev span,
	.page-numbers.next span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Very narrow (below ~320 px of usable width): slightly smaller
   buttons so the numbers still fit on one row. 40 px stays well above
   the WCAG 2.5.8 minimum of 24 px. */
@container (max-width: 300px) {
	.page-numbers {
		min-width: 40px;
		height: 40px;
		padding: 0 10px;
	}

	.page-numbers.prev,
	.page-numbers.next {
		width: 40px;
	}

	.nav-links {
		gap: 10px 4px;
	}
}

/* ---------- lista wpisów / archiwum ---------- */
.archive-header {
	padding: 40px 0 10px;
}

.archive-title {
	font-size: 2.1rem;
}

.archive-description {
	color: var(--md-ink);
	opacity: 0.75;
	max-width: 65ch;
}

/* Auto intro: "Najczęściej czytane" / "Zobacz też" each on own line. */
.archive-description p {
	margin: 0 0 0.6em;
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: 32px;
	padding: 20px 0 60px;
}

.post-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.post-card__link {
	text-decoration: none;
	color: inherit;
}

.post-card__thumbnail {
	/* 4:5 — still portrait like the blog's 2:3 food photos, but shorter
	   than 3:4 so more cards fit on screen; square would crop a third of
	   each vertical photo. */
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 6px;
	background: var(--md-pale-blue);
}

.post-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__title {
	margin: 4px 0 0;
	font-size: 1.2rem;
}

/* Card from template-parts/post-card.php (blog, archives): image and
   title are separate links (not one <a> wrapping everything), so the
   image link must be a block and the title link must look like a
   title, not a link. */
a.post-card__thumbnail {
	display: block;
}

.post-card__title a {
	color: var(--md-ink);
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--md-tan-text);
}

/* Card hover — like the old site: the photo fades slightly and the
   post's first letter appears over it in the brand dropcap style (same
   idea as .entry-header__dropcap), plus a gentle zoom. The letter is
   CSS generated content (data-letter), so it is not page text for
   Google or screen readers. Only transform/opacity are animated — no
   layout shift (CLS) and cheap for the GPU. */
.post-card__thumbnail {
	position: relative;
	display: block;
}

.post-card__thumbnail img {
	transition: transform 0.4s ease, opacity 0.3s ease;
}

.post-card__thumbnail::after {
	content: attr(data-letter);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--md-font-heading);
	font-weight: 700;
	font-size: clamp(6rem, 14vw, 11rem);
	line-height: 1;
	color: var(--md-white);
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.post-card:hover .post-card__thumbnail img,
.post-card:focus-within .post-card__thumbnail img {
	transform: scale(1.04);
	opacity: 0.75;
}

.post-card:hover .post-card__thumbnail::after,
.post-card:focus-within .post-card__thumbnail::after {
	opacity: 0.9;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.post-card__thumbnail img,
	.post-card__thumbnail::after {
		transition: none;
	}

	.post-card:hover .post-card__thumbnail img,
	.post-card:focus-within .post-card__thumbnail img {
		transform: none;
	}
}

/* Category above the title — like .c-card__meta on the old site. */
.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 6px;
	font-family: var(--md-font-label);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--md-ink);
}

.post-card__category {
	color: var(--md-tan-text);
	text-decoration: none;
	font-weight: 600;
}

/* Blog and archives (template-parts/post-listing.php): the grid next
   to the sidebar has less room than a full-width one — a smaller
   minimum so a typical laptop fits 3 columns, as on the old site. */
.recipe-section--listing {
	margin-top: 0;
}

.recipe-section--listing .archive-header {
	padding-top: 0;
	margin-bottom: 28px;
}

.recipe-section--listing .post-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	padding-top: 0;
}


/* ---------- pojedynczy wpis ---------- */
/* Niebieski pasek nagłówka to na starej stronie JEDEN wiersz z samym
   tekstem (kategoria, ogromna litera w tle, tytuł, autor/data) — bez
   zdjęcia, bez przycisków (te są niżej, w białej sekcji, razem z
   treścią — patrz .entry-header__media i .entry-actions dalej).
   Pastelowoniebieskie tło odtwarza .u-header-background ze starego
   motywu (patrz old-theme-julia-parent/style.css) — rozciąga się na
   całą szerokość okna (nie tylko kontenera), stąd pseudoelement
   ::before z techniką 100vw zamiast zwykłego background na .entry-header
   samym. */
/* Bez max-width/margin:auto — z tym nagłówek był węższy i wyśrodkowany
   OSOBNO od .entry-content pod nim (które wypełnia całą szerokość
   .content-area), więc tytuł i treść miały różne lewe krawędzie.
   Oba mają teraz wypełniać całą szerokość sekcji, bez własnej,
   dodatkowej granicy. */
.entry-header {
	position: relative;
	z-index: 0;
	/* Keep the huge background letter inside the blue band: clip top and
	   bottom only (the -100vw sides leave the full-bleed ::before
	   background untouched). Without this the letter poked up into the
	   breadcrumbs and down into the content. */
	clip-path: inset(0 -100vw);
	/* Ten dolny odstęp jest CAŁYM pustym miejscem pod tekstem po lewej
	   (zdjęcie jest tylko po prawej, więc nie "wypełnia" tego miejsca)
	   — 140px dawało wielką, pustą niebieską przerwę. Zmniejszone razem
	   z overlapem zdjęcia niżej, żeby dalej wyraźnie wchodziło na
	   niebieskie tło, ale bez zostawiania tyle pustki pod tytułem. */
	padding: 40px 0 50px;
	text-align: left;
}

.entry-header::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--md-pale-blue);
	z-index: -1;
}

/* Kontener tylko dla kategorii + litery w tle + tytułu — CELOWO bez
   meta/przycisków, bo to jedyny sposób, żeby ogromna, bezwzględnie
   pozycjonowana litera "wiedziała", gdzie się kończy tytuł, i nie
   nachodziła na wiersz autor/data pod spodem (co się działo, gdy
   dropcap był pozycjonowany względem całego nagłówka). */
.entry-header__title-row {
	position: relative;
	max-width: 900px;
}

/* Kategoria i tytuł muszą rysować się NAD ozdobną literą — bez tego
   pozycjonowana bezwzględnie litera (mimo że jest pierwsza w
   znaczniku) przykryłaby je, bo pozycjonowane elementy domyślnie
   malują się nad zwykłymi. */
.entry-header__title-row > *:not(.entry-header__dropcap) {
	position: relative;
	z-index: 1;
}

/* Ozdobna wielka litera w tle tytułu — odtworzenie .header-dropcap ze
   starego motywu: ta sama rodzina fontu i kolor (kremowy na
   pastelowoniebieskim, stąd niski kontrast — ma być subtelna, nie
   krzycząca), i CELOWO ten sam rozmiar co tytuł — u nas była dużo
   mniejsza (6rem), co czytało się jako mały, zgubiony akcent zamiast
   dużej litery w tle pierwszej linijki. top:0 (nie bottom:0 jak w
   oryginalnym, zagnieżdżonym inaczej znaczniku starej strony), żeby
   nachodziła na GÓRĘ tytułu, tam gdzie widać ją na starej stronie. */
/* Naprawdę WIELKA (nie subtelny mały akcent) i przyklejona do lewej
   krawędzi kontenera (left:0 — bez wcięcia, jakie ma tytuł dzięki
   swojemu naturalnemu box-model). Rozmiar mniej więcej dwa razy
   większy niż sam tytuł, tak jak na starej stronie. */
.entry-header__dropcap {
	position: absolute;
	/* Ujemny odstęp od lewej — CELOWO w innym miejscu niż lewa krawędź
	   tytułu, nie wyrównana z nim. */
	left: -0.08em;
	top: -0.22em;
	font-family: var(--md-font-heading);
	font-weight: 700;
	font-size: 13rem;
	line-height: 1;
	color: var(--md-dropcap);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

@media (min-width: 768px) {
	.entry-header__dropcap {
		font-size: 17rem;
	}
}

@media (min-width: 1024px) {
	.entry-header__dropcap {
		font-size: 21rem;
	}
}

@media (min-width: 1360px) {
	.entry-header__dropcap {
		font-size: 26rem;
	}
}

/* Ścieżka okruszkowa (Strona główna > Przepisy > kategoria > tytuł) —
   patrz inc/breadcrumbs.php. Własny pasek nad niebieską sekcją
   tytułową, oddzielony od nagłówka strony i od tytułu wpisu subtelną
   linią, nie samym marginesem — inaczej "sklejał się" z paskiem
   nawigacji nad nim. */
/* Breadcrumbs sit on the same pale-blue band as the nav bar above and
   the entry header below (full-bleed background, same 100vw technique
   as .entry-header::before) — a cream strip between two blue bands
   looked like a gap. */
.site-breadcrumbs {
	position: relative;
	z-index: 0;
	display: block;
	max-width: var(--md-content-width, 1160px);
	margin: 0 auto;
	/* Own row, separated from the entry header by a hairline: on the
	   shared blue band it otherwise ran straight into the title area and
	   the large background letter. */
	padding: 16px 0 15px;
}

/* Background and divider both run the full window width. The
   background reaches 2px into the entry header below: two separately
   drawn full-width bands could leave a 1px sub-pixel seam of page
   colour between them, which Chrome showed as a second, lighter line
   next to the divider. */
.site-breadcrumbs::before,
.site-breadcrumbs::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
}

.site-breadcrumbs::after {
	bottom: 0;
	height: 1px;
	background: var(--md-hairline);
}

.site-breadcrumbs::before {
	top: 0;
	bottom: -2px;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--md-pale-blue);
	z-index: -1;
}

.site-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.site-breadcrumbs a,
.site-breadcrumbs span {
	font-family: var(--md-font-label);
	font-size: 0.78rem;
}

.site-breadcrumbs a {
	color: var(--md-ink);
	opacity: 0.6;
	text-decoration: none;
}

.site-breadcrumbs a:hover {
	opacity: 1;
	color: var(--md-tan-text);
}

.site-breadcrumbs span[aria-current] {
	color: var(--md-ink);
	opacity: 0.85;
}

.site-breadcrumbs__sep {
	width: 12px;
	height: 12px;
	/* Was --md-border (beige) — almost invisible on the blue band. */
	color: var(--md-ink);
	opacity: 0.45;
	flex: none;
}

/* Czarna, kwadratowa plakietka — tak jak na starej stronie (nie
   zaokrąglona, nie w kolorze akcentu). */
.entry-category a {
	display: inline-block;
	font-family: var(--md-font-label);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--md-cream);
	background: var(--md-near-black);
	padding: 8px 16px;
	border-radius: 2px;
	text-decoration: none;
}

/* Rozmiar tytułu wzięty wprost z .entry-title w starym motywie (te
   same 4 progi co dropcap powyżej — u nas tytuł miał jedną, dużo
   mniejszą wartość, przez co łamał się w zupełnie innym miejscu niż
   na starej stronie). */
.entry-title {
	font-size: 2.4rem;
	margin: 14px 0 16px;
}

@media (min-width: 768px) {
	.entry-title {
		font-size: 2.71rem;
	}
}

@media (min-width: 1024px) {
	.entry-title {
		font-size: 3.12rem;
	}
}

@media (min-width: 1360px) {
	.entry-title {
		font-size: 4.5rem;
	}
}

/* text-transform:uppercase + letter-spacing:.083em wzięte wprost z
   .header-meta w starym motywie — bez tego, mimo tego samego fontu
   (Montserrat), czytało się jako "inny font", bo brakowało wersalików
   i rozstrzelenia liter. */
.entry-meta {
	/* position+z-index: bez tego ta linijka (statyczna, poza
	   .entry-header__title-row) malowałaby się POD ogromną literą w
	   tle (pozycjonowane elementy zawsze rysują się nad zwykłymi,
	   niezależnie od kolejności w znaczniku). */
	position: relative;
	z-index: 1;
	margin-bottom: 20px;
	font-family: var(--md-font-label);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.083em;
	text-transform: uppercase;
	color: var(--md-ink);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Wzięte wprost z .mdbtns w starym motywie: małe, kwadratowe czarne
   tagi ciasno obok siebie (margin-right 4px) — nie duże czarne pigułki,
   jak było u nas wcześniej. */
.entry-actions {
	margin: 32px 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.entry-actions__button {
	font-family: var(--md-font-label);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--md-cream);
	background: var(--md-near-black);
	border: none;
	padding: 7px 10px;
	border-radius: 2px;
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.entry-actions__button:hover {
	background: var(--md-ink);
	color: var(--md-cream);
}

/* Dark mode: --md-ink is light there, so the hover above put light text
   on a light button. The accent instead (cream on it: 5.6:1). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .entry-actions__button:hover {
		background: var(--md-tan-fill);
	}
}

:root[data-theme="dark"] .entry-actions__button:hover {
	background: var(--md-tan-fill);
}

/* Zdjęcie leży w białej sekcji (.content-area), NIE w niebieskim
   nagłówku, i jest "opływane" przez tekst — na starej stronie opis
   zaczyna się OBOK zdjęcia (z lewej), nie pod nim. Stąd float, nie
   osobny wiersz nad treścią. Nadal wchodzi na niebieski nagłówek od
   góry ujemnym marginesem, tak jak tam. */
.entry-header__media {
	position: relative;
	float: right;
	width: 42%;
	max-width: 420px;
	margin: -120px 0 24px 34px;
	border-radius: 8px;
	overflow: hidden;
}

/* Bez wymuszonych proporcji/object-fit:cover — to przycinało zdjęcie.
   Ma być w pełni widoczne, w swoich naturalnych proporcjach. */
.entry-header__media img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 799px) {
	.entry-header__media {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 24px;
	}
}

/* Single posts: the photo is the first child of the article and floats
   right, so its top edge is level with the category label (40px = the
   header's top padding) for any title length. The header text and the
   content below wrap around it. The z-index paints it above the header's
   blue band (the header is a stacking context of its own). */
.entry-hero-image {
	position: relative;
	z-index: 1;
	float: right;
	width: 42%;
	max-width: 420px;
	margin: 40px 0 24px 34px;
	border-radius: 8px;
	overflow: hidden;
}

.entry-hero-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Narrow screens: no wrapping. The photo goes back under the title (the
   markup has it first, so the article becomes a column and the header is
   moved above it with `order`). */
@media (max-width: 799px) {
	.type-post {
		display: flex;
		flex-direction: column;
	}

	.type-post > * {
		min-width: 0;
		order: 3;
	}

	.type-post > .entry-header {
		order: 1;
	}

	.type-post > .entry-hero-image {
		order: 2;
		float: none;
		width: 100%;
		max-width: 100%;
		/* -40px: the photo overlaps the blue band, whose bottom padding
		   is larger than its top. 4px below: in a flex column margins do
		   not collapse, so this plus the actions row's own top margin
		   gives the gap above the buttons. */
		margin: -40px 0 4px;
	}
}

/* Pages (page.php): the decorative header letter is taller than the
   blue band and sticks out below it. On posts the author/date row and
   buttons sit there, so it doesn't show — on pages the content starts
   immediately and the letter (cream, same as the background) painted
   over the first lines. Lift the content above the header; the
   protruding part of the letter stays underneath, invisible. */
.type-page .content-area {
	position: relative;
	z-index: 1;
	padding-top: 30px;
}

/* Bez sztywnego max-width — o czytelnej szerokości kolumny decyduje już
   .content-area (a przez nią .site-content), nie druga, węższa
   granica nałożona tu na wierzch. */
.entry-content {
	font-size: 1.05rem;
}

.entry-content p {
	margin: 0 0 1.3em;
}

/* Stare wpisy mają te dwie klasy dosłownie zapisane w treści (autorka
   dodawała je ręcznie w edytorze): "intro" na pierwszym akapicie
   (większa czcionka) i "dropcap" na dużej literze zaczynającej drugi.
   Renderują się same w .entry-content — bez stylu wyglądałyby jak
   zwykły tekst, mimo że mają służyć jako wizualny akcent. */
/* 24px na sztywno — dokładna wartość z .intro w old-theme/style.css
   (nadpisuje responsywną skalę z parenta, bez własnej skali na
   szerokościach ekranu). */
.entry-content .intro,
.entry-content .is-style-intro {
	font-size: 24px;
}

.entry-content .dropcap {
	float: left;
	font-family: var(--md-font-heading);
	font-weight: 700;
	font-size: 3.6em;
	line-height: 0.8;
	padding: 4px 8px 0 0;
	color: var(--md-ink);
}

.entry-categories {
	clear: both;
	margin: 30px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Obwódka w kolorze karty przepisu (--md-tan), nie wypełnione tło —
   odróżnia kategorie (temat wpisu) od tagów niżej (--md-pale-blue,
   które na tym blogu są składnikami, nie tematem). */
.entry-categories a {
	font-family: var(--md-font-label);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--md-tan-text);
	background: transparent;
	border: 1px solid var(--md-tan);
	padding: 4px 12px;
	border-radius: 999px;
}

.entry-tags {
	clear: both;
	margin: 30px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Gdy nad tagami jest już blok kategorii, odstęp między dwoma
   rzędami plakietek ma być mniejszy niż odstęp od treści powyżej. */
.entry-categories + .entry-tags {
	margin-top: 10px;
}

.entry-tags a {
	font-family: var(--md-font-label);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--md-ink);
	background: var(--md-pale-blue);
	padding: 5px 12px;
	border-radius: 999px;
}

/* ---------- karta przepisu + sidebar ----------
 * Karta na pełną szerokość .content-area (nie własny, węższy
 * max-width), z sidebarem z prawej — na razie kategorie jako
 * placeholder (sidebar.php), do wypełnienia właściwą zawartością
 * później. */
/* Ta sekcja celowo wychodzi poza wąską kolumnę .content-area (~1160px)
   do własnego, szerszego kontenera — karta przepisu + sidebar mają
   więcej oddechu niż reszta treści. Dwuwarstwowo, jak przy nagłówku:
   .recipe-section to "wyjście" na pełną szerokość okna (ta sama
   technika 100vw/margin co .entry-header::before), a
   .recipe-section__inner z powrotem wyśrodkowuje i ogranicza do
   1440px — sensownego pułapu na typowym szerokim laptopie/monitorze.
   Bez górnego ograniczenia siatka rozciągałaby się absurdalnie na
   4K/ultrawide, z bardzo długimi liniami tekstu w krokach. */
.recipe-section {
	clear: both;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.recipe-section__inner {
	max-width: 1440px;
	margin: 40px auto;
	padding: 0 70px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px 40px;
	align-items: start;
}

@media (max-width: 1024px) {
	.recipe-section__inner {
		padding: 0 42px;
	}
}

@media (max-width: 900px) {
	.recipe-section__inner {
		/* minmax(0, 1fr), not 1fr: a plain 1fr track can't shrink below
		   its content's minimum width, which pushed the page wider than
		   very narrow screens (< 320 px). */
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.recipe-section__inner {
		padding: 0 22px;
	}
}

.recipe-section .widget-area {
	display: flex;
	flex-direction: column;
	/* More breathing room between sidebar sections — as on the old site. */
	gap: 40px;
}

/* "Przyklejanie" sidebara — włączane w Ustawienia motywu (patrz
   moja_delicja_is_recipe_sidebar_sticky()). Ten sam wzorzec co przy
   składnikach w karcie przepisu: max-height + własny scroll, żeby
   sidebar dłuższy niż okno nie "gubił" dołu poniżej widoku. */
.widget-area--sticky {
	position: sticky;
	top: var(--md-sticky-top);
	max-height: calc(100vh - var(--md-sticky-top) - 20px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--md-scrollbar-thumb) transparent;
}

.widget-area--sticky::-webkit-scrollbar {
	width: 5px;
}

.widget-area--sticky::-webkit-scrollbar-track {
	background: transparent;
}

.widget-area--sticky::-webkit-scrollbar-thumb {
	background: var(--md-scrollbar-thumb);
	border-radius: 3px;
}

.widget-area--sticky::-webkit-scrollbar-thumb:hover {
	background: var(--md-border);
}

@media (max-width: 900px) {
	.widget-area--sticky {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

.recipe-section .widget-title {
	font-size: 1.1rem;
	margin: 0 0 12px;
}

.recipe-section .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.recipe-section .widget a {
	color: var(--md-ink);
	text-decoration: none;
}

.recipe-section .widget a:hover {
	color: var(--md-tan-text);
}

/* Category list in the automatic sidebar (inc/sidebars.php) — groups
   as on the old site ("Okazja:", "Desery"): group title, children with
   clear spacing below, deeper level prefixed with a dash ("- Babki").
   The current category's group is on top and the current item is
   underlined in the accent colour, as on the old site. Group titles
   are plain links in a <p>, not headings (SEO). */
.sidebar-categories {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.sidebar-categories .widget-title {
	margin: 0 0 16px;
	font-family: var(--md-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
}

.recipe-section .sidebar-categories__items {
	gap: 14px;
}

.recipe-section .sidebar-categories .children {
	margin-top: 14px;
	gap: 14px;
}

.sidebar-categories__items a {
	font-size: 1rem;
	line-height: 1.4;
}

/* Group title + expand/collapse chevron (inc/sidebars.php,
   assets/js/sidebar-categories.js) — the same chevron as the ingredient
   sections in the recipe card. */
.sidebar-categories__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 16px;
}

.sidebar-categories__head .widget-title {
	margin: 0;
}

.sidebar-categories__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-right: -12px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--md-tan-text);
	cursor: pointer;
}

.sidebar-categories__toggle:focus-visible {
	outline: 2px solid var(--md-tan-text);
	outline-offset: -4px;
}

.sidebar-categories__toggle-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.15s ease;
}

.sidebar-categories__toggle[aria-expanded="true"] .sidebar-categories__toggle-icon {
	transform: rotate(180deg);
}

/* Collapsed only when JavaScript runs (html.md-js is set in
   header.php); without it all groups stay expanded and the buttons,
   which could not work, are hidden. */
.md-js .sidebar-categories .sidebar-categories__items[data-collapsed] {
	display: none;
}

html:not(.md-js) .sidebar-categories__toggle {
	display: none;
}

/* Collapsed groups sit closer together. */
.md-js .sidebar-categories__head:has(+ [data-collapsed]) {
	margin-bottom: 0;
}

.sidebar-categories .children a::before {
	content: "- ";
}

.recipe-section .sidebar-categories .current-cat > a,
.recipe-section .sidebar-categories a[aria-current="page"] {
	color: var(--md-tan-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Category dropdown (listing sidebar) — full width, as on the old
   site. */
.sidebar-category-dropdown__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sidebar-category-dropdown__form .widget-title {
	flex: 1 1 100%;
	display: block;
	font-family: var(--md-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
}

.sidebar-category-dropdown__form select {
	flex: 1 1 auto;
	min-width: 0;
	/* Same 48 px height as the search field and buttons — the native
	   select was much lower on phones (each browser draws its own).
	   appearance:none + our own chevron so it looks the same everywhere. */
	min-height: 48px;
	padding: 10px 44px 10px 14px;
	border: 1px solid var(--md-border);
	border-radius: 4px;
	background-color: var(--md-surface);
	background-image: var(--md-select-arrow);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	color: var(--md-ink);
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.sidebar-category-dropdown__form select:focus-visible {
	outline: 3px solid var(--md-tan-text);
	outline-offset: 2px;
}

.sidebar-category-dropdown__submit {
	padding: 10px 16px;
	border: 1px solid var(--md-border);
	border-radius: 4px;
	background: var(--md-surface);
	color: var(--md-ink);
	font-family: var(--md-font-label);
	cursor: pointer;
}

/* "Przepisy na:" — siatka kategorii ze zdjęciem (inc/category-image-grid.php).
   Zdjęcie 480×192 (patrz add_image_size w functions.php) wypełnia całą
   szerokość sidebara. object-fit:cover + object-position:center gwarantuje
   wycentrowane kadrowanie niezależnie od faktycznej szerokości sidebara
   (samo przycięcie przy uploadzie nie wystarczało — przeglądarka skalowała
   już przycięty plik, więc drobne niedopasowanie szerokości kontenera
   "rozjeżdżało" kadr). Bez stałego ciemnego gradientu — podpis czytelny
   dzięki cieniowi tekstu, a przy hover całe zdjęcie przykrywa jasny,
   lekki overlay (jak na starym blogu), zamiast przyciemniania na stałe.
   Sidebar poniżej 900px staje się pełną szerokością treści (patrz
   .recipe-section__inner) — na wąskim ekranie to i tak często więcej niż
   480px, więc max-width na kafelku utrzymuje go w rozsądnym, czytelnym
   rozmiarze zamiast rozciągać (i rozmazywać) zdjęcie na całą szerokość
   telefonu. */
.category-image-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.category-image-grid__item {
	max-width: 380px;
	margin-inline: auto;
}

.category-image-grid__item a {
	position: relative;
	display: block;
	border-radius: 4px;
	overflow: hidden;
}

.category-image-grid__item a::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(74, 144, 194, 0.4);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.category-image-grid__item a:hover::before {
	opacity: 1;
}

.category-image-grid__item img {
	display: block;
	width: 100%;
	aspect-ratio: 480 / 192;
	object-fit: cover;
	object-position: center;
	transition: transform 0.2s ease;
}

.category-image-grid__item a:hover img {
	transform: scale(1.04);
}

/* Wyśrodkowany, większy napis zamiast małego w rogu — jedna linia,
   ucinana wielokropkiem (text-overflow: ellipsis), gdyby nazwa
   kategorii/tagu była zbyt długa na szerokość kafelka.
   text-transform:capitalize ujednolica wygląd niezależnie od tego, czy
   nazwa w bazie jest zapisana z małej litery (typowe dla tagów, np.
   "śliwki") czy z wielkiej (typowe dla kategorii). */
.category-image-grid__label {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	padding: 16px 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: capitalize;
	color: var(--md-white);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
	font-family: var(--md-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
}

/* "Sezon na:" — kalendarz sezonowości tagów/składników (patrz
   inc/seasonal-terms.php) — zwykłe linki-pigułki, bez zdjęć, w
   kolorze karty przepisu, żeby odróżnić od zwykłych tagów pod
   wpisem (--md-pale-blue) i od kategorii (obwódka --md-tan). */
.recipe-card {
	padding: 30px 34px;
	background: var(--md-surface);
	border: 1px solid var(--md-border);
	border-top: 4px solid var(--md-tan);
	border-radius: 8px;
}

.recipe-card__title {
	margin-top: 0;
}

.recipe-card__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin: 0 0 24px;
	padding: 14px 0;
	border-top: 1px solid var(--md-border);
	border-bottom: 1px solid var(--md-border);
	font-family: var(--md-font-label);
	font-size: 0.85rem;
}

.recipe-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.recipe-card__meta-item a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted var(--md-border);
}

.recipe-card__meta-item a:hover {
	color: var(--md-tan-text);
	border-bottom-color: var(--md-tan);
}

.recipe-card__meta-icon {
	width: 16px;
	height: 16px;
	color: var(--md-tan-text);
	flex: none;
}

/* "Tryb gotowania": the Wake Lock switch (assets/js/cook-mode.js).
   Hidden by the HTML "hidden" attribute (recipe-card.php), shown by the
   script only on phones/tablets whose browser supports it. */
.recipe-card__cook-mode {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--md-font-label);
	font-size: 0.85rem;
}

/* display:flex above would otherwise override the [hidden] attribute,
   showing the switch where the script never enabled it. */
.recipe-card__cook-mode[hidden] {
	display: none;
}

.recipe-card__cook-mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.recipe-card__cook-mode-toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.recipe-card__cook-mode-switch {
	position: relative;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: var(--md-border);
	flex: none;
	transition: background 0.15s ease;
}

.recipe-card__cook-mode-switch::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--md-surface);
	transition: transform 0.15s ease;
}

.recipe-card__cook-mode-toggle input:checked + .recipe-card__cook-mode-switch {
	background: var(--md-tan);
}

.recipe-card__cook-mode-toggle input:checked + .recipe-card__cook-mode-switch::before {
	transform: translateX(16px);
}

.recipe-card__cook-mode-toggle input:focus-visible + .recipe-card__cook-mode-switch {
	outline: 2px solid var(--md-ink);
	outline-offset: 2px;
}

.recipe-card__cook-mode-label {
	font-weight: 600;
	color: var(--md-ink);
}

.recipe-card__cook-mode-hint {
	color: var(--md-ink);
	/* 0.75: 5.2:1 on the white card (0.6 was 3.4:1, below WCAG AA).
	   Shown on phones too — that is where the switch is used; it wraps
	   below the switch when there is no room. */
	opacity: 0.75;
}

/* Krótki opis pod tytułem — odpowiednik .jetpack-recipe-description ze
   starego motywu (kursywa, przygaszony kolor). */
.recipe-card__description {
	font-style: italic;
	color: var(--md-ink);
	opacity: 0.8;
	margin: 0 0 24px;
}

/* Składniki z boku, kroki w szerszej kolumnie obok — tak jak na starej
   stronie. Poniżej pewnej szerokości kolumny spadają jedna pod drugą. */
.recipe-card__body {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
	gap: 12px 40px;
	align-items: start;
}

@media (max-width: 640px) {
	.recipe-card__body {
		/* minmax(0, 1fr), not 1fr: a 1fr track grows to its content's
		   minimum width — an old photo saved as 1094px wide made the
		   steps column (and the card) wider than the phone screen. */
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Sticky: na ekranach, gdzie składniki i kroki stoją obok siebie,
   składniki zostają widoczne w oknie, a przewija się tylko kolumna
   kroków (dłuższa) — top:20px zostawia mały odstęp od góry ekranu
   podczas przewijania. Na wąskim ekranie (kolumny jedna pod drugą)
   sticky byłby bez sensu, więc wyłączone w tym samym media query co
   przełączenie na jedną kolumnę wyżej. */
/* Gdy składników jest dużo i sama lista jest wyższa niż okno, samo
   position:sticky nie wystarcza — dół listy "znika" poniżej okna i nie
   da się do niego przescrollować niezależnie od reszty strony (trzeba
   by było przewinąć CAŁY przepis, żeby boks się "odkleił"). max-height
   ograniczone do wysokości okna + własny scroll wewnątrz rozwiązuje to:
   długa lista dostaje swój pasek przewijania i jest w pełni dostępna,
   nawet gdy jest przyklejona. */
.recipe-card__col--ingredients {
	align-self: start;
	position: sticky;
	/* Below the sticky menu bar (and the admin bar when logged in). */
	top: var(--md-sticky-top);
	max-height: calc(100vh - var(--md-sticky-top) - 20px);
	overflow-y: auto;
	/* Odstęp z prawej, żeby pasek przewijania nie "przyklejał się" od
	   razu do tekstu składników, tylko miał własny margines. */
	padding-right: 14px;
	/* Cienki, dyskretny scrollbar zamiast grubego domyślnego —
	   scrollbar-width/color dla Firefoksa, ::-webkit-* dla reszty.
	   Kolor jeszcze jaśniejszy niż linie pod składnikami (--md-border),
	   żeby był ledwie zauważalny, dopóki się go nie najedzie/nie
	   przewija. */
	scrollbar-width: thin;
	scrollbar-color: var(--md-scrollbar-thumb) transparent;
}

.recipe-card__col--ingredients::-webkit-scrollbar {
	width: 5px;
}

.recipe-card__col--ingredients::-webkit-scrollbar-track {
	background: transparent;
}

.recipe-card__col--ingredients::-webkit-scrollbar-thumb {
	background: var(--md-scrollbar-thumb);
	border-radius: 3px;
}

.recipe-card__col--ingredients::-webkit-scrollbar-thumb:hover {
	background: var(--md-border);
}

@media (max-width: 640px) {
	.recipe-card__col--ingredients {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

/* Przycisk "Drukuj przepis" — patrz assets/js/print-recipe.js i sekcja
   @media print niżej w tym pliku. */
/* Print + full screen buttons in one row above the title. */
.recipe-card__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
}

.recipe-card__print-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--md-border);
	border-radius: 4px;
	background: var(--md-surface);
	color: var(--md-ink);
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

.recipe-card__print-button:hover {
	border-color: var(--md-tan);
	color: var(--md-tan-text);
}

.recipe-card__print-button svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Elementy dodawane WYŁĄCZNIE do wydruku (okrągłe zdjęcie u góry, logo
   w stopce, duplikat nagłówka w kolumnie składników — patrz
   .recipe-card__print-intro i template-parts/recipe-card.php) — na
   ekranie niewidoczne. */
.recipe-card__print-header,
.recipe-card__print-footer,
.recipe-card__print-intro {
	display: none;
}

/* Mnożnik składników (1×/2×/3×) — patrz assets/js/ingredient-multiplier.js.
   Bez JS to po prostu statyczny tekst "Porcje: 1×", nic się nie psuje. */
.recipe-card__multiplier {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font-family: var(--md-font-label);
	font-size: 0.85rem;
}

.recipe-card__multiplier-label {
	color: var(--md-ink);
	opacity: 0.8; /* 0.7 was 4.4:1 on white (audit 0.18.61) */
}

.recipe-card__multiplier-buttons {
	display: flex;
	gap: 6px;
}

.recipe-card__multiplier-btn {
	min-width: 36px;
	padding: 5px 10px;
	border: 1px solid var(--md-border);
	border-radius: 999px;
	background: var(--md-surface);
	color: var(--md-ink);
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.recipe-card__multiplier-btn:hover {
	border-color: var(--md-tan);
}

.recipe-card__multiplier-btn.is-active {
	background: var(--md-tan-fill);
	border-color: var(--md-tan-fill);
	color: var(--md-white);
}

.recipe-card__heading {
	/* Same look for "Przygotowanie" (an h3) and the ingredient section
	   titles (summary elements, which get no heading styles by default). */
	font-family: var(--md-font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--md-ink);
	margin-top: 0;
	margin-bottom: 10px;
}

/* Zwijane sekcje składników (przydatne przy kilku sekcjach naraz, jak
   "Ciasto"/"Przyprawy"/"Dodatkowo") — natywny <details>/<summary>,
   bez JS. Własna strzałka zamiast domyślnego trójkąta przeglądarki,
   bo ten różni się wyglądem między przeglądarkami. */
.recipe-card__ingredient-section {
	margin-bottom: 28px;
}

.recipe-card__ingredient-section:last-child {
	margin-bottom: 0;
}

summary.recipe-card__heading {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	user-select: none;
}

summary.recipe-card__heading::-webkit-details-marker {
	display: none;
}

/* Ta sama, cienka rodzina ikon co przy poziomie trudności/czasie w
   .recipe-card__meta (SVG, cienki obrys), zamiast poprzedniego "rogu"
   z obramowania — spójniejsze i mniej toporne. */
.recipe-card__toggle-icon {
	width: 18px;
	height: 18px;
	flex: none;
	margin-left: auto;
	color: var(--md-tan-text);
	transition: transform 0.15s ease;
}

.recipe-card__ingredient-section[open] .recipe-card__toggle-icon {
	transform: rotate(180deg);
}

/* No background or side margins, so ingredients do not wrap early.
   No line under every ingredient (0.18.93: on phones the lines ate
   space); spacing alone separates them. Sans-serif (Montserrat, same
   as the meta row and buttons) instead of the main serif, as on the
   current site. */
.recipe-card__ingredients {
	list-style: none;
	font-family: var(--md-font-label);
	font-size: 0.92rem;
	padding-left: 0;
	margin: 0 0 16px;
}

/* Checkbox zamiast kropki — odhaczanie zużytych składników w trakcie
   gotowania. Cały wiersz (checkbox + label) jest klikalny, bo label ma
   for= wskazujące na checkbox. */
.recipe-card__ingredients li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 7px;
}

.recipe-card__ingredients li:last-child {
	margin-bottom: 0;
}

.recipe-card__ingredient-checkbox {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 0.15em;
	accent-color: var(--md-tan);
	cursor: pointer;
}

.recipe-card__ingredients label {
	cursor: pointer;
}

.recipe-card__ingredient-checkbox:checked + label {
	color: var(--md-ink);
	opacity: 0.5;
	text-decoration: line-through;
}

.recipe-card__steps {
	list-style: none;
	padding-left: 0;
	margin: 0 0 24px;
}

.recipe-card__step {
	position: relative;
	padding-left: 44px;
	margin-bottom: 22px;
	min-height: 30px;
}

/* Nagłówek-separator między dwiema grupami kroków (patrz
   \MojaDelicja\Recipe\Html::top_level_list_items_with_subheadings() —
   np. stary przepis Piklist z osobną listą kroków na "Polewa
   czekoladowa..."). Bez numeru/checkboxa, jak reszta kroków — to nie
   krok, tylko podpis kolejnej grupy. */
.recipe-card__step-subheading {
	list-style: none;
	margin: 0 0 12px;
	padding-top: 8px;
	border-top: 1px solid var(--md-border);
	font-family: var(--md-font-heading);
	font-weight: 700;
	color: var(--md-ink);
}

/* "Uwagi" — dopisek pod przepisem ze starych wpisów Piklist (meta_key
   "MD_note"), patrz inc/recipe/class-piklist-source.php. */
.recipe-card__notes {
	margin-bottom: 16px;
	padding: 12px 14px;
	background: var(--md-pale-blue);
	border-radius: 4px;
}

.recipe-card__notes-label {
	margin: 0 0 4px;
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--md-ink);
	opacity: 0.85; /* 0.7 was 4.2:1 on pale blue (audit 0.18.61) */
}

/* Zdjęcie na końcu przepisu (below_recipe_html, stare wpisy Piklist) —
   WordPress zapisywał przy takich zdjęciach sztywną szerokość wprost w
   HTML (atrybut width= na <img>, czasem też inline style="width:...px"
   na <figure> z podpisem), przez co potrafiło wylewać się poza kartę
   przepisu. max-width:100% na obu elementach (z !important na figure,
   bo inline style ma wyższy priorytet niż arkusz stylów) trzyma je w
   granicach karty niezależnie od zapisanej szerokości. */
.recipe-card__extra img {
	max-width: 100%;
	height: auto;
}

.recipe-card__extra figure {
	max-width: 100% !important;
	/* The browser's default figure margin (40px left/right) pushed the
	   full-width photo 40px to the right, out of the card. */
	margin-inline: 0;
}

/* Numerek to jednocześnie checkbox (ukryty pod spodem, patrz
   .recipe-card__step-checkbox) — klik oznacza krok jako zrobiony, żeby
   łatwo było śledzić, na którym kroku się aktualnie jest. Cienki obrys
   zamiast wypełnionego koła — subtelniej, zgodnie z resztą kropek/ikon
   na karcie. */
.recipe-card__step-checkbox {
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.recipe-card__step-number {
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid var(--md-tan);
	background: var(--md-surface);
	color: var(--md-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--md-font-label);
	font-weight: 600;
	font-size: 0.8rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.recipe-card__step-checkbox:checked + .recipe-card__step-number {
	background: var(--md-tan-fill);
	color: var(--md-white);
}

.recipe-card__step-checkbox:focus-visible + .recipe-card__step-number {
	outline: 2px solid var(--md-ink);
	outline-offset: 2px;
}

.recipe-card__step-checkbox:checked ~ .recipe-card__step-content {
	opacity: 0.5;
}

.recipe-card__step-image {
	display: block;
	width: 100%;
	max-width: 420px;
	border-radius: 6px;
	margin-top: 10px;
}

/* ---------- stare przepisy jako shortcode [recipe] ----------
 * Trzecie źródło danych przepisu (patrz CLAUDE.md, Shortcode_Source) —
 * odtworzone przez old-theme/ds_recipe_shortcode.php, gdy Jetpack był
 * wyłączony. Renderuje się samo, wprost wewnątrz .entry-content (stąd
 * single.php nie dokłada mu osobnej .recipe-card) — bez tych reguł
 * wyszłoby jako goły, niestylowany HTML. Wygląd dopasowany do
 * .recipe-card powyżej, żeby oba źródła przepisu wyglądały tak samo. */
.entry-content .jetpack-recipe {
	margin: 2em 0;
	padding: 30px 34px;
	background: var(--md-surface);
	border: 1px solid var(--md-border);
	border-top: 4px solid var(--md-tan);
	border-radius: 8px;
}

.entry-content .jetpack-recipe-title {
	font-family: var(--md-font-heading);
	/* Same size as when it was an h3 (now h2, audit 0.18.61). */
	font-size: 1.4rem;
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: 1em;
}

/* "Dodaj komentarz" / "Odpowiedz: …" — h2 (was h3, skipping a level),
   same size as before. */
.comment-reply-title {
	font-size: 1.4rem;
	line-height: 1.25;
	margin: 1em 0;
}

.entry-content .jetpack-recipe-meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0 0 24px;
	padding: 14px 0;
	border-top: 1px solid var(--md-border);
	border-bottom: 1px solid var(--md-border);
	font-family: var(--md-font-label);
	font-size: 0.85rem;
}

/* Składniki z boku, kroki w szerszej kolumnie obok — te same reguły
   siatki co .recipe-card__body powyżej, żeby układ był identyczny. */
.entry-content .jetpack-recipe-content {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
	gap: 12px 40px;
}

@media (max-width: 640px) {
	.entry-content .jetpack-recipe-content {
		grid-template-columns: 1fr;
	}
}

.entry-content .jetpack-recipe-ingredients-title,
.entry-content .jetpack-recipe-directions-title,
.entry-content .jetpack-recipe-notes-title {
	font-family: var(--md-font-heading);
	font-weight: 700;
	color: var(--md-ink);
	font-size: 1.15rem;
	margin-top: 0;
	margin-bottom: 10px;
}

.entry-content .jetpack-recipe-ingredients {
	align-self: start;
	margin: 0;
}

/* Bez tła i wcięcia listy — te same reguły co .recipe-card__ingredients
   (cienka linia pod składnikiem zamiast koloru, krój bezszeryfowy). */
.entry-content .jetpack-recipe-ingredients ul {
	list-style: none;
	font-family: var(--md-font-label);
	font-size: 0.92rem;
	padding-left: 0;
	margin: 0 0 16px;
}

.entry-content .jetpack-recipe-ingredients ul:last-child {
	margin-bottom: 0;
}

.entry-content .jetpack-recipe-ingredients li {
	border-bottom: 1px dotted var(--md-border);
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.entry-content .jetpack-recipe-ingredients li:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.entry-content .jetpack-recipe-directions {
	margin: 0;
}

/* Kroki jako numerowane koła — te same reguły co .recipe-card__step-number
   powyżej (licznik CSS zamiast prawdziwego checkboxa — tu, w przeciwieństwie
   do karty przepisu z bloku, nie da się dodać unikalnych ID na krok, bo to
   surowy HTML z shortcode'u), żeby stary shortcode [recipe] wyglądał tak
   samo jak karta przepisu z bloku (obrys, nie wypełnione koło). */
.entry-content .jetpack-recipe-directions ol {
	list-style: none;
	counter-reset: recipe-step;
	padding-left: 0;
	margin: 0 0 24px;
}

.entry-content .jetpack-recipe-directions li {
	counter-increment: recipe-step;
	position: relative;
	padding-left: 44px;
	margin-bottom: 22px;
	min-height: 30px;
}

.entry-content .jetpack-recipe-directions li::before {
	content: counter(recipe-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid var(--md-tan);
	background: var(--md-surface);
	color: var(--md-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--md-font-label);
	font-weight: 600;
	font-size: 0.8rem;
}

.entry-content .jetpack-recipe-description {
	font-family: var(--md-font-body);
	font-style: italic;
	opacity: 0.85;
}

.entry-content .jetpack-recipe-notes {
	font-family: var(--md-font-body);
	font-size: 0.9rem;
}

/* ---------- nawigacja między wpisami ---------- */
.post-navigation {
	margin-top: 50px;
	padding-top: 24px;
	border-top: 1px solid var(--md-border);
}

.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	max-width: 48%;
}

.post-navigation .nav-next {
	text-align: right;
	margin-left: auto;
}

.post-navigation .nav-links__label {
	display: block;
	font-family: var(--md-font-label);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--md-tan-text);
	margin-bottom: 4px;
}

.post-navigation .nav-title a {
	font-family: var(--md-font-heading);
	font-size: 1.05rem;
	color: var(--md-ink);
	text-decoration: none;
}

.post-navigation .nav-title a:hover {
	color: var(--md-tan-text);
}

/* ---------- o autorze ---------- */
.author-bio {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-top: 40px;
	padding: 24px;
	background: var(--md-surface);
	border: 1px solid var(--md-border);
	border-radius: 4px;
}

.author-bio__photo {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.author-bio__name {
	margin: 0 0 6px;
	font-family: var(--md-font-label);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.author-bio__description {
	margin: 0 0 10px;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--md-ink);
}

.author-bio__link {
	font-family: var(--md-font-label);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--md-tan-text);
	text-decoration: none;
}

.author-bio__link:hover {
	text-decoration: underline;
}

.author-bio__social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 10px;
}

.author-bio__social a {
	font-family: var(--md-font-label);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--md-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--md-border);
}

.author-bio__social a:hover {
	color: var(--md-tan-text);
	border-bottom-color: var(--md-tan);
}

@media (max-width: 480px) {
	.author-bio {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.author-bio__social {
		justify-content: center;
	}
}

/* ---------- sekcje bloków (Ustawienia motywu) ---------- */
/* Domyślne style bloków Gutenberga (biblioteka bloków WordPressa)
   dokładają blokom bocznym marginesy w poziomie (np. obrazkowi po
   40px z każdej strony) — sensowne w szerokiej treści wpisu, ale w
   wąskim sidebarze/stopce robi niepotrzebny, "wcięty" odstęp. Zerujemy
   go tylko na BEZPOŚREDNICH dzieciach .block-area — głębiej
   zagnieżdżone bloki (np. kolumny wewnątrz) zachowują własne, celowe
   odstępy. */
.block-area > * {
	margin-inline: 0;
}

.block-area--post-footer {
	margin-top: 40px;
}

/* ---------- powiązane przepisy ---------- */
.related-posts {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid var(--md-border);
}

.related-posts__title {
	font-size: 1.5rem;
	margin-bottom: 20px;
}

.post-grid--related {
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	padding: 0;
}

@media (max-width: 900px) {
	.post-grid--related {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.post-grid--related {
		grid-template-columns: 1fr;
	}
}

/* ---------- komentarze ---------- */
.comments-area {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid var(--md-border);
}

.comments-title {
	font-size: 1.5rem;
	margin-bottom: 24px;
}

/* Title + "Dodaj komentarz" link: the form is at the very bottom of a long
   list (assets/js/comment-form.js scrolls to it). */
.comments-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin-bottom: 24px;
}

.comments-header .comments-title {
	margin-bottom: 0;
}

.comments-add {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--md-cream);
	background: var(--md-near-black);
	border-radius: 4px;
	text-decoration: none;
}

.comments-add:hover {
	background: var(--md-ink);
	color: var(--md-cream);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .comments-add:hover {
		background: var(--md-tan-fill);
	}
}

:root[data-theme="dark"] .comments-add:hover {
	background: var(--md-tan-fill);
}

/* Answer shown above the comment form after sending (thanks, waiting for
   approval, or the error). */
.comment-feedback {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid var(--md-border);
	border-left-width: 4px;
	border-radius: 4px;
	background: var(--md-surface);
	color: var(--md-ink);
}

.comment-feedback p {
	margin: 0;
}

.comment-feedback a {
	color: var(--md-tan-text);
	font-weight: 600;
}

.comment-feedback--ok {
	border-left-color: var(--md-sage-ink);
	background: var(--md-sage-bg);
}

.comment-feedback--error {
	border-left-color: #b3322f;
}

/* The comment the reader just sent, put into the list by the script. */
.comment-list .is-new > .comment-body {
	background: var(--md-sage-bg);
	padding-left: 12px;
	padding-right: 12px;
	border-radius: 4px;
}

/* Sending: the button is greyed out and shows a small spinner. */
.comment-form.is-sending .form-submit input[type="submit"],
.comment-form .form-submit [aria-disabled="true"] {
	opacity: 0.7;
	cursor: progress;
	pointer-events: none;
}

.comment-form.is-sending .form-submit::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 12px;
	vertical-align: middle;
	border: 2px solid var(--md-border);
	border-top-color: var(--md-tan-text);
	border-radius: 50%;
	animation: md-spin 0.8s linear infinite;
}

@keyframes md-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.comment-form.is-sending .form-submit::after {
		animation: none;
		border-top-color: var(--md-border);
		border-right-color: var(--md-tan-text);
	}
}

.comment-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	margin: 20px 0 0 40px;
	padding: 0;
}

.comment-body {
	padding: 20px 0;
	border-top: 1px solid var(--md-border);
}

.comment-list > .comment:first-child > .comment-body {
	border-top: none;
	padding-top: 0;
}

.comment-author .fn {
	font-family: var(--md-font-heading);
	font-style: normal;
	font-weight: 700;
}

.comment-metadata {
	font-family: var(--md-font-label);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--md-ink);
	opacity: 0.8; /* 0.6 was 3.4:1 on cream (audit 0.18.61) */
	margin-bottom: 8px;
}

.comment-metadata a {
	color: inherit;
	text-decoration: none;
}

.comment-content {
	/* Long URLs and words wrap instead of pushing the page sideways on
	   phones (old comments are full of bare links). */
	overflow-wrap: anywhere;
}

.comment-content p {
	margin: 0 0 1em;
}

/* Photos readers added to old comments (inc/comment-links.php): a
   small thumbnail on its own line; a click opens it larger
   (assets/js/comment-images.js). */
.comment-image-link {
	display: block;
	width: fit-content;
	max-width: min(100%, 180px);
	margin: 10px 0 4px;
	cursor: zoom-in;
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
}

.comment-image {
	display: block;
	max-width: 100%;
	height: auto;
}

.comment-image-link:focus-visible {
	outline: 2px solid var(--md-tan-text);
	outline-offset: 3px;
}

.comment-image {
	max-height: 240px;
	object-fit: cover;
}

/* Safety net: no image in a comment is ever wider than a thumbnail
   (inc/comment-links.php converts the known cases). */
.comment-content img {
	max-width: min(100%, 180px);
	height: auto;
}

/* Larger view of a comment photo (native <dialog>). */
.comment-lightbox {
	max-width: min(92vw, 900px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--md-surface);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.comment-lightbox::backdrop {
	background: rgba(10, 12, 16, 0.8);
}

.comment-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(92vh - 56px);
	width: auto;
	height: auto;
	margin: 0 auto;
}

.comment-lightbox__close {
	display: block;
	min-height: 44px;
	margin-left: auto;
	padding: 0 18px;
	border: 0;
	background: none;
	color: var(--md-ink);
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.comment-lightbox__close:focus-visible {
	outline: 2px solid var(--md-tan-text);
	outline-offset: -4px;
}

.comment-reply-link {
	font-family: var(--md-font-label);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--md-tan-text);
	text-decoration: none;
}

.comment-form label {
	display: block;
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.comment-form p {
	margin: 0 0 18px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 480px;
	padding: 10px 12px;
	border: 1px solid var(--md-border);
	border-radius: 4px;
	font-family: var(--md-font-body);
	font-size: 1rem;
	color: var(--md-ink);
	background: var(--md-surface); /* white in light mode, dark card in dark mode */
	box-sizing: border-box;
}

.comment-form textarea {
	max-width: 100%;
}

.comment-form .form-submit input[type="submit"] {
	font-family: var(--md-font-label);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--md-near-black);
	color: var(--md-cream);
	border: none;
	padding: 12px 26px;
	border-radius: 4px;
	cursor: pointer;
}

/* ---------- stopka ---------- */
.site-footer {
	margin-top: 60px;
	padding-top: 30px;
	padding-bottom: 40px;
	border-top: 1px solid var(--md-border);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

/* Recipe directory badges (inc/footer-badges.php), as on the old site:
   small, faded, full opacity on hover/focus. Logos of other sites —
   brand text has no contrast requirement (WCAG 1.4.3). */
.footer-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	opacity: 0.4;
	transition: opacity 0.2s ease;
}

.footer-badges:hover,
.footer-badges:focus-within {
	opacity: 1;
}

.footer-badges a {
	display: block;
	line-height: 0;
}

.footer-badges img {
	display: block;
	width: auto;
	height: 30px;
}

@media (prefers-reduced-motion: reduce) {
	.footer-badges {
		transition: none;
	}
}

.footer-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
}

.footer-navigation a {
	font-family: var(--md-font-label);
	font-size: 0.78rem;
	text-decoration: none;
	color: var(--md-ink);
}

.site-info {
	font-family: var(--md-font-label);
	font-size: 0.78rem;
	color: var(--md-ink);
	opacity: 0.8; /* 0.65 was 3.8:1 on cream (audit 0.18.61) */
	margin: 0;
}

/* ---------- druk (przycisk "Drukuj" w nagłówku wpisu) ----------
   Bez tego window.print() wydrukowałby też menu, przyciski, komentarze
   i stopkę — dokładnie to, czego nikt nie chce na wydruku przepisu. */
@media print {
	.site-header,
	.site-nav-bar,
	.entry-actions,
	.recipe-section .widget-area,
	.post-navigation,
	.related-posts,
	.comments-area,
	.site-footer,
	#wpadminbar {
		display: none !important;
	}

	.recipe-section {
		display: block;
	}

	.recipe-card {
		border: none;
		box-shadow: none;
	}
}

/* ---------- druk TYLKO karty przepisu (przycisk "Drukuj przepis") ----------
   Osobny, bardziej "chirurgiczny" tryb niż wydruk całej strony wyżej —
   uruchamiany przez body.is-printing-recipe (patrz assets/js/print-recipe.js).
   Technika: cała strona dostaje visibility:hidden, karta przepisu z
   powrotem visibility:visible i wraca na początek strony — sprawdzony
   sposób na wydruk pojedynczego elementu bez przebudowywania layoutu. */
@media print {
	body.is-printing-recipe * {
		visibility: hidden;
	}

	body.is-printing-recipe .recipe-card,
	body.is-printing-recipe .recipe-card * {
		visibility: visible;
	}

	/* Dekoracyjna ramka wokół strony (position:fixed + @page margin) została
	   USUNIĘTA — w połączeniu z niestandardowym @page (patrz
	   assets/js/print-recipe.js) różne przeglądarki/silniki druku liczyły
	   jej pozycję niespójnie, przez co "wjeżdżała" na treść karty zamiast
	   zostać przy krawędzi strony. Prościej i pewniej bez niej.
	   .recipe-card__print-footer (logo w stopce) zostaje position:fixed —
	   to osobny, mały element z dala od tekstu, mniej podatny na ten sam
	   problem.

	   UWAGA: świadomie NIE używamy tu CSS Grid/display:contents do
	   przenoszenia nagłówka do lewej kolumny — pierwsza próba (grid-column
	   + order na .recipe-card__body z display:contents) psuła się przy
	   przepisie rozlewającym się na kilka stron: składniki znikały,
	   zostawiając puste strony. Silniki druku (szczególnie Chrome) źle
	   sobie radzą z łamaniem siatek CSS Grid na strony. Zamiast tego
	   .recipe-card__print-intro w recipe-card.php to fizyczny DUPLIKAT
	   zdjęcia/tytułu/meta/opisu WEWNĄTRZ .recipe-card__col--ingredients —
	   zwykły, "płaski" układ dwukolumnowy (.recipe-card__body, bez zmian),
	   który już wcześniej poprawnie łamał się na strony. Oryginały (poza
	   .recipe-card__body) są tu ukrywane. */
	body.is-printing-recipe .recipe-card {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		box-sizing: border-box;
		margin: 0;
		padding: 10mm 12mm 20mm;
		border: none;
		font-size: 0.85em;
	}

	body.is-printing-recipe .recipe-card > .recipe-card__print-header,
	body.is-printing-recipe .recipe-card > .recipe-card__title,
	body.is-printing-recipe .recipe-card > .recipe-card__meta,
	body.is-printing-recipe .recipe-card > .recipe-card__description {
		display: none !important;
	}

	/* Zdjęcie obok tytułu w jednym wierszu (.recipe-card__print-intro-header),
	   a meta (porcje/czas/trudność) i opis PEŁNĄ szerokością pod spodem —
	   nie ściśnięte obok zdjęcia. */
	body.is-printing-recipe .recipe-card__print-intro {
		display: block;
		margin-bottom: 16px;
	}

	body.is-printing-recipe .recipe-card__print-intro-header {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 10px;
	}

	body.is-printing-recipe .recipe-card__print-intro .recipe-card__print-photo {
		flex: none;
		margin: 0;
	}

	body.is-printing-recipe .recipe-card__print-title {
		margin: 0;
		text-align: left;
		font-family: var(--md-font-heading);
		font-size: 2.2em;
		font-weight: 700;
		line-height: 1.15;
	}

	body.is-printing-recipe .recipe-card__print-photo {
		width: 90px;
		height: 90px;
		border-radius: 50%;
		overflow: hidden;
		border: 2px solid var(--md-tan);
	}

	body.is-printing-recipe .recipe-card__print-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Elementy, które na papierze nie mają sensu — przyciski
	   interaktywne (drukowanie samego siebie, mnożnik, tryb gotowania)
	   i strzałka rozwijania (bez kliknięcia nie działa). Checkboxy przy
	   składnikach/krokach zostają — jako fizyczna lista do odhaczania
	   długopisem to akurat na wydruku ma sens. */
	body.is-printing-recipe .recipe-card__toolbar,
	body.is-printing-recipe .recipe-card__print-button,
	body.is-printing-recipe .recipe-card__cook-mode,
	body.is-printing-recipe .recipe-card__multiplier,
	body.is-printing-recipe .recipe-card__toggle-icon {
		display: none !important;
	}

	/* Bez zdjęć na wydruku — ma zostać TYLKO jedno, okrągłe zdjęcie u
	   góry (.recipe-card__print-intro .recipe-card__print-photo, patrz
	   wyżej). Reguła ogólna łapie każde inne zdjęcie w karcie (przy
	   krokach, pod przepisem w below_recipe_html, ewentualnie wklejone
	   w treść składnika/kroku) — :not(...) wyklucza tylko to jedno,
	   dozwolone zdjęcie w nagłówku. */
	body.is-printing-recipe .recipe-card img:not(.recipe-card__print-intro *) {
		display: none !important;
	}

	/* Sticky/scroll nie ma sensu na papierze — bez tego lista
	   składników ucinałaby się do wysokości jednego okna, jak na
	   ekranie. */
	body.is-printing-recipe .recipe-card__col--ingredients {
		position: static !important;
		max-height: none !important;
		overflow: visible !important;
		padding-right: 0 !important;
	}

	/* .recipe-card__ingredients ma własny font-size w rem (patrz reguła
	   bazowa wyżej w tym pliku) — rem liczy się od html, nie od
	   .recipe-card, więc font-size:0.85em na .recipe-card go nie
	   pomniejsza. Osobna reguła w em, względem już pomniejszonego
	   kontekstu .recipe-card. */
	body.is-printing-recipe .recipe-card__ingredients {
		font-size: 0.92em;
	}

	/* Logo w stopce, na środku dolnej krawędzi każdej wydrukowanej
	   strony (position: fixed). */
	body.is-printing-recipe .recipe-card__print-footer {
		display: block;
		position: fixed;
		left: 50%;
		bottom: 8mm;
		transform: translate(-50%, 50%);
		background: var(--md-white);
		padding: 0 8px;
		z-index: 1000;
	}

	body.is-printing-recipe .recipe-card__print-logo {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid var(--md-tan);
	}

	body.is-printing-recipe .recipe-card__print-logo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* ---------- front page (front-page.php, inc/front-page.php) ----------
   Each section is a full-width band (same 100vw technique as
   .recipe-section) with content in .front-section__inner — the same
   max width and side padding as .recipe-section__inner, so all sections
   line up. Sections differ in background and layout so they read as
   separate blocks (pale-blue band for the category tiles). */
.front-section,
.front-intro {
	clear: both;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.front-section__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 48px 70px;
}

@media (max-width: 1024px) {
	.front-section__inner {
		padding: 40px 42px;
	}
}

@media (max-width: 768px) {
	.front-section__inner {
		padding: 32px 22px;
	}
}

.front-section--band {
	background: var(--md-pale-blue);
}

.front-intro .front-section__inner {
	padding-bottom: 0;
}

/* Section title + "see all" link on one row (wraps on phones). */
.front-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 24px;
	margin-bottom: 20px;
}

.front-section__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

/* Link text is small; padding makes the touch target 48 px tall. */
.front-section__more {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--md-tan-text);
	text-decoration: none;
}

.front-section__more:hover {
	text-decoration: underline;
}

.front-post-grid {
	padding: 0;
}

/* Full-width grids: 4 columns down to tablets, then 2 (and 1 below
   360 px, see the phone rules below). */
.front-post-grid--wide {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 699px) {
	.front-post-grid--wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones: two smaller cards per row (one only below 360 px) — the
   front page is a "portal" overview, ten full-width cards in a single
   column made it very long. The blog listing keeps one column.
   (.front-section prefix: must beat .recipe-section--listing .post-grid.) */
@media (max-width: 520px) {
	.front-section .front-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}

	.front-section .post-card__title {
		font-size: 1rem;
	}

	.front-section .post-card__meta {
		font-size: 0.68rem;
	}
}

@media (max-width: 359px) {
	.front-section .front-post-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Latest recipes reuse the listing layout (.recipe-section--listing):
   grid on the left, sidebar on the right; only the vertical rhythm
   differs. */
.front-section--latest .recipe-section__inner {
	margin: 0 auto;
	padding-top: 48px;
	padding-bottom: 24px;
}

@media (max-width: 1024px) {
	.front-section--latest .recipe-section__inner {
		padding-top: 40px;
	}
}

@media (max-width: 768px) {
	.front-section--latest .recipe-section__inner {
		padding-top: 32px;
	}
}

.front-section--latest .post-grid {
	padding-bottom: 24px;
}

/* Sidebar titles ("O mnie", a heading in the md_front_sidebar block
   area — demoted to <p class="widget-title">) look the same. */
.widget-area--front .widget-title {
	margin: 0 0 12px;
	font-family: var(--md-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Images in the block area (e.g. the book cover) — when the sidebar
   drops below the grid on narrow screens it is full width; keep the
   image at a sensible size instead of a phone-wide cover. */
.widget-area--front .block-area img {
	display: block;
	max-width: min(100%, 320px);
	height: auto;
	margin-inline: auto;
}

/* "O mnie" box stacked for the narrow sidebar. */
.author-bio--sidebar {
	flex-direction: column;
	align-items: center;
	margin-top: 0;
	text-align: center;
}

.author-bio--sidebar .widget-title {
	align-self: stretch;
	margin: 0;
}

.author-bio--sidebar .author-bio__photo {
	width: 120px;
	height: 120px;
}

.author-bio--sidebar .author-bio__social {
	justify-content: center;
}

/* Front page "O mnie" only (the box under posts stays as it was): the
   theme's sans-serif (as on the old site), left-aligned, with the
   paragraphs, bold and italics typed in the profile. Montserrat has no
   italic file and bold is the 600 file — no extra font downloads. */
.author-bio--sidebar .author-bio__description {
	margin-bottom: 14px;
	font-family: var(--md-font-label);
	font-size: 0.9rem;
	line-height: 1.75;
	text-align: left;
}

.author-bio--sidebar .author-bio__description p {
	margin: 0 0 0.9em;
}

.author-bio--sidebar .author-bio__description p:last-child {
	margin-bottom: 0;
}

.author-bio--sidebar .author-bio__description :is(strong, b) {
	font-weight: 600;
}

.author-bio--sidebar .author-bio__description a {
	color: var(--md-tan-text);
}

/* "Przepisy na:" — category tiles, 4 / 2 / 1 per row. Same tile look
   as the sidebar grid (.category-image-grid), larger. */
.front-category-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 1023px) {
	.front-category-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 359px) {
	.front-category-tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

.front-category-tiles__item a {
	position: relative;
	display: block;
	border-radius: 6px;
	overflow: hidden;
	background: var(--md-border);
}

.front-category-tiles__item a::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 65%);
	transition: opacity 0.2s ease;
}

.front-category-tiles__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 480 / 192;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.front-category-tiles__item a:hover img,
.front-category-tiles__item a:focus-visible img {
	transform: scale(1.05);
}

.front-category-tiles__label {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	z-index: 2;
	padding: 12px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	text-transform: capitalize;
	color: var(--md-white);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
	font-family: var(--md-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
}

.front-category-tiles__item a:focus-visible {
	outline: 3px solid var(--md-tan-text);
	outline-offset: 3px;
}

/* Phones: still two per row, with a taller crop and a smaller label
   that may wrap to two lines (one per row only below 360 px). After
   the base rules above so these win. */
@media (max-width: 520px) {
	.front-category-tiles {
		gap: 12px;
	}

	.front-category-tiles__item img {
		aspect-ratio: 3 / 2;
	}

	.front-category-tiles__label {
		left: 8px;
		right: 8px;
		padding: 8px 0;
		white-space: normal;
		font-size: 1rem;
		line-height: 1.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.front-category-tiles__item img {
		transition: none;
	}

	.front-category-tiles__item a:hover img,
	.front-category-tiles__item a:focus-visible img {
		transform: none;
	}
}

/* "Na czasie" (inc/front-page-occasions.php): the pale-blue header
   colour continues behind the top of the mosaic, as on the old site. */
.front-section--on-time {
	background: linear-gradient(to bottom, var(--md-pale-blue) 0, var(--md-pale-blue) 340px, transparent 340px);
}

.front-section__eyebrow {
	margin: 0 0 4px;
	font-family: var(--md-font-label);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--md-tan-text);
}

/* Mosaic: the first (main) card big in the middle, the others in two
   narrow columns on its sides (wide screens); main card on top and the
   others two per row below (narrower screens). Each card keeps its own
   image ratio, so nothing shifts while images load (no CLS). */
.front-mosaic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 20px;
}

.front-mosaic > .post-card:first-child {
	grid-column: 1 / -1;
}

.front-mosaic > .post-card:first-child .post-card__thumbnail {
	aspect-ratio: 3 / 2;
}

.front-mosaic > .post-card:first-child .post-card__title {
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.25;
}

/* Tablets: main card on top, the others in one row of four. */
@media (min-width: 700px) and (max-width: 1023px) {
	.front-mosaic {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.front-mosaic {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
		grid-auto-flow: dense;
		gap: 28px 32px;
	}

	.front-mosaic > .post-card:first-child {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.front-mosaic > .post-card:first-child .post-card__thumbnail {
		aspect-ratio: 4 / 5;
	}

	.front-mosaic > .post-card:nth-child(2),
	.front-mosaic > .post-card:nth-child(3) {
		grid-column: 1;
	}

	.front-mosaic > .post-card:nth-child(4),
	.front-mosaic > .post-card:nth-child(5) {
		grid-column: 3;
	}

	/* With only 3 cards, one on each side of the main one. */
	.front-mosaic--3 > .post-card:nth-child(3) {
		grid-column: 3;
		grid-row: 1;
	}
}

@media (max-width: 520px) {
	.front-mosaic {
		gap: 24px 16px;
	}

	.front-mosaic > .post-card:first-child .post-card__thumbnail {
		aspect-ratio: 4 / 5;
	}
}

@media (max-width: 359px) {
	.front-mosaic {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* "Sezon na:" (inc/front-page-season.php): an ingredient panel on the
   left (photo, title, description, other in-season ingredients) and its
   recipes on the right; panel on top on narrower screens. */
.front-season {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

@media (min-width: 1024px) {
	.front-season {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
		gap: 40px;
		align-items: start;
	}
}

.front-season__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
	background: var(--md-surface);
	border: 1px solid var(--md-border);
	border-radius: 6px;
}

.front-season__image {
	display: block;
	width: 100%;
	max-width: 380px; /* tablets: the panel is full width */
	height: auto;
	aspect-ratio: 480 / 192;
	object-fit: cover;
	border-radius: 4px;
}

.front-season__title::first-letter {
	text-transform: uppercase;
}

.front-season__description {
	margin: 0;
	font-size: 0.98rem;
}

.front-season__others {
	align-self: stretch;
	padding-top: 12px;
	border-top: 1px solid var(--md-border);
}

.front-season__others-label {
	margin: 0 0 8px;
	font-family: var(--md-font-label);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.front-season__others ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Pills with a 48 px tall touch target. */
.front-season__others a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--md-tan);
	border-radius: 24px;
	color: var(--md-ink);
	text-decoration: none;
	font-family: var(--md-font-label);
	font-size: 0.85rem;
}

.front-season__others a:hover {
	color: var(--md-tan-text);
	border-color: var(--md-tan-text);
}

.front-season__others a:focus-visible {
	outline: 3px solid var(--md-tan-text);
	outline-offset: 2px;
}

/* Recipes: 4 per row from 700 px, 2 on phones (see the phone rules
   for .front-post-grid above). */
@media (min-width: 700px) {
	.front-section .front-post-grid--season {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px 20px;
	}
}

/* "Popularne teraz" (inc/front-page-popular.php): a numbered list with
   small photos on a white band — a different look from the card grids
   around it. Two columns (1–3 left, 4–6 right) on wide screens. */
.front-section--popular {
	background: var(--md-surface);
	border-block: 1px solid var(--md-border);
}

.front-popular {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: md-popular;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px 48px;
}

@media (min-width: 768px) {
	.front-popular {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.front-popular {
		grid-auto-flow: column;
		grid-template-rows: repeat(3, auto);
	}
}

.front-popular__item {
	counter-increment: md-popular;
	display: grid;
	grid-template-columns: 2.2rem 88px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
}

/* The number is decoration (the <ol> already tells screen readers the
   position), so it is CSS generated content. */
.front-popular__item::before {
	content: counter(md-popular);
	font-family: var(--md-font-heading);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: var(--md-tan-text);
}

.front-popular__thumbnail {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 4px;
	background: var(--md-pale-blue);
}

.front-popular__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.front-popular__item:hover .front-popular__thumbnail img,
.front-popular__item:focus-within .front-popular__thumbnail img {
	transform: scale(1.05);
}

.front-popular__text .post-card__category {
	font-family: var(--md-font-label);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.front-popular__title {
	margin: 4px 0 0;
	font-size: 1.1rem;
	line-height: 1.3;
}

.front-popular__title a {
	color: var(--md-ink);
	text-decoration: none;
}

.front-popular__title a:hover {
	color: var(--md-tan-text);
}

@media (max-width: 359px) {
	.front-popular__item {
		grid-template-columns: 1.6rem 64px minmax(0, 1fr);
		gap: 12px;
	}

	.front-popular__item::before {
		font-size: 1.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.front-popular__thumbnail img {
		transition: none;
	}

	.front-popular__item:hover .front-popular__thumbnail img,
	.front-popular__item:focus-within .front-popular__thumbnail img {
		transform: none;
	}
}

/* "Z archiwum" (inc/front-page-archive.php): a short intro under the
   title and the publication year on each card. */
.front-section__intro {
	margin: -8px 0 24px;
	max-width: 65ch;
}

.post-card__date {
	font-weight: 600;
	color: var(--md-ink);
}

/* ---------- ingredient / category icons (inc/term-icons.php) ----------
   Shown instead of a photo when a tag or category has none. Line icons
   in the accent colour on the pale background; the name sits next to
   the icon in the normal text colour (no white text over a photo, so it
   is readable in both modes). */

/* Sidebar tiles ("Przepisy na:", "Sezon na:"). */
.category-image-grid__item--icon {
	width: 100%; /* a photo sets the tile's width; an icon does not */
}

.category-image-grid__item--icon a {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 14px;
	aspect-ratio: 480 / 192;
	padding: 0 18px;
	background: var(--md-pale-blue);
	color: var(--md-tan-text);
}

.category-image-grid__item--icon a::before {
	display: none;
}

.category-image-grid__icon {
	flex: none;
	color: var(--md-tan-text); /* on the icon itself: sidebar link colours win over the tile's */
	height: 62%;
	width: auto;
	transition: transform 0.2s ease;
}

.category-image-grid__item--icon a:hover .category-image-grid__icon {
	transform: scale(1.08);
}

.category-image-grid__item--icon .category-image-grid__label {
	position: static;
	padding: 0;
	text-align: left;
	color: var(--md-ink);
	text-shadow: none;
}

/* Front page "Przepisy na:" tiles. */
.front-category-tiles__item--icon a {
	display: flex;
	align-items: center;
	gap: 14px;
	aspect-ratio: 480 / 192;
	padding: 0 18px;
	background: var(--md-surface);
	color: var(--md-tan-text);
	box-shadow: inset 0 0 0 1px var(--md-border);
	text-decoration: none;
}

.front-category-tiles__item--icon a::before {
	display: none;
}

.front-category-tiles__icon {
	flex: none;
	height: 60%;
	width: auto;
	transition: transform 0.3s ease;
}

.front-category-tiles__item--icon a:hover .front-category-tiles__icon,
.front-category-tiles__item--icon a:focus-visible .front-category-tiles__icon {
	transform: scale(1.08);
}

.front-category-tiles__item--icon .front-category-tiles__label {
	position: static;
	padding: 0;
	text-align: left;
	color: var(--md-ink);
	text-shadow: none;
}

@media (max-width: 520px) {
	.front-category-tiles__item--icon a {
		aspect-ratio: 3 / 2;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		padding: 8px;
	}

	.front-category-tiles__item--icon .front-category-tiles__icon {
		height: 46%;
	}

	.front-category-tiles__item--icon .front-category-tiles__label {
		text-align: center;
	}
}

/* Front page "Sezon na:" panel: icon in place of the photo, and small
   icons in the "Też w sezonie" pills. */
.front-season__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 480 / 192;
	border-radius: 4px;
	background: var(--md-pale-blue);
	color: var(--md-tan-text);
}

.front-season__icon svg {
	height: 72%;
	width: auto;
}

.front-season__others a {
	gap: 6px;
}

.front-season__pill-icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-left: -4px;
	color: var(--md-tan-text);
}

@media (prefers-reduced-motion: reduce) {
	.category-image-grid__icon,
	.front-category-tiles__icon {
		transition: none;
	}

	.category-image-grid__item--icon a:hover .category-image-grid__icon,
	.front-category-tiles__item--icon a:hover .front-category-tiles__icon,
	.front-category-tiles__item--icon a:focus-visible .front-category-tiles__icon {
		transform: none;
	}
}

/* "Powitanie" pattern on the front page (inc/front-page-seo.php):
   visible H1, a short lead about the blog, three facts in one row and
   two buttons (48 px tall, brand colours, visible focus). */
.md-welcome {
	max-width: 760px;
	margin: 0 auto;
	padding: 8px 0 8px;
	text-align: center;
}

.md-welcome h1 {
	margin: 0 0 12px;
	font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem);
	line-height: 1.2;
}

.md-welcome .md-welcome__lead { /* beats .entry-content p margins */
	margin: 0 auto 18px;
	max-width: 60ch;
	font-size: 1.1rem;
}

.md-welcome__facts {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	font-family: var(--md-font-label);
	font-size: 0.85rem;
}

.md-welcome__facts strong {
	display: block;
	font-family: var(--md-font-heading);
	font-size: 1.5rem;
	color: var(--md-tan-text);
}

.md-welcome .wp-block-buttons {
	gap: 12px;
}

.md-welcome .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 26px;
	border: 2px solid var(--md-tan-fill);
	border-radius: 4px;
	background: var(--md-tan-fill);
	color: var(--md-white);
	font-family: var(--md-font-label);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.md-welcome .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--md-tan-text);
	border-color: var(--md-tan);
}

.md-welcome .wp-block-button__link:hover {
	background: var(--md-near-black);
	border-color: var(--md-near-black);
	color: var(--md-cream);
}

.md-welcome .wp-block-button__link:focus-visible {
	outline: 3px solid var(--md-tan-text);
	outline-offset: 3px;
}

/* "O mnie" box on the front page: "Więcej o mnie" and "Wszystkie
   przepisy" as two separate lines, each a 48 px touch target. */
.author-bio--sidebar .author-bio__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
}

.recipe-section .author-bio--sidebar .author-bio__link--about { /* beats the sidebar link colour */
	font-weight: 600;
	color: var(--md-tan-text);
}

.author-bio--sidebar .author-bio__link--about + .author-bio__link {
	min-height: 40px;
	color: var(--md-ink);
}


/* ---------- listing pages (inc/archive-pages.php) ---------- */

/* Breadcrumbs above the listing H1: a plain row, not the full-width
   blue band of single posts. */
.site-breadcrumbs--listing {
	max-width: none;
	margin: 0 0 6px;
	padding: 0;
}

.site-breadcrumbs--listing::before,
.site-breadcrumbs--listing::after {
	display: none;
}

/* Links in the row are small; extra height for touch. */
.site-breadcrumbs--listing a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	opacity: 0.8;
}

.archive-header__title-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.archive-header__visual {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
}

.archive-header__visual--photo {
	object-fit: cover;
}

.archive-header__visual--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--md-pale-blue);
	color: var(--md-tan-text);
}

.archive-header__visual--icon svg {
	width: 62%;
	height: 62%;
}

.archive-description--after {
	margin: 8px 0 48px;
	padding-top: 28px;
	border-top: 1px solid var(--md-border);
	max-width: 70ch;
}

/* Subcategories: pill links (48 px touch targets). */
.listing-subcategories ul {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.listing-subcategories a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--md-border);
	border-radius: 24px;
	background: var(--md-surface);
	color: var(--md-ink);
	font-family: var(--md-font-label);
	font-size: 0.82rem;
	text-decoration: none;
}

.listing-subcategories a:hover {
	border-color: var(--md-tan);
	color: var(--md-tan-text);
}

/* "Sezon na:" strip: label + pills with ingredient icons. Wraps on wide
   screens; on phones one row that scrolls sideways INSIDE the strip
   (the page itself never scrolls sideways). */
.season-strip {
	display: flex;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 28px;
	padding: 14px 16px;
	border-radius: 6px;
	background: var(--md-season-bg);
}

.season-strip__label {
	flex: none;
	margin: 0;
	font-family: var(--md-font-label);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.season-strip__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.season-strip__list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px 0 10px;
	border: 1px solid var(--md-tan);
	border-radius: 24px;
	background: var(--md-surface);
	color: var(--md-ink);
	font-family: var(--md-font-label);
	font-size: 0.82rem;
	white-space: nowrap;
	text-decoration: none;
}

.season-strip__list a:hover {
	color: var(--md-tan-text);
	border-color: var(--md-tan-text);
}

.season-strip__list a:focus-visible,
.listing-subcategories a:focus-visible {
	outline: 3px solid var(--md-tan-text);
	outline-offset: 2px;
}

.season-strip__icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--md-tan-text);
}

@media (max-width: 767px) {
	.season-strip {
		flex-direction: column;
		align-items: stretch;
		padding: 12px 0 12px 14px;
	}

	.season-strip__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding: 2px 14px 6px 2px; /* room for the focus outline */
		scrollbar-width: thin;
	}

	.season-strip__list li {
		scroll-snap-align: start;
	}
}

/* Sidebar tile grids ("Przepisy na:", "Sezon na:") — same title style
   as the other sidebar groups ("Szukaj wg kategorii", "Dieta"). */
.recipe-section .category-image-grid .widget-title {
	margin: 0 0 16px;
	font-family: var(--md-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
}

/* "Pokaż wszystkie (+N)" in the "Sezon na:" strip — wide screens only;
   phones keep every pill in the sideways-scrolling row. */
.season-strip__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px dashed var(--md-tan);
	border-radius: 24px;
	background: transparent;
	color: var(--md-tan-text);
	font-family: var(--md-font-label);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

.season-strip__more:focus-visible {
	outline: 3px solid var(--md-tan-text);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.season-strip.has-season-js:not(.is-expanded) .season-strip__extra {
		display: none;
	}
}

@media (max-width: 767px) {
	.season-strip__more-item {
		display: none;
	}
}

.season-strip__more[hidden] {
	display: none; /* the display rule above would otherwise override [hidden] */
}

/* ---------- reader ratings (inc/recipe-ratings.php) ---------- */

.md-stars {
	flex: none;
	width: 90px;
	height: 18px;
}

.md-stars__empty {
	fill: var(--md-border);
}

.md-stars__full {
	fill: var(--md-tan-text);
}

/* Under the title: stars + "4,95 (2042 oceny)", a link to the box.
   Own row below author/date: inline, the stars' 18px box sat off the
   uppercase text baseline and looked crooked. */
.rating-summary {
	flex-basis: 100%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	color: inherit;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0.02em;
}

.rating-summary:hover .rating-summary__text,
.rating-summary:focus-visible .rating-summary__text {
	text-decoration: underline;
}

.recipe-card__notes p {
	margin: 0 0 .6em;
}

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

/* Treść spod karty przepisu (galeria, zdjęcia, własny nagłówek) —
   zwykła treść wpisu pod kartą, jak na starej stronie. Stoi w tym samym
   kontenerze co karta (.recipe-section__inner), więc ma jej szerokość
   i odstępy; zdjęcia zachowują własny rozmiar (nie są rozciągane). */
.recipe-after {
	min-width: 0;
}

.recipe-after img {
	max-width: 100%;
	height: auto;
}

/* Photos from MD_below_recipe, inside the card. */
.recipe-card__below {
	margin: 1.5em 0 0;
}

/* Tekst po ostatnim kroku wewnątrz karty — odstęp od listy kroków. */
.recipe-card__after-steps {
	margin: 1.5em 0 0;
}

/* "Oceń przepis" box after the recipe. */
.recipe-rating {
	margin: 40px 0 0;
	padding: 24px;
	text-align: center;
	background: var(--md-surface);
	border: 1px solid var(--md-border);
	border-radius: 4px;
	scroll-margin-top: 80px;
}

.recipe-rating__title {
	margin: 0 0 8px;
	font-family: var(--md-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--md-ink);
}

.recipe-rating__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 12px;
	font-family: var(--md-font-label);
	font-size: 0.85rem;
	color: var(--md-ink);
}

.recipe-rating__buttons {
	display: flex;
	justify-content: center;
	gap: 4px;
}

.recipe-rating__buttons[hidden] {
	display: none;
}

/* Each star is a 48 px touch target. */
.recipe-rating__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	color: var(--md-ink);
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.recipe-rating__star svg {
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linejoin: round;
	transition: fill 0.15s ease, transform 0.15s ease;
}

.recipe-rating__star.is-lit {
	color: var(--md-tan-text);
}

.recipe-rating__star.is-lit svg {
	fill: currentColor;
}

.recipe-rating__star:not(:disabled):hover svg {
	transform: scale(1.1);
}

.recipe-rating__star:focus-visible {
	outline: 2px solid var(--md-tan-text);
	outline-offset: 2px;
}

.recipe-rating__star:disabled {
	cursor: default;
}

.recipe-rating__status {
	min-height: 1.5em;
	margin: 8px 0 0;
	font-family: var(--md-font-label);
	font-size: 0.85rem;
	color: var(--md-ink);
}

.recipe-rating__status:empty {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.recipe-rating__star svg {
		transition: none;
	}

	.recipe-rating__star:not(:disabled):hover svg {
		transform: none;
	}
}

@media print {
	.recipe-rating {
		display: none;
	}
}

/* ---------- rating in the comment form (inc/recipe-ratings.php) ---------- */

.comment-rating {
	position: relative; /* the hidden radios below are anchored here, not to the page */
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.comment-rating__input {
	top: 0;
	left: 0;
}

/* Replying to a comment: WordPress's comment-reply script moves the
   form into the comment list. A reply does not rate the recipe
   (inc/recipe-ratings.php ignores it too), so no stars there. */
.comment-list .comment-rating {
	display: none;
}

/* "Anuluj odpowiedź" next to "Odpowiedz: <name>" in the form title. */
#cancel-comment-reply-link {
	display: inline-block;
	margin-left: 14px;
	font-family: var(--md-font-label);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.comment-rating__legend {
	margin-bottom: 6px;
	padding: 0;
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--md-ink);
}

/* Radios 1 → 5 in the markup. Lit: the checked star and every star
   before it; while hovering, the hovered star and the ones before it
   instead. */
.comment-rating__stars {
	display: inline-flex;
	gap: 2px;
}

.comment-form .comment-rating__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	color: var(--md-ink);
	border-radius: 4px;
	cursor: pointer;
}

.comment-rating__star svg {
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linejoin: round;
}

.comment-rating__stars:not(:hover) .comment-rating__input:checked + .comment-rating__star,
.comment-rating__stars:not(:hover) .comment-rating__star:has(~ .comment-rating__input:checked),
.comment-rating__star:hover,
.comment-rating__star:has(~ .comment-rating__star:hover) {
	color: var(--md-tan-text);
}

.comment-rating__stars:not(:hover) .comment-rating__input:checked + .comment-rating__star svg,
.comment-rating__stars:not(:hover) .comment-rating__star:has(~ .comment-rating__input:checked) svg,
.comment-rating__star:hover svg,
.comment-rating__star:has(~ .comment-rating__star:hover) svg {
	fill: currentColor;
}

.comment-rating__input:focus-visible + .comment-rating__star,
.comment-rating__none:focus-visible + .comment-rating__clear {
	outline: 2px solid var(--md-tan-text);
	outline-offset: 2px;
}

.comment-form .comment-rating__clear {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin: 0 0 0 12px;
	padding: 0 4px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: underline;
	vertical-align: top;
	cursor: pointer;
}

.comment-rating__none:checked + .comment-rating__clear {
	/* Nothing to clear yet: hidden on screen, but kept for screen
	   readers as the label of the "no rating" radio (display:none left
	   the radio without a name — audit 0.18.61). */
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.comment-form .comment-rating__hint {
	margin: 4px 0 0;
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	color: var(--md-ink);
}

.comment-rating__hint.is-error {
	font-weight: 600;
	color: #b32d2e;
}

/* Cookie consent: a normal sentence next to its checkbox. */
.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.comment-form .comment-form-cookies-consent input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex: none;
}

.comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-family: var(--md-font-body);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Stars at the top of a comment with a rating. */
.comment-rating-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	color: var(--md-ink);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .comment-rating__hint.is-error {
		color: #f08a8b;
	}
}

:root[data-theme="dark"] .comment-rating__hint.is-error {
	color: #f08a8b;
}

/* ---------- compact sidebar tiles ----------
   Icon tiles ("Przepisy na:", "Sezon na:" without a photo) were as tall
   as a photo tile (480:192), so the sidebar outgrew the recipe. Now a
   slim row: 40 px icon + name. Next to the recipe (one column) one per
   row; below it on narrow screens two per row. Photo tiles keep their
   shape. Ingredient tiles are green, category tiles stay blue. */
/* .recipe-section .widget ul (generic sidebar lists) is a flex column —
   the tile grid needs the same specificity to win. */
.category-image-grid__list,
.recipe-section .widget .category-image-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
	gap: 8px;
}

.category-image-grid__item {
	max-width: none;
	margin-inline: 0;
}

.category-image-grid__item--icon a {
	aspect-ratio: auto;
	min-height: 56px;
	gap: 10px;
	padding: 8px 10px;
}

.category-image-grid__icon {
	width: 32px;
	height: 32px;
}

.category-image-grid__item--icon .category-image-grid__label {
	font-size: 0.95rem;
	overflow-wrap: anywhere;
	white-space: normal;
	line-height: 1.25;
}

.category-image-grid__item--ingredient.category-image-grid__item--icon a {
	background: var(--md-sage-bg);
}

.category-image-grid__item--ingredient .category-image-grid__icon {
	color: var(--md-sage-ink);
}

/* Photo tiles: a photo spans the whole row of the grid. */
.category-image-grid__item:not(.category-image-grid__item--icon) {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 380px;
	margin-inline: auto;
}

/* Ingredients in green everywhere they appear with an icon: the big
   "Sezon na:" panel on the front page, its "Też w sezonie" pills and
   the "Sezon na:" strip on listing pages. */
.front-season__icon {
	background: var(--md-sage-bg);
	color: var(--md-sage-ink);
}

.front-season__pill-icon,
.season-strip__icon {
	color: var(--md-sage-ink);
}

/* "Pokaż wszystkie (+N)" under the sidebar "Sezon na:" tiles. */
.category-image-grid__more {
	margin-top: 8px;
}

.category-image-grid__more > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border: 1px solid var(--md-border);
	border-radius: 4px;
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--md-ink);
	cursor: pointer;
	list-style: none;
}

.category-image-grid__more > summary::-webkit-details-marker {
	display: none;
}

.category-image-grid__more > summary:hover {
	border-color: var(--md-sage-ink);
}

.category-image-grid__more > summary:focus-visible {
	outline: 3px solid var(--md-tan-text);
	outline-offset: 2px;
}

.category-image-grid__more[open] > summary {
	margin-bottom: 8px;
}

/* ---------- recipe card in full screen (assets/js/recipe-fullscreen.js) ---------- */

.recipe-card__expand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 48px;
	min-height: 48px;
	margin-left: auto;
	padding: 0 12px;
	border: 1px solid var(--md-border);
	border-radius: 4px;
	background: var(--md-surface);
	color: var(--md-ink);
	font-family: var(--md-font-label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

.recipe-card__expand[hidden] {
	display: none;
}

.recipe-card__expand:hover {
	border-color: var(--md-tan);
	color: var(--md-tan-text);
}

.recipe-card__expand:focus-visible,
.recipe-card__print-button:focus-visible {
	outline: 3px solid var(--md-tan-text);
	outline-offset: 2px;
}

.recipe-card__expand svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.recipe-card__expand-icon--close,
.recipe-card.is-fullscreen .recipe-card__expand-icon--open {
	display: none;
}

.recipe-card.is-fullscreen .recipe-card__expand-icon--close {
	display: block;
}

/* Phones: the recipe card stays a card (border, rounded corners) but sits
   8 px from the screen edge instead of 22 px, with less padding inside
   (the page margin and the card's own padding left too little room for the
   ingredients and steps), and the two toolbar buttons are equal halves with the same height and
   both with a label. "przepis" in "Drukuj przepis" is dropped visually on
   narrow screens but stays for screen readers. */
@media screen and (max-width: 768px) {
	.recipe-card {
		margin-inline: -14px;
		padding: 20px 14px 24px;
	}

	.recipe-card__step {
		padding-left: 38px;
	}
}

@media (max-width: 480px) {
	.recipe-card__toolbar > * {
		flex: 1 1 0;
	}

	.recipe-card__expand {
		margin-left: 0;
	}

	.recipe-card__btn-extra {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Full screen open: "Zamknij pełny ekran" would wrap onto two lines on
	   a phone, so the close button is just the X (its aria-label stays) and
	   the print button takes the rest of the row. */
	.recipe-card.is-fullscreen .recipe-card__expand {
		flex: 0 0 48px;
	}

	.recipe-card.is-fullscreen .recipe-card__expand-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Lock the page behind the card. On <html> only: overflow on <body>
   would make it the scroll container of the sticky menu bar, which
   then scrolls away instead of staying visible above the card. */
html.md-recipe-fullscreen {
	overflow: hidden;
}

.recipe-card.is-fullscreen {
	position: fixed;
	/* Below the sticky menu bar, which stays visible (top set by
	   assets/js/recipe-fullscreen.js). */
	inset: var(--md-fullscreen-top, 0px) 0 0;
	z-index: 100001; /* above the page and the skip link */
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	max-width: none;
	border: 0;
	border-top: 4px solid var(--md-tan);
	border-radius: 0;
	padding: 20px max(16px, calc((100vw - 1100px) / 2)) 48px;
}

.recipe-card.is-fullscreen .recipe-card__toolbar {
	position: sticky;
	top: -20px;
	z-index: 2;
	margin: -20px 0 16px;
	padding: 12px 0;
	background: var(--md-surface);
	border-bottom: 1px solid var(--md-border);
}

.recipe-card.is-fullscreen .recipe-card__title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}

@media print {
	.recipe-card.is-fullscreen {
		position: static;
		overflow: visible;
		padding: 0;
	}
}

/* ---------- room for the sticky menu bar ----------
   The menu bar (.site-nav-bar) sticks to the top of the window, so
   anything else that sticks (ingredients next to the steps, the sticky
   sidebar) and every jump to an anchor ("Skocz do przepisu", #ocena,
   #comments) must start below it — otherwise the bar covers the first
   lines (e.g. the "Składniki" heading). Bar height: 49 px + border
   below 1200 px, 57 px + border from 1200 px. */
:root {
	--md-nav-height: 50px;
	--md-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--md-nav-height) + 16px);
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--md-nav-height) + 12px);
}

@media (min-width: 1200px) {
	:root {
		--md-nav-height: 58px;
	}
}

/* In the full screen card the ingredients scroll inside the card, so
   they clear the card's own sticky toolbar (73 px), not the menu. The
   menu bar stays above the card, with its dropdowns over it. */
html.md-recipe-fullscreen .site-nav-bar {
	z-index: 100002;
}

/* Only where ingredients and steps stand side by side: on phones
   (one column, ingredients not sticky) a capped height let the
   ingredients spill over the steps (bug reported on iPhone, 0.18.61). */
@media (min-width: 641px) {
	.recipe-card.is-fullscreen .recipe-card__col--ingredients {
		top: 88px;
		max-height: calc(100vh - var(--md-fullscreen-top, 0px) - 108px);
	}
}

/* Open mega panel: a hairline on top and a deeper shadow, so it stands
   off the page in dark mode too. */
@media (min-width: 1200px) {
	.primary-menu > li > .sub-menu {
		border-top: 1px solid var(--md-border);
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .primary-menu > li > .sub-menu {
		box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
	}
}

:root[data-theme="dark"] .primary-menu > li > .sub-menu {
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
}

/* "Pokaż wszystkie (+N)" goes away once the rest is shown. */
.category-image-grid__more[open] > summary {
	display: none;
}

/* The near-black brand buttons ("Drukuj", "Skocz do przepisu", the
   category label above the title) sit on a near-black navy page in
   dark mode — a hairline keeps their shape visible. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .entry-actions__button,
	:root:not([data-theme="light"]) .entry-category a,
	:root:not([data-theme="light"]) .search-form .search-submit {
		box-shadow: inset 0 0 0 1px var(--md-border);
	}
}

:root[data-theme="dark"] .entry-actions__button,
:root[data-theme="dark"] .entry-category a,
:root[data-theme="dark"] .search-form .search-submit {
	box-shadow: inset 0 0 0 1px var(--md-border);
}

/* ---------- classic [gallery] grids (old posts) ----------
   e.g. "Inne pomysły na wykorzystanie dyni" in the recipe notes. With
   html5 'gallery' support WordPress prints no gallery CSS of its own,
   so without this every photo filled the whole column. Photos link to
   their recipes (inc/attachment-links.php). Same 2:3 crop for every
   tile so captions line up; at most 2 columns on phones. */
.gallery {
	--md-gallery-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--md-gallery-cols), minmax(0, 1fr));
	gap: 20px 16px;
	margin: 20px 0 28px;
}

.gallery-columns-1 { --md-gallery-cols: 1; }
.gallery-columns-2 { --md-gallery-cols: 2; }
.gallery-columns-4 { --md-gallery-cols: 4; }
.gallery-columns-5 { --md-gallery-cols: 5; }
.gallery-columns-6 { --md-gallery-cols: 6; }

@media (max-width: 600px) {
	.gallery:not(.gallery-columns-1) {
		--md-gallery-cols: 2;
	}
}

.gallery-item {
	margin: 0;
	min-width: 0;
}

.gallery-icon a {
	display: block;
	border-radius: 4px;
	overflow: hidden;
}

.gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.gallery-icon a:hover img {
	transform: scale(1.03);
}

.gallery-icon a:focus-visible {
	outline: 2px solid var(--md-tan-text);
	outline-offset: 3px;
}

.gallery-caption {
	margin-top: 8px;
	font-family: var(--md-font-label);
	font-size: 0.82rem;
	line-height: 1.35;
	text-align: center;
	color: var(--md-ink);
}

@media (prefers-reduced-motion: reduce) {
	.gallery-icon img {
		transition: none;
	}

	.gallery-icon a:hover img {
		transform: none;
	}
}

/* ---------- 404 (404.php) ---------- */
.error-404__suggestion a {
	font-weight: 600;
}

.error-404__section {
	margin: 40px 0 0;
}

.error-404__heading {
	margin: 0 0 18px;
	font-family: var(--md-font-heading);
	font-size: 1.5rem;
}

.error-404 .post-grid {
	padding-top: 0;
	padding-bottom: 0;
}

.error-404 .category-image-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}

.error-404__home {
	margin: 40px 0 60px;
	font-family: var(--md-font-label);
	font-weight: 600;
}

/* ---------- "Wróć na górę" (inc/back-to-top.php) ----------
   Fixed in the bottom-right corner, shown after scrolling (back-to-top.js).
   44 px: comfortable touch target. Below the cook-mode / full-screen
   dialogs (z-index 100001+). */
.back-to-top {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--md-border);
	border-radius: 50%;
	background: var(--md-surface);
	color: var(--md-ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.back-to-top[hidden] {
	display: none;
}

.back-to-top.is-visible {
	opacity: 1;
}

.back-to-top:hover {
	border-color: var(--md-tan);
	color: var(--md-tan-text);
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition: none;
	}
}

@media print {
	.back-to-top {
		display: none !important;
	}
}

/* "Zyskuje popularność" (inc/front-page-trending.php): a dark spotlight
   band with photo cards — deliberately different from the white numbered
   "Popularne teraz" list. */
.front-section--trending {
	background: var(--md-spot-bg);
	color: var(--md-spot-ink);
}

.front-section--trending .front-section__title {
	color: var(--md-spot-ink);
}

.front-trending__lead {
	max-width: 46rem;
	margin: -8px 0 24px;
	color: var(--md-spot-ink);
	opacity: 0.85;
}

/* Phones: one row you swipe sideways, the next card peeks in so it is
   obvious there is more. Pure CSS (scroll snap), no script. Wider screens:
   a normal grid. */
.front-trending {
	list-style: none;
	margin: 0 -22px;
	padding: 0 22px 8px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 68%;
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 22px;
}

.front-trending__item {
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.front-trending {
		margin: 0;
		padding: 0;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		gap: 32px 24px;
		overflow: visible;
	}
}

.front-trending__photo {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	margin-bottom: 14px;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
}

.front-trending__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.front-trending__item:hover .front-trending__photo img,
.front-trending__item:focus-within .front-trending__photo img {
	transform: scale(1.05);
}

/* Small pill with an arrow: says "this one is rising" without numbers. */
.front-trending__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	background: var(--md-spot-accent);
	color: #263446;
	font-family: var(--md-font-label);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.front-trending__badge::before {
	content: "\2197\00a0";
}

.front-trending .post-card__category {
	display: inline-block;
	color: var(--md-spot-accent);
	font-family: var(--md-font-label);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.front-trending__title {
	margin: 6px 0 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.front-trending__title a {
	color: var(--md-spot-ink);
	text-decoration: none;
}

.front-trending__title a:hover,
.front-trending__title a:focus-visible {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.front-trending__photo img {
		transition: none;
	}
}