/*!
 * Komitet Społeczny S7 — arkusz produkcyjny.
 *
 * PLIK GENEROWANY AUTOMATYCZNIE — NIE EDYTUJ GO RĘCZNIE.
 * Zmiany wprowadzaj w assets/css/src/, potem uruchom: bash build.sh
 *
 * Zbudowano: 2026-09-18 15:54:57
 */


/* ==========================================================================
   01. TOKENY PROJEKTOWE
   Jedno źródło prawdy dla kolorów, typografii i odstępów.
   Żadna inna reguła w motywie nie zapisuje wartości koloru wprost.
   ========================================================================== */

:root {

	/* --- Kolory -----------------------------------------------------------
	   Kontrast sprawdzony pod WCAG 2.2 AA (minimum 4.5:1 dla tekstu):
	     granat na bieli        13.4:1
	     grafit na bieli        14.1:1
	     szary  na bieli         6.0:1
	     akcent na bieli         4.6:1
	     biel   na granacie     13.4:1
	     biel   na akcencie      4.6:1
	   --------------------------------------------------------------------- */

	--ws7-navy:          #12304F;  /* Nagłówki, pasek nawigacji, stopka.      */
	--ws7-navy-dark:     #0C2138;  /* Stan hover na granatowym tle.           */
	--ws7-ink:           #1E2430;  /* Kolor tekstu podstawowego.              */
	--ws7-muted:         #5A6472;  /* Daty, metadane, tekst pomocniczy.       */
	--ws7-accent:        #B4600C;  /* Wyłącznie akcenty i przyciski akcji.    */
	--ws7-accent-dark:   #8F4C09;  /* Stan hover przycisku akcji.             */
	--ws7-surface:       #F4F6F8;  /* Tło sekcji przeplatanych z białymi.     */
	--ws7-border:        #D8DEE5;  /* Obramowania kart i linie rozdzielające. */
	--ws7-white:         #FFFFFF;

	/* Kolor obrysu przy nawigacji klawiaturą. */
	--ws7-focus:         #B4600C;

	/* Stany komunikatów formularza. Kolor nigdy nie niesie tu znaczenia sam:
	   obok jest zawsze słowo i znak (WCAG 2.2, kryterium 1.4.1).
	     błąd na bieli    7.5:1
	     sukces na bieli  7.0:1 */
	--ws7-error:         #A32020;  /* Komunikaty o błędach w formularzu.      */
	--ws7-error-bg:      #FCF2F2;  /* Tło podsumowania błędów.                */
	--ws7-ok:            #14663A;  /* Potwierdzenie wysłania zgłoszenia.      */
	--ws7-ok-bg:         #F1F7F3;  /* Tło potwierdzenia.                      */

	/* --- Typografia -------------------------------------------------------
	   Fonty systemowe: zero pobierania, natychmiastowy render, brak
	   połączeń do serwerów zewnętrznych (wymóg braku trackerów).
	   --------------------------------------------------------------------- */

	--ws7-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--ws7-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
	                 "Liberation Mono", monospace;

	/* Skala rozmiarów. Wartości płynne — rosną wraz z szerokością ekranu,
	   ale nigdy poniżej rozmiaru czytelnego na telefonie. */
	--ws7-text-xs:   0.8125rem;                        /* 13 px */
	--ws7-text-sm:   0.9375rem;                        /* 15 px */
	--ws7-text-base: 1.0625rem;                        /* 17 px — tekst treści */
	--ws7-text-md:   1.1875rem;                        /* 19 px */
	--ws7-text-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--ws7-text-xl:   clamp(1.5rem,  1.3rem  + 1vw,   2rem);
	--ws7-text-2xl:  clamp(1.75rem, 1.4rem  + 1.75vw, 2.75rem);

	/* Rozmiar tytułu podstrony. Niższy niż 2xl, bo tytuł podstrony to zwykle
	   całe określenie („Dokumenty i wzory pism”, „Dlaczego powstał Komitet”),
	   a nie jedno–dwa słowa — przy 44 px przytłaczał kolumnę tekstu. Rozmiar
	   2xl zostaje zarezerwowany dla nagłówka strony głównej, który ma działać
	   jak hasło. */
	--ws7-text-title: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem);

	--ws7-leading-tight: 1.25;
	--ws7-leading-base:  1.65;

	/* --- Odstępy ----------------------------------------------------------
	   Skala oparta na 4 px. Używamy wyłącznie tych wartości — dzięki temu
	   rytm pionowy strony jest spójny bez ręcznego dobierania marginesów.
	   --------------------------------------------------------------------- */

	--ws7-space-1:  0.25rem;   /*  4 px */
	--ws7-space-2:  0.5rem;    /*  8 px */
	--ws7-space-3:  0.75rem;   /* 12 px */
	--ws7-space-4:  1rem;      /* 16 px */
	--ws7-space-5:  1.5rem;    /* 24 px */
	--ws7-space-6:  2rem;      /* 32 px */
	--ws7-space-7:  3rem;      /* 48 px */
	--ws7-space-8:  4rem;      /* 64 px */

	/* Odstęp pionowy sekcji — mniejszy na telefonie, większy na desktopie. */
	--ws7-section-y: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

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

	--ws7-container:      1120px;  /* Maksymalna szerokość kontenera.        */
	--ws7-container-text: 760px;   /* Szerokość kolumny tekstu (ok. 75 zn.). */
	--ws7-gutter:         var(--ws7-space-4);

	/* --- Detale ----------------------------------------------------------- */

	--ws7-radius:     4px;
	--ws7-radius-lg:  6px;

	/* Minimalny rozmiar celu dotykowego — WCAG 2.2, kryterium 2.5.8. */
	--ws7-target-min: 24px;
	--ws7-target-comfort: 44px;

	--ws7-transition: 150ms ease;
}


/* ==========================================================================
   02. RESET
   Minimalny, świadomy reset. Nie zerujemy wszystkiego — zostawiamy domyślne
   zachowania przeglądarki tam, gdzie są poprawne i dostępne.
   ========================================================================== */

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

/* Zerujemy marginesy tylko tam, gdzie i tak ustawiamy własne. */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

/* Listy bez znaczenia semantycznego (nawigacja) tracą wypunktowanie
   dopiero przez klasę — domyślne listy w treści zostają nietknięte. */
ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

html {
	-webkit-text-size-adjust: 100%;   /* Blokuje powiększanie tekstu w iOS przy obrocie. */
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Obrazki nigdy nie wychodzą poza kontener i nie psują układu. */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Pola formularzy dziedziczą typografię — inaczej przeglądarka narzuca
   własny, zwykle za mały font. */
input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Długie adresy i sygnatury akt nie rozpychają układu na telefonie. */
p,
li,
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* Szanujemy ustawienie systemowe „ogranicz animacje”. */
@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;
		scroll-behavior: auto !important;
	}
}


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

body {
	font-family: var(--ws7-font-base);
	font-size: var(--ws7-text-base);
	line-height: var(--ws7-leading-base);
	color: var(--ws7-ink);
	background-color: var(--ws7-white);
}

/* --- Nagłówki ------------------------------------------------------------
   Hierarchia jest wizualnym odbiciem struktury dokumentu. Nigdy nie dobieramy
   poziomu nagłówka „bo pasuje rozmiarem” — od tego są klasy pomocnicze.
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: var(--ws7-leading-tight);
	color: var(--ws7-navy);
	text-wrap: balance;   /* Ładniejsze łamanie wielowierszowych tytułów. */
}

h1 { font-size: var(--ws7-text-title); }
h2 { font-size: var(--ws7-text-xl); }
h3 { font-size: var(--ws7-text-lg); }
h4 { font-size: var(--ws7-text-md); }
h5,
h6 { font-size: var(--ws7-text-base); }

/* --- Tekst --------------------------------------------------------------- */

p {
	text-wrap: pretty;   /* Zapobiega samotnym wyrazom na końcu akapitu. */
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--ws7-text-sm);
}

code,
kbd,
samp,
pre {
	font-family: var(--ws7-font-mono);
	font-size: 0.9em;
}

/* --- Odnośniki -----------------------------------------------------------
   Podkreślenie zostaje. To nie jest decyzja estetyczna: dla osób
   nierozróżniających kolorów podkreślenie jest jedynym sygnałem, że coś
   jest odnośnikiem (WCAG 1.4.1 — kolor nie może być jedynym nośnikiem).
   ------------------------------------------------------------------------- */

a {
	color: var(--ws7-navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--ws7-transition);
}

a:hover,
a:focus {
	color: var(--ws7-accent-dark);
	text-decoration-thickness: 2px;
}

