/*
Theme Name: AURACO
Theme URI: https://auraco.pl
Author: AURACO sp. z o.o.
Description: Blokowy motyw serwisu auraco.pl. Zbudowany na wzorcach i blokach rdzennych, bez kreatora stron i bez zależności zewnętrznych. Kroje pisma serwowane z własnego serwera.
Version: 0.7.317
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: auraco
Tags: block-templates, full-site-editing, one-column, custom-colors, custom-menu
*/

/* Ustawienia wizualne żyją w theme.json. Tutaj wyłącznie to,
   czego theme.json nie potrafi wyrazić. */

/* Dzielenie wyrazów w tekście ciągłym: bez niego justowanie
   po polsku tworzy rzeki białych plam. */
.wp-block-post-content p,
.auraco-tekst p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Justowanie tekstu wpisów (decyzja Piotra z 5.10.2026). Tylko akapity
   i punkty list w treści wpisu – nagłówki, podpisy i przyciski zostają
   wyrównane do lewej. „text-wrap: pretty” nie zostawia pojedynczego
   słowa w ostatnim wierszu akapitu, co przy justowaniu razi najbardziej. */
.auraco-tekst p,
.auraco-tekst li {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Bez justowania: akapity, które zaczynają się od odnośnika (wiersze
   „Źródło: …”) albo są w całości kursywnym podpisem. Justowanie rozciągało
   je na telefonie do kilku słów z dziurami między nimi. */
.auraco-tekst p:has(> a:first-child),
.auraco-tekst p:has(> em:only-child),
.auraco-tekst p:has(> strong:only-child),
.auraco-tekst p:has(> b:only-child) {
  text-align: left;
}

/* Kolumna wpisu jest szeroka na „max-width” każdego dziecka, a WordPress
   liczy ją przy content-box. Wszystko, co ma własny padding (listy z wcięciem
   na punktory, ramka „Aktualizacja”, cytaty), wychodziło więc poza kolumnę
   o ten padding – listy o 20 px z każdej strony, ramka aktualizacji o 21 px.
   Audyt 90 wpisów, 5.10.2026. */
.auraco-tekst > * {
  box-sizing: border-box;
}

/* Widoczne obramowanie skupienia. Domyślne bywa niewidoczne
   na ciemnym tle, a bez niego nawigacja klawiaturą jest ślepa. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--brass-600);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Obszary dotykowe: WCAG 2.5.8 wymaga 24 na 24 piksele,
   my trzymamy 44, bo to realna wielkość kciuka. */
.wp-block-button__link,
.wp-block-navigation-item__content {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Wykaz w stopce prowadzi się myszą, nie kciukiem. Cel wysokości kciuka
   rozsuwał tam pozycje na 54 piksele przy 35 w makiecie; przy kursorze
   precyzyjnym wystarczy próg 24 pikseli z WCAG 2.5.8. */
@media (pointer: fine) {
  .auraco-stopka__menu .wp-block-navigation-item__content {
    min-height: 24px;
  }
}

/* Nagłówki: równoważenie łamania, żeby nie zostawał sierotą
   pojedynczy wyraz w ostatnim wierszu. */
h1, h2, h3,
.wp-block-heading {
  text-wrap: balance;
}

/* Akapity: unikanie sierot na końcu akapitu. */
p {
  text-wrap: pretty;
}

/* Tabele na wąskich ekranach przewijają się we własnym
   kontenerze, a nie całą stroną. */
.wp-block-table {
  overflow-x: auto;
}

/* Wygląd tabeli wzięty z makiet – wszystkie cztery rysują ją tak samo:
   ciemny pasek nagłówkowy z wersalikami i wiersze rozdzielone kreską.
   Konwerter przenosił samą treść, więc tabela na stronie była naga. */
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table thead {
  background: var(--wp--preset--color--espresso-700);
}

.wp-block-table th {
  padding: 13px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass-300);
  border: 0;
}

.wp-block-table td {
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #3e3e3d;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--stone-200);
  vertical-align: top;
}

/* Pierwsza kolumna nazywa wiersz, więc jest wyróżniona. */
.wp-block-table td:first-child {
  font-weight: 700;
  color: #1b1a18;
}

/* Element pomijany wzrokowo, dostępny dla czytnika ekranu. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 12px 20px;
  clip-path: none;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--espresso-900);
  font-weight: 700;
}

/* Osoby, które wybrały ograniczenie ruchu, dostają statyczną stronę. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   Nagłówek
   ---------------------------------------------------------------------- */

.auraco-godlo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--wp--preset--color--brass-600);
  text-decoration: none;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.14em;
}

.auraco-godlo--stopka {
  font-size: 18px;
}

.auraco-eaura {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--brass-300);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brass-400) 35%, transparent);
  border-radius: 4px;
  text-decoration: none;
}

.auraco-eaura:hover {
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--brass-600);
  text-decoration: none;
}

/* Pozycja menu z rozwinięciem: strzałka i podświetlenie jak w makiecie. */
.auraco-menu .wp-block-navigation-item__content {
  padding: 8px 12px;
  border-radius: 4px;
}

.auraco-menu .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.auraco-menu .current-menu-item > .wp-block-navigation-item__content {
  background: color-mix(in srgb, var(--wp--preset--color--brass-600) 28%, transparent);
  color: var(--wp--preset--color--white);
}

/* Rozwinięcie menu.
   WordPress dokleja rozwinięciu klasę tła odziedziczoną po nagłówku
   (has-espresso-700-background-color) i generuje ją z !important, bo tak
   działają wszystkie klasy kolorów z palety. Panel wychodzi więc ciemny,
   a ciemny tekst na nim znika. Specyficzność tu nie pomoże, bo po drugiej
   stronie stoi !important, i to jedyny powód, dla którego go używamy. */
.auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container {
  border: 0;
  border-top: 3px solid var(--wp--preset--color--brass-600);
  border-radius: 0 0 4px 4px;
  background-color: var(--wp--preset--color--white) !important;
  box-shadow: 0 14px 30px -10px rgb(30 20 15 / 25%);
  padding: 8px 0;
  min-width: 300px;
}

.auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container,
.auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container li,
.auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container a,
.auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container a:visited {
  color: var(--wp--preset--color--espresso-900) !important;
}

.auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 10px 18px;
  border-radius: 0;
  font-weight: 700;
}

.auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background-color: var(--wp--preset--color--brass-50);
  color: var(--wp--preset--color--brass-900);
}

/* -------------------------------------------------------------------------
   Stopka
   ---------------------------------------------------------------------- */

.auraco-stopka__naglowek {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Nawigacja pionowa dziedziczy globalny odstęp między blokami,
   przez co pozycje w stopce rozjeżdżają się na pół ekranu. */
.auraco-stopka__menu.wp-block-navigation {
  --wp--style--block-gap: 0;
  gap: 10px;
}

.auraco-stopka__menu .wp-block-navigation__container {
  gap: 10px;
}

.auraco-stopka__menu a {
  color: var(--wp--preset--color--stone-400);
  font-weight: 400;
}

.auraco-stopka__menu a:hover {
  color: var(--wp--preset--color--brass-300);
}

.auraco-kontakt {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
}

.auraco-kontakt a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wp--preset--color--brass-300);
  text-decoration: none;
}

.auraco-kontakt a:hover {
  text-decoration: underline;
}

.auraco-kontakt svg {
  color: var(--wp--preset--color--brass-600);
  flex: none;
}

.auraco-stopka__dol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--brass-600) 20%, transparent);
  font-size: 14px;
  color: var(--wp--preset--color--stone-500);
}

/* -------------------------------------------------------------------------
   Nota o udziale AI
   ---------------------------------------------------------------------- */

.auraco-nota {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: help;
}

.auraco-nota svg {
  opacity: 0.75;
  transition: opacity 0.15s;
}

.auraco-nota:hover svg,
.auraco-nota:focus-visible svg {
  opacity: 1;
}

.auraco-nota__etykieta {
  border-bottom: 1px dotted color-mix(in srgb, var(--wp--preset--color--stone-500) 70%, transparent);
}

.auraco-nota__tresc {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(330px, 80vw);
  padding: 14px 16px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--stone-800);
  border-radius: 4px;
  border-top: 3px solid var(--wp--preset--color--brass-600);
  box-shadow: 0 12px 28px -10px rgb(0 0 0 / 45%);
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 20;
}

.auraco-nota:hover .auraco-nota__tresc,
.auraco-nota:focus-within .auraco-nota__tresc {
  opacity: 1;
  visibility: visible;
}

.auraco-nota__tresc strong {
  display: block;
  color: var(--wp--preset--color--espresso-900);
  margin-bottom: 5px;
  font-size: 14px;
}

.auraco-nota__tresc span {
  display: block;
  margin-top: 8px;
}

/* Poniżej szerokości biurkowej dymek nie ma dokąd uciec w bok: wyśrodkowany
   nad znakiem wystawał poza prawą krawędź okna i strona dostawała pasek
   przewijania. Na wąskim ekranie rozwija się więc pod spodem, w toku treści. */
@media (max-width: 900px) {
  .auraco-nota__tresc {
    position: static;
    display: none;
    width: 100%;
    margin-top: 10px;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .auraco-nota {
    flex-wrap: wrap;
  }

  .auraco-nota:hover .auraco-nota__tresc,
  .auraco-nota:focus-within .auraco-nota__tresc {
    display: block;
  }
}

/* -------------------------------------------------------------------------
   Elementy wzorców
   ---------------------------------------------------------------------- */

.auraco-nadkreslenie {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Krótka kreska pod nagłówkiem sekcji.
   Sam element zajmuje całą kolumnę treści i jest centrowany tak samo
   jak nagłówek nad nim, a widoczny odcinek rysuje pseudo-element przy
   jego lewej krawędzi. Dzięki temu kreska trafia dokładnie pod początek
   nagłówka niezależnie od tego, czy sekcja jest pełnej szerokości. */
.wp-block-separator.auraco-kreska {
  position: relative;
  width: 100%;
  max-width: var(--wp--style--global--content-size);
  height: 1px;
  border: 0;
  background: none;
  margin: 24px auto;
  opacity: 1;
}

.wp-block-separator.auraco-kreska::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 1px;
  content: "";
  background: var(--wp--preset--color--brass-600);
}

.auraco-ikona {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--wp--preset--color--brass-50);
  border: 1px solid var(--wp--preset--color--brass-100);
  color: var(--wp--preset--color--brass-600);
}

/* Znak w wypełnionym krążku, tak jak w projekcie: mosiądz pod spodem,
   ciemny rysunek na wierzchu. Wariant podstawowy zostaje jasny, bo używamy
   go tam, gdzie makieta też nie wypełnia tła. */
.auraco-ikona--krag {
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  color: var(--wp--preset--color--espresso-900);
  background: var(--wp--preset--color--brass-600);
  border: 0;
}

/* Strzałka przy odnośniku stoi w wierszu z napisem, nie pod nim. */
.auraco-odnosnik {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wp--preset--color--brass-800);
  text-decoration: none;
}

.auraco-odnosnik:hover {
  color: var(--wp--preset--color--brass-900);
}

.auraco-strzalka {
  display: inline-flex;
  flex: none;
}

.auraco-ikona--duza {
  flex: none;
  background: none;
  border: 0;
  width: auto;
  height: auto;
  margin: 2px 0 0;
}

.auraco-cudzyslow {
  flex: none;
  color: var(--wp--preset--color--brass-600);
}

.auraco-cytat {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  line-height: 1.7;
  max-width: 74ch;
}

/* Liczba w pasku danych: siedemdziesiąt dwa piksele i krój podstawowy,
   jak w projekcie. Wcześniej szła szeryfem w rozmiarze nagłówka, przez co
   ginęła obok tekstu zamiast go zdominować. */
.auraco-liczba {
  margin-bottom: 8px;
  /* Skrótu ani liczby nie wolno przenosić: globalne dzielenie wyrazów
     rozcinało napisy w połowie. Górna granica zeszła z 72 na 58 px, bo
     przy dwóch kolumnach liczb najdłuższy z nich – „20 tys.+" – nie
     mieścił się w szpalcie o szerokości 231 px i przechodził do drugiego
     wiersza. Spacja w takim zapisie musi być nierozdzielająca. */
  hyphens: manual;
  -webkit-hyphens: manual;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* Znacznik kategorii nad tytułem wpisu.
   Wpis bywa w dwóch kategoriach naraz. Tło niesie każdy odnośnik z osobna,
   bo wspólne obejmowało też przecinek rozdzielający i czytało się jak jedna,
   dziwnie nazwana kategoria. Przecinek zastępuje odstęp siatki. */
.auraco-znacznik {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.auraco-znacznik a,
.auraco-znacznik:not(:has(a)) {
  display: inline-block;
  padding: 2px 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass-900);
  background: var(--wp--preset--color--brass-100);
  border-radius: 2px;
  text-decoration: none;
}

.auraco-znacznik .wp-block-post-terms__separator {
  display: none;
}

/* Listy z własnym znakiem: potwierdzenie i uwaga. */
.auraco-lista-tak,
.auraco-lista-uwaga,
.auraco-lista-granic {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.auraco-lista-tak li,
.auraco-lista-uwaga li,
.auraco-lista-granic li {
  position: relative;
  padding-left: 30px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgb(0 0 0 / 6%);
  line-height: 1.6;
}

.auraco-lista-tak li:last-child,
.auraco-lista-uwaga li:last-child,
.auraco-lista-granic li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.auraco-lista-tak li::before,
.auraco-lista-uwaga li::before,
.auraco-lista-granic li::before {
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
}

.auraco-lista-tak li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d6a4a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.auraco-lista-uwaga li::before,
.auraco-lista-granic li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
}

.auraco-lista-granic li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ae9048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
}

.auraco-lista-granic li {
  border-bottom-color: rgb(255 255 255 / 12%);
}

/* Oś kroków: linia łącząca kropki. */
.auraco-os {
  position: relative;
}

.auraco-os::before {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 22px;
  height: 2px;
  content: "";
  background: var(--wp--preset--color--brass-100);
}

.auraco-krok__kropka {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--brass-600);
  color: var(--wp--preset--color--brass-600);
}

.auraco-krok__numer {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 600;
  margin-bottom: 6px;
}

@media (max-width: 781px) {
  .auraco-os::before {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Okruszki i elementy szablonów
   ---------------------------------------------------------------------- */

.auraco-okruszki a {
  color: var(--wp--preset--color--stone-400);
  font-weight: 400;
}

.auraco-okruszki a:hover {
  color: var(--wp--preset--color--brass-300);
}

.auraco-okruszki span {
  padding: 0 8px;
  color: var(--wp--preset--color--espresso-400);
}

/* Zajawka w nagłówku strony dziedziczy kolor po sekcji,
   ale rdzeń nadaje jej własny margines. */
.wp-block-post-excerpt__excerpt {
  margin: 0;
  max-width: 62ch;
}

/* Tytuł wpisu w kartach: bez podkreślenia, kolor tekstowy. */
.wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}

.wp-block-post-title a:hover {
  color: var(--wp--preset--color--brass-800);
  text-decoration: none;
}

/* Karty w siatce wyrównane do wspólnej wysokości. */
.wp-block-post-template.is-layout-grid > li > .wp-block-group {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wp-block-post-template.is-layout-grid .wp-block-post-date {
  margin-top: auto;
  padding-top: 12px;
}

/* Stronicowanie listy wpisów. */
.wp-block-query-pagination {
  gap: 8px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--wp--preset--color--stone-200);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
}

.wp-block-query-pagination .current {
  background: var(--wp--preset--color--brass-600);
  border-color: var(--wp--preset--color--brass-600);
  color: var(--wp--preset--color--espresso-900);
}

/* Sekcje w treści przylegają do siebie: odstęp między nimi
   tworzy padding sekcji, nie globalny blockGap. */
main.wp-block-group,
header.wp-block-group,
footer.wp-block-group {
  --wp--style--block-gap: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Makiety rysują kolumnę treści z marginesem 48 px po bokach i tak jest
   na szerokim ekranie. Na wąskim tyle miejsca nie ma – wtedy wystarczy
   połowa, inaczej wiersz robi się za krótki. */
/* Selektor „:root body”, nie samo „:root”: WordPress wpisuje te zmienne
   regułą na „body” w stylach globalnych, a wartość z body wygrywa dla
   wszystkiego wewnątrz strony. Z samym „:root” telefon dostawał 48 px
   z każdej strony i kolumnę wpisu o szerokości 294 px (sprawdzone 5.10.2026). */
@media (max-width: 782px) {
  :root,
  :root body {
    --wp--style--root--padding-left: 24px;
    --wp--style--root--padding-right: 24px;
  }
}

/* Nagłówek, treść i stopka przylegają do siebie. WordPress rozdziela bloki
   najwyższego poziomu globalnym odstępem – tu robił z niego biały pasek nad
   ciemną sekcją otwierającą i drugi taki sam nad stopką. */
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

main.wp-block-group > .wp-block-group,
main.wp-block-group > .wp-block-post-content > .wp-block-group,
main.wp-block-group > .wp-block-post-content > .alignfull {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Treść strony rozciąga sekcje pełnej szerokości poza kontener. */
.wp-block-post-content > .alignfull {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
  width: 100vw;
}

/* W kolumnie kreska nie ma czego centrować: kolumna jest już wąska. */
.wp-block-column > .wp-block-separator.auraco-kreska {
  max-width: 100%;
}

/* Kropka na osi kroków wyśrodkowana w kolumnie, żeby trafiała
   w linię łączącą; tekst zostaje wyrównany do lewej. */
.auraco-krok {
  display: flex;
  flex-direction: column;
}

.auraco-krok .auraco-krok__kropka {
  align-self: center;
}

/* Pole wyszukiwania. */
.wp-block-search__input {
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: var(--wp--preset--font-size--large);
  font-family: inherit;
}

.wp-block-search__button {
  background: var(--wp--preset--color--brass-600);
  color: var(--wp--preset--color--espresso-900);
  border: 0;
  border-radius: 4px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.wp-block-search__button:hover {
  background: var(--wp--preset--color--brass-700);
}

/* -------------------------------------------------------------------------
 * Formularz kontaktowy
 * ---------------------------------------------------------------------- */

.auraco-formularz__alarm {
  margin: 0 0 24px;
  padding: 16px 20px;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  line-height: 1.5;
  color: var(--wp--preset--color--alert);
  background: #fdf3f1;
  border-left: 3px solid var(--wp--preset--color--alert);
  border-radius: 2px;
}

.auraco-pole {
  margin-bottom: 24px;
}

.auraco-pole label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--wp--preset--color--espresso-900);
}

.auraco-pole__gwiazdka {
  color: var(--wp--preset--color--alert);
}

/* Adnotacja w samej etykiecie, nie pod nią: dwa pola stojące obok siebie
   mają wtedy etykiety tej samej wysokości i ich ramki się pokrywają. */
.auraco-pole__podpowiedz {
  margin-left: 6px;
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 400;
  color: var(--wp--preset--color--stone-600);
}

.auraco-pole input[type="text"],
.auraco-pole input[type="email"],
.auraco-pole input[type="tel"],
.auraco-pole select,
.auraco-pole textarea {
  /* Bez tego wypełnienie i obramowanie doliczają się do stu procent
     szerokości, a pole wystaje poza kolumnę – widać dopiero na telefonie. */
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.5;
  color: var(--wp--preset--color--espresso-900);
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 4px;
}

.auraco-pole textarea {
  min-height: 150px;
  resize: vertical;
}

.auraco-pole input:focus-visible,
.auraco-pole select:focus-visible,
.auraco-pole textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--brass-700);
  outline-offset: 1px;
}

