/**
 * KartS Design – style globalne (ładowane zawsze).
 * Tylko to, czego nie da się wyrazić w theme.json. Style sekcji: assets/sections/*,
 * elementów wspólnych: assets/components/* – ładowane tylko tam, gdzie są potrzebne.
 * Kolory, rozmiary i odstępy wyłącznie z presetów: var(--wp--preset--…).
 * Progi (jedna skala dla motywu): 599 / 781 / 1023 / 1279 px.
 */

/* ---------- Układ strony ---------- */

.wp-site-blocks > * {
	margin-block-start: 0;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Kotwice (#uslugi, #faq…) nie chowają się pod przyklejonym nagłówkiem (80 px + odstęp). */
.wp-site-blocks [id] {
	scroll-margin-top: 100px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Długie słowa i adresy (e-mail, URL) nie rozpychają układu – źródło poziomego przewijania na telefonie. */
.wp-site-blocks p,
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks li {
	overflow-wrap: break-word;
}

.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3 {
	text-wrap: balance;
}

:where(.wp-site-blocks) a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Akapit z pustym powiązaniem (block bindings) albo pustym shortcodem nie zostawia odstępu. */
.wp-site-blocks p:empty {
	display: none;
}

/* Tekst tylko dla czytników ekranu (np. nagłówek H2 sekcji bez widocznego tytułu). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

/* Łamanie wierszy z projektu tylko na szerokich ekranach (w treści zawsze „słowo <br>słowo”). */
@media (max-width: 781px) {
	.wp-site-blocks h2 br,
	.wp-site-blocks h3 br {
		display: none;
	}
}

/* ---------- Tekst z gradientem ----------
 * Wyróżnienie (mark) z kolorem palety „Gradient – …”: w edytorze zaznacz tekst → Wyróżnienie → Tekst.
 * Kolor palety to kolor zastępczy (gdy przeglądarka nie obsługuje background-clip: text).
 */
mark.has-inline-color[class*="has-grad-"] {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

mark.has-grad-blue-color {
	background-image: linear-gradient(90deg, #4b9afd 0%, #0453e6 11%, #0453e6 62%, #4895fc 100%);
}

mark.has-grad-sunset-color {
	background-image: linear-gradient(90deg, #ffb800 3%, #db00ff 99%);
}

/* Figma liczy gradient na całą szerokość nagłówka – tu odcinek od fioletu do błękitu, jak w projekcie. */
mark.has-grad-violet-color {
	background-image: linear-gradient(90deg, #8a2be2 0%, #0b98ff 100%);
}

mark.has-grad-orange-color {
	background-image: linear-gradient(156deg, #f17b0e 36%, #ffe24c 88%);
}

/* ---------- Przyciski ---------- */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	filter: brightness(1.12);
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Z obrysem (styl rdzenia „Obrys”): niebieski na jasnym tle, biały na ciemnym (sekcje z .has-contrast-background-color). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding-block: 11px;
	border: 1px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--accent);
}

.has-contrast-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-surface-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.kd-why-card--night .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	filter: none;
	background-color: rgb(0 89 255 / 0.06);
}

.has-contrast-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-surface-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.kd-why-card--night .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgb(255 255 255 / 0.1);
}

/* Biały (styl „Biały” – na niebieskim banerze CTA). Tekst #0059FF zamiast #206DFF z projektu: kontrast 5,4:1 zamiast 4,47:1 (WCAG AA). */
.wp-block-button.is-style-light > .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
}

/* Mały przycisk (klasa kd-btn-small): 32 px, tekst 14 px. */
.wp-block-button.kd-btn-small > .wp-block-button__link {
	min-height: 32px;
	padding: 6px 16px;
	font-size: var(--wp--preset--font-size--small);
}

/* Strzałka › za tekstem (klasa kd-arrow) – dekoracja w kolorze tekstu przycisku. */
.wp-block-button.kd-arrow > .wp-block-button__link::after {
	content: "";
	width: 5px;
	height: 8px;
	margin-left: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5.2 7.75'%3E%3Cpath d='M1 .35 4.5 3.85 1 7.4' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5.2 7.75'%3E%3Cpath d='M1 .35 4.5 3.85 1 7.4' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Style bloków (register_block_style w functions.php) ---------- */

/* Nadtytuł sekcji: 12 px, kapitaliki (np. „O NAS”, „OPINIE”). Kolor dziedziczy – na ciemnym tle biały. */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
}

/* ---------- Lista z ikoną „✓” (klasa kd-checklist) ---------- */

.kd-checklist {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kd-checklist li {
	display: flex;
	gap: 10px;
	align-items: center;
}

.kd-checklist li::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../images/check.svg") center / contain no-repeat;
	mask: url("../images/check.svg") center / contain no-repeat;
}

/* ---------- Kadr filmu z przyciskiem „play” (klasa kd-video na bloku Obrazek) ---------- */

.kd-video {
	position: relative;
	margin-bottom: 0;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--small);
}

.kd-video img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Przyciemnienie 40% i ikona play (dekoracja). */
.kd-video::before,
.kd-video::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.kd-video::before {
	inset: 0;
	background-color: rgb(0 0 0 / 0.4);
}

.kd-video::after {
	top: 50%;
	left: 50%;
	width: 45px;
	height: 45px;
	background: url("../images/play.svg") center / contain no-repeat;
	transform: translate(-50%, -50%);
}

/* ---------- Szablony: 404, wyszukiwanie ---------- */

.wp-block-search__input {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--20);
	border: 1px solid currentColor;
	border-radius: 8px;
	font: inherit;
}

.wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--10);
}