/* Stockinette — kontrolki: przyciski, linki, stany skupienia.
 *
 * Kolory przycisków niosą zmienne Kadence podmienione w kadence-bridge.css.
 * Ten plik odpowiada za wszystko, czego zmienna nie wyrazi: proporcje, krój,
 * trakt, promień i zachowanie pod kursorem.
 *
 * Bez tej warstwy Kadence renderuje przycisk w swoich domyślnych proporcjach —
 * 3 px promienia, 7 px odstępu w pionie, tekst 18 px w wadze zwykłej. Przy
 * nagłówku 76 px wygląda to jak przycisk wklejony z innego projektu.
 *
 * Jeden system dla trzech źródeł przycisków: kadence/singlebtn (bloki),
 * WooCommerce (katalog i karta produktu) oraz Contact Form 7.
 */

/* ---------- Miara przycisku ----------
 * Trzymana w zmiennych, bo tych samych wartości używają trzy różne wtyczki.
 */

:root {
	--btn-height: var(--control-height-lg);
	--btn-padding-inline: var(--space-8);
	--btn-font-size: 0.9375rem;
	--btn-font-weight: var(--font-weight-medium);
	--btn-tracking: 0.01em;

	/* Wypełniony — oliwka marki, pod kursorem schodzi do grafitu. Zmiana barwy,
	 * a nie rozjaśnienie: przy stonowanej palecie samo przyciemnienie o kilka
	 * procent jest niezauważalne. */
	--btn-solid-bg: var(--color-primary-900);
	--btn-solid-bg-hover: var(--color-neutral-950);
	--btn-solid-text: var(--color-white);

	/* Obrysowy — linia w tym samym kolorze co reguły nad kolumnami, więc
	 * przycisk należy do tej samej rodziny co reszta strony. */
	--btn-outline-border: var(--color-neutral-300);
	--btn-outline-border-hover: var(--text-primary);
	--btn-outline-bg-hover: var(--color-neutral-100);
}

/* ---------- Wspólna miara ----------
 * Selektory są rozpisane, a nie połączone w jedną listę z :is(), bo Kadence
 * i WooCommerce dokładają własne reguły o wyższej wadze i część z nich trzeba
 * przebić punktowo.
 */

.wp-block-kadence-advancedbtn .kb-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wpcf7 input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-height);
	padding: 0 var(--btn-padding-inline);
	border-radius: var(--radius-button);
	font-family: var(--font-ui);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	line-height: var(--line-height-ui);
	letter-spacing: var(--btn-tracking);
	text-decoration: none;
	transition: var(--transition-color);
}

/* Kadence rozciąga przycisk pod kafelkiem produktu na pełną szerokość regułą
 * `ul.products.woo-archive-btn-button .button:not(.kb-button)` — cztery klasy,
 * więc trzeba ją przebić, a nie tylko powtórzyć. Pełna szerokość zostaje,
 * wraca układ flex: przy display:block tekst przykleja się do górnej krawędzi
 * 52-pikselowego pudełka.
 */
.woocommerce ul.products.woo-archive-btn-button li.product a.button:not(.kb-button) {
	display: flex;
	width: 100%;
	box-sizing: border-box;
}

/* ---------- Wariant wypełniony ---------- */

.wp-block-kadence-advancedbtn .kb-button:not(.is-style-outline),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wpcf7 input[type="submit"] {
	background: var(--btn-solid-bg);
	color: var(--btn-solid-text);
	border: var(--border-width) solid transparent;
}

.wp-block-kadence-advancedbtn .kb-button:not(.is-style-outline):hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wpcf7 input[type="submit"]:hover {
	background: var(--btn-solid-bg-hover);
	color: var(--btn-solid-text);
}

/* ---------- Wariant obrysowy ----------
 * kadence/singlebtn nie ma gotowego wariantu „outline", a ustawianie obrysu
 * atrybutami zaszyłoby kolory w treści strony. is-style-outline to konwencja
 * Gutenberga, więc styl zostaje w motywie.
 */