/* --- Widoczność fokusu ---------------------------------------------------
   Wyraźny, jednolity obrys dla nawigacji klawiaturą. Nigdy nie usuwamy
   outline bez podania zamiennika (WCAG 2.4.7, 2.4.11).
   ------------------------------------------------------------------------- */

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

/* Przeglądarki bez :focus-visible — obrys pojawia się także przy kliknięciu,
   co jest gorsze wizualnie, ale nigdy nie zostawia użytkownika bez wskaźnika. */
:focus:not(:focus-visible) {
	outline: none;
}

/* --- Odnośnik pomijający nawigację ---------------------------------------
   Ukryty do momentu otrzymania fokusu. Pierwszy element, na który trafia
   użytkownik klawiatury i czytnika ekranu.
   ------------------------------------------------------------------------- */

.ws7-skip-link {
	position: absolute;
	top: -100%;
	left: var(--ws7-space-2);
	z-index: 999;
	padding: var(--ws7-space-3) var(--ws7-space-4);
	background-color: var(--ws7-navy);
	color: var(--ws7-white);
	text-decoration: none;
	border-radius: 0 0 var(--ws7-radius) var(--ws7-radius);
}

.ws7-skip-link:focus {
	top: 0;
	color: var(--ws7-white);
}

/* --- Treść wyłącznie dla czytników ekranu -------------------------------- */

.ws7-visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Elementy pozostałe -------------------------------------------------- */

hr {
	height: 1px;
	margin: var(--ws7-space-6) 0;
	border: 0;
	background-color: var(--ws7-border);
}

blockquote {
	padding-left: var(--ws7-space-4);
	border-left: 3px solid var(--ws7-accent);
	color: var(--ws7-muted);
	font-style: normal;   /* Kursywa pogarsza czytelność dłuższych cytatów. */
}

/* Tabele w treści (np. terminy, stawki) muszą przewijać się poziomo
   na telefonie zamiast rozpychać stronę. */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ws7-text-sm);
}

th,
td {
	padding: var(--ws7-space-2) var(--ws7-space-3);
	text-align: left;
	border-bottom: 1px solid var(--ws7-border);
}

th {
	font-weight: 700;
	color: var(--ws7-navy);
	background-color: var(--ws7-surface);
}


/* ==========================================================================
   04. UKŁAD
   Kontenery, sekcje i siatki. Mobile first — reguły bazowe opisują widok
   telefonu, media queries wyłącznie rozszerzają układ na większych ekranach.
   ========================================================================== */

/* --- Kontener ------------------------------------------------------------ */

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

@media (min-width: 48em) {   /* 768 px */

	.ws7-container {
		--ws7-gutter: var(--ws7-space-6);
	}
}

/* Węższy kontener dla samego tekstu — długość wiersza ok. 70–75 znaków,
   czyli optymalna dla czytelności dłuższych treści poradnikowych. */
.ws7-container--text {
	max-width: var(--ws7-container-text);
}

/* --- Sekcje -------------------------------------------------------------- */

.ws7-section {
	padding-block: var(--ws7-section-y);
}

/* Sekcja na jasnoszarym tle. Przeplatanie z białymi sekcjami tworzy
   czytelny rytm strony bez używania ramek i cieni. */
.ws7-section--surface {
	background-color: var(--ws7-surface);
}

.ws7-section__header {
	margin-bottom: var(--ws7-space-5);
}

.ws7-section__title {
	margin-bottom: var(--ws7-space-2);
}

.ws7-section__intro {
	max-width: var(--ws7-container-text);
	color: var(--ws7-muted);
}

/* Nagłówek sekcji z odnośnikiem „zobacz wszystkie” po prawej. */
@media (min-width: 40em) {   /* 640 px */

	.ws7-section__header--split {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--ws7-space-4);
	}
}

/* --- Siatka -------------------------------------------------------------- */

.ws7-grid {
	display: grid;
	gap: var(--ws7-space-4);
}

@media (min-width: 40em) {

	.ws7-grid--2,
	.ws7-grid--3 {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ws7-space-5);
	}
}

@media (min-width: 64em) {   /* 1024 px */

	.ws7-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Lista pionowa (aktualności, wyniki wyszukiwania) -------------------- */

.ws7-list {
	display: grid;
	gap: var(--ws7-space-5);
}

/* --- Nagłówek strony ----------------------------------------------------- */

.ws7-page-header {
	max-width: var(--ws7-container-text);
	margin-bottom: var(--ws7-space-6);
}

.ws7-page-title {
	margin-bottom: var(--ws7-space-3);
}

.ws7-page-intro {
	color: var(--ws7-muted);
	font-size: var(--ws7-text-md);
}

/* --- Obszar główny ------------------------------------------------------- */

.ws7-main {
	display: block;
}


/* ==========================================================================
   05. NAGŁÓWEK I NAWIGACJA

   Zachowanie:
     — telefon: menu zwinięte za przyciskiem, rozwijane w pionie,
     — desktop (od 64em): menu w poziomie, przycisk ukryty,
     — bez JavaScriptu: menu widoczne od razu, przycisk niewidoczny.

   Ostatni punkt jest istotny — użytkownik z zablokowanym JS nigdy nie
   zobaczy przycisku, który niczego nie robi.
   ========================================================================== */

.ws7-header {
	position: relative;
	background-color: var(--ws7-white);
	border-bottom: 1px solid var(--ws7-border);
}

.ws7-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ws7-space-4);
	min-height: 64px;
	padding-block: var(--ws7-space-3);
}

/* --- Sygnatura Komitetu --------------------------------------------------
   Logo tekstowe: skrót „S7” w granatowym kwadracie + nazwa w dwóch wierszach.
   Świadomie nie przypomina znaku drogowego ani godła — Komitet jest
   organizacją obywatelską, nie organem administracji.
   ------------------------------------------------------------------------- */

.ws7-brand {
	margin: 0;
	line-height: 1.2;
}

.ws7-brand__link {
	display: flex;
	align-items: center;
	gap: var(--ws7-space-3);
	text-decoration: none;
	color: var(--ws7-navy);
	/* Bez tego długa nazwa rozpycha nagłówek zamiast się zawijać. */
	min-width: 0;
}

.ws7-brand__link:hover .ws7-brand__name,
.ws7-brand__link:focus .ws7-brand__name {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ws7-brand__mark {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background-color: var(--ws7-navy);
	color: var(--ws7-white);
	font-size: var(--ws7-text-base);
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: var(--ws7-radius);
	/* Pionowa kreska akcentu — jedyny element ozdobny w nagłówku. */
	box-shadow: inset 3px 0 0 0 var(--ws7-accent);
}

.ws7-brand__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Nazwa zawija się w całości — bez skracania wielokropkiem, które przy
   nazwie organizacji wygląda jak usterka. */
.ws7-brand__name {
	font-size: var(--ws7-text-sm);
	font-weight: 700;
	color: var(--ws7-navy);
	overflow-wrap: break-word;
}

/* Obszar działania Komitetu — druga linia sygnatury. Na wąskim ekranie
   ukryta, żeby nagłówek nie urósł do trzech wierszy. */
.ws7-brand__tagline {
	display: none;
	font-size: var(--ws7-text-xs);
	font-weight: 400;
	color: var(--ws7-muted);
}

.ws7-brand__logo {
	max-height: 48px;
	width: auto;
}

@media (min-width: 48em) {

	.ws7-brand__name {
		font-size: var(--ws7-text-base);
	}

	.ws7-brand__tagline {
		display: block;
	}
}

/* --- Przycisk menu -------------------------------------------------------
   Widoczny wyłącznie wtedy, gdy JavaScript jest dostępny (klasa .js
   ustawiana w <head>) i tylko na wąskich ekranach.
   ------------------------------------------------------------------------- */

.ws7-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--ws7-space-2);
	min-height: var(--ws7-target-comfort);
	padding: var(--ws7-space-2) var(--ws7-space-3);
	background-color: transparent;
	color: var(--ws7-navy);
	font-size: var(--ws7-text-sm);
	font-weight: 700;
	border: 1px solid var(--ws7-border);
	border-radius: var(--ws7-radius);
	cursor: pointer;
}

.js .ws7-nav-toggle {
	display: inline-flex;
}

.ws7-nav-toggle:hover {
	border-color: var(--ws7-navy);
}

/* Ikona „hamburgera” zbudowana z jednej kreski i dwóch pseudoelementów —
   bez obrazka i bez dodatkowego żądania sieciowego. */
.ws7-nav-toggle__icon,
.ws7-nav-toggle__icon::before,
.ws7-nav-toggle__icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--ws7-transition), opacity var(--ws7-transition);
}

