/*
Theme Name: Laboratorium Analityczne KZS
Theme URI: https://laboratorium-kzs.sum.edu.pl
Author: Śląski Uniwersytet Medyczny w Katowicach
Author URI: https://sum.edu.pl
Description: Motyw premium dla Laboratorium Analitycznego Katedry Zdrowia Środowiskowego (Wydział Zdrowia Publicznego w Bytomiu, SUM) — strona komercyjnej oferty badawczej, zgodna z WCAG 2.1 AA.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: labkzs
*/

/* ==========================================================================
   1. RESET — nowoczesny, minimalny reset CSS
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

/* Pasek admina WordPressa (widoczny tylko zalogowanym) doklejony jest
   position:fixed u góry i "zjada" część viewportu bez zmniejszania 100vh
   — bez poniższej korekty stopka byłaby ucięta o dokładnie tyle, ile
   wynosi wysokość paska (32px desktop / 46px wąskie ekrany — to
   standardowe, stałe wartości WordPressa, nie nasze). */
body.admin-bar {
  min-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    min-height: calc(100vh - 46px);
  }
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

ul[class],
ol[class] {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ==========================================================================
   2. DESIGN TOKENS — zmienne CSS (custom properties)
   Zmiana wartości tutaj = zmiana w całym serwisie. Nic poniżej nie
   powinno zawierać kolorów/odstępów "na sztywno" poza tą sekcją.
   ========================================================================== */

:root {

  /* --- Kolory marki (granat, zatwierdzone przez klienta) --- */
  --color-primary: #11395C;
  --color-primary-dark: #0B2740;
  --color-primary-light: #E7EEF4;

  /* --- Akcent (turkus — analityka/nauka) --- */
  --color-accent: #0F766E;
  --color-accent-dark: #0B5650;
  --color-accent-light: #E1F3F1;

  /* --- Neutralne / tekst / tła --- */
  --color-text: #1A1F26;
  --color-text-muted: #5B6572;
  --color-text-on-dark: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F9FA;
  --color-border: #E2E5EA;
  --color-border-light: #F1F3F5;

  /* --- Stany semantyczne --- */
  --color-success: var(--color-accent-dark);
  --color-focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.45);

  /* --- Typografia (stos systemowy — zero zewnętrznych requestów) --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* --- Skala odstępów (baza 8px) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* --- Zaokrąglenia --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* --- Cienie (subtelne, bez efektu "plastikowego") --- */
  --shadow-sm: 0 1px 2px rgba(17, 57, 92, 0.06);
  --shadow-md: 0 4px 12px rgba(17, 57, 92, 0.08);

  /* --- Przejścia --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* --- Kontener --- */
  --container-max: 1200px;
  --container-padding: 1.25rem;

  /* --- Panel dostępności ---
     Modyfikowane przez JS (klasy na <html>) po kliknięciu w panelu WCAG
     w nagłówku. Wartości bazowe = stan domyślny, patrz klasy .a11y-* niżej. */
  --a11y-font-scale: 1;
  --a11y-line-height: 1.6;
  --a11y-letter-spacing: normal;
  --a11y-word-spacing: normal;

  /* Breakpointy — referencja (custom properties nie działają w @media,
     więc wartości poniżej powtarzane są ręcznie w zapytaniach media):
     sm: 480px / md: 768px / lg: 1024px / xl: 1280px */
}

/* ==========================================================================
   3. TYPOGRAFIA I ELEMENTY BAZOWE
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: calc(16px * var(--a11y-font-scale));
  line-height: var(--a11y-line-height);
  letter-spacing: var(--a11y-letter-spacing);
  word-spacing: var(--a11y-word-spacing);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-primary);
}

h1 {
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
}

h3 {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
}

p {
  max-width: 70ch;
}

/* Długie, niełamliwe ciągi (surowe adresy URL wklejone jako tekst,
   długie nazwy plików itp.) — bez tego przeglądarka próbuje zmieścić
   je w jednej linii i wychodzą poza kontener zamiast się zawinąć.
   Globalnie, żeby dotyczyło każdego miejsca w motywie (moduły, treść
   WYSIWYG, fallback the_content()), nie tylko wybranych selektorów. */
