/* ==========================================================================
   Dodatki wymagane przez WordPressa.
   main.css jest kopią 1:1 wersji statycznej i ma zostać nietknięty — wszystko,
   czego statyczny szablon nie potrzebował, dopisujemy tutaj.
   ========================================================================== */

/* Ikona odbioru w postaci maski — potrzebna tam, gdzie znacznik rysuje
   pseudoelement i nie da się wstawić <use href="#i-check">. */
:root{
  --ptaszek:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
}

/* ---------- menu z wp_nav_menu ----------
   Wersja statyczna miała płaskie <a> w <nav>; WordPress owija je w <ul><li>,
   więc układ flex trzeba przenieść o poziom niżej. */
nav.primary .menu{display:flex;align-items:center;gap:2.2rem}
nav.primary .menu li{position:relative}
.mobile-menu nav .menu{display:flex;flex-direction:column;gap:1.4rem}

/* podmenu: wersja statyczna nie miała rozwijanych pozycji, ale kupujący
   doda podstrony usług i musi mieć czym je pokazać */
nav.primary .sub-menu{
  position:absolute;top:100%;left:-1.1rem;z-index:55;min-width:250px;
  background:var(--paper);border:1px solid var(--line);
  padding:.6rem 0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
nav.primary li:hover > .sub-menu,
nav.primary li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
nav.primary .sub-menu a{display:block;padding:.6rem 1.1rem;font-size:.94rem;font-weight:400}
nav.primary .sub-menu a::after{display:none}
nav.primary .sub-menu a:hover{background:var(--paper-2);color:var(--text)}
.mobile-menu .sub-menu{margin:.8rem 0 0 1.2rem;display:flex;flex-direction:column;gap:.8rem}
.mobile-menu .sub-menu a{font-size:1.15rem;font-weight:400;color:var(--text-on-ink-muted)}

/* pasek administratora nie może zasłaniać przyklejonego nagłówka */
.admin-bar header.site{top:32px}
@media (max-width:782px){ .admin-bar header.site{top:46px} }

/* ---------- przycisk na ciemnym tle ----------
   .btn-primary:hover przyciemnia się do --ink. Na jasnej sekcji to działa,
   ale na ciemnym kontenerze przycisk dostaje dokładnie kolor tła i znika:
   zmierzony kontrast wynosił 1.00:1 w panelu bocznym i 1.19:1 na banerze.
   Tam, gdzie tło jest ciemne, hover ma więc rozjaśniać, nie przyciemniać.
   Kreska i kostka strzałki liczą kolor z currentColor, więc idą za tekstem. */
.on-ink .btn-primary:hover,
.side-card-ink .btn-primary:hover,
.mobile-menu .btn-primary:hover{
  background:var(--paper);
  border-color:var(--paper);
  color:var(--text);
}

/* ---------- dostępność ---------- */
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:1rem;left:1rem;z-index:100;
  width:auto;height:auto;clip-path:none;
  background:var(--accent);color:var(--text);
  padding:.9rem 1.4rem;font-weight:700;
}

/* ---------- treść z edytora bloków ----------
   Treść wpisu i strony nosi obie klasy naraz: .prose i .entry-content.
   Wygląd typografii ustala .prose z main.css, więc tutaj zostają wyłącznie
   rzeczy, których wersja statyczna nie miała: listy numerowane, odnośniki
   w tekście, cytat i wyrównania bloków. Reguły powielające .prose — rozmiar
   nagłówka, odstęp punktu listy, marginesy akapitu — nadpisywały ją,
   bo wp.css ładuje się po main.css. */
.entry-content > *{margin-block:1.35rem}
.entry-content > :first-child{margin-top:0}
/* Akapit jako jedyny nie ma w .prose własnego marginesu górnego, więc przejmował
   go z reguły wyżej. Po zlaniu marginesów dawało to 4 px nadwyżki przy każdej
   parze akapitów — na dłuższym artykule ponad 40 px różnicy wobec wzorca. */
.prose p{margin-top:0}
.entry-content h3{font-size:clamp(1.25rem,2vw,1.5rem);margin-top:2.1rem}
.entry-content ol{list-style:decimal;padding-left:1.4rem}
.entry-content ol li{margin-bottom:.5rem}
.entry-content a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.entry-content a:hover{color:var(--text)}
.entry-content blockquote{
  border-left:3px solid var(--accent);padding-left:1.4rem;
  font-size:1.1rem;color:var(--text-muted);
}

/* Blok tabeli i blok obrazka opakowują treść w <figure>, czego wersja
   statyczna nie robiła (miała .table-scroll i goły <figure>). Oddajemy im
   te same marginesy, przewijanie w poziomie i wyrównanie podpisu. */
.prose figure.wp-block-table{overflow-x:auto;margin:1.4rem 0 1.8rem}
/* Blok tabeli obrysowuje każdą komórkę własnym stylem rdzenia. Wzorzec ma
   wyłącznie linie poziome, więc obrys kasujemy i wracamy do samej podstawy. */
