/*
 * Tokeny WA + szkielet sekcji.
 *
 * Realne kolory i typografia z Figmy (Slice 2, file s9cbLnIgCifeUp4zLEaJrd, home 672:96).
 * Sloty --ast-global-color-0..8 nadpisujemy tu na dokładne hexy z projektu — child ładuje
 * się po Astrze, więc te wartości wygrywają z paletą publikowaną przez Astrę (brak Astra
 * Pro/MCP na tej domenie, paleta wdrażana plikowo, deterministycznie). Mapowanie slotów §5.2.
 */

/* Fonty hostowane lokalnie (RODO + LCP, bez CDN Google). Ubuntu = nagłówki,
   Lato = tekst. Subsety latin + latin-ext (polskie znaki: ł ż ą ę ó ś ć ń ź). */

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/ubuntu-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/ubuntu-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Ubuntu Regular — pas CTA podstron („Nie uzyskałeś odpowiedzi?”, 690:1006–1007). */
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ubuntu-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ubuntu-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins SemiBold — w projekcie tylko pytania FAQ (690:1012). */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lato-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lato-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/lato-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/lato-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Ubuntu Sans 500–600 — przyciski (672:145 SemiBold, 672:284 Medium). Plik zmienny:
   jeden na podzbiór znaków obsługuje obie grubości. */
