/*
Theme Name: WOZZ
Theme URI: https://wozz.poznan.pl/
Author: WOZZ
Author URI: https://wozz.poznan.pl/
Description: Autorski motyw rodzica WordPress dla Wielkopolskiego Okręgowego Związku Żeglarskiego. Układ: nagłówek, treść, stopka. Szablony: strona główna, lista wpisów (siatka kart), wpis, strona, 404. Ustawienia w Wygląd → Dostosuj → Motyw WOZZ.
Version: 1.9.3
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wozz
*/

/* --------------------------------------------------
   0. Font Bree Serif (lokalnie, bez Google Fonts — licencja OFL,
      assets/fonts/bree-serif/OFL.txt). Ten sam font co na wozz.poznan.pl.
-------------------------------------------------- */
@font-face {
	font-family: "Bree Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( "assets/fonts/bree-serif/bree-serif-latin-ext.woff2" ) format( "woff2" );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bree Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( "assets/fonts/bree-serif/bree-serif-latin.woff2" ) format( "woff2" );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------
   1. Zmienne i reset
-------------------------------------------------- */
:root {
	--color-primary: #0b3d59;
	--color-primary-dark: #072a3d;
	--color-accent: #2ea3f2;
	--color-accent-dark: #0c71c3;
	/* Kolor tekstu linków i przycisków: kontrast 5,1:1 na białym (WCAG AA).
	   Jasny błękit marki (--color-accent) zostaje w elementach ozdobnych. */
	--color-link: #0c71c3;
	--color-bg: #ffffff;
	--color-bg-alt: #f5f7f9;
	--color-text: #666666;
	--color-heading: #333333;
	--color-text-light: #ffffff;
	--color-border: #e0e4e8;
	--container-width: 1200px;
	--container-narrow: 860px;
	--radius: 3px;
	--shadow-soft: 0 6px 24px rgba( 11, 61, 89, 0.08 );
	--shadow-strong: 0 14px 34px rgba( 11, 61, 89, 0.16 );
	--font-base: "Bree Serif", Georgia, "Times New Roman", serif;
}

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

html {
	scroll-behavior: smooth;
	/* Kotwice (np. /#kontakt) nie chowają się pod przyklejonym nagłówkiem. */
	scroll-padding-top: 90px;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var( --font-base );
	font-size: 16px;
	line-height: 1.7;
	color: var( --color-text );
	background-color: var( --color-bg );
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var( --font-base );
	/* Bree Serif ma tylko odmianę 400 — bez sztucznego pogrubiania. */
	font-weight: 400;
	line-height: 1.25;
	color: var( --color-heading );
}

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

a {
	color: var( --color-link );
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

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

:focus-visible {
	outline: 2px solid var( --color-accent );
	outline-offset: 2px;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.container--narrow {
	max-width: var( --container-narrow );
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
}

.skip-link {
	position: absolute;
	top: -50px;
	left: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var( --color-primary );
	color: var( --color-text-light );
}

.skip-link:focus {
	top: 0;
}

/* --------------------------------------------------
   1a. Przyciski
   Efekt najechania jak w przyciskach Divi na wozz.poznan.pl: tekst
   przesuwa się w lewo, a z prawej pojawia się strzałka "›".
-------------------------------------------------- */
.button,
.homepage-tiles .tiles-label {
	position: relative;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

.button::after,
.homepage-tiles .tiles-label::after {
	content: "\203A";
	position: absolute;
	top: 50%;
	right: 0.7em;
	font-size: 1.5em;
	line-height: 1;
	opacity: 0;
	transform: translate( -0.4em, -54% );
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45em 1.4em;
	border: 2px solid var( --color-link );
	border-radius: var( --radius );
	background: transparent;
	color: var( --color-link );
	font-family: var( --font-base );
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

.button:hover,
.button:focus {
	padding-left: 1em;
	padding-right: 2.2em;
	background-color: var( --color-link );
	color: var( --color-text-light );
}

.button:hover::after,
.button:focus::after,
.homepage-tiles .tiles a:hover .tiles-label::after,
.homepage-tiles .tiles a:focus .tiles-label::after {
	opacity: 1;
	transform: translate( 0, -54% );
}

.button--light {
	border-color: var( --color-text-light );
	color: var( --color-text-light );
}

.button--light:hover,
.button--light:focus {
	background-color: var( --color-text-light );
	color: var( --color-primary );
}

/* --------------------------------------------------
   2. Nagłówek
-------------------------------------------------- */
.site-header {
	background-color: var( --color-bg );
	color: var( --color-text );
	box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.1 );
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.4s ease-in-out;
}

.admin-bar .site-header {
	top: 32px;
}

.site-header.is-scrolled {
	box-shadow: 0 0 7px rgba( 0, 0, 0, 0.1 );
}

/* Z JavaScriptem nagłówek unosi się nad treścią (fixed), a jego miejsce
   zajmuje .site-header-spacer o stałej wysokości rozwiniętego nagłówka
   (mierzonej w assets/js/navigation.js). Chowanie logo przy przewijaniu nie
   zmienia wtedy układu strony — bez tego nagłówek „pulsował” (skurczenie
   podciągało treść, pozycja przewinięcia spadała pod próg, logo wracało…).
   Wartości domyślne zmiennej to przybliżenie na czas przed pomiarem. */
:root {
	--wozz-header-height: 170px;
}

.js .site-header {
	position: fixed;
	left: 0;
	right: 0;
}

.site-header-spacer {
	height: var( --wozz-header-height );
}

.no-js .site-header-spacer {
	display: none;
}

/* Pasek komunikatów chowa się razem z logo przy przewijaniu. */
.site-header.is-scrolled .notice-bar {
	display: none;
}

.site-header__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding-block: 1.25rem 0.5rem;
	gap: 0.5rem;
}

.hero-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 90px;
	opacity: 1;
	overflow: hidden;
	transition: height 0.4s ease-in-out, opacity 0.3s ease-in-out;
}

.site-header.is-scrolled .hero-container {
	height: 0;
	opacity: 0;
	pointer-events: none;
}

.logo-container {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	height: 100%;
}

.hero-container .site-title {
	display: flex;
	align-items: center;
	margin: 0;
	line-height: 0;
}

.hero-container .custom-logo-link {
	display: block;
}

/* Poziome logo tekstowe WOZŻ (790×40) — naturalna wysokość, zmniejszane
   proporcjonalnie na wąskich ekranach. */
.hero-container .custom-logo {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

.main-navigation > ul > li {
	position: relative;
}

.main-navigation a {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	color: rgba( 0, 0, 0, 0.6 );
	text-transform: uppercase;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var( --color-link );
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
	color: var( --color-link );
}

/* Podmenu wysuwane jak w oryginale (Divi): biały panel z niebieską krechą,
   płynne wysunięcie i zanikanie — przy otwieraniu i zamykaniu. Zamiast
   display: none używamy visibility/opacity/transform, bo tylko one dają się
   animować; ukryte pozycje (visibility: hidden) nie łapią fokusu klawiatury. */
.main-navigation .sub-menu {
	display: flex;
	flex-direction: column;
	/* Pozycje do lewej, na pełną szerokość panelu (nie środkowane jak w menu głównym). */
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 240px;
	padding: 0.75rem 0;
	background-color: var( --color-bg );
	border-top: 3px solid var( --color-accent );
	box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.12 );
	text-align: left;
	visibility: hidden;
	opacity: 0;
	transform: translateY( 10px );
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

/* Podmenu trzeciego poziomu — wysuwane w bok. */
.main-navigation .sub-menu .sub-menu {
	top: calc( -0.75rem - 3px );
	left: 100%;
}

@keyframes wozz-fade-in {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.main-navigation .sub-menu a {
	display: block;
	width: 100%;
	padding: 0.6rem 1.25rem;
	text-transform: none;
	letter-spacing: normal;
	color: var( --color-text );
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
	background-color: var( --color-bg-alt );
	color: var( --color-link );
}

.main-navigation .menu-item-has-children {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .is-open > .sub-menu,
.main-navigation .sub-menu.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.main-navigation .sub-menu .menu-item-has-children {
	flex-wrap: nowrap;
	justify-content: space-between;
}

@media ( prefers-reduced-motion: reduce ) {
	.main-navigation .sub-menu {
		transform: none;
		transition: none;
	}
}

.sub-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-left: -0.5rem;
	background: none;
	border: 0;
	color: rgba( 0, 0, 0, 0.6 );
	cursor: pointer;
}

.sub-menu-toggle::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.15s ease;
}

.sub-menu-toggle[aria-expanded="true"]::after {
	transform: rotate( -135deg );
}

.menu-toggle {
	display: none;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: 0;
	color: var( --color-heading );
	font-family: var( --font-base );
	font-size: 1rem;
	text-transform: uppercase;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

/* Ikona "hamburger" — trzy kreski budowane z jednego elementu. */
.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var( --color-accent );
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.menu-toggle__icon {
	position: relative;
}

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

.menu-toggle__icon::before {
	top: -7px;
}

.menu-toggle__icon::after {
	top: 7px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
	background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
	transform: translateY( 7px ) rotate( 45deg );
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
	transform: translateY( -7px ) rotate( -45deg );
}

/* --------------------------------------------------
   3. Elementy wspólne sekcji
-------------------------------------------------- */
.site-content {
	min-height: 40vh;
}

.section-title {
	position: relative;
	margin: 0 0 2.5rem;
	padding-bottom: 1rem;
	font-size: clamp( 1.75rem, 3vw, 2.25rem );
	text-align: center;
}

/* Krótka niebieska kreska pod tytułem sekcji. */
.section-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 60px;
	height: 3px;
	border-radius: 2px;
	background-color: var( --color-accent );
	transform: translateX( -50% );
}

/* Separator-fala (inline SVG z inc/template-tags.php → wozz_wave()).
   Kolor fali = `color` elementu, domyślnie tło strony. */
.wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 2;
	height: clamp( 28px, 5vw, 70px );
	line-height: 0;
	color: var( --color-bg );
	pointer-events: none;
}

.wave svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wave--flip {
	top: -1px;
	bottom: auto;
	transform: rotate( 180deg );
}

/* Łagodne pojawianie się elementów przy przewijaniu (assets/js/effects.js).
   Aktywne tylko z JavaScriptem (klasa "js" na <html>). */
.js [data-reveal] {
	opacity: 0;
	transform: translateY( 24px );
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

.js .card[data-reveal] {
	transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.js [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------
   3a. Strona główna — wyróżnione wydarzenie
-------------------------------------------------- */
.featured-event {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 60vh;
	padding-block: 5rem;
	background-color: var( --color-primary-dark );
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: var( --color-text-light );
}

.featured-event::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, rgba( 7, 42, 61, 0.85 ) 0%, rgba( 7, 42, 61, 0.45 ) 60%, rgba( 7, 42, 61, 0.15 ) 100% );
}

.featured-event__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.featured-event__label {
	margin: 0;
	padding: 0.2em 0.8em;
	border-radius: 999px;
	background-color: var( --color-link );
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.featured-event__title {
	max-width: 18ch;
	margin: 0;
	font-size: clamp( 2rem, 5vw, 3.5rem );
	color: var( --color-text-light );
}

.featured-event__text {
	max-width: 56ch;
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

/* --------------------------------------------------
   3b. Strona główna — kafelki
-------------------------------------------------- */
.homepage-tiles {
	position: relative;
	padding-block: 4rem calc( 4rem + 50px );
	background-color: var( --color-primary );
	background-image: url( "assets/images/bckg_blue.jpg" );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.homepage-tiles .tiles {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2.5rem 3rem;
}

.homepage-tiles .tiles li {
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 2.5rem;
	text-align: center;
}

.homepage-tiles .tiles a {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 1.5rem;
	color: var( --color-text-light );
}

/* Grafika kafelka pochodzi z grafiki wyróżniającej strony/wpisu, do którego
   prowadzi dana pozycja menu (patrz front-page.php). Zawsze kwadrat, żeby
   siatka była równa niezależnie od proporcji wgranego pliku. */
.homepage-tiles .tiles-thumb {
	display: block;
	width: 100%;
	max-width: 240px;
	aspect-ratio: 1 / 1;
	transition: transform 0.4s ease;
}

.homepage-tiles .tiles a:hover .tiles-thumb,
.homepage-tiles .tiles a:focus .tiles-thumb {
	transform: scale( 1.04 );
}

.homepage-tiles .tiles-thumb__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.homepage-tiles .tiles-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc( 2 * 1.125rem * 1.6 + 2 * 0.4em );
	margin-top: auto;
	padding: 0.4em 1em;
	border: 2px solid currentColor;
	border-radius: var( --radius );
	font-size: 1.125rem;
	line-height: 1.6;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.homepage-tiles .tiles a:hover .tiles-label,
.homepage-tiles .tiles a:focus .tiles-label {
	padding-left: 0.7em;
	padding-right: 2em;
	background-color: rgba( 255, 255, 255, 0.15 );
}

/* --------------------------------------------------
   3c. Strona główna — najnowsze wpisy
-------------------------------------------------- */
.homepage-news {
	padding-block: 4rem;
}

.homepage-news__more {
	margin: 2.5rem 0 0;
	text-align: center;
}

/* --------------------------------------------------
   3d. Karty wpisów (Aktualności, archiwa, strona główna)
   Siatka jak w module bloga na wozz.poznan.pl/aktualnosci/.
-------------------------------------------------- */
.cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2rem;
}

.card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --color-border );
	border-radius: 4px;
	background-color: var( --color-bg );
	box-shadow: var( --shadow-soft );
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover,
.card:focus-within {
	border-color: transparent;
	box-shadow: var( --shadow-strong );
}

.card__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: var( --color-bg-alt );
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.card:hover .card__img,
.card:focus-within .card__img {
	transform: scale( 1.05 );
}

/* Wpis bez grafiki wyróżniającej — niebieski gradient zamiast pustego pola. */
.card__img--placeholder {
	display: block;
	background: linear-gradient( 135deg, var( --color-primary ) 0%, var( --color-accent ) 100% );
}

.card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem 1.5rem 1.5rem;
}

/* Data i kategoria karty ukryte w całym serwisie — tylko wizualnie:
   czytniki ekranu nadal odczytują datę (kartka z kalendarza na zdjęciu
   jest w linku ukrytym przed nimi). */
.card__meta {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.card__title {
	margin: 0;
	font-size: 1.25rem;
}

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

.card__title a:hover,
.card__title a:focus {
	color: var( --color-link );
}

.card__excerpt {
	font-size: 0.9375rem;
}

.card__excerpt p {
	margin: 0;
}

.card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.card__more::after {
	content: "\203A";
	font-size: 1.3em;
	line-height: 1;
	transition: transform 0.3s ease;
}

.card__more:hover::after,
.card__more:focus::after {
	transform: translateX( 4px );
}

/* --------------------------------------------------
   3e. Pas „Wspierają nas” (template-parts/supporters.php)
   Partnerzy + Partnerzy medialni obok siebie (logotypy zawsze w kolorze), pod nimi pasek finansowania
   na białej karcie. Logotypy o wyrównanej „wadze wizualnej” (wysokość
   z --logo-h liczona w wozz_partner_logos()).
-------------------------------------------------- */
.supporters {
	position: relative;
	padding-block: calc( 3rem + 40px ) 3.5rem;
	background-color: var( --color-bg-alt );
}

.supporters .section-title {
	margin-bottom: 2rem;
}

.supporters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.supporters__group,
.supporters__funding-card {
	border: 1px solid var( --color-border );
	border-radius: 6px;
	background-color: var( --color-bg );
	box-shadow: var( --shadow-soft );
}

.supporters__group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem 1.5rem 1.5rem;
}

.supporters__group--partners {
	flex: 2 1 480px;
}

.supporters__group--media {
	flex: 1 1 260px;
}

/* Mała etykieta grupy zamiast dużego nagłówka. */
.supporters__label {
	margin: 0;
	color: #6b6b6b;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.supporters__logos {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	gap: 1.25rem 2rem;
}

.supporters__logos li {
	display: flex;
	align-items: center;
}

.supporters__logos a {
	display: block;
	border-radius: 4px;
}

.supporters__logos img {
	width: auto;
	height: var( --logo-h, 56px );
	max-width: 100%;
	transition: transform 0.3s ease;
}

.supporters__logos a:hover img,
.supporters__logos a:focus img,
.supporters__logos li:hover img {
	transform: scale( 1.06 );
}

/* Finansowanie: pełny pasek w kolorze (bez rozcinania i odbarwiania). */
.supporters__funding {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

.supporters__funding-card {
	width: 100%;
	max-width: 760px;
	padding: 1rem 1.5rem;
}

.supporters__img {
	display: block;
	width: 100%;
	height: auto;
	margin-inline: auto;
}

.supporters__blocks .wp-block-gallery {
	margin: 0;
}

/* Fala nad pasem (kolor poprzedniej, białej sekcji) i nad kontaktem
   (kolor tła pasa). */
.supporters__wave {
	color: var( --color-bg );
}

.site-contact__wave {
	color: var( --color-bg-alt );
}

@media ( max-width: 560px ) {
	.supporters__group {
		padding: 1rem;
	}

	.supporters__logos {
		gap: 1rem 1.5rem;
	}

	.supporters__logos img {
		height: calc( var( --logo-h, 56px ) * 0.75 );
	}

	.supporters__funding-card {
		padding: 0.75rem;
	}
}

/* --------------------------------------------------
   3f. Kontakt (#kontakt) — pełnoekranowa sekcja z paralaksą,
   jak na wozz.poznan.pl (tło "sail.jpg" z przyciemnieniem).
-------------------------------------------------- */
.site-contact {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: calc( 4rem + 50px ) 1.25rem 4rem;
	background-color: var( --color-primary-dark );
	background-image: url( "assets/images/kontakt-tlo.jpg" );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var( --color-text-light );
	text-align: center;
}

/* Przyciemnienie zdjęcia dla lepszej czytelności tekstu. */
.site-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 7, 42, 61, 0.25 ) 0%, rgba( 7, 42, 61, 0.55 ) 100% );
}

.site-contact__inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.35 );
}