p,
li,
a {
  overflow-wrap: break-word;
  word-break: break-word;
}

a {
  color: var(--color-accent-dark);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   4. DOSTĘPNOŚĆ (WCAG 2.1 AA)
   ========================================================================== */

/* Widoczny fokus klawiatury na WSZYSTKICH interaktywnych elementach —
   nigdy outline: none bez zamiennika. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--color-focus-ring);
  border-radius: var(--radius-sm);
}

/* Skip-link — pierwszy element z jakim styka się klawiatura na stronie. */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 1000;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* Treść tylko dla czytników ekranu. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Klasy przełączane panelem dostępności w nagłówku (patrz assets/js/main.js).
   Każdy przełącznik jest niezależny — użytkownik może włączyć dowolną
   kombinację (np. większa czcionka + wyróżnione linki, bez zmiany odstępów). */

/* Czcionka — 3 poziomy (Poziom I to stan domyślny, bez klasy). */
html.a11y-font-2 {
  --a11y-font-scale: 1.125;
}

html.a11y-font-3 {
  --a11y-font-scale: 1.25;
}

/* Wysokość linii. */
html.a11y-line-height {
  --a11y-line-height: 2;
}

/* Odstępy (litery + słowa). */
html.a11y-spacing {
  --a11y-letter-spacing: 0.05em;
  --a11y-word-spacing: 0.15em;
}

/* Wyróżnione linki — podkreślenie + pogrubienie niezależnie od stanu
   hover/focus, dla osób słabiej rozróżniających kolor linku od tekstu. */
html.a11y-links-underline a:not(.skip-link) {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* ==========================================================================
   5. UTILITIES / LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ==========================================================================
   6. NAGŁÓWEK / NAWIGACJA / PANEL DOSTĘPNOŚCI
   ========================================================================== */

/* --- Widget dostępności (pływająca ikona + rozwijany panel) --- */

.a11y-widget {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 1000;
}

.a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-primary);
  border: 2px solid var(--color-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background-color var(--transition-fast), transform var(--transition-fast),
    border-color var(--transition-fast);
}

.a11y-toggle:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-dark);
  transform: scale(1.05);
}

.a11y-toggle[aria-expanded="true"] {
  background: var(--color-accent);
  color: var(--color-text-on-dark);
  border-color: var(--color-accent-dark);
}

.a11y-panel {
  position: absolute;
  bottom: 64px;
  right: 0;
  width: 260px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-md);
  font-size: 13px;
}

.a11y-panel[hidden] {
  display: none;
}

.a11y-group {
  margin-bottom: var(--space-sm);
}

.a11y-group:last-of-type {
  margin-bottom: var(--space-md);
}

.a11y-group__label {
  display: block;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: var(--space-3xs);
}

.a11y-group__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

.a11y-btn {
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.a11y-btn:hover {
  background: var(--color-bg-alt);
}

.a11y-btn[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-dark);
  font-weight: 600;
}

.a11y-btn--reset {
  width: 100%;
  text-align: center;
  background: var(--color-bg-alt);
}

.labkzs-admin-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
  display: inline-block;
}

@media (max-width: 480px) {
  .a11y-panel {
    width: calc(100vw - (var(--space-md) * 2) - 2px);
  }
}

/* --- Nagłówek: logo + nawigacja --- */

.site-main {
  /* Rdzeń mechanizmu "sticky footer": main rośnie i wypełnia wolną
     przestrzeń, gdy treści jest mało — stopka zostaje przyklejona do dołu
     ekranu zamiast "pływać" tuż pod krótką treścią. Działa razem z
     display:flex; flex-direction:column na <body> (sekcja 1). skip-link
     (position:absolute) i widget dostępności (position:fixed) są wyjęte
     z normalnego przepływu, więc nie zaburzają układu flex. */
  flex: 1 0 auto;

  /* Kotwica dla pseudo-elementu z grafiką dekoracyjną (patrz niżej). */
  position: relative;
}

/* Odstęp między nagłówkiem a treścią — tylko na podstronach. Strona
   główna zaczyna się od razu pełnowidokowym Hero, które ma własny,
   duży padding-block, więc dodatkowy odstęp byłby tam zbędny. */