.wp-block-kadence-advancedbtn .kb-button.is-style-outline {
	background: transparent;
	color: var(--text-primary);
	border: var(--border-width) solid var(--btn-outline-border);
	box-shadow: none;
}

.wp-block-kadence-advancedbtn .kb-button.is-style-outline:hover {
	background: var(--btn-outline-bg-hover);
	color: var(--text-primary);
	border-color: var(--btn-outline-border-hover);
	box-shadow: none;
}

/* Na ciemnym pasie obrys i tekst muszą być jasne. */
.kb-row-layout-wrap.stk-dark .kb-button.is-style-outline {
	color: var(--color-white);
	border-color: var(--color-neutral-700);
}

.kb-row-layout-wrap.stk-dark .kb-button.is-style-outline:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--color-neutral-400);
	color: var(--color-white);
}

/* Wypełniony na ciemnym pasie jest jasny. Grafitowy przycisk na grafitowym
 * tle miał kontrast około 1:1 — napis było widać, samego przycisku nie. */
.kb-row-layout-wrap.stk-dark .wp-block-kadence-advancedbtn .kb-button:not(.is-style-outline) {
	background: var(--color-white);
	color: var(--text-primary);
}

.kb-row-layout-wrap.stk-dark .wp-block-kadence-advancedbtn .kb-button:not(.is-style-outline):hover {
	background: var(--brand-sand);
	color: var(--text-primary);
}

/* Grafitowy obrys skupienia znika na ciemnym tle. */
.kb-row-layout-wrap.stk-dark .kb-button:focus-visible {
	outline-color: var(--color-white);
}

/* ---------- Stan wyłączony ----------
 * Domyślnie CF7 daje przyciskowi opacity .5, co na oliwce daje szarozielony
 * placek nie do odróżnienia od koloru marki. Wyłączony przycisk ma być
 * jednoznacznie wyłączony, a nie przygaszony.
 */

.wpcf7 input[type="submit"]:disabled,
.woocommerce button.button:disabled {
	opacity: 1;
	background: var(--color-neutral-300);
	color: var(--color-neutral-600);
	cursor: not-allowed;
}

/* ---------- Skupienie ----------
 * Obrys plus odstęp, żeby był widoczny również na przycisku wypełnionym.
 */

.wp-block-kadence-advancedbtn .kb-button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.wpcf7 input[type="submit"]:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

/* ---------- Odnośniki w treści ----------
 * Podkreślenie widoczne od razu, nie dopiero pod kursorem: w akapicie B2B
 * odnośnik jest treścią, a nie ozdobą, i musi się dać znaleźć wzrokiem.
 * Wyjątki to elementy, które mają własne traktowanie: przyciski, kafle,
 * duża typografia kontaktowa i nawigacja.
 */

.entry-content p a:not(.kb-button),
.kt-blocks-accordion-panel p a,
.wpcf7 .luna-form__consent a {
	color: var(--text-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--color-neutral-300);
	transition: var(--transition-color), text-decoration-color var(--duration-fast) var(--ease-default);
}

.entry-content p a:not(.kb-button):hover,
.kt-blocks-accordion-panel p a:hover,
.wpcf7 .luna-form__consent a:hover {
	color: var(--text-primary);
	text-decoration-color: var(--text-primary);
}

/* ---------- Nawigacja ----------
 * Pozycje menu dostają trakt i podkreślenie wjeżdżające od lewej, zamiast
 * domyślnej zmiany koloru. Strona bieżąca jest oznaczona na stałe.
 */

.main-navigation .primary-menu-container > ul > li > a {
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.01em;
	position: relative;
}

.main-navigation .primary-menu-container > ul > li > a::after {
	content: "";
	position: absolute;
	left: var(--space-3);
	right: var(--space-3);
	bottom: 0.55em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration-default) var(--ease-out);
}

.main-navigation .primary-menu-container > ul > li > a:hover::after,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.main-navigation .primary-menu-container > ul > li > a::after { transition: none; }
}