/* Stockinette — most między Kadence a design systemem.
 *
 * Kadence renderuje nagłówek, stopkę, przyciski i całe WooCommerce na własnych
 * zmiennych (--global-palette*, --global-*-font-family). Zamiast nadpisywać
 * jego reguły selektor po selektorze, podmieniamy same zmienne — wtedy motyw
 * nadrzędny sam rysuje się w kolorach i krojach Stockinette.
 *
 * Ten plik ładuje się po tokens.css, bo z niego czyta.
 */

:root {
	/* ---------- Paleta ----------
	 * Kadence numeruje od akcentu (1–2), przez tekst (3–6), po tła (7–9).
	 */
	--global-palette1: var(--color-primary-700);
	--global-palette2: var(--color-primary-800);
	--global-palette3: var(--color-neutral-950);
	--global-palette4: var(--color-neutral-800);
	--global-palette5: var(--color-neutral-700);
	--global-palette6: var(--color-neutral-600);
	--global-palette7: var(--color-neutral-100);
	--global-palette8: var(--color-neutral-50);
	--global-palette9: var(--color-white);

	/* Statusy — Kadence używa ich w komunikatach WooCommerce i formularzy. */
	--global-palette11: var(--color-success);
	--global-palette12: var(--color-primary-600);
	--global-palette13: var(--color-error);
	--global-palette14: var(--color-warning);
	--global-palette15: var(--color-warning);

	--global-palette9rgb: 255, 255, 255;

	/* ---------- Akcenty i przyciski ---------- */
	--global-palette-highlight: var(--color-primary-700);
	--global-palette-highlight-alt: var(--color-primary-800);
	--global-palette-highlight-alt2: var(--color-white);

	--global-palette-btn-bg: var(--color-primary-800);
	--global-palette-btn-bg-hover: var(--color-primary-900);
	--global-palette-btn: var(--color-white);
	--global-palette-btn-hover: var(--color-white);

	--global-palette-btn-sec-bg: var(--color-primary-50);
	--global-palette-btn-sec-bg-hover: var(--color-primary-100);
	--global-palette-btn-sec: var(--color-primary-800);
	--global-palette-btn-sec-hover: var(--color-primary-900);

	/* ---------- Typografia ---------- */
	--global-body-font-family: var(--font-body);
	--global-heading-font-family: var(--font-heading);
	--global-primary-nav-font-family: var(--font-ui);
	--global-fallback-font: var(--font-sans);
	--global-display-fallback-font: var(--font-serif);

	/* ---------- Szerokości ----------
	 * Nic tu nie ustawiamy. --global-content-width i --global-content-narrow-width
	 * wypisuje Kadence z ustawień Wygląd → Dostosuj, a ten arkusz ładuje się po
	 * nich, więc każda wartość podana tutaj po cichu unieważniałaby Dostosuj:
	 * klient zmieniałby szerokość w panelu i nic by się nie działo.
	 */

	/* ---------- Promienie ---------- */
	--global-border-radius: var(--radius-md);
	--global-btn-border-radius: var(--radius-button);
}

/* Kadence maluje tło strony i treści osobnymi regułami, nie zmiennymi. */
body,
body.wp-site-blocks,
.content-bg,
body.content-style-unboxed .content-bg {
	background: var(--surface-page);
	color: var(--text-primary);
}

/* Nagłówki w Kadence dziedziczą jego krój — wymuszamy serif z design systemu. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--font-heading);
	color: var(--text-primary);
}

/*
 * Przełącznik języka z Polylang (menu główne, lista rozwijana): flaga obok
 * nazwy. base.css robi z każdego <img> blok, więc flaga lądowała nad nazwą.
 */
.pll-parent-menu-item a,
.pll-parent-menu-item .nav-drop-title-wrap,
.lang-item a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.pll-parent-menu-item a img,
.lang-item a img {
	display: inline-block;
	flex: none;
}

/* Polylang wstawia odstęp inline — wyrównanie robi gap. */
.pll-parent-menu-item a span,
.lang-item a span {
	margin-left: 0 !important;
}

/* Na liście rozwijanej link zajmuje cały wiersz, jak inne pozycje podmenu. */
.header-navigation .sub-menu .lang-item a {
	display: flex;
}