body:not(.labkzs-front-page) .site-main {
  padding-top: var(--space-2xl);
}

/* Element dekoracyjny (jeden, nie kafelkowany) — sieć węzłów na
   miękkim gradiencie, zaczepiona w prawym górnym rogu EKRANU
   (viewportu — stąd brak max-width, w przeciwieństwie do .container),
   zanikająca w przezroczystość w lewo/w dół.
   Tylko na podstronach — na stronie głównej Hero ma już własną grafikę,
   więc ten pseudo-element w ogóle się tam nie generuje (reguła niżej
   jest zawężona do body:not(.labkzs-front-page) — klasę dodaje
   inc/setup.php (labkzs_add_front_page_body_class) na podstawie
   is_front_page(), niezależnie od wbudowanej klasy WordPressa). */
body:not(.labkzs-front-page) .site-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22900%22%20viewBox%3D%220%200%20900%20900%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22wash%22%20cx%3D%2282%25%22%20cy%3D%2212%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230F766E%22%20stop-opacity%3D%220.16%22%2F%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%2311395C%22%20stop-opacity%3D%220.08%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2311395C%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22900%22%20height%3D%22900%22%20fill%3D%22url%28%23wash%29%22%2F%3E%3Cline%20x1%3D%22556.7%22%20y1%3D%22328.2%22%20x2%3D%22564.6%22%20y2%3D%22301.1%22%20stroke%3D%22%230F766E%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%220.132%22%2F%3E%3Cline%20x1%3D%22397.7%22%20y1%3D%22303.2%22%20x2%3D%22296.9%22%20y2%3D%22311.8%22%20stroke%3D%22%230F766E%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%220.074%22%2F%3E%3Cline%20x1%3D%22341.9%22%20y1%3D%22458.6%22%20x2%3D%22312.9%22%20y2%3D%22548.7%22%20stroke%3D%22%230F766E%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%220.078%22%2F%3E%3Cline%20x1%3D%22676.4%22%20y1%3D%22357.3%22%20x2%3D%22596.4%22%20y2%3D%22370.2%22%20stroke%3D%22%230F766E%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%220.141%22%2F%3E%3Cline%20x1%3D%22401.0%22%20y1%3D%22162.3%22%20x2%3D%22397.7%22%20y2%3D%22303.2%22%20stroke%3D%22%230F766E%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%220.096%22%2F%3E%3Cline%20x1%3D%22563.6%22%20y1%3D%22266.0%22%20x2%3D%22564.6%22%20y2%3D%22301.1%22%20stroke%3D%22%230F766E%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%220.133%22%2F%3E%3Cline%20x1%3D%22596.4%22%20y1%3D%22370.2%22%20x2%3D%22556.7%22%20y2%3D%22328.2%22%20stroke%3D%22%230F766E%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%220.132%22%2F%3E%3Ccircle%20cx%3D%22556.7%22%20cy%3D%22328.2%22%20r%3D%224.8%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.220%22%2F%3E%3Ccircle%20cx%3D%22564.6%22%20cy%3D%22301.1%22%20r%3D%223.9%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.222%22%2F%3E%3Ccircle%20cx%3D%22397.7%22%20cy%3D%22303.2%22%20r%3D%224.0%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.161%22%2F%3E%3Ccircle%20cx%3D%22759.0%22%20cy%3D%2285.1%22%20r%3D%223.2%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.294%22%2F%3E%3Ccircle%20cx%3D%22341.9%22%20cy%3D%22458.6%22%20r%3D%224.2%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.140%22%2F%3E%3Ccircle%20cx%3D%22312.9%22%20cy%3D%22548.7%22%20r%3D%224.9%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.129%22%2F%3E%3Ccircle%20cx%3D%22676.4%22%20cy%3D%22357.3%22%20r%3D%222.8%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.264%22%2F%3E%3Ccircle%20cx%3D%22296.9%22%20cy%3D%22311.8%22%20r%3D%222.6%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.123%22%2F%3E%3Ccircle%20cx%3D%22401.0%22%20cy%3D%22162.3%22%20r%3D%222.5%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.162%22%2F%3E%3Ccircle%20cx%3D%22563.6%22%20cy%3D%22266.0%22%20r%3D%224.6%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.222%22%2F%3E%3Ccircle%20cx%3D%22596.4%22%20cy%3D%22370.2%22%20r%3D%223.7%22%20fill%3D%22%230F766E%22%20fill-opacity%3D%220.234%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: min(760px, 75%) auto;
}