.prose .wp-block-table th,
.prose .wp-block-table td{border:0}
.prose .wp-block-table tbody td{border-bottom:1px solid var(--line)}
.prose .wp-block-table tbody tr:last-child td{border-bottom:none}
.prose figure.wp-block-image{margin:2rem 0}
.prose figcaption{text-align:left;margin-bottom:0}

/* Wyrównania dotyczą treści wpisu, która ma ograniczoną szerokość.
   Sekcje strony głównej też noszą klasę alignfull (tak deklarują bloki), ale
   leżą wprost w <main> i są pełnej szerokości same z siebie — 100vw dołożyłoby
   im szerokość paska przewijania i zrobiło poziomy suwak. */
.entry-content .alignwide{max-width:min(1180px,100%);margin-inline:auto}
.entry-content .alignfull{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
.aligncenter{margin-inline:auto;text-align:center}
.alignleft{float:left;margin:.4rem 1.6rem 1rem 0}
.alignright{float:right;margin:.4rem 0 1rem 1.6rem}
.wp-caption-text,.wp-element-caption{
  font-size:.85rem;color:var(--text-muted);margin-top:.6rem;text-align:center;
}
.sticky .blog-card{outline:2px solid var(--accent)}

/* ---------- godziny pracy w stopce ----------
   Wersja statyczna miała jeden zakres wpisany w zdanie. Gdy firma dopisze
   sobotę, zakresy schodzą do dwóch kolumn: dni po lewej, godziny po prawej,
   żeby dało się je porównać wzrokiem zamiast czytać jeden ciąg.
   Kolumny mają szerokość najdłuższego wpisu, a nie całego bloku — przy
   „So” obok „Pon–Pt” rozciągnięty odstęp zostawiał w wierszu dziurę. */
.footer-hours-list{
  margin-top:.5rem;
  display:grid;
  grid-template-columns:max-content max-content;
  gap:.3rem 1.4rem;
  width:max-content;
}
.footer-hours-list dt{color:var(--text-on-ink)}
.footer-hours-list dd{margin:0;white-space:nowrap}
/* Wpis bez dnia bywa całym zdaniem, więc musi mieć prawo się zawinąć. */
.footer-hours-list .bez-dni{grid-column:1 / -1;white-space:normal;max-width:22rem}

/* W karcie kontaktu każdy zakres jest osobnym akapitem — bez tego drugi
   dziedziczyłby odstęp akapitowy i odjeżdżał od pierwszego. */
.contact-info-card p + p{margin-top:.15rem}

/* Podpis wykonawcy w stopce: ma być czytelny, ale nie konkurować z notą
   o prawach autorskich obok. Na wąskim ekranie schodzi do własnego wiersza. */
.footer-sygnatura{margin-left:.6rem;opacity:.75}
.footer-sygnatura a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){ .footer-sygnatura{display:block;margin-left:0;margin-top:.35rem} }

/* ---------- sekcja „dlaczego my" ----------
   Wersja statyczna miała te wartości w atrybucie style i wpisane numery 01-04.
   W bloku numer jest opcjonalny: pusty rysuje licznik CSS, więc dodanie albo
   przestawienie punktu nie wymaga poprawiania numeracji ręcznie. */
.why-lead{margin-top:1rem;color:var(--text-muted);max-width:52ch}

/* ---------- listy w kolumnie tekstu ----------
   Wersja statyczna wpisywała ikonę odbioru w każdy punkt ręcznie
   (<li><svg><use href="#i-check"/></svg>…). Kupujący pisze zwykłą listę
   blokiem rdzenia, a .prose ul li ma display:flex, więc bez znacznika punkty
   zostałyby gołym tekstem. Znacznik rysuje więc pseudoelement — ta sama
   ścieżka co #i-check w sprite'cie i ta sama grubość kreski. */
.prose ul.wp-block-list{list-style:none;padding-left:0}
.prose ul.wp-block-list li::before{
  content:"";
  width:19px;height:19px;flex:none;margin-top:.25rem;
  background:var(--accent-deep);
  -webkit-mask:var(--ptaszek) center/contain no-repeat;
          mask:var(--ptaszek) center/contain no-repeat;
}
.prose ol.wp-block-list{list-style:decimal;padding-left:1.3rem}
.prose ol.wp-block-list li{display:list-item}
.why-list{counter-reset:powod}
.why-item{counter-increment:powod}
.why-num:empty::before{content:counter(powod,decimal-leading-zero)}

/* Etapy współpracy numerują się tak samo jak atuty. */
.process-track{counter-reset:krok}
.proc-item{counter-increment:krok}
.proc-dot:empty::before{content:counter(krok,decimal-leading-zero)}

/* Ciemna karta zachęty w kolumnie bocznej wpisu. Wersja statyczna miała te
   wartości w atrybucie style; w szablonie lepiej trzymać je w klasie. */
