/* ═══════════════════════════════════════════════════════════════════════════
   PTS - skóra „deep blue"

   Decyzja PTS z 2026-08-30: strona schodzi na ciemny granat, budowany
   z granatu księgi (#221E5E), z jasnym paskiem nawigacji dla znaku
   podstawowego. Długie teksty zostają na jasnych wyspach, bo dokument
   czytany na ciemnym tle męczy szybciej, niż robi wrażenie.

   Zasada działania: komponenty czytają tokeny (--ink, --line, --navy-wash,
   --orange-ink...), więc ciemna skóra przepina tokeny raz, na body,
   a jasne wyspy (.nav, .zgoda, .oslona, .section--mist, .section--paper)
   przepinają je z powrotem. Nadpisań wprost jest tylko tyle, ile kolorów
   komponenty mają wpisanych literalnie.

   Ładowany jako ostatni. Usunięcie tego pliku z kolejki przywraca jasną
   wersję strony w całości.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ciemne sterowanie przeglądarki: pasek przewijania, autouzupełnianie pól. */
html { color-scheme: dark; }

:root {
  /* Najgłębszy granat serwisu: tło całej strony. Ciemniejszy od
     --navy-ink, żeby sekcje na granacie czytały się jak panele NAD tłem.
     Rozjaśniony minimalnie z #0D0B29 (Oliver, 2026-09-04): jasny pasek
     nawigacji ma się mocniej odcinać od treści. */
  --navy-night: #13103B;
}

body {
  /* Panele na granacie idą w górę razem z tłem - nadpisanie tylko w tej
     skórze, żeby zdjęcie arkusza przywracało jasną wersję bez śladu. */
  --navy-ink: #19154A;
  --ink:   #FFFFFF;
  --ink-2: var(--on-navy-2);
  --ink-3: var(--on-navy-3);
  --line:      rgba(255, 255, 255, 0.14);
  --navy-line: rgba(255, 255, 255, 0.24);
  --navy-wash: rgba(255, 255, 255, 0.05);
  --mist-2:    rgba(255, 255, 255, 0.06);
  /* Na granacie pomarańcz podstawowy ma 5.65:1, więc przyciemniony wariant
     do małego tekstu nie jest potrzebny. */
  --orange-ink: var(--orange);

  /* Tło strony dla kart stosu sekcji (interakcje.css). */
  --tlo-strony: var(--navy-night);

  background:
    radial-gradient(90rem 44rem at 82% -8rem, rgba(46, 42, 114, 0.35), transparent 62%),
    var(--navy-night);
  color: var(--ink-2);
}

/* ── jasne wyspy ──────────────────────────────────────────────────────────
   Pasek nawigacji (znak podstawowy idzie tylko na biel, księga s. 5),
   baner zgody, osłona materiału zewnętrznego i sekcje czytelnicze.
   `.section--paper` jest wariantem dla dokumentów: regulamin, polityka.  */
.nav, .zgoda, .oslona,
.section--mist, .section--paper,
.strona--dokument article {
  --ink:   #16142F;
  --ink-2: #4B4870;
  --ink-3: #6E6B90;
  --line:  #E1E4EF;
  --navy-line: rgba(34, 30, 94, 0.14);
  --navy-wash: rgba(34, 30, 94, 0.05);
  --mist-2: #EDEFF6;
  --orange-ink: #BC4610;
  color: var(--ink);
  color-scheme: light;
}

