/* ==========================================================================
 nis2-komponenty.css - komponenty wspólne dla całego serwisu nis2.elev8.pl

   Ładowany PO nis2-tokens.css, PRZED lokalnym <style> strony.
   Ta kolejność jest celowa: strona może dopisać coś swojego, ale komponent
 bazowy wygląda wszędzie tak samo.

   Powód powstania: te same selektory żyły w pięciu plikach w dwóch–pięciu
 różnych wersjach. `.btn` miał trzy warianty, `.footer` cztery,
   `.eyebrow` cztery. To nie była duplikacja, tylko rozjazd - każda strona
 powoli odchodziła od pozostałych.

   Kanoniczna wersja pochodzi z landingu, bo była najdalej dopracowana.

   Zasada: kolory, odstępy, promienie i cienie wyłącznie przez zmienne
 z nis2-tokens.css. Żadnych wartości wpisanych na sztywno.
   ========================================================================== */

/* ---------------------------------------------------------------- podstawa */

*, *::before, *::after { box-sizing: border-box; }

html {
 scroll-behavior: smooth;
 scroll-padding-top: 92px;
}

body {
 margin: 0;
 background: var(--tlo);
 color: var(--tekst);
 font-family: var(--font-tekst);
 font-size: 17px;
 line-height: var(--wysokosc-linii);
 text-wrap: pretty;
 overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
 font-family: var(--font-naglowek);
 font-weight: 600;
 line-height: var(--wysokosc-linii-naglowek);
 letter-spacing: 0;
 color: var(--tekst);
 text-wrap: balance;
 margin-top: 0;
}

p { margin-top: 0; }
a { color: inherit; }

:focus-visible {
 outline: 2px solid var(--akcja);
 outline-offset: 3px;
}

button, input, select, textarea { font: inherit; }

/* Blokada przewijania, gdy otwarte jest menu mobilne. */
body.nav-open { overflow: hidden; }

/* ------------------------------------------------------------ pojemnik */

.wrap {
 width: min(var(--max, var(--szerokosc-tresci)), calc(100% - 40px));
 margin: 0 auto;
}

/* ------------------------------------------------- przeskok do treści */

.skip {
 position: absolute;
 left: 14px;
 top: 10px;
 z-index: var(--warstwa-nad-wszystkim);
 transform: translateY(-140%);
 background: var(--tekst);
 color: var(--tlo);
 padding: 10px 14px;
 border-radius: var(--promien);
 text-decoration: none;
}
.skip:focus { transform: translateY(0); }

/* ------------------------------------------------------------- topbar */

.topbar {
 position: sticky;
 top: 0;
 z-index: var(--warstwa-topbar);
 background: rgba(255, 255, 255, 0.94);
 border-bottom: 1px solid var(--linia);
 backdrop-filter: blur(10px);
 transition: box-shadow var(--czas-sredni) ease, background var(--czas-sredni) ease;
}
.topbar.scrolled {
 box-shadow: var(--cien-lekki);
 background: rgba(255, 255, 255, 0.97);
}
.topbar .wrap {
 min-height: 76px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
}

.brand-name {
 font-family: var(--font-marka);
 font-size: 19px;
 font-weight: 700;
 letter-spacing: 0;
 color: var(--tekst);
 text-decoration: none;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
 padding: 10px 12px;
 font-size: 13px;
 font-weight: 600;
 text-decoration: none;
 color: var(--tekst-drugi);
 border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--tekst); border-color: var(--linia-mocna); }

.menu-toggle {
 display: none;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 border: 1px solid var(--linia-mocna);
 border-radius: var(--promien);
 background: var(--tlo-karty);
 color: var(--tekst);
 cursor: pointer;
}

/* ----------------------------------------------------------- przyciski */

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 padding: 13px 22px;
 border: 1px solid var(--tekst);
 border-radius: var(--promien);
 background: var(--tekst);
 color: var(--tlo);
 font-weight: 700;
 font-size: 14.5px;
 text-decoration: none;
 cursor: pointer;
 transition: transform var(--czas-szybki) ease, background var(--czas-szybki) ease, color var(--czas-szybki) ease;
}
.btn:hover { transform: translateY(-1px); background: var(--tlo-ciemne-2); }

