/* ==========================================================================
   Barlow — font hostowany na wlasnym serwerze (licencja SIL Open Font License).
   Pliki obejmuja zestawy latin i latin-ext, czyli komplet polskich znakow.
   Wczesniej font byl pobierany z fonts.googleapis.com, co opozniało pierwsze
   wyswietlenie strony i przekazywalo Google adres IP kazdego odwiedzajacego.
   ========================================================================== */
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   BASoftMedia — arkusz stylów strony
   Warstwa 1: baza i typografia
   Warstwa 2: menu mobilne
   Warstwa 3: nadpisania responsywne (układ z projektu jest opisany stylami
              inline, dlatego korekty na małe ekrany wymagają !important)
   ========================================================================== */

/* --------------------------------------------------------------- 1. Baza */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: #fff;
  font-family: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #41464B;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: #CE324A; text-decoration: none; }
a:hover { color: #9C1E33; }

img, svg { max-width: 100%; }
img { height: auto; }

:focus-visible {
  outline: 3px solid #CE324A;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  top: 0;
  left: 0;
  z-index: 100;
  background: #CE324A;
  color: #fff;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  width: auto;
  height: auto;
  clip-path: none;
  color: #fff;
}

/* Sekcje rozwijane (FAQ) */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary > span:last-child {
  display: inline-block;
  transition: transform .18s ease;
}
details[open] > summary > span:last-child { transform: rotate(45deg); }

/* Formularze */
input, select, textarea {
  font-family: inherit;
  font-size: 15.5px;
  color: #111315;
  background: #fff;
  border: 1px solid #D3D8DB;
  border-radius: 4px;
  padding: 11px 13px;
  width: 100%;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #CE324A;
  box-shadow: 0 0 0 3px rgba(206, 50, 74, .12);
}
input[type="checkbox"] { width: 18px; height: 18px; padding: 0; }
textarea { min-height: 120px; resize: vertical; }
label { font-size: 14px; font-weight: 600; color: #111315; display: block; margin-bottom: 6px; }
button { font-family: inherit; }

/* Komunikat walidacji / statusu formularza */
.komunikat {
  border-radius: 4px;
  padding: 16px 18px;
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 0 4px;
}
.komunikat--blad { background: #FDECEF; border: 1px solid #F3B7C2; color: #8E1B2E; }
.komunikat--ok   { background: #ECF7EF; border: 1px solid #B4DDC0; color: #1B5E2C; }

/* Szerokie tabele przewijają się w swoim kontenerze, nie rozpychają strony */
.tabela-przewijana {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  max-width: 100%;
}
.tabela-przewijana > table { min-width: 480px; }

/* Aktywna pozycja w menu */
.jest-aktywny { box-shadow: inset 0 -2px 0 #CE324A; }

/* --------------------------------------------------- 2. Przycisk menu mobilnego */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 42px;
  padding: 0;
  border: 1px solid #D3D8DB;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle:hover { border-color: #CE324A; }

.nav-toggle__box,
.nav-toggle__box::before,
.nav-toggle__box::after {
  display: block;
  width: 20px;
  height: 2px;
  background: #111315;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__box { position: relative; }
.nav-toggle__box::before,
.nav-toggle__box::after { content: ""; position: absolute; left: 0; }
.nav-toggle__box::before { top: -6px; }
.nav-toggle__box::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__box { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::after  { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------- 3. Nadpisania responsywne */

/* Duże tablety i małe laptopy */
@media (max-width: 1080px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="font-size:56px"] { font-size: 44px !important; }
  [style*="font-size:50px"] { font-size: 40px !important; }
}

/* Menu zwijane — prog 1080 px, bo menu ma 7 pozycji (753 px szerokosci) */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }

  .nawigacja {
    display: none !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: #fff;
    border-bottom: 1px solid #EDEFF0;
    box-shadow: 0 14px 28px rgba(17, 19, 21, .10);
    padding: 6px 20px 20px !important;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .nawigacja.jest-otwarta { display: flex !important; }

  .nawigacja a {
    margin-left: 0 !important;
    padding: 15px 4px !important;
    border-bottom: 1px solid #F1F3F4;
    border-radius: 0 !important;
    white-space: normal !important;
  }
  /* Ostatnia pozycja to przycisk „Zapytaj o cenę” */
  .nawigacja a:last-child {
    margin-top: 14px !important;
    padding: 15px 18px !important;
    border-bottom: 0;
    border-radius: 4px !important;
    text-align: center;
  }
}

/* Telefony i wąskie tablety */
@media (max-width: 820px) {
  /* Elementy siatki nie mogą być rozpychane przez swoją najwęższą zawartość
     (np. szeroką tabelę) — bez tego cała strona przewija się w bok. */
  main [style*="display:grid"] > *,
  main [style*="display:flex"] > * { min-width: 0; }

  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:1.05fr .95fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.2fr auto"] {
    grid-template-columns: 1fr !important;
  }
  /* Układy, które muszą pozostać dwukolumnowe: ikona/etykieta + treść */
  label[style*="grid-template-columns:20px 1fr"] { grid-template-columns: 20px 1fr !important; }
  [style*="grid-template-columns:34px 1fr"]      { grid-template-columns: 34px 1fr !important; }
  [style*="grid-template-columns:150px 1fr"]     { grid-template-columns: 130px 1fr !important; }

  /* Marginesy wewnętrzne sekcji */
  section[style], header > div, footer > div, .naglowek-strony > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section[style*="padding:88px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding:80px"] { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Skalowanie nagłówków */
  [style*="font-size:56px"] { font-size: 34px !important; }
  [style*="font-size:50px"] { font-size: 31px !important; }
  [style*="font-size:38px"] { font-size: 27px !important; }
  [style*="font-size:36px"] { font-size: 27px !important; }
  [style*="font-size:32px"] { font-size: 25px !important; }
  [style*="font-size:30px"] { font-size: 24px !important; }
  [style*="font-size:23px"] { font-size: 20px !important; }
  [style*="font-size:19px"] { font-size: 17px !important; }

  /* Duże odstępy między kolumnami po złożeniu do jednej */
  [style*="gap:64px"] { gap: 36px !important; }
  [style*="gap:48px"] { gap: 32px !important; }

  /* Kafelki i karty */
  [style*="padding:44px"] { padding: 26px !important; }
  [style*="padding:32px"] { padding: 22px !important; }
  [style*="padding:30px"] { padding: 20px !important; }
  [style*="padding:28px"] { padding: 20px !important; }

  /* Pasek kontaktowy nad menu — na telefonie zostawiamy sam kontakt,
     hasła sprzedażowe i tak powtarzają się w treści strony. */
  .pasek-gorny { font-size: 13px !important; }
  .pasek-gorny > div { justify-content: center !important; padding: 9px 20px !important; }
  .pasek-gorny > div > div:first-child { display: none !important; }
  .pasek-gorny > div > div:last-child { gap: 18px !important; }
}

@media (max-width: 520px) {
  .nawigacja { max-height: calc(100vh - 64px); }
  [style*="height:280px"] { height: 210px !important; }
  [style*="font-size:56px"] { font-size: 30px !important; }
  .tabela-przewijana > table { min-width: 440px; }
}

/* --------------------------------------------------------------- Wydruk */
@media print {
  .nav-toggle, .skip-link, header[style] { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
  body { color: #000; }
}

/* -------------------------------------------- Preferencja ograniczenia ruchu */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}


/* --- Efekty :hover odtworzone z projektu (atrybuty style-hover) --- */
.h00c7238:hover,.h00c7238:focus-visible{border-color:#CE324A !important;color:#CE324A !important}
.h6f7b315:hover,.h6f7b315:focus-visible{background:#9C1E33 !important}
.h7a04547:hover,.h7a04547:focus-visible{border-color:#CE324A !important}

/* ==========================================================================
   Poprawki wdrozone po audycie z 2 wrzesnia 2026
   ========================================================================== */

/* Pusty kontener komunikatu formularza nie ma zajmowac miejsca w siatce */
#komunikat-formularza:empty { display: none; }

/* Cele dotykowe: linki w stopce i w pasku gornym byly nizsze niz 24 px */
@media (max-width: 820px) {
  footer a { padding-top: 6px; padding-bottom: 6px; }
  .pasek-gorny a { display: inline-block; padding: 6px 2px; }
}

/* Tabele przewijane w poziomie sygnalizuja, ze maja dalszy ciag.
   Cien przy krawedzi znika po przewinieciu do konca - bez JavaScriptu. */
.tabela-przewijana {
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(17, 19, 21, .14), rgba(17, 19, 21, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(17, 19, 21, .14), rgba(17, 19, 21, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}