.ws7-nav-toggle__icon {
	position: relative;
}

.ws7-nav-toggle__icon::before,
.ws7-nav-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.ws7-nav-toggle__icon::before { top: -6px; }
.ws7-nav-toggle__icon::after  { top:  6px; }

/* Stan otwarty — kreski układają się w znak zamknięcia. */
.ws7-nav-toggle[aria-expanded="true"] .ws7-nav-toggle__icon {
	background-color: transparent;
}

.ws7-nav-toggle[aria-expanded="true"] .ws7-nav-toggle__icon::before {
	top: 0;
	transform: rotate(45deg);
}

.ws7-nav-toggle[aria-expanded="true"] .ws7-nav-toggle__icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* --- Nawigacja ----------------------------------------------------------- */

/* Bez JavaScriptu nawigacja jest zwykłą, widoczną listą pod nagłówkiem. */
.no-js .ws7-nav {
	flex-basis: 100%;
}

/* Z JavaScriptem — domyślnie zwinięta na telefonie. */
.js .ws7-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	display: none;
	background-color: var(--ws7-white);
	border-bottom: 1px solid var(--ws7-border);
	box-shadow: 0 8px 16px rgb(18 48 79 / 8%);
}

.js .ws7-nav.is-open {
	display: block;
}

.ws7-nav__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--ws7-space-2) var(--ws7-gutter);
	list-style: none;
}

.ws7-nav__list li {
	border-bottom: 1px solid var(--ws7-border);
}

.ws7-nav__list li:last-child {
	border-bottom: 0;
}

.ws7-nav__list a {
	display: block;
	/* Cel dotykowy wyraźnie powyżej minimum WCAG 2.2 (24 px) — pozycje menu
	   są klikane najczęściej, także przez osoby starsze. */
	min-height: var(--ws7-target-comfort);
	padding: var(--ws7-space-3) 0;
	color: var(--ws7-navy);
	font-weight: 600;
	text-decoration: none;
}

.ws7-nav__list a:hover,
.ws7-nav__list a:focus {
	color: var(--ws7-accent-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Bieżąca pozycja menu. Oznaczona kolorem i kreską — dwoma niezależnymi
   sygnałami, nie samym kolorem. */
.ws7-nav__list .current-menu-item > a,
.ws7-nav__list .current_page_item > a,
.ws7-nav__list .current-menu-ancestor > a {
	color: var(--ws7-accent-dark);
	box-shadow: inset 3px 0 0 0 var(--ws7-accent);
	padding-left: var(--ws7-space-3);
}

/* --- Desktop ------------------------------------------------------------- */

@media (min-width: 64em) {   /* 1024 px */

	.js .ws7-nav-toggle {
		display: none;
	}

	.js .ws7-nav,
	.no-js .ws7-nav {
		position: static;
		display: block;
		flex-basis: auto;
		background-color: transparent;
		border-bottom: 0;
		box-shadow: none;
	}

	/* Sygnatura oddaje miejsce nawigacji, zamiast rozpychać nagłówek. */
	.ws7-brand {
		flex: 0 1 auto;
		min-width: 0;
	}

	.ws7-nav {
		flex: 0 0 auto;
	}

	/* nowrap: pozycja menu spadająca do drugiego wiersza wygląda jak usterka. */
	.ws7-nav__list {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--ws7-space-1);
		padding: 0;
	}

	.ws7-nav__list li {
		border-bottom: 0;
	}

	.ws7-nav__list a {
		min-height: auto;
		padding: var(--ws7-space-2) var(--ws7-space-3);
		font-size: var(--ws7-text-sm);
		border-radius: var(--ws7-radius);
		white-space: nowrap;
	}

	.ws7-nav__list .current-menu-item > a,
	.ws7-nav__list .current_page_item > a,
	.ws7-nav__list .current-menu-ancestor > a {
		padding-left: var(--ws7-space-3);
		box-shadow: inset 0 -3px 0 0 var(--ws7-accent);
		border-radius: var(--ws7-radius) var(--ws7-radius) 0 0;
	}
}


/* ==========================================================================
   06. KOMPONENTY
   Elementy powtarzalne: przyciski, karty, wyróżnienia, paginacja.
   ========================================================================== */

/* --- Przyciski -----------------------------------------------------------
   Dwa warianty: pełny (akcja główna) i obrysowany (akcja poboczna).
   Oba mają wysokość 48 px — komfortowy cel dotykowy, znacznie powyżej
   minimum 24 px wymaganego przez WCAG 2.2 (kryterium 2.5.8).
   ------------------------------------------------------------------------- */

.ws7-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ws7-space-2);
	min-height: 48px;
	padding: var(--ws7-space-3) var(--ws7-space-5);
	font-size: var(--ws7-text-base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--ws7-radius);
	cursor: pointer;
	transition: background-color var(--ws7-transition),
	            border-color var(--ws7-transition),
	            color var(--ws7-transition);
}

/* Akcja główna — „Zgłoś swoją sprawę”. */
.ws7-btn--primary {
	background-color: var(--ws7-accent);
	border-color: var(--ws7-accent);
	color: var(--ws7-white);
}

.ws7-btn--primary:hover,
.ws7-btn--primary:focus {
	background-color: var(--ws7-accent-dark);
	border-color: var(--ws7-accent-dark);
	color: var(--ws7-white);
}

/* Akcja poboczna — „Dokumenty i wzory pism”. */
.ws7-btn--secondary {
	background-color: transparent;
	border-color: var(--ws7-navy);
	color: var(--ws7-navy);
}

.ws7-btn--secondary:hover,
.ws7-btn--secondary:focus {
	background-color: var(--ws7-navy);
	color: var(--ws7-white);
}

/* Na telefonie przyciski zajmują całą szerokość — łatwiej trafić kciukiem. */
.ws7-btn--block {
	width: 100%;
}

@media (min-width: 40em) {

	.ws7-btn--block {
		width: auto;
	}
}

/* Grupa przycisków. */
.ws7-btn-group {
	display: flex;
	flex-direction: column;
	gap: var(--ws7-space-3);
}

@media (min-width: 40em) {

	.ws7-btn-group {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* --- Karta ---------------------------------------------------------------
   Podstawowy pojemnik na zajawkę wpisu, dokumentu lub orzeczenia.
   Zamiast cieni używamy obrysu — spokojniej i lepiej wygląda w druku.
   ------------------------------------------------------------------------- */

.ws7-card {
	display: flex;
	flex-direction: column;
	gap: var(--ws7-space-2);
	padding: var(--ws7-space-4);
	background-color: var(--ws7-white);
	border: 1px solid var(--ws7-border);
	border-radius: var(--ws7-radius-lg);
	transition: border-color var(--ws7-transition);
}

.ws7-card:hover {
	border-color: var(--ws7-navy);
}

.ws7-card__title {
	margin: 0;
	font-size: var(--ws7-text-md);
}

.ws7-card__title a {
	text-decoration: none;
}

.ws7-card__title a:hover,
.ws7-card__title a:focus {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Metadane: data, kategoria, sygnatura. */
.ws7-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws7-space-2);
	margin: 0;
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

.ws7-card__excerpt {
	color: var(--ws7-ink);
}

.ws7-card__excerpt p:last-child {
	margin-bottom: 0;
}

/* --- Blok wyróżniony -----------------------------------------------------
   Używany do informacji ważnych, ale nie alarmujących — np. wyjaśnienia
   czym jest operat szacunkowy. Kreska zamiast koloru tła: poważniej.
   ------------------------------------------------------------------------- */

.ws7-callout {
	padding: var(--ws7-space-4) var(--ws7-space-5);
	background-color: var(--ws7-surface);
	border-left: 4px solid var(--ws7-accent);
	border-radius: 0 var(--ws7-radius) var(--ws7-radius) 0;
}

.ws7-callout__title {
	margin-bottom: var(--ws7-space-2);
	font-size: var(--ws7-text-md);
}

.ws7-callout p:last-child {
	margin-bottom: 0;
}

/* --- Odnośnik ze strzałką ------------------------------------------------ */

.ws7-link-more {
	display: inline-flex;
	align-items: center;
	gap: var(--ws7-space-1);
	min-height: var(--ws7-target-min);
	font-weight: 600;
	font-size: var(--ws7-text-sm);
	white-space: nowrap;
}

.ws7-link-more::after {
	content: "\2192";   /* Strzałka w prawo. */
	transition: transform var(--ws7-transition);
}

.ws7-link-more:hover::after,
.ws7-link-more:focus::after {
	transform: translateX(3px);
}

/* --- Odnośnik e-mail ----------------------------------------------------- */

.ws7-mail-link {
	font-weight: 600;
	/* Długi adres nie może rozpychać układu na wąskim ekranie. */
	overflow-wrap: anywhere;
}

/* --- Paginacja ----------------------------------------------------------- */

.ws7-pagination {
	margin-top: var(--ws7-space-6);
}

.ws7-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws7-space-2);
	align-items: center;
}