.site-contact__inner p {
	margin: 0 0 1.5rem;
}

.site-contact__inner p:last-child {
	margin-bottom: 0;
}

.site-contact__org {
	font-size: 1.25rem;
	line-height: 1.8;
}

.site-contact a {
	color: var( --color-text-light );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-contact a:hover,
.site-contact a:focus {
	color: var( --color-accent );
}

/* --------------------------------------------------
   3g. Nagłówek podstron (wozz_page_hero())
-------------------------------------------------- */
.page-hero {
	position: relative;
	padding-block: 4.5rem calc( 4rem + 40px );
	background-color: var( --color-primary );
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: var( --color-text-light );
	text-align: center;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 7, 42, 61, 0.55 ) 0%, rgba( 7, 42, 61, 0.35 ) 100% );
}

.page-hero__inner {
	position: relative;
	z-index: 1;
}

.page-hero__title {
	margin: 0;
	font-size: clamp( 1.75rem, 4vw, 2.75rem );
	color: var( --color-text-light );
	text-shadow: 0 2px 6px rgba( 0, 0, 0, 0.3 );
}

.page-hero__subtitle {
	margin-top: 0.75rem;
	color: rgba( 255, 255, 255, 0.88 );
}

.page-hero__subtitle p {
	margin: 0;
}