.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.site-branding {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.site-branding img {
  max-height: 56px;
  width: auto;
}

.site-branding__sum-logo img {
  max-height: 48px;
}

.site-branding__sum-logo-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3xs) var(--space-xs);
  white-space: nowrap;
}

.site-branding__divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
  flex-shrink: 0;
}

.site-branding__text {
  display: flex;
  flex-direction: column;
}

.site-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.site-description {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  /* Logo SUM zostaje widoczne (feedback: warto pokazywać też na mobile),
     ale wszystko w nagłówku musi się zmieścić obok przycisku hamburgera —
     zmniejszamy loga i odstępy zamiast chować SUM całkowicie. */
  .site-branding {
    gap: var(--space-2xs);
  }

  .site-branding img {
    max-height: 36px;
  }

  .site-branding__sum-logo img {
    max-height: 32px;
  }

  .site-branding__divider {
    height: 28px;
  }

  .site-branding__sum-logo-hint {
    display: none; /* podpowiedź dla admina — niepotrzebna na wąskim ekranie */
  }
}

/* --- Przycisk hamburgera (widoczny tylko na wąskich ekranach) --- */

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-2xs);
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

body.nav-is-open .nav-toggle__bar:nth-child(2) {
  transform: translateY(7px) rotate(45deg);
}

body.nav-is-open .nav-toggle__bar:nth-child(3) {
  opacity: 0;
}

body.nav-is-open .nav-toggle__bar:nth-child(4) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Nawigacja główna --- */

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.primary-nav__list a {
  display: block;
  padding: var(--space-2xs) 0;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.primary-nav__list a:hover {
  color: var(--color-primary);
}

.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

/* Podmenu (dropdown) na desktopie — pojawia się pod pozycją nadrzędną. */
.primary-nav__list li {
  position: relative;
}

.primary-nav__list .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 220px;
  padding: var(--space-2xs) 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.primary-nav__list li:hover > .sub-menu,
.primary-nav__list li:focus-within > .sub-menu {
  display: block;
}

.primary-nav__list .sub-menu a {
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: none;
}

.primary-nav__list .sub-menu a:hover {
  background: var(--color-bg-alt);
}

/* --- Układ mobilny --- */

@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
  }

  .primary-nav {
    display: none;
    width: 100%;
    padding-block: var(--space-sm);
    border-top: 1px solid var(--color-border);
  }

  body.nav-is-open .primary-nav {
    display: block;
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav__list .sub-menu {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding-left: var(--space-md);
  }
}

@media (min-width: 1025px) {
  .nav-toggle {
    display: none;
  }

  .primary-nav {
    display: block !important;
  }
}

/* ==========================================================================
   7. STOPKA
   ========================================================================== */

.site-footer {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  margin-top: var(--space-3xl);
}

.site-footer a {
  color: var(--color-text-on-dark);
}

.site-footer a:hover {
  color: var(--color-accent-light);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   8. MODUŁY PAGE-BUILDERA
   ========================================================================== */

/* --- Przyciski (współdzielone przez moduły) --- */

.btn {
  display: inline-block;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-text-on-dark);
}

.btn--accent:hover {
  background: var(--color-accent-dark);
  color: var(--color-text-on-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--light {
  background: var(--color-bg);
  color: var(--color-primary);
}

.btn--light:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Moduł: Hero --- */

.section-hero {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: center;
  background-color: var(--color-primary-dark);
  background-size: cover;
  background-position: center;
  color: var(--color-text-on-dark);
  overflow: hidden;
}

@media (max-width: 640px) {
  /* Ta sama zawartość (nagłówek + lista + przycisk) w pionowym układzie
     zajmuje więcej miejsca niż na desktopie — przy tym samym min-height
     Hero wychodzi nieproporcjonalnie wysokie na telefonie. */
  .section-hero {
    min-height: 42vh;
  }
}

.section-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 27, 44, 0.93) 0%,
    rgba(8, 27, 44, 0.8) 32%,
    rgba(8, 27, 44, 0.35) 65%,
    rgba(8, 27, 44, 0.08) 100%
  );
}