.side-card-ink{margin-top:1.2rem;background:var(--ink);border-color:var(--ink)}
/* Gdy ciemna karta jest w kolumnie jedyna, odstęp nad nią nie ma czego
   odsuwać — wyrównanie z sąsiednią kolumną tekstu jest wtedy ważniejsze. */
.side-card-ink:first-child{margin-top:0}
.side-card-ink h4{color:var(--text-on-ink)}
.side-card-ink p{color:var(--text-on-ink-muted);font-size:.88rem;margin-bottom:1.1rem}
.side-card-ink .btn{width:100%}

/* ---------- paginacja ---------- */
.pagination{margin-top:clamp(2.2rem,4vw,3.2rem)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;height:46px;padding-inline:.9rem;
  border:1px solid var(--line);font-weight:700;font-size:.9rem;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.pagination .page-numbers:hover{background:var(--ink);border-color:var(--ink);color:var(--text-on-ink)}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--text)}
.pagination .screen-reader-text{display:none}

/* ---------- mapa dojazdu ----------
   Wersja statyczna miała w tym miejscu zdjęcie z podpisem „miejsce na mapę".
   Tutaj kadr jest przyciskiem: ramka dostawcy wchodzi dopiero po kliknięciu. */
.polmur-mapa{display:grid;place-items:center}
.polmur-mapa > img{position:absolute;inset:0;filter:saturate(.5) brightness(.65)}
.polmur-mapa .btn{position:relative;z-index:2}
.polmur-mapa .cap{z-index:2}
.polmur-mapa iframe{width:100%;height:100%;border:0;display:block}
.polmur-mapa-wczytana{display:block}

/* Kadr złożony z kafelków. Każdy kafelek jest ustawiony bezwzględnie względem
   płótna, bo tylko tak da się wyśrodkować mapę na punkcie z dokładnością
   mniejszą niż jeden kafelek. */
.polmur-mapa-plotno{position:absolute;inset:0;overflow:hidden}
/* Rozmiar kafelka podajemy jawnie, bo .photo img z arkusza wzorcowego
   rozciąga każdy obrazek w kadrze na 100% z object-fit:cover — kafelki
   dostawały wtedy rozmiar całej mapy i obraz rozjeżdżał się w pasy. */
.polmur-mapa-plotno img{
  position:absolute;
  width:256px;height:256px;max-width:none;
  object-fit:none;filter:none;
}
.polmur-mapa-pinezka{
  position:absolute;left:50%;top:50%;z-index:2;
  width:18px;height:18px;margin:-9px 0 0 -9px;
  border:3px solid var(--paper);border-radius:50%;
  background:var(--accent);box-shadow:0 2px 8px rgba(12,26,33,.45);
}
.polmur-mapa-stopka{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:.35rem .6rem;
  background:rgba(255,255,255,.82);
  font-size:.72rem;line-height:1.3;text-align:right;
}
.polmur-mapa-stopka a{color:var(--text-muted)}
.polmur-mapa-stopka a:hover{color:var(--accent-deep)}

/* ---------- formularz zapytania ---------- */
.contact-lead{color:var(--text-muted);margin:.8rem 0 1.6rem;max-width:52ch}
.contact-dane li{margin-bottom:1rem}

.form-komunikat{padding:1.1rem 1.3rem;margin-bottom:1.6rem;border-left:3px solid var(--accent)}
.form-komunikat-ok{background:var(--accent-soft)}
.form-komunikat-ok strong{display:block;margin-bottom:.35rem}
.form-komunikat-ok p{color:var(--text-muted);font-size:.92rem}
.form-komunikat-blad{background:#fdecec;border-left-color:#b32d2e;color:#7a1f20}

.form-blad{display:block;margin-top:.4rem;font-size:.85rem;color:#b32d2e}
.wymagane{color:var(--accent-deep)}
.contact-form [aria-invalid="true"]{border-color:#b32d2e}

/* Formularz jest siatką, więc przycisk domyślnie rozciąga się na całą
   szerokość kolumny. Wersja statyczna dosuwała go do lewej. */
.contact-form button[type="submit"]{justify-self:start}

/* Pola w rzędzie trzymają się góry.
   Wersja statyczna nie sprawdzała formularza, więc pod polem nigdy nie
   przybywało treści. Tutaj komunikat walidacji podwyższa jedną kolumnę,
   a siatka rozciąga wtedy wiersze drugiej — telefon puchł z 50 do 69 px
   i zjeżdżał w dół, wypadając z linii obok imienia. */
.form-field{align-content:start}

.form-zgoda label{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--text-muted);line-height:1.6;cursor:pointer}
.form-zgoda input{margin-top:.25rem;flex:none;width:18px;height:18px;accent-color:var(--accent-deep)}
.form-zgoda a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- formularz wyszukiwania ---------- */
.search-form{display:flex;gap:.6rem;max-width:520px}
.search-form .search-field{
  flex:1;padding:.85rem 1rem;border:1px solid var(--line);
  background:var(--paper-3);font:inherit;
}
.search-form .search-field:focus{outline:2px solid var(--accent);outline-offset:-2px}