.page-hero .entry-meta {
	margin: 0;
	font-size: 0.9375rem;
	color: rgba( 255, 255, 255, 0.88 );
}

.page-hero a {
	color: var( --color-text-light );
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.4 );
	text-underline-offset: 3px;
}

.page-hero a:hover,
.page-hero a:focus {
	text-decoration-color: currentColor;
}

/* --------------------------------------------------
   3h. Treść wpisów i stron
-------------------------------------------------- */
.content-area.container {
	padding-block: 3rem 4rem;
}

.entry-meta__sep {
	margin-inline: 0.35em;
	opacity: 0.6;
}

.entry-thumbnail {
	margin-bottom: 2rem;
}

.entry-thumbnail img {
	margin-inline: auto;
	border-radius: 4px;
	box-shadow: var( --shadow-soft );
}

.entry-content {
	font-size: 1.0625rem;
}

.entry-content--intro {
	margin-bottom: 2.5rem;
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content p {
	margin: 0 0 1.25em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin: 1.8em 0 0.6em;
}

.entry-content h2 {
	font-size: 1.75rem;
}

.entry-content h3 {
	font-size: 1.375rem;
}

.entry-content h4 {
	font-size: 1.125rem;
}

.entry-content a {
	text-decoration: underline;
	text-decoration-color: rgba( 46, 163, 242, 0.4 );
	text-underline-offset: 3px;
}

.entry-content a:hover,
.entry-content a:focus {
	text-decoration-color: currentColor;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.25em;
	padding-left: 1.5em;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-bottom: 0.35em;
}

.entry-content li::marker {
	color: var( --color-accent );
}

.entry-content blockquote {
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	border-left: 4px solid var( --color-accent );
	border-radius: 0 4px 4px 0;
	background-color: var( --color-bg-alt );
	color: var( --color-heading );
	font-size: 1.125rem;
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 0.5em;
	font-size: 0.875rem;
	font-style: normal;
	color: var( --color-text );
}

.entry-content table {
	width: 100%;
	margin: 0 0 1.5em;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.entry-content th,
.entry-content td {
	padding: 0.6em 0.8em;
	border: 1px solid var( --color-border );
	text-align: left;
	vertical-align: top;
}

.entry-content th,
.entry-content thead td {
	background-color: var( --color-primary );
	color: var( --color-text-light );
	font-weight: 400;
}

.entry-content tbody tr:nth-child( even ) {
	background-color: var( --color-bg-alt );
}

.entry-content .wp-block-table {
	overflow-x: auto;
	margin: 0 0 1.5em;
}

.entry-content figure {
	margin: 0 0 1.5em;
}

.entry-content img {
	border-radius: 4px;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
	margin-top: 0.5em;
	font-size: 0.875rem;
	color: #6b6b6b;
	text-align: center;
}

.entry-content .aligncenter {
	margin-inline: auto;
}

.entry-content .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.entry-content .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.entry-content .alignwide {
	margin-inline: calc( ( var( --container-narrow ) - var( --container-width ) ) / 4 );
	max-width: none;
}

.entry-content .alignfull {
	margin-inline: calc( 50% - 50vw );
	max-width: 100vw;
	width: 100vw;
}

.entry-content .wp-block-gallery img,
.entry-content .gallery img {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.entry-content .wp-block-gallery a:hover img,
.entry-content .gallery a:hover img {
	transform: scale( 1.03 );
	box-shadow: var( --shadow-strong );
}

.entry-content .wp-block-button__link {
	padding: 0.5em 1.4em;
	border: 2px solid var( --color-link );
	border-radius: var( --radius );
	background-color: var( --color-link );
	color: var( --color-text-light );
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus {
	background-color: transparent;
	color: var( --color-link );
}

.entry-content .is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var( --color-link );
}

.entry-content hr {
	margin: 2.5em auto;
	border: 0;
	border-top: 1px solid var( --color-border );
}

.entry-content pre,
.entry-content code {
	font-family: Consolas, Monaco, monospace;
	font-size: 0.9em;
}

.entry-content pre {
	overflow-x: auto;
	padding: 1em;
	border-radius: 4px;
	background-color: var( --color-bg-alt );
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

.page-links {
	margin-top: 2rem;
}

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.entry-tags a {
	display: inline-block;
	padding: 0.2em 0.8em;
	border: 1px solid var( --color-border );
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var( --color-text );
}

.entry-tags a:hover,
.entry-tags a:focus {
	border-color: var( --color-link );
	color: var( --color-link );
}

/* Nawigacja poprzedni/następny wpis. */
.post-navigation {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var( --color-border );
}

.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	flex: 1 1 280px;
}

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

.post-navigation a {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	height: 100%;
	padding: 1rem 1.25rem;
	border: 1px solid var( --color-border );
	border-radius: 4px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.post-navigation a:hover,
.post-navigation a:focus {
	border-color: var( --color-accent );
	box-shadow: var( --shadow-soft );
}

.post-navigation .nav-subtitle {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6b6b;
}

.post-navigation .nav-title {
	color: var( --color-heading );
}

/* Paginacja list wpisów. */
.pagination {
	margin-top: 3rem;
}

/* Lista z paginate_links( type=list ) — bez punktów listy z .entry-content ul
   (stronicowanie list wpisów w treści stron) i bez stylu „przycisku”,
   bo sam <ul> też ma klasę page-numbers. */
.pagination ul,
.entry-content .pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination li {
	margin: 0;
}

.pagination li::marker {
	content: none;
}

.pagination a.page-numbers,
.pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border: 1px solid var( --color-border );
	border-radius: var( --radius );
	color: var( --color-text );
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

.pagination .page-numbers.current {
	border-color: var( --color-link );
	background-color: var( --color-link );
	color: var( --color-text-light );
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* Formularz wyszukiwania i formularze komentarzy. */
.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 480px;
	margin: 1.5rem auto;
}

.search-form label {
	flex: 1;
}

.search-form .search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.65em 0.9em;
	border: 1px solid var( --color-border );
	border-radius: var( --radius );
	background-color: var( --color-bg );
	font-family: inherit;
	font-size: 1rem;
	color: var( --color-heading );
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-form .search-field:focus,
.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var( --color-accent );
	box-shadow: 0 0 0 3px rgba( 46, 163, 242, 0.2 );
	outline: 0;
}

.search-form .search-submit,
.comment-form .submit {
	padding: 0.65em 1.4em;
	border: 0;
	border-radius: var( --radius );
	background-color: var( --color-link );
	color: var( --color-text-light );
	font-family: inherit;
	font-size: 1rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus,
.comment-form .submit:hover,
.comment-form .submit:focus {
	background-color: var( --color-primary );
}

.no-results,
.error-404 {
	text-align: center;
}

.comments-area {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var( --color-border );
}

.comment-list {
	margin: 0 0 2rem;
}

.comment-list .children {
	margin-left: 1.5rem;
}

.comment-body {
	margin-bottom: 1.25rem;
	padding: 1.25rem;
	border-radius: 4px;
	background-color: var( --color-bg-alt );
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
}

.comment-author .avatar {
	display: inline-block;
	margin-right: 0.5rem;
	border-radius: 50%;
	vertical-align: middle;
}

/* --------------------------------------------------
   3i. Pasek komunikatów
-------------------------------------------------- */
.notice-bar {
	background-color: var( --color-primary );
	color: var( --color-text-light );
	font-size: 0.9375rem;
}

.notice-bar__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 0.5rem;
}

.notice-bar__text {
	flex: 1;
	margin: 0;
	text-align: center;
}

.notice-bar__link {
	margin-left: 0.5rem;
	color: var( --color-text-light );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.notice-bar__link:hover,
.notice-bar__link:focus {
	color: var( --color-text-light );
	opacity: 0.8;
}

.notice-bar__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var( --color-text-light );
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.notice-bar__close:hover,
.notice-bar__close:focus {
	background-color: rgba( 255, 255, 255, 0.15 );
}

/* --------------------------------------------------
   3j. Pasek menu i wyszukiwarka w nagłówku
-------------------------------------------------- */
.site-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.search-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: rgba( 0, 0, 0, 0.6 );
	cursor: pointer;
	transform: translateY( -50% );
	transition: color 0.2s ease, background-color 0.2s ease;
}

.search-toggle:hover,
.search-toggle:focus,
.search-toggle[aria-expanded="true"] {
	background-color: var( --color-bg-alt );
	color: var( --color-link );
}

.header-search {
	padding-block: 1rem;
	border-top: 1px solid var( --color-border );
	background-color: var( --color-bg-alt );
	animation: wozz-fade-in 0.2s ease-out;
}

.header-search[hidden] {
	display: none;
}

.header-search .search-form {
	margin: 0 auto;
}

/* --------------------------------------------------
   3k. Sekcja z liczbami (liczniki) — jasne koło z delikatnym obrysem
   - element = koło z cienkim obrysem,
   - ::after  = drugi, cienki obrys w niewielkim odstępie.
   Rozmiar sterowany zmienną --stat-size.
-------------------------------------------------- */
.homepage-stats {
	padding-block: 3rem 2rem;
}

.stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 2.5rem;
	--stat-size: 160px;
}

.stats__item {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var( --stat-size );
	height: var( --stat-size );
	margin: 6px;
	padding: 1rem;
	border: 1px solid rgba( 46, 163, 242, 0.35 );
	border-radius: 50%;
	background-color: var( --color-bg );
	text-align: center;
}

/* Delikatny drugi obrys. */
.stats__item::after {
	content: "";
	position: absolute;
	inset: -7px;
	border: 1px solid rgba( 46, 163, 242, 0.18 );
	border-radius: 50%;
	pointer-events: none;
}

.stats__number {
	font-size: clamp( 1.875rem, 3.2vw, 2.25rem );
	line-height: 1.05;
	color: var( --color-primary );
	font-variant-numeric: tabular-nums;
}

.stats__label {
	max-width: 88%;
	margin-top: 0.35rem;
	color: var( --color-heading );
	font-size: 0.8125rem;
	line-height: 1.3;
}

@media ( max-width: 560px ) {
	.stats {
		gap: 1.25rem 1rem;
		--stat-size: 130px;
	}

	.stats__item {
		padding: 0.75rem;
	}

	.stats__number {
		font-size: 1.625rem;
	}

	.stats__label {
		font-size: 0.75rem;
	}
}

/* --------------------------------------------------
   3l. Odliczanie w banerze wydarzenia
-------------------------------------------------- */
.countdown__date {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
	opacity: 0.9;
}

.countdown__units {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.countdown__units li {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4.5rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 6px;
	background-color: rgba( 255, 255, 255, 0.12 );
	backdrop-filter: blur( 4px );
}

.countdown__value {
	font-size: 2rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.countdown__label {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.85;
}

.countdown.is-finished .countdown__units {
	display: none;
}

/* --------------------------------------------------
   3m. „Kartka z kalendarza”, znaczek „Nowe”, kalendarz imprez
-------------------------------------------------- */
.date-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 3.5rem;
	padding: 0.4rem 0.5rem 0.35rem;
	border-top: 4px solid var( --color-accent );
	border-radius: 4px;
	background-color: var( --color-bg );
	color: var( --color-heading );
	line-height: 1;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.18 );
}

.date-badge__day {
	font-size: 1.5rem;
	color: var( --color-link );
}

.date-badge__month {
	margin-top: 0.2rem;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.card__thumb {
	position: relative;
}

.card__date {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
}

.card__new {
	position: absolute;
	top: 0.9rem;
	right: 0.75rem;
	z-index: 1;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	background-color: #c62828;
	color: var( --color-text-light );
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
}

.card__place {
	margin: 0;
	color: var( --color-heading );
	font-size: 0.875rem;
}

.card__place::before {
	content: "";
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.45rem;
	border-radius: 50%;
	background-color: var( --color-accent );
	vertical-align: 0.05em;
}

.events {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.event {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var( --color-border );
	border-radius: 4px;
	background-color: var( --color-bg );
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.event:hover,
.event:focus-within {
	border-color: transparent;
	box-shadow: var( --shadow-strong );
}

.event__date {
	flex: 0 0 auto;
	min-width: 4.75rem;
	padding-block: 0.6rem 0.5rem;
	border-top: 0;
	background-color: var( --color-link );
	color: var( --color-text-light );
	box-shadow: none;
}

.event__date .date-badge__day {
	font-size: 2rem;
	color: var( --color-text-light );
}

.event--past {
	opacity: 0.75;
}

.event--past .event__date {
	background-color: #6b6b6b;
}

.event__body {
	flex: 1;
	min-width: 0;
}

.event__title {
	margin: 0 0 0.35rem;
	font-size: 1.375rem;
}

.event__title a {
	color: var( --color-heading );
}

.event__title a:hover,
.event__title a:focus {
	color: var( --color-link );
}

.event__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 1rem;
	margin: 0 0 0.5rem;
	color: var( --color-heading );
	font-size: 0.9375rem;
}

.event__status {
	padding: 0.05em 0.6em;
	border-radius: 999px;
	background-color: var( --color-bg-alt );
	color: #6b6b6b;
	font-size: 0.75rem;
	text-transform: uppercase;
}

.event__excerpt p {
	margin: 0 0 0.5rem;
}

/* --------------------------------------------------
   3n. Okruszki nawigacyjne (w nagłówku podstron)
-------------------------------------------------- */
.breadcrumbs {
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: rgba( 255, 255, 255, 0.85 );
}

.breadcrumbs li + li::before {
	content: "\203A";
	margin-right: 0.5rem;
	opacity: 0.7;
}

.page-hero .breadcrumbs a {
	color: var( --color-text-light );
	text-decoration: none;
}

.page-hero .breadcrumbs a:hover,
.page-hero .breadcrumbs a:focus {
	text-decoration: underline;
}

/* --------------------------------------------------
   3o. Układ treści z menu bocznym sekcji
-------------------------------------------------- */
.content-layout {
	padding-block: 3rem 4rem;
}

.content-layout > .content-area {
	min-width: 0;
}

.has-section-nav {
	display: flex;
	align-items: flex-start;
	gap: 3rem;
}

.has-section-nav > .content-area {
	flex: 1;
}

.content-sidebar {
	position: sticky;
	top: 80px;
	flex: 0 0 280px;
}

.section-nav {
	overflow: hidden;
	border: 1px solid var( --color-border );
	border-radius: 4px;
	background-color: var( --color-bg );
	box-shadow: var( --shadow-soft );
}

.section-nav__title {
	margin: 0;
	background-color: var( --color-primary );
}

.section-nav__title a {
	display: block;
	padding: 0.9rem 1.25rem;
	color: var( --color-text-light );
	font-size: 1.125rem;
}

.section-nav__title a:hover,
.section-nav__title a:focus {
	color: var( --color-text-light );
	background-color: var( --color-primary-dark );
}

.section-nav ul {
	padding-block: 0.5rem;
}

.section-nav ul ul {
	padding: 0 0 0 1rem;
}

.section-nav li a {
	display: block;
	padding: 0.5rem 1.25rem;
	border-left: 3px solid transparent;
	color: var( --color-text );
	font-size: 0.9375rem;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.section-nav li a:hover,
.section-nav li a:focus {
	background-color: var( --color-bg-alt );
	color: var( --color-link );
}

.section-nav .current_page_item > a {
	border-left-color: var( --color-accent );
	background-color: var( --color-bg-alt );
	color: var( --color-link );
}

/* --------------------------------------------------
   3p. Udostępnianie i powiązane wpisy
-------------------------------------------------- */
.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

.share__title {
	margin: 0;
	color: var( --color-heading );
}

.share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.share__link {
	display: inline-flex;
	align-items: center;
	padding: 0.35em 1em;
	border: 1px solid var( --color-border );
	border-radius: 999px;
	background-color: var( --color-bg );
	color: var( --color-heading );
	font-family: inherit;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.share__link:hover,
.share__link:focus {
	border-color: var( --color-link );
	background-color: var( --color-link );
	color: var( --color-text-light );
}

.share__link--facebook:hover,
.share__link--facebook:focus {
	border-color: #1877f2;
	background-color: #1877f2;
}

.related-posts {
	padding-block: 1rem 4rem;
}

/* --------------------------------------------------
   3q. Mapa dojazdu w sekcji kontaktu
-------------------------------------------------- */
.site-contact__map {
	margin-top: 2rem;
}

.site-contact__map-btn {
	font-size: 0.9375rem;
}

.site-contact__map-note {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	opacity: 0.85;
}

.site-contact__map-frame {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.35 );
}

/* --------------------------------------------------
   3r. Powiększanie zdjęć (lightbox)
-------------------------------------------------- */
html.has-lightbox {
	overflow: hidden;
}

.lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: rgba( 0, 0, 0, 0.92 );
	color: var( --color-text-light );
}

.lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: wozz-fade-in 0.2s ease-out;
}

.lightbox::backdrop {
	background-color: rgba( 0, 0, 0, 0.6 );
}

.lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 3.5rem 4.5rem;
}

.lightbox__img {
	width: auto;
	max-width: calc( 100vw - 9rem );
	height: auto;
	max-height: calc( 100vh - 9rem );
	object-fit: contain;
	border-radius: 2px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.5 );
}

.lightbox__caption {
	margin-top: 0.75rem;
	max-width: 60ch;
	text-align: center;
	font-size: 0.9375rem;
	opacity: 0.9;
}

.lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba( 255, 255, 255, 0.12 );
	color: var( --color-text-light );
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.lightbox__btn:hover,
.lightbox__btn:focus {
	background-color: rgba( 255, 255, 255, 0.28 );
}

.lightbox__btn[hidden] {
	display: none;
}

.lightbox__close {
	top: 1rem;
	right: 1rem;
}

.lightbox__prev,
.lightbox__next {
	top: 50%;
	transform: translateY( -50% );
}

.lightbox__prev {
	left: 1rem;
}

.lightbox__next {
	right: 1rem;
}

.lightbox__counter {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	margin: 0;
	font-size: 0.875rem;
	opacity: 0.8;
	transform: translateX( -50% );
}

.entry-content a[href$=".jpg"] img,
.entry-content a[href$=".jpeg"] img,
.entry-content a[href$=".png"] img,
.entry-content a[href$=".webp"] img {
	cursor: zoom-in;
}

/* --------------------------------------------------
   4. Stopka
-------------------------------------------------- */
.site-footer__columns {
	padding-block: 3rem 2rem;
	color: #bbbbbb;
	font-size: 0.9375rem;
}

.site-footer__columns-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 3rem;
}