.section-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-3xl);
}

.section-hero__content {
  max-width: 760px;
}

.section-hero__heading {
  color: var(--color-text-on-dark);
}

.section-hero__heading-main {
  display: block;
  font-size: clamp(2.25rem, 1.8rem + 2.5vw, 3.5rem);
  font-weight: 700;
}

.section-hero__heading-sub {
  display: block;
  margin-top: var(--space-3xs);
  font-size: clamp(1.35rem, 1.15rem + 1vw, 2rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.section-hero__list {
  display: grid;
  gap: var(--space-xs);
  margin-block: var(--space-lg);
  padding: 0;
  max-width: 56ch;
}

.section-hero__list li {
  position: relative;
  list-style: none;
  padding-left: 1.5em;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.section-hero__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-light);
}

@media (max-width: 768px) {
  /* Na wąskich ekranach tekst zajmuje całą szerokość — gradient musi być
     jednolicie ciemny, nie tylko po lewej stronie jak na desktopie. */
  .section-hero__overlay {
    background: linear-gradient(180deg, rgba(8, 27, 44, 0.75) 0%, rgba(8, 27, 44, 0.9) 100%);
  }
}

/* --- Moduł: Blok usług --- */

.section-uslugi {
  padding-block: var(--space-3xl);
}

.section-uslugi__heading {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.uslugi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.uslugi-card {
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.uslugi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

.uslugi-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: 26px !important;
  margin-bottom: var(--space-sm);
}

.uslugi-card__title {
  font-size: 1.1rem;
  margin-bottom: var(--space-3xs);
}

.uslugi-card__desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.uslugi-empty-hint {
  text-align: center;
  color: var(--color-text-muted);
}

/* --- Moduł: Tekst + zdjęcie --- */

.section-tekst-zdjecie {
  padding-block: var(--space-3xl);
}

.section-tekst-zdjecie__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.section-tekst-zdjecie--image-left .section-tekst-zdjecie__image {
  order: -1;
}

.section-tekst-zdjecie__image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
}

.section-tekst-zdjecie__text p {
  margin-bottom: var(--space-sm);
  color: var(--color-text-muted);
}

.section-tekst-zdjecie__text ul,
.section-tekst-zdjecie__text ol {
  padding-left: 1.4em;
  margin-bottom: var(--space-sm);
}

.section-tekst-zdjecie__text li {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3xs);
}

@media (max-width: 768px) {
  .section-tekst-zdjecie__inner {
    grid-template-columns: 1fr;
  }

  .section-tekst-zdjecie--image-left .section-tekst-zdjecie__image {
    order: 0;
  }
}

/* --- Moduł: CTA --- */

.section-cta {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  padding-block: var(--space-2xl);
}

.section-cta__inner {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.section-cta h2 {
  color: var(--color-text-on-dark);
}

.section-cta p {
  color: rgba(255, 255, 255, 0.85);
  margin-block: var(--space-sm);
}

/* ==========================================================================
   9. BLOKI STRONICOWE (Cennik / Zespół / Strefa Klienta)
   ========================================================================== */

/* --- Cennik --- */

.section-cennik {
  padding-block: var(--space-3xl);
}

.section-cennik__content {
  max-width: 720px;
}

.section-cennik__heading {
  margin-bottom: var(--space-xl);
}

.cennik-group__heading {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-3xs);
  color: var(--color-accent-dark);
  font-size: 1.1rem;
  border-bottom: 2px solid var(--color-accent-light);
}

.cennik-list {
  display: grid;
}

.cennik-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-2xs);
  border-bottom: 1px dashed var(--color-border);
  list-style: none;
}

.cennik-item__name {
  color: var(--color-text);
}

.cennik-item__price {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.cennik-item__unit {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.85em;
}

/* --- Zespół --- */

.section-zespol {
  padding-block: var(--space-3xl);
  background: var(--color-bg-alt);
}

.section-zespol__heading {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.zespol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
}

.zespol-card {
  text-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.zespol-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.zespol-card__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
  margin-bottom: var(--space-sm);
}

.zespol-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: 36px !important;
}