@font-face {
	font-family: 'Ubuntu Sans';
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url('../fonts/ubuntu-sans-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Ubuntu Sans';
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url('../fonts/ubuntu-sans-var-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Figtree 400 — w projekcie tylko opis firmy i pas linków SEO w stopce (672:405, 672:406).
   Bez preloadu: stopka jest pod zgięciem, a przeglądarka i tak pobierze plik dopiero,
   gdy trafi na tekst w tym kroju. */
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/figtree-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/figtree-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Paleta marki z Figmy — nadpisuje sloty Astry (§5.2). */
	--ast-global-color-0: #ff6600; /* CTA pomarańcz — przycisk "Dowiedz się więcej" (672:145) */
	--ast-global-color-1: #d35400; /* CTA hover — pochodna −18% #ff6600 (Figma bez stanu hover) */
	--ast-global-color-2: #252525; /* nagłówki h1–h6 + topbar (672:143/164/282/124) */
	--ast-global-color-3: #1d1d1d; /* tekst akapitu, Lato (672:175) */
	--ast-global-color-4: #ffffff; /* tło główne, karty (672:147) */
	--ast-global-color-5: #f9f9f9; /* tło przygaszone — sekcja "o nas" (672:234) */
	--ast-global-color-6: #001a24; /* tło ciemne / stopka + start gradientu hero (672:327/142) */
	--ast-global-color-7: #bebebe; /* obramowania kart — rgba(37,37,37,.3) spłaszczone na bieli (672:147) */
	--ast-global-color-8: #0091cb; /* akcent niebieski — badge daty (672:301) */

	/* Kontener Astry na siatkę Figmy — bez tego treść rodzica byłaby węższa (1200 px)
	   niż nasza stopka i paski, i nic by się nie zgadzało w pionie. */
	--ast-normal-container-width: 1400px;

	/* Kolory — nazwy znaczeniowe na slotach Astry */
	--wa-color-primary:       var(--ast-global-color-0);
	--wa-color-primary-hover: var(--ast-global-color-1);
	--wa-color-heading:       var(--ast-global-color-2);
	--wa-color-text:          var(--ast-global-color-3);
	--wa-color-bg:            var(--ast-global-color-4);
	--wa-color-bg-soft:       var(--ast-global-color-5);
	--wa-color-bg-dark:       var(--ast-global-color-6);
	--wa-color-bg-bar:        var(--ast-global-color-2); /* pasek kontaktowy nad nagłówkiem (672:124) */
	--wa-color-bg-subtle:     var(--ast-global-color-7);
	--wa-color-border:        var(--ast-global-color-7);
	--wa-color-accent:        var(--ast-global-color-8);
	--wa-color-error:         #c0392b; /* poza paletą marki celowo */
	--wa-color-white:         #fff;
	--wa-color-black:         #000; /* nagłówek FAQ (690:1010) — jedyny czysty czarny w projekcie */
	--wa-color-line:          rgb(37 37 37 / 20%); /* separatory FAQ (690:1033) */

	/* Rytm pionowy. Sekcje home mają w projekcie 100 px od krawędzi do treści
	   (900→1000 hero/karty, 3021→3121 przycisk/koniec „o nas", 4115→4213 stopka). */
	--wa-space-section: clamp(3rem, 6vw, 6.25rem);
	--wa-space-xs: 0.5rem;
	--wa-space-s:  1rem;
	--wa-space-m:  1.5rem;
	--wa-space-l:  2.5rem;
	--wa-space-xl: 4rem;

	/* Typografia z Figmy. Rodziny: Ubuntu = nagłówki, Lato = tekst. */
	--wa-family-heading: 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
	--wa-family-body:    'Lato', 'Segoe UI', system-ui, sans-serif;
	--wa-family-stopka:  'Figtree', var(--wa-family-body); /* opis i linki SEO w stopce */
	--wa-family-button:  'Ubuntu Sans', var(--wa-family-body); /* przyciski (672:146) */
	--wa-family-faq:     'Poppins', var(--wa-family-body); /* pytania FAQ (690:1012) */

	/* Skala: max = wartość z Figmy (H1 51px, H2 40px, H3 20px, lead 20px, body 16px) */
	--wa-font-h1:   clamp(2rem, 4.5vw, 3.1875rem); /* 51px */
	--wa-font-h2:   clamp(1.75rem, 3.2vw, 2.5rem);  /* 40px */
	--wa-font-h2-s: clamp(1.5rem, 2.6vw, 2rem);     /* 32px — nagłówek FAQ (690:1010) */
	--wa-font-l:    24px; /* linie pasa CTA (690:1006). W px, nie rem: Astra zmniejsza rem na telefonie do 91,2%, a biały na #0091cb (3,55:1) przechodzi WCAG tylko jako duży tekst (≥24 px) */
	--wa-font-faq:  clamp(1rem, 1.3vw, 1.125rem);   /* 18px — pytania FAQ (690:1012) */
	--wa-font-h3:   clamp(1.125rem, 1.6vw, 1.25rem); /* 20px */
	--wa-font-lead: clamp(1.0625rem, 1.4vw, 1.25rem); /* 20px */
	--wa-font-body: 1rem; /* 16px */
	--wa-line-tight:  1.18; /* nagłówki (60/51, 48/40) */
	--wa-line-normal: 1.5;  /* tekst (24/16) */

	--wa-radius:     12px;
	--wa-radius-l:   22px; /* zdjęcia w treści podstron (690:998), karty (672:147) */
	--wa-radius-s:   6px;
	--wa-shadow:     0 10px 30px rgb(0 0 0 / 8%);
	--wa-transition: 200ms ease;

	/* Siatka Figmy: ramka 1400 px (260–1660 przy 1920), 15 px półrynny po bokach,
	   więc treść siada dokładnie na 275–1645 jak w projekcie. --wa-content to ta
	   treść (1370 px) — od niej liczymy też kontener Astry, który ma własne rynny. */
	--wa-container:        1400px;
	--wa-container-gutter: 15px;
	--wa-content:          1370px;
	--wa-container-narrow: 820px;
}

/* Rodziny fontów — nadpisują domyślne Astry (tokens.css ładuje się po niej). */
body,
button,
input,
select,
textarea {
	font-family: var(--wa-family-body);
}

/* .entry-content h1..h6 — dogania specyficzność Astry (.entry-content h1{font-family:inherit},
   0,0,1,1), która wewnątrz treści bije samo h1..h6. Child ładuje się po Astrze → przy równej
   specyficzności wygrywa (ten sam mechanizm co override palety). Bez !important (§13). */
h1, h2, h3, h4, h5, h6,
.entry-content :is(h1, h2, h3, h4, h5, h6),
.site-title,
.entry-title,
.ast-single-entry-title {
	font-family: var(--wa-family-heading);
	font-weight: 700; /* Figma: Ubuntu Bold. Astra daje 600, a lokalnie hostujemy tylko 700. */
}

/* --- Szkielet sekcji: wspólne klasy dla wszystkich bloków WA --- */

.wa-section {
	padding-block: var(--wa-space-section);
}

/* Astra daje nagłówkom 20 px, a akapitom 1,6em dolnego marginesu (`.entry-content p`).
   W blokach WA odstępy pionowe ustawia każdy blok górnym marginesem z projektu, więc
   dolny zerujemy. Tylko margin-bottom: pełny reset (0,1,1) przebiłby górne marginesy
   bloków zapisane na pojedynczej klasie. */
.wa-section :is(h1, h2, h3, h4, h5, h6, p) {
	margin-bottom: 0;
}

.wa-container {
	width: 100%;
	/* Wewnątrz sekcji alignfull rodzic ma 100vw (razem z paskiem przewijania), nie
	   szerokość okna — samo max-width pozwalało kontenerowi wyjść poza widok.
	   100cqw to widoczna szerokość #page (kontener zapytań niżej), więc treść stoi
	   dokładnie rynnę od krawędzi ekranu. Pierwsza linia to zapas dla przeglądarek
	   bez jednostek cq — ta odejmowała rynnę podwójnie (margines + padding). */
	max-width: min( var(--wa-container), calc(100vw - 2 * var(--wa-container-gutter)) );
	max-width: min( var(--wa-container), 100cqw );
	margin-inline: auto;
	padding-inline: var(--wa-container-gutter);
}

/*
 * Punkty łamania motywu — jeden zestaw dla wszystkich bloków, żeby układ nie skakał
 * w połowie sekcji. Media queries nie czytają zmiennych CSS, więc to kontrakt na
 * komentarzu, nie na tokenie; liczby poniżej mają się zgadzać w każdym arkuszu.
 *
 *   ≤1199px  desktop → tablet    — siatki wielokolumnowe schodzą do dwóch kolumn
 *   ≤921px   tablet → duży telefon — kolumny stackują się, kontener łapie szerszą rynnę
 *   ≤599px   telefon             — wszystko jednokolumnowo
 *
 * Wyjątek celowy: przyklejony pasek kontaktowy chodzi po klasie urządzenia, nie po
 * układzie, i trzyma własne ≤767px (patrz kontakt.css).
 */

/* Poniżej szerokości projektu 15 px to za ciasno na dotyk — rynna rośnie do 20 px,
   tyle co nagłówek mobilny Astry (logo na 20), więc pasek, nagłówek i sekcje stoją
   w jednej linii. */
@media (max-width: 921px) {
	.wa-container {
		--wa-container-gutter: 20px;

		padding-inline: var(--wa-container-gutter);
	}
}

/* Kontener Astry na tę samą treść 1370 px co nasza stopka i paski. Astra wpisuje
   `.ast-container{max-width:1240px}` (1200 z Kastomizera + 2×20 rynny) na sztywno
   w swój inline CSS, nie przez --ast-normal-container-width — więc podmiana samej
   zmiennej nic nie daje. Ta sama specyficzność, a child ładuje się po Astrze, więc
   wygrywa kolejnością (ten sam mechanizm co override palety, bez !important). */
.ast-container {
	max-width: calc(var(--wa-content) + 40px);
}

/* Logo z projektu ma 236×57 (672:441). Plik jest wyeksportowany w 2× (484×126) z 3 px
   marginesu wokół znaku, więc w 1× ma 242 px — przy 236 px sam znak wychodził
   o 4% za mały. max-width: Astra dokłada własny limit szerokości logo z Kastomizera. */
.custom-logo {
	width: 242px;
	max-width: none;
	height: auto;
}

/* Na telefonie logo 242 px z paskiem Zadzwoń/Napisz zasłaniało 17% ekranu (PM, Z9):
   180 px daje nagłówek 80 px zamiast 93. */
@media (max-width: 599px) {
	.custom-logo {
		width: 180px;
	}
}

/* Astra zmniejsza podstawę do 91,2% (14,6 px) do 1199 px, a stopka trzyma 16 px w px,
   więc na telefonie była większa niż treść (PM, Z1). */
@media (max-width: 544px) {
	html {
		font-size: 100%;
	}
}

/* Bez samotnego ostatniego słowa w drugiej linii („SKD”, PM Z5). Przeglądarka bez
   text-wrap: balance pomija regułę. */
h1 {
	text-wrap: balance;
}

/* Projekt ma w nagłówku samo logo (672:441), a budowniczy nagłówka Astry dokłada obok
   niego tekstową nazwę strony — marka wychodziła dwa razy. Chowamy ją stylem, nie
   filtrem: `astra_get_option_display-site-title` nie łapie tej ścieżki renderu
   (sprawdzone), a nazwa w markupie nie przeszkadza — logo niesie ten sam tekst w alt.
   Warunek na custom-logo: bez logo nazwa musi zostać widoczna. */
.ast-site-identity .site-title:has(~ .custom-logo-link),
.ast-site-identity:has(.custom-logo) .site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Sekcje pełnej szerokości Astra buduje na `width: 100vw`, a 100vw liczy się razem
   z paskiem przewijania — przy widocznym pasku sekcja wystaje poza okno i robi się
   poziomy scroll. Same sekcje są wyśrodkowane poprawnie (nadmiar rozkłada się po
   równo w obie strony), więc wystarczy uciąć wystający skrawek tła.
   Obcinamy na #page, NIE na <html>: overflow-x na elemencie korzeniowym propaguje
   się na widok i rozwala position:sticky przyklejonego nagłówka (sprawdzone —
   nagłówek odjeżdża zamiast trzymać się góry). Na wrapperze sticky działa. */
#page {
	overflow-x: clip;
	container-type: inline-size; /* 100cqw w .wa-container = widoczna szerokość strony */
}

/* Astra odsuwa treść o 60 px od nagłówka i stopki (`.ast-plain-container.ast-no-sidebar
   #primary`). Widok zaczynający się albo kończący sekcją WA ma w projekcie sekcję
   dosuniętą do krawędzi (hero od razu pod nagłówkiem, 672:141) — własny odstęp
   niesie padding sekcji. Strony bez bloków WA zachowują margines Astry. */
.ast-plain-container.ast-no-sidebar #primary:has(.entry-content > .wa-section:first-child) {
	margin-top: 0;
}