.site-footer__col {
	flex: 1 1 220px;
}

.site-footer__heading {
	position: relative;
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	color: var( --color-text-light );
	font-size: 1.125rem;
}

.site-footer__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 2px;
	background-color: var( --color-accent );
}

.site-footer__col p {
	margin: 0 0 1rem;
}

.site-footer__columns a {
	color: #dddddd;
}

.site-footer__columns a:hover,
.site-footer__columns a:focus {
	color: var( --color-accent );
}

.site-footer__links li {
	margin-bottom: 0.5rem;
}

.site-footer__links a::before {
	content: "\203A";
	margin-right: 0.5rem;
	color: var( --color-accent );
}

.site-footer__logo-wrap {
	margin-top: 1.5rem;
}

.site-footer__logo {
	width: auto;
	max-width: 180px;
	max-height: 80px;
}

.site-footer__privacy {
	margin: 0;
	font-size: 0.875rem;
}

.site-footer__privacy a {
	color: #999999;
}
.site-footer {
	background-color: #222222;
	color: var( --color-text-light );
}

.site-footer__nav {
	background-color: rgba( 255, 255, 255, 0.05 );
}

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 1.5rem;
	padding-block: 1rem;
	text-align: center;
}

.site-footer__menu a {
	display: inline-block;
	padding: 0.25rem 0;
	color: #bbbbbb;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus {
	color: #bbbbbb;
	opacity: 0.7;
}