.zespol-card__name {
  font-weight: 600;
  margin-bottom: 2px;
}

.zespol-card__role {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-2xs);
}

.zespol-card__email {
  color: var(--color-accent-dark);
  font-size: 0.9rem;
}

/* --- Strefa Klienta / pliki --- */

.section-pliki {
  padding-block: var(--space-lg);
}

.section-pliki__content {
  max-width: 640px;
}

.section-pliki__heading {
  margin-bottom: var(--space-xl);
}

.pliki-list {
  display: grid;
  gap: var(--space-xs);
}

.pliki-item {
  list-style: none;
}

.pliki-item__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.pliki-item__link:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
}

.pliki-item__icon {
  flex-shrink: 0;
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
  color: var(--color-accent-dark);
}

.pliki-item__name {
  flex: 1;
  color: var(--color-text);
  font-weight: 500;
}

.pliki-item__action {
  flex-shrink: 0;
  color: var(--color-accent-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

/* --- Tekst (wolny akapit) --- */

.section-tekst {
  padding-block: var(--space-md);
}

.section-tekst__content {
  width: 100%;
}

.section-tekst__content h2 {
  margin-bottom: var(--space-sm);
}

/* Wielkość nagłówka — wybierana w polu modułu, "duży" korzysta
   z domyślnej wielkości h2 zdefiniowanej globalnie (sekcja 3). */
.section-tekst--sredni .section-tekst__content h2 {
  font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.85rem);
}

.section-tekst--maly .section-tekst__content h2 {
  font-size: 1.15rem;
  color: var(--color-text);
}

.section-tekst__body p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.section-tekst__body p:last-child {
  margin-bottom: 0;
}

/* Listy w treści WYSIWYG — globalny reset (sekcja 1) zerował padding
   wszystkim elementom, więc bez tego listy renderowały się bez wcięcia
   (numery/punktory "wisiały" przy lewej krawędzi, mniej wcięte niż
   nagłówek nad nimi — źle). Wcięcie musi być większe niż tekst nad listą. */
.section-tekst__body ul,
.section-tekst__body ol {
  padding-left: 1.4em;
  margin-bottom: var(--space-sm);
}

.section-tekst__body li {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3xs);
}

.section-tekst__body li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   10. MODUŁ: MAPA (za zgodą — RODO)
   ========================================================================== */

.section-mapa {
  padding-block: var(--space-lg);
}

.section-mapa__content h2 {
  margin-bottom: var(--space-sm);
}

/* Kontener utrzymujący proporcje 16:9 — zarówno dla karty zgody,
   jak i (po kliknięciu) dla właściwego <iframe>, żeby układ się nie
   "skakał" w momencie ładowania mapy. */
.mapa-embed {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.mapa-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.mapa-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  text-align: center;
  padding: var(--space-lg);
  background: var(--color-bg-alt);
}

.mapa-consent__icon {
  color: var(--color-accent-dark);
}

.mapa-consent__address {
  font-weight: 600;
  color: var(--color-text);
  max-width: 40ch;
}

.mapa-consent__button {
  margin-block: var(--space-2xs);
}