.ast-plain-container.ast-no-sidebar #primary:has(.entry-content > .wa-section:last-child) {
	margin-bottom: 0;
}

/* Tekst na blokach rdzeniowych prosto w treści (strona SEO 699:342, wpis bloga): Lato 16/24
   na całą szerokość kontenera (1372 px w 699:342), akapity co 20 px, 40 px pod hero
   (518 − 478) i 100 px nad pasem CTA (1006 − 906). Astra zwęża dzieci treści do szerokości
   z Kastomizera (`.entry-content[data-ast-blocks-layout] > *`, 1200 px), także obrazy, cytaty
   i tabele, więc reguła obejmuje każde dziecko poza sekcjami WA. script i style wykluczone:
   niewidoczne, a dostałyby odstęp przed następną sekcją.
   Odstępy 40/100 px są policzone dla pary hero i pas CTA. Jasna sekcja WA z własnym
   paddingiem dałaby przerwę 140/200 px; dziś żadna strona nie ma takiego układu. */
.entry-content[data-ast-blocks-layout] > :not(.wa-section, script, style) {
	max-width: none;
}

.entry-content > :is(p, ul, ol) {
	margin-bottom: 20px;
	line-height: var(--wa-line-normal);
}

.entry-content > :not(.wa-section, script, style):is(:last-child, :has(+ .wa-section)) {
	margin-bottom: 0;
}

.entry-content > .wa-section + :not(.wa-section, script, style) {
	margin-top: 40px;
}

.entry-content > :not(.wa-section, script, style) + .wa-section {
	margin-top: var(--wa-space-section);
}

.wa-container--waski {
	max-width: var(--wa-container-narrow);
}

.wa-section__header {
	margin-bottom: var(--wa-space-l);
}

.wa-section__title {
	font-size: var(--wa-font-h2);
	line-height: 1.2; /* 48/40 (672:282, 672:283) — H1 zostaje na --wa-line-tight 60/51 */
	color: var(--wa-color-heading);
}

.wa-section__lead {
	font-size: var(--wa-font-lead);
	line-height: var(--wa-line-normal);
}

.wa-section__actions {
	margin-top: var(--wa-space-l);
}

/* Warianty tła */
.wa-section--jasny {
	background-color: var(--wa-color-bg);
}

.wa-section--przygaszony {
	background-color: var(--wa-color-bg-soft);
}

.wa-section--ciemny {
	background-color: var(--wa-color-bg-dark);
	color: #fff;
}

.wa-section--ciemny .wa-section__title {
	color: #fff;
}

/* Dwie sekcje na tym samym jasnym tle dzielą jeden odstęp, nie dwa: w projekcie
   podstrony z przycisku „Zapytaj o usługę” do nagłówka FAQ jest 100 px (690:999 → 690:1010). */
.wa-section--jasny + .wa-section--jasny {
	padding-top: 0;
}

/* Przycisk główny — wspólny, z pełnymi stanami. Nigdy w CSS pojedynczego bloku.
   Geometria z 672:145/313: pigułka 59 px wysokości, 16/40 px wewnętrznego odstępu,
   16 px wersalikami, Ubuntu Sans SemiBold (672:146).
   input.wa-button to przycisk wysyłki CF7: Astra stylizuje input[type=submit] (0,1,1),
   a przy tej samej specyficzności wygrywa child, bo ładuje się później. */
.wa-button,
input.wa-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-xs);
	padding: 15px 39px; /* 16/40 z projektu minus 1 px ramki */
	border: 1px solid transparent;
	border-radius: 50px;
	background-color: var(--wa-color-primary);
	color: #fff;
	font-family: var(--wa-family-button);
	font-size: 1rem;
	font-weight: 600;
	line-height: 27px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wa-transition), border-color var(--wa-transition), color var(--wa-transition), transform var(--wa-transition);
}

/* Astra podkreśla linki w treści i barwi je na hover kolorem akcentu
   (`.ast-single-post .entry-content a`, `a:hover`) — pomarańczowy tekst znikał wtedy
   na pomarańczowym tle. Kolor przycisku trzymamy na `.entry-content a.wa-button`,
   z pseudoklasami: ta sama albo wyższa specyficzność, a child ładuje się później. */
.entry-content a.wa-button,
.entry-content a.wa-button:is(:hover, :focus, :active, :visited) {
	color: #fff;
	text-decoration: none;
}

.wa-button:hover,
input.wa-button:hover {
	background-color: var(--wa-color-primary-hover);
}

.wa-button:focus-visible,
input.wa-button:focus-visible {
	outline: 3px solid var(--wa-color-primary-hover);
	outline-offset: 2px;
}

.wa-button:active,
input.wa-button:active {
	transform: translateY(1px);
}

/* Na telefonie przycisk 59 px przyćmiewał treść (PM, Z2): 46 px, nadal ponad 44 px celu
   dotyku. min-height trzyma 44 px przy „Wynajmij” z cennika, który ma własny padding.
   input.wa-button to wysyłka formularza Kontakt (B6), ta sama reguła. */
@media (max-width: 599px) {
	.wa-button,
	input.wa-button {
		min-height: 44px;
		padding: 11px 24px;
		font-size: 14px;
		line-height: 22px;
	}
}

/* Wariant drugorzędny 672:284 („Czytaj więcej"): obrys rgba(37,37,37,.5), ciemny tekst. */
.wa-button--outline,
.entry-content a.wa-button--outline:is(:link, :visited) {
	background-color: transparent;
	border-color: rgb(37 37 37 / 50%);
	color: var(--wa-color-heading);
	font-weight: 500; /* Ubuntu Sans Medium (672:285) */
}

.wa-button--outline:hover,
.entry-content a.wa-button--outline:is(:hover, :focus, :active) {
	background-color: var(--wa-color-heading);
	border-color: var(--wa-color-heading);
	color: #fff;
}

/* Wariant obok głównego (Pomiary 694:637, „Wypożycz miernik”): pomarańczowy obrys i tekst,
   SemiBold jak przycisk główny. Na hover wypełnia się jak główny. */
.wa-button--akcent,
.entry-content a.wa-button--akcent:is(:link, :visited) {
	background-color: transparent;
	border-color: var(--wa-color-primary);
	color: var(--wa-color-primary);
}

.wa-button--akcent:hover,
.entry-content a.wa-button--akcent:is(:hover, :focus, :active) {
	background-color: var(--wa-color-primary);
	color: #fff;
}

/* Na ciemnym tle ciemny obrys znika (kontrast ok. 1,2:1, CR 5a M1) — odwracamy kolory. */
.wa-section--ciemny .wa-button--outline,
.wa-section--ciemny .entry-content a.wa-button--outline:is(:link, :visited),
.entry-content .wa-section--ciemny a.wa-button--outline:is(:link, :visited) {
	border-color: rgb(255 255 255 / 50%);
	color: var(--wa-color-white);
}

.wa-section--ciemny .wa-button--outline:hover,
.entry-content .wa-section--ciemny a.wa-button--outline:is(:hover, :focus, :active) {
	background-color: var(--wa-color-white);
	border-color: var(--wa-color-white);
	color: var(--wa-color-heading);
}

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

	.wa-button:active {
		transform: none;
	}
}