.ws7-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: var(--ws7-target-comfort);
	min-height: var(--ws7-target-comfort);
	padding: 0 var(--ws7-space-3);
	color: var(--ws7-navy);
	text-decoration: none;
	border: 1px solid var(--ws7-border);
	border-radius: var(--ws7-radius);
}

.ws7-pagination .page-numbers:hover,
.ws7-pagination .page-numbers:focus {
	border-color: var(--ws7-navy);
}

.ws7-pagination .page-numbers.current {
	background-color: var(--ws7-navy);
	border-color: var(--ws7-navy);
	color: var(--ws7-white);
	font-weight: 700;
}


/* ==========================================================================
   07. STRONA GŁÓWNA
   ========================================================================== */

/* --- Sekcja otwierająca --------------------------------------------------
   Bez zdjęcia w tle: tekst na fotografii traci kontrast, a nagłówek musi
   być czytelny w pełnym słońcu, na tanim ekranie. Powagę buduje tu
   typografia i przestrzeń.
   ------------------------------------------------------------------------- */

.ws7-hero {
	padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
	background-color: var(--ws7-white);
	border-bottom: 1px solid var(--ws7-border);
}

.ws7-hero__title {
	max-width: 20ch;   /* Krótsza linia dla nagłówka — czyta się jak hasło. */
	margin-bottom: var(--ws7-space-4);
	font-size: var(--ws7-text-2xl);
}

.ws7-hero__lead {
	max-width: 62ch;
	margin-bottom: var(--ws7-space-6);
	font-size: var(--ws7-text-md);
	color: var(--ws7-ink);
}

.ws7-hero__lead p {
	margin-bottom: var(--ws7-space-3);
}

.ws7-hero__lead p:last-child {
	margin-bottom: 0;
}

/* Kreska akcentu zamykająca sekcję — jedyny element czysto dekoracyjny
   na całej stronie głównej. */
.ws7-hero__actions {
	position: relative;
	padding-bottom: var(--ws7-space-6);
}

.ws7-hero__actions::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 64px;
	height: 3px;
	background-color: var(--ws7-accent);
}

/* Uwaga o granicach działania Komitetu — stopień pisma i kolor metadanych,
   żeby czytała się jak przypis pod przyciskami, a nie jak zastrzeżenie. */
.ws7-hero__note {
	max-width: 62ch;
	margin: var(--ws7-space-4) 0 0;
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

@media (min-width: 48em) {

	.ws7-hero__title {
		max-width: 24ch;
	}
}

/* --- Sekcja „Problemy właścicieli” ---------------------------------------
   Układ asymetryczny: jeden blok wyróżniony i lista trzech pytań. Cztery
   jednakowe karty byłyby poprawne i nieczytelne — jeśli wszystko jest tak
   samo ważne, nic nie jest ważne.

   Świadomie bez ikon: „Co robimy” niżej na stronie już z nich korzysta,
   a powtórzenie tego samego zabiegu dwa razy pod rząd zamienia hierarchię
   w szum.
   ------------------------------------------------------------------------- */

.ws7-problemy {
	background-color: var(--ws7-white);
}

.ws7-problemy__lead {
	max-width: 62ch;
	margin-bottom: var(--ws7-space-6);
	color: var(--ws7-muted);
}

.ws7-problemy__uklad {
	display: grid;
	gap: var(--ws7-space-5);
}

@media (min-width: 56em) {

	/* Blok wyróżniony węższy od listy — to on ma być punktem startowym
	   spojrzenia, ale nie zajmuje połowy sekcji. */
	.ws7-problemy__uklad {
		grid-template-columns: 5fr 7fr;
		gap: var(--ws7-space-6);
		align-items: start;
	}
}

.ws7-problemy__glowny {
	padding: var(--ws7-space-5);
	background-color: var(--ws7-surface);
	border-left: 4px solid var(--ws7-accent);
	border-radius: 0 var(--ws7-radius-lg) var(--ws7-radius-lg) 0;
}

.ws7-problemy__glowny-title {
	margin-bottom: var(--ws7-space-2);
	font-size: var(--ws7-text-lg);
}

.ws7-problemy__glowny-text {
	margin-bottom: var(--ws7-space-4);
	font-size: var(--ws7-text-sm);
	color: var(--ws7-ink);
}

.ws7-problemy__glowny-linki {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws7-space-2);
	margin: 0;
}

.ws7-problemy__glowny-linki .ws7-btn {
	min-height: var(--ws7-target-comfort);
	padding: var(--ws7-space-2) var(--ws7-space-4);
	font-size: var(--ws7-text-sm);
}

/* Lista pytań: wiersze, nie kafle. Lżejsze wizualnie i szybsze
   w skanowaniu wzrokiem. */
.ws7-problemy__lista {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ws7-border);
}

.ws7-problemy__pozycja {
	border-bottom: 1px solid var(--ws7-border);
}

/* Cały wiersz jest celem kliknięcia — wygodnie kciukiem na telefonie. */
.ws7-problemy__link {
	display: block;
	padding: var(--ws7-space-4) 0;
	text-decoration: none;
}

.ws7-problemy__pytanie {
	display: block;
	font-size: var(--ws7-text-md);
	font-weight: 600;
	color: var(--ws7-navy);
}

