/*
Theme Name: Sowiarstwo
Theme URI: https://sowiarstwo.pl/
Author: Sowiarstwo
Description: Autorski motyw dla Sowiarstwa - awiterapia i edukacja o sowach. Ciepła paleta złotej godziny, nocne sekcje, duże zdjęcia, zero zależności zewnętrznych (fonty self-hosted, brak Google Fonts). Zawiera typy treści: Ptaki, Oferta, Figurki, FAQ i Media o nas.
Version: 1.0.14
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sowiarstwo
Tags: custom-menu, custom-logo, featured-images, translation-ready, accessibility-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Fonty (self-hosted — bez Google Fonts, zgodnie z RODO)
   ========================================================================== */

@font-face {
	font-family: 'Baloo 2';
	src: url('assets/fonts/baloo2-700-latin-ext.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Baloo 2';
	src: url('assets/fonts/baloo2-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Figtree';
	src: url('assets/fonts/figtree-400-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Figtree';
	src: url('assets/fonts/figtree-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Figtree';
	src: url('assets/fonts/figtree-600-latin-ext.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Figtree';
	src: url('assets/fonts/figtree-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Figtree';
	src: url('assets/fonts/figtree-700-latin-ext.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Figtree';
	src: url('assets/fonts/figtree-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Zmienne — „złota godzina” ze zdjęć i noc, w której sowy latają
   ========================================================================== */

:root {
	--noc: #14171e;
	--noc-2: #1c212b;
	--zmierzch: #2a3140;
	--kremowy: #faf7f1;
	--piasek: #f1e9db;
	--pioro: #ddd1bb;

	--bursztyn: #cf8f26;        /* oko sowy / słońce nad łąką */
	--bursztyn-jasny: #eab558;
	--miedz: #a85f37;
	--las: #4c5b45;

	--tekst: #24272e;
	--tekst-mocny: #0f1116;
	--tekst-cichy: #6a6f78;
	--tekst-na-nocy: rgba(250, 247, 241, .82);

	--linia: rgba(20, 23, 30, .12);
	--linia-noc: rgba(250, 247, 241, .16);

	--cien-s: 0 2px 8px rgba(20, 23, 30, .06);
	--cien-m: 0 10px 30px rgba(20, 23, 30, .10);
	--cien-l: 0 24px 60px rgba(20, 23, 30, .18);

	--r-s: 10px;
	--r-m: 18px;
	--r-l: 30px;
	--r-pill: 999px;

	/* Szerokości kontenerów.
	   Wąski kontener to kolumna tekstu i jego szerokość rozstrzyga pomiar, nie wyczucie:
	   przy 18 px pisma Figtree jeden wiersz mieści 87 znaków na 900 px i 72 znaki na 740 px.
	   Wygodny zakres to 45–75 znaków, górna granica z WCAG 1.4.8 to 80 — 900 px wychodziło
	   więc poza nią, a 740 px siedziało dokładnie w środku. 800 px daje 77 znaków: wyraźnie
	   szerzej niż było (o czym to zadanie), a wciąż po właściwej stronie granicy.
	   Szeroki kontener to inna sprawa — tam nie ma wierszy tekstu przez całą szerokość,
	   tylko siatki kafelków, więc 1320 px zamiast 1180 px po prostu przestaje ściskać zdjęcia. */
	--max: 1320px;
	--max-waski: 800px;
	--gap: clamp(20px, 4vw, 44px);
	--sekcja: clamp(64px, 9vw, 128px);

	--font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
	--font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--naglowek-h: 74px;
}

/* ==========================================================================
   3. Reset i podstawy
   ========================================================================== */

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

/* scroll-padding musi stać na elemencie, który się przewija — inaczej kotwice chowają się
   pod paskiem nawigacji. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--naglowek-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--kremowy);
	color: var(--tekst);
	font-family: var(--font-body);
	font-size: clamp(16px, .42vw + 15px, 18px);
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--tekst-mocny);
	line-height: 1.12;
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
h4 { font-size: 1.12rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--miedz); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bursztyn); }

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

ul, ol { padding-left: 1.2em; }
li { margin-bottom: .35em; }

hr { border: 0; height: 1px; background: var(--linia); margin: 2.5rem 0; }

blockquote {
	margin: 2rem 0;
	padding: 0 0 0 1.4rem;
	border-left: 3px solid var(--bursztyn);
	font-size: 1.1em;
	font-style: italic;
	color: var(--tekst-mocny);
}

table { border-collapse: collapse; width: 100%; }
th, td { padding: .6rem .8rem; border-bottom: 1px solid var(--linia); text-align: left; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--noc);
	color: #fff;
	border-radius: 0 0 var(--r-s) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. Układ
   ========================================================================== */

.wrap { width: min(var(--max), 100% - 2 * clamp(16px, 5vw, 48px)); margin-inline: auto; }
.wrap--waski { width: min(var(--max-waski), 100% - 2 * clamp(16px, 5vw, 48px)); }

.sekcja { padding-block: var(--sekcja); position: relative; }
.sekcja--ciasna { padding-block: clamp(44px, 6vw, 80px); }
.sekcja--piasek { background: var(--piasek); }
.sekcja--noc { background: var(--noc); color: var(--tekst-na-nocy); }
.sekcja--noc h2, .sekcja--noc h3, .sekcja--noc h4 { color: var(--kremowy); }
/* Jak w stopce: przycisk ma własne kolory dobrane pod kontrast, więc reguła kontekstowa
   go omija. Bez `:not(.btn)` przycisk główny w ciemnej sekcji dostałby jasny bursztyn
   na bursztynowym tle - 1,5:1, czyli napis praktycznie niewidoczny. */
.sekcja--noc a:not(.btn) { color: var(--bursztyn-jasny); }

.naglowek-sekcji { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.naglowek-sekcji p { color: var(--tekst-cichy); max-width: 62ch; margin-inline: auto; }
.sekcja--noc .naglowek-sekcji p { color: var(--tekst-na-nocy); }

/*
 * Nadtytuł nad nagłówkiem sekcji.
 *
 * Bez kropki przed napisem: miała być okiem sowy, ale w tym rozmiarze czytało się ją jako
 * punktor listy albo zabrudzenie ekranu. Sam rozstrzelony wersalik wystarczy, żeby odróżnić
 * nadtytuł od treści.
 */
.kicker {
	display: inline-block;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--miedz);
	margin-bottom: 1rem;
}
/* Nadtytuł na ciemnym tle musi zmienić kolor, bo miedź na nocy daje 3,8:1 przy wymaganych
   4,5:1 - a jest to tekst 12-piksełowy, wersalikami, z dużym odstępem liter, czyli najgorszy
   możliwy przypadek do czytania. Bursztyn jasny daje na tym samym tle 9,9:1.
   `.czolo` to trzeci ciemny kontekst w motywie (pasek z tytułem podstrony) i przez przeoczenie
   nie było go na tej liście - nadtytuł na wszystkich podstronach był za słaby. */
.sekcja--noc .kicker, .hero .kicker, .czolo .kicker { color: var(--bursztyn-jasny); }

.siatka { display: grid; gap: clamp(20px, 2.6vw, 34px); }
/* `min(…, 100%)`: kolumna nigdy nie szersza niż miejsce. Samo `minmax(300px, 1fr)` na telefonie
   320 px (treść 288 px) robiło kartę oferty o 12 px za szeroką - wystawała poza marginesy,
   a przy pasku przewijania także poza okno (audyt 28.09). */
.siatka--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.siatka--3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.siatka--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* Siatka, która nie rozciąga pojedynczego kafelka.
   `auto-fit` zwija puste tory, więc sekcja z jedną koszulką dostawała kafelek na całą
   szerokość — a że kafelek pamiątki ma `aspect-ratio: 1`, robił się z tego pusty kwadrat
   1320 × 1320 px. `auto-fill` zostawia tory puste i kafelek zostaje kafelkiem. */
.siatka--stala { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }

/* ==========================================================================
   5. Przyciski
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .85em 1.7em;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font-family: var(--font-body);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--glowny { background: var(--bursztyn); color: var(--noc); box-shadow: 0 6px 20px rgba(207, 143, 38, .32); }
.btn--glowny:hover { background: var(--bursztyn-jasny); color: var(--noc); box-shadow: 0 10px 26px rgba(207, 143, 38, .42); }

.btn--noc { background: var(--noc); color: var(--kremowy); }
.btn--noc:hover { background: var(--zmierzch); color: #fff; }

.btn--obrys { border-color: currentColor; color: var(--tekst-mocny); background: transparent; }
.btn--obrys:hover { background: var(--tekst-mocny); color: var(--kremowy); }
.sekcja--noc .btn--obrys, .hero .btn--obrys { color: var(--kremowy); }
.sekcja--noc .btn--obrys:hover, .hero .btn--obrys:hover { background: var(--kremowy); color: var(--noc); }

.btn--maly { padding: .6em 1.2em; font-size: .8rem; }

/* ==========================================================================
   6. Nagłówek strony
   ========================================================================== */

.gora {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(250, 247, 241, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--linia);
	transition: background-color .3s ease, border-color .3s ease;
}
.gora__in {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	min-height: var(--naglowek-h);
	padding-block: 10px;
}

.marka { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; flex: none; }
.marka__znak { width: 42px; height: 42px; flex: none; color: var(--noc); }
.marka__znak svg, .marka__znak img { width: 100%; height: 100%; object-fit: contain; display: block; }
.marka__tekst { display: block; }
.marka__nazwa {
	display: block;
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tekst-mocny);
	line-height: 1;
	white-space: nowrap;
}
.marka__pod {
	display: block;
	font-family: var(--font-body);
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--miedz);
	margin-top: 4px;
	white-space: nowrap;
}

.gora__akcje { display: flex; align-items: center; gap: 10px; flex: none; }
.nawigacja__cta { display: none; }

.menu { display: flex; align-items: center; gap: clamp(8px, 1.3vw, 20px); list-style: none; margin: 0; padding: 0; }
/* Cel kliknięcia ma mieć co najmniej 24 px w każdą stronę (WCAG 2.2, kryterium 2.5.8).
   Samo `padding: .5rem` przy piśmie .74rem dawało 22 px — dwa piksele za mało, i to na pozycji,
   w którą trafia się najczęściej. Wyrównanie do środka zostawia podkreślenie tam, gdzie było. */
.menu a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 24px;
	padding: .5rem .1rem;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--tekst);
	text-decoration: none;
}
.menu a::after {
	content: '';
	position: absolute;
	left: 0; right: 100%; bottom: .15rem;
	height: 2px;
	background: var(--bursztyn);
	transition: right .25s ease;
}
.menu a:hover::after, .menu .current-menu-item > a::after, .menu .current_page_item > a::after { right: 0; }
.menu .current-menu-item > a, .menu .current_page_item > a { color: var(--tekst-mocny); }

.menu-przelacznik {
	display: none;
	width: 46px; height: 46px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--linia);
	border-radius: var(--r-s);
	cursor: pointer;
	color: var(--tekst-mocny);
}
.menu-przelacznik__kreski, .menu-przelacznik__kreski::before, .menu-przelacznik__kreski::after {
	display: block;
	width: 20px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}
.menu-przelacznik__kreski { position: relative; }
.menu-przelacznik__kreski::before, .menu-przelacznik__kreski::after { content: ''; position: absolute; left: 0; }
.menu-przelacznik__kreski::before { top: -6px; }
.menu-przelacznik__kreski::after { top: 6px; }
.menu-przelacznik[aria-expanded="true"] .menu-przelacznik__kreski { background: transparent; }
.menu-przelacznik[aria-expanded="true"] .menu-przelacznik__kreski::before { transform: translateY(6px) rotate(45deg); }
.menu-przelacznik[aria-expanded="true"] .menu-przelacznik__kreski::after { transform: translateY(-6px) rotate(-45deg); }

/* Poniżej 1280 px nazwa marki wystarczy bez podtytułu — inaczej menu robi się ciasne. */
@media (max-width: 1280px) {
	.marka__pod { display: none; }
	.marka__nazwa { font-size: 1.18rem; }
}

/* Siedem pozycji menu plus przycisk przestaje się mieścić — przechodzimy na menu zwijane. */
@media (max-width: 1150px) {
	.menu-przelacznik { display: inline-flex; }
	.nawigacja {
		position: fixed;
		inset: var(--naglowek-h) 0 auto 0;
		background: var(--kremowy);
		border-bottom: 1px solid var(--linia);
		box-shadow: var(--cien-m);
		padding: 14px clamp(16px, 5vw, 48px) 24px;
		display: none;
		max-height: calc(100dvh - var(--naglowek-h));
		overflow-y: auto;
	}
	.nawigacja.jest-otwarte { display: block; }
	.menu { flex-direction: column; align-items: stretch; gap: 0; }
	.menu a {
		padding: .85rem .2rem;
		font-size: .92rem;
		letter-spacing: .06em;
		color: var(--tekst);
		border-bottom: 1px solid var(--linia);
	}
	.menu a::after { display: none; }
	/* W rozwiniętym menu przycisk wraca jako ostatnia pozycja — na pasku nie ma już miejsca. */
	.nawigacja__cta { display: inline-flex; margin-top: 16px; }
	.gora__cta { display: none; }
	/* Panel jest kremowy także nad zdjęciem, więc napisy muszą być ciemne. */
	body.ma-hero .gora .nawigacja .menu a { color: var(--tekst); }
}

@media (max-width: 420px) {
	.marka__nazwa { font-size: 1.05rem; }
	.marka__znak { width: 36px; height: 36px; }
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
	position: relative;
	min-height: min(88vh, 780px);
	display: grid;
	align-items: end;
	color: var(--kremowy);
	isolation: isolate;
	overflow: hidden;
	/* Tło awaryjne: ekran powitalny bez wybranego zdjęcia ma nadal wyglądać jak zamierzony,
	   a nie jak biały tekst na jasnym tle. Zdjęcie, gdy jest, zakrywa je w całości. */
	background: var(--noc, #14171e);
}
.hero__tlo {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.hero__tlo img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 42%;
}
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 80% at 70% 30%, rgba(20, 23, 30, 0) 30%, rgba(20, 23, 30, .45) 100%),
		linear-gradient(to top, rgba(20, 23, 30, .88) 0%, rgba(20, 23, 30, .42) 42%, rgba(20, 23, 30, .12) 100%);
}
.hero__tresc {
	padding-block: clamp(48px, 10vw, 120px);
	max-width: 46rem;
}
/* h2, bo na zwykłej stronie tytuł strony jest już nagłówkiem pierwszego poziomu i ekran
   powitalny schodzi o stopień niżej. Wygląd ma być ten sam — zmienia się znacznik, nie rola. */
.hero h1,
.hero h2 {
	color: #fff;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
	margin-bottom: .35em;
}
.hero__lead {
	font-size: clamp(1.02rem, 1.5vw, 1.24rem);
	color: rgba(255, 255, 255, .9);
	max-width: 40rem;
}
.hero__akcje { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .75);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.hero__scroll span { display: block; width: 1px; height: 26px; background: currentColor; animation: piorko 2.4s ease-in-out infinite; }
@keyframes piorko { 0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll span { animation: none; } }

/* Cel strzałki „przewiń”: punkt tuż pod ekranem powitalnym. Nie zajmuje miejsca w układzie
   i nie jest widoczny – istnieje wyłącznie po to, żeby odnośnik miał dokąd skoczyć.
   Odstęp od góry bierze się z `scroll-padding-top` na <html>, więc nie chowa się pod paskiem. */
.hero__cel { display: block; height: 0; }

/* Przycisk wsparcia po lewej stronie ekranu — wybór z Personalizacji. */
.wsparcie--lewo {
	right: auto;
	left: clamp(12px, 2vw, 24px);
}

/* Nagłówek nad hero — przezroczysty do pierwszego przewinięcia.
   Musi być `fixed`, nie `sticky`: element przyklejony zajmuje miejsce w układzie, więc
   biały napis lądowałby na kremowym tle strony zamiast na zdjęciu. */
body.ma-hero .gora {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: transparent;
	border-bottom-color: transparent;
}
/* Pierwszy ekran wsuwa się pod nagłówek, więc treść odsuwamy o jego wysokość. */
body.ma-hero .hero__tresc { padding-top: calc(var(--naglowek-h) + clamp(48px, 10vw, 120px)); }
/* Delikatne przyciemnienie pod paskiem: zdjęcia bywają jasne u góry, a gdyby skrypt się nie
   wykonał, białe napisy i tak pozostaną czytelne. */
body.ma-hero .gora::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(20, 23, 30, .55), rgba(20, 23, 30, 0));
	transition: opacity .3s ease;
}
body.ma-hero .gora.jest-przyklejony::before { opacity: 0; }
body.ma-hero .gora .marka__nazwa, body.ma-hero .gora .menu a { color: #fff; }
body.ma-hero .gora .marka__znak { color: #fff; }
body.ma-hero .gora .marka__pod { color: var(--bursztyn-jasny); }
body.ma-hero .gora .menu-przelacznik { color: #fff; border-color: rgba(255, 255, 255, .4); }
body.ma-hero .gora.jest-przyklejony { background: rgba(250, 247, 241, .95); border-bottom-color: var(--linia); }
body.ma-hero .gora.jest-przyklejony .marka__nazwa, body.ma-hero .gora.jest-przyklejony .menu a { color: var(--tekst); }
body.ma-hero .gora.jest-przyklejony .marka__znak { color: var(--noc); }
body.ma-hero .gora.jest-przyklejony .marka__pod { color: var(--miedz); }
body.ma-hero .gora.jest-przyklejony .menu-przelacznik { color: var(--tekst-mocny); border-color: var(--linia); }

/* Nagłówek podstrony (bez zdjęcia) */
.czolo {
	background: var(--noc);
	color: var(--tekst-na-nocy);
	padding-block: clamp(52px, 8vw, 96px);
	position: relative;
	overflow: hidden;
}
.czolo h1 { color: #fff; }
.czolo__lead { max-width: 58ch; font-size: 1.06rem; }
/* Znak wodny: pełne logo, mocno przygaszone. Wypełniona sylwetka „waży” więcej niż rysunek
   liniowy, więc krycie jest niższe, niż podpowiadałaby intuicja. */
.czolo__sowa {
	position: absolute;
	right: clamp(-40px, -2vw, 0px); bottom: -46px;
	width: min(260px, 32vw);
	opacity: .055;
	color: var(--kremowy);
	pointer-events: none;
}

/* ==========================================================================
   8. Karty ptaków
   ========================================================================== */

.ptak {
	position: relative;
	background: #fff;
	border-radius: var(--r-m);
	overflow: hidden;
	box-shadow: var(--cien-s);
	transition: transform .3s ease, box-shadow .3s ease;
	display: flex;
	flex-direction: column;
}
.ptak:hover { transform: translateY(-6px); box-shadow: var(--cien-l); }
.ptak__foto { position: relative; aspect-ratio: 4 / 5; background: var(--piasek); overflow: hidden; }
.ptak__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ptak:hover .ptak__foto img { transform: scale(1.04); }
.ptak__odznaka {
	position: absolute;
	left: 14px; top: 14px;
	padding: .34em .9em;
	border-radius: var(--r-pill);
	background: rgba(20, 23, 30, .78);
	color: var(--kremowy);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}
.ptak__tresc { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.ptak__imie { margin: 0; font-size: 1.5rem; }
.ptak__gatunek { margin: 0; color: var(--tekst-cichy); font-size: .92rem; }
.ptak__gatunek em { font-style: italic; }
.ptak__opis { margin: 0; font-size: .96rem; }
.ptak__meta { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--linia); font-size: .82rem; color: var(--tekst-cichy); display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

/* ==========================================================================
   9. Karty oferty
   ========================================================================== */

.oferta {
	background: #fff;
	border: 1px solid var(--linia);
	border-radius: var(--r-m);
	padding: clamp(22px, 2.4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.oferta:hover { border-color: rgba(207, 143, 38, .5); box-shadow: var(--cien-m); transform: translateY(-3px); }
.oferta__gora { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
/* Po klasie, nie po znaczniku: tytuł karty bywa `h2` albo `h3` zależnie od tego, co stoi
   nad nią na stronie (patrz sowiarstwo_karta_oferty), a wygląd ma być ten sam. */
.oferta__tytul { margin: 0; font-size: 1.32rem; }
.oferta__cena {
	flex: none;
	background: var(--piasek);
	color: var(--tekst-mocny);
	border-radius: var(--r-pill);
	padding: .42em 1em;
	font-weight: 700;
	font-size: .94rem;
	white-space: nowrap;
}
/* Na najwęższych telefonach (320 px) cena „od 25 zł / osoba” nie mieściła się obok tytułu
   i wystawała o 18 px - strona główna i Oferta dawały się przesuwać w bok (audyt 28.09).
   Wtedy cena schodzi pod tytuł; szerzej zostaje obok niego. */
@media (max-width: 400px) {
	.oferta__gora { flex-wrap: wrap; gap: .6rem 1rem; }
}
.oferta__dla { font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--miedz); font-weight: 700; }
.oferta__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.oferta__lista li { position: relative; padding-left: 1.6rem; font-size: .95rem; margin: 0; }
.oferta__lista li::before {
	content: '';
	position: absolute;
	left: 0; top: .55em;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, var(--noc) 0 24%, var(--bursztyn) 28% 100%);
}
.oferta__cennik { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.oferta__cennik li { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; border-bottom: 1px dashed var(--linia); padding-bottom: .3rem; margin: 0; }
.oferta__cennik b { white-space: nowrap; }
.oferta__uwaga { font-size: .86rem; color: var(--tekst-cichy); }

/* ==========================================================================
   10. FAQ
   ========================================================================== */

.faq { display: grid; gap: 12px; }
.faq__poz {
	background: #fff;
	border: 1px solid var(--linia);
	border-radius: var(--r-m);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.faq__poz[open] { border-color: rgba(207, 143, 38, .55); box-shadow: var(--cien-s); }
.faq__poz summary {
	cursor: pointer;
	list-style: none;
	padding: 1.05rem clamp(16px, 2vw, 26px);
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--tekst-mocny);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.faq__poz summary::-webkit-details-marker { display: none; }
.faq__poz summary::after {
	content: '';
	flex: none;
	width: 12px; height: 12px;
	border-right: 2px solid var(--bursztyn);
	border-bottom: 2px solid var(--bursztyn);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .25s ease;
}
.faq__poz[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
/* Odpowiedź to proza, więc obowiązuje ją ta sama miara co treść strony (patrz `.tresc p`):
   mierzone 80–86 znaków w wierszu przy 746 px, a granica wygodnego czytania to 75. */
.faq__tresc { padding: 0 clamp(16px, 2vw, 26px) 1.3rem; color: var(--tekst); }
.faq__tresc p,
.faq__tresc ul,
.faq__tresc ol { max-width: 36em; }

/* ==========================================================================
   11. Pasy: cytat, fundacja, CTA
   ========================================================================== */

.pas-cytat {
	position: relative;
	background: var(--noc);
	color: var(--kremowy);
	text-align: center;
	padding-block: clamp(56px, 8vw, 110px);
	overflow: hidden;
}
.pas-cytat__sowa {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: min(460px, 74vw);
	opacity: .05;
	color: var(--kremowy);
	pointer-events: none;
}
.pas-cytat p {
	position: relative;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	line-height: 1.25;
	max-width: 22ch;
	margin-inline: auto;
	letter-spacing: .01em;
}
.pas-cytat cite {
	display: block;
	margin-top: 1.2rem;
	font-family: var(--font-body);
	font-style: normal;
	font-size: .78rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bursztyn-jasny);
}

.pas-foto {
	position: relative;
	min-height: min(60vh, 520px);
	display: grid;
	place-items: center;
	text-align: center;
	color: #fff;
	isolation: isolate;
	overflow: hidden;
}
.pas-foto__tlo { position: absolute; inset: 0; z-index: -2; }
.pas-foto__tlo img { width: 100%; height: 100%; object-fit: cover; }
.pas-foto::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(20,23,30,.55), rgba(20,23,30,.72)); }
.pas-foto h2 { color: #fff; font-size: clamp(1.9rem, 5vw, 3.4rem); letter-spacing: .04em; text-transform: uppercase; }
.pas-foto p { color: rgba(255,255,255,.88); letter-spacing: .18em; text-transform: uppercase; font-size: .82rem; }

.pas-fundacja {
	background: var(--noc-2);
	color: var(--tekst-na-nocy);
	padding-block: clamp(36px, 5vw, 64px);
}
.pas-fundacja__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px); text-align: center; }
.pas-fundacja p { max-width: 46ch; margin: 0; }

.cta-band {
	background: linear-gradient(135deg, var(--miedz), var(--bursztyn));
	color: var(--noc);
	border-radius: var(--r-l);
	padding: clamp(28px, 4vw, 52px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	box-shadow: var(--cien-m);
}
.cta-band h2 { margin: 0 0 .3em; color: var(--noc); }
.cta-band p { margin: 0; max-width: 52ch; color: rgba(20, 23, 30, .82); }

/* ==========================================================================
   12. Media o nas, figurki, galeria
   ========================================================================== */

.prasa {
	display: block;
	background: #fff;
	border: 1px solid var(--linia);
	border-radius: var(--r-m);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease;
}
.prasa:hover { transform: translateY(-4px); box-shadow: var(--cien-m); color: inherit; }
.prasa__foto { aspect-ratio: 16 / 9; background: var(--piasek); }
.prasa__foto img { width: 100%; height: 100%; object-fit: cover; }
.prasa__tresc { padding: 1rem 1.2rem 1.2rem; }
.prasa__zrodlo { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--miedz); font-weight: 700; }
.prasa__tytul { font-family: var(--font-display); font-size: 1.08rem; margin: .3rem 0 0; color: var(--tekst-mocny); }

.figurka {
	background: #fff;
	border: 1px solid var(--linia);
	border-radius: var(--r-m);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.figurka:hover { transform: translateY(-4px); box-shadow: var(--cien-m); }
.figurka__foto { aspect-ratio: 1; background: var(--piasek); }
.figurka__foto img { width: 100%; height: 100%; object-fit: cover; }
.figurka__tresc { padding: .9rem 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.figurka__nazwa { font-weight: 600; font-size: .95rem; }
.figurka__cena { font-family: var(--font-display); font-size: 1.1rem; color: var(--miedz); white-space: nowrap; }

/* Warianty (rozmiary koszulki, pojemności kubka) — lista, bo to zbiór równorzędnych opcji,
   a nie zdanie. Kropki zastąpione myślnikiem: przy trzech rozmiarach punktowana lista
   w kafelku wygląda jak spis treści. */
.figurka__warianty {
	margin: 0;
	padding: 0 1rem 1rem;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .5rem;
	font-size: .82rem;
	color: var(--tekst-cichy);
}
.figurka__warianty li {
	padding: .1rem .5rem;
	border: 1px solid var(--linia);
	border-radius: var(--r-pill);
	background: var(--piasek);
}

/* Nagłówki sekcji na stronie pamiątek. Rodzaj drukuje się tylko wtedy, gdy rodzajów jest
   więcej niż jeden — stąd osobna klasa dla ceny, która raz jest h2, a raz h3. */
.pamiatki__rodzaj { margin-top: 2.8rem; }
.pamiatki__opis { margin: -.4rem 0 1.4rem; color: var(--tekst-cichy); max-width: 62ch; }
.pamiatki__cena { margin-top: 1.8rem; }
.pamiatki__rodzaj + .pamiatki__cena,
.pamiatki__opis + .pamiatki__cena { margin-top: 0; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); }

/* ==========================================================================
   13. Treść strony (WYSIWYG / bloki)
   ========================================================================== */

/*
 * Szerokość układu to nie to samo co miara tekstu.
 *
 * Kontener treści ma 800 px, żeby zdjęcia, osadzenia i karty miały się gdzie rozłożyć — i to
 * jest sens poszerzenia. Ale akapit przez całe 800 px to 87 znaków w wierszu (mierzone na
 * żywej stronie, nie szacowane), a wygodnie czyta się 45–75; WCAG 1.4.8 stawia granicę na 80.
 * Oko gubi wtedy początek następnego wiersza i wraca do tego samego dwa razy.
 *
 * Dlatego zawężamy sam tekst, a nie kontener: `36em` to około 70 znaków przy każdej wielkości
 * pisma, bo szerokość znaku skaluje się razem z nią. Zdjęcie, tabela i osadzony film zostają
 * szerokie — tak samo jak w edytorze WordPressa, gdzie „szeroki” i „pełny” są osobnymi
 * szerokościami od zwykłego akapitu.
 */
.tresc > * + * { margin-top: 1.1em; }
.tresc p,
.tresc ul,
.tresc ol,
.tresc blockquote { max-width: 36em; }
.tresc h2 { margin-top: 2.2em; }
.tresc h3 { margin-top: 1.8em; }
.tresc img { border-radius: var(--r-m); }
.tresc ul li::marker { color: var(--bursztyn); }
.tresc .alignwide { width: min(var(--max), 100%); margin-inline: auto; }
.tresc .alignfull { width: 100vw; margin-left: calc(50% - 50vw); }
.tresc .aligncenter { margin-inline: auto; }

.karta-tresci {
	background: #fff;
	border-radius: var(--r-l);
	box-shadow: var(--cien-s);
	padding: clamp(24px, 4vw, 56px);
}

/* Lista kroków / zasad z regulaminu */
.zasady { list-style: none; margin: 0; padding: 0; counter-reset: zasada; display: grid; gap: 14px; }
.zasady li {
	counter-increment: zasada;
	position: relative;
	background: #fff;
	border: 1px solid var(--linia);
	border-radius: var(--r-m);
	padding: 1.1rem 1.3rem 1.1rem 4.2rem;
	margin: 0;
}
.zasady li::before {
	content: counter(zasada);
	position: absolute;
	left: 1.1rem; top: 1rem;
	width: 2.2rem; height: 2.2rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--noc);
	color: var(--bursztyn-jasny);
	font-family: var(--font-display);
	font-size: 1.05rem;
}
.zasady strong { display: block; font-family: var(--font-display); font-size: 1.08rem; color: var(--tekst-mocny); margin-bottom: .2rem; }

/* ==========================================================================
   14. Stopka
   ========================================================================== */

.stopka {
	position: relative;
	color: var(--tekst-na-nocy);
	padding-block: clamp(48px, 7vw, 86px) 0;
	isolation: isolate;
	overflow: hidden;
}
.stopka__tlo { position: absolute; inset: 0; z-index: -2; }
.stopka__tlo img { width: 100%; height: 100%; object-fit: cover; }
.stopka::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(20,23,30,.86), rgba(20,23,30,.95)); }
.stopka--bez-foto { background: var(--noc); }
/* Nagłówki kolumn stopki są `h2` (patrz footer.php) — rozmiar podany jawnie, żeby zmiana
   poziomu nie zrobiła z nich nagłówków wielkości sekcji. `h3` zostaje dla treści redakcyjnej,
   gdyby ktoś wstawił ją do widżetu w stopce. */
.stopka h2, .stopka h3 { color: var(--kremowy); font-size: 1.15rem; letter-spacing: .04em; margin-bottom: .6rem; }
/* `:not(.btn)` jest tu konieczne, a nie ozdobne. Bez niego `.stopka a` (0,1,1) wygrywało
   z `.btn--glowny` (0,1,0) i przycisk w stopce dostawał kremowy tekst na złotym tle:
   2,58:1 przy wymaganych 4,5:1. Przycisk ma własne kolory dobrane pod kontrast i żadna
   reguła kontekstowa nie powinna ich zdejmować - także ta dla przyszłych przycisków,
   które ktoś w stopce postawi. */
.stopka a:not(.btn) { color: var(--kremowy); text-decoration: none; }
.stopka a:not(.btn):hover { color: var(--bursztyn-jasny); }
.stopka__siatka { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.stopka__kontakt { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.stopka__kontakt li { display: flex; align-items: flex-start; gap: .7rem; margin: 0; }
.stopka__kontakt svg { flex: none; width: 18px; height: 18px; color: var(--bursztyn-jasny); margin-top: .22em; }
.stopka__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.stopka__menu li { margin: 0; }

/* Cel kliknięcia co najmniej 24 px (WCAG 2.2, kryterium 2.5.8). Odnośniki stopki miały 20 px
   i stały jeden pod drugim z przerwą 7 px, więc odstęp też nie ratował sprawy. Na telefonie
   to jedyne widoczne menu — nagłówkowe jest wtedy zwinięte pod przyciskiem. */
.stopka__menu a,
.stopka__kontakt a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social a {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(250, 247, 241, .10);
	border: 1px solid var(--linia-noc);
	transition: background-color .2s ease, transform .2s ease;
}
.social a:hover { background: var(--bursztyn); color: var(--noc); transform: translateY(-3px); }
.social svg { width: 20px; height: 20px; }

.stopka__dol {
	margin-top: clamp(32px, 4vw, 56px);
	padding-block: 1.2rem;
	border-top: 1px solid var(--linia-noc);
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.4rem;
	justify-content: space-between;
	font-size: .82rem;
	color: rgba(250, 247, 241, .6);
}

/* ==========================================================================
   15. Ozdobniki: pióro jako separator sekcji
   ========================================================================== */

.piorko-separator {
	display: block;
	width: 100%;
	height: clamp(28px, 4vw, 54px);
	color: inherit;
}
.piorko-separator svg { width: 100%; height: 100%; display: block; }

.oko-ozdoba {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 46%, var(--noc) 0 26%, var(--bursztyn) 30% 72%, rgba(207,143,38,.25) 74% 100%);
	margin-inline: auto;
	margin-bottom: 1.2rem;
}

/* ==========================================================================
   16. Animacja pojawiania (wyłączona przy reduced-motion)
   ========================================================================== */

.odslon { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.odslon.jest-widoczny { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.odslon { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   17. Duża karta ptaka (podstrona „Nasze ptaki”)
   ========================================================================== */

.ptak-duzy {
	display: flex;
	flex-direction: var(--kierunek, row);
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
	margin-bottom: clamp(40px, 6vw, 88px);
}
.ptak-duzy:last-child { margin-bottom: 0; }
.ptak-duzy__foto {
	position: relative;
	flex: 0 0 min(42%, 440px);
	border-radius: var(--r-l);
	overflow: hidden;
	box-shadow: var(--cien-m);
	aspect-ratio: 4 / 5;
	background: var(--pioro);
}
.ptak-duzy__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Opis ptaka to proza, a proza ma miarę.
   Kolumna rosła razem z szerokim kontenerem i po poszerzeniu go do 1320 px miała 816 px,
   czyli 87 znaków w wierszu — mierzone, nie szacowane. Wygodnie czyta się 45–75, a WCAG 1.4.8
   stawia granicę na 80. `36em` daje około 70 znaków przy każdej wielkości pisma, bo szerokość
   znaku skaluje się razem z nią. Kolumna nadal wypełnia kartę na węższych ekranach —
   `max-width` tylko ją zatrzymuje, nie zwęża na siłę. */
.ptak-duzy__tresc { flex: 1 1 320px; max-width: 36em; }
.ptak-duzy__tresc h2 { margin-bottom: .1em; }
.ptak-duzy__meta {
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
	display: grid;
	gap: .4rem;
	font-size: .92rem;
	color: var(--tekst-cichy);
}
.ptak-duzy__meta li { position: relative; padding-left: 1.4rem; margin: 0; }
.ptak-duzy__meta li::before {
	content: '';
	position: absolute;
	left: 0; top: .52em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--bursztyn);
}
@media (max-width: 760px) {
	.ptak-duzy { flex-direction: column !important; }
	.ptak-duzy__foto { flex: none; width: 100%; max-width: 420px; }
}

/* ==========================================================================
   18. Wyszukiwarka i stronicowanie
   ========================================================================== */

.szukaj { display: flex; gap: 8px; }
.szukaj input[type="search"] {
	flex: 1;
	padding: .8em 1.1em;
	border: 1px solid var(--linia);
	border-radius: var(--r-pill);
	font: inherit;
	background: #fff;
	color: var(--tekst);
}
.sekcja--noc .szukaj input[type="search"] { background: rgba(255,255,255,.08); border-color: var(--linia-noc); color: #fff; }

.navigation.pagination { margin-top: 3rem; display: flex; justify-content: center; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px; height: 44px;
	padding: 0 .9em;
	border-radius: var(--r-pill);
	background: #fff;
	border: 1px solid var(--linia);
	text-decoration: none;
	color: var(--tekst);
	font-weight: 600;
}
.page-numbers.current, .page-numbers:hover { background: var(--noc); color: var(--kremowy); border-color: var(--noc); }

/* ==========================================================================
   19. Widżet wsparcia (buycoffee.to)
   ========================================================================== */

.stopka__wsparcie { margin-top: 1.2rem; }
.stopka__wsparcie svg { width: 18px; height: 18px; }

/*
 * Przycisk „Postaw kawę”.
 *
 * `[hidden]` MUSI stać przed regułą z `display: flex` i mieć `!important` — inaczej nie działa.
 * Atrybut `hidden` to w przeglądarce zwykłe `display: none` z arkusza domyślnego, czyli reguła
 * o najniższym priorytecie: każdy `display` z arkusza motywu ją pokonuje. Skutek był taki, że
 * skrypt rzetelnie ustawiał `hidden = true`, sessionStorage zapamiętywał decyzję, a widżet
 * stał dalej w rogu i nie dawał się zamknąć.
 */
.wsparcie[hidden] {
	display: none !important;
}

.wsparcie {
	position: fixed;
	right: clamp(12px, 2vw, 24px);
	bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom, 0px));
	z-index: 80;
	display: flex;
	align-items: stretch;
	/* Kolory z Personalizacji, a gdy ich nie ustawiono — z palety motywu. Zmienne wypisuje
	   sowiarstwo_widzet_wsparcia() na samym elemencie, i tylko te naprawdę wybrane. */
	background: var(--wsparcie-tlo, var(--noc));
	color: var(--wsparcie-tekst, var(--kremowy));
	border-radius: var(--r-pill);
	box-shadow: var(--cien-l);
	overflow: hidden;
	animation: wsparcie-wjazd .5s ease .8s both;
}
@keyframes wsparcie-wjazd {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wsparcie { animation: none; }
}

.wsparcie__link {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .7rem 1.1rem .7rem .9rem;
	text-decoration: none;
	color: inherit;
	transition: background-color .2s ease;
}
.wsparcie__link:hover { background: var(--zmierzch); color: var(--kremowy); }

.wsparcie__ikona {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: 50%;
	background: var(--wsparcie-ikona-tlo, var(--bursztyn));
	color: var(--noc);
}
.wsparcie__ikona svg { width: 20px; height: 20px; }

.wsparcie__tekst { display: grid; line-height: 1.25; }
.wsparcie__tekst strong { font-family: var(--font-display); font-size: .98rem; letter-spacing: .01em; }
.wsparcie__tekst small { font-size: .74rem; color: rgba(250, 247, 241, .7); }

.wsparcie__zamknij {
	flex: none;
	width: 34px;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--linia-noc);
	color: rgba(250, 247, 241, .6);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}
.wsparcie__zamknij:hover { color: var(--kremowy); background: rgba(250, 247, 241, .08); }

/* Na telefonie zostaje sam sygnet – pasek na całą szerokość zasłaniałby treść. */
@media (max-width: 560px) {
	/* Świadomy wybór z Personalizacji: na wąskim ekranie przycisku nie ma wcale.
	   `!important`, bo musi pokonać `display: flex` z reguły bazowej — tak samo jak `[hidden]`. */
	.wsparcie--bez-telefonu { display: none !important; }
	.wsparcie__tekst small { display: none; }
	.wsparcie__tekst strong { font-size: .88rem; }
	.wsparcie__link { padding: .55rem .9rem .55rem .7rem; }
	.wsparcie__ikona { width: 32px; height: 32px; }
}

/* ==========================================================================
   20. Druk
   ========================================================================== */

@media print {
	.gora, .stopka, .hero__scroll, .cta-band, .menu-przelacznik, .wsparcie { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.sekcja { padding-block: 12pt; }
	a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* ------------------------------------------------------------------ */
/*  Strona zbudowana w PageCrafcie                                      */
/* ------------------------------------------------------------------ */

/* Motyw ustępuje: żadnego wąskiego kontenera, karty ani limitu 36em na akapicie.
   Dokument PageCrafta sam odpowiada za sekcje, siatki i szerokości — gdyby siedział
   w `.wrap--waski.tresc`, hero na całą szerokość nie miałby jak zadziałać.
   Warunek na klasie `.ma-pagecraft` (inc/pagecraft.php), więc arkusz nie musi nic wiedzieć
   o wtyczce, a strony bez dokumentu zachowują się dokładnie jak dotąd. */
.pgc-doc-tresc { width: 100%; }

/* Bez dokumentu marginesu nie ruszamy — to jest wyłącznie o stronach PageCrafta. */
.ma-pagecraft main > .pgc-doc-tresc > *:first-child { margin-top: 0; }
.ma-pagecraft main > .pgc-doc-tresc > *:last-child { margin-bottom: 0; }