/*
 * Trycholabs — poprawki dostępności (WCAG 2.1 AA).
 * Motyw potomny, żeby aktualizacja Astry tego nie nadpisała.
 * 8 września 2026
 */

/* --- 1. Kontrast: menu mobilne (off-canvas) --------------------------------
   Panel modułu i1uftogr5yke ma tło #435EF1. Czarny tekst dawał 4,1:1
   przy wymaganych 4,5:1; biały na tym niebieskim to 6,4:1.

   UWAGA: selektor musi być zawężony do tego jednego modułu. Na stronie jest
   drugie, klonowane menu off-canvas o tle #fbfbf7 (jasnym) — tam biały tekst
   byłby niewidoczny.

   !important, bo Beaver Builder generuje regułę o tej samej wadze,
   a jego <style> stoi w dokumencie za naszym arkuszem.                       */
.fl-node-i1uftogr5yke .uabb-off-canvas-menu .menu-item-text,
.fl-node-i1uftogr5yke .uabb-off-canvas-menu .menu li a,
.fl-node-i1uftogr5yke .uabb-off-canvas-menu .uabb-has-submenu-container > a {
	color: #fff !important;
}

/* --- 2. Kontrast: ciemna stopka --------------------------------------------
   Menu stopki: #0170b9 na czerni to 4,01:1. #1f8ed6 daje 5,7:1
   i zostaje w tej samej rodzinie koloru.
   Pola newslettera: #666666 na czerni to 3,65:1. #b9b9b9 daje 8,3:1.          */
#menu-footer a,
#menu-footer a:visited {
	color: #1f8ed6 !important;
}
.mc4wp-form input[type="text"],
.mc4wp-form input[type="email"],
.mc4wp-form input[type="tel"] {
	color: #c4c4c4 !important;
}
.mc4wp-form input::placeholder {
	color: #b9b9b9 !important;
	opacity: 1;
}

/* --- 3. Kolejność nagłówków: zachowanie wyglądu po zmianie tagów -----------
   Tytuły składników h6 -> h3, zakładki UABB h5 -> h3.
   Poniższe reguły pilnują, żeby wygląd był identyczny jak przed zmianą.      */
.ingridient-title {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	margin: 25px 0 10px;
	color: #3a3a3a;
}
.hero-ingridient-title {
	font-size: 11px;
	font-weight: 500;
	line-height: 14.3px;
	margin: 0;
	color: #000;
}

/* Trzy kafelki pod hero na stronie głównej: h6 -> h2 (po h1 nie może być h6).
   Te moduły nie miały ustawionego font-size — brał się z samego znacznika,
   więc bez tego h2 urosłoby z 16 na 32 px.                                   */
.fl-node-yfqx7pe8jtng .uabb-infobox-title,
.fl-node-gv7qrzkie6b2 .uabb-infobox-title,
.fl-node-mb6dl4oncevw .uabb-infobox-title {
	font-size: 16px;
	line-height: 1.3;
}
.uabb-tabs .uabb-tag-selected {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
}
/* Cena na karcie produktu: h6 -> div (cena to nie nagłówek).
   BB ustawia font-size/weight/family na klasie, brakuje tylko interlinii.    */
.fl-node-do6s2kjbfx3i.fl-module-heading {
	line-height: 1.3;
}
/* "Dostawa 1-2 dni robocze z InPost" — komunikat, też h6 -> div.             */
.fl-node-td39ywrbh6m5.fl-module-heading {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

/* --- 3b. Kontrast: przycisk „do koszyka" na kafelkach produktów -----------
   Etykieta jest chowana przez font-size:0 (widać samą ikonę SVG),
   ale biały tekst na #b8f365 to 1,3:1. Kolor nie wpływa na ikonę,
   więc ustawiamy ciemny — wtedy etykieta jest czytelna również wtedy,
   gdy ikona się nie wczyta.                                                  */
a.add_to_cart_button,
a.product_type_simple,
a.product_type_variable {
	color: #0a3011;
}

/* --- 3c. Nagłówek nad hero: h3 -> h2 (po h1 nie może być h3) ---------------
   Rozmiar pilnowany wyżej w .hero-ingridient-title.                          */

/* --- 3d. Wysokosc wiersza hero -------------------------------------------
   Wiersz ma klase fl-row-custom-height = 90% wysokosci okna, ale Beaver
   Builder wylicza to i przypisuje DOPIERO ze skryptu (15-layout.js).
   Skutkiem byl albo skok ukladu (CLS 0,202 na desktopie), albo — gdy ten
   skrypt wyjelo z opozniania — 700 ms wymuszonego przeformatowania
   i TBT 630 ms. Podanie wysokosci w CSS rozwiazuje jedno i drugie:
   wiersz ma swoja wysokosc juz przy pierwszym malowaniu, a przypisanie
   z JS staje sie bezczynne.                                                  */
.fl-node-6166b52d32a01 > .fl-row-content-wrap {
	min-height: 90vh;
}

/* --- 4. Widoczny focus dla klawiatury --------------------------------------
   Astra gasi outline w kilku miejscach; bez tego nawigacja Tab jest ślepa.   */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.pp-faq-button:focus-visible {
	outline: 2px solid #1c1c1c;
	outline-offset: 2px;
}

/* Tekst tylko dla czytników ekranu (WordPress-owy wzorzec). */
.tl-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}