.ws7-problemy__link:hover .ws7-problemy__pytanie,
.ws7-problemy__link:focus .ws7-problemy__pytanie {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Nazwa Tematu jako podpis — użytkownik wie, dokąd trafi, zanim kliknie. */
.ws7-problemy__temat {
	display: block;
	margin-top: 2px;
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

.ws7-problemy__wiecej {
	margin: var(--ws7-space-5) 0 0;
}

/* --- Sekcja „Co robimy” -------------------------------------------------- */

.ws7-dzialania {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ws7-dzialanie {
	display: flex;
	flex-direction: column;
	gap: var(--ws7-space-2);
	padding: var(--ws7-space-5);
	background-color: var(--ws7-white);
	border: 1px solid var(--ws7-border);
	border-radius: var(--ws7-radius-lg);
}

.ws7-dzialanie__icon {
	display: block;
	color: var(--ws7-accent);
}

.ws7-dzialanie__icon svg {
	width: 32px;
	height: 32px;
}

.ws7-dzialanie__title {
	margin: 0;
	font-size: var(--ws7-text-md);
}

.ws7-dzialanie__text {
	color: var(--ws7-ink);
	font-size: var(--ws7-text-sm);
}

.ws7-dzialanie__text p:last-child {
	margin-bottom: 0;
}

/* --- Karta dokumentu ----------------------------------------------------- */

.ws7-card--dokument {
	background-color: var(--ws7-white);
}

/* Nadrzędna etykieta nad tytułem — rodzaj dokumentu. */
.ws7-card__kicker {
	margin: 0;
	font-size: var(--ws7-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-muted);
}

/* Znacznik formatu pliku. Kontrast biały na granacie: 13.4:1. */
.ws7-badge {
	display: inline-block;
	padding: 2px var(--ws7-space-2);
	background-color: var(--ws7-navy);
	color: var(--ws7-white);
	font-size: var(--ws7-text-xs);
	font-weight: 700;
	letter-spacing: 0.03em;
	border-radius: 3px;
}

.ws7-badge--link {
	background-color: var(--ws7-muted);
	text-transform: none;
	letter-spacing: 0;
}

.ws7-card__sygn {
	font-family: var(--ws7-font-mono);
	font-size: var(--ws7-text-xs);
}

.ws7-card__action {
	margin: var(--ws7-space-2) 0 0;
}

/* Mniejszy przycisk w karcie — wciąż 44 px wysokości, czyli powyżej
   minimalnego celu dotykowego wymaganego przez WCAG 2.2. */
.ws7-btn--small {
	min-height: var(--ws7-target-comfort);
	padding: var(--ws7-space-2) var(--ws7-space-4);
	font-size: var(--ws7-text-sm);
}

/* --- Sekcja kontaktu ----------------------------------------------------- */

.ws7-kontakt__inner {
	max-width: var(--ws7-container-text);
}

.ws7-kontakt__text {
	margin-block: var(--ws7-space-3);
}

/* Adres e-mail jako element pierwszoplanowy — ma być widoczny
   i łatwy do trafienia kciukiem. */
.ws7-kontakt__email {
	margin-bottom: var(--ws7-space-2);
	font-size: var(--ws7-text-lg);
}

.ws7-kontakt__email a {
	font-weight: 700;
}

.ws7-kontakt__note {
	margin-bottom: var(--ws7-space-5);
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

.ws7-kontakt__action {
	margin: 0;
}

/* --- Ikony --------------------------------------------------------------- */

.ws7-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.ws7-icon svg {
	width: 24px;
	height: 24px;
}

/* --- Pilny komunikat / wydarzenie ----------------------------------------
   Bardziej widoczny niż zwykła sekcja, ale bez krzyku: bursztynowe tło
   i granatowy tekst zamiast czerwieni. Alarmistyczny design zużywa się po
   drugim użyciu — a Komitet ma tym paskiem informować, nie straszyć.
   Bez animacji, bez odliczania, bez okna wyskakującego.
   ------------------------------------------------------------------------- */

.ws7-komunikat {
	padding-block: var(--ws7-space-5);
	background-color: #FBEEDC;
	border-bottom: 3px solid var(--ws7-accent);
}

.ws7-komunikat__inner {
	max-width: var(--ws7-container-text);
}

.ws7-komunikat__rodzaj {
	margin-bottom: var(--ws7-space-1);
	font-size: var(--ws7-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-accent-dark);
}

.ws7-komunikat__tytul {
	margin-bottom: var(--ws7-space-2);
	font-size: var(--ws7-text-lg);
	color: var(--ws7-navy);
}

/* Data, godzina i miejsce jako lista — czytnik ekranu ogłosi, ile jest
   pozycji, a wzrok dostaje wyraźne rozdzielenie. */
.ws7-komunikat__szczegoly {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws7-space-2) var(--ws7-space-4);
	margin: 0 0 var(--ws7-space-3);
	padding: 0;
	list-style: none;
	font-weight: 600;
	color: var(--ws7-ink);
}

.ws7-komunikat__szczegol {
	display: inline-flex;
	align-items: baseline;
	gap: var(--ws7-space-2);
}

/* Etykieta tekstowa, nie sama ikona — informacja nie może zależeć
   wyłącznie od symbolu ani od koloru. */
.ws7-komunikat__szczegol::before {
	font-size: var(--ws7-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-muted);
}

.ws7-komunikat__szczegol--data::before { content: "Data"; }
.ws7-komunikat__szczegol--godzina::before { content: "Godzina"; }
.ws7-komunikat__szczegol--miejsce::before { content: "Miejsce"; }

.ws7-komunikat__opis {
	margin-bottom: var(--ws7-space-4);
	color: var(--ws7-ink);
}

.ws7-komunikat__akcja {
	margin: 0;
}

/* --- Blok „Dlaczego powstał Komitet” ------------------------------------- */

.ws7-komitet {
	background-color: var(--ws7-surface);
}

.ws7-komitet__inner {
	max-width: var(--ws7-container-text);
}

.ws7-komitet__text {
	margin-bottom: var(--ws7-space-4);
	color: var(--ws7-ink);
}

.ws7-komitet__wiecej {
	margin: 0;
}

/* Przejście dla dziennikarzy. Mniejsze i stonowane — to ścieżka poboczna
   wobec głównego odnośnika do strony o Komitecie, a nie druga równorzędna. */
.ws7-komitet__media {
	margin: var(--ws7-space-3) 0 0;
	color: var(--ws7-muted);
	font-size: var(--ws7-text-sm);
}


/* ==========================================================================
   08. TREŚĆ POJEDYNCZYCH STRON
   Metryka dokumentu, blok pobierania, powiązania, okruszki, treść z edytora.
   ========================================================================== */

/* --- Okruszki ------------------------------------------------------------ */

.ws7-breadcrumbs {
	margin-bottom: var(--ws7-space-5);
	font-size: var(--ws7-text-sm);
}

.ws7-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws7-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ws7-muted);
}

.ws7-breadcrumbs__item + .ws7-breadcrumbs__item::before {
	content: "/";
	margin-right: var(--ws7-space-2);
	color: var(--ws7-border);
}

/* Nazwa bieżącej strony bywa długa — na telefonie skracamy ją wielokropkiem,
   zamiast pozwolić jej rozepchnąć wiersz. */
.ws7-breadcrumbs__item:last-child span {
	display: inline-block;
	max-width: 22ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

@media (min-width: 48em) {

	.ws7-breadcrumbs__item:last-child span {
		max-width: none;
		white-space: normal;
	}
}

/* --- Blok pobierania -----------------------------------------------------
   Najważniejsza akcja na stronie dokumentu. Wyróżniony ramką i tłem,
   umieszczony nad metryką — użytkownik szukający wzoru pisma nie powinien
   przewijać strony, żeby go znaleźć.
   ------------------------------------------------------------------------- */

.ws7-pobierz {
	margin-bottom: var(--ws7-space-6);
	padding: var(--ws7-space-5);
	background-color: var(--ws7-surface);
	border: 1px solid var(--ws7-border);
	border-radius: var(--ws7-radius-lg);
	text-align: center;
}

.ws7-pobierz__info {
	margin: var(--ws7-space-3) 0 0;
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

/* --- Metryka dokumentu --------------------------------------------------- */

.ws7-metryka {
	margin-bottom: var(--ws7-space-6);
	padding: var(--ws7-space-5);
	border: 1px solid var(--ws7-border);
	border-radius: var(--ws7-radius-lg);
}

.ws7-metryka__title {
	margin-bottom: var(--ws7-space-4);
	font-size: var(--ws7-text-md);
}

.ws7-metryka__list {
	display: grid;
	gap: var(--ws7-space-3);
	margin: 0;
}

.ws7-metryka__row {
	display: grid;
	gap: 2px;
	padding-bottom: var(--ws7-space-3);
	border-bottom: 1px solid var(--ws7-border);
}

.ws7-metryka__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.ws7-metryka__label {
	font-size: var(--ws7-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-muted);
}

.ws7-metryka__value {
	margin: 0;
	color: var(--ws7-ink);
}

/* Znak sprawy czcionką maszynową — łatwiej przepisać go bez pomyłki. */
.ws7-metryka__mono {
	font-family: var(--ws7-font-mono);
	font-size: var(--ws7-text-sm);
}

/* Od tabletu układ dwukolumnowy: etykieta obok wartości. */
@media (min-width: 40em) {

	.ws7-metryka__row {
		grid-template-columns: 12rem 1fr;
		gap: var(--ws7-space-4);
		align-items: baseline;
	}
}

/* --- Korespondencja ------------------------------------------------------ */

.ws7-korespondencja {
	margin-bottom: var(--ws7-space-6);
}

.ws7-korespondencja__label {
	margin-bottom: var(--ws7-space-1);
	font-size: var(--ws7-text-sm);
	font-weight: 700;
	color: var(--ws7-muted);
}

.ws7-korespondencja__item {
	margin: 0;
	font-weight: 600;
}

/* --- Sekcje powiązań ----------------------------------------------------- */

.ws7-powiazane {
	margin-top: var(--ws7-space-7);
	padding-top: var(--ws7-space-5);
	border-top: 2px solid var(--ws7-border);
}

.ws7-powiazane__title {
	margin-bottom: var(--ws7-space-4);
	font-size: var(--ws7-text-lg);
}

.ws7-powiazane__list {
	display: grid;
	gap: var(--ws7-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ws7-powiazane__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ws7-space-2);
	padding-bottom: var(--ws7-space-3);
	border-bottom: 1px solid var(--ws7-border);
}

.ws7-powiazane__list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.ws7-powiazane__meta {
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

/* --- Tematy -------------------------------------------------------------- */

.ws7-tematy {
	margin-top: var(--ws7-space-6);
}

.ws7-tematy__title {
	margin-bottom: var(--ws7-space-3);
	font-size: var(--ws7-text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-muted);
}

.ws7-tematy__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws7-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ws7-tematy__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ws7-target-min);
	padding: var(--ws7-space-1) var(--ws7-space-3);
	font-size: var(--ws7-text-sm);
	text-decoration: none;
	border: 1px solid var(--ws7-border);
	border-radius: 999px;
}

.ws7-tematy__list a:hover,
.ws7-tematy__list a:focus {
	border-color: var(--ws7-navy);
	text-decoration: underline;
}

/* --- Treść z edytora -----------------------------------------------------
   Style tekstu wprowadzanego w edytorze bloków. Nie narzucamy tu niczego
   poza rytmem pionowym i czytelnością — redaktor ma pisać treść,
   nie walczyć z formatowaniem.
   ------------------------------------------------------------------------- */

.ws7-prose > * + * {
	margin-top: var(--ws7-space-4);
}

/* Skala nagłówków w treści jest celowo węższa niż w częściach układu.
   Strona taka jak „O Komitecie” używa czterech poziomów naraz i przy skali
   z sekcji strony głównej (44/32/24 px wobec 17 px tekstu) skoki rozmiaru
   rozbijały tekst na sprzeczne ze sobą kawałki. Hierarchię niosą tu przede
   wszystkim odstęp i grubość; rozmiar tylko ją potwierdza.

   Nagłówek h1 nie ma tu własnej reguły — bierze rozmiar z reguły bazowej,
   więc jest identyczny jak tytuł generowany przez szablon na pozostałych
   podstronach. */
.ws7-prose h2 {
	margin-top: var(--ws7-space-7);
	font-size: clamp(1.375rem, 1.25rem + 0.45vw, 1.625rem);
}

.ws7-prose h3 {
	margin-top: var(--ws7-space-6);
	font-size: clamp(1.1875rem, 1.125rem + 0.22vw, 1.3125rem);
}

/* Reset zeruje punktory, wcięcie i odstępy dla całego serwisu regułą
   `ul[class], ol[class]`, bo listy służą tam do budowy układu (menu, siatki
   kart). W treści pisanej w edytorze lista jest jednak listą i wszystkie trzy
   rzeczy trzeba jej oddać. Dotyczy to każdej listy z edytora, bo WordPress
   dokleja im klasę `wp-block-list` — pasują więc do resetu, który ma wyższą
   swoistość niż rytm z `.ws7-prose > * + *`. Bez margin-top lista przyklejała
   się do poprzedzającego ją nagłówka na styk, a bez punktorów wypunktowanie
   czytało się jak zbiór wciętych zdań. */
.ws7-prose ul,
.ws7-prose ol {
	margin-top: var(--ws7-space-4);
	padding-left: var(--ws7-space-6);
}

.ws7-prose ul {
	list-style: disc;
}

.ws7-prose ol {
	list-style: decimal;
}

.ws7-prose li::marker {
	color: var(--ws7-muted);
}

.ws7-prose li + li {
	margin-top: var(--ws7-space-2);
}

.ws7-prose img {
	border-radius: var(--ws7-radius);
}

.ws7-prose figcaption {
	margin-top: var(--ws7-space-2);
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

/* Tabele w treści przewijają się poziomo zamiast rozpychać stronę. */
.ws7-prose .wp-block-table {
	overflow-x: auto;
}

/* --- Obrazek wpisu ------------------------------------------------------- */

.ws7-single__image {
	margin: 0 0 var(--ws7-space-6);
}

.ws7-single__image img {
	width: 100%;
	border-radius: var(--ws7-radius-lg);
}

/* --- Nawigacja między wpisami -------------------------------------------- */

.ws7-nav-post {
	margin-top: var(--ws7-space-7);
	padding-top: var(--ws7-space-5);
	border-top: 1px solid var(--ws7-border);
}

.ws7-nav-post .nav-links {
	display: grid;
	gap: var(--ws7-space-4);
}

@media (min-width: 40em) {

	.ws7-nav-post .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.ws7-nav-post .nav-next {
		text-align: right;
	}
}

.ws7-nav-post a {
	display: block;
	min-height: var(--ws7-target-comfort);
	text-decoration: none;
}

.ws7-nav-post__label {
	display: block;
	font-size: var(--ws7-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-muted);
}

.ws7-nav-post__title {
	display: block;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- Strona Tematu -------------------------------------------------------
   Rozdzielacz spinający treści z trzech typów. Sekcje oddzielone odstępem,
   bez ramek i tła — grupy rozróżnia nagłówek, nie dekoracja.
   ------------------------------------------------------------------------- */

.ws7-temat__nadtytul {
	margin-bottom: var(--ws7-space-1);
	font-size: var(--ws7-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-muted);
}

.ws7-temat__sekcja {
	margin-bottom: var(--ws7-space-7);
}

.ws7-temat__sekcja:last-of-type {
	margin-bottom: 0;
}

.ws7-temat__sekcja .ws7-section__title {
	margin-bottom: var(--ws7-space-4);
}

.ws7-temat__wiecej {
	margin: var(--ws7-space-4) 0 0;
}

/* --- Katalog Tematów na stronie „Problemy właścicieli” -------------------
   Grupy znaczeniowe rozdzielone odstępem i nagłówkiem. Grupa oznaczona
   klasą --osobno jest odsunięta kreską: „Protesty i działania mieszkańców”
   nie są problemem nieruchomości, tylko działaniem wspólnym, i nie powinny
   wyglądać na równi z brakiem zjazdu.
   ------------------------------------------------------------------------- */

.ws7-grupa {
	margin-bottom: var(--ws7-space-7);
}

.ws7-grupa:last-of-type {
	margin-bottom: 0;
}

.ws7-grupa--osobno {
	padding-top: var(--ws7-space-6);
	border-top: 1px solid var(--ws7-border);
}

.ws7-grupa__title {
	margin-bottom: var(--ws7-space-4);
	font-size: var(--ws7-text-lg);
}

.ws7-grupa__lista {
	display: grid;
	gap: var(--ws7-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {

	.ws7-grupa__lista {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ws7-space-5) var(--ws7-space-6);
	}
}

.ws7-grupa__nazwa {
	margin-bottom: var(--ws7-space-1);
	font-size: var(--ws7-text-md);
}

.ws7-grupa__nazwa a {
	text-decoration: none;
}

.ws7-grupa__nazwa a:hover,
.ws7-grupa__nazwa a:focus {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ws7-grupa__opis {
	margin: 0;
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

/* Zapowiedź na Temacie bez materiałów — ton informacyjny, nie komunikat
   o błędzie. */
.ws7-temat__zapowiedz {
	max-width: var(--ws7-container-text);
	margin: 0;
	padding: var(--ws7-space-5);
	background-color: var(--ws7-surface);
	border-radius: var(--ws7-radius-lg);
	color: var(--ws7-muted);
}

/* --- Strona „Dla mediów" -------------------------------------------------
   Dziennikarz ma dostać w kilka minut zrozumienie sprawy i dojście do
   materiałów. Kluczowe jest wizualne rozdzielenie treści redakcyjnej
   od dokumentów źródłowych — stąd wyróżnione wyjaśnienia nad sekcjami.
   ------------------------------------------------------------------------- */

.ws7-media__tresc {
	margin-bottom: var(--ws7-space-6);
}

.ws7-media__skroty {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws7-space-3);
	margin-bottom: var(--ws7-space-7);
	padding-bottom: var(--ws7-space-6);
	border-bottom: 1px solid var(--ws7-border);
}

.ws7-media__sekcja {
	margin-bottom: var(--ws7-space-7);
}

.ws7-media__sekcja .ws7-section__title {
	margin-bottom: var(--ws7-space-3);
}

/* Zdanie odróżniające materiał źródłowy od stanowiska Komitetu. */
.ws7-media__wyjasnienie {
	margin-bottom: var(--ws7-space-4);
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

.ws7-media__tematy {
	display: grid;
	gap: var(--ws7-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {

	.ws7-media__tematy {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ws7-media__tematy a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ws7-target-comfort);
	font-weight: 600;
}

.ws7-media__wiecej {
	margin: var(--ws7-space-4) 0 0;
}

.ws7-media__kontakt {
	padding: var(--ws7-space-5);
	background-color: var(--ws7-surface);
	border-radius: var(--ws7-radius-lg);
}

.ws7-media__email {
	font-size: var(--ws7-text-lg);
	font-weight: 700;
}

.ws7-media__zastrzezenie {
	margin: var(--ws7-space-4) 0 0;
	padding-top: var(--ws7-space-4);
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
	border-top: 1px solid var(--ws7-border);
}


/* ==========================================================================
   09. FORMULARZE, FILTRY, WYSZUKIWARKA
   ========================================================================== */

/* --- Pola formularzy -----------------------------------------------------
   Wysokość 48 px i rozmiar tekstu 17 px to nie jest kwestia estetyki:
   pole mniejsze niż 16 px powoduje, że iOS automatycznie przybliża stronę
   przy kliknięciu. Użytkownik ląduje wtedy w powiększonym, przesuniętym
   widoku i musi ręcznie wracać.
   ------------------------------------------------------------------------- */

.ws7-szukaj__pole,
.ws7-filtry__select,
.ws7-input {
	width: 100%;
	min-height: 48px;
	padding: var(--ws7-space-2) var(--ws7-space-3);
	font-size: var(--ws7-text-base);
	font-family: inherit;
	color: var(--ws7-ink);
	background-color: var(--ws7-white);
	border: 1px solid var(--ws7-border);
	border-radius: var(--ws7-radius);
}

.ws7-szukaj__pole:focus,
.ws7-filtry__select:focus,
.ws7-input:focus {
	border-color: var(--ws7-navy);
}

/* --- Wyszukiwarka -------------------------------------------------------- */

.ws7-szukaj {
	display: flex;
	flex-direction: column;
	gap: var(--ws7-space-3);
}

.ws7-szukaj-wrap {
	max-width: var(--ws7-container-text);
	margin-bottom: var(--ws7-space-5);
}

@media (min-width: 40em) {

	.ws7-szukaj {
		flex-direction: row;
	}

	.ws7-szukaj__pole {
		flex: 1 1 auto;
	}

	.ws7-szukaj__przycisk {
		flex: 0 0 auto;
	}
}

.ws7-fraza {
	color: var(--ws7-accent-dark);
}

/* --- Filtry archiwum -----------------------------------------------------
   Formularz GET bez JavaScriptu. Każdy wynik filtrowania ma własny adres,
   który można zapisać w zakładkach albo wysłać komuś mailem.
   ------------------------------------------------------------------------- */

.ws7-filtry {
	display: grid;
	gap: var(--ws7-space-4);
	margin-bottom: var(--ws7-space-5);
	padding: var(--ws7-space-4);
	background-color: var(--ws7-surface);
	border: 1px solid var(--ws7-border);
	border-radius: var(--ws7-radius-lg);
}

.ws7-filtry__pole {
	display: grid;
	gap: var(--ws7-space-1);
}

.ws7-filtry__label {
	font-size: var(--ws7-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-muted);
}

.ws7-filtry__akcje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ws7-space-4);
}

.ws7-filtry__reset {
	display: inline-flex;
	align-items: center;
	min-height: var(--ws7-target-min);
	font-size: var(--ws7-text-sm);
}

@media (min-width: 48em) {

	.ws7-filtry {
		grid-template-columns: 1fr 1fr auto;
		align-items: end;
	}

	.ws7-filtry__akcje {
		padding-bottom: 2px;
	}
}

/* --- Licznik wyników ----------------------------------------------------- */

.ws7-wyniki {
	margin-bottom: var(--ws7-space-4);
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

/* --- Brak wyników -------------------------------------------------------- */

.ws7-brak {
	max-width: var(--ws7-container-text);
	padding: var(--ws7-space-6) 0;
}

.ws7-brak__title {
	margin-bottom: var(--ws7-space-3);
	font-size: var(--ws7-text-lg);
}

.ws7-brak p {
	margin-bottom: var(--ws7-space-3);
	color: var(--ws7-muted);
}

/* --- Strona kontaktu -----------------------------------------------------
   Adres e-mail jest tu najważniejszym elementem strony i tak jest
   potraktowany wizualnie.
   ------------------------------------------------------------------------- */

.ws7-kontakt-karta {
	margin-block: var(--ws7-space-6);
	padding: var(--ws7-space-6) var(--ws7-space-5);
	background-color: var(--ws7-surface);
	border: 1px solid var(--ws7-border);
	border-radius: var(--ws7-radius-lg);
	text-align: center;
}

.ws7-kontakt-karta__title {
	margin-bottom: var(--ws7-space-3);
	font-size: var(--ws7-text-lg);
}

.ws7-kontakt-karta__email {
	margin-bottom: var(--ws7-space-2);
	font-size: var(--ws7-text-lg);
}

.ws7-kontakt-karta__email a {
	font-weight: 700;
}

.ws7-kontakt-karta__note {
	margin: 0;
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

/* --- Podpowiedź „co napisać” --------------------------------------------
   Lista numerowana, bo kolejność ma znaczenie — to sugerowany porządek
   informacji w wiadomości, nie zbiór luźnych punktów.
   ------------------------------------------------------------------------- */

.ws7-podpowiedz {
	margin-bottom: var(--ws7-space-6);
}

.ws7-podpowiedz__title {
	margin-bottom: var(--ws7-space-3);
	font-size: var(--ws7-text-lg);
}

.ws7-podpowiedz__intro {
	margin-bottom: var(--ws7-space-4);
	color: var(--ws7-muted);
}

.ws7-podpowiedz__lista {
	display: grid;
	gap: var(--ws7-space-3);
	margin: 0 0 var(--ws7-space-5);
	padding-left: var(--ws7-space-5);
}

.ws7-podpowiedz__lista li {
	padding-left: var(--ws7-space-2);
}

.ws7-podpowiedz__lista strong {
	display: block;
	color: var(--ws7-navy);
}

.ws7-podpowiedz__lista span {
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

.ws7-kontakt-zastrzezenie {
	margin-top: var(--ws7-space-6);
	font-size: var(--ws7-text-sm);
}

/* --- Formularz zgłoszenia ------------------------------------------------
   Jedna kolumna na całej szerokości ekranu, także na dużym monitorze.
   Pola ustawione obok siebie wyglądają zwarcie, ale przy wypełnianiu
   wzrok skacze na boki i łatwo pominąć pole. Tutaj formularz wypełnia
   człowiek zdenerwowany pismem z urzędu — liczy się, żeby przejść go
   od góry do dołu bez zastanawiania się, gdzie jest dalszy ciąg.
   ------------------------------------------------------------------------- */

.ws7-zgloszenie {
	margin-bottom: var(--ws7-space-6);
	scroll-margin-top: var(--ws7-space-5);
}

.ws7-zgloszenie__title {
	margin-bottom: var(--ws7-space-3);
	font-size: var(--ws7-text-lg);
}

.ws7-zgloszenie__intro {
	margin-bottom: var(--ws7-space-5);
	color: var(--ws7-muted);
}

.ws7-zgloszenie__intro p:last-child {
	margin-bottom: 0;
}

.ws7-formularz {
	display: grid;
	gap: var(--ws7-space-5);
}

.ws7-pole {
	display: grid;
	gap: var(--ws7-space-2);
}

.ws7-pole__label {
	font-weight: 700;
	color: var(--ws7-navy);
}

/* „(nieobowiązkowe)” zamiast gwiazdki przy polach wymaganych: gwiazdka
   wymaga legendy gdzieś na górze, a nikt jej nie czyta. Tutaj informacja
   stoi tam, gdzie jest potrzebna. */
.ws7-pole__opcjonalne {
	font-weight: 400;
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

.ws7-pole__hint {
	margin: 0;
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

/* Komunikat błędu stoi NAD polem, nie pod nim. Pod polem chowa go
   klawiatura ekranowa telefonu, która wysuwa się dokładnie w to miejsce. */
.ws7-pole__blad {
	display: flex;
	gap: var(--ws7-space-2);
	align-items: baseline;
	margin: 0;
	font-size: var(--ws7-text-sm);
	font-weight: 600;
	color: var(--ws7-error);
}

.ws7-pole__blad-znak {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	font-weight: 700;
	line-height: 1;
	color: var(--ws7-white);
	background-color: var(--ws7-error);
	border-radius: 50%;
}

/* Pole z błędem ma grubszą, czerwoną krawędź — ale to nie jest jedyny
   sygnał: nad polem stoi komunikat, a nad formularzem podsumowanie. */
.ws7-pole--blad .ws7-input {
	border-width: 2px;
	border-color: var(--ws7-error);
}

.ws7-textarea {
	min-height: 12rem;
	line-height: var(--ws7-leading-base);
	resize: vertical;
}

/* --- Zgoda --------------------------------------------------------------- */

.ws7-zgoda__wiersz {
	display: flex;
	gap: var(--ws7-space-3);
	align-items: flex-start;
}

.ws7-zgoda__pole {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	accent-color: var(--ws7-navy);
}

.ws7-zgoda__label {
	font-size: var(--ws7-text-sm);
}

/* --- Przyciski i uwagi pod formularzem ------------------------------------ */

.ws7-formularz__akcje {
	display: grid;
	gap: var(--ws7-space-3);
}

.ws7-formularz__uwaga {
	margin: 0;
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

/* --- Pułapka na roboty ---------------------------------------------------
   Wyprowadzona poza ekran, a nie ukryta przez display:none — część botów
   pomija pola ukryte tym pierwszym sposobem. Dla człowieka jest niewidoczna
   tak samo, a atrybuty tabindex i aria-hidden trzymają ją poza zasięgiem
   klawiatury i czytnika ekranu.
   ------------------------------------------------------------------------- */

.ws7-pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Podsumowanie błędów -------------------------------------------------
   Pierwsza rzecz, jaką widać po nieudanej wysyłce. Każdy punkt jest
   odnośnikiem prowadzącym prosto do pola do poprawienia.
   ------------------------------------------------------------------------- */

.ws7-bledy {
	margin-bottom: var(--ws7-space-5);
	padding: var(--ws7-space-4) var(--ws7-space-5);
	background-color: var(--ws7-error-bg);
	border-left: 4px solid var(--ws7-error);
	border-radius: 0 var(--ws7-radius) var(--ws7-radius) 0;
}

.ws7-bledy__title {
	margin-bottom: var(--ws7-space-2);
	font-size: var(--ws7-text-md);
	color: var(--ws7-error);
}

.ws7-bledy__lista {
	margin: 0 0 var(--ws7-space-3);
	padding-left: var(--ws7-space-5);
}

.ws7-bledy__lista li {
	margin-bottom: var(--ws7-space-1);
}

.ws7-bledy__lista a {
	color: var(--ws7-error);
}

.ws7-bledy__zapasowy {
	margin: 0;
	font-size: var(--ws7-text-sm);
}

/* --- Potwierdzenie wysłania ---------------------------------------------- */

.ws7-potwierdzenie {
	padding: var(--ws7-space-6) var(--ws7-space-5);
	background-color: var(--ws7-ok-bg);
	border: 1px solid var(--ws7-ok);
	border-radius: var(--ws7-radius-lg);
}

.ws7-potwierdzenie__title {
	margin-bottom: var(--ws7-space-3);
	font-size: var(--ws7-text-lg);
	color: var(--ws7-ok);
}

.ws7-potwierdzenie__text p:last-child {
	margin-bottom: 0;
}

.ws7-potwierdzenie__uwaga {
	margin: var(--ws7-space-4) 0 0;
	padding-top: var(--ws7-space-4);
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
	border-top: 1px solid var(--ws7-border);
}

/* --- Orzeczenie: teza i komentarz ----------------------------------------
   Rozdzielenie wizualne jest tu wymogiem rzetelności, nie ozdobą.
   Czytelnik musi widzieć, gdzie kończy się treść orzeczenia, a zaczyna
   stanowisko Komitetu.
   ------------------------------------------------------------------------- */

.ws7-teza {
	margin-bottom: var(--ws7-space-6);
	padding: var(--ws7-space-5);
	background-color: var(--ws7-surface);
	border-left: 4px solid var(--ws7-navy);
	border-radius: 0 var(--ws7-radius) var(--ws7-radius) 0;
}

.ws7-teza__title {
	margin-bottom: var(--ws7-space-2);
	font-size: var(--ws7-text-md);
}

.ws7-teza__text p:last-child {
	margin-bottom: 0;
}

.ws7-komentarz {
	margin-bottom: var(--ws7-space-6);
	padding-left: var(--ws7-space-5);
	border-left: 4px solid var(--ws7-accent);
}

.ws7-komentarz__title {
	margin-bottom: var(--ws7-space-1);
	font-size: var(--ws7-text-md);
}

.ws7-komentarz__zrodlo {
	margin-bottom: var(--ws7-space-3);
	font-size: var(--ws7-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-accent-dark);
}

.ws7-card__teza-label {
	margin-bottom: 2px;
	font-size: var(--ws7-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-muted);
}

/* --- Odnośnik do źródła orzeczenia --------------------------------------- */

.ws7-zrodlo {
	margin-bottom: var(--ws7-space-6);
	padding: var(--ws7-space-4) var(--ws7-space-5);
	border: 1px solid var(--ws7-border);
	border-radius: var(--ws7-radius-lg);
}

.ws7-zrodlo__title {
	margin-bottom: var(--ws7-space-2);
	font-size: var(--ws7-text-md);
}

.ws7-zrodlo__text {
	margin-bottom: var(--ws7-space-2);
	font-size: var(--ws7-text-sm);
	color: var(--ws7-muted);
}

.ws7-zrodlo__link {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}


/* ==========================================================================
   10. STOPKA
   ========================================================================== */

.ws7-footer {
	margin-top: var(--ws7-space-8);
	padding-block: var(--ws7-space-7) var(--ws7-space-5);
	background-color: var(--ws7-navy);
	color: var(--ws7-white);
	font-size: var(--ws7-text-sm);
}

/* Na granatowym tle wszystkie odnośniki są białe z podkreśleniem —
   kontrast 13.4:1, znacznie powyżej wymagań AA. */
.ws7-footer a {
	color: var(--ws7-white);
}

.ws7-footer a:hover,
.ws7-footer a:focus {
	color: var(--ws7-white);
	text-decoration-thickness: 2px;
}

/* Obrys fokusu musi być widoczny także na ciemnym tle. */
.ws7-footer :focus-visible {
	outline-color: var(--ws7-white);
}

.ws7-footer__grid {
	display: grid;
	gap: var(--ws7-space-6);
	margin-bottom: var(--ws7-space-6);
}

@media (min-width: 48em) {

	.ws7-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: var(--ws7-space-5);
	}
}

.ws7-footer__name {
	font-weight: 700;
	font-size: var(--ws7-text-base);
	margin-bottom: var(--ws7-space-1);
}

.ws7-footer__desc {
	color: rgb(255 255 255 / 80%);
}

.ws7-footer__heading {
	margin-bottom: var(--ws7-space-3);
	font-size: var(--ws7-text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ws7-white);
}

.ws7-footer__note {
	margin-top: var(--ws7-space-2);
	color: rgb(255 255 255 / 80%);
}

.ws7-footer__list {
	display: grid;
	gap: var(--ws7-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ws7-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ws7-target-min);
	padding-block: var(--ws7-space-1);
}

/* --- Zastrzeżenie prawne -------------------------------------------------
   Element obowiązkowy. Wyraźnie oddzielony, ale nie krzykliwy — ma
   informować, a nie odstraszać.
   ------------------------------------------------------------------------- */

.ws7-footer__disclaimer {
	padding-top: var(--ws7-space-5);
	border-top: 1px solid rgb(255 255 255 / 20%);
	color: rgb(255 255 255 / 80%);
	font-size: var(--ws7-text-xs);
	line-height: 1.6;
	max-width: 70ch;
}

.ws7-footer__copy {
	margin-top: var(--ws7-space-4);
	color: rgb(255 255 255 / 70%);
	font-size: var(--ws7-text-xs);
}


/* ==========================================================================
   11. DRUK

   Wersja do druku nie jest dodatkiem. Wielu właścicieli nieruchomości
   drukuje wzory pism i informacje o procedurze, żeby zabrać je do urzędu
   albo do prawnika. Wydruk musi być czytelny i kompletny.
   ========================================================================== */

@media print {

	/* Elementy nawigacyjne nie niosą treści na papierze. */
	.ws7-header,
	.ws7-footer__grid,
	.ws7-nav,
	.ws7-nav-toggle,
	.ws7-skip-link,
	.ws7-pagination,
	.ws7-btn {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
		line-height: 1.5;
	}

	.ws7-container {
		max-width: none;
		padding: 0;
	}

	.ws7-section {
		padding-block: 0;
	}

	/* Nagłówki nie zostają samotnie na końcu strony. */
	h1, h2, h3, h4 {
		color: #000;
		page-break-after: avoid;
		break-after: avoid;
	}

	p, li, blockquote, table {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	/* Adresy odnośników drukujemy obok tekstu — na papierze samo
	   podkreślenie nie mówi, dokąd odnośnik prowadził. */
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #333;
		word-break: break-all;
	}

	/* Odnośniki wewnętrzne i kotwice pomijamy — ich adresy są bezużyteczne. */
	a[href^="#"]::after,
	a[href^="mailto"]::after {
		content: "";
	}

	/* Zastrzeżenie prawne musi znaleźć się na wydruku. */
	.ws7-footer {
		margin-top: 1.5cm;
		padding: 0;
		background: none;
		color: #000;
		border-top: 1pt solid #000;
	}

	.ws7-footer__disclaimer,
	.ws7-footer__copy {
		color: #000;
		border: 0;
		padding-top: 0.5cm;
	}

	.ws7-card,
	.ws7-callout {
		border: 1pt solid #999;
		background: none;
	}

	/* Puste pola na papierze są bezużyteczne — wysłać ich i tak nie sposób.
	   Zostawiamy same etykiety z podpowiedziami: wydruk zamienia się wtedy
	   w listę informacji, które warto zebrać przed napisaniem wiadomości. */
	.ws7-input,
	.ws7-zgoda,
	.ws7-formularz__akcje .ws7-btn {
		display: none !important;
	}

	.ws7-pole__label::after {
		content: " ......................................";
		color: #666;
	}

	.ws7-potwierdzenie {
		border: 1pt solid #999;
		background: none;
	}
}