.site-footer__menu .current-menu-item > a,
.site-footer__menu .current_page_item > a {
	color: var( --color-accent );
}

.site-footer__bottom {
	background-color: rgba( 0, 0, 0, 0.32 );
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 1rem 0.75rem;
}

.site-footer__info {
	margin: 0;
	color: #999999;
	font-size: 0.875rem;
}

.site-footer__social {
	display: flex;
	gap: 1.25rem;
}

.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #999999;
	transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.site-footer__social a:hover,
.site-footer__social a:focus {
	color: var( --color-accent );
	transform: translateY( -2px );
}

/* Przycisk "wróć na górę" (assets/js/effects.js). */
.back-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var( --color-link );
	color: var( --color-text-light );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.25 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 12px );
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.back-to-top:hover,
.back-to-top:focus {
	background-color: var( --color-primary );
	color: var( --color-text-light );
}

/* Bez JavaScriptu przycisk jest zwykłą kotwicą, widoczną zawsze. */
.no-js .back-to-top {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* --------------------------------------------------
   5. Responsywność
-------------------------------------------------- */

/* Paralaksa (background-attachment: fixed) na urządzeniach dotykowych
   i małych ekranach działa źle (iOS ją ignoruje i rozciąga zdjęcie),
   więc tam tło przewija się razem ze stroną. */
@media ( max-width: 1024px ), ( hover: none ) {
	.homepage-tiles,
	.site-contact,
	.page-hero,
	.featured-event {
		background-attachment: scroll;
	}
}

@media ( max-width: 900px ) {
	.homepage-tiles .tiles,
	.cards {
		grid-template-columns: repeat( 2, 1fr );
	}

	.has-section-nav {
		flex-direction: column;
		gap: 2rem;
	}

	.content-sidebar {
		position: static;
		order: -1;
		flex-basis: auto;
		width: 100%;
	}
}

@media ( max-width: 782px ) {
	.admin-bar .site-header {
		top: 46px;
	}

	:root {
		--wozz-header-height: 130px;
	}

	.hero-container {
		height: 60px;
	}

	.menu-toggle {
		display: inline-flex;
		order: 1;
	}

	.main-navigation {
		display: none;
		width: 100%;
		order: 3;
		max-height: calc( 100vh - 140px );
		overflow-y: auto;
	}

	.main-navigation.is-open {
		display: block;
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: stretch;
	}

	.main-navigation > ul > li {
		border-top: 1px solid var( --color-border );
	}

	.main-navigation .menu-item-has-children {
		justify-content: space-between;
		width: 100%;
	}

	.main-navigation .menu-item-has-children > a {
		flex: 1;
	}

	.main-navigation .menu-item-has-children:hover > .sub-menu,
	.main-navigation .menu-item-has-children:focus-within > .sub-menu {
		display: none;
	}

	.main-navigation .menu-item-has-children.is-open > .sub-menu {
		display: flex;
	}

	.main-navigation .sub-menu {
		position: static;
		width: 100%;
		padding: 0 0 0 1rem;
		border-top: 0;
		border-left: 3px solid var( --color-accent );
		background-color: var( --color-bg-alt );
		box-shadow: none;
		/* Na telefonie akordeon pod strzałką — zwykłe pokaż/ukryj, bez wysuwania. */
		display: none;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.sub-menu-toggle {
		width: 2.75rem;
		height: 2.75rem;
	}

	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		margin: 0 auto 1em;
	}

	.entry-content .alignwide {
		margin-inline: 0;
	}

	.site-header__bar {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.search-toggle {
		position: static;
		order: 2;
		transform: none;
	}
}

@media ( max-width: 560px ) {
	.homepage-tiles .tiles,
	.cards {
		grid-template-columns: 1fr;
	}

	.homepage-tiles .tiles li {
		padding: 1rem 2rem;
	}

	.site-footer__bottom-inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.search-form {
		flex-direction: column;
	}

	.back-to-top {
		right: 0.75rem;
		bottom: 0.75rem;
	}

	.event {
		gap: 1rem;
		padding: 1rem;
	}

	.event__date {
		min-width: 3.75rem;
	}

	.event__date .date-badge__day {
		font-size: 1.5rem;
	}

	.countdown__units li {
		min-width: 3.75rem;
	}

	.lightbox__figure {
		padding: 3.5rem 0.5rem;
	}

	.lightbox__img {
		max-width: calc( 100vw - 1rem );
	}

	.lightbox__prev,
	.lightbox__next {
		top: auto;
		bottom: 0.5rem;
		transform: none;
	}
}

/* --------------------------------------------------
   6. Wydruk (np. zawiadomienia o regatach)
   Bez menu, stopki, tła i elementów interaktywnych; adresy linków
   dopisywane w nawiasie.
-------------------------------------------------- */
@media print {
	.notice-bar,
	.site-header,
	.site-header-spacer,
	.site-footer,
	.back-to-top,
	.share,
	.related-posts,
	.post-navigation,
	.comments-area,
	.content-sidebar,
	.wave,
	.breadcrumbs,
	.header-search,
	.site-contact__map,
	.lightbox,
	.skip-link {
		display: none !important;
	}

	body {
		background: #ffffff;
		color: #000000;
		font-size: 12pt;
	}

	.page-hero {
		padding: 0 0 1rem;
		background: none !important;
		color: #000000;
		text-align: left;
	}

	.page-hero::before {
		display: none;
	}

	.page-hero__title,
	.page-hero .entry-meta,
	.page-hero a {
		color: #000000;
		text-shadow: none;
	}

	.js [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

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

	.content-layout,
	.content-area.container {
		padding-block: 0;
	}

	.entry-content a[href^="http"]::after {
		content: " (" attr( href ) ")";
		color: #555555;
		font-size: 0.85em;
		word-break: break-all;
	}

	.entry-content th,
	.wp-block-table.is-style-wozz-results th {
		background: #eeeeee !important;
		color: #000000 !important;
	}

	img {
		box-shadow: none !important;
	}

	table,
	figure,
	img,
	.wp-block-file {
		page-break-inside: avoid;
	}

	h2,
	h3,
	h4 {
		page-break-after: avoid;
	}
}