.mapa-consent__note {
  max-width: 42ch;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   11. SYSTEM NEWSÓW (Aktualności) — karty, teaser, archiwum, pojedynczy wpis
   ========================================================================== */

/* --- Przycisk: wariant obrysowany (jasne tła) --- */

.btn--light-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn--light-outline:hover {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  transform: translateY(-2px);
}

/* --- Siatka kart (współdzielona: teaser na Home + pełne archiwum) --- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}

/* Wariant przewijalny poziomo — używany w teaserze na stronie głównej,
   żeby więcej newsów mieściło się bez rozrastania sekcji w pionie. */
.news-grid--scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.news-grid--scroll .news-card {
  flex: 0 0 calc((100% - (var(--news-cards-per-view) - 1) * var(--space-lg)) / var(--news-cards-per-view));
  scroll-snap-align: start;
}

@media (max-width: 640px) {
  /* Na telefonie ignorujemy wybraną liczbę — pokazujemy ~1 kartę
     z "podglądem" kolejnej, co naturalnie zachęca do przewinięcia. */
  .news-grid--scroll .news-card {
    flex-basis: 85%;
  }
}

.news-grid--scroll::-webkit-scrollbar {
  display: none;
}

/* --- Karuzela (kontener + strzałki) --- */

.news-carousel {
  position: relative;
}

.news-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  font-size: 20px;
  line-height: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.news-carousel__arrow:hover {
  background: var(--color-accent);
  color: var(--color-text-on-dark);
}

.news-carousel__arrow--prev {
  left: -20px;
}

.news-carousel__arrow--next {
  right: -20px;
}

@media (max-width: 640px) {
  /* Feedback: na dotyku samo przewijanie gestem nie było oczywiste.
     Zamiast chować strzałki, przenosimy je pod karty jako widoczną,
     jednoznaczną parę przycisków zamiast nakładać je na krawędzie
     (na wąskim ekranie by nie mieściły się obok treści). */
  .news-carousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }

  .news-carousel > [data-news-carousel-track] {
    flex: 0 0 100%;
  }

  .news-carousel__arrow {
    position: static;
    transform: none;
  }
}

/* --- Karta newsa ---
   Kluczowe dla "jednolitego rozmiaru niezależnie od długości tekstu":
   1) obrazek ma sztywne aspect-ratio (dopasowane do rozmiaru labkzs-card
      640x420, więc miniatury są wizualnie identyczne niezależnie od
      oryginalnych proporcji zdjęcia — przycięcie dzieje się już
      po stronie WordPressa, nie tylko CSS-em);
   2) karta jest flex-column na pełną wysokość wiersza siatki (align-items:
      stretch w .news-grid wyrównuje wysokość wszystkich kart w rzędzie);
   3) treść (.news-card__body) jest flex:1, a link "Czytaj więcej" ma
      margin-top:auto — zawsze ląduje przy samym dole karty, niezależnie
      od tego, czy excerpt ma jedną linijkę czy trzy. */

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.news-card__image-link {
  display: block;
}

.news-card__image {
  width: 100%;
  aspect-ratio: 640 / 420;
  object-fit: contain;
  background: var(--color-bg-alt);
}

.news-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: 40px;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md);
}

.news-card__date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3xs);
}

.news-card__title {
  font-size: 1.1rem;
  margin-bottom: var(--space-2xs);
}

.news-card__title a {
  color: var(--color-primary);
}

.news-card__title a:hover {
  color: var(--color-accent-dark);
}

.news-card__excerpt {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: var(--space-sm);

  /* Bezpiecznik na wypadek nietypowo długiego excerptu — obcina do
     3 linijek z wielokropkiem, więc karta nigdy nie "puchnie" ponad
     wysokość sąsiednich kart w tym samym rzędzie. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__link {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent-dark);
}

.news-card__link:hover {
  color: var(--color-primary);
}

/* --- Moduł: Najnowsze aktualności (teaser na Home) --- */

.section-aktualnosci {
  padding-block: var(--space-sm);
}

.section-aktualnosci__heading {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.section-aktualnosci__more {
  text-align: center;
  margin-top: var(--space-md);
}

/* --- Archiwum Aktualności (/aktualnosci/) --- */

.news-archive {
  padding-block: var(--space-2xl);
}

.news-archive__header {
  margin-bottom: var(--space-xl);
}

.news-archive__empty {
  color: var(--color-text-muted);
}

.news-archive__pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xl);
}

.news-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.news-archive__pagination .page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.news-archive__pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

/* --- Pojedyncza Aktualność --- */

.single-news__content {
  padding-block: var(--space-xl);
}

.single-news__back {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
  color: var(--color-accent-dark);
  font-weight: 600;
}

.single-news__header {
  margin-bottom: var(--space-lg);
}

.single-news__date {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3xs);
}

.single-news__body p {
  max-width: none; /* nadpisuje globalne p { max-width: 70ch } tylko tutaj */
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.single-news__body ul,
.single-news__body ol {
  padding-left: 1.4em;
  margin-bottom: var(--space-sm);
}

.single-news__body li {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3xs);
}

.single-news__body img {
  border-radius: var(--radius-md);
  margin-block: var(--space-sm);
}