.section--paper { background: #fff; }

/* Strony dokumentów (regulamin, polityka prywatności) czytają się jak
   dokumenty: cała treść na białej płycie. Klasę nadaje filtr w
   `functions.php`; nowa strona tego rodzaju wymaga dopisania sluga tam
   albo użycia sekcji `section--paper` w edytorze. */
.strona--dokument article {
  max-width: min(var(--shell), calc(100% - 2 * var(--gutter)));
  margin-block: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(2rem, 4vw, 4rem);
  /* Odstęp od krawędzi płyty (Iwona, 2026-09-08): tekst dotykał lewej
     krawędzi, bo sekcja alignfull uciekała z karty ujemnymi marginesami -
     te schodzą regułą niżej, a wcięcie trzyma padding karty. */
  padding-inline: clamp(1.5rem, 4vw, 4.5rem);
  background: #fff;
  border-radius: var(--r-lg);
}

/* Sekcja wewnątrz płyty nie jest pełną szerokością okna - to karta ją
   ogranicza. Bez tego formuła alignfull (100vw i ujemne marginesy)
   wyprowadzała treść poza białe tło. */
.strona--dokument article .wp-block-group.alignfull.section {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/* Typografia dokumentu (Iwona, 2026-09-08): nagłówki wyraźnie mniejsze
   od tytułu strony, tekst w stopniu podstawowym jak na innych stronach. */
.strona--dokument article h2 {
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem);
}

.strona--dokument article :is(p, li) {
  font-size: var(--fs-body);
}

/* Klasa presetu z edytora niesie `!important`, więc zdanie wprowadzające
   dokumentu trzeba ściągnąć do stopnia podstawowego tym samym gestem. */
.strona--dokument article .has-lead-font-size {
  font-size: var(--fs-body) !important;
}

/* Pełna szerokość dla wysp papierowych, tym samym mechanizmem co mist. */
.wp-block-group.alignfull.section--paper {
  width: calc(100vw - var(--pasek, 0px));
  max-width: calc(100vw - var(--pasek, 0px));
  margin-left: calc(50% - (100vw - var(--pasek, 0px)) / 2);
  margin-right: calc(50% - (100vw - var(--pasek, 0px)) / 2);
  padding-inline: max(var(--gutter), calc((100vw - var(--pasek, 0px) - var(--shell)) / 2));
}

/* Nagłówki i odnośniki dostają kolory z theme.json (biel na ciemnym),
   więc wyspy muszą je zawrócić do granatu. */
.section--mist :is(h1, h2, h3, h4, h5),
.section--paper :is(h1, h2, h3, h4, h5),
.strona--dokument article :is(h1, h2, h3, h4, h5),
.zgoda .zgoda__tytul { color: var(--navy); }

.section--mist a:where(:not(.wp-element-button)),
.section--paper a:where(:not(.wp-element-button)),
.strona--dokument article a:where(:not(.wp-element-button)),
.zgoda a, .oslona a { color: var(--navy); }

.section--mist .section-head p { color: var(--ink-2); }

/* ── komponenty z kolorami wpisanymi literalnie ─────────────────────────── */

/* Karty: na ciemnym kontur zamiast białej płyty. `!important`, bo presety
   tła WordPressa (`has-white-background-color`) same niosą `!important`. */
.card { background: rgba(255, 255, 255, 0.035) !important; }
.section--mist .card, .section--paper .card { background: #fff !important; }

/* Kafle floty i wartości: płyta w kolorze panelu, nie bieli. */
.fleet__item, .values > div { background: var(--navy-ink); }
.section--mist .fleet__item, .section--mist .values > div { background: #fff; }

/* Ikony liniowe: granat znika na granacie. */
.ico:not(.ico--orange) { color: #E9EAF5; }
.section--mist .ico:not(.ico--orange),
.section--paper .ico:not(.ico--orange),
.oslona .ico:not(.ico--orange) { color: var(--navy); }

/* Działy kontaktu i karta pobrania. */
.dept, .dl { background: var(--navy-ink); }
.section--mist .dept, .section--paper .dl, .section--mist .dl { background: #fff; }

/* Pasek faktów: liczby były granatem. */
.facts dt { color: #fff; }
.section--mist .facts dt, .section--paper .facts dt { color: var(--navy); }

/* Akordeon: pozycja otwarta wracała do granatu. */
.acc__btn[aria-expanded="true"] { color: #fff; }
.section--mist .acc__btn[aria-expanded="true"],
.section--paper .acc__btn[aria-expanded="true"] { color: var(--navy); }

/* Zakładki filtrów. */
.chips :is(button, a):hover { border-color: #fff; color: #fff; }
.section--mist .chips :is(button, a):hover { border-color: var(--navy); color: var(--navy); }

/* Filtr wybrany: granat na granacie byłby niewidoczny, więc zaznaczenie
   odwraca kolory - biała pigułka z granatowym napisem. Pomarańcz przegrywa
   tu z czytelnością: biel na nim daje 3.17:1, a napis filtra ma 13 px,
   czyli próg 4.5:1. Pomarańcz zostaje w kropce przy napisie. */
.chips :is(button[aria-pressed="true"], a[aria-current="page"]) {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

.chips :is(button[aria-pressed="true"], a[aria-current="page"])::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.5rem;
  vertical-align: 0.05em;
  border-radius: 50%;
  background: var(--orange);
}

/* Znaczniki i link tekstowy. */
.tag { color: #E9EAF5; }
.section--mist .tag, .section--paper .tag { color: var(--navy); }
.tlink { color: #fff; }
.section--mist .tlink, .section--paper .tlink { color: var(--navy); }

/* Przycisk widmowy zachowuje się jak wariant jasny; na wyspach wraca do
   wersji granatowej. */
.btn--ghost { --btn-fg: #fff; }
.btn--ghost::before { background: #fff; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--navy); border-color: #fff; }
:is(.section--mist, .section--paper, .zgoda, .oslona, .strona--dokument article) .btn--ghost { --btn-fg: var(--navy); }
:is(.section--mist, .section--paper, .zgoda, .oslona, .strona--dokument article) .btn--ghost::before { background: var(--navy); }
:is(.section--mist, .section--paper, .zgoda, .oslona, .strona--dokument article) .btn--ghost:hover,
:is(.section--mist, .section--paper, .zgoda, .oslona, .strona--dokument article) .btn--ghost:focus-visible { color: #fff; border-color: var(--navy); }

/* Pola formularzy: biała płyta zostaje tylko na wyspach. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea, .field select,
.form-kontakt input[type="text"],
.form-kontakt input[type="email"],
.form-kontakt input[type="tel"],
.form-kontakt textarea {
  background: rgba(255, 255, 255, 0.05);
}
.section--mist :is(.field, .form-kontakt) :is(input, textarea, select),
.section--paper :is(.field, .form-kontakt) :is(input, textarea, select) {
  background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--orange);
}
.form-komunikat--ok { border-color: rgba(255, 255, 255, 0.55); }
.section--paper .form-komunikat--ok, .section--mist .form-komunikat--ok { border-color: var(--navy); }

/* Klauzula pod formularzem. `components.css` daje jej pomarańczowe tło
   z wersji B; na granacie wychodzi z tego brunatny prostokąt, a treść
   jest tam informacyjna, nie ostrzegawcza. Zostaje sama kreska akcentu. */
.form-note {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: rgba(255, 255, 255, 0.28);
  color: var(--ink-3);
}

:is(.section--mist, .section--paper, .strona--dokument article) .form-note {
  background: var(--orange-wash);
  border-left-color: var(--orange);
  color: var(--ink-2);
}

/* Pole wyboru pliku: przycisk przeglądarki jest jasny i na ciemnym tle
   wygląda jak wklejony. */
.form-cv input[type="file"] {
  padding: 0.7rem 1rem;
  border: 1px dashed var(--navy-line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-2);
  font-size: var(--fs-small);
  width: 100%;
}

.form-cv input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Spis skrótów na 404. */
.lista-linkow a { color: #fff; }

/* Karta rejestrowa firmy na kontakcie: panel wymaga konturu nad tłem. */
.company-card { border: 1px solid rgba(255, 255, 255, 0.14); }

/* Znak wodny w sekcji zakresu: granatowy rysunek znika na granacie. */
.scope__bg { filter: invert(1); opacity: 0.05; }

/* Stopka: panel nad najgłębszym tłem, oddzielony włosem. */
.footer { border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* Oś sekcji czyta kolory z tokenów, ale wariant „na jasnym" nie istnieje
   już nigdzie poza wyspami, więc szczeble dostają jasny domyślny. */
.os .os__szczebel::before { background: rgba(255, 255, 255, 0.28); }
.os .os__szczebel[aria-current="true"]::before,
.os .os__szczebel:hover::before,
.os .os__szczebel:focus-visible::before { background: var(--orange); }
.os__napis { color: var(--on-navy-3); }