/* Wariant akcji. Nazwa `.rust` jest historyczna - to jest przycisk główny. */
.btn.rust {
 border-color: transparent;
 background: var(--akcja-gradient);
 color: var(--tekst-na-ciemnym);
 box-shadow: var(--cien-akcji-mocny);
}
.btn.rust:hover { background: var(--akcja-gradient-hover); color: var(--tekst-na-ciemnym); }

.btn.secondary {
 background: transparent;
 color: var(--tekst);
 border-color: var(--linia-mocna);
}
.btn.secondary:hover { background: var(--akcja-tlo); border-color: rgba(8, 127, 120, 0.28); }

.btn.small { min-height: 44px; padding: 9px 14px; font-size: 13px; }
.btn[disabled], .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* -------------------------------------------------------------- linki */

.inline-link {
 color: var(--akcja);
 text-decoration: none;
 border-bottom: 1px solid rgba(8, 127, 120, 0.35);
 padding-bottom: 1px;
}
.inline-link:hover { border-color: var(--akcja); }

/* Minimalna wysokość celu wskazywania. WCAG 2.2 (2.5.8) wymaga 24x24 px
 dla wszystkich urządzeń - linki w ciągu tekstu mają wyjątek „inline",
 ale odnośniki blokowe już nie. */
.hero-link { min-height: 24px; display: inline-flex; align-items: center; }

/* Odnośnik drugorzędny - alternatywa pod główną akcją, celowo cicha. */
.drugorzedne {
 margin: 18px 0 0;
 font-size: 15px;
 color: var(--tekst-meta);
}
.drugorzedne a {
 color: var(--tekst-meta);
 text-decoration: underline;
 text-underline-offset: 3px;
}
.drugorzedne a:hover { color: var(--akcja); }

/* ------------------------------------------------------------ etykieta */

.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: 11.5px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--akcja);
 margin: 0 0 18px;
 padding: 6px 10px;
 border: 1px solid rgba(8, 127, 120, 0.16);
 border-radius: var(--promien-pelny);
 background: rgba(226, 247, 242, 0.62);
}
.eyebrow::before {
 content: "";
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--akcja);
 display: inline-block;
}

/* -------------------------------------------------------------- stopka */

.footer {
 padding: 34px 0;
 background: var(--stopka-gradient);
 color: rgba(255, 255, 255, 0.86);
 border-top: 0;
}
.footer .wrap {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 14px;
 font-size: 13px;
}
.footer a { text-decoration: none; color: rgba(255, 255, 255, 0.9); }
.footer a:hover { color: var(--tekst-na-ciemnym); }

/* Stopka ze znakiem (.footer-brand, .footer-logo) siedzi w nis2-stopka.css.
   Kopia stała tu do 08.08.2026 i była martwa: jedyna strona z tym układem
   to webinar.html, a ona ładuje nis2-stopka.css. Kontrola frontu widziała
   ten sam selektor w trzech arkuszach naraz. */

/* --------------------------------------------------------------- tabele */

table { width: 100%; border-collapse: collapse; }
th, td {
 text-align: left;
 padding: 12px 14px;
 border-bottom: 1px solid var(--linia);
 vertical-align: top;
}
th {
 font-weight: 600;
 color: var(--tekst);
 font-size: 13px;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 background: var(--tlo-cieple-jasne);
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 840px) {
  .wrap { width: min(var(--max, var(--szerokosc-tresci)), calc(100% - 32px)); }
  .topbar .wrap { gap: 12px; }
  .brand-name { font-size: 18px; }
  .nav { display: none; }
  .menu-toggle { display: inline-flex; flex: 0 0 44px; margin-left: auto; }

  /* Cele dotyku: minimum 44 px wszędzie, gdzie się klika. Powiększamy
 obszar klikalny, nie sam element - układ zostaje bez zmian. */
  .brand-name,
  .footer a,
  .drugorzedne a {
 display: inline-flex;
 align-items: center;
 min-height: 44px;
  }
  .footer a { padding-block: 2px; }
  .footer .wrap { justify-content: flex-start; }
}

/* Wersja mobilna .footer-brand razem z reszta stopki ze znakiem:
   nis2-stopka.css, to samo zapytanie medialne 620 px. */