/*
 * Dostępność — kontrast i odróżnialność linków.
 * Audyt WCAG 2.2 AA z 22.09.2026, decyzje Janka z tej samej sesji.
 *
 * Każda reguła niżej ma wpisany pomiar: jaki był kontrast przed zmianą
 * i jakie kryterium go wymagało. Nie zmieniaj wartości bez ponownego pomiaru
 * (scripts/axe-baseline.js).
 */

/* ---------------------------------------------------------------------------
 * 1. Link w pasku copyright — WCAG 1.4.3 (AA) + 1.4.1 (A)
 *
 * Ciemny pasek na dole stopki (#08080A) ma jasnoszary akapit (#8A8A8E),
 * ale link do auranet.com.pl dziedziczył globalny kolor linku #1D1D1D —
 * kontrast 1,18:1, czyli tekst praktycznie niewidoczny. Bierze kolor akapitu
 * (5,8:1) i podkreślenie, żeby nie odróżniał się wyłącznie kolorem.
 *
 * `elementor-element-229ccaf7` to sekcja copyright w szablonie stopki 73
 * („js-foot"). Jeśli ta sekcja zostanie przebudowana w Elementorze, identyfikator
 * się zmieni i regułę trzeba będzie przestawić — sprawdź wtedy kontrast ponownie.
 * ------------------------------------------------------------------------- */
footer .elementor-element-229ccaf7 a {
	color: #8a8a8e;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

footer .elementor-element-229ccaf7 a:hover,
footer .elementor-element-229ccaf7 a:focus-visible {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * 2. Linki w treści — WCAG 1.4.1 Use of Color (A)
 *
 * Link w tekście miał kolor #1D1D1D przy tekście otoczenia #5C5C5C, czyli
 * 2,52:1 wobec wymaganych 3:1. Skoro sam kolor nie wystarcza do odróżnienia,
 * dokładamy podkreślenie. Zmierzone 22.09: 5 linków na /o-mnie/, hubie wnętrz
 * i hubie produktowym; reguła obejmie też każdy link dodany później.
 *
 * Celujemy w pojemniki z tekstem ciągłym: edytor tekstu, treść wpisu i treść
 * akordeonu. Kart realizacji ([js_realizacje] w widgetcie `shortcode`) ani kart
 * „Warto przeczytać" to nie dotyka — tam linkiem jest cała karta, nie fraza
 * w zdaniu, a podkreślenie całego kafla byłoby bez sensu.
 *
 * Podkreślenie w spoczynku jest przygaszone do 40%, na hover i fokusie pełne —
 * odróżnialność jest zachowana w każdym stanie, sygnał tylko się wzmacnia.
 * ------------------------------------------------------------------------- */
.elementor-widget-text-editor a:not([class*="elementor-button"]),
.elementor-widget-theme-post-content a:not([class*="elementor-button"]),
.elementor-tab-content a:not([class*="elementor-button"]) {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: currentColor;
}

@supports ( color: color-mix( in srgb, currentColor 40%, transparent ) ) {

	.elementor-widget-text-editor a:not([class*="elementor-button"]),
	.elementor-widget-theme-post-content a:not([class*="elementor-button"]),
	.elementor-tab-content a:not([class*="elementor-button"]) {
		text-decoration-color: color-mix( in srgb, currentColor 40%, transparent );
	}
}

.elementor-widget-text-editor a:not([class*="elementor-button"]):hover,
.elementor-widget-text-editor a:not([class*="elementor-button"]):focus-visible,
.elementor-widget-theme-post-content a:not([class*="elementor-button"]):hover,
.elementor-widget-theme-post-content a:not([class*="elementor-button"]):focus-visible,
.elementor-tab-content a:not([class*="elementor-button"]):hover,
.elementor-tab-content a:not([class*="elementor-button"]):focus-visible {
	text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
 * 3. Zaślepka zablokowanej mapy — WCAG 1.4.3 (AA)
 *
 * Complianz przykrywa mapę Google na /kontakt/ przyciskiem zgody z tłem
 * `rgba(0,0,0,.5)` na podglądzie mapy. Nad jasnym kadrem daje to biały tekst
 * na efektywnym #808080, czyli 3,94:1 przy wymaganych 4,5:1 (zmierzone 22.09).
 * Przezroczystość zależy od tego, co akurat jest pod spodem, więc zamiast ją
 * podbijać, dajemy tło nieprzezroczyste: biel na #333 to 12,6:1 niezależnie
 * od kadru mapy. Element widzą wyłącznie osoby przed wyrażeniem zgody
 * marketingowej — po akceptacji ładuje się prawdziwa mapa.
 * ------------------------------------------------------------------------- */
.cmplz-blocked-content-container .cmplz-blocked-content-notice,
.cmplz-blocked-content-container .cmplz-custom-accept-btn,
.cmplz-wp-video .cmplz-blocked-content-notice,
.cmplz-wp-video .cmplz-custom-accept-btn {
	background-color: #333;
}

/* ---------------------------------------------------------------------------
 * 4. Interlinia nagłówków w stopce po zmianie tagu
 *
 * Kolumny stopki („Jan Schenk · Auranet", „Usługi", „Strona", „Kontakt") były
 * nagłówkami h4 tuż po h2 z treści strony — axe `heading-order`. Tagi zmienione
 * na h2 w szablonie stopki 73. Rozmiar i grubość pisma są ustawione w samym
 * widgecie, więc się nie zmieniły, ale interlinia jest dziedziczona po tagu
 * i spadła z 21,6 px na 19,2 px (zmierzone symulacją w DOM przed zmianą).
 * Przypinamy dawną wartość, żeby stopka wyglądała dokładnie tak jak przedtem.
 * ------------------------------------------------------------------------- */
footer .elementor-element-34676b27 h2,
footer .elementor-element-475b834e h2,
footer .elementor-element-766a5310 h2,
footer .elementor-element-40d9a4c8 h2 {
	line-height: 1.35;
}

/* ---------------------------------------------------------------------------
 * 5. Nagłówki kart na stronach usług po zmianie tagu (karta N-3)
 *
 * Grupy kart „Dla kogo realizuję…", „Co otrzymujesz po sesji" i „Cennik" leżały
 * bezpośrednio pod h2, a były nagłówkami h4 — axe `heading-order`, WCAG 1.3.1.
 * Zmierzone 22.09 w źródle stron: 3 przeskoki na /fotografia-produktowa/,
 * 3 na /fotografia-ai/, 2 na /fotografia-wnetrz-i-nieruchomosci/,
 * 2 na /sesja-wizerunkowa/. Tagi podniesione do h3 w _elementor_data
 * (48 widgetów), bloki „Jak wygląda proces" zostawione bez zmian — tam h4 leży
 * pod h3 „01"…„05" i przeskoku nie ma.
 *
 * Sam poziom nagłówka niesie w tym motywie typografię: kit Elementora ubiera
 * h4 w Open Sans 20/18/17 px o wadze 600 i interlinii 1.35, a h3 na desktopie
 * spada na reset Hello Elementora (28 px, waga 500, interlinia 1.2). Bez tego
 * bloku karty urosłyby o 8 px i zmieniły krój. Przypinamy dawny wygląd —
 * to samo podejście co przy nagłówkach stopki (sekcja 4).
 * ------------------------------------------------------------------------- */
.js-naglowek-karty .elementor-heading-title {
	font-family: "Open Sans", Sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35em;
}

@media (max-width: 1024px) {
	.js-naglowek-karty .elementor-heading-title {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.js-naglowek-karty .elementor-heading-title {
		font-size: 17px;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Pole trafienia kropek paginacji karuzeli (karta N-8)
 *
 * WCAG 2.5.8 Target Size (Minimum), reguła axe `target-size` przy obu
 * rzutniach. Kropki `span.swiper-pagination-bullet` na stronie głównej mają
 * 6 × 6 px (zmienna --swiper-pagination-bullet-size z e-swiper.css) wobec
 * wymaganych 24 × 24 px.
 *
 * Powiększamy obszar dotykowy, nie kropkę. Bąbel ma 24 × 24 px i przezroczystą
 * wyściółkę, a tło maluje się wyłącznie po polu treści (`background-clip`),
 * czyli na dawnych 6 px. Świadome odstępstwo od rekomendacji audytu, która
 * proponowała przenieść wygląd na ::before z `background: currentColor` —
 * tamto zerwałoby sterowanie kolorem i przezroczystością kropki aktywnej,
 * które Swiper trzyma we własnych zmiennych na `background` i `opacity`.
 * Zaokrąglenie wewnętrzne wychodzi 12 px − 9 px wyściółki = 3 px, czyli
 * dokładnie połowa 6-pikselowego pola: kropka zostaje okrągła.
 * ------------------------------------------------------------------------- */
.elementor-widget-slides .swiper-pagination-bullet {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	padding: 9px;
	background-clip: content-box;
	margin: 0 2px;
}

/* ---------------------------------------------------------------------------
 * 7. Przycisk zatrzymania karuzeli (karta N-9)
 *
 * WCAG 2.2.2 Pause, Stop, Hide. Przycisk powstaje w assets/js/dostepnosc.js
 * i jest wstawiany jako pierwsze dziecko widżetu — stąd pierwszy w kolejności
 * fokusu, jeszcze przed strzałkami i slajdami. Trzymamy go w bezwzględnym
 * pozycjonowaniu w prawym górnym rogu kadru, żeby nie przesuwać układu sekcji
 * nagłówkowej: żaden element strony głównej nie zmienia przez niego miejsca.
 *
 * Tło jest nieprzezroczyste i ciemne, a nie półprzezroczyste, bo slajdy mają
 * różne zdjęcia i dwa różne przyciemnienia — kontrast ikony musi być pewny
 * niezależnie od tego, co pod nią leży. Obwódka odcina przycisk od jasnych
 * kadrów. Pole trafienia 44 × 44 px, czyli z zapasem ponad wymagane 24 px.
 *
 * Selektory prowadzimy przez `.elementor-widget-slides`, bo kit Elementora
 * ubiera każdy `button` regułą `.elementor-kit-4 button` — specyficzność (0,1,1)
 * bije samą klasę. Zmierzone 22.09: bez tego przycisk miał 84 × 44 px zamiast
 * okręgu (wyściółka 14/40 px zamiast zera), a na fokusie barwił się na czerwono
 * (#C1272D) z globalnego stanu `button:focus`. Dlatego `:focus` stoi tu obok
 * najechania — wygląd przycisku ma być decyzją, nie resztką po stylu kitu.
 * ------------------------------------------------------------------------- */
.elementor-widget-slides {
	position: relative;
}

.elementor-widget-slides .js-pauza-slajdow {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: #1A1A1A;
	color: #FFFFFF;
	cursor: pointer;
}

.elementor-widget-slides .js-pauza-slajdow:hover,
.elementor-widget-slides .js-pauza-slajdow:focus {
	background: #333333;
}

.elementor-widget-slides .js-pauza-slajdow:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.85);
}

/* ---------------------------------------------------------------------------
 * 8. Ikony przycisku pauzy i region statusu karuzeli
 *
 * Obie ikony stoją w dokumencie na stałe, przełączamy atrybutem `hidden` —
 * uzasadnienie przy module 3 w assets/js/dostepnosc.js. Reguła niżej jest
 * asekuracją: przycisk jest kontenerem `flex`, a arkusz przeglądarki nadaje
 * `[hidden]` display:none regułą o najniższej specyficzności.
 *
 * Region statusu musi zostać w drzewie dostępności, więc chowamy go klasycznym
 * przycięciem, a nie `display: none` ani `visibility: hidden` — jedno i drugie
 * wyjmuje żywy region z drzewa i czytnik przestaje go czytać.
 * ------------------------------------------------------------------------- */
.elementor-widget-slides .js-pauza-slajdow .js-ikona {
	display: flex;
}

.elementor-widget-slides .js-pauza-slajdow .js-ikona[hidden] {
	display: none;
}

.elementor-widget-slides .js-status-slajdow {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * 9. Widoczność kropek paginacji karuzeli
 *
 * WCAG 1.4.11 Non-text Contrast. Zmierzone 22.09: kropka aktywna to pełna
 * czerń, nieaktywne czerń przy kryciu 0.2 — domyślne barwy Swipera. Wszystkie
 * trzy slajdy strony głównej to ciemne zdjęcia (dwa z przyciemnieniem 50%,
 * trzecie ciemne samo z siebie), więc kropki są praktycznie niewidoczne,
 * a kontrast kropki aktywnej wobec kadru bliski 1:1.
 *
 * Nie da się dobrać jednej barwy pewnej wobec fotografii, bo tło zmienia się
 * ze slajdem i z kadrowaniem. Dlatego kropki są białe, a cień rzucony na
 * kontener obrysowuje ciemną obwódką dokładnie to, co jest namalowane —
 * `drop-shadow` idzie po kanale alfa, więc trzyma się 6-pikselowego pola
 * treści, nie 24-pikselowego bąbla. Krawędź biel–czerń zostaje niezależnie
 * od zdjęcia pod spodem.
 *
 * Stan aktywny odróżnia krycie bieli, nie sam kolor: 0.55 wobec 1.0.
 * ------------------------------------------------------------------------- */
.elementor-widget-slides .swiper-pagination {
	filter: drop-shadow( 0 0 1.5px rgba( 0, 0, 0, 0.95 ) );
}

.elementor-widget-slides .swiper-pagination-bullet {
	opacity: 1;
	background-color: rgba( 255, 255, 255, 0.55 );
}

.elementor-widget-slides .swiper-pagination-bullet-active {
	opacity: 1;
	background-color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
 * 10. Tabele kryteriów na /dostepnosc/ — WCAG 1.4.10 Reflow (AA)
 *
 * Oświadczenie o dostępności ma cztery tabele (kryterium / poziom / wynik).
 * Przy 320 px trzy kolumny z domyślnym wypełnieniem 15 px Hello Elementora
 * zostawiają na tekst niecałe 200 px, a najdłuższe słowa („uwierzytelnianie",
 * „Audiodeskrypcja") mogłyby rozepchnąć tabelę. Tabela ma się mieścić
 * w szerokości ekranu i zawijać treść komórek — bez przewijania w poziomie.
 * ------------------------------------------------------------------------- */
.js-tabela-kryteriow {
	margin: 0 0 1.5em;
}

.js-tabela-kryteriow table {
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
}

.js-tabela-kryteriow th,
.js-tabela-kryteriow td {
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
	hyphens: auto;
}

@media ( max-width: 480px ) {

	.js-tabela-kryteriow th,
	.js-tabela-kryteriow td {
		padding: 8px 6px;
	}
}