/* Stan błędu nigdy samą barwą: obwódka, ikona i zdanie, co poprawić. */
.auraco-pole [aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--wp--preset--color--alert);
}

.auraco-pole__blad {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 700;
  line-height: 1.4;
  color: var(--wp--preset--color--alert);
}

.auraco-pole__blad svg {
  flex: none;
  margin-top: 2px;
}

.auraco-formularz__para {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 600px) {
  .auraco-formularz__para {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Rodzaj sprawy w formularzu kontaktowym: grupa bez ramki fieldsetu,
   legenda wygląda jak etykieta zwykłego pola. */
.auraco-pole--rodzaj {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.auraco-pole--rodzaj legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--wp--preset--color--espresso-900);
}

/* Pole wyboru albo przycisk opcji obok treści, nie nad nią. */
.auraco-pole .auraco-pole__wybor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
  font-weight: 400;
  line-height: 1.5;
}

.auraco-pole__wybor input {
  flex: none;
  margin-top: 4px;
}

.auraco-pole[hidden] {
  display: none;
}

/* Informacja o danych w formularzu kontaktowym: drobny druk tuż nad przyciskiem,
   pod polem zgody, z odstępem, żeby nie sklejała się z przyciskiem. */
.auraco-pole--informacja {
  margin: 8px 0 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wp--preset--color--stone-700);
}

/* Drobny druk bez dzielenia wyrazów; reguła treści strony
   (.wp-block-post-content p) ma wyższą specyficzność. */
.auraco-formularz .auraco-pole--informacja {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Pułapka na automaty. Wyprowadzona poza ekran, a nie ukryta własnością
   display, bo tę pierwszy lepszy skrypt rozpoznaje i pole omija. */
.auraco-pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auraco-klauzula {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--wp--preset--color--stone-100);
  border-radius: 2px;
}

.auraco-klauzula summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 700;
  color: var(--wp--preset--color--stone-800);
  cursor: pointer;
}

.auraco-klauzula p {
  margin: 8px 0 0;
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.55;
  color: var(--wp--preset--color--stone-600);
}

.auraco-przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bez tego min-height liczy się od samej treści i dopełnienie dochodzi osobno:
     przycisk miał 84 px zamiast 52 i był o połowę wyższy od przycisków blokowych. */
  box-sizing: border-box;
  min-height: 52px;
  padding: 16px 40px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--espresso-900);
  background: var(--wp--preset--color--brass-600);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Klasa nadana blokowi przycisku ląduje na jego opakowaniu, a właściwy przycisk
   siedzi w środku z własnym dopełnieniem. Opakowanie oddaje mu więc tło i odstępy,
   inaczej liczą się podwójnie („Umów rozmowę” w walidatorze NIS2 miało 90 px). */
.wp-block-button.auraco-przycisk {
  min-height: 0;
  padding: 0;
  background: none;
}

.wp-block-button.auraco-przycisk > .wp-block-button__link {
  box-sizing: border-box;
  min-height: 52px;
  padding: 16px 40px;
  font-size: 17px;
  font-weight: 700;
}

.auraco-przycisk:hover {
  background: var(--wp--preset--color--brass-700);
}

.auraco-przycisk:focus-visible {
  outline: 2px solid var(--wp--preset--color--espresso-900);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Newsletter – zapis
 * ---------------------------------------------------------------------- */

/* Blok wchodzi w sekcję, którą strona już ma: to ona daje tło, szerokość
   i wcięcia. Powtórzenie ich tutaj podwoiłoby odstęp w pasie na stronie
   głównej i rozsadziło pudełko na stronie Doświadczenia. */
.auraco-nl__karta {
  padding: 24px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 4px;
}

.auraco-nl__kolumny {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 720px) {
  .auraco-nl__kolumny {
    grid-template-columns: 1fr;
  }
}

/* Barwy wprost, nie z dziedziczenia. Pas trafia też do sekcji, która ustawia
   jasny kolor tekstu pod ciemne tło; pudełko na stronie Doświadczenia jest
   wtedy jasne, a odziedziczony jasny tekst znika na jasnym tle. */
.auraco-nl__naglowek {
  margin: 0 0 10px;
  color: var(--wp--preset--color--espresso-900);
}

.auraco-nl__wstep {
  margin: 0;
  color: var(--wp--preset--color--stone-800);
}

/* Pole i przycisk w jednym wierszu, równane dołem: etykieta stoi nad polem,
   a przycisk żadnej nie ma. */
.auraco-nl__wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}

.auraco-nl__wiersz .auraco-pole {
  flex: 1 1 240px;
  margin-bottom: 0;
}

.auraco-nl__wiersz .auraco-przycisk {
  flex: none;
  padding-left: 28px;
  padding-right: 28px;
}

/* Komunikat o błędzie stoi pod wierszem, nie w środku pola: w środku
   wypchnąłby przycisk niżej i wiersz przestałby się równać. */
.auraco-nl__wiersz + .auraco-pole__blad {
  margin: -12px 0 20px;
}

.auraco-nl__sukces {
  padding: 16px;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  color: var(--wp--preset--color--espresso-900);
  background: #e4efe8;
  border-left: 3px solid #2f7355;
  border-radius: 2px;
}

.auraco-mat__sukces {
  padding: 16px;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  color: var(--wp--preset--color--espresso-900);
  background: #e4efe8;
  border-left: 3px solid #2f7355;
  border-radius: 2px;
}

.auraco-mat__sukces:focus {
  outline: 2px solid var(--wp--preset--color--brass-600);
  outline-offset: 2px;
}

.auraco-mat form .auraco-przycisk {
  margin-top: 8px;
}

.auraco-pole__nota {
  margin: 4px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wp--preset--color--stone-700);
}

.auraco-pole--zgoda em {
  font-style: normal;
  color: var(--wp--preset--color--stone-700);
}

.auraco-mat__uwaga,
.auraco-nl__administrator,
.auraco-nl__regulamin,
.auraco-nl__wiecej {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wp--preset--color--stone-700);
}

/* Odnośnik do klauzuli pod własnym polem wyboru. Wcięcie 26 px odpowiada
   szerokości pola z marginesem, więc odnośnik stoi w jednej linii pionowej
   z treścią zgody, a nie pod samym kwadracikiem. */
.auraco-pole--zgoda .auraco-pole__klauzula {
  margin: 4px 0 0 26px;
  font-size: 13px;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Newsletter – numer i archiwum
 * ---------------------------------------------------------------------- */

/* Szerokość i wcięcia daje szablon numeru, tak samo jak przy zapisie.
   Blok odpowiada wyłącznie za odstępy między swoimi częściami. */
.auraco-numer__nadtytul {
  margin: 0 0 10px;
}

.auraco-numer__ilustracja {
  margin: 0 0 32px;
}

.auraco-numer__ilustracja img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.auraco-numer__tytul {
  margin: 0 0 20px;
  color: var(--wp--preset--color--espresso-900);
}

.auraco-numer__lead {
  margin: 0 0 16px;
  color: var(--wp--preset--color--stone-800);
}

.auraco-numer__autor,
.auraco-numer__zapowiedz {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--wp--preset--color--stone-700);
}

.auraco-numer__przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
}

.auraco-numer__wtym {
  margin: 48px 0 0;
}

/* Zajawki działów w dwóch kolumnach, każda odkreślona od góry. Kreska
   zastępuje ramkę: kart jest pięć, a pięć pudełek pod artykułem
   przeciążyłoby stronę, na której główną treścią jest tekst. */
.auraco-numer__zajawki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.auraco-numer__zajawka {
  padding-top: 16px;
  border-top: 1px solid var(--wp--preset--color--stone-300);
}

.auraco-numer__dzial {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--brass-800);
}

.auraco-numer__zajawka h3 {
  margin: 0 0 8px;
  color: var(--wp--preset--color--espresso-900);
}

.auraco-numer__zajawka p {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  color: var(--wp--preset--color--stone-800);
}

.auraco-numer .auraco-nl {
  display: block;
  margin: 48px 0 0;
}

/* Nawigacja: poprzedni numer, archiwum, następny. Trzy równe pola, bo
   każde prowadzi tak samo daleko; wyróżnianie jednego sugerowałoby, że
   pozostałe są mniej ważne. */
.auraco-numer__nawigacja {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 48px 0 0;
}

.auraco-numer__krok {
  display: block;
  padding: 16px;
  text-decoration: none;
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 4px;
}

.auraco-numer__krok:hover,
.auraco-numer__krok:focus-visible {
  border-color: var(--wp--preset--color--brass-800);
}

.auraco-numer__kierunek {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--stone-700);
}

.auraco-numer__nazwa {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  color: var(--wp--preset--color--espresso-900);
}

/* Zastępnik w edytorze witryny: na stronie numeru blok bierze treść
   z pól wpisu, a w szablonie żadnego wpisu nie ma. */
.auraco-numer__zastepnik {
  padding: 20px;
  border: 1px dashed var(--wp--preset--color--stone-300);
  border-radius: 4px;
  color: var(--wp--preset--color--stone-800);
}

.auraco-archiwum__siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auraco-archiwum__karta {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--stone-200);
  border-radius: 4px;
}

.auraco-archiwum__miniatura img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
}

.auraco-archiwum__podpis {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--brass-800);
}

.auraco-archiwum__tytul {
  margin: 0 0 8px;
}

.auraco-archiwum__tytul a {
  color: var(--wp--preset--color--espresso-900);
  text-decoration: none;
}

.auraco-archiwum__tytul a:hover,
.auraco-archiwum__tytul a:focus-visible {
  text-decoration: underline;
}

.auraco-archiwum__autor {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--wp--preset--color--stone-700);
}

/* Odnośniki dosunięte do dołu karty, żeby równały się między kartami
   o różnej długości tytułu. */
.auraco-archiwum__odnosniki {
  display: flex;
  gap: 16px;
  margin: auto 0 0;
  font-size: 14px;
}

.auraco-archiwum__pusto {
  margin: 0;
  color: var(--wp--preset--color--stone-700);
}

/* -------------------------------------------------------------------------
 * Zgody – fasady potwierdzenia i wypisania
 * ---------------------------------------------------------------------- */

/* Strona ma jedną treść i jeden przycisk, więc karta jest wąska i stoi
   pośrodku. Wygląd jak karta zapisu na newsletter, bo to ten sam krok
   tej samej sprawy, tyle że dzień później. */
.auraco-zgody {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 4px;
}

/* Nagłówek stoi w każdym stanie karty, także nad samym komunikatem po
   zatwierdzeniu, więc odstęp musi pasować i do wstępu, i do wyniku. */
.auraco-zgody__naglowek {
  margin: 0 0 16px;
  color: var(--wp--preset--color--espresso-900);
}

.auraco-zgody__wstep {
  margin: 0 0 24px;
  color: var(--wp--preset--color--stone-800);
}

.auraco-zgody__wynik {
  margin: 0;
  padding: 16px;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  border-left: 3px solid;
  border-radius: 2px;
}

.auraco-zgody__wynik--ok {
  color: var(--wp--preset--color--espresso-900);
  background: #e4efe8;
  border-left-color: #2f7355;
}

.auraco-zgody__wynik--blad {
  font-weight: 700;
  color: var(--wp--preset--color--alert);
  background: #fdf3f1;
  border-left-color: var(--wp--preset--color--alert);
}

/* Strona prośby o zgodę (EAURA-5422): kilka zgód, każda w ramce z własnym
   polem wyboru, więc karta szersza niż przy jednym przycisku. Etykieta pola
   ma w formularzach pogrubienie; tu pogrubiona jest tylko nazwa zgody,
   a jej treść, która jest dowodem, czyta się zwykłym krojem. */
.auraco-zgody--prosba {
  max-width: 720px;
}

.auraco-zgody__wynik + .auraco-zgody__formularz,
.auraco-zgody__wstep + .auraco-zgody__wynik {
  margin-bottom: 24px;
}

.auraco-zgody__pozycja {
  padding: 16px;
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 4px;
}

.auraco-zgody__pozycja label {
  font-weight: 400;
}

.auraco-zgody__tresc {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  color: var(--wp--preset--color--stone-800);
}

.auraco-zgody__regulamin {
  margin: 12px 0 0 26px;
  font-size: 15px;
}

.auraco-zgody__przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.auraco-zgody__lista {
  margin: 16px 0;
}

/* -------------------------------------------------------------------------
 * Twoje dane i zgody – bramka
 * ---------------------------------------------------------------------- */

/* Bramka wchodzi w kolumnę, którą strona już ma: to ona daje tło, obramowanie
   i wcięcia. Powtórzenie ich tutaj dałoby kartę w karcie. */
.auraco-td {
  color: var(--wp--preset--color--espresso-900);
}

/* Widok stanu bierze cały wiersz, bo skrót stoi w kolumnie zwężonej pod
   jeden akapit, a w widoku sesji jest tabela historii z czterema kolumnami.
   W tej szerokości nagłówki łamały się w środku słowa. Kolumna sąsiednia
   schodzi wtedy pod spód zamiast zniknąć: jej treść mówi, skąd wziął się
   odnośnik, i ma prawo zostać. Przeglądarka bez `:has()` dostaje tabelę
   przewijaną w poziomie i traci wyłącznie wygodę. */
.wp-block-columns:has(.auraco-td--stan) {
  flex-wrap: wrap !important;
}

.wp-block-column:has(> .auraco-td--stan) {
  flex-basis: 100% !important;
}

.auraco-td__wynik {
  margin: 0 0 24px;
  padding: 16px;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  border-left: 3px solid;
  border-radius: 2px;
}

.auraco-td__wynik--ok {
  color: var(--wp--preset--color--espresso-900);
  background: #e4efe8;
  border-left-color: #2f7355;
}

.auraco-td__wynik--blad {
  font-weight: 700;
  color: var(--wp--preset--color--alert);
  background: #fdf3f1;
  border-left-color: var(--wp--preset--color--alert);
}

/* Pierwszy nagłówek widoku stoi tuż pod komunikatem albo pod nagłówkiem
   sekcji, więc odstęp górny zbiera się z marginesem sąsiada. Kolejne
   potrzebują własnego, bo stoją po tabeli. */
.auraco-td__naglowek {
  margin: 32px 0 16px;
  color: var(--wp--preset--color--espresso-900);
}

.auraco-td__naglowek:first-child {
  margin-top: 0;
}

.auraco-td__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.auraco-td__karta {
  margin: 0 0 16px;
  padding: 20px;
  background: var(--wp--preset--color--stone-100);
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 4px;
}

.auraco-td__nazwa {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
}

/* Plakietka statusu: owal dobiera szerokość do napisu. Barwy z osobna dla
   każdego stanu, zawsze ciemny tekst na jasnym tle, bo status musi być
   czytelny także dla kogoś, kto nie rozróżnia zieleni od czerwieni – stąd
   przy każdej barwie stoi jeszcze słowo. */
.auraco-td__plakietka {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1f4d3a;
  background: #e4efe8;
  border-radius: 999px;
}

.auraco-td__plakietka--oczekujaca {
  color: #6a4a05;
  background: #fbf1dc;
}

.auraco-td__plakietka--wycofana,
.auraco-td__plakietka--odmowa,
.auraco-td__plakietka--brak {
  color: var(--wp--preset--color--stone-800);
  background: var(--wp--preset--color--stone-200);
}

.auraco-td__data {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--wp--preset--color--stone-700);
}

.auraco-td__karta form {
  margin: 0;
}

.auraco-td__nota {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wp--preset--color--stone-700);
}

/* Tabela historii przewija się we własnym pudełku. Bez tego cztery kolumny
   z datą i źródłem rozpychały na telefonie całą stronę w poziomie. */
.auraco-td__przewijanie {
  overflow-x: auto;
}

.auraco-td__tabela {
  width: 100%;
  /* Szerokość minimalna, żeby w wąskiej kolumnie tabela wyszła poza pudełko
     i dostała pasek przewijania zamiast łamać wyrazy w środku. */
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
}

.auraco-td__tabela th,
.auraco-td__tabela td {
  padding: 10px 12px 10px 0;
  text-align: left;
  vertical-align: top;
  /* Wyrazy zostają w całości. Motyw łamie długie ciągi wewnątrz słowa, a w
     kolumnie zdarzenia dawało to „Potwierdz enie”. Zamiast tego tabela robi
     się szersza i przewija w swoim pudełku. */
  word-break: normal;
  overflow-wrap: normal;
  border-bottom: 1px solid var(--wp--preset--color--stone-300);
}

.auraco-td__tabela th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wp--preset--color--stone-800);
}

.auraco-td__eksport {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.auraco-td__eksport form {
  margin: 0;
}

/* Wariant obrysowany dla działań wtórnych: wycofania i pobrania kopii.
   Obramowanie, nie cień wewnętrzny – cień gasłby pod cieniem, który motyw
   dokłada każdemu przyciskowi przy najechaniu. */
.auraco-przycisk--obrys {
  min-height: 44px;
  padding: 10px 24px;
  font-size: 15px;
  color: var(--wp--preset--color--espresso-900);
  background: transparent;
  border: 1px solid var(--wp--preset--color--brass-600);
}

.auraco-przycisk--obrys:hover {
  background: var(--wp--preset--color--brass-100);
}

/* Karty z danymi kontaktowymi obok formularza. */
.auraco-kontakt-karta {
  padding: 24px;
  background: var(--wp--preset--color--white);
  border-radius: 4px;
}

.auraco-kontakt-karta + .auraco-kontakt-karta,
.auraco-kontakt-karta + .wp-block-group {
  margin-top: 20px;
}

.auraco-kontakt-karta h3 {
  margin: 0 0 14px;
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass-800);
}

.auraco-kontakt-karta a,
.auraco-kontakt-karta p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--wp--preset--color--espresso-900);
}

.auraco-kontakt-karta a + a {
  margin-top: 12px;
}

.auraco-kontakt-karta a svg,
.auraco-kontakt-karta p svg {
  flex: none;
  color: var(--wp--preset--color--brass-600);
}

.auraco-kontakt-karta__adres {
  align-items: flex-start !important; /* ikona przy pierwszym wierszu adresu */
}

.auraco-kontakt-karta__adres svg {
  margin-top: 3px;
}

/* Potwierdzenie po wysłaniu formularza. */
.auraco-potwierdzenie {
  text-align: center;
}

.auraco-potwierdzenie__znak {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 32px;
  color: var(--wp--preset--color--espresso-900);
  background: var(--wp--preset--color--brass-600);
  border-radius: 999px;
}

/* Kreska pod nagłówkiem wyśrodkowanym. Zamiast walczyć z pseudo-elementem
   przypiętym do lewej krawędzi, sam separator dostaje szerokość kreski –
   układ constrained centruje go wtedy własnymi marginesami. */
.wp-block-separator.auraco-kreska--srodek {
  width: 64px;
  max-width: 64px;
  height: 1px;
  background: var(--wp--preset--color--brass-600);
}

.wp-block-separator.auraco-kreska--srodek::before {
  content: none;
}

/* Obramowanie z jednej strony wymaga wyzerowania pozostałych.
   Klasa has-border-color włącza border-style, a krawędzie bez podanej
   szerokości dostają domyślne „medium", czyli trzy piksele w kolorze tekstu.
   Wartości podane w edytorze nadpisują tę regułę, bo idą stylem
   bezpośrednim. */
.wp-block-column.has-border-color,
.wp-block-group.has-border-color {
  border-width: 0;
}

/* Odwołanie do przepisu w zdaniu. Numer artykułu czyta się jako całość,
   więc nie pozwalamy złamać go między wierszami. */
.auraco-przepis {
  color: var(--wp--preset--color--espresso-900);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Menu na wąskim ekranie
 * ---------------------------------------------------------------------- */

/* Nawigacja w pasku jest dosunięta do prawej i to ustawienie wędruje do
   nakładki, gdzie wygląda na pomyłkę. W nakładce czytamy od lewej.

   Ustawiamy zmienną, z której korzysta arkusz bloku, zamiast nadpisywać
   samo wyrównanie: reguła rdzenia jest wypisywana po arkuszu motywu, więc
   przy równej specyficzności i tak by wygrała. */
/* Zmienne ustawiamy na samej liście, nie na nakładce: klasa
   „items-justified-right" nadaje je temu samemu elementowi, więc wartość
   odziedziczona z rodzica przegrywała z ustawieniem lokalnym. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  --navigation-layout-justification-setting: flex-start;
  --navigation-layout-align: flex-start;

  gap: 4px;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding: 10px 0;
  font-size: 20px;
}

/* Rozwinięcia w nakładce mają tło rodzica, nie własne białe pudełko –
   barwa z palety trafia tu z „!important", więc inaczej się nie da. */
/* Rozwinięcie w nakładce nie jest osobnym panelem, tylko wcięciem w liście,
   więc znika biel i cień z wariantu biurkowego. Selektor musi powtórzyć
   wszystkie klasy tamtej reguły i dołożyć nakładkę – obie mają „!important",
   a wtedy rozstrzyga specyficzność, nie kolejność. */
.wp-block-navigation__responsive-container.is-menu-open .auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container {
  min-width: 0;
  padding: 0 0 0 14px;
  color: inherit !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none;
}

.wp-block-navigation__responsive-container.is-menu-open .auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container a,
.wp-block-navigation__responsive-container.is-menu-open .auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container li {
  font-size: 16px;
  font-weight: 400;
  color: var(--wp--preset--color--stone-300) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .auraco-menu.wp-block-navigation .has-child ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 8px 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  margin-left: 6px;
}

/* -------------------------------------------------------------------------
 * Mega menu usług
 * ---------------------------------------------------------------------- */

/* Poniżej tej szerokości panel nie ma gdzie się rozłożyć, więc zostaje
   zwykłą listą rozwijaną, a na telefonie – nakładką. */
@media (min-width: 1000px) {
  /* Panel rozwija się w prawo od pozycji „Usługi" i ma tyle szerokości,
     żeby zmieścić trzy kolumny z opisami oraz kartę zachęty, nie wychodząc
     poza okno. Zmiana kontekstu pozycjonowania na cały pasek rozsypywała
     układ nagłówka, więc zostaje domyślny. */
  .auraco-menu.wp-block-navigation .auraco-mega.has-child > ul.wp-block-navigation__submenu-container {
    /* Panel przypięty do okna, nie do pozycji menu: liczony od niej
       wychodził poza prawą krawędź, gdy okno było węższe. Nagłówek nie
       jest przyklejony, więc menu jest dostępne tylko na górze strony
       i stała pozycja nie rozjeżdża się przy przewijaniu. */
    position: fixed;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 220px;
    gap: 0 28px;
    width: min(1000px, calc(100vw - 48px));
    padding: 28px;
    top: 96px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  /* Kolumna to element listy, a rdzeń układa je w rzędzie. Tutaj każda
     ma stać pionowo: podpis grupy, pod nim pozycje. */
  .auraco-menu.wp-block-navigation .auraco-mega > ul > li.auraco-mega__kolumna,
  .auraco-menu.wp-block-navigation .auraco-mega > ul > li.auraco-mega__zachęta {
    display: block;
    position: static;
    width: auto;
  }

  .auraco-menu.wp-block-navigation .auraco-mega > ul > li > ul > li {
    display: block;
    position: static;
    width: 100%;
  }

  /* Kolumny tematyczne stoją obok siebie od razu. Domyślnie drugi poziom
     wysuwa się dopiero po najechaniu i to on musi tu zmienić zachowanie. */
  /* Rdzeń zwija nieotwarte rozwinięcia zerową wysokością i ucięciem
     zawartości, nie ukryciem – bez przywrócenia obu kolumny są puste. */
  .auraco-menu.wp-block-navigation .auraco-mega .auraco-mega__kolumna.has-child > ul.wp-block-navigation__submenu-container,
  .auraco-menu.wp-block-navigation .auraco-mega .auraco-mega__zachęta.has-child > ul.wp-block-navigation__submenu-container {
    position: static;
    display: block;
    min-width: 0;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    border: 0 !important;
    box-shadow: none;
    background-color: transparent !important;
    transform: none;
  }

  /* Nazwa kolumny nie jest odnośnikiem do klikania, tylko podpisem grupy. */
  .auraco-menu.wp-block-navigation .auraco-mega.has-child > ul.wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding: 0 0 12px;
    font-size: var(--wp--preset--font-size--micro);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brass-800) !important;
    pointer-events: none;
  }

  .auraco-menu.wp-block-navigation .auraco-mega.has-child > ul.wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
    display: none;
  }

  .auraco-menu.wp-block-navigation .auraco-mega ul .wp-block-navigation-item__description {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--wp--preset--color--stone-600) !important;
  }

  .auraco-menu.wp-block-navigation .auraco-mega .auraco-mega__kolumna ul .wp-block-navigation-item__content {
    display: block;
    padding: 8px 10px;
    border-radius: 4px;
  }

  /* Czwarta kolumna to zachęta do rozmowy, więc wygląda jak karta,
     nie jak kolejny wykaz. */
  .auraco-menu.wp-block-navigation .auraco-mega .auraco-mega__zachęta {
    padding: 20px;
    background: var(--wp--preset--color--brass-50);
    border-radius: 4px;
  }

  .auraco-menu.wp-block-navigation .auraco-mega.has-child > ul.wp-block-navigation__submenu-container > .auraco-mega__zachęta > .wp-block-navigation-item__content {
    padding-bottom: 8px;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wp--preset--color--espresso-900) !important;
  }

  .auraco-menu.wp-block-navigation .auraco-mega .auraco-mega__zachęta ul .wp-block-navigation-item__content {
    display: block;
    padding: 6px 0;
    color: var(--wp--preset--color--brass-900) !important;
  }

  /* Opis w karcie idzie pod nazwą, nie obok niej. */
  .auraco-menu.wp-block-navigation .auraco-mega .auraco-mega__zachęta ul .wp-block-navigation-item__description {
    margin-top: 4px;
  }
}

/* -------------------------------------------------------------------------
 * Pasek kalkulatora
 * ---------------------------------------------------------------------- */

/* Pole, lista wyboru i przycisk stoją w jednym rzędzie i mają tę samą
   wysokość – w projekcie to jeden pasek, nie trzy elementy pod sobą. */
.auraco-pasek-kalkulatora {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.auraco-pasek-kalkulatora__pole {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 6px;
}

.auraco-pasek-kalkulatora label {
  font-size: 13px;
  font-weight: 700;
  /* Makieta używa tu neutralnej czerni, nie brązowego espresso. */
  color: var(--wp--preset--color--stone-900);
}

.auraco-pasek-kalkulatora__ramka {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 4px;
}

.auraco-pasek-kalkulatora input,
.auraco-pasek-kalkulatora select {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  font-family: inherit;
  font-size: 17px;
  color: var(--wp--preset--color--espresso-900);
  background: var(--wp--preset--color--white);
  border: 0;
}

.auraco-pasek-kalkulatora select {
  padding: 0 14px;
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 4px;
}

.auraco-pasek-kalkulatora input:focus-visible,
.auraco-pasek-kalkulatora select:focus-visible {
  outline: 2px solid var(--wp--preset--color--brass-700);
  outline-offset: 1px;
}

.auraco-pasek-kalkulatora__waluta {
  flex: none;
  /* 13 px jak w makiecie; stone-600 zamiast szarości poniżej progu. */
  font-size: 13px;
  color: var(--wp--preset--color--stone-600);
}

.auraco-pasek-kalkulatora__przycisk {
  flex: none;
  min-height: 48px;
  padding: 0 28px;
  font-size: 15px;
}

@media (max-width: 782px) {
  .auraco-pasek-kalkulatora__pole {
    flex-basis: 100%;
  }

  .auraco-pasek-kalkulatora__przycisk {
    width: 100%;
  }
}

/* Karta z małym znakiem obok treści: tytuł i opis stoją w kolumnie po
   prawej, tak jak w projekcie stron usługowych. */
.auraco-karta-z-ikona {
  align-items: flex-start;
}

.auraco-ikona--mala {
  width: auto;
  height: auto;
  margin: 2px 0 0;
  background: none;
  border: 0;
  color: var(--wp--preset--color--brass-600);
}

/* Wiersz wykazu: znak, napis i kreska oddzielająca kolejne pozycje. */
.auraco-wiersz-z-ikona {
  align-items: center;
}

.auraco-wiersz-z-ikona p {
  margin: 0;
}


/* Akapit, któremu projekt wyznacza szerokość wiersza.

   Układ „constrained" centruje dzieci węższe od kolumny, więc sam
   „max-width" odsuwał odpowiedzi od lewej krawędzi i lista pytań wyglądała
   na rozjechaną. Wyrównanie do lewej wymaga przebicia reguły rdzenia. */
/* WordPress zna wyrównanie do lewej, prawej i środka, justowania nie.
   Makiety justują dłuższe akapity i dzielą w nich wyrazy – bez tego
   prawa krawędź kolumny układa się inaczej niż w projekcie. */
.has-text-align-justify {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Wiersz zwężony przez makietę równa się do LEWEJ krawędzi kolumny treści,
   nie do krawędzi ekranu. Samo „margin-left: 0" wypychało akapit poza
   kolumnę, bo w sekcji pełnej szerokości zero liczy się od brzegu okna. */
p.auraco-kolumna-tekstu,
li.auraco-kolumna-tekstu {
  max-width: 76ch;
  margin-left: max(
    0px,
    calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)
  ) !important;
  margin-right: auto !important;
}

/* Zwęża się cała grupa, nie jej dzieci. Jednostka „ch" liczy się od pisma
   elementu, więc 68ch na nagłówku o 34 px dawało 1156 px zamiast 540 –
   ograniczenie musi siedzieć tam, gdzie w makiecie: na wspólnym rodzicu
   o zwykłym rozmiarze pisma. */
.wp-block-group.auraco-kolumna-tekstu {
  max-width: var(--auraco-wiersz, 76ch);
  margin-left: max(
    0px,
    calc((100% - var(--wp--style--global--content-size, 1104px)) / 2)
  ) !important;
  margin-right: auto !important;
}

.wp-block-group.auraco-kolumna-tekstu > * {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Karty przeniesione z makiety
 * ---------------------------------------------------------------------- */

/* Pudełko z paskiem nagłówkowym: pasek dochodzi do krawędzi, treść ma
   własne wypełnienie. Bez tego nagłówek karty kontaktowej gubił tło,
   a ramka nie obejmowała całości. */
.auraco-pudelko {
  overflow: hidden;
}

.auraco-pudelko > .auraco-pasek-karty {
  margin: 0;
  padding: 12px 20px;
  color: var(--wp--preset--color--espresso-900);
  background: var(--wp--preset--color--brass-600);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auraco-pudelko > :not(.auraco-pasek-karty):not([class*="auraco-ikona"]) {
  padding-right: 20px;
  padding-left: 20px;
}

/* Ikona odsuwa się marginesem, nie wypełnieniem – wypełnienie doliczyłoby
   się do jej średnicy i koło zrobiłoby się owalem. */
.auraco-pudelko > [class*="auraco-ikona"] {
  margin-left: 20px;
  margin-right: 20px;
}

.auraco-pudelko > :not(.auraco-pasek-karty):first-child {
  padding-top: 20px;
}

.auraco-pudelko > :not(.auraco-pasek-karty):last-child {
  padding-bottom: 20px;
}

/* Ścieżka okruszków: jeden wiersz, nie trzy akapity. */
.auraco-okruszki {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
  color: var(--wp--preset--color--stone-700);
}

/* Plakietka: krótkie oznaczenie terminu albo etapu, w owalu z własnym
   tłem. Szerokość dobiera się do napisu, więc akapit nie rozciąga owalu
   na całą kolumnę. */
/* Zaślepka portretu – stoi tam, gdzie zdjęcie jeszcze nie powstało.
   Średnicę podaje PHP w zmiennej, bo portrety zarządu mają 240 px,
   a specjalistów 150 px; jedna wartość na sztywno psułaby jedną z sekcji.
   Inicjały są `aria-hidden`, bo imię i nazwisko stoi tuż obok i czytnik
   ekranu przeczytałby je dwa razy. */
.auraco-zaslepka {
  --auraco-zaslepka-rozmiar: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: flex-start;
  width: var(--auraco-zaslepka-rozmiar);
  height: var(--auraco-zaslepka-rozmiar);
  /* Układ blokowy WordPressa daje elementom rzędu `flex: 1 1 auto`, więc
     samo `flex: 0 0 auto` przegrywa i kółko ścieka do elipsy. Wymiar
     minimalny działa niezależnie od `flex-shrink`. */
  min-width: var(--auraco-zaslepka-rozmiar);
  min-height: var(--auraco-zaslepka-rozmiar);
  border-radius: 999px;
  background: var(--wp--preset--color--brass-100);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--brass-300);
  color: var(--wp--preset--color--brass-900);
  font-size: calc(var(--auraco-zaslepka-rozmiar) * 0.3);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  user-select: none;
}

/* W kolumnie zaślepka stoi nad nazwiskiem i potrzebuje odstępu, jakiego
   obrazek dostaje od własnych marginesów. W rzędzie poziomym nie – tam
   odstęp daje `gap` rodzica. */
.wp-block-column > .auraco-zaslepka {
  margin-bottom: 16px;
}

/* Portret w kolumnie dostaje ten sam odstęp co zaślepka, inaczej nazwisko
   pod zdjęciem stoi 16 px wyżej niż pod kółkiem z inicjałami obok i rząd
   kart się rozjeżdża (zauważone 21.09.2026 po pierwszych zdjęciach zespołu).
   Padding, nie margines: figura jest blokiem, więc jej margines zapada się
   z górnym marginesem nazwiska (24 px); zaślepka jako inline-flex sumuje oba. */
.wp-block-column > .auraco-portret {
  padding-bottom: 16px;
}

/* W rzędzie karty menedżera (`.auraco-wiersz`) portret dostaje od układu
   blokowego `flex-shrink: 1` i zdjęcie 195 px ścieka do 71 px szerokości -
   ten sam problem, przed którym zaślepkę chroni `min-width`. */
.auraco-wiersz > .auraco-portret {
  flex: 0 0 auto;
}

.auraco-wiersz > .auraco-portret img {
  max-width: none;
}

/* Zaślepka udaje tło portretów swojej grupy, żeby kółko z inicjałami nie
   odstawało od zdjęć obok (decyzja 21.09.2026): menedżerowie mają zdjęcia
   w piaskowym studiu, zespół w jasnym, ciepło-szarym. Grupę rozpoznajemy po
   układzie karty – menedżer stoi w rzędzie `.auraco-wiersz`, specjalista
   w kolumnie – bo sekcje nie niosą własnej klasy. */
.auraco-wiersz > .auraco-zaslepka {
  background: radial-gradient(circle at 42% 36%, #f7f1e4 0%, #efe6d2 55%, #e0d2b4 100%);
  box-shadow: inset 0 0 0 1px #dccdae;
  color: var(--wp--preset--color--brass-800);
}

.wp-block-column > .auraco-zaslepka {
  background: radial-gradient(circle at 42% 36%, #f6f5f2 0%, #ecebe7 55%, #dad8d2 100%);
  box-shadow: inset 0 0 0 1px #d6d3cc;
  color: #6f6d68;
}

.auraco-plakietka {
  display: inline-flex;
  align-items: center;
  /* Napis, który nie mieści się w jednej linii, domyślnie układa się do lewej
     i plakietka wygląda na złamaną. W wąskiej kolumnie tabeli („jeden dzień
     roboczy" w rubryce odpowiedzi) zdarza się to regularnie. */
  justify-content: center;
  text-align: center;
  align-self: flex-start;
  width: auto;
  min-height: 34px;
  margin: 0 0 18px;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Miejsce czekające na znak firmowy klienta. Kształt i wymiary z makiety;
   treść wejdzie, gdy znaki będą gotowe. */
.wp-block-group.auraco-miejsce-na-znak {
  height: 96px;
  background: var(--wp--preset--color--stone-100);
  border: 1px dashed var(--wp--preset--color--stone-300);
  border-radius: 4px;
}

/* Pole pustego stanu: komunikat, że czegoś nie ma, w przerywanej ramce. */
.wp-block-group.auraco-pusty-stan {
  padding: 40px 24px;
  border-radius: 4px;
}

.wp-block-group.auraco-pusty-stan > p {
  margin: 0;
}

/* Przyciski w sekcji otwierającej stoją jeden pod drugim i zajmują całą
   szerokość swojej kolumny – tak jak w makietach. */
.wp-block-buttons.auraco-przyciski-slupek {
  flex-direction: column;
  align-items: stretch;
}

.wp-block-buttons.auraco-przyciski-slupek .wp-block-button__link {
  width: 100%;
  justify-content: center;
}

/* Element z własnym odstępem z makiety sam ustala rytm. WordPress
   dokłada swój odstęp jako margines górny następnego bloku, więc bez
   wyzerowania 8 px z projektu robiło się 32 px. */
[style*="margin-bottom"] + * {
  margin-block-start: 0 !important;
}

/* Na wąskim ekranie wiersz poziomy nie ma jak zostać wierszem. Bez tego
   trzy człony sekcji zachęty dzieliły 390 px na trzy kolumny i tekst łamał
   się po jednym słowie, a napis na przycisku po jednej literze. */
@media (max-width: 782px) {
  .wp-block-group.auraco-wiersz.auraco-wiersz {
    flex-wrap: wrap;
  }

  .wp-block-group.auraco-wiersz.is-content-justification-space-between,
  .wp-block-group.auraco-wiersz--rowne {
    flex-direction: column;
    align-items: stretch;
  }

  .wp-block-group.auraco-wiersz--rowne > * {
    flex: 0 0 auto;
  }
}

/* Wiersz układany poziomo: liczby zestawione w jednej linii albo
   etykieta rozsunięta z wartością do przeciwnych krawędzi. */
.wp-block-group.auraco-wiersz {
  align-items: center;
}

.wp-block-group.auraco-wiersz > * {
  margin: 0;
}

/* Treść obok znaku graficznego zajmuje resztę wiersza. Bez tego adres
   w karcie kontaktowej ściskał się do 107 px i łamał po jednym słowie. */
.wp-block-group.auraco-wiersz > *:not([class*="auraco-ikona"]):not(.wp-block-buttons):not(.auraco-zaslepka):not(.auraco-portret) {
  flex: 1 1 auto;
  min-width: 0;
}

.wp-block-group.auraco-wiersz--podstawa {
  align-items: baseline;
}

/* Znak graficzny przy górnej krawędzi treści, nie na jej środku. */
.wp-block-group.auraco-wiersz--gora {
  align-items: flex-start;
}

/* Człony o równym udziale dzielą wiersz po równo. */
.wp-block-group.auraco-wiersz--rowne > * {
  flex: 1 1 0;
  min-width: 0;
}

/* Skrót do grupy na tej samej stronie. Motyw nadaje przyciskom wersaliki,
   rozstrzelenie i prostokąt – tu makieta chce owalu ze zwykłym pismem. */
.wp-block-button__link.auraco-pigulka {
  padding: 10px 18px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* W komórce tabeli owal nie potrzebuje odstępu pod spodem – tam rytm
   wierszy tworzy wypełnienie komórki. */
td > .auraco-plakietka,
th > .auraco-plakietka {
  margin: 0;
  min-height: 26px;
  padding: 3px 12px;
  font-size: 13px;
}

/* W kolumnie wyśrodkowanej owal idzie za nią. */
.is-content-justification-center > .auraco-plakietka,
.has-text-align-center.auraco-plakietka {
  align-self: center;
}

/* Ukośnik rozdzielający człony jest cichszy niż same człony – tak jak
   w makiecie, gdzie ma barwę o dwa stopnie ciemniejszą. */
.auraco-okruszki__znak {
  color: var(--wp--preset--color--stone-300);
}

[class*="has-espresso-"][class*="-background-color"] .auraco-okruszki__znak {
  color: var(--wp--preset--color--espresso-400);
}

.auraco-okruszki strong {
  font-weight: 700;
  color: var(--wp--preset--color--espresso-900);
}

[class*="has-espresso-"][class*="-background-color"] .auraco-okruszki strong {
  color: var(--wp--preset--color--white);
}

/* Na ciemnym tle ścieżka rozjaśnia się; na jasnym zostaje czytelna szarość. */
[class*="has-espresso-"][class*="-background-color"] .auraco-okruszki:not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *){
  color: var(--wp--preset--color--stone-400);
}

.auraco-okruszki a {
  color: inherit;
}

/* Podpis pod wyróżnioną liczbą: wąska kolumna, przygaszona barwa. */
.auraco-liczba__opis {
  max-width: 22ch;
  margin-top: 12px;
  line-height: 1.4;
}

/* Liczby na telefonie zostają w dwóch kolumnach. WordPress układa kolumny
   pod sobą poniżej 782 px, przez co sześć kafli w sekcji otwierającej
   strony głównej zajmowało 1150 px, a całe hero ponad dwa ekrany. W siatce
   2×3 hero spada z 1924 do ok. 1340 px przy 390 px szerokości. Tylko pary:
   pasek czterech liczb ścisnąłby się do 60 px na kolumnę. Najdłuższa
   liczba („20 tys.+") przy 34 px ma 111 px wobec 129 px szpalty. */
@media (max-width: 781px) {
  .wp-block-columns:has(> .wp-block-column > .auraco-liczba):not(:has(> .wp-block-column:nth-child(3))) {
    flex-wrap: nowrap !important;
    column-gap: 20px;
  }

  .wp-block-columns:has(> .wp-block-column > .auraco-liczba):not(:has(> .wp-block-column:nth-child(3))) > .wp-block-column {
    flex-basis: 0 !important;
    flex-grow: 1;
    min-width: 0;
  }

  .wp-block-columns:has(> .wp-block-column > .auraco-liczba):not(:has(> .wp-block-column:nth-child(3))) .auraco-linia {
    margin: 16px 0;
  }

  .wp-block-columns:has(> .wp-block-column > .auraco-liczba):not(:has(> .wp-block-column:nth-child(3))) .auraco-liczba {
    margin-top: 12px;
    font-size: 34px;
  }
}

/* Pozioma linia rozdzielająca dane w kolumnie – w odróżnieniu od ozdobnej
   kreski pod nagłówkiem ciągnie się przez całą szerokość. */
.wp-block-separator.auraco-linia {
  width: 100%;
  max-width: 100%;
  height: 1px;
  margin: 28px 0;
  border: 0;
  background: color-mix(in srgb, var(--wp--preset--color--brass-600) 28%, transparent);
}

/* Cienkie pionowe linie na ciemnym tle sekcji otwierającej. W projekcie
   ledwo widoczne – nadają głębię, bez nich tło jest płaską plamą. */
.auraco-prazki {
  position: relative;
  overflow: hidden;
}

.auraco-prazki::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.06;
  background-image: repeating-linear-gradient(90deg, var(--wp--preset--color--brass-600) 0 1px, transparent 1px 96px);
  pointer-events: none;
}

.auraco-prazki > * {
  position: relative;
}

/* -------------------------------------------------------------------------
 * Czytelność na ciemnym tle
 * ---------------------------------------------------------------------- */

/* Odnośnik w ciemnej sekcji potrzebuje jaśniejszego odcienia mosiądzu.
   Barwa przeznaczona dla jasnego tła daje na espresso kontrast 2,03 przy
   wymaganym 4,5; ten odcień daje od 7,9 do 9,7. */
[class*="has-espresso-"][class*="-background-color"] a:not(.wp-block-button__link):not(.wp-element-button):not([style*="color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] .auraco-odnosnik:not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *){
  color: var(--wp--preset--color--brass-400);
}

[class*="has-espresso-"][class*="-background-color"] a:not(.wp-block-button__link):hover:not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *){
  color: var(--wp--preset--color--brass-300);
}

/* Podpowiedzi w polach formularza na ciemnym tle. */
[class*="has-espresso-"][class*="-background-color"] input::placeholder:not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] textarea::placeholder:not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *){
  color: var(--wp--preset--color--stone-500);
}

/* Gwiazdka pola wymaganego na ciemnym tle. */
[class*="has-espresso-"][class*="-background-color"] .auraco-pole__gwiazdka:not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *){
  color: var(--wp--preset--color--brass-400);
}

/* Zabezpieczenie: w sekcji o ciemnym tle tekst bez własnej barwy dostaje
   jasną. Konwerter ustawia barwy przy blokach, ale gdy pominie zagnieżdżony
   element, zostaje ciemny tekst na ciemnym tle — kontrast 1,4 zamiast 4,5.
   Reguła nie rusza tekstu, któremu barwę nadano świadomie. */
[class*="has-espresso-"][class*="-background-color"] p:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] li:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] td:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] h1:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] h2:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] h3:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] h4:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] strong:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *){
  color: var(--wp--preset--color--brass-300);
}

/* Nagłówki w ciemnej sekcji są bielsze niż tekst, tak jak w projekcie. */
[class*="has-espresso-"][class*="-background-color"] h1:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] h2:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *),
[class*="has-espresso-"][class*="-background-color"] h3:not([class*="has-text-color"]):not(:where(.has-white-background-color, .has-brass-50-background-color, .has-brass-100-background-color, [class*="has-stone-1"], [class*="has-stone-2"], .auraco-pudelko) *){
  color: var(--wp--preset--color--white);
}

/* Pasek certyfikatów w stopce. Renderuje się dopiero wtedy, gdy dokumenty
   zostaną wydane – patrz inc/certyfikaty.php. */
.auraco-certyfikaty {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	padding: 24px 0;
	border-top: 1px solid var(--wp--preset--color--stone-700, #3a352e);
}

.auraco-certyfikat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.auraco-certyfikat__norma {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--brass-300, #cbb072);
}

.auraco-certyfikat__zakres {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--stone-200, #d7d2c8);
}

.auraco-certyfikat__jednostka {
	font-size: 12px;
	color: var(--wp--preset--color--stone-400, #a49c8f);
}

/* Pasek rejestrowy odsuwa się od kolumn własnym marginesem. Gdy między nimi
   staje pasek certyfikatów, ten margines robi w stopce dziurę na 88 pikseli. */
.auraco-certyfikaty + .auraco-stopka__dol {
	margin-top: 0;
}

/* Etykieta trybu podglądu. Ma być widoczna, nie ładna – dopóki wisi, treść
   obok niej jest zmyślona. Znika razem z AURACO_CERTYFIKATY_PODGLAD. */
/* Dwie role, dwa elementy. Akapit jest zwykłym dzieckiem układu, więc dostaje
   od niego szerokość kolumny i wyśrodkowanie; ramka siedzi w środku i zaczyna
   się tam, gdzie zaczyna się tekst stopki. Próba załatwienia tego jednym
   elementem kończy się walką z `margin-inline: auto !important` z arkusza
   globalnego – po jej wygraniu etykieta ucieka na krawędź okna. */
.auraco-certyfikaty__podglad {
	margin: 40px 0 -12px;
}

.auraco-certyfikaty__podglad span {
	display: inline-block;
	padding: 4px 10px;
	border: 1px dashed var(--wp--preset--color--brass-300, #cbb072);
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-300, #cbb072);
}

/* Etykieta wisi nad kreską paska, dlatego jej dolny margines jest ujemny. */
.auraco-certyfikaty__podglad + .auraco-certyfikaty {
	padding-top: 20px;
}

/* Drobny znacznik trybu podglądu, dopisywany w treści sekcji. */
.auraco-certyfikaty__uwaga {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border: 1px dashed currentColor;
	border-radius: 3px;
	font-size: 0.72em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* Karta certyfikatu jest siódma w siatce trójkolumnowej, więc konwerter
   zostawia ją samą w ostatnim wierszu. Bez ograniczenia rozciąga się na
   całą szerokość i linia tekstu rośnie do ponad 150 znaków, przy sąsiednich
   kartach po czterdzieści kilka. Nie da się tego załatwić przez `flex-basis`
   – układ kolumn WordPressa nadpisuje go swoim `0` z `flex-grow: 1`.
   `max-width` na samej kolumnie też przegrywa z regułą układu, więc
   ograniczamy treść. Karty rysuje tu lewa kreska, nie tło, dlatego węższy
   tekst wygląda dokładnie jak pozostałe sześć. */
.auraco-certyfikaty__karta > * {
	max-width: calc((100% - 40px) / 3);
}

@media (max-width: 781px) {
	.auraco-certyfikaty__karta > * {
		max-width: 100%;
	}
}

/* ─── Dostępność: uzupełnienia do WCAG 2.2 AA ─────────────────────────── */

/* 2.5.8 Rozmiar celu (minimum). Strzałka rozwijająca podmenu ma w rdzeniu
   WordPressa 9×9 px i jest samodzielnym przyciskiem, więc nie łapie się na
   wyjątek „cel w linii tekstu". Powiększamy obszar dotknięcia bez ruszania
   samej ikony, żeby układ menu został nietknięty. */
.wp-block-navigation__submenu-icon {
	position: relative;
}

.wp-block-navigation__submenu-icon::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
	content: "";
}

/* 1.4.12 Odstępy w tekście – tekst musi znieść wymuszone zwiększenie
   interlinii i odstępów bez utraty treści. */
p, li, dd {
	overflow-wrap: break-word;
}

/* Preferencja wyższego kontrastu zgłaszana przez system.
   Wzmacniamy obramowania i rezygnujemy z przygaszeń. */
@media (prefers-contrast: more) {
	:root {
		--auraco-krycie-drugoplanowe: 1;
	}

	.auraco-nadkreslenie,
	.auraco-liczba__opis,
	.auraco-certyfikat__jednostka {
		opacity: 1;
	}

	a:not([class]) {
		text-decoration-thickness: 2px;
	}

	.wp-block-button__link,
	.wp-block-separator {
		border-width: 2px;
	}
}

/* Tryb wysokiego kontrastu systemu Windows: nie nadpisujemy barw użytkownika,
   ale pilnujemy, żeby elementy rysowane tłem nie zniknęły. */
@media (forced-colors: active) {
	.auraco-prazki::before {
		display: none;
	}

	.wp-block-button__link,
	.auraco-certyfikaty__podglad span {
		border: 1px solid ButtonText;
	}

	:focus-visible {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}

/* Przełącznik wersji językowej. Renderuje się dopiero po opublikowaniu
   stron angielskich – patrz inc/wersja-jezykowa.php. */
.auraco-jezyki {
	display: flex;
	flex: none;
	gap: 1px;
	align-items: center;
	margin-right: 2px;
}

/* 26 px zamiast wygodniejszych 34: nagłówek jest ciasny, a kryterium 2.5.8
   wymaga 24. Poniżej tej wartości nie schodzimy. */
.auraco-jezyk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: 26px;
	padding: 2px 4px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--wp--preset--color--brass-300, #cbb072);
	text-decoration: none;
}

.auraco-jezyk--biezacy {
	background: var(--wp--preset--color--brass-600, #ae9048);
	color: var(--wp--preset--color--espresso-900, #1a130f);
}

a.auraco-jezyk:hover,
a.auraco-jezyk:focus-visible {
	background: rgba(174, 144, 72, 0.22);
	color: #fff;
}

/* Prawa część nagłówka mieści się w jednym rzędzie z zapasem jednego piksela,
   więc dodanie przełącznika języka zrzucało ją do drugiego wiersza. Zwężamy
   odstępy w tym pasku, zamiast odbierać cokolwiek z menu. */
@media (min-width: 1024px) {
	header .wp-block-group.is-content-justification-right,
	header .auraco-jezyki ~ .wp-block-buttons,
	header .wp-block-navigation__container {
		column-gap: 6px;
	}

	header .auraco-eaura {
		margin-right: 0;
	}
}

/* ─── Megamenu: ciągły obszar wskaźnika ───────────────────────────────── */

/* Panel wisi 23 px pod pozycją menu, a przestrzeń między nimi nie należy
   do żadnego z nich. Kursor prowadzony z „Usług" w dół opuszczał obszar
   aktywny i menu znikało, zanim dało się cokolwiek wybrać. To zarazem
   usterka użyteczności i naruszenie kryterium 1.4.13 WCAG, które wymaga,
   by treść pokazana po najechaniu dawała się najechać bez znikania.
   Mostek jest przezroczysty i domyka lukę, nie zmieniając wyglądu. */
@media (min-width: 1024px) {
	.auraco-menu.wp-block-navigation .auraco-mega.has-child > ul.wp-block-navigation__submenu-container::before {
		position: absolute;
		top: -26px;
		left: 0;
		width: 100%;
		height: 26px;
		content: "";
	}

	/* Krótkie wytchnienie przy zamykaniu: przypadkowe zejście kursora poza
	   panel o kilka pikseli nie kasuje wyboru od razu. Otwiera się nadal
	   natychmiast – opóźniamy tylko zniknięcie. */
	.auraco-menu.wp-block-navigation .auraco-mega.has-child > ul.wp-block-navigation__submenu-container {
		transition: opacity 0.12s ease 0.18s, visibility 0s linear 0.3s;
	}

	.auraco-menu.wp-block-navigation .auraco-mega.has-child:hover > ul.wp-block-navigation__submenu-container,
	.auraco-menu.wp-block-navigation .auraco-mega.has-child:focus-within > ul.wp-block-navigation__submenu-container {
		transition: opacity 0.12s ease 0s, visibility 0s linear 0s;
	}
}

/* ─── Wpisy dobierane do strony usługi ────────────────────────────────── */

.auraco-powiazane__naglowek {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 32px;
}

.auraco-powiazane__tytul {
	margin: 0;
	font-size: clamp(24px, 1.5rem + 1vw, 34px);
	line-height: 1.3;
	letter-spacing: -0.015em;
	font-weight: 700;
	color: var(--wp--preset--color--stone-900, #1b1a18);
}

.auraco-powiazane__wszystkie {
	flex: none;
	padding-bottom: 6px;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.auraco-powiazane__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.auraco-powiazany {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: #fff;
	border-top: 3px solid var(--wp--preset--color--brass-600, #ae9048);
}

.auraco-powiazany__dzial {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-800, #6e5520);
}

.auraco-powiazany__tytul {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--stone-900, #1b1a18);
	text-decoration: none;
	text-wrap: pretty;
}

.auraco-powiazany__tytul:hover,
.auraco-powiazany__tytul:focus-visible {
	color: var(--wp--preset--color--brass-800, #6e5520);
	text-decoration: underline;
}

.auraco-powiazany__opis {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--stone-600, #555553);
}

.auraco-powiazany__data {
	margin-top: auto;
	font-size: 13px;
	color: var(--wp--preset--color--stone-500, #787672);
}

@media (max-width: 600px) {
	.auraco-powiazane__naglowek {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* ─── Działy i znaczniki na blogu ─────────────────────────────────────── */

/* Działy stoją nad wpisami jako pasek filtrów – bez własnego nagłówka,
   bo etykieta „Działy" nad siedmioma nazwami działów nic nie wnosi, a zabiera
   wiersz. Znaczniki pod wpisami nagłówek mają, bo tam nie są oczywiste. */
/* Zawijanie, nie przewijanie w poziomie. Siedem działów nie mieści się
   w jednym rzędzie przy typowej szerokości, a pasek przewijania chowa
   ostatnie pozycje: użytkownik nie wie, że coś jeszcze jest. Drugi rząd
   kosztuje czterdzieści pikseli i pokazuje wszystko. */
.auraco-tematy--dzialy .auraco-tematy__lista {
	flex-wrap: wrap;
	row-gap: 8px;
}

.auraco-tematy__tytul {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-800, #6e5520);
}

.auraco-tematy__tytul--drugi {
	margin-top: 28px;
}

.auraco-tematy__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.auraco-temat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 6px 13px;
	border: 1px solid var(--wp--preset--color--stone-200, #d7d2c8);
	border-radius: 999px;
	font-size: 14px;
	white-space: nowrap;
	font-weight: 700;
	color: var(--wp--preset--color--stone-900, #1b1a18);
	text-decoration: none;
	background: #fff;
}

.auraco-temat__ile {
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--stone-500, #787672);
}

.auraco-temat:hover,
.auraco-temat:focus-visible {
	border-color: var(--wp--preset--color--brass-600, #ae9048);
	color: var(--wp--preset--color--brass-800, #6e5520);
}

.auraco-temat--biezacy {
	background: var(--wp--preset--color--brass-600, #ae9048);
	border-color: var(--wp--preset--color--brass-600, #ae9048);
	color: var(--wp--preset--color--espresso-900, #1a130f);
}

.auraco-temat--biezacy .auraco-temat__ile {
	color: inherit;
}

/* Znaczniki są drobniejsze od działów – to warstwa uzupełniająca,
   nie główna nawigacja po blogu. */
.auraco-tag {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 4px 11px;
	border-radius: 3px;
	font-size: 13px;
	color: var(--wp--preset--color--stone-600, #555553);
	background: var(--wp--preset--color--stone-100, #f6f5f3);
	text-decoration: none;
}

.auraco-tag:hover,
.auraco-tag:focus-visible {
	background: var(--wp--preset--color--brass-50, #faf5e8);
	color: var(--wp--preset--color--brass-800, #6e5520);
}

.auraco-tag--biezacy {
	background: var(--wp--preset--color--brass-100, #ecd9ae);
	color: var(--wp--preset--color--brass-900, #4f3d17);
	font-weight: 700;
}

/* Stopka i sekcja wezwania nad nią mają zbliżone tła – espresso-800 i
   espresso-900 dzieli dziesięć punktów na kanał. Przy zerowym odstępie
   zlewały się w jedną plamę i nie było widać, gdzie kończy się treść
   strony. Kreska w barwie mosiądzu domyka sekcję, tak samo jak w nagłówku,
   i nie wymaga dokładania pustej przestrzeni. */
.auraco-stopka {
	border-top: 1px solid rgba(174, 144, 72, 0.22);
}

/* Przycisk w wierszu z nagłówkiem nie może się kurczyć. Domyślne
   `flex-shrink: 1` pozwalało mu zejść do 158 px, przez co „Umów rozmowę"
   łamało się na cztery wiersze, z samą literą „ę" na końcu. Miejsce ma
   ustąpić nagłówek – on ma `min-width: 0` i zawija się bez szkody. */
.auraco-wiersz > .wp-block-buttons {
	flex: none;
}

.auraco-wiersz .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 782px) {
	/* Na wąskim ekranie wiersz i tak układa się w kolumnę, a wtedy przycisk
	   może zająć całą szerokość zamiast wystawać poza nią. */
	.auraco-wiersz .wp-block-button__link {
		white-space: normal;
	}
}

/* Regulamin: numery działów z licznika, nie z treści. Sekcja o newsletterze
   pojawi się dopiero po jego uruchomieniu, a wpisane na sztywno numery
   zrobiłyby wtedy dziurę w kolejności (1, 2, 4, 5…). */
.auraco-regulamin .entry-content {
	counter-reset: dzial;
}

/* Konwerter nie przenosi klas na nagłówki, więc liczymy wszystkie drugiego
   stopnia w treści – na tej stronie każdy z nich jest działem regulaminu. */
.auraco-regulamin .entry-content h2::before {
	counter-increment: dzial;
	content: counter(dzial) ". ";
}

/* Treść wpisu bywa wklejana spoza edytora – ze starego serwisu, z przeniesienia,
   z importu. WordPress ogranicza szerokość wyłącznie regułą
   `html :where(img[class*="wp-image-"])`, więc obraz bez klasy nadanej przez
   bibliotekę mediów rozpycha kolumnę i wywołuje poziomy pasek przewijania na
   całej stronie. Wiążemy ograniczenie z miejscem, a nie z klasą. */
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object {
	max-width: 100%;
}

/* Bez tego obraz zwężony do kolumny zachowuje wysokość z atrybutu `height`
   i wychodzi zniekształcony. Dotyczy wyłącznie obrazów – iframe ma własne
   proporcje, których nie znamy. */
.entry-content img {
	height: auto;
}

/* Karta wpisu w sekcji „Wiedza" na stronie głównej. Data ma stać przy dnie
   karty, żeby w rzędzie trzech kart leżała w jednej linii niezależnie od
   tego, ile wierszy zajmie zajawka. Układ „constrained" tego nie potrafi –
   stąd kolumna elastyczna założona z arkusza. */
.auraco-karta-wpisu {
  display: flex;
  flex-direction: column;
}

.auraco-karta-wpisu__data {
  margin-top: auto;
  padding-top: 8px;
}

/* Najnowszy wpis w sekcji „Wiedza". Pierwsza karta pętli jest zawsze
   najświeższa, więc wyróżniamy ją po pozycji: zajmuje lewą kolumnę na całą
   wysokość, z ilustracją i etykietą. Pozostałe karty zostają bez ilustracji –
   trzy obrazy obok siebie odebrałyby pierwszej pierwszeństwo. */
.auraco-wiedza-glowna li:not(:first-child) :is(.auraco-karta-wpisu__obraz, .auraco-karta-wpisu__nowosc) {
  display: none;
}

.auraco-wiedza-glowna li:first-child .auraco-karta-wpisu {
  overflow: hidden;
  border-color: var(--wp--preset--color--brass-300) !important;
}

/* Układ „constrained" środkuje w karcie wszystko, co węższe od kolumny:
   znacznik i data stały na środku, tytuł przy lewej krawędzi, a zajawka
   dostawała wcięcie. W szerokiej karcie to razi, więc cała sekcja trzyma lewą. */
.auraco-wiedza-glowna .auraco-karta-wpisu > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 62ch;
}

.auraco-wiedza-glowna .auraco-karta-wpisu > .auraco-znacznik {
  align-self: flex-start;
  margin-top: 0;
}

.auraco-wiedza-glowna .auraco-karta-wpisu__obraz {
  max-width: none !important;
  margin: calc(var(--wp--preset--spacing--40) * -1) calc(var(--wp--preset--spacing--40) * -1) var(--wp--preset--spacing--40) !important;
  overflow: hidden;
}

.auraco-wiedza-glowna .auraco-karta-wpisu__obraz img {
  display: block;
  width: 100%;
}

.auraco-wiedza-glowna .auraco-karta-wpisu__nowosc {
  margin: 0 0 12px;
}

.auraco-wiedza-glowna .wp-block-post-template.is-layout-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .auraco-wiedza-glowna .wp-block-post-template.is-layout-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .auraco-wiedza-glowna li:first-child {
    grid-row: span 2;
  }

  .auraco-wiedza-glowna li:first-child .wp-block-post-title {
    font-size: var(--wp--preset--font-size--heading-s) !important;
    line-height: 1.25;
  }

  .auraco-wiedza-glowna li:first-child .wp-block-post-excerpt {
    font-size: var(--wp--preset--font-size--medium) !important;
  }
}

/* Treść wpisu na blogu.

   Projekt zakładał dziewiętnaście pikseli („.prose p" w makiecie wpisu),
   a strona serwowała siedemnaście – globalny stopień „large" z theme.json.
   Kolumnę wyznacza „68ch", czyli szerokość sześćdziesięciu ośmiu zer, więc
   spadek stopnia zwęził ją bez ruszania jakiejkolwiek wartości szerokości:
   z projektowanych ~645 pikseli zrobiło się 578. Stąd wrażenie ciasnej
   szpalty – tekst był mniejszy, a kolumna proporcjonalnie węższa.

   Liczba znaków w wierszu zostaje w przedziale 60–75, który czyta się
   najlepiej; rośnie sam rozmiar pisma i szerokość szpalty. */
.auraco-tekst {
  font-size: 19px;
}

/* Stopień na samych akapitach nie wystarcza. Szerokość kolumny motyw
   podawał w „ch", a ta jednostka liczy się od pisma pojemnika, nie od
   pisma akapitu w środku – szpalta trzymałaby 578 pikseli mimo większego
   tekstu. Stopień na pojemniku przelicza „68ch" po nowemu i kolumna
   dochodzi do projektowanych ~645 pikseli.

   Od 5.10.2026 szablon wpisu podaje kolumnę jako 44rem (704 px, tyle, ile
   faktycznie dawało „68ch" przy 19 px). Powód: WordPress wpisuje szerokość
   kolumny jako max-width każdego dziecka treści, a „ch" liczy się wtedy od
   pisma tego dziecka. Śródtytuł h3 dostawał przez to 1002 px zamiast 704
   i wystawał 150 px w lewo poza kolumnę akapitów. */
.auraco-tekst p,
.auraco-tekst li {
  font-size: 19px;
}

/* Nagłówek sekcji z odnośnikiem po prawej stronie.

   Projekt stawia „Wszystkie wpisy" przy prawej krawędzi kolumny i na
   wysokości dolnej krawędzi tytułu. Domyślne wyśrodkowanie z „.auraco-wiersz"
   podnosiło napis do połowy wysokości nagłówka, a rozciągliwy akapit
   („flex: 1 1 auto") zabierał trzysta pikseli szerokości i odsuwał tekst od
   krawędzi o tyle samo. Stąd dwie poprawki naraz. */
.wp-block-group.auraco-wiersz--dol {
  align-items: flex-end;
}

/* Selektor musi być dokładnie tak długi: „.auraco-wiersz" rozciąga swoje
   dzieci regułą z dwiema klasami i dwoma zaprzeczeniami, więc krótszy
   zapis przegrywa z nią co do szczegółowości i akapit dalej zabiera
   trzysta pikseli. */
.wp-block-group.auraco-wiersz.auraco-wiersz--dol > :last-child {
  flex: 0 0 auto;
}

/* Wiersz, w którym człony trzymają się swojej treści. „.auraco-wiersz"
   rozciąga dzieci regułą o czterech członach, więc selektor musi być równie
   długi – inaczej numer etapu zostaje przy lewej krawędzi, a jego nazwa
   ucieka na prawy koniec kolumny. */
.wp-block-group.auraco-wiersz.auraco-wiersz--zwarty > :last-child,
.wp-block-group.auraco-wiersz.auraco-wiersz--zwarty > :not([class*="auraco-ikona"]) {
  flex: 0 0 auto;
}

/* Ilustracja sekcyjna: rysunek stojący obok kolumny tekstu.

   Kolumna tekstu ma 68ch, a sekcja 1104 px, więc po prawej zostawało ponad
   czterysta pikseli pustki. Rysunek ją wypełnia, nie wchodząc tekstowi w drogę.

   Rysunek stoi pośrodku swojej kolumny, nie przy jej lewej krawędzi: kolumna
   jest szersza od niego, a dosunięty do lewej zbiegałby się z tekstem i całość
   wyglądałaby na przypadkową. To samo ustawienie ratuje układ poniżej 782 px,
   gdzie kolumny idą jedna pod drugą i samotny rysunek przy lewej krawędzi
   czyta się jak pomyłka składu. */
.wp-block-column:has(> .wp-block-image:only-child) {
  text-align: center;
}

/* Kreska ikony nie może rosnąć wprost proporcjonalnie do jej wielkości.
   Przy 24 px potrzeba 1,75, bo cieńsza rozmywa się na zwykłym ekranie;
   przy 180 px ta sama wartość daje trzynastopikselowy walec, który obok
   rysunków z biblioteki wygląda jak z innej bajki. Pomiar tamtych rysunków
   dał kreskę zajmującą 3,6 % szerokości, nasze 24-piksleowe ikony mają
   7,3 % – stąd wartości poniżej, schodzące do tego samego udziału. */
.auraco-ikona--srednia svg { stroke-width: 1.4; }
.auraco-ikona--znak     svg { stroke-width: 1.05; }
.auraco-ikona--rysunek  svg { stroke-width: 0.87; }

/* Krążek pod rysunkiem z biblioteki. Znaki rysowane wektorowo mieszczą się
   w trzydziestu pikselach, bo mają po kilka linii. Rysunki z biblioteki niosą
   detal obliczony na duży format – przy trzydziestu pikselach napis „RODO"
   w tarczy zlewa się w plamę – więc krążek rośnie do stu czterech, a znak
   w środku do siedemdziesięciu sześciu. Sam rozmiar znaku niesie makieta
   atrybutami obrazka, tutaj stoi tylko średnica krążka. */
.auraco-ikona--krag-duzy {
  width: 104px;
  height: 104px;
}

/* ─── Wyszukiwarka z podpowiedziami ──────────────────────────────────── */

/* Pole stoi w sekcji otwierającej wyników, na ciemnym tle, a lista podpowiedzi
   wisi nad treścią pod spodem. Stąd `position: relative` na opakowaniu:
   bez niego lista rozpychałaby układ, zamiast się nad nim położyć. */
.auraco-szukajka {
  position: relative;
  max-width: 640px;
}

.auraco-szukajka__etykieta {
  display: block;
  margin-bottom: 8px;
  font-size: var(--wp--preset--font-size--small);
}

.auraco-szukajka__pole {
  display: flex;
  gap: 8px;
}

.auraco-szukajka__wejscie {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 4px;
  background: #fff;
  color: var(--wp--preset--color--espresso-900);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--medium);
}

/* Pole typu „search" dostaje w WebKicie własny krzyżyk czyszczący, który
   nachodzi na obramowanie i nie da się go trafić klawiaturą. */
.auraco-szukajka__wejscie::-webkit-search-decoration,
.auraco-szukajka__wejscie::-webkit-search-cancel-button {
  appearance: none;
}

.auraco-szukajka__przycisk {
  flex: 0 0 auto;
  padding: 12px 24px;
  border: 0;
  border-radius: 4px;
  background: var(--wp--preset--color--brass-600);
  color: var(--wp--preset--color--espresso-900);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  cursor: pointer;
}

.auraco-szukajka__przycisk:hover {
  background: var(--wp--preset--color--brass-500);
}

/* Lista podpowiedzi. Kolejność w źródle jest kolejnością trafień, więc
   czytnik ekranu przeczyta je tak samo, jak widzi je człowiek. */
.auraco-szukajka__lista {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  border: 1px solid var(--wp--preset--color--stone-200);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(26, 19, 15, 0.16);
  list-style: none;
}

.auraco-szukajka__pozycja {
  margin: 0;
}

.auraco-szukajka__odnosnik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 3px;
  color: var(--wp--preset--color--espresso-900);
  text-decoration: none;
}

/* Zaznaczenie klawiaturą i najechanie myszą wyglądają tak samo. Dwa różne
   podświetlenia w jednej liście każą się zastanawiać, które jest aktywne. */
.auraco-szukajka__pozycja.jest-zaznaczona .auraco-szukajka__odnosnik,
.auraco-szukajka__odnosnik:hover {
  background: var(--wp--preset--color--brass-50);
}

.auraco-szukajka__tytul {
  font-size: var(--wp--preset--font-size--small);
}

.auraco-szukajka__dzial {
  flex: 0 0 auto;
  color: var(--wp--preset--color--stone-500);
  font-size: var(--wp--preset--font-size--tiny);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Komunikat dla czytnika ekranu. Widoczny także dla patrzących, bo liczba
   trafień i podpowiedź o klawiszach przydaje się każdemu. */
.auraco-szukajka__stan {
  margin: 8px 0 0;
  font-size: var(--wp--preset--font-size--tiny);
  min-height: 1.2em;
}

.auraco-szukajka__stan:empty {
  margin: 0;
}

/* ─── Wyszukiwarka w nagłówku ─────────────────────────────────────────── */

/* Panel wysuwa się pod nagłówek i musi mieć względem czego się ustawić.
   Nagłówek dotąd nie tworzył kontekstu pozycjonowania, bo nic go
   nie potrzebowało. */
header.wp-block-group {
  position: relative;
}

.auraco-lupa {
  display: flex;
  align-items: center;
}

/* Cel ma 32 px, choć sama ikona 20. Kryterium 2.5.8 wymaga dwudziestu
   czterech, a w pasku, w którym wszystko stoi ciasno, brak zapasu odbija
   się najpierw na dotyku. */
.auraco-lupa__przycisk {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wp--preset--color--brass-300);
  cursor: pointer;
}

.auraco-lupa__przycisk:hover {
  color: var(--wp--preset--color--brass-100);
}

/* Panel przykrywa treść, więc musi mieć własne tło i wyraźną krawędź
   od strony nagłówka – inaczej ciemny pasek i jasny panel zlewają się
   w jedną plamę o niejasnej granicy. */
.auraco-lupa__panel {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  padding: 24px var(--wp--style--root--padding-right, 48px);
  border-top: 1px solid var(--wp--preset--color--brass-600);
  background: var(--wp--preset--color--stone-100);
  box-shadow: 0 16px 40px rgba(26, 19, 15, 0.24);
}

.auraco-lupa__panel[hidden] {
  display: none;
}

/* W panelu pole zajmuje całą szerokość kolumny treści, a nie 640 px
   z widoku na stronie wyników: nagłówek jest szeroki i wąskie pole
   wyglądałoby w nim na zgubione. */
.auraco-lupa__panel .auraco-szukajka {
  margin: 0 auto;
  max-width: var(--wp--style--global--content-size, 1200px);
}

/* ==========================================================================
   Przegląd z 26 sierpnia 2026: spis treści, czas czytania, druk, przejścia
   ========================================================================== */

/* Spis treści wpisu – budowany z nagłówków przy wyświetlaniu (inc/spis-tresci.php). */
/* Marginesy boczne „auto”, nie 0: ramka jest dzieckiem kolumny wpisu
   i tylko „auto” trzyma ją w tej samej szerokości co akapity. Z „0”
   wychodziła w lewo przed tekst. Górny odstęp oddziela ją od wstępu
   (zgłoszenie Piotra 5.10.2026: „za mały odstęp”). */
.auraco-spis {
  box-sizing: border-box;
  margin: var(--wp--preset--spacing--60) auto var(--wp--preset--spacing--60);
  padding: 22px 28px;
  background: var(--wp--preset--color--stone-100);
  border-left: 3px solid var(--wp--preset--color--brass-600);
  border-radius: 4px;
}

.auraco-spis__tytul {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass-700);
}

.auraco-spis__lista {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
}

.auraco-spis__lista li + li {
  margin-top: 6px;
}

.auraco-spis__lista a {
  color: var(--wp--preset--color--stone-800);
  font-weight: 400;
  text-decoration: none;
}

/* Podpunkty H3 w spisie wpisów bez własnego podziału na H2
   (inc/spis-tresci.php, auraco_spis_poziomy). */
.auraco-spis__lista .auraco-spis__podpunkt {
  list-style: none;
  margin-left: 16px;
  font-size: 14px;
}

.auraco-spis__lista a:hover,
.auraco-spis__lista a:focus-visible {
  color: var(--wp--preset--color--brass-700);
  text-decoration: underline;
}

/* Kotwica nie ma chować się pod górną krawędzią po skoku ze spisu. */
[id] {
  scroll-margin-top: 24px;
}

/* Czas czytania obok daty – ta sama linia, kropka jako rozdzielnik. */
.auraco-czas::before {
  content: "·";
  margin-right: 10px;
}

/* Profile społecznościowe w stopce: odstęp od adresów, żeby nie zlewały się w jedną listę. */
.auraco-kontakt__spol:first-of-type {
  margin-top: 10px;
}

/* Przejście między stronami: krótkie przenikanie zamiast błysku bieli.
   Przeglądarka, która tego nie umie, po prostu ładuje stronę jak dotąd;
   preferencja ograniczonego ruchu wyłącza efekt w całości. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* Nagłówek na wąskim ekranie w dwóch wierszach zamiast trzech.
   Pomiar przy 390 px: 195 px wysokości, czyli 26 % ekranu, zanim zacznie
   się treść. Grupa z menu, eAURĄ, lupą, językiem i przyciskiem traci
   własne pudełko (display: contents), a jej dzieci ustawiają się w rzędzie
   z godłem: godło, język, lupa, menu – niżej eAURA i przycisk na pół szerokości. */
@media (max-width: 782px) {
  header.auraco-naglowek > .wp-block-group {
    row-gap: 12px;
    column-gap: 10px;
  }

  /* Godło jak w stopce: przy 21 px pierwszy wiersz nie mieścił lupy i menu. */
  header.auraco-naglowek .auraco-godlo {
    font-size: 18px;
  }

  header.auraco-naglowek > .wp-block-group > .wp-block-group:last-child {
    display: contents;
  }

  header.auraco-naglowek .auraco-jezyki {
    order: 2;
    margin-left: auto;
  }

  header.auraco-naglowek .auraco-lupa {
    order: 3;
  }

  header.auraco-naglowek .wp-block-navigation {
    order: 4;
  }

  /* Na desktopie ramka eAURY jest wyższa od przycisku (44 px treści plus
     obramowanie i wypełnienie); w drugim wierszu podnosiłaby cały rząd. */
  header.auraco-naglowek .auraco-eaura {
    order: 5;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 44px;
    padding-block: 0;
    padding-inline: 10px;
    white-space: nowrap;
  }

  header.auraco-naglowek .wp-block-buttons {
    order: 6;
    flex: 1 1 auto;
    min-width: 0;
  }

  header.auraco-naglowek .wp-block-buttons .wp-block-button,
  header.auraco-naglowek .wp-block-buttons .wp-block-button__link {
    width: 100%;
    text-align: center;
  }

  header.auraco-naglowek .wp-block-buttons .wp-block-button__link {
    padding-inline: 12px !important;
    white-space: nowrap;
  }
}

/* Druk: regulaminy i klauzule ludzie drukują. Zostaje treść, znikają
   nawigacja, stopka, wezwania i ciemne tła; adresy odnośników zewnętrznych
   wychodzą na papier, bo kliknąć się ich nie da. */
@media print {
  header.auraco-naglowek,
  footer.wp-block-group,
  .auraco-spis,
  .auraco-lupa,
  .auraco-cta,
  .wp-block-buttons,
  .skip-link {
    display: none !important;
  }

  body,
  [class*="background-color"],
  .auraco-prazki {
    background: #fff !important;
    color: #000 !important;
  }

  .auraco-prazki *,
  [class*="has-white-color"],
  [class*="has-brass-"] {
    color: #000 !important;
  }

  main a[href^="http"]:not([href*="auraco.pl"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
  }
}

/* ==========================================================================
   Spokojna kinetyka (26 sierpnia 2026)
   Wszystko czysto w CSS, pod `prefers-reduced-motion: no-preference`; ruch
   sterowany przewijaniem tylko tam, gdzie przeglądarka go rozumie – reszta
   dostaje stronę taką, jak dotąd. Stan spoczynkowy jest zawsze widoczny.
   ========================================================================== */

/* --- 3. Karty i odnośniki reagują na kursor -------------------------------- */
main .wp-block-column.has-border-color,
.auraco-karta-wpisu,
.auraco-pudelko {
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  main .wp-block-column.has-border-color:hover,
  .auraco-karta-wpisu:hover,
  .auraco-pudelko:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -18px rgba(26, 19, 15, 0.35);
    border-color: var(--wp--preset--color--brass-500) !important;
  }
}

.auraco-strzalka {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.auraco-odnosnik:hover .auraco-strzalka,
.auraco-odnosnik:focus-visible .auraco-strzalka,
main .wp-block-column:hover .auraco-strzalka,
.auraco-karta-wpisu:hover .auraco-strzalka {
  transform: translateX(4px);
}

.wp-block-button__link,
.auraco-przycisk {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wp-block-button__link:hover,
  .auraco-przycisk:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -14px rgba(26, 19, 15, 0.5);
  }
}

/* --- 10. Ilustracja w karcie lekko przybliża się pod kursorem -------------- */
.auraco-karta-wpisu img,
main .wp-block-column.has-border-color img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .auraco-karta-wpisu:hover img,
  main .wp-block-column.has-border-color:hover img {
    transform: scale(1.03);
  }
}

/* --- 8. Ziarno na ciemnych sekcjach ---------------------------------------- */
/* Bardzo słabe (3,5 %), pod treścią; jedna reguła do usunięcia, gdyby
   miało się nie bronić. Dzieci sekcji dostają z-index, żeby ziarno nie
   nakładało się na tekst. */
.auraco-prazki::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23z)'/%3E%3C/svg%3E");
}

.auraco-prazki > * {
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  /* --- 1. Sekcje i karty wjeżdżają przy przewijaniu ------------------------ */
  @supports (animation-timeline: view()) {
    /* Wjazd sekcji przy przewijaniu — WYCOFANY 27 sierpnia 2026.
       Dwa razy zostawił treść niewidoczną: wiersz listy na /eaura/, potem
       kafel „Niezgodności i działania naprawcze" wyblakły na 40 % krycia.
       Przyczyna leży w `animation-timeline: view()`: element, którego
       przeglądarka nie policzy jako „wchodzącego w kadr", zostaje w stanie
       początkowym na zawsze. Efekt był drobny, a ryzyko dotyczy czytelności
       treści — to nie jest wymiana, którą warto robić.

       Gdyby wracać: stan początkowy musi być pełną widocznością, a ruch
       powinien tylko dokładać przesunięcie (np. animacja od `translateY`
       do zera, bez `opacity`). */

    /* --- 7. Ikony kreskowe rysują się przy wejściu ------------------------- */
    @keyframes auraco-kreska {
      from {
        stroke-dashoffset: 120;
      }

      to {
        stroke-dashoffset: 0;
      }
    }

    main .auraco-ikona--mala svg :is(path, circle, rect, line, polyline, polygon) {
      stroke-dasharray: 120;
      animation: auraco-kreska 1ms both ease-out;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }

    /* --- 4. Pasek postępu czytania na wpisie ------------------------------- */
    @keyframes auraco-postep {
      from {
        transform: scaleX(0);
      }

      to {
        transform: scaleX(1);
      }
    }

    body.single-post main::before {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 70;
      width: 100%;
      height: 3px;
      content: "";
      background: var(--wp--preset--color--brass-600);
      transform-origin: left;
      animation: auraco-postep linear both;
      animation-timeline: scroll(root);
    }

    /* --- 6. Nagłówek zostaje u góry i skraca się po zjechaniu ze szczytu --- */
    @media (min-width: 1024px) {
      @keyframes auraco-skrot {
        to {
          padding-top: 6px;
          padding-bottom: 6px;
          box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
        }
      }

      @keyframes auraco-skrot-godlo {
        to {
          font-size: 18px;
        }
      }

      /* Przykleja się opakowanie części szablonu, nie sam nagłówek: element
         przyklejony trzyma się w obrębie rodzica, a rodzic ma dokładnie
         wysokość nagłówka – przyklejony do niego nie ruszyłby się nigdzie.
         Opakowanie jest divem (tagName w szablonach): header w header dawał
         czytnikowi dwa landmarki banner. */
      .wp-block-template-part:has(> .auraco-naglowek) {
        position: sticky;
        top: 0;
        z-index: 60;
      }

      header.auraco-naglowek {
        animation: auraco-skrot linear both;
        animation-timeline: scroll(root);
        animation-range: 0 240px;
      }

      header.auraco-naglowek .auraco-godlo {
        animation: auraco-skrot-godlo linear both;
        animation-timeline: scroll(root);
        animation-range: 0 240px;
      }

      /* Kotwice ze spisu treści lądują pod przyklejonym nagłówkiem. */
      [id] {
        scroll-margin-top: 88px;
      }
    }
  }
}

/* --- Pasek znaków klientów -------------------------------------------------- */
/* Znaki w jednym odcieniu, pełna barwa pod kursorem. Taśma przewija się
   w CSS i zatrzymuje, gdy kursor jest nad nią; przy ograniczonym ruchu
   zamiast taśmy jest siatka. */
.auraco-logotypy {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.auraco-logotypy__tasma {
  display: flex;
  width: max-content;
}

.auraco-logotypy__lista {
  display: flex;
  flex: none;
  align-items: center;
  gap: 72px;
  margin: 0;
  padding: 0 36px;
  list-style: none;
}

.auraco-logotypy__znak img {
  display: block;
  width: auto;
  /* Wysokość ustawia PHP w atrybucie `style` osobno dla każdego znaku —
     wyrównujemy powierzchnię, nie wysokość, żeby znak kwadratowy nie
     wyglądał na mniejszy od poziomego. Wartość tutaj jest tylko awaryjna. */
  height: 44px;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(1) contrast(0.9) opacity(0.68);
  transition: filter 0.35s ease, transform 0.35s ease;
}

.auraco-logotypy__znak a {
  display: block;
}

.auraco-logotypy__znak:hover img,
.auraco-logotypy__znak a:focus-visible img {
  filter: none;
  transform: translateY(-2px);
}

@keyframes auraco-tasma {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .auraco-logotypy__tasma {
    animation: auraco-tasma 70s linear infinite;
  }

  .auraco-logotypy:hover .auraco-logotypy__tasma,
  .auraco-logotypy:focus-within .auraco-logotypy__tasma {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auraco-logotypy {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .auraco-logotypy__tasma {
    display: block;
    width: auto;
  }

  .auraco-logotypy__lista {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 48px;
  }

  .auraco-logotypy__lista[aria-hidden="true"] {
    display: none;
  }
}

/* Karta z cytatem: podpis firmy na jednej wysokości w całym rzędzie.
   Makieta trzyma podpis przy dole kolumny (`margin-top: auto`), a konwerter
   oddaje kolumnę jako zwykły przepływ – podpis siedział tuż pod cytatem
   i w rzędzie skakał zależnie od długości tekstu. Dotyczy tylko kolumn
   z ramką, których ostatnim dzieckiem jest pudełko podpisu. */
main .wp-block-column.has-border-color:has(> .auraco-pudelko:last-child) {
  display: flex;
  flex-direction: column;
}

main .wp-block-column.has-border-color > .auraco-pudelko:last-child {
  margin-top: auto;
}

}
}

/* Karta certyfikatów wstawiana przez `[auraco_certyfikaty_tresc wzor=karta-ciemna]`
   jest kolumną, a konwerter umieszcza ją wewnątrz komórki siatki – wychodzi
   kolumna w kolumnie. Dopóki siatka miała siedem kart, ta ostatnia stała sama
   w wierszu i zajmowała całą szerokość; przy dziewięciu trafiła do rzędu i
   zwęziła się do treści, łamiąc tekst po jednym słowie. */
.wp-block-column > .auraco-certyfikaty__karta {
  width: 100%;
}

/* Zawartość tej karty dziedziczy szerokość przeznaczoną dla kolumny siatki
   (`max-width: calc(33.33% - …)`), przez co nagłówek i tekst zwężały się do
   77 px i łamały po jednym słowie. */
.auraco-certyfikaty__karta > * {
  max-width: none;
  width: auto;
}

/* Kalkulator kary --------------------------------------------------------
   Pola po lewej, wynik po prawej. Wygląd przeniesiony z makiety
   (Kalkulator.dc.html), gdzie te same klasy żyły w znaczniku <style>.

   Natywne kontrolki są schowane, a nie usunięte: klawiatura i czytnik
   ekranu pracują na prawdziwym polu wyboru, a obramowanie rysuje etykieta.
   Zastąpienie ich div-ami odebrałoby obsługę klawiaturą za darmo. */
.auraco-kalkulator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .auraco-kalkulator {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.auraco-kalkulator__pole {
  margin-bottom: 24px;
}

.auraco-kalkulator__etykieta {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1b1a18;
  margin-bottom: 8px;
}

.auraco-kalkulator__podpowiedz {
  display: block;
  font-size: 14px;
  color: #787672;
  margin: -4px 0 8px;
}

.auraco-kalkulator__podpowiedz--pod {
  margin: 8px 0 0;
}

/* Lista artykułów bywa długa, więc dostaje własne przewijanie zamiast
   spychać wynik poza ekran. */
.auraco-kalkulator__lista {
  max-height: 260px;
  overflow-y: auto;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #cecbc6;
  border-radius: 4px;
}

.auraco-kalkulator__grupa {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6b2e;
}

.auraco-kalkulator__grupa:first-child {
  margin-top: 0;
}

.auraco-kalkulator__wybor {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 16px;
  cursor: pointer;
}

.auraco-kalkulator__wybor input {
  accent-color: #ae9048;
  width: 17px;
  height: 17px;
  flex: none;
}

.auraco-kalkulator__trzy,
.auraco-kalkulator__dwa {
  display: grid;
  gap: 10px;
}

.auraco-kalkulator__trzy {
  grid-template-columns: repeat(3, 1fr);
}

.auraco-kalkulator__dwa {
  grid-template-columns: 1fr 130px;
}

.auraco-kalkulator__pole [role="radiogroup"].auraco-kalkulator__dwa {
  grid-template-columns: 1fr 1fr;
}

.auraco-kalkulator__przelacznik {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #cecbc6;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.auraco-kalkulator__przelacznik:has(input:checked) {
  border-color: #ae9048;
  border-width: 2px;
  background: #faf5e8;
  font-weight: 700;
}

.auraco-kalkulator__przelacznik input {
  accent-color: #ae9048;
  width: 18px;
  height: 18px;
  flex: none;
}

.auraco-kalkulator__wejscie {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 17px;
  color: #1b1a18;
  background: #fff;
  border: 1px solid #cecbc6;
  border-radius: 4px;
}

.auraco-kalkulator__przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 16px 40px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a130f;
  background: #ae9048;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.auraco-kalkulator__przycisk[disabled],
.auraco-kalkulator__przycisk[aria-disabled="true"] {
  opacity: 0.65;
  cursor: progress;
}

.auraco-kalkulator__blad {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: 15px;
  color: #7a2318;
  background: #fdf1ef;
  border-left: 3px solid #a8321f;
}

.auraco-kalkulator__karta {
  padding: 40px;
  background: #30241e;
  border-radius: 4px;
}

.auraco-kalkulator__nadtytul {
  display: block;
  /* Nagłówek h2 – zerujemy krój i odstępy motywu, wygląd zostaje jak nadtytuł. */
  margin-top: 0;
  font-family: inherit;
  line-height: 1.4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4b984;
  margin-bottom: 20px;
}

.auraco-kalkulator__zanim {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #b0aeab;
}

.auraco-kalkulator__kwoty {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: #ae9048;
  font-variant-numeric: tabular-nums;
}

.auraco-kalkulator__myslnik {
  font-size: 22px;
  font-weight: 400;
  color: #b0aeab;
}

.auraco-kalkulator__jednostka {
  font-size: 17px;
  color: #e2cea7;
  margin-bottom: 32px;
}

.auraco-kalkulator__kreska {
  height: 1px;
  background: rgba(174, 144, 72, 0.28);
  margin-bottom: 24px;
}

.auraco-kalkulator__szczegoly {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  font-size: 15px;
}

.auraco-kalkulator__szczegoly > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.auraco-kalkulator__szczegoly dt {
  color: #b0aeab;
}

.auraco-kalkulator__szczegoly dd {
  margin: 0;
  color: #fff;
  font-weight: 700;
  text-align: right;
}

.auraco-kalkulator__metodyka {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(174, 144, 72, 0.28);
  font-size: 14px;
  line-height: 1.55;
  color: #b0aeab;
}

/* Zabezpieczenie na wąskie kolumny: bez tego etykiety w karcie wyniku łamią
   się po jednym słowie, a kwoty — po jednej cyfrze. Widoczne, gdy panel trafi
   w węższy kontener, niż zakłada makieta. */
.auraco-kalkulator__kwoty {
  flex-wrap: wrap;
}

.auraco-kalkulator__szczegoly > div {
  align-items: baseline;
}

.auraco-kalkulator__szczegoly dt {
  flex: 1 1 55%;
  min-width: 0;
}

.auraco-kalkulator__szczegoly dd {
  flex: 0 1 auto;
  min-width: 0;
}

.auraco-kalkulator__przelacznik span {
  min-width: 0;
}

/* Kroki kalkulatora ------------------------------------------------------
   Formularz prowadzi przez trzy ekrany zamiast wykładać wszystko naraz.
   Panel jest przez to niższy, a karta wyniku nie zostaje z pustą kolumną
   obok długiej listy artykułów. */
.auraco-kalkulator__postep {
  margin-bottom: 24px;
}

.auraco-kalkulator__krok-numer {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a6b2e;
  margin-bottom: 10px;
}

.auraco-kalkulator__pasek {
  height: 3px;
  background: #e6e3de;
  border-radius: 999px;
  overflow: hidden;
}

.auraco-kalkulator__pasek span {
  display: block;
  height: 100%;
  background: #ae9048;
  transition: width 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .auraco-kalkulator__pasek span {
    transition: none;
  }
}

/* Pole zbiorcze bez własnej ramki: obramowanie rysują kontrolki w środku,
   a domyślna ramka fieldsetu dokładałaby drugą. */
.auraco-kalkulator__krok {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.auraco-kalkulator__tytul {
  padding: 0;
  margin-bottom: 8px;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #1b1a18;
}

.auraco-kalkulator__krok .auraco-kalkulator__podpowiedz {
  margin: 0 0 20px;
}

.auraco-kalkulator__nawigacja {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.auraco-kalkulator__wstecz {
  min-height: 52px;
  padding: 16px 28px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6e5520;
  background: transparent;
  border: 1px solid #cecbc6;
  border-radius: 4px;
  cursor: pointer;
}

.auraco-kalkulator__wstecz:hover {
  border-color: #ae9048;
}

.auraco-kalkulator__dwa--rowne {
  grid-template-columns: 1fr 1fr;
}

/* Karta wyniku trzyma się w kadrze, gdy formularz obok jest krótszy. */
.auraco-kalkulator__wynik {
  position: sticky;
  top: 96px;
}

@media (max-width: 900px) {
  .auraco-kalkulator__wynik {
    position: static;
  }
}

/* Panel kalkulatora i zastrzeżenie pod nim to jedna myśl: wynik i jego granice.
   Konwerter nadaje każdej sekcji 72 px odstępu z góry i z dołu, więc między
   nimi robiło się 168 px — przerwa czytana jak koniec tematu. Nie da się tego
   ustawić w makiecie, bo padding sekcji jest tam nadpisywany. */
.wp-block-group:has(> .auraco-kalkulator) {
  /* `!important` jest tu konieczne, nie wygodne: konwerter zapisuje odstęp
     w stylu INLINE elementu (`padding-top:var(--wp--preset--spacing--80)`),
     a styl inline wygrywa z każdą regułą arkusza bez tej adnotacji. */
  padding-bottom: 24px !important;
}

.wp-block-group:has(> .auraco-kalkulator) + .wp-block-group {
  padding-top: 24px !important;
}

/* Ukrywanie musi wygrać z `display` ustawionym wyżej ------------------------
   `[hidden]` to reguła arkusza przeglądarki i przegrywa z każdą regułą autora
   opartą na klasie. Ponieważ przyciski kalkulatora mają `display: inline-flex`,
   przycisk „Oblicz widełki" pozostawał widoczny na każdym kroku, mimo że
   skrypt poprawnie nadawał mu atrybut `hidden`.

   Dlatego ukrycie deklarujemy jawnie dla elementów panelu — inaczej każde
   kolejne `display` w tym pliku po cichu odwracałoby działanie `hidden`. */
.auraco-kalkulator [hidden] {
  display: none !important;
}

/* Odnośnik pod taśmą logotypów na głównej; taśma ma maskę, więc link
   stoi poza nią jako osobny akapit w treści strony. */
.auraco-logotypy__wiecej {
  margin-top: 24px;
}

/* Lead w dużym stopniu pisma nie jest justowany, więc dzielenie wyrazów
   nic mu nie daje, a „audy-ty” w wierszu o 20 px rzuca się w oczy. Akapity
   zwykłej wielkości zachowują dzielenie z reguły ogólnej wyżej. */
.wp-block-post-content p.has-x-large-font-size {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Podaj dalej: pod treścią wpisu ------------------------------------------
   Dwa działania w jednym wierszu, wizualnie lżejsze od przycisków głównych,
   bo to gest dla czytelnika, który już przeczytał, a nie wezwanie do
   działania. Przycisk kopiowania startuje ukryty (`hidden` w HTML) i
   odsłania go skrypt, gdy ma dostęp do schowka. */
/* Lista źródeł pod artykułem z newslettera. Generator wpisu (repozytorium
   newslettera, blog_publisher._zrodla_jako_lista) zamienia wiersze
   „Źródło: …” na tę sekcję; ikona dokumentu to maska SVG, więc bierze
   kolor z palety, a nie z pliku. */
.auraco-tekst .auraco-zrodla {
  margin-top: var(--wp--preset--spacing--60);
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--stone-200);
}

.auraco-tekst .auraco-zrodla__tytul {
  margin: 0 0 12px;
  font-size: var(--wp--preset--font-size--micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--wp--preset--color--brass-700);
}

.auraco-tekst .auraco-zrodla ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.auraco-tekst .auraco-zrodla li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 28px;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.45;
}

.auraco-tekst .auraco-zrodla li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 16px;
  height: 18px;
  background-color: var(--wp--preset--color--brass-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M2 0h8l6 6v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm7 1.5V7h5.5L9 1.5zM3.5 10h9v1.4h-9V10zm0 3h9v1.4h-9V13z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M2 0h8l6 6v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm7 1.5V7h5.5L9 1.5zM3.5 10h9v1.4h-9V10zm0 3h9v1.4h-9V13z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Ramka „O autorze” pod treścią wpisu (inc/autor-ramka.php). Akapity
   w środku nie dziedziczą justowania ani stopnia tekstu wpisu – to podpis,
   nie treść. */
.auraco-tekst .auraco-autor-ramka {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: var(--wp--preset--spacing--70);
  padding: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--stone-100);
  border-left: 3px solid var(--wp--preset--color--brass-600);
  border-radius: 4px;
}

.auraco-autor-ramka__zdjecie {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

/* Autor bez zdjęcia na /zespol/: inicjały jak na stronie zespołu. */
.auraco-autor-ramka .auraco-zaslepka {
  --auraco-zaslepka-rozmiar: 96px;
}

.auraco-tekst .auraco-autor-ramka p {
  margin: 0;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.45;
}

.auraco-tekst .auraco-autor-ramka .auraco-autor-ramka__etykieta {
  font-size: var(--wp--preset--font-size--micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass-700);
}

.auraco-tekst .auraco-autor-ramka .auraco-autor-ramka__nazwa {
  font-size: 19px;
  font-weight: 700;
  color: var(--wp--preset--color--espresso-900);
}

.auraco-tekst .auraco-autor-ramka .auraco-autor-ramka__opis {
  color: var(--wp--preset--color--stone-600);
}

.auraco-autor-ramka__link {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 480px) {
  .auraco-tekst .auraco-autor-ramka {
    align-items: flex-start;
    gap: 14px;
  }

  .auraco-autor-ramka__zdjecie {
    width: 64px;
    height: 64px;
  }

  .auraco-autor-ramka .auraco-zaslepka {
    --auraco-zaslepka-rozmiar: 64px;
  }
}

.auraco-udostepnij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: var(--wp--preset--spacing--60);
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--stone-200);
  font-size: var(--wp--preset--font-size--small);
}

.auraco-udostepnij__etykieta {
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass-800);
}

.auraco-udostepnij__kopiuj,
.auraco-udostepnij__linkedin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--wp--preset--color--brass-900);
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.auraco-udostepnij__kopiuj:hover,
.auraco-udostepnij__linkedin:hover {
  text-decoration-thickness: 2px;
}

.auraco-udostepnij__kopiuj:focus-visible,
.auraco-udostepnij__linkedin:focus-visible {
  outline: 2px solid var(--wp--preset--color--brass-700);
  outline-offset: 4px;
}

.auraco-udostepnij__stan {
  flex-basis: 100%;
  min-height: 1.4em;
  color: var(--wp--preset--color--stone-600);
}

.auraco-udostepnij__stan:empty {
  display: none;
}

/* Podpis autora w wierszu z datą: oddzielony kropką od czasu czytania. */
.auraco-autor::before {
  content: "·";
  margin-right: 12px;
}

/* -------------------------------------------------------------------------
 * Walidator NIS2: kreator pytań i wynik
 * ----------------------------------------------------------------------
 * Język wizualny strony: espresso, przygaszony mosiądz, ciepła biel,
 * prążki na ciemnych panelach. Kafle odpowiedzi to pastylki z własnym
 * wskaźnikiem zamiast natywnego radia; natywne pole zostaje w drzewie
 * dla klawiatury i czytnika, tylko wizualnie schowane. Klasy .auraco-nis2. */
.auraco-nis2 {
  max-width: 880px;
  margin-inline: auto;
  scroll-margin-top: 130px; /* przyklejony nagłówek serwisu */
}

.auraco-nis2__naglowek { margin-bottom: 28px; }
.auraco-nis2__nadtytul {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass-800);
}
.auraco-nis2__tytul {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  hyphens: manual;
}
.auraco-nis2__stan {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--wp--preset--color--brass-300);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: var(--wp--preset--color--stone-800);
}
.auraco-nis2__dlaczego, .auraco-nis2__podpowiedz, .auraco-nis2__przepis {
  color: var(--wp--preset--color--stone-600);
  font-size: 15px;
  line-height: 1.55;
}
.auraco-nis2__przepis { font-size: 13px; }
.auraco-nis2__bez-js { padding: 24px; background: #fff; border: 1px solid var(--wp--preset--color--stone-200); }

/* Stepper: numerowane kółka połączone linią, aktywny etap mosiężny. */
.auraco-nis2__etapy {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: etap;
}
.auraco-nis2__etapy li {
  position: relative;
  padding-top: 38px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--wp--preset--color--stone-600);
  counter-increment: etap;
}
.auraco-nis2__etapy li::before {
  content: counter(etap);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--wp--preset--color--stone-200);
  color: var(--wp--preset--color--stone-600);
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
  z-index: 1;
}
.auraco-nis2__etapy li::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  border-top: 1px solid var(--wp--preset--color--stone-200);
}
.auraco-nis2__etapy li:last-child::after { display: none; }
.auraco-nis2__etapy .auraco-nis2__etap--za { color: var(--wp--preset--color--stone-800); }
.auraco-nis2__etapy .auraco-nis2__etap--za::before { background: var(--wp--preset--color--brass-100); border-color: var(--wp--preset--color--brass-300); color: var(--wp--preset--color--brass-900); }
.auraco-nis2__etapy .auraco-nis2__etap--za::after { border-top-color: var(--wp--preset--color--brass-300); }
.auraco-nis2__etapy .auraco-nis2__etap--teraz { color: var(--wp--preset--color--espresso-900); font-weight: 700; }
.auraco-nis2__etapy .auraco-nis2__etap--teraz::before { background: var(--wp--preset--color--brass-700); border-color: var(--wp--preset--color--brass-700); color: #fff; }

/* Karta pytania */
.auraco-nis2__karta {
  position: relative;
  padding: clamp(24px, 4vw, 44px);
  background: #fff;
  border: 1px solid var(--wp--preset--color--stone-200);
  border-top: 3px solid var(--wp--preset--color--brass-700);
  border-radius: 6px;
  box-shadow: 0 18px 40px -32px rgba(48, 36, 30, 0.35);
}
.auraco-nis2__karta > p { hyphens: manual; line-height: 1.65; }
.auraco-nis2__pytanie {
  margin: 0 0 14px;
  padding-bottom: 14px;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  hyphens: manual;
  border-bottom: 1px solid var(--wp--preset--color--stone-200);
}
.auraco-nis2__pytanie:focus-visible { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 6px; }
.auraco-nis2__dlaczego { margin: 0 0 24px; }
.auraco-nis2__prywatnosc { padding: 14px 18px; background: var(--wp--preset--color--brass-100); border-left: 3px solid var(--wp--preset--color--brass-700); font-size: 15px; }

/* Kafle odpowiedzi jako pastylki */
.auraco-nis2__wybor { margin: 0 0 8px; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.auraco-nis2__kafel {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 56px;
  padding: 14px 16px 14px 48px;
  border: 1px solid var(--wp--preset--color--stone-200);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.auraco-nis2__kafel:hover { border-color: var(--wp--preset--color--brass-700); }
.auraco-nis2__kafel input {
  position: absolute;
  left: 16px;
  top: 17px;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0; /* natywne pole zostaje dla klawiatury i czytnika */
}
.auraco-nis2__kafel::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--wp--preset--color--stone-600);
  background: #fff;
  box-sizing: border-box;
}
.auraco-nis2__kafel:has(input[type="checkbox"])::before { border-radius: 4px; }
.auraco-nis2__kafel--wybrany, .auraco-nis2__kafel:has(input:checked) {
  border-color: var(--wp--preset--color--brass-700);
  background: var(--wp--preset--color--brass-100);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--brass-700);
}
.auraco-nis2__kafel--wybrany::before, .auraco-nis2__kafel:has(input:checked)::before {
  border-color: var(--wp--preset--color--brass-700);
  background: var(--wp--preset--color--brass-700);
  box-shadow: inset 0 0 0 4px #fff;
}
.auraco-nis2__kafel:has(input[type="checkbox"]:checked)::before { box-shadow: inset 0 0 0 3px #fff; }
.auraco-nis2__kafel:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 2px; }
.auraco-nis2__kafel > span, .auraco-nis2__kafel-tresc { display: block; min-width: 0; flex: 1 1 auto; }
.auraco-nis2__kafel strong { display: block; font-weight: 600; color: var(--wp--preset--color--espresso-900); }
.auraco-nis2__kafel small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--wp--preset--color--stone-600); overflow-wrap: anywhere; hyphens: manual; }
.auraco-nis2__wybor .auraco-nis2__kafel { align-items: flex-start; }
.auraco-nis2__kafel--sektor, .auraco-nis2__kafel--nie-wiem { margin-bottom: 0; }
.auraco-nis2__kafel--nie-wiem { margin-top: 16px; background: var(--wp--preset--color--stone-100); border-style: dashed; }

.auraco-nis2__grupa { margin: 0 0 24px; padding: 0; border: 0; }
.auraco-nis2__grupa > legend { margin-bottom: 12px; padding: 0; }
.auraco-nis2__sektory .auraco-nis2__grupa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auraco-nis2__sektory .auraco-nis2__grupa > legend { grid-column: 1 / -1; }
.auraco-nis2__rodzaje .auraco-nis2__grupa { display: block; }
.auraco-nis2__rodzaj { margin-bottom: 10px; }
.auraco-nis2__przepis-szczegoly { margin: 6px 0 0 16px; font-size: 14px; }
.auraco-nis2__przepis-szczegoly summary { cursor: pointer; color: var(--wp--preset--color--brass-900); font-weight: 600; }
.auraco-nis2__przepis-szczegoly p { margin: 8px 0 0; }

/* Wiersz przesłanki: numer w serifie, pytanie, odpowiedzi w jednej linii */
.auraco-nis2__przeslanka { padding: 18px 0; border-top: 1px solid var(--wp--preset--color--stone-200); }
.auraco-nis2__przeslanka:first-of-type { border-top: 0; }
.auraco-nis2__przeslanka-pytanie { margin: 0 0 4px; font-weight: 600; line-height: 1.45; }
.auraco-nis2__wyjasnienie { margin: 4px 0 6px 40px; font-size: 15px; line-height: 1.55; color: #3e3e3d; }
.auraco-nis2__kafel small { hyphens: manual; }
@media (max-width: 782px) { .auraco-nis2__wyjasnienie { margin-left: 0; } }
.auraco-nis2__numer {
  display: inline-block;
  min-width: 34px;
  margin-right: 6px;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--wp--preset--color--brass-800);
}
.auraco-nis2__przeslanka .auraco-nis2__wybor { margin-top: 12px; grid-template-columns: repeat(3, minmax(0, 200px)); }
.auraco-nis2__przeslanka .auraco-nis2__kafel { min-height: 44px; padding: 10px 14px 10px 42px; }
.auraco-nis2__przeslanka .auraco-nis2__kafel::before, .auraco-nis2__przeslanka .auraco-nis2__kafel input { top: 13px; left: 14px; }

/* Pola liczbowe */
.auraco-nis2__pole { margin: 0 0 20px; }
.auraco-nis2__etykieta { display: block; margin-bottom: 6px; font-weight: 600; }
.auraco-nis2__wejscie { display: flex; align-items: center; gap: 10px; }
.auraco-nis2__wejscie input, .auraco-nis2__pole > input[type="search"], .auraco-nis2__pole > input[type="date"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 16px;
  font: inherit;
  font-size: 17px;
  color: #1b1a18;
  background: #fff;
  border: 1px solid #cecbc6;
  border-radius: 6px;
}
.auraco-nis2__wejscie input:focus-visible, .auraco-nis2__pole > input:focus-visible { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 2px; border-color: var(--wp--preset--color--brass-700); }
.auraco-nis2__jednostka { flex: none; color: var(--wp--preset--color--stone-600); font-size: 14px; min-width: 3em; }
.auraco-nis2__podpowiedz { margin: 6px 0 0; }

/* Brakująca odpowiedź po kliknięciu „Dalej” */
.auraco-nis2__brak { outline: 2px solid #a23b1b; outline-offset: 6px; border-radius: 6px; }
.auraco-nis2__alert { margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid #a23b1b; background: #fbf1ec; color: #5a2210; }
.auraco-nis2__blad { padding: 16px; border-left: 3px solid #a23b1b; background: #fbf1ec; }

/* Nawigacja */
.auraco-nis2__nawigacja { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--stone-200); }
.auraco-nis2__wstecz, .auraco-nis2__zmien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--wp--preset--color--brass-900);
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}
.auraco-nis2__wstecz:hover, .auraco-nis2__zmien:hover { text-decoration-thickness: 2px; }
.auraco-nis2__wstecz:focus-visible, .auraco-nis2__zmien:focus-visible { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 4px; }
.auraco-nis2__dalej { margin-left: auto; }

/* Przegląd odpowiedzi */
.auraco-nis2__przeglad { width: 100%; border-collapse: collapse; font-size: 15px; }
.auraco-nis2__przeglad th, .auraco-nis2__przeglad td { padding: 12px 8px; vertical-align: top; text-align: left; border-top: 1px solid var(--wp--preset--color--stone-200); }
.auraco-nis2__przeglad th { width: 45%; font-weight: 600; color: var(--wp--preset--color--stone-800); }

/* Wynik */
.auraco-nis2__wynik-glowa {
  margin: -1px -1px 24px;
  padding: clamp(28px, 4vw, 44px);
  background: var(--wp--preset--color--espresso-700);
  color: var(--wp--preset--color--brass-300);
  border-radius: 4px 4px 0 0;
}
.auraco-nis2__wynik-glowa .auraco-nis2__nadtytul { color: var(--wp--preset--color--brass-300); }
.auraco-nis2__wynik-tytul {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.15;
  hyphens: manual;
}
.auraco-nis2__wynik-tytul:focus-visible { outline: 2px solid var(--wp--preset--color--brass-300); outline-offset: 6px; }
.auraco-nis2__wynik-lead { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.6; }
.auraco-nis2__wynik-glowa--nie_podlega { background: var(--wp--preset--color--stone-800); }
.auraco-nis2__wynik-glowa--nie_rozstrzygniete, .auraco-nis2__wynik-glowa--poza_zakresem { background: var(--wp--preset--color--brass-900); }
.auraco-nis2__sekcja { padding: 24px 0; border-top: 1px solid var(--wp--preset--color--stone-200); }
.auraco-nis2__sekcja h4 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--brass-800); }
.auraco-nis2__sekcja p, .auraco-nis2__sekcja li { font-size: 16px; line-height: 1.65; hyphens: manual; }
.auraco-nis2__reguly { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 16px; }
.auraco-nis2__reguly td { padding: 10px 8px; vertical-align: top; border-top: 1px solid var(--wp--preset--color--stone-200); }
.auraco-nis2__regula-stan { white-space: nowrap; }
.auraco-nis2__regula-stan { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.auraco-nis2__regula--tak .auraco-nis2__regula-stan { background: var(--wp--preset--color--brass-100); color: var(--wp--preset--color--brass-900); }
.auraco-nis2__regula--nie .auraco-nis2__regula-stan { background: var(--wp--preset--color--stone-100); color: var(--wp--preset--color--stone-600); }
.auraco-nis2__regula--nie td:not(.auraco-nis2__regula-stan) { color: var(--wp--preset--color--stone-600); }
.auraco-nis2__terminy { margin: 0 0 20px; padding: 0 0 0 26px; list-style: none; border-left: 1px solid var(--wp--preset--color--brass-300); }
.auraco-nis2__terminy li { position: relative; margin-bottom: 16px; }
.auraco-nis2__terminy li::before { content: ""; position: absolute; left: -31px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--brass-700); }
.auraco-nis2__data { display: block; font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: 21px; color: var(--wp--preset--color--espresso-700); }
.auraco-nis2__sekcje-wniosku { columns: 2; column-gap: 32px; padding-left: 20px; font-size: 15px; }
.auraco-nis2__zastrzezenie p { font-size: 14px; color: var(--wp--preset--color--stone-600); }
.auraco-nis2__dzialania { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 24px; }

@media (max-width: 782px) {
  .auraco-nis2__wybor, .auraco-nis2__przeslanka .auraco-nis2__wybor { grid-template-columns: 1fr; }
  .auraco-nis2__sektory .auraco-nis2__grupa { grid-template-columns: 1fr; }
  .auraco-nis2__sekcje-wniosku { columns: 1; }
  .auraco-nis2__przeglad th { width: 40%; }
  .auraco-nis2__etapy li { font-size: 0; }
  .auraco-nis2__etapy li::before { font-size: 12px; }
  .auraco-nis2__etapy .auraco-nis2__etap--teraz { font-size: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .auraco-nis2__karta { animation: auraco-nis2-wejscie 220ms ease-out; }
  @keyframes auraco-nis2-wejscie { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .auraco-nis2__kafel { transition: none; }
}

@media print {
  .auraco-nis2__etapy, .auraco-nis2__nawigacja, .auraco-nis2__dzialania, .auraco-nis2__zmien { display: none; }
  .auraco-nis2__karta { border: 0; padding: 0; box-shadow: none; }
  .auraco-nis2__wynik-glowa { background: none; color: #000; border-bottom: 2px solid #000; border-radius: 0; margin: 0 0 16px; padding: 0 0 12px; }
  .auraco-nis2__wynik-tytul, .auraco-nis2__wynik-glowa .auraco-nis2__nadtytul { color: #000; }
}

/* Pasek walidatora NIS2 na głównej i zajawka we wpisach o NIS2 / KSC ------ */
.auraco-pasek-nis2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.auraco-pasek-nis2__tytul { margin: 8px 0 10px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -0.015em; color: #1b1a18; hyphens: manual; }
.auraco-pasek-nis2__opis { margin: 0; font-size: 16px; line-height: 1.6; color: #3e3e3d; hyphens: manual; }
.auraco-pasek-nis2__dzialanie { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; justify-self: end; }
.auraco-pasek-nis2__nota { font-size: 13px; color: var(--wp--preset--color--stone-600); }
@media (max-width: 782px) {
  .auraco-pasek-nis2 { grid-template-columns: 1fr; gap: 20px; }
  .auraco-pasek-nis2__dzialanie { justify-self: start; }
}

.auraco-nis2-zajawka {
  margin-top: var(--wp--preset--spacing--60);
  padding: 28px 32px;
  border: 1px solid var(--wp--preset--color--brass-300);
  border-left: 4px solid var(--wp--preset--color--brass-700);
  border-radius: 6px;
  background: var(--wp--preset--color--brass-50);
}
.auraco-nis2-zajawka__nadtytul { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--brass-800); }
.auraco-nis2-zajawka__tytul { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--wp--preset--color--espresso-900); hyphens: manual; }
.auraco-nis2-zajawka__tresc { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: #3e3e3d; hyphens: manual; }
@media (max-width: 782px) { .auraco-nis2-zajawka { padding: 22px 20px; } }

/* -------------------------------------------------------------------------
 * Generator haseł i PIN-ów ([auraco_hasla], inc/generator-hasel.php)
 *
 * Ciemny panel wyniku z prążkami, pod nim dwie kolumny kart: ustawienia
 * i propozycje po lewej, ocena i standardy po prawej. Na telefonie jedna
 * kolumna, wynik zawsze na górze. Znaki hasła kolorowane według rodzaju,
 * żeby łatwiej było je przepisać. Klasy .auraco-hasla.
 * ---------------------------------------------------------------------- */
.auraco-hasla {
  --hasla-ciemne: var(--wp--preset--color--espresso-800);
  --hasla-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  max-width: 1120px;
  margin-inline: auto;
  scroll-margin-top: 130px;
}
.auraco-hasla [hidden] { display: none !important; }
.auraco-hasla p, .auraco-hasla small, .auraco-hasla td, .auraco-hasla th { hyphens: manual; -webkit-hyphens: manual; }

/* Zakładki trybu */
.auraco-hasla__tryby {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px;
  background: var(--wp--preset--color--stone-200);
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 10px;
}
.auraco-hasla__tryby button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--wp--preset--color--stone-800);
  font: inherit;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.auraco-hasla__tryby button strong { font-size: 17px; font-weight: 700; color: var(--wp--preset--color--espresso-900); }
.auraco-hasla__tryby button small { font-size: 13px; color: var(--wp--preset--color--stone-600); }
.auraco-hasla__tryby button:hover { background: #fff; }
.auraco-hasla__tryby button[aria-selected="true"] {
  background: #fff;
  border-color: var(--wp--preset--color--brass-300);
  box-shadow: 0 6px 16px -10px rgba(48, 36, 30, .45), inset 0 -3px 0 var(--wp--preset--color--brass-600);
}
.auraco-hasla__tryby button:focus-visible { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 2px; }

/* Panel wyniku */
.auraco-hasla__wynik {
  padding: clamp(22px, 4vw, 40px);
  background: var(--hasla-ciemne);
  color: var(--wp--preset--color--brass-100);
  border-radius: 10px;
  box-shadow: 0 24px 50px -36px rgba(26, 19, 15, .8);
}
.auraco-hasla__wynik-glowa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: 14px;
}
.auraco-hasla__nadtytul {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass-300);
}
.auraco-hasla__prywatnosc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--wp--preset--color--brass-300);
}
.auraco-hasla__prywatnosc svg { flex: none; color: var(--wp--preset--color--brass-300); }
.auraco-hasla__haslo-ramka {
  padding: clamp(16px, 2.6vw, 24px);
  background: rgba(26, 19, 15, .55);
  border: 1px solid rgba(212, 185, 132, .28);
  border-radius: 8px;
}
.auraco-hasla__haslo {
  display: block;
  min-height: 1.4em;
  font-family: var(--hasla-mono);
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.4;
  letter-spacing: .02em;
  color: #fff;
  overflow-wrap: anywhere;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}
.auraco-hasla[data-tryb="fraza"] .auraco-hasla__haslo { word-break: normal; }
.auraco-hasla[data-tryb="pin"] .auraco-hasla__haslo { font-size: clamp(30px, 5vw, 48px); letter-spacing: .18em; }
.auraco-hasla__haslo[data-dlugosc] { font-variant-ligatures: none; }
.auraco-hasla__z--male { color: #fff; }
.auraco-hasla__z--duze { color: var(--wp--preset--color--brass-300); font-weight: 700; }
.auraco-hasla__z--cyfry { color: #9fd4b4; }
.auraco-hasla__z--symbole { color: #f2a48c; }
.auraco-hasla__z--spacja { background: rgba(212, 185, 132, .18); border-radius: 3px; }
.auraco-hasla__haslo--ukryte, .auraco-hasla__haslo--ukryte .auraco-hasla__z { color: var(--wp--preset--color--brass-300); letter-spacing: .12em; }
.auraco-hasla__ladowanie { font-family: inherit; font-size: 17px; color: var(--wp--preset--color--brass-300); }
.auraco-hasla--blad .auraco-hasla__haslo { opacity: .35; }

.auraco-hasla__akcje { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.auraco-hasla__przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid rgba(226, 206, 167, .55);
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--brass-100);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.auraco-hasla__przycisk:hover:not(:disabled) { background: rgba(226, 206, 167, .12); border-color: var(--wp--preset--color--brass-300); }
.auraco-hasla__przycisk:focus-visible { outline: 2px solid var(--wp--preset--color--brass-300); outline-offset: 3px; }
.auraco-hasla__przycisk:disabled { opacity: .45; cursor: not-allowed; }
.auraco-hasla__przycisk--glowny {
  min-width: 150px;
  background: var(--wp--preset--color--brass-600);
  border-color: var(--wp--preset--color--brass-600);
  color: var(--wp--preset--color--espresso-900);
}
.auraco-hasla__przycisk--glowny:hover:not(:disabled) { background: var(--wp--preset--color--brass-500); border-color: var(--wp--preset--color--brass-500); }
.auraco-hasla__przycisk--ok, .auraco-hasla__przycisk--ok:hover:not(:disabled) { background: #9fd4b4; border-color: #9fd4b4; color: var(--wp--preset--color--espresso-900); }
.auraco-hasla__przycisk--cichy { border-color: transparent; }
.auraco-hasla__przycisk--cichy[aria-pressed="true"] { border-color: rgba(226, 206, 167, .55); }

/* Miernik siły: sześć odcinków, kolor według poziomu */
.auraco-hasla__miernik { margin-top: 22px; }
.auraco-hasla__miernik-pasek { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.auraco-hasla__miernik-pasek span { height: 8px; border-radius: 4px; background: rgba(226, 206, 167, .16); transition: background-color .25s ease; }
.auraco-hasla__miernik-opis { margin: 10px 0 0; font-size: 15px; color: var(--wp--preset--color--brass-300); }
.auraco-hasla__miernik-opis strong { color: #fff; margin-right: 6px; }
.auraco-hasla__miernik { --hasla-poziom: #e07a5f; }
.auraco-hasla__miernik[data-poziom="slabe"] { --hasla-poziom: #e59a5c; }
.auraco-hasla__miernik[data-poziom="umiarkowane"] { --hasla-poziom: var(--wp--preset--color--brass-500); }
.auraco-hasla__miernik[data-poziom="silne"] { --hasla-poziom: #8cc9a3; }
.auraco-hasla__miernik[data-poziom="bardzo-silne"], .auraco-hasla__miernik[data-poziom="klucz"] { --hasla-poziom: #6fbf8e; }
.auraco-hasla__miernik[data-poziom="bardzo-slabe"] .auraco-hasla__miernik-pasek span:nth-child(-n+1),
.auraco-hasla__miernik[data-poziom="slabe"] .auraco-hasla__miernik-pasek span:nth-child(-n+2),
.auraco-hasla__miernik[data-poziom="umiarkowane"] .auraco-hasla__miernik-pasek span:nth-child(-n+3),
.auraco-hasla__miernik[data-poziom="silne"] .auraco-hasla__miernik-pasek span:nth-child(-n+4),
.auraco-hasla__miernik[data-poziom="bardzo-silne"] .auraco-hasla__miernik-pasek span:nth-child(-n+5),
.auraco-hasla__miernik[data-poziom="klucz"] .auraco-hasla__miernik-pasek span { background: var(--hasla-poziom); }

/* Układ kart */
.auraco-hasla__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}
.auraco-hasla__kolumna { display: grid; gap: 20px; min-width: 0; }
.auraco-hasla__karta {
  padding: clamp(20px, 3vw, 32px);
  background: #fff;
  border: 1px solid var(--wp--preset--color--stone-200);
  border-top: 3px solid var(--wp--preset--color--brass-700);
  border-radius: 6px;
  box-shadow: 0 18px 40px -32px rgba(48, 36, 30, .35);
}
.auraco-hasla__karta-tytul {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass-800);
  font-family: inherit;
}
.auraco-hasla__podtytul { margin: 22px 0 8px; font-size: 16px; font-weight: 700; font-family: inherit; color: var(--wp--preset--color--espresso-900); }
.auraco-hasla__podpowiedz, .auraco-hasla__przypis { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--stone-600); hyphens: manual; }
.auraco-hasla__przypis { margin-top: 14px; }

/* Pola */
.auraco-hasla__pole { margin: 0 0 22px; }
.auraco-hasla__pole-glowa { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.auraco-hasla__etykieta { display: block; margin: 0 0 8px; padding: 0; font-weight: 700; color: var(--wp--preset--color--espresso-900); }
.auraco-hasla__pole-glowa .auraco-hasla__etykieta { margin: 0; }
.auraco-hasla__liczba-pole { display: inline-flex; align-items: center; gap: 8px; }
.auraco-hasla__liczba-pole input, .auraco-hasla__tekst {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--wp--preset--color--stone-400);
  border-radius: 6px;
  background: #fff;
  color: var(--wp--preset--color--espresso-900);
  font: inherit;
  font-size: 16px;
}
.auraco-hasla__liczba-pole input { width: 5.2em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.auraco-hasla__tekst { width: 100%; box-sizing: border-box; }
.auraco-hasla__pole .auraco-hasla__tekst[name="symbole_lista"] { font-family: var(--hasla-mono); letter-spacing: .08em; }
.auraco-hasla__liczba-pole input:focus-visible, .auraco-hasla__tekst:focus-visible { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 1px; border-color: var(--wp--preset--color--brass-700); }
.auraco-hasla__jednostka { font-size: 14px; color: var(--wp--preset--color--stone-600); min-width: 3.4em; }

/* Suwak: wypełnienie do bieżącej wartości z --postep (ustawia skrypt) */
.auraco-hasla__suwak-zakres {
  --postep: 50%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.auraco-hasla__suwak-zakres::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--wp--preset--color--brass-700) var(--postep), var(--wp--preset--color--stone-200) var(--postep));
}
.auraco-hasla__suwak-zakres::-moz-range-track { height: 6px; border-radius: 3px; background: var(--wp--preset--color--stone-200); }
.auraco-hasla__suwak-zakres::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--wp--preset--color--brass-700); }
.auraco-hasla__suwak-zakres::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 3px solid var(--wp--preset--color--brass-700);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(48, 36, 30, .3);
}
.auraco-hasla__suwak-zakres::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--wp--preset--color--brass-700);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(48, 36, 30, .3);
}
.auraco-hasla__suwak-zakres:focus-visible { outline: none; }
.auraco-hasla__suwak-zakres:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 3px; }
.auraco-hasla__suwak-zakres:focus-visible::-moz-range-thumb { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 3px; }
.auraco-hasla__skala { display: flex; justify-content: space-between; font-size: 12px; color: var(--wp--preset--color--stone-600); }

/* Rodzaje znaków: kafle z natywnym checkboxem schowanym wizualnie */
.auraco-hasla__grupa { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.auraco-hasla__klasy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.auraco-hasla__klasa { position: relative; display: block; cursor: pointer; }
.auraco-hasla__klasa input, .auraco-hasla__segmenty input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.auraco-hasla__klasa > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 8px;
  background: #fff;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.auraco-hasla__klasa b { font-family: var(--hasla-mono); font-size: 17px; color: var(--wp--preset--color--stone-600); }
.auraco-hasla__klasa small { font-size: 12px; line-height: 1.3; color: var(--wp--preset--color--stone-600); }
.auraco-hasla__klasa:hover > span { border-color: var(--wp--preset--color--brass-700); }
.auraco-hasla__klasa input:checked + span { background: var(--wp--preset--color--brass-50); border-color: var(--wp--preset--color--brass-700); box-shadow: inset 0 0 0 1px var(--wp--preset--color--brass-700); }
.auraco-hasla__klasa input:checked + span b { color: var(--wp--preset--color--espresso-900); }
.auraco-hasla__klasa input:checked + span small { color: var(--wp--preset--color--stone-800); }
.auraco-hasla__klasa input:focus-visible + span, .auraco-hasla__segmenty input:focus-visible + span { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 2px; }

/* Separator frazy: pastylki */
.auraco-hasla__segmenty { display: flex; flex-wrap: wrap; gap: 8px; }
.auraco-hasla__segmenty label { position: relative; cursor: pointer; }
.auraco-hasla__segmenty span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--wp--preset--color--stone-300);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  color: var(--wp--preset--color--stone-800);
}
.auraco-hasla__segmenty code { font-family: var(--hasla-mono); font-weight: 700; background: none; padding: 0; }
.auraco-hasla__segmenty label:hover span { border-color: var(--wp--preset--color--brass-700); }
.auraco-hasla__segmenty input:checked + span { background: var(--wp--preset--color--espresso-800); border-color: var(--wp--preset--color--espresso-800); color: #fff; }

/* Przełączniki */
.auraco-hasla__przelaczniki { display: grid; gap: 4px; }
.auraco-hasla__przelacznik { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; cursor: pointer; }
.auraco-hasla__przelacznik input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; }
.auraco-hasla__suwak {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin-top: 1px;
  border-radius: 13px;
  background: var(--wp--preset--color--stone-400);
  transition: background-color .18s ease;
}
.auraco-hasla__suwak::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 19, 15, .35);
  content: "";
  transition: transform .18s ease;
}
.auraco-hasla__przelacznik input:checked + .auraco-hasla__suwak { background: var(--wp--preset--color--brass-700); }
.auraco-hasla__przelacznik input:checked + .auraco-hasla__suwak::after { transform: translateX(18px); }
.auraco-hasla__przelacznik input:focus-visible + .auraco-hasla__suwak { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 3px; }
.auraco-hasla__przelacznik-tekst strong { display: block; font-weight: 600; line-height: 1.4; color: var(--wp--preset--color--espresso-900); }
.auraco-hasla__przelacznik-tekst small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--wp--preset--color--stone-600); hyphens: manual; }

.auraco-hasla__blad { margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid #a13a27; background: #fbf1ec; color: #5a2210; font-size: 15px; line-height: 1.5; }

/* Propozycje */
.auraco-hasla__lista { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.auraco-hasla__propozycja {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--wp--preset--color--stone-200);
  border-radius: 6px;
  background: var(--wp--preset--color--stone-100);
  text-align: left;
  font-family: var(--hasla-mono);
  font-size: 15px;
  line-height: 1.45;
  color: var(--wp--preset--color--espresso-900);
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.auraco-hasla__propozycja:hover { border-color: var(--wp--preset--color--brass-700); background: #fff; }
.auraco-hasla__propozycja:focus-visible { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 2px; }
.auraco-hasla__propozycja .auraco-hasla__z--duze { color: var(--wp--preset--color--brass-900); font-weight: 700; }
.auraco-hasla__propozycja .auraco-hasla__z--cyfry { color: #2d6a4a; }
.auraco-hasla__propozycja .auraco-hasla__z--symbole { color: #a13a27; }
.auraco-hasla__propozycja .auraco-hasla__z--male { color: inherit; }

/* Liczby */
.auraco-hasla__liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.auraco-hasla__liczby > div { padding: 12px 14px; border-radius: 6px; background: var(--wp--preset--color--brass-50); min-width: 0; }
.auraco-hasla__liczby dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--brass-900); }
.auraco-hasla__liczby dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--espresso-900); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.auraco-hasla__liczby sup { font-size: .62em; }
.auraco-hasla__koszty { margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; }
.auraco-hasla__koszty li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--wp--preset--color--stone-200); color: var(--wp--preset--color--stone-800); }
.auraco-hasla__koszt { color: #a13a27; white-space: nowrap; }
.auraco-hasla__zysk { color: #2d6a4a; white-space: nowrap; }

/* Czasy łamania */
.auraco-hasla__czasy { width: 100%; border-collapse: collapse; font-size: 15px; }
.auraco-hasla__czasy th, .auraco-hasla__czasy td { padding: 10px 0; vertical-align: top; text-align: left; border-top: 1px solid var(--wp--preset--color--stone-200); }
.auraco-hasla__czasy th { padding-left: 14px; font-weight: 400; position: relative; }
.auraco-hasla__czasy th::before { position: absolute; top: 15px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--stone-400); content: ""; }
.auraco-hasla__czas--zle th::before { background: #a13a27; }
.auraco-hasla__czas--srednio th::before { background: var(--wp--preset--color--brass-600); }
.auraco-hasla__czas--dobrze th::before { background: #2d6a4a; }
.auraco-hasla__czas-nazwa { display: block; font-weight: 600; color: var(--wp--preset--color--espresso-900); }
.auraco-hasla__czasy small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--wp--preset--color--stone-600); }
.auraco-hasla__czasy td { padding-left: 12px; text-align: right; font-weight: 700; color: var(--wp--preset--color--espresso-900); white-space: nowrap; }
.auraco-hasla__czasy td small { font-weight: 400; white-space: normal; }
.auraco-hasla__szanse { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--wp--preset--color--brass-700); background: var(--wp--preset--color--brass-50); font-size: 15px; line-height: 1.55; }

/* Standardy */
.auraco-hasla__standardy { margin: 0; padding: 0; list-style: none; }
.auraco-hasla__standard { padding: 12px 0; border-top: 1px solid var(--wp--preset--color--stone-200); }
.auraco-hasla__standard:first-child { border-top: 0; padding-top: 0; }
.auraco-hasla__standard-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.auraco-hasla__standard-glowa strong { font-weight: 700; color: var(--wp--preset--color--espresso-900); }
.auraco-hasla__standard p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; hyphens: manual; }
.auraco-hasla__standard small { display: block; margin-top: 2px; font-size: 13px; color: var(--wp--preset--color--stone-600); }
.auraco-hasla__znacznik { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.auraco-hasla__standard--tak .auraco-hasla__znacznik { background: #e3f1e8; color: #1f4d35; }
.auraco-hasla__standard--czesciowo .auraco-hasla__znacznik { background: var(--wp--preset--color--brass-100); color: var(--wp--preset--color--brass-900); }
.auraco-hasla__standard--nie .auraco-hasla__znacznik { background: #fbe9e4; color: #7c2a1b; }

/* Własna polityka */
.auraco-hasla__polityka { margin-top: 18px; border: 1px solid var(--wp--preset--color--stone-200); border-radius: 6px; background: var(--wp--preset--color--stone-100); }
.auraco-hasla__polityka summary { padding: 14px 16px; font-weight: 700; color: var(--wp--preset--color--brass-900); cursor: pointer; }
.auraco-hasla__polityka summary:focus-visible { outline: 2px solid var(--wp--preset--color--brass-700); outline-offset: 2px; }
.auraco-hasla__polityka[open] summary { border-bottom: 1px solid var(--wp--preset--color--stone-200); }
.auraco-hasla__polityka-pola { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 16px 0; }
.auraco-hasla__polityka-pola label span { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.auraco-hasla__polityka-wymogi { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 14px 16px 0; }
.auraco-hasla__polityka-wymogi legend { float: left; width: 100%; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.auraco-hasla__polityka-wymogi label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 15px; cursor: pointer; }
.auraco-hasla__polityka-wymogi input { width: 18px; height: 18px; accent-color: var(--wp--preset--color--brass-700); }
.auraco-hasla__polityka-wynik { margin: 14px 16px 16px; padding: 10px 14px; border-radius: 6px; font-size: 15px; line-height: 1.5; }
.auraco-hasla__polityka-wynik--tak { background: #e3f1e8; color: #1f4d35; }
.auraco-hasla__polityka-wynik--nie { background: #fbe9e4; color: #7c2a1b; }

@media (max-width: 960px) {
  .auraco-hasla__uklad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .auraco-hasla__tryby { gap: 4px; padding: 4px; }
  .auraco-hasla__tryby button { padding: 8px 4px; min-height: 52px; }
  .auraco-hasla__tryby button strong { font-size: 15px; }
  .auraco-hasla__tryby button small { display: none; }
  .auraco-hasla__klasy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auraco-hasla__liczby { grid-template-columns: minmax(0, 1fr); }
  .auraco-hasla__liczby > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .auraco-hasla__liczby dd { margin: 0; font-size: 17px; text-align: right; }
  .auraco-hasla__akcje .auraco-hasla__przycisk { flex: 1 1 auto; }
  .auraco-hasla__akcje .auraco-hasla__przycisk--glowny { flex-basis: 100%; }
  .auraco-hasla__polityka-pola { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .auraco-hasla *, .auraco-hasla *::after { transition: none !important; }
}
@media print {
  .auraco-hasla__akcje, .auraco-hasla__propozycje, .auraco-hasla__tryby, .auraco-hasla__opcje { display: none !important; }
  .auraco-hasla__wynik { background: #fff; color: #000; box-shadow: none; border: 1px solid #999; }
  .auraco-hasla__haslo, .auraco-hasla__z { color: #000 !important; }
  .auraco-hasla__uklad { grid-template-columns: 1fr; }
}