/*!
Theme Name: Fundacja Werbeo
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: fundacja-werbeo
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Fundacja Werbeo is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 1. IMPORT FONTÓW LOKALNYCH (GOTHAM)
--------------------------------------------------------------*/
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap; /* WCAG/Wydajność: Przeglądarka pokaże tekst zastępczy zanim załaduje Gotham */
}

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*--------------------------------------------------------------
# PALETA BARW I ZMIENNE Z PROJEKTU GRAFICZNEGO (ADOBE XD)
--------------------------------------------------------------*/
:root {
  /* Kolory z projektu */
  --background-color: #F2F1ED;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-brand-green: #68C794;
  --color-dark-green: #042A2D;
  --color-medium-green: #0C956C;
  --color-dark-gray: #0F0F0F;

  /* WCAG: Domyślne mapowanie kolorów dla ułatwienia pracy */
  --bg-color: var(--background-color);
  --text-color: var(--color-black);
  --link-color: var(--color-brand-green);
  --focus-outline: 3px solid var(--color-brand-green);
}

/* Nadpisanie kolorów dla trybu wysokiego kontrastu (WCAG) */
html.high-contrast {
  --bg-color: #000000;
  --text-color: #ffff00; 
  --link-color: #00ffff; 
  --focus-outline: 3px dashed #ffff00;
}

html.high-contrast .btn-support {
  background-color: transparent;
  border: 2px solid var(--text-color);
  color: var(--text-color) !important;
}

/*--------------------------------------------------------------
# TYPOGRAFIA I STYLE TEKSTOWE (PRZELICZONE Z PX NA REM)
--------------------------------------------------------------*/
.brblock {
  display: block;
}

/* Główny nagłówek na stronie (H1) - dawne 66px */
.hero-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 4.125rem;
  line-height: 1.1;
  color: var(--color-black);
}

/* Średnie nagłówki sekcji (H2 / H3) - dawne 48px */
.section-title-green {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.15;
  color: var(--color-brand-green);
}
.section-title-black {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.15;
  color: var(--color-black);
}

/* Mniejsze nagłówki w sekcjach (dawne 31px / 32px) */
.subsection-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.3;
  color: var(--color-black);
}

/* --- TEKST CZYTELNICZY (PARAGRAFY) --- */

/* Standardowy tekst ciemny (dawne 16px / linia 35px) */
.text-body-dark {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2.1875rem; /* Zachowujemy dużą, czytelną interlinię grafika pod WCAG */
  color: var(--color-dark-gray);
}

/* Standardowy tekst jasny (na ciemne sekcje) */
.text-body-light {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2.1875rem;
  color: var(--color-white);
}

/* Tekst delikatny / lżejszy (Light 300) - dawne 16px */
.text-body-light-300 {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 2rem;
  color: var(--color-white);
}

/* Większy tekst wprowadzający (Lead) - dawne 20px */
.text-lead {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 2.4375rem;
  color: var(--color-black);
}

.color-brand {
  color: var(--color-brand-green);
}

.color-white {
  color: var(--color-white) !important;
}

.ftbold {
  font-weight: 700;
}

.no-break {
  white-space: nowrap;
}

.mt-4 {
  margin-top: 4rem;
}
/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--text-color);
	font-family: "Gotham", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

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

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  position: absolute;
  top: -99999px;                /* Wyrzucenie linku daleko poza widoczny ekran */
  left: 0;
  width: 1px;                   /* Posiada fizyczny wymiar, więc NVDA go nie pominie */
  height: 1px;
  overflow: hidden;
  opacity: 0;                   /* Przezroczysty, niewidoczny dla oczu */
  display: inline-block;        /* Zachowuje zachowanie elementu klikalnego */
}

/* Wygląd w momencie, gdy użytkownik kliknie pierwszy raz TAB */
.skip-link:focus {
  top: 1.25rem !important;      /* Wskakuje na górną pozycję (20px) */
  left: 1.25rem !important;     /* Odsuwa się od lewej krawędzi (20px) */
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;        /* Staje się w pełni widoczny */
  background-color: #ffffff !important;
  border: 3px solid #042A2D !important;
  border-radius: 0.5rem !important;
  color: #042A2D !important;
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.5rem !important;
  z-index: 999999 !important;   /* Bezwzględny wierzch */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Dedykowane style Fundacji
--------------------------------------------------------------*/

/* Globalne nadpisanie kolorów i tła body z Underscores */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

/* Perfekcyjnie widoczny focus dla użytkowników klawiatury (WCAG) */
a:focus, 
button:focus {
  outline: var(--focus-outline) !important;
  outline-offset: 4px;
}

/* 1. Reset fioletowego koloru – link odwiedzony ma taki sam kolor jak zwykły link */
a:visited {
  color: inherit; /* Przejmuje kolor swojego rodzica lub bazowego linku */
}

/* 2. Jeśli chcesz precyzyjnie kontrolować linki wewnątrz artykułów */
.post-entry-content a {
  color: #107A65;          /* Twój zielony akcent */
  text-decoration: underline; /* WCAG kocha podkreślenia linków w tekście dającym treść */
}

.post-entry-content a:visited {
  color: #042A2D;          /* Zamiast fioletu – elegancki ciemny odcień (opcjonalnie) */
}

.post-entry-content a:hover,
.post-entry-content a:focus {
  color: #107A65;
  text-decoration: none;
}

/* 3. Upewnij się, że w trybie wysokiego kontrastu WCAG wszystko nadal działa */
html.high-contrast a:visited {
  color: #ffffff !important; /* W kontraście wymuszamy czystą biel lub żółć */
}
html.high-contrast .post-entry-content a {
  color: #FFF200 !important;
  text-decoration: underline !important;
}

/*--------------------------------------------------------------
# UKŁAD NAGŁÓWKA (DESKTOP)
--------------------------------------------------------------*/

/* Główny pasek nagłówka */
.site-header {
  background-color: var(--bg-color);
  border-bottom: 1px solid #eeeeee;
  width: 100%;
}

.header-container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  row-gap: 0rem;
  column-gap: 2rem;
  max-width: 1820px;
  margin: 0 auto;
  padding: 1.5rem 20px;
}

/* --- LOGO I BRANDING --- */
.site-branding {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  margin-bottom: 0;
}

.site-branding a,
.site-branding img {
  display: block; 
}

.site-branding img {
  width: 250px;
  height: auto;
  flex-shrink: 0;
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.site-title a {
  color: var(--text-color);
  text-decoration: none;
}

.site-description {
  display: none; 
}

/* --- PRAWA STREFA (KONTAKT + MENU) --- */
.header-right-zone {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.header-contact-zone {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 24px !important;
  color: var(--text-color);
  text-decoration: none;
}

.header-phone:hover {
  color: var(--color-brand-green);
}

/* Blokada rozmiaru telefonu */
html .site-header .header-contact-zone a.header-phone span,
html.ts-medium .site-header .header-contact-zone a.header-phone span,
html.ts-large .site-header .header-contact-zone a.header-phone span {
  font-size: 16px !important;
}

html .site-header .header-contact-zone a.header-phone svg,
html.ts-medium .site-header .header-contact-zone a.header-phone svg,
html.ts-large .site-header .header-contact-zone a.header-phone svg {
  width: 34px !important;
  height: 34px !important;
}

.icon-phone {
  fill: var(--color-brand-green);
}

.btn-support {
  display: inline-block;
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  text-decoration: none;
  background-color: var(--color-medium-green);
  color: var(--color-white) !important;
  padding: 0.8rem 1.8rem;
  border-radius: 30px;
  transition: opacity 0.2s ease;
}

.btn-support:hover {
  opacity: 0.9;
}

/* --- MENU GŁÓWNE --- */
.main-navigation {
  grid-column: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: auto; 
  padding-right: 2rem;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0rem;
}

.nav-menu > li {
  display: flex;
  align-items: center;
  padding: 1.125rem 1.75rem;
  transition: background-color 0.2s ease;
  border: 3px solid transparent; 
  border-radius: 22px; 
}

.nav-menu > li > a {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--text-color);
  text-decoration: none;
  padding: 0;
  display: inline-block;
  transition: color 0.2s ease;
  user-select: none;
}

.nav-menu a,
.nav-menu .dropdown-toggle {
  cursor: pointer !important;
}

.nav-menu > li > a:hover {
  color: var(--color-brand-green);
}

.menu-toggle {
  display: none;
}

/* Aktywna zakładka */
.nav-menu > li.current-menu-item,
.nav-menu > li.current-menu-ancestor {
  background-color: #93E6B9;
  border-radius: 22px; 
}

.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-ancestor > a {
  color: #000000;
  text-shadow: 0.5px 0 0 #000000, -0.5px 0 0 #000000;
}

/* --- OBSŁUGA PODMENU (DROPDOWN) --- */
.menu-item-has-children {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.25rem;
  cursor: pointer;
  color: var(--color-dark-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dropdown-toggle:hover {
  color: var(--color-brand-green);
}

.icon-arrow {
  transition: transform 0.2s ease;
  fill: currentColor;
}

.menu-item-has-children.is-open .icon-arrow {
  transform: rotate(180deg);
}

.dropdown-toggle:focus {
  outline: 2px solid var(--link-color) !important;
  outline-offset: 2px;
}

.main-navigation ul ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 0.75rem 0;
  margin: 0;
  list-style: none;
  z-index: 99999;
}

.sub-menu li a {
  display: block;
  padding: 0.5rem 1.5rem;
  font-family: "Gotham", sans-serif;
  font-size: 0.9rem;
  color: var(--text-color);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.sub-menu li a:hover {
  background-color: #f9f9f9;
  color: var(--color-brand-green);
}

.menu-item-has-children:hover .sub-menu,
.menu-item-has-children.is-open .sub-menu {
  display: block;
}

/*--------------------------------------------------------------
# DOSTĘPNOŚĆ (WCAG) I TOOLBAR - ZWYKŁY TRYB
--------------------------------------------------------------*/
.a11y-toolbar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.a11y-toolbar button {
  font-family: "Gotham", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  color: var(--text-color);
}

.a11y-toolbar button span {
  font-weight: 300;
}

/* Wspólne style dla przycisków dostępności w zwykłym trybie */
.contrast-toggle,
.text-zoom-toggle {
  background-color: var(--color-dark-gray);
  color: #000000 !important; /* Czarna czcionka w trybie domyślnym */
  font-weight: 300;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

/* Wymuszenie czarnego koloru dla wszystkich spanów wewnątrz przycisków */
.contrast-toggle span,
.text-zoom-toggle span {
  color: #000000 !important;
  transition: color 0.2s;
}

/* Efekt HOVER i FOCUS - przyciski zmieniają tło na zielone, a tekst i spany na biały */
.contrast-toggle:hover,
.contrast-toggle:focus,
.text-zoom-toggle:hover,
.text-zoom-toggle:focus {
  background-color: var(--color-brand-green);
  color: #ffffff !important;
}

.contrast-toggle:hover span,
.contrast-toggle:focus span,
.text-zoom-toggle:hover span,
.text-zoom-toggle:focus span {
  color: #ffffff !important;
}

/* Unikalne style dla contrast-toggle */
.contrast-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}

.icon-contrast {
  width: 20px;
  height: 20px;
  fill: none;
  transition: fill 0.2s ease, transform 0.2s ease;
}

/* Domyślny wygląd ikonki w zwykłym trybie (prawa strona czarna) */
.icon-contrast .part-right {
  fill: #000000;
  transition: fill 0.2s;
}

.icon-contrast .part-left {
  fill: transparent;
}

/* Zmiana koloru ikonki na biały, gdy najeżdżamy na przycisk kontrastu */
.contrast-toggle:hover .icon-contrast .part-right,
.contrast-toggle:focus .icon-contrast .part-right {
  fill: #ffffff !important;
}

.contrast-toggle:hover .icon-contrast {
  transform: rotate(15deg);
}

/* Powiększanie tekstu */
html {
  font-size: 100%;
  scrollbar-gutter: stable;
}

html.ts-medium {
  font-size: 115%; 
}

html.ts-large {
  font-size: 130%;
}

html.ts-medium .nav-menu { gap: 0rem; }
html.ts-medium .nav-menu > li { padding: 1rem 1rem; }

html.ts-large .nav-menu { gap: 0rem; }
html.ts-large .nav-menu > li { padding: 0.8rem 0.5rem; }


/*--------------------------------------------------------------
# WYSOKI KONTRAST (HIGH CONTRAST)
--------------------------------------------------------------*/
html.high-contrast .nav-menu > li.current-menu-item,
html.high-contrast .nav-menu > li.current-menu-ancestor {
  background-color: transparent !important;
  border: 3px solid var(--text-color) !important;
}

html.high-contrast .nav-menu > li.current-menu-item > a,
html.high-contrast .nav-menu > li.current-menu-ancestor > a {
  color: var(--text-color) !important; 
  font-weight: 700;
}

html.high-contrast .main-navigation ul ul.sub-menu {
  background-color: var(--bg-color) !important;
  border: 2px solid var(--text-color) !important;
}

html.high-contrast .sub-menu li a {
  color: var(--text-color) !important;
  background: transparent !important;
}

html.high-contrast .sub-menu li a:hover,
html.high-contrast .sub-menu li a:focus {
  color: var(--bg-color) !important;
  background-color: var(--text-color) !important;
}

html.high-contrast .sub-menu li.current-menu-item a {
  text-decoration: underline !important;
  font-weight: 700;
}

/* Toolbar w wysokim kontraście */
html.high-contrast .text-zoom-toggle,
html.high-contrast .contrast-toggle {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  border: 2px solid var(--text-color) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

html.high-contrast .text-zoom-toggle:hover,
html.high-contrast .text-zoom-toggle:focus,
html.high-contrast .contrast-toggle:hover,
html.high-contrast .contrast-toggle:focus {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
  cursor: pointer;
}

html.high-contrast .text-zoom-toggle:hover span,
html.high-contrast .text-zoom-toggle:focus span,
html.high-contrast .contrast-toggle:hover span,
html.high-contrast .contrast-toggle:focus span {
  color: var(--bg-color) !important; /* W wysokim kontraście --bg-color to czarny */
}

html.high-contrast .contrast-toggle[aria-pressed="true"] {
  background-color: var(--text-color) !important; 
  color: var(--bg-color) !important;
  border-style: dashed !important;
}

html.high-contrast .contrast-toggle[aria-pressed="true"] span {
  color: var(--bg-color) !important;
}

html.high-contrast .contrast-toggle[aria-pressed="true"] .icon-contrast .part-right {
  fill: var(--bg-color) !important; 
}

html.high-contrast .icon-contrast .part-right {
  fill: var(--text-color) !important;
}

html.high-contrast .icon-contrast .part-left {
  fill: transparent !important;
}

html.high-contrast .contrast-toggle:hover .icon-contrast .part-right,
html.high-contrast .contrast-toggle:focus .icon-contrast .part-right {
  fill: var(--bg-color) !important;
}

.contrast-toggle:focus {
  outline: 3px dashed var(--text-color);
  outline-offset: 2px;
}

/* Menu border radius & hover w wysokim kontraście */
html.high-contrast .nav-menu > li:not(.menu-item-has-children):hover,
html.high-contrast .nav-menu > li:not(.menu-item-has-children) > a:focus {
  outline: none !important;
  border: 3px dashed var(--text-color) !important;
  background-color: var(--bg-color) !important;
  border-radius: 22px !important;
}

html.high-contrast .nav-menu > li.menu-item-has-children:hover,
html.high-contrast .nav-menu > li.menu-item-has-children:focus-within {
  border: 3px dashed var(--text-color) !important;
  background-color: var(--bg-color) !important;
  border-radius: 22px;
}

/* 1. Przerywana ramka wokół numeru telefonu w wysokim kontraście */
html.high-contrast .header-phone {
  padding: 4px 8px;
  border-radius: 4px;
  transition: border-color 0.2s;
}

/* Opcjonalnie: zmiana koloru ramki i tekstu telefonu na hover w wysokim kontraście, jeśli chcesz podkreślić interakcję */
html.high-contrast .header-phone:hover,
html.high-contrast .header-phone:focus {
  border: 3px dashed var(--text-color) !important;
  padding: 0.8rem 0.5rem;
  border-radius: 22px;
  border-color: var(--text-color) !important;
  background-color: transparent !important; /* Pozostaje przezroczyste, zmienia się tylko ramka/tekst */
}

/* 2. Przycisk "Telefoniczne wsparcie" w trybie wysokiego kontrastu (stan domyślny) */
html.high-contrast .btn-support {
  background-color: var(--bg-color) !important; /* Czarne tło */
  color: var(--text-color) !important;       /* Żółty tekst */
  border: 2px solid var(--text-color) !important;
}

/* Zmiana podświetlenia przycisku wsparcia na hover i focus (odwrócenie kolorów) */
html.high-contrast .btn-support:hover,
html.high-contrast .btn-support:focus {
  background-color: var(--text-color) !important; /* Żółte tło */
  color: var(--bg-color) !important;             /* Czarny tekst */
  opacity: 1 !important;                         /* Reset przezroczystości ze zwykłego trybu */
}

/*--------------------------------------------------------------
# RESPONSIVE & MOBILE DESIGN (MEDIA QUERIES)
--------------------------------------------------------------*/

@media screen and (max-width: 1200px) {
  .header-container {
    align-items: center;
    padding: 1rem 20px;
  }

  .site-branding img {
    width: 200px;
  }

  .header-phone {
    font-size: 20px !important;
  }
  
  html .site-header .header-contact-zone a.header-phone svg {
    width: 28px !important;
    height: 28px !important;
  }

  .btn-support {
    padding: 0.6rem 1.4rem;
    font-size: 0.9rem;
  }

  .nav-menu > li {
    padding: 0.8rem 1rem;
  }
}

/* Przełączenie na pełny układ mobilny */
@media screen and (max-width: 992px) {
  .header-container {
    grid-template-columns: 1fr auto; /* Logo po lewej, hamburger po prawej */
    align-items: center;
    position: relative;
  }

  .header-right-zone {
    grid-column: 2;
  }

  /* Ukrycie strefy kontaktu z poziomu rzędu desktopowego */
  .header-contact-zone {
    display: none; 
  }
  
  .a11y-toolbar {
    margin-bottom: 2rem;
  }

  /* STYLOWANIE PRZYCISKU MENU (HAMBURGER) */
  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent !important;
    border: 2px solid var(--color-medium-green);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    z-index: 100000;
    position: relative;
  }

  .menu-toggle-text {
    font-family: "Gotham", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-color);
  }

  /* Konstrukcja kresek hamburgera w CSS */
  .hamburger-box {
    display: inline-block;
    width: 20px;
    height: 14px;
    position: relative;
  }

  .hamburger-inner,
  .hamburger-inner::before,
  .hamburger-inner::after {
    width: 20px;
    height: 2px;
    background-color: var(--color-medium-green);
    position: absolute;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .hamburger-inner {
    top: 50%;
    left: -3px;
    transform: translateY(-50%);
  }

  .hamburger-inner::before {
    content: "";
    top: -6px;
    left: 3px;
  }

  .hamburger-inner::after {
    content: "";
    bottom: -6px;
    left: 3px;
  }

  /* Animacja hamburgera do krzyżyka (X) przy aktywacji menu */
  .menu-toggle[aria-expanded="true"] .hamburger-inner {
    background-color: transparent;
  }

  .menu-toggle[aria-expanded="true"] .hamburger-inner::before {
    transform: rotate(45deg) translate(4px, 4px);
  }

  .menu-toggle[aria-expanded="true"] .hamburger-inner::after {
    transform: rotate(-45deg) translate(4px, -4px);
  }

  /* MOBILNY PANEL MENU (KONTENER OVERLAY) */
  .main-navigation {
    margin-right: 0;
    padding-right: 0;
  }

  .nav-menu-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-color);
    z-index: 9999;
    padding: 6rem 2rem 2rem 2rem;
    box-sizing: border-box;
    overflow-y: auto;
  }

  /* Gdy menu jest otwarte (klasa dodawana przez JS) */
  .main-navigation.is-open .nav-menu-container {
    display: block;
  }

  .nav-menu {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 1rem;
  }

  .nav-menu > li {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.5rem;
  }

  .nav-menu > li > a {
    font-size: 1.25rem;
    width: 100%;
  }

  /* Ukrywamy zbędne przyciski strzałek na urządzeniach mobilnych */
  .main-navigation .dropdown-toggle {
    display: none !important;
  }

  /* Zmiana przepływu dla pozycji posiadających podmenu */
  .menu-item-has-children {
    flex-direction: column;
    align-items: flex-start;
  }

  /* WYMUSZENIE STAŁEGO ROZWINIĘCIA PODMENU (ZGODNIE Z WCAG AA) */
  .main-navigation ul ul.sub-menu {
    display: block !important;    /* Stała widoczność bez konieczności klikania */
    position: static !important;   /* Powrót do naturalnego układu jeden pod drugim */
    width: 100% !important;
    box-shadow: none !important;
    background-color: rgba(0, 0, 0, 0.03) !important; /* Subtelne tło strukturalne */
    padding: 0.5rem 0 0.5rem 1rem !important;        /* Wcięcie budujące hierarchię */
    margin: 0.5rem 0 0 0 !important;
    border-left: 2px solid var(--color-medium-green); /* Pionowa linia pomocnicza */
  }

  /* Elementy wewnątrz stałego podmenu mobilnego */
  .sub-menu li {
    width: 100%;
    padding: 0 !important;
  }

  .sub-menu li a {
    display: block;
    padding: 0.75rem 1rem !important;
    font-size: 1.05rem !important; /* Wielkość optymalna dla ekranów dotykowych */
    color: var(--text-color) !important;
    white-space: normal !important; /* Zapobiega ucinaniu tekstu przy dużym zoomie czcionki */
  }
}

@media screen and (max-width: 480px) {
  .site-branding img {
    width: 160px;
  }
  
  .a11y-toolbar {
    gap: 0.25rem;
  }
  
  .contrast-toggle,
  .text-zoom-toggle {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }
}

/*--------------------------------------------------------------
# MOBILNE WCAG / WYSOKI KONTRAST
--------------------------------------------------------------*/
html.high-contrast .menu-toggle {
  border: 2px solid var(--text-color) !important;
  background-color: var(--bg-color) !important;
}

html.high-contrast .menu-toggle-text {
  color: var(--text-color) !important;
}

html.high-contrast .hamburger-inner,
html.high-contrast .hamburger-inner::before,
html.high-contrast .hamburger-inner::after {
  background-color: var(--text-color) !important; /* Wszystkie kreski stają się żółte/kontrastowe */
}

html.high-contrast .nav-menu-container {
  background-color: var(--bg-color) !important;
  /* border: 2px solid var(--text-color) !important; */
}

html.high-contrast .menu-toggle:focus-visible {
  outline: 3px dashed var(--text-color) !important;
  outline-offset: 2px;
}

/*--------------------------------------------------------------
# 12. STRUKTURA I STYLIZACJA STOPKI (footer.php)
--------------------------------------------------------------*/
.site-footer {
  background-color: #042A2D;
  border-radius: 1.875rem;       /* Górne narożniki zaokrąglone o 30px */
  max-width: 1780px;            /* KOREKTA: 1820px minus 40px (po 20px z każdej strony), aby idealnie licować z treścią headera */
  width: calc(100% - 2.5rem);   /* Szerokość pomniejszona o 40px (2.5rem) dla mniejszych ekranów */
  margin: 0 auto 3rem auto;     /* Centrowanie na ekranie + dolny odstęp */
}

/* Układ 3 kolumn wewnątrz stopki */
.footer-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;                    /* 64px */
  padding: 4rem 3.125rem;       /* 64px góra/dół oraz Twój oryginalny boczny padding 50px dla zawartości wewnątrz tła */
}

.footer-block {
  display: flex;
  flex-direction: column;
}

/* Kolumna 1: Logo */
.footer-logo-zone img {
  height: auto;
  display: block;
}

/* Kolumna 2: Adres i dane rejestrowe */
.footer-contact-details {
  font-family: "Gotham", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;              /* 16px */
  line-height: 2.5;
  color: var(--color-white);    /* Biały tekst czytelny na ciemnym tle */
}

.footer-contact-details .company-name {
  font-weight: 700;
  letter-spacing: 0.0313rem;    /* 0.5px */
}

/* Ikony społecznościowe */
.footer-social-icons {
  display: flex;
  gap: 1.25rem;                 /* 20px */
  margin-top: 1.5rem;           /* 24px */
}

.social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;                /* 40px */
  height: 2.5rem;               /* 40px */
  color: var(--color-white);
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-icon-link svg {
  width: 2.25rem;               /* 36px */
  height: 2.25rem;              /* 36px */
  fill: currentColor;
}

.social-icon-link:hover {
  color: var(--color-brand-green);
  transform: translateY(-0.125rem); /* -2px */
}

/* Kolumna 3: Szybki kontakt */
.footer-heading {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;           /* 20px */
  margin: 0 0 1.25rem 0;        /* 20px */
  color: var(--color-white);
}

.footer-direct-contact {
  font-style: normal;
  line-height: 2;
}

.footer-contact-link {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 2rem;              /* 32px */
  color: var(--color-white);
  transition: color 0.2s ease;
}

.footer-mail-link {
  color: var(--color-brand-green);
}

.footer-contact-link:hover {
  color: var(--color-brand-green);
}

/* --- DOLNY PASEK STOPKI (Wszelkie prawa / Polityka) --- */
.footer-bottom-bar {
  background-color: transparent;
}

.footer-bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3.125rem;     /* 24px góra/dół oraz 50px boki */
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 0.875rem;          /* 14px */
  color: rgba(255, 255, 255, 0.7);
}

.footer-legal-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-link:hover {
  color: var(--color-brand-green);
  text-decoration: underline;
}

/* Responsywność dla mniejszych ekranów */
@media screen and (max-width: 1024px) {
  .site-footer {
    border-radius: 0;           /* Na pełnym ekranie mobile rezygnujemy z zaokrągleń boków */
    margin: 0 1.25rem;          /* 20px */
    width: calc(100% - 2.5rem); /* 40px */
  }
  .footer-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;                 /* 40px */
    padding: 3rem 1.875rem;     /* 48px góra/dół oraz 30px boki */
  }
  .footer-bottom-container {
    flex-direction: column;
    gap: 1rem;                  /* 16px */
    text-align: center;
    padding: 1.5rem 1.875rem;   /* 24px góra/dół oraz 30px boki */
  }
}

/*--------------------------------------------------------------
# 13. ADAPTACJA STOPKI DLA TRYBU WYSOKIEGO KONTRASTU
--------------------------------------------------------------*/
html.high-contrast .site-footer {
  background-color: var(--bg-color) !important; /* Wymuszenie systemowej czerni WCAG */
  border: 2px solid var(--text-color);           /* Wyraziste obramowanie całego boxu w kontraście */
  border-radius: 1.875rem;
}

html.high-contrast .footer-bottom-bar {
  border-top: 1px solid var(--text-color);
}

html.high-contrast .footer-contact-details,
html.high-contrast .footer-heading,
html.high-contrast .footer-bottom-container {
  color: var(--text-color) !important;          /* Jaskrawy żółty dla tekstów */
}

html.high-contrast .footer-contact-link,
html.high-contrast .social-icon-link,
html.high-contrast .footer-legal-link {
  color: var(--link-color) !important;           /* Jaskrawy cyjan dla linków */
}

html.high-contrast .footer-contact-link:hover,
html.high-contrast .footer-contact-link:focus,
html.high-contrast .social-icon-link:hover,
html.high-contrast .social-icon-link:focus,
html.high-contrast .footer-legal-link:hover,
html.high-contrast .footer-legal-link:focus {
  color: var(--bg-color) !important;
  background-color: var(--text-color) !important;/* Pełne podświetlenie tła przy hover/focus */
  outline: none !important;
}

/* --- ZMIANA KOLORU IKON SOCIAL MEDIA W TRYBIE KONTRASTU --- */

/* 1. Stan spoczynku: Ikony i ich wewnętrzne ścieżki dostają kolor cyjanowy */
html.high-contrast .footer-social-icons .social-icon-link {
  color: var(--link-color) !important;
}
html.high-contrast .footer-social-icons .social-icon-link svg .cls-1 {
  fill: var(--link-color) !important;
  transition: fill 0.2s ease;
}

/* 2. Stan Hover / Focus: Po najechaniu myszką lub tabulacją tło linku robi się żółte, a ścieżka ikony czarna */
html.high-contrast .footer-social-icons .social-icon-link:hover,
html.high-contrast .footer-social-icons .social-icon-link:focus {
  background-color: var(--text-color) !important;
  outline: none !important;
}

html.high-contrast .footer-social-icons .social-icon-link:hover svg .cls-1,
html.high-contrast .footer-social-icons .social-icon-link:focus svg .cls-1 {
  fill: var(--bg-color) !important;
}

/*--------------------------------------------------------------
# 14. UNIWERSALNY BANER I OKRUSZKI (Jednostki REM)
--------------------------------------------------------------*/
.page-top-wrapper {
  max-width: 1820px;
  margin: 0 auto;
  width: 100%;
}

/* Stylizacja Okruszków */
.breadcrumbs-container {
  padding: 1.25rem 1.25rem 1.25rem 3.75rem;       /* 20px - idealne wyrównanie z zawartością headera */
}

.breadcrumbs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;                 /* 10px */
}

.breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  font-family: "Gotham", sans-serif;
  font-size: 1.25rem;          /* 20px */
  font-weight: 300;
}

.breadcrumbs-link {
  color: #666666;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs-link:hover {
  color: #042A2D;
  text-decoration: underline;
}

.breadcrumbs-separator {
  color: #999999;
  user-select: none;
}

.breadcrumbs-current {
  color: #042A2D;
  font-weight: 700;
}

/* Stylizacja Baneru ze zdjęciem */
.subpage-banner {
  position: relative;
  background-color: #042A2D;      /* Kolor rezerwowy, zanim załaduje się zdjęcie */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 1.875rem;       /* Górne i dolne narożniki zaokrąglone o 30px */
  
  /* Perfekcyjne wyrównanie i licowanie ze stopką */
  max-width: 1780px;            /* 1820px minus 40px bocznych marginesów */
  width: calc(100% - 2.5rem);   /* Identycznie jak w nowej stopce */
  margin: 0 auto 2.5rem auto;   /* Centrowanie na ekranie + 40px marginesu na dole */
  
  min-height: 28rem;          /* Sztywna minimalna wysokość 200px */
  display: flex;
  align-items: center;
  overflow: hidden;             /* Wymagane, aby overlay nie wylewał się poza zaokrąglenia */
}

/* Warstwa ściemniająca pod WCAG */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(4, 42, 45, 0); /* Ciemny kolor marki z 60% przezroczystości */
  z-index: 1;
}

.banner-content {
  position: relative;
  z-index: 2;                   /* Wyciągnięcie tekstu nad warstwę ściemniającą */
  padding: 3.75rem 8.75rem;    /* 60px góra/dół, 50px boki wewnątrz baneru */
}

.banner-title {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 4.125rem;          /* 66px */
  color: var(--color-white);
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Dodatkowa ochrona czytelności */
}

.banner-subtitle {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 4.125rem;          /* 66px */
  color: var(--color-brand-green);
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Dodatkowa ochrona czytelności */
}

/* Responsywność */
@media screen and (max-width: 1024px) {
  .subpage-banner {
    width: calc(100% - 2.5rem);
    margin-bottom: 1.875rem;     /* 30px */
  }
  .banner-content {
    padding: 2.5rem 1.25rem;     /* mniejszy padding na tabletach */
  }
  .banner-title {
    font-size: 2rem;            /* 32px */
  }
}

/*--------------------------------------------------------------
# 15. ADAPTACJA BANERU I OKRUSZKÓW DLA TRYBU WYSOKIEGO KONTRASTU
--------------------------------------------------------------*/
html.high-contrast .breadcrumbs-link {
  color: var(--link-color) !important;
}

html.high-contrast .breadcrumbs-link:hover,
html.high-contrast .breadcrumbs-link:focus {
  color: var(--bg-color) !important;
  background-color: var(--text-color) !important;
}

html.high-contrast .breadcrumbs-separator,
html.high-contrast .breadcrumbs-current {
  color: var(--text-color) !important;
}

html.high-contrast .subpage-banner {
  background-image: none !important; /* UKRYWAMY ZDJĘCIE W KONTRAŚCIE pod wymogi WCAG! */
  background-color: var(--bg-color) !important;
  border: 2px solid var(--text-color);
  border-radius: 0;             /* Surowy, geometryczny kształt w kontraście */
}

html.high-contrast .banner-overlay {
  display: none;                /* Ukrywamy overlay w kontraście */
}

html.high-contrast .banner-title {
  color: var(--text-color) !important;
}

/*--------------------------------------------------------------
# 16. KONTENER GŁÓWNY DLA TREŚCI PODSTRONY
--------------------------------------------------------------*/
.contact-page-main {
  max-width: 1780px;            /* 1820px minus 40px (po 20px marginesu na stronę) */
  width: calc(100% - 2.5rem);   /* Trzyma stałe 20px (1.25rem) od krawędzi ekranu na mniejszych monitorach */
  margin: 0 auto;               /* Centrowanie kontenera na ekranie */
  padding: 0 1.25rem;           /* Wewnętrzny bezpiecznik 20px dla elementów formularza */
}

/* Kontener siatki dla formularza i danych (jeśli grafik ma układ kolumnowy) */
.contact-grid-container {
  display: block;               /* Na tym etapie czysty blok, potem zmienimy na grid/flex wg makiety */
  width: 100%;
  padding-top: 3rem;            /* Odstęp od dolnej krawędzi baneru */
  padding-bottom: 5rem;         /* Odstęp od górnej krawędzi stopki */
}

/*--------------------------------------------------------------
# 17. UKŁAD SIATKI KONTAKTU (50% / 50%)
--------------------------------------------------------------*/
.contact-grid-container {
  display: flex;
  width: 100%;
  gap: 4rem;                    /* Odstęp między połówkami */
  padding-top: 3rem;
  padding-bottom: 5rem;
}

.contact-left-col,
.contact-right-col {
  width: 50%;
  display: flex;
  flex-direction: column;
}

/* Wyśrodkowanie prawej kolumny w pionie względem formularza */
.contact-right-col {
  justify-content: center;
}

/* Lewa strona: Zawężenie formularza do 3/4 połówki i przytulenie do środka */
.form-wrapper-inner {
  width: 75%;
  margin-left: auto;            /* Pcha kontener w prawo, do linii środkowej strony */
  margin-right: 0;
}

/*--------------------------------------------------------------
# 18. STYLIZACJA FORMULARZA (Białe tło, zaokrąglone rogi)
--------------------------------------------------------------*/
.form-main-heading {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 3rem;          
  color: var(--color-black);
  margin: 0 0 1.5rem 0;
}

.custom-contact-form {
  background-color: #ffffff;
  border-radius: 1.875rem;       /* Zaokrąglenie 30px wszystkich narożników */
  padding: 2.5rem;              /* Wewnętrzne światło w formularzu */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Subtelny cień pod makietę */
}

/* Pola tekstowe obok siebie */
.form-row-twin {
  display: flex;
  gap: 1.25rem;                 /* 20px przerwy między imieniem a mailem */
  margin-bottom: 1.25rem;
}

.form-row-twin .form-field-group {
  width: 50%;
  margin-bottom: 0;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

.field-label {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;         /* 15px */
  color: #333333;
  margin-bottom: 0.5rem;
}

.required-star {
  color: #c92a2a;
  margin-left: 0.125rem;
}

/* Uniwersalny styl dla Input i Textarea */
.form-input-field {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  padding: 0 1.25rem;            /* Padding boczny 20px, góra/dół na 0, bo wysokość blokujemy przez line-height/height */
  border: 1px solid #cccccc;
  border-radius: 1rem !important;
  background-color: #D8F2F1;     /* Nowy kolor tła z makiety grafika */
  color: var(--color-medium-green);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  -webkit-appearance: none;  /* Reset dla Safari / iOS */
  -moz-appearance: none;     /* Reset dla starszych wersji Firefox */
  appearance: none;          /* Standardowy reset */
}

/* Sztywna wysokość 56px (3.5rem) wyłącznie dla pól jednolinijkowych */
input.form-input-field {
  height: 3.5rem;               /* Dokładnie 56px wysokości */
  line-height: 3.5rem;
  padding-left: 1.25rem;         /* Odsunięcie tekstu od lewej krawędzi o 24px */
  padding-right: 1.25rem;        /* Odsunięcie tekstu od prawej krawędzi o 24px */
  border-radius: 1rem !important;
}


/* Specjalne traktowanie dla pola wiadomości */
textarea.form-input-field {
  padding: 1rem 1.25rem;         /* Wygodny padding dla tekstu wielolinijkowego */
  height: auto;                  /* Pozwalamy mu rosnąć wg parametru rows */
  min-height: 10rem;             /* Bezpieczna minimalna wysokość dla wiadomości */
}

/* Widoczny, kontrastowy Focus pod WCAG */
.form-input-field:focus {
  border-color: var(--color-medium-green);
  outline: 2px solid var(--color-medium-green);
  outline-offset: 1px;
  background-color: #ffffff;     /* Rozjaśnienie do bieli podczas pisania podnosi komfort UX */
}

.field-textarea {
  resize: vertical;             /* Pozwala użytkownikowi na rozciąganie tylko w pionie */
}

/*--------------------------------------------------------------
# 19. OKRĄGŁY CHECKBOX (Bezpieczny dla czytników)
--------------------------------------------------------------*/
.form-checkbox-wrapper {
  margin-bottom: 1.5rem;
  position: relative;
}

/* Ukrywamy fizyczny kwadracik, ale zostawiamy go dostępnego dla klawiatury */
.native-checkbox-hidden {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.checkbox-custom-label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 0.875rem;          /* 14px */
  line-height: 1.5;
  color: #444444;
  user-select: none;
}

/* Budowa okrągłego checkboxa przez pseudo-element */
.checkbox-custom-label::before {
  content: "";
  display: inline-block;
  min-width: 1.5rem;            /* 24px */
  height: 1.5rem;               /* 24px */
  border: 2px solid #cccccc;
  border-radius: 50%;           /* KLUCZ: Zamiana w idealne koło */
  margin-right: 0.875rem;
  background-color: #ffffff;
  margin-top: 0.125rem;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Wygląd zaznaczonego okrągłego checkboxa */
.native-checkbox-hidden:checked + .checkbox-custom-label::before {
  background-color: var(--color-medium-green);
  border-color: var(--color-medium-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 0.875rem;
  background-repeat: no-repeat;
  background-position: center;
}

/* Focus dla okrągłego checkboxa przy nawigacji tabulatorem */
.native-checkbox-hidden:focus + .checkbox-custom-label::before {
  outline: 2px solid var(--color-medium-green);
  outline-offset: 2px;
}

/* Obowiązek informacyjny */
.form-info-clause {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 0.75rem;           /* 12px kompaktowy tekst prawny */
  line-height: 1.6;
  color: #666666;
  margin-bottom: 1.5rem;
}

/* Przycisk wysyłki na pełną szerokość */
.btn-form-submit {
  width: 100%;
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;          /* 18px */
  color: #ffffff;
  background-color: var(--color-medium-green);
  border: none;
  border-radius: 1.5rem;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-form-submit:hover {
  background-color: var(--color-brand-green);
}

.btn-form-submit:focus {
  outline: 3px solid var(--color-medium-green);
  outline-offset: 2px;
}

/*--------------------------------------------------------------
# 20. PRAWA STRONA: LISTA DANYCH KONTAKTOWYCH
--------------------------------------------------------------*/
.info-wrapper-inner {
  padding-left: 2rem;           /* Oddech od środkowej linii strony */
}

.info-main-heading {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 3rem;           /* 36px */
  color: var(--color-black);
  margin: 0 0 2.5rem 0;
}

.info-main-subheading {
  color: var(--color-brand-green);
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;                    /* Odstępy pionowe między blokami danych */
}

.info-list-item {
  display: flex;
  align-items: center;          /* Wyrównanie ikony i tekstów w osi poziomej */
}

/* Strefa grafiki 62px */
.info-icon-zone {
  width: 3.875rem;              /* 62px przeliczone na rem */
  height: 3.875rem;             /* 62px przeliczone na rem */
  margin-right: 1.5rem;         /* Odstęp ikony od tekstów */
  flex-shrink: 0;               /* Blokada przed zgniataniem grafiki */
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-icon-zone img {
  width: 100%;
  height: auto;
  display: block;
}

.info-text-zone {
  display: flex;
  flex-direction: column;
  font-family: "Gotham", sans-serif;
  color: #333333;
}

.info-title {
  font-weight: 700;
  font-size: 1.125rem;          /* 18px */
  color: var(--color-black);
  margin-bottom: 0.25rem;
}

.info-details {
  font-weight: 300;
  font-size: 1rem;              /* 16px */
  line-height: 1.4;
}

.contact-clickable-link {
  color: var(--color-medium-green);
  text-decoration: none;
  font-weight: 400;
}

.contact-clickable-link:hover,
.contact-clickable-link:focus {
  text-decoration: underline;
  outline: none;
}

/*--------------------------------------------------------------
# 20.1 MINI-TABELA GODZIN PRACY
--------------------------------------------------------------*/
.hours-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                  /* Odstęp pionowy między dniami tygodnia */
  margin-top: 0.375rem;         /* Delikatny oddech od nagłówka "Godziny pracy" */
  width: 100%;
  max-width: 20rem;             /* Bezpieczna, sztywna szerokość tabelki (320px) */
}

.hours-row {
  display: flex;
  justify-content: space-between; /* Spycha dni na lewo, a godziny na prawo */
  align-items: center;
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1rem;              /* 16px */
  line-height: 1.4;
  color: #333333;
  border-bottom: 1px dashed #e0e0e0; /* Delikatna linia pomocnicza pod makietę */
  padding-bottom: 0.25rem;
}

/* Usunięcie linii pomocniczej z ostatniego wiersza */
.hours-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hours-day {
  padding-right: 1rem;          /* Bezpiecznik, żeby tekst nie dotknął godziny */
}

/* Kolumna godzin - to ona będzie idealnie licować w pionie */
.hours-time {
  font-weight: 400;             /* Nieco grubsza czcionka dla samych godzin */
  text-align: right;
  white-space: nowrap;          /* Blokada przed łamaniem godzin do nowej linii */
}

/* Wizualne osłabienie statusu "Nieczynne" pod projekt grafika */
.hours-time.status-closed {
  color: #888888;
  font-weight: 300;
  font-style: italic;
}

/*--------------------------------------------------------------
# 21. RESPONSYWNOŚĆ (MEDIA QUERIES)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .contact-grid-container {
    flex-direction: column;     /* Układ pionowy na tabletach i mobile */
    gap: 3rem;
    padding-top: 2rem;
  }
  .contact-left-col,
  .contact-right-col {
    width: 100%;                /* Pełna szerokość ekranu */
  }
  .form-wrapper-inner {
    width: 100%;                /* Rezygnujemy z 3/4 na mobile */
  }
  .info-wrapper-inner {
    padding-left: 0;            /* Kasujemy lewy margines */
  }
  .form-row-twin {
    flex-direction: column;     /* Imię i Email lądują jedno pod drugim */
    gap: 1.25rem;
  }
  .form-row-twin .form-field-group {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# 22. ADAPTACJA DLA TRYBU WYSOKIEGO KONTRASTU (WCAG)
--------------------------------------------------------------*/
html.high-contrast .custom-contact-form {
  background-color: var(--bg-color) !important;
  border: 2px solid var(--text-color);
  border-radius: 0;             /* Surowy kształt w kontraście */
  box-shadow: none;
}

html.high-contrast .form-main-heading,
html.high-contrast .info-main-heading,
html.high-contrast .field-label,
html.high-contrast .info-title,
html.high-contrast .info-details,
html.high-contrast .checkbox-text-content,
html.high-contrast .form-info-clause p {
  color: var(--text-color) !important; /* Wszystkie teksty na żółto */
}

html.high-contrast .form-input-field {
  background-color: var(--bg-color) !important;
  border: 2px solid var(--text-color);
  color: var(--text-color) !important;
  border-radius: 0;
}

html.high-contrast .form-input-field:focus {
  outline: 2px solid var(--link-color) !important;
}

/* Kontrastowy przycisk */
html.high-contrast .btn-form-submit {
  background-color: var(--bg-color) !important;
  border: 2px solid var(--link-color);
  color: var(--link-color) !important;
  border-radius: 0;
}

html.high-contrast .btn-form-submit:hover,
html.high-contrast .btn-form-submit:focus {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
  border-color: var(--text-color) !important;
}

/* Kontrastowy okrągły checkbox */
html.high-contrast .checkbox-custom-label::before {
  border: 2px solid var(--text-color) !important;
  background-color: var(--bg-color) !important;
  border-radius: 50%;           /* Utrzymujemy koło, ale dostaje ramkę techniczną */
}

html.high-contrast .native-checkbox-hidden:checked + .checkbox-custom-label::before {
  background-color: var(--text-color) !important; /* Środek koła na żółto po kliknięciu */
}

html.high-contrast .contact-clickable-link {
  color: var(--link-color) !important;
}

/* Wsparcie dla ikon 62px w kontraście (dodanie ramki wokół strefy ikony) */
html.high-contrast .info-icon-zone {
  border: 1px dashed var(--text-color);
  background-color: rgba(255, 255, 255, 0.05);
}

/*--------------------------------------------------------------
# 22.1 ADAPTACJA GODZIN PRACY DLA TRYBU WYSOKIEGO KONTRASTU
--------------------------------------------------------------*/
html.high-contrast .hours-day,
html.high-contrast .hours-time,
html.high-contrast .hours-time.status-closed {
  color: var(--text-color) !important; /* Pełny jaskrawy kolor w kontraście */
  font-style: normal !important;
}

html.high-contrast .hours-row {
  border-bottom: 1px dashed var(--text-color);
}

/*--------------------------------------------------------------
# 23. GŁÓWNY SLIDER NA STRONIE GŁÓWNEJ (Jednostki REM)
--------------------------------------------------------------*/

:root {
  --slider-gap: 4rem;           /* Jedno miejsce do zarządzania wszystkimi odstępami (32px) */
}

.main-slider-section {
  position: relative;
  background-color: #042A2D;
  border-radius: 1.875rem;
  max-width: 1780px;
  width: calc(100% - 2.5rem);
  margin: 1.5rem auto auto auto;
  overflow: hidden;
  height: 51.875rem;            /* Dokładnie 830px wysokości */
  z-index: 5;
}

.main-slider-slides-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Pojedynczy Slajd */
.main-slider-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  z-index: 1;
}

/* Aktywny slajd wyciągany na wierzch */
.main-slider-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Warstwa przyciemniająca pod napisy (WCAG Kontrast) */
.slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(4, 42, 45, 0.55);
}

/* Treść wewnątrz slajdu - pozycjonowana, aby teksty i dolne strzałki współgrały */
.slider-content-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0 5rem;              /* Margines boczny dla tekstów */
  display: flex;
  align-items: center;          /* Centrowanie zawartości w pionie */
}

.slider-text-content {
  max-width: 56.25rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.slider-title {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 4.125rem;
  color: var(--color-white);
  margin: 0;
  line-height: 1.15;
}

.slider-gtitle {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 4.125rem;            /* Potężny tytuł hero ~56px */
  color: var(--color-brand-green);
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.slider-subtitle {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  color: var(--color-white);
  margin: 0;
  line-height: 1.5;
}

/* Rząd przycisków akcji */
.slider-actions-row {
  display: flex;
  gap: 1.25rem;
  margin: 0;
}

.btn-slider {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 2.25rem;
  border-radius: 10rem;         /* Ogromna wartość gwarantuje idealny łuk z boków */
  -webkit-appearance: none;     /* Bezpiecznik dla Safari / iOS, o którym mówiliśmy */
  appearance: none;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Przycisk Główny (Pełny) */
.btn-slider-primary {
  background-color: var(--color-brand-green); 
  color: var(--color-black);
}

.btn-slider-primary:hover {
  background-color: var(--color-medium-green);  
  color: var(--color-black);
}

/* Przycisk Drugorzędny (Konturowy) */
.btn-slider-secondary {
  background-color: var(--color-white);
  border: 2px solid #ffffff;
  color: var(--color-black);
}

.btn-slider-secondary:hover {
  background-color: transparent;
  color: var(--color-white);
}

/* Bezpieczny, głęboki Focus dla osób skaczących klawiaturą */
.btn-slider:focus {
  outline: 3px solid var(--color-brand-green);
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# 24. PANEL STEROWANIA STRZAŁKAMI (Ułożone pod tekstami)
--------------------------------------------------------------*/
.slider-navigation-controls {
  position: absolute;
  /* Sterowanie wysokością strzałek - im mniejszy bottom, tym strzałki są niżej. 
     Ustaw tak, by optycznie odstęp pod buttonami odpowiadał Twojemu gapowi */
  bottom: 7rem;                 
  left: 5rem;                   /* Idealne wyrównanie do lewej krawędzi tekstu slajdu */
  display: flex;
  gap: 1rem;                    /* Odstęp między samą lewą a prawą strzałką */
  z-index: 10;                  /* Kluczowe: strzałki muszą być nad warstwami slajdów, żeby działały kliknięcia */
}

.slider-controls-inner {
  max-width: 1780px;
  margin: 0 auto;
  padding: 0 5rem;              /* Wyrównanie startu przycisków idealnie pod tekstem slajdu */
  display: flex;
  gap: 1rem;                    /* Odstęp między dwoma kółkami */
  pointer-events: auto;         /* Przywrócenie klikalności dla samych przycisków */
}

/* Okrągłe przyciski strzałek */
.slider-arrow-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.0);
  border: 2px solid #ffffff;
  color: #ffffff;
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.slider-arrow-btn:hover {
  background-color: #ffffff;
  color: #042A2D;
}

.slider-arrow-btn:focus {
  outline: 3px solid var(--color-brand-green);
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# 25. RESPONSYWNOŚĆ DLA MOBILE
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  :root {
    --slider-gap: 1.5rem;       /* Zmniejszamy gap na mobile dla lepszego dopasowania tekstu */
  }
  .main-slider-section {
    height: auto;
    min-height: 35rem;
  }
  .slider-content-wrapper {
    padding: 4rem 2rem;
  }
  .slider-title {
    font-size: 2.25rem;
  }
  .slider-actions-row {
    flex-direction: column;
    gap: 0.875rem;
    width: 100%;
  }
  .btn-slider {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# 26. TRYB WYSOKIEGO KONTRASTU DLA SLIDERA (WCAG)
--------------------------------------------------------------*/
html.high-contrast .main-slider-section {
  border: 2px solid var(--text-color);
  border-radius: 0;
  background-color: var(--bg-color) !important;
}

html.high-contrast .main-slider-slide {
  background-image: none !important; /* Blokujemy zdjęcia w tle pod WCAG! */
  background-color: var(--bg-color) !important;
}

html.high-contrast .slider-overlay {
  display: none;
}

html.high-contrast .slider-title,
html.high-contrast .slider-subtitle {
  color: var(--text-color) !important;
  text-shadow: none;
}

html.high-contrast .btn-slider-primary {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
  border: 2px solid var(--text-color);
  border-radius: 0;
}

html.high-contrast .btn-slider-secondary {
  border: 2px solid var(--link-color);
  color: var(--link-color) !important;
  border-radius: 0;
}

html.high-contrast .btn-slider-secondary:hover {
  background-color: var(--link-color) !important;
  color: var(--bg-color) !important;
}

html.high-contrast .slider-arrow-btn {
  border: 2px solid var(--text-color);
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  border-radius: 0;
}

html.high-contrast .slider-arrow-btn:hover,
html.high-contrast .slider-arrow-btn:focus {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
}

/*--------------------------------------------------------------
# 26. SEKCJA O NAS (WARSTWA Z WSTĄŻKĄ I SIATKĄ 50/50)
--------------------------------------------------------------*/
.about-us-section {
  position: relative; /* Kluczowe: staje się bazą pozycjonowania dla wstążki */
  width: 100%;
  padding: 6rem 0;
  /* background-color: #ffffff; */
  /* Zostawiamy overflow: hidden, żeby wstążka wychodząca w lewo poza ekran nie tworzyła poziomego paska przewijania strony */
  overflow: hidden; 
}

/* WSTĄŻKA JAKO INTEGRALNY ELEMENT MANIPULACYJNY */
.about-us-section::before {
  content: "";
  position: absolute;
  
  /* 1. KONTROLA W PIONIE (Wchodzenie pod slider) */
  top: -20rem;                 /* Zwiększ ujemną wartość (np. -6rem), żeby wsunąć głębiej pod slider */
  
  /* 2. KONTROLA W POZIOMIE (Wysunięcie poza lewą krawędź) */
  left: -70rem;                /* Zwiększ ujemną wartość (np. -8rem), żeby bardziej schować w lewo */
  
  /* Wymiary – dla SVG możesz je teraz zmieniać jak chcesz, grafik się nie rozmyje */
  width: 2500px;               
  height: 1770px;              
  
  /* ŁADOWANIE PLIKU SVG */
  background-image: url('images/ribbon-left-bg.svg'); /* Zmienione na .svg */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;   /* Kluczowe dla SVG: pilnuje, żeby wstążka zachowała proporcje przy zmianie width/height */
  
  z-index: 1;                 /* Pod tekstem sekcji O Nas */
}

/* Upewniamy się, że kontener z treścią jest nad wstążką, by można było klikać linki */
.about-us-container {
  position: relative;
  z-index: 2; /* Treść wyżej niż wstążka (z-index: 1) */
  max-width: 1400px;
  width: calc(100% - 2.5rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4rem;
}

/* Kolumny 50/50 */
.about-col-image,
.about-col-content {
  flex: 1;
  width: 50%;
}

/* Grafika przyklejona do wewnętrznej strony "na zero" */
.about-col-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-col-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*--------------------------------------------------------------
# 27. TYPOGRAFIA I ELEMENTY TREŚCI
--------------------------------------------------------------*/
.about-col-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Stały rytm pionowy dla całej kolumny tekstu */
}

.about-subheadline {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--color-black);
  letter-spacing: 0.1em;
}

.about-headline {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 3rem;
  color: var(--color-black);
  margin: 0;
  line-height: 1.2;
}

.about-sheadline {
  font-weight: 700;
}

.about-lead-text {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1.125rem;
  color: var(--color-black);
  line-height: 1.6;
  margin: 0;
}

/* LISTA Z ZIELONYMI PTASZKAMI (WCAG & SEMANTYKA) */
.about-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* Odstęp między punktami listy */
}

.about-features-list li {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-black);
  line-height: 1.5;
  position: relative;
  padding-left: 2.25rem; /* Przestrzeń na ptaszka */
}

/* Generowanie zielonego ptaszka przez CSS */
.about-features-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 1.25rem;
  height: 1.25rem;
  /* Wklej tutaj ścieżkę do ikony zielonego ptaszka */
  background-image: url('images/green-check.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
}

/* BOX STATYSTYK (+10 000) */
.about-counter-box {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  /* background-color: #F4F7F6; */
  padding: 1.25rem 2rem;
  border-radius: 1rem;
  margin-top: 0.5rem;
  width: fit-content; /* Box zwęża się do zawartości */
}

.counter-icon {
  width: 17.25rem;
  height: 5rem;
  object-fit: contain;
}

.counter-text {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  color: #042A2D;
  margin: 0;
}

.counter-text strong {
  font-weight: 700;
  font-size: 1.5rem;
  color: #107A65;
}

/* PRZYCISK ZOBACZ WIĘCEJ (PEŁNA PIGUŁKA) */
.about-actions {
  margin-top: 0.5rem;
}

.btn-about-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-green);
  color: var(--color-white);
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 5rem;
  border-radius: 10rem; /* Idealne zaokrąglenie pigułkowe */
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-about-more:hover {
  background-color: var(--color-medium-green);
  color: var(--color-white)
}

/* Podświetlenie pod klawiaturę (WCAG) */
.btn-about-more:focus {
  outline: 3px solid #107A65;
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# 28. ADAPTACJA DLA MOBILE (RESPONSIVNESS)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .about-us-section {
    padding: 4rem 0;
    background-size: cover; /* Na mobile wstążka może pokryć większy obszar */
  }

  .about-us-container {
    flex-direction: column; /* Kolumny układają się jedna pod drugą */
    gap: 2.5rem;
  }

  .about-col-image,
  .about-col-content {
    width: 100%; /* Pełna szerokość na telefonach */
  }

  .about-col-image {
    order: 2; /* OPCJA: Na mobile tekst idzie najpierw, grafika pod spodem */
  }

  .about-headline {
    font-size: 2rem; /* Mniejszy font na mniejsze ekrany */
  }

  .about-counter-box {
    width: 100%; /* Licznik rozciąga się na całą szerokość ekranu */
    box-sizing: border-box;
  }
}

/*--------------------------------------------------------------
# 28a. DODATKI WCAG – SEKCJA O NAS (KONTRAST I ZOOM)
--------------------------------------------------------------*/

/* WYSOKI KONTRAST (.high-contrast na html) */
html.high-contrast .about-us-section {
  background-color: #000000 !important;
  background-image: none !important;
}

html.high-contrast .about-us-section::before {
  display: none !important; /* Ukrywamy wstążkę SVG */
}

html.high-contrast .about-headline,
html.high-contrast .about-lead-text,
html.high-contrast .about-features-list li,
html.high-contrast .counter-text {
  color: #FFF200 !important;
}

html.high-contrast .about-subheadline,
html.high-contrast .counter-text strong {
  color: #FFF200 !important;
}

html.high-contrast .about-counter-box {
  background-color: #000000 !important;
  border: 2px solid #FFF200 !important;
}

html.high-contrast .about-features-list li::before {
  filter: brightness(0) saturate(100%) invert(93%) sepia(54%) saturate(1136%) hue-rotate(345deg) brightness(107%) contrast(106%) !important;
}

html.high-contrast .btn-about-more {
  background-color: #000000 !important;
  color: #FFF200 !important;
  border: 3px solid #FFF200 !important;
}

html.high-contrast .btn-about-more:hover,
html.high-contrast .btn-about-more:focus {
  background-color: #FFF200 !important;
  color: #000000 !important;
  outline: 3px solid #FFF200 !important;
}

/* OCHRONA PRZED ROZJECHANIEM PRZY ZOOMIE (.ts-medium i .ts-large) */
html.ts-medium .about-headline { font-size: 3.25rem; }
html.ts-large .about-headline { font-size: 3.75rem; }

html.ts-medium .about-lead-text,
html.ts-medium .about-features-list li { font-size: 1.25rem; }
html.ts-large .about-lead-text,
html.ts-large .about-features-list li { font-size: 1.5rem; }

html.ts-large .about-us-container {
  gap: 2rem; /* Zmniejszamy gap, żeby powiększony tekst miał więcej miejsca */
}

/*--------------------------------------------------------------
# 29. SEKCJA PRACODAWCÓW (PEŁNA SZEROKOŚĆ Z WSTĄŻKĄ SVG)
--------------------------------------------------------------*/
.employers-section {
  position: relative;
  max-width: 1780px;            /* KOREKTA: 1820px minus 40px (po 20px z każdej strony), aby idealnie licować z treścią headera */
  width: calc(100% - 2.5rem);   /* Szerokość pomniejszona o 40px (2.5rem) dla mniejszych ekranów */
  margin: 0 auto 3rem auto;     /* Centrowanie na ekranie + dolny odstęp */
  padding: 9rem 2.5rem;         /* Miejsce na paddingi boczne */
  background-color: var(--color-dark-green);    /* Jasne tło sekcji dla kontrastu */
  border-radius: 1.875rem;      /* Konsekwentne zaokrąglenie rogów sekcji */
  box-sizing: border-box;
  overflow: hidden;

  /* WSTĄŻKA SVG W TLE DOSTARCZONA PRZEZ GRAFIKA */
  background-image: url('images/ribbon-employers-bg.svg');
  background-repeat: no-repeat;
  background-position: right auto; /* Domyślnie po prawej stronie, możesz zmienić tak jak w sekcji "O nas" */
  background-size: 100% auto;
}

/* Węższy kontener wewnętrzny (spójny z sekcją "O nas") */
.employers-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;      /* Wyrównanie kolumn do góry */
  gap: 4rem;                    /* Odstęp między kolumną lewą a prawą */
}

/* Kolumny 50/50 */
.employers-col-brand,
.employers-col-features {
  flex: 1;
  width: 50%;
}

/*--------------------------------------------------------------
# 30. LEWA KOLUMNA (BRANDING I PRZYCISK)
--------------------------------------------------------------*/
.employers-col-brand {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
  align-self: center;
}

.employers-subheadline {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--color-white);
  letter-spacing: 0.1em;
}

.employers-headline {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 3rem;
  color: var(--color-white);
  margin: 0;
  line-height: 1.2;
}

.employers-sheadline {
  font-weight: 700;
}

.employers-actions {
  margin-top: 1rem;
}

.btn-employers-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-green);
  color: var(--color-black);
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 5rem;
  border-radius: 10rem;         /* Idealna kapsułka */
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-employers-more:hover {
  color: var(--color-black);
  background-color: var(--color-medium-green);
}

.btn-employers-more:focus {
  outline: 3px solid #107A65;
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# 31. PRAWA KOLUMNA (WIERSZE Z IKONAMI 78x78)
--------------------------------------------------------------*/
.employers-col-features {
  display: flex;
  flex-direction: column;
  gap: 3rem;                    /* Dokładnie oczekiwany rozstaw wierszy (48px) */
  position: relative;
  z-index: 2;
}

.employer-feature-item {
  display: flex;
  align-items: flex-start;      /* Ikona trzyma się góry, tekst spływa obok */
  gap: 1.5rem;                  /* Odstęp między ikoną a tekstem obok */
}

/* Wymuszenie sztywnego rozmiaru 78x78px dla kontenera i ikony */
.feature-icon-wrapper {
  flex-shrink: 0;               /* Ikona nigdy nie ulegnie ściśnięciu */
  width: 4.875rem;              /* Dokładnie 78px przy bazie 16px */
  height: 4.875rem;             /* Dokładnie 78px przy bazie 16px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Treść tekstowa w wierszu */
.feature-text-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                  /* Odległość małego nagłówka od opisu pod spodem */
}

.feature-small-headline {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-white);
  margin: 0;
  line-height: 1.3;
}

.feature-description {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--color-white);
  margin: 0;
  line-height: 1.5;
}

/*--------------------------------------------------------------
# 32. ADAPTACJA DLA MOBILE (RWD)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .employers-section {
    padding: 4rem 1.25rem;
    background-size: cover;     /* Wstążka ładnie wypełnia tło na małych ekranach */
  }

  .employers-container {
    flex-direction: column;     /* Kolumny jedna pod drugą */
    gap: 3rem;
  }

  .employers-col-brand,
  .employers-col-features {
    width: 100%;                /* Pełna szerokość na mobile */
  }

  .employers-headline {
    font-size: 2rem;
  }

  .employers-col-features {
    gap: 2rem;                  /* Lekko zmniejszamy gap między wierszami na mobile dla lepszej zwartości */
  }

  .employer-feature-item {
    gap: 1.25rem;
  }
  
  /* Na bardzo małych ekranach (smartfony w pionie) ikona może przejść nad tekst, 
     jeśli brakuje miejsca na długie wyrazy */
  @media screen and (max-width: 480px) {
    .employer-feature-item {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}

/*--------------------------------------------------------------
# 32a. DODATKI WCAG – SEKCJA PRACODAWCÓW (KONTRAST I ZOOM)
--------------------------------------------------------------*/

/* WYSOKI KONTRAST (.high-contrast na html) */
html.high-contrast .employers-section {
  background-color: #000000 !important;
  background-image: none !important;
  border: 2px solid #FFF200 !important;
}

html.high-contrast .employers-headline,
html.high-contrast .feature-small-headline,
html.high-contrast .feature-description {
  color: #FFF200 !important;
}

html.high-contrast .employers-subheadline {
  color: #FFF200 !important;
}

html.high-contrast .feature-icon-wrapper img {
  filter: brightness(0) invert(1) !important; /* Ikony przechodzą w czystą biel */
}

html.high-contrast .btn-employers-more {
  background-color: #000000 !important;
  color: #FFF200 !important;
  border: 3px solid #FFF200 !important;
}

html.high-contrast .btn-employers-more:hover,
html.high-contrast .btn-employers-more:focus {
  background-color: #FFF200 !important;
  color: #000000 !important;
  outline: 3px solid #FFF200 !important;
}

/* OCHRONA PRZED ROZJECHANIEM PRZY ZOOMIE (.ts-medium i .ts-large) */
html.ts-medium .employers-headline { font-size: 3.25rem; }
html.ts-large .employers-headline { font-size: 3.75rem; }

html.ts-medium .feature-small-headline { font-size: 1.5rem; }
html.ts-large .feature-small-headline { font-size: 1.75rem; }

html.ts-medium .feature-description { font-size: 1.15rem; }
html.ts-large .feature-description { font-size: 1.3rem; }

/* Przy najwyższym powiększeniu pozwalamy, by prawa kolumna oddychała */
html.ts-large .employers-col-features {
  gap: 2rem;
}

/*--------------------------------------------------------------
# 33. SEKCJA CTA – RYNEK PRACY (PEŁNA SZEROKOŚĆ 1820px)
--------------------------------------------------------------*/
.cta-workplace-section {
  position: relative;
  max-width: 1780px;            /* KOREKTA: 1820px minus 40px (po 20px z każdej strony), aby idealnie licować z treścią headera */
  width: calc(100% - 2.5rem);   /* Szerokość pomniejszona o 40px (2.5rem) dla mniejszych ekranów */
  margin: 0 auto 3rem auto;     /* Centrowanie na ekranie + dolny odstęp */
  padding: 9rem 1.25rem;        /* 20px paddingu z każdej strony (1.25rem) */
  border-radius: 1.875rem;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* GRAFIKA W TLE ROZŁOŻONA NA CAŁEJ WIELKOŚCI */
  background-image: url('images/cta-workplace-bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Nakładka przyciemniająca tło pod biały tekst (Bezpieczeństwo WCAG) */
.cta-workplace-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(4, 42, 45, 0); /* Dopasuj przezroczystość do jasności grafiki */
  z-index: 1;
}

/* Kontener na treść */
.cta-workplace-container {
  position: relative;
  z-index: 2;                   /* Wyżej niż nakładka */
  max-width: 56.25rem;          /* Ograniczenie szerokości tekstu dla lepszej czytelności */
  display: flex;
  flex-direction: column;
  gap: 3.5rem;                  /* Równomierny rozstaw pionowy */
  align-items: center;
}

/* Typografia (Domyślnie biała czcionka) */
.cta-workplace-subheadline {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: #ffffff;
  letter-spacing: 0.15em;
}

.cta-workplace-headline {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 3rem;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.cta-workplace-sheadline {
  font-weight: 700;
  color: var(--color-brand-green);
}

.cta-workplace-actions {
  margin-top: 1rem;
}

/* Przycisk pigułkowy */
.btn-cta-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-green);    /* Twój akcentowy zielony */
  color: var(--color-black);
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1.125rem 3rem;
  border-radius: 10rem;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-cta-contact:hover {
  background-color: var(--color-medium-green);
  color: var(--color-black);
}

/* Obwódka dla nawigacji klawiaturą */
.btn-cta-contact:focus {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# 34. ADAPTACJA DLA MOBILE (RWD)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .cta-workplace-section {
    padding: 6rem 1.25rem;      /* Nieco mniejszy padding góra/dół na tabletach */
  }

  .cta-workplace-headline {
    font-size: 2.25rem;         /* Skalowanie nagłówka */
  }
}

@media screen and (max-width: 480px) {
  .cta-workplace-section {
    padding: 4rem 1rem;         /* Bezpieczne marginesy na małych smartfonach */
    border-radius: 1rem;        /* Subtelniejsze zaokrąglenie na mobile */
  }

  .cta-workplace-headline {
    font-size: 1.75rem;
  }

  .btn-cta-contact {
    width: 100%;                /* Przycisk na całą szerokość ekranu telefonu */
    box-sizing: border-box;
  }
}

/*--------------------------------------------------------------
# 34a. DODATKI WCAG – SEKCJA CTA (KONTRAST I ZOOM)
--------------------------------------------------------------*/

/* WYSOKI KONTRAST (.high-contrast na html) */
html.high-contrast .cta-workplace-section {
  background-color: #000000 !important;
  background-image: none !important; /* Wyłączamy grafikę tła dla idealnego kontrastu */
  border: 2px solid #FFF200 !important;
}

html.high-contrast .cta-workplace-overlay {
  display: none !important;     /* Ukrywamy ciemną nakładkę, gdy tło jest czarne */
}

html.high-contrast .cta-workplace-headline, html.high-contrast  .cta-workplace-sheadline {
  color: #FFF200  !important;
}

html.high-contrast .cta-workplace-subheadline {
  color: #FFF200 !important;    /* Żółty akcent kontrastowy */
}

/* Przycisk w trybie wysokiego kontrastu */
html.high-contrast .btn-cta-contact {
  background-color: #000000 !important;
  color: #FFF200 !important;
  border: 3px solid #FFF200 !important;
}

html.high-contrast .btn-cta-contact:hover,
html.high-contrast .btn-cta-contact:focus {
  background-color: #FFF200 !important;
  color: #000000 !important;
  outline: 3px solid #FFF200  !important;
}

/* TRZYSTOPNIOWE POWIĘKSZANIE TEKSTU (.ts-medium i .ts-large) */
html.ts-medium .cta-workplace-headline { font-size: 3.5rem; }
html.ts-large .cta-workplace-headline { font-size: 4rem; }

html.ts-medium .cta-workplace-subheadline { font-size: 1.15rem; }
html.ts-large .cta-workplace-subheadline { font-size: 1.3rem; }

html.ts-medium .btn-cta-contact { font-size: 1.15rem; }
html.ts-large .btn-cta-contact { font-size: 1.3rem; }

/*--------------------------------------------------------------
# 35. SEKCJA O WERBEO (SZABLON RAMOWY LICUJĄCY Z RESZTĄ)
--------------------------------------------------------------*/
.why-werbeo-section {
  position: relative;
  max-width: 1780px;            /* Idealne zgranie z resztą sekcji i headerem */
  width: calc(100% - 2.5rem);   /* Margines boczny 40px dla mniejszych okien */
  margin: 0 auto 3rem auto;     /* Centrowanie na ekranie + dolny odstęp */
  padding: 6rem 0;              /* Odstępy góra/dół */
  background-color: #ffffff;    /* Tło sekcji białe */
  box-sizing: border-box;
  border-radius: 1.875rem;
  overflow: hidden; 
}

/* Węższy kontener wewnętrzny na content (np. 1400px jak w poprzednich) */
.why-werbeo-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;          /* Centrowanie intro oraz przycisku w osi sekcji */
}

/* Blok wprowadzający (Intro) */
.why-werbeo-intro {
  text-align: center;
  max-width: 56.25rem;          /* Zawężenie tekstu dla optymalnej czytelności (ok. 900px) */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 4rem;          /* Odstęp od nagłówków do siatki kolumn */
}

.why-werbeo-subheadline {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--color-black);
  letter-spacing: 0.15em;
}

.why-werbeo-headline {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 3rem;              /* Dokładnie oczekiwane 3rem */
  color: var(--color-black);           /* Tekst ciemny/czarny z makiety */
  margin: 0;
  line-height: 1.2;
}

.why-werbeo-lead {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1.125rem;
  color: var(--color-black);
  line-height: 1.6;
  margin: 0;
}

/*--------------------------------------------------------------
# 36. SIATKA TRZECH KOLUMN
--------------------------------------------------------------*/
.why-werbeo-grid {
  display: flex;
  justify-content: space-between;
  gap: 3rem;                    /* Przestrzeń między kolumnami */
  width: 100%;
  margin-bottom: 4rem;          /* Odstęp między kolumnami a przyciskiem na dole */
}

.why-werbeo-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;          /* Środkowanie elementów wewnątrz każdej karty */
  text-align: center;
  gap: 1.25rem;
}

/* Sztywne wymuszenie rozmiaru 85x85px dla ikon SVG */
.card-icon-wrapper {
  width: 5.3125rem;             /* Dokładnie 85px przy bazie 16px */
  height: 5.3125rem;            /* Dokładnie 85px przy bazie 16px */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.card-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-small-headline {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  color: #0f0f0f;
  margin: 0;
  line-height: 1.3;
}

.card-text {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #0f0f0f;
  margin: 0;
  line-height: 1.5;
}

/*--------------------------------------------------------------
# 37. PRZYCISK PIGUŁKOWY
--------------------------------------------------------------*/
.why-werbeo-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-why-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-green);
  color: var(--color-black);
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1.125rem 3rem;
  border-radius: 10rem;         /* Idealne zaokrąglenie pigułkowe */
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-why-join:hover {
  color: var(--color-black);
  background-color: var(--color-medium-green);
}

.btn-why-join:focus {
  outline: 3px solid #107A65;
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# 38. ADAPTACJA DLA MOBILE (RWD)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .why-werbeo-intro {
    margin-bottom: 3rem;
  }

  .why-werbeo-headline {
    font-size: 2.25rem;
  }

  .why-werbeo-grid {
    flex-direction: column;     /* Kolumny przechodzą w wiersze */
    gap: 2.5rem;
    margin-bottom: 3rem;
  }
  
  .why-werbeo-card {
    gap: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .why-werbeo-headline {
    font-size: 1.75rem;
  }

  .btn-why-join {
    width: 100%;                /* Pełna pigułka rozciągnięta na smartfonie */
    box-sizing: border-box;
  }
}

/*--------------------------------------------------------------
# 38a. DODATKI WCAG – SEKCJA O WERBEO (KONTRAST I ZOOM)
--------------------------------------------------------------*/

/* WYSOKI KONTRAST (.high-contrast na html) */
html.high-contrast .why-werbeo-section {
  background-color: #000000 !important;
  border: 2px solid #FFF200 !important;
  border-radius: 1.875rem !important; 
}

html.high-contrast .why-werbeo-headline,
html.high-contrast .why-werbeo-lead,
html.high-contrast .card-small-headline,
html.high-contrast .card-text {
  color: #ffffff !important;   /* Zmiana czarnych tekstów na białe w pełnej czerni */
}

html.high-contrast .why-werbeo-subheadline {
  color: #FFF200 !important;   /* Podświetlenie podnagłówka na żółto */
}

/* Kontrastowy filtr dla ikon 85x85px */
html.high-contrast .card-icon-wrapper img {
  filter: brightness(0) invert(1) !important; /* Zamienia wektory ikon na czystą biel */
}

/* Przycisk "Dołącz do naszych zadań" w High Contrast */
html.high-contrast .btn-why-join {
  background-color: #000000 !important;
  color: #FFF200 !important;
  border: 3px solid #FFF200 !important;
}

html.high-contrast .btn-why-join:hover,
html.high-contrast .btn-why-join:focus {
  background-color: #FFF200 !important;
  color: #000000 !important;
  outline: 3px solid #ffffff !important;
}

/* TRZYSTOPNIOWE POWIĘKSZANIE TEKSTU (.ts-medium i .ts-large) */
html.ts-medium .why-werbeo-headline { font-size: 3.5rem; }
html.ts-large .why-werbeo-headline { font-size: 4rem; }

html.ts-medium .why-werbeo-lead { font-size: 1.25rem; }
html.ts-large .why-werbeo-lead { font-size: 1.5rem; }

html.ts-medium .card-small-headline { font-size: 1.6rem; }
html.ts-large .card-small-headline { font-size: 1.85rem; }

html.ts-medium .card-text { font-size: 1.15rem; }
html.ts-large .card-text { font-size: 1.3rem; }

html.ts-medium .btn-why-join { font-size: 1.15rem; }
html.ts-large .btn-why-join { font-size: 1.3rem; }

/*--------------------------------------------------------------
# 48. POMNIEJSZONA SEKCJA AKTUALNOŚCI NA STRONIE GŁÓWNEJ (1400px)
--------------------------------------------------------------*/
.p-home-news-section {
  width: 100%;
  background-color: transparent;
  padding-top: 4rem;
  padding-bottom: 5rem;
  box-sizing: border-box;
}

.p-home-news-container {
  max-width: 1400px;            
  width: calc(100% - 2.5rem);   
  margin: 0 auto;
  box-sizing: border-box;
}

/* Nagłówek sekcji */
.p-home-news-header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;        
  margin-bottom: 3rem;
  gap: 2rem;
}

.p-home-news-subheading {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;          
  color: var(--color-brand-green);
  display: block;
  margin-bottom: 0.5rem;
}

.p-home-news-heading {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 2.5rem;            
  color: var(--color-black);
  margin: 0;
}

.p-btn-home-news-more {
  display: inline-block;
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  padding: 0.6rem 3rem;
  background-color: var(--color-black);
  color: var(--color-white) !important;
  border-radius: 2.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/*--------------------------------------------------------------
# 48.1 KARTY: POZIOMY UKŁAD I ELASTYCZNA WYSOKOŚĆ (WCAG)
--------------------------------------------------------------*/
.p-home-news-container .blog-posts-grid {
  display: flex !important;
  gap: 3rem;                    
  width: 100% !important;
}

.p-home-news-container .blog-post-card {
  width: 50% !important;        
  display: flex !important;     
  flex-direction: row !important; 
  background: transparent !important;
  border: none !important;      
  padding: 0 !important;        
  align-items: stretch !important; 
  min-height: 12.5rem; /* Elastyczna wysokość zamiast sztywnej */
}

/* Miniaturka */
.p-home-news-container .post-thumbnail-wrapper {
  width: 40% !important;        
  flex-shrink: 0 !important;
}

.p-home-news-container .post-thumbnail-wrapper img {
  width: 100% !important;
  height: 100% !important;
  min-height: 12.5rem;
  object-fit: cover !important; 
  border-radius: 1.25rem !important;
  display: block;
}

/* Treść - zmiana na elastyczne zarządzanie przestrzenią */
.p-home-news-container .post-content-wrapper {
  width: 60% !important;        
  padding: 0.25rem 0 0.25rem 1.5rem !important; 
  display: flex !important;
  flex-direction: column !important; 
  justify-content: flex-start !important; /* Start od góry */
  background: transparent !important;
  box-sizing: border-box;
}

.p-home-news-container .post-meta-date {
  font-family: "Gotham", sans-serif;
  font-size: 0.875rem;
  color: #666666;
  margin-bottom: 0.75rem !important;
  display: flex;
  align-items: center;
}

.p-home-news-container .archive-green-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-medium-green);
  border-radius: 50%;
  margin-right: 0.5rem;
}

/* Tytuł - dopycha przycisk do dołu dzięki margin-bottom: auto */
.p-home-news-container .post-card-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;          
  line-height: 1.3;
  margin: 0 0 1.5rem 0 !important;
  padding: 0 !important;
  margin-bottom: auto !important; /* Kluczowe dla WCAG i wypychania przycisku */
}

.p-home-news-container .post-card-title a {
  color: var(--color-black);
  text-decoration: none;
}

/* Przycisk Czytaj dalej */
.p-home-news-container .post-card-actions {
  margin-top: 1rem !important;
}

.p-home-news-container .btn-post-more {
  display: inline-block !important;
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-black) !important;
  padding: 0.6rem 3rem !important;
  border: 0px solid var(--color-brand-green) !important;
  border-radius: 2.5rem !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.p-home-news-container .btn-post-more:hover {
  background-color: var(--color-medium-green) !important;
  color: #ffffff !important;
}

/*--------------------------------------------------------------
# 48.2 POPRAWKI KONTRASTU I POWIĘKSZENIA (WCAG)
--------------------------------------------------------------*/
html.high-contrast .p-home-news-container .post-thumbnail-wrapper {
  border: 1px solid var(--text-color) !important;
  outline: none !important; /* Usunięcie niedopasowanego outline */
  border-radius: 1.25rem !important;
}

html.high-contrast .p-home-news-heading, html.high-contrast  .p-home-news-subheading {
  color: #FFF200 !important;   /* Podświetlenie podnagłówka na żółto */
}

/* Przycisk Zobacz więcej w kontrast */
html.high-contrast .p-btn-home-news-more {
  background-color: #000000 !important;
  color: #FFF200 !important;
  border: 3px solid #FFF200 !important;
}

html.high-contrast .p-btn-home-news-more:hover,
html.high-contrast .p-btn-home-news-more:focus {
  background-color: #FFF200 !important;
  color: #000000 !important;
  /* outline: 3px solid #FFF200 !important; */
}

/* Zapewnienie widoczności przycisku przy powiększeniu fontu (zoom) */
@media screen and (max-width: 1200px) {
  .p-home-news-container .blog-posts-grid {
    gap: 1.5rem;
  }
}

@media screen and (max-width: 992px) {
  .p-home-news-container .blog-posts-grid {
    flex-direction: column !important;
  }
  .p-home-news-container .blog-post-card {
    width: 100% !important;
  }
}

@media screen and (max-width: 600px) {
  .p-home-news-container .blog-post-card {
    flex-direction: column !important;
  }
  .p-home-news-container .post-thumbnail-wrapper, 
  .p-home-news-container .post-content-wrapper {
    width: 100% !important;
  }
  .p-home-news-container .post-content-wrapper {
    padding: 1.5rem 0 !important;
  }
}

/*--------------------------------------------------------------
# 39. ARCHIWUM BLOGA – SIATKA 3 KOLUMNY
--------------------------------------------------------------*/
.blog-archive-section {
  position: relative;
  max-width: 1780px;            /* Idealne licowanie z resztą strony */
  width: calc(100% - 2.5rem);
  margin: 0 auto 3rem auto;
  padding: 4rem 0;
  /* background-color: #ffffff; */
  /* border-radius: 1.875rem; */
  box-sizing: border-box;
}

.blog-archive-container {
  max-width: 1400px;            /* Content zamknięty w mniejszym kontenerze */
  margin: 0 auto;
}

/* SIATKA TRZECH KOLUMN */
.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Dokładnie 3 równe kolumny */
  gap: 5rem 3rem;                    /* Odstępy między boksami */
  width: 100%;
  /* margin-bottom: 4rem; */
}

/* KARTA POJEDYNCZEGO WPISU */
.blog-post-card {
  display: flex;
  flex-direction: column;
  /* background-color: #ffffff; */
  /* border-radius: 1.25rem; */
  overflow: hidden;
  height: 100%;                 /* Wszystkie karty w rzędzie będą równej wysokości */
}

/* 1. KONTENER ZDJĘCIA PROMUJĄCEGO */
.post-thumbnail-wrapper {
  width: 100%;
  height: 15.625rem;            /* Stała wysokość kadrowania obrazka (np. 250px) */
  overflow: hidden;
  border-radius: 1rem;          /* Zaokrąglenie samego zdjęcia wg uznania */
}

.post-thumbnail-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* Wypełnienie przestrzeni bez zniekształceń */
  transition: transform 0.3s ease;
}

.blog-post-card:hover .post-thumbnail-wrapper img {
  transform: scale(1.03);       /* Subtelny efekt hover dla oka */
}

/* KONTENER TREŚCI POD ZDJĘCIEM */
.post-content-wrapper {
  padding: 1.5rem 0.5rem 0 0.5rem; /* Dopasowanie marginesów wewnętrznych */
  display: flex;
  flex-direction: column;
  flex-grow: 1;                 /* Rozpycha kartę, by przyciski były w jednej linii */
}

/* 2. DATA DODANIA */
.post-meta-date {
  display: flex;
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  gap: 0.625rem;    
  color: var(--color-brand-green);
  align-items: center;
  margin-bottom: 0.75rem;
}

/* Wygląd zielonej kropki na liście wpisów (home.php) */
.archive-green-dot {
  margin-bottom: 0.1rem;
  width: 0.625rem;               /* Średnica kropki */
  height: 0.625rem;
  background-color: var(--color-brand-green);     /* Twój firmowy zielony */
  border-radius: 50%;            /* Idealne koło */
  flex-shrink: 0;                /* Ochrona przed zniekształceniem */
}

.no-posts-found {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 3rem;
  text-align: center;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0 0 1rem 0;

}

/*--------------------------------------------------------------
# INTEGRACJA WCAG DLA STRONY GŁÓWNEJ BLOGA (WYSOKI KONTRAST)
--------------------------------------------------------------*/
html.high-contrast .archive-green-dot {
  background-color: #FFF200 !important; /* W trybie kontrastu kropka staje się jaskrawożółta */
}

/* 3. TYTUŁ WPISU */
.post-card-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-black);
  margin: 0 0 0 0;
  line-height: 1.3;
}

.post-card-title a {
  color: var(--color-black);
  text-decoration: none;
}

.post-card-title a:hover {
  color: #107A65;
}

/* 4. PRZYCISK CZYTAJ DALEJ */
.post-card-actions {
  margin-top: auto;             /* Spycha przycisk zawsze na sam dół karty */
  padding-top: 1rem;
}

.btn-post-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-green);
  color: var(--color-black);
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.875rem 5rem;
  border-radius: 10rem;         /* Pigułka */
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-post-more:hover {
  color: var(--color-black);
  background-color: var(--color-medium-green);
}

.btn-post-more:focus {
  outline: 3px solid #107A65;
  outline-offset: 3px;
}

/* STRONICOWANIE */
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.blog-pagination .page-numbers {
  padding: 0.75rem 1.25rem;
  background-color: #F4F7F6;
  color: #042A2D;
  text-decoration: none;
  border-radius: 0.5rem;
  font-family: "Gotham", sans-serif;
  font-weight: 700;
}

.blog-pagination .page-numbers.current {
  background-color: #042A2D;
  color: #ffffff;
}

/*--------------------------------------------------------------
# 40. RESPONSYWNOŚĆ (RWD)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .blog-posts-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 kolumny na tabletach */
    gap: 2rem;
  }
}

@media screen and (max-width: 600px) {
  .blog-posts-grid {
    grid-template-columns: 1fr;           /* 1 kolumna na telefonach */
    gap: 2.5rem;
  }
}

/*--------------------------------------------------------------
# 40a. DODATKI WCAG – BLOG ARCHIVE (KONTRAST I ZOOM)
--------------------------------------------------------------*/

/* WYSOKI KONTRAST (.high-contrast na html) */
html.high-contrast .blog-archive-section {
  background-color: #000000 !important;
  border: 2px solid #FFF200 !important;
}

html.high-contrast .blog-post-card {
  background-color: #000000 !important;
}

html.high-contrast .post-card-title a,
html.high-contrast .no-posts-found {
  color: #FFF200 !important;
}

html.high-contrast .post-meta-date {
  color: #FFF200 !important;
}

html.high-contrast .post-thumbnail-wrapper {
  border: 1px solid #FFF200;
}

/* Przycisk Czytaj dalej w kontrast */
html.high-contrast .btn-post-more {
  background-color: #000000 !important;
  color: #FFF200 !important;
  border: 3px solid #FFF200 !important;
}

html.high-contrast .btn-post-more:hover,
html.high-contrast .btn-post-more:focus {
  background-color: #FFF200 !important;
  color: #000000 !important;
  /* outline: 3px solid #FFF200 !important; */
}

/* Stronicowanie w kontrast */
html.high-contrast .blog-pagination .page-numbers {
  background-color: #000000 !important;
  color: #FFF200 !important;
  border: 1px solid #FFF200;
}

html.high-contrast .blog-pagination .page-numbers.current {
  background-color: #FFF200 !important;
  color: #000000 !important;
  border-color: #FFF200;
}

/* TRZYSTOPNIOWE POWIĘKSZANIE TEKSTU (.ts-medium i .ts-large) */
html.ts-medium .post-card-title { font-size: 1.75rem; }
html.ts-large .post-card-title { font-size: 2rem; }

html.ts-medium .post-meta-date { font-size: 1.05rem; }
html.ts-large .post-meta-date { font-size: 1.2rem; }

html.ts-medium .btn-post-more { font-size: 1.05rem; }
html.ts-large .btn-post-more { font-size: 1.2rem; }

/*--------------------------------------------------------------
# 41. POJEDYNCZY ARTYKUŁ (SINGLE.PHP) – UKŁAD RAMOWY
--------------------------------------------------------------*/
.single-post-section {
  position: relative;
  max-width: 1780px;            /* Idealne licowanie z resztą strony i archiwum */
  width: calc(100% - 2.5rem);
  margin: 0 auto 3rem auto;
  padding: 2rem 0;
  box-sizing: border-box;
}

.single-project-layout-full {
  max-width: 1780px; /* Albo inna szerokość, która pasuje do Twojego designu */
  margin: 0 auto;
  width: 100%;
}

.single-post-container {
  max-width: 1400px;            /* Content zamknięty w mniejszym kontenerze */
  margin: 0 auto;
}

/* Podział na dwie kolumny (Artykuł + Sidebar) */
.single-post-layout-grid {
  display: grid;
  grid-template-columns: 1fr 380px; /* Główna kolumna zajmuje resztę, sidebar ma 380px */
  gap: 4rem;
  align-items: flex-start;
}

.post-main-column {
  width: 100%;
}

/*--------------------------------------------------------------
# 42. LEWA KOLUMNA – ARTYKUŁ GŁÓWNY I EFEKT OVERLAP
--------------------------------------------------------------*/
.post-featured-image-wrapper {
  width: 100%;
  height: 37.5rem;              /* Wysokość zdjęcia głównego (600px) */
  overflow: hidden;
  border-radius: 1.875rem;      /* Zaokrąglone narożniki zdjęcia promującego */
}

.featured-img-rounded {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Biała karta nachodząca na 1/3 zdjęcia */
.post-white-card {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
  width: 90%;                   /* Mniejsza szerokość karty, by boki zdjęcia były widoczne */
  margin: -12.5rem auto 3rem auto; /* Ujemny margines: wsuwa kartę na 200px (1/3 z 600px) */
  padding: 4rem;
  border-radius: 1.875rem;      /* Zaokrąglone narożniki karty tekstowej */
  box-shadow: 0 1.25rem 3.125rem rgba(4, 42, 45, 0.06);
  box-sizing: border-box;
}

/* Data z zieloną kropką */
.post-meta-top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}

.post-green-dot {
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-brand-green);    /* Zielona kropka */
  border-radius: 50%;
  flex-shrink: 0;
}

.post-date-text {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: #4A4A4A;
}

/* Tytuł artykułu */
.post-main-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--color-black);
  margin: 0 0 2rem 0;
  line-height: 1.2;
}

/* Treść artykułu z czarnym tekstem */
.post-entry-content {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  color: #000000;               /* Czarny tekst na białym tle */
  line-height: 1.6;
}

.post-entry-content p {
  margin: 0 0 1.5rem 0;
}

/* Boks Autora */
.post-author-box {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #EAEAEA;
}

.author-avatar-wrapper {
  width: 5rem;                  /* 80px */
  height: 5rem;                 /* 80px */
  flex-shrink: 0;
}

.author-img-circle {
  border-radius: 50%;           /* Okrągłe zdjęcie */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.author-display-name {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-black);
}

.author-display-role {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: #4A4A4A;
}

/*--------------------------------------------------------------
# 42a. GALERIA POD ARTYKUŁEM (LICOWANA Z BIAŁĄ KARTĄ)
--------------------------------------------------------------*/
.post-gallery-container {
  position: relative;
  box-sizing: border-box;
  
  /* Gwarancja, że galeria ma identyczną szerokość i centrowanie co .post-white-card */
  width: 90%;                   
  margin: 0 auto 3rem auto;     /* Centrowanie na ekranie + dolny odstęp */
  padding: 0;
}

/* Obsługa siatki dla starego formatu .gallery oraz nowego bloku Gutenberga .wp-block-gallery */
.post-gallery-container .gallery,
.post-gallery-container .wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* Dokładnie 3 zdjęcia w wierszu */
  gap: 1rem !important;        /* Odstępy między zdjęciami w pionie i poziomie */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Wymuszenie równego kadrowania miniaturek w galerii, by zachować siatkę */
.post-gallery-container .gallery-item,
.post-gallery-container .wp-block-image {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Stylizacja samych zdjęć - zaokrąglenie, proporcje i równe kadrowanie */
.post-gallery-container .gallery-item img,
.post-gallery-container .wp-block-gallery img {
  width: 100% !important;
  height: 15.625rem !important;  /* Stała wysokość kadrowania (np. 250px), aby zdjęcia pionowe i poziome wyglądały równo */
  border-radius: 1.25rem !important; /* Zaokrąglone narożniki zgodnie z wytycznymi grafika */
  object-fit: cover !important;  /* Obrazek wypełnia przestrzeń bez zniekształceń */
  display: block !important;
  transition: transform 0.3s ease;
}

/* Subtelny efekt hover na zdjęcia w galerii */
.post-gallery-container .gallery-item img:hover,
.post-gallery-container .wp-block-gallery img:hover {
  transform: scale(1.02);
}

/*--------------------------------------------------------------
# KOREKTA DLA MOBILE (RWD)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .post-gallery-container {
    width: 100%;                /* Na tabletach i mobile karta ma 100%, więc galeria też */
  }
}

@media screen and (max-width: 600px) {
  .post-gallery-container .gallery,
  .post-gallery-container .wp-block-gallery {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 zdjęcia w rzędzie na małych ekranach */
    gap: 1rem !important;
  }
  
  .post-gallery-container .gallery-item img,
  .post-gallery-container .wp-block-gallery img {
    height: 11.25rem !important; /* Nieco niższe zdjęcia na smartfonach */
  }
}

@media screen and (max-width: 420px) {
  .post-gallery-container .gallery,
  .post-gallery-container .wp-block-gallery {
    grid-template-columns: 1fr !important; /* 1 kolumna na bardzo wąskich telefonach */
  }
}

/*--------------------------------------------------------------
# INTEGRACJA WCAG DLA GALERII (WYSOKI KONTRAST)
--------------------------------------------------------------*/
html.high-contrast .post-gallery-container img {
  border: 1px solid #FFF200 !important; /* Jaskrawa, żółta ramka wokół każdego zdjęcia w kontraście */
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# 43. PRAWA KOLUMNA – SIDEBAR "NAJNOWSZE"
--------------------------------------------------------------*/
.post-sidebar-column {
  width: 100%;
  box-sizing: border-box;
}

.sidebar-main-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-black);
  margin: 0 0 2rem 0;
}

.sidebar-recent-posts-list {
  display: flex;
  flex-direction: column;
}

/* Konstrukcja pojedynczej karty w bocznej kolumnie */
.sidebar-post-card {
  display: flex;
  flex-direction: column;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #EAEAEA; /* Pozioma linia oddzielająca artykuły */
}

.sidebar-post-card:last-child {
  border-bottom: none;          /* Ostatni element nie ma linii */
  padding-bottom: 0;
  margin-bottom: 0;
}

.sidebar-post-thumb {
  width: 100%;
  height: 12.5rem;              /* Stałe kadrowanie zdjęcia w sidebarze */
  overflow: hidden;
  border-radius: 1rem;
  margin-bottom: 1.25rem;
}

.sidebar-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-post-content {
  display: flex;
  flex-direction: column;
}

/* Ustawienie kropki i daty w jednej linii */
.sidebar-post-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;                  /* Odstęp między kropką a tekstem daty */
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: #107A65;
  margin-bottom: 0.5rem;
}

/* Wygląd zielonej kropki w sidebarze */
.sidebar-green-dot {
  width: 0.5rem;                /* Minimalnie mniejsza kropka pasująca do mniejszego fontu */
  height: 0.5rem;
  background-color: var(--color-brand-green);
  border-radius: 50%;           /* Idealne koło */
  flex-shrink: 0;               /* Zabezpieczenie przed deformacją */
}

/*--------------------------------------------------------------
# INTEGRACJA WCAG (WYSOKI KONTRAST)
--------------------------------------------------------------*/
html.high-contrast .sidebar-green-dot {
  background-color: #FFF200 !important; /* W trybie kontrastu kropka zmienia się na jaskrawożółtą */
}

.sidebar-post-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;           /* Pomniejszony nagłówek tytułu */
  color: var(--color-black);
  margin: 0 0 1.25rem 0;
  line-height: 1.3;
}

.sidebar-post-title a {
  color: #042A2D;
  text-decoration: none;
}

.sidebar-post-title a:hover {
  color: #107A65;
}

.btn-sidebar-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-green);
  color: var(--color-black);
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.75rem;
  border-radius: 10rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
  align-self: flex-start;       /* Pigułka nie rozciąga się na całą szerokość */
}

.btn-sidebar-more:hover {
  color: var(--color-white);
  background-color: var(--color-medium-green);
}

.btn-sidebar-more:focus {
  outline: 3px solid #107A65;
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# 44. ADAPTACJA DLA MOBILE (RWD)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .single-post-layout-grid {
    grid-template-columns: 1fr; /* Na tabletach i mobile układ przechodzi w 1 kolumnę */
    gap: 4rem;
  }

  .post-white-card {
    width: 100%;                /* Karta rozciąga się na pełną szerokość */
    margin-top: -6rem;          /* Zmniejszamy overlap, by pasował do mniejszego ekranu */
    padding: 2.5rem 1.5rem;
  }

  .post-featured-image-wrapper {
    height: 25rem;              /* Niższe zdjęcie główne na tabletach */
  }
}

@media screen and (max-width: 480px) {
  .post-main-title {
    font-size: 1.85rem;
  }

  .post-featured-image-wrapper {
    height: 18.75rem;           /* Skalowanie zdjęcia pod smartfony */
  }

  .post-white-card {
    margin-top: -3.5rem;
  }

  .post-gallery-container .gallery {
    grid-template-columns: 1fr; /* Galeria na mobile przechodzi w jeden pionowy rząd */
    gap: 1rem;
  }

  .btn-sidebar-more {
    width: 100%;                /* Przyciski w sidebarze na całą szerokość telefonu */
    box-sizing: border-box;
  }
}

/*--------------------------------------------------------------
# 44a. DODATKI WCAG – SINGLE POST (KONTRAST I ZOOM)
--------------------------------------------------------------*/

/* WYSOKI KONTRAST (.high-contrast na html) */
html.high-contrast .single-post-section {
  background-color: #000000 !important;
}

html.high-contrast .post-white-card {
  background-color: #000000 !important;
  border: 2px solid #FFF200 !important;
  box-shadow: none !important;
}

html.high-contrast .post-main-title,
html.high-contrast .post-entry-content,
html.high-contrast .author-display-name,
html.high-contrast .author-display-role,
html.high-contrast .sidebar-main-title,
html.high-contrast .sidebar-post-title a,
html.high-contrast .post-date-text {
  color: #FFF200 !important;    /* Wszystkie napisy na biało */
}

html.high-contrast .post-green-dot {
  background-color: #FFF200 !important; /* Zamiana zielonej kropki na żółtą kontrastową */
}

html.high-contrast .sidebar-post-date {
  color: #FFF200 !important;    /* Żółta data w sidebarze */
}

html.high-contrast .post-author-box,
html.high-contrast .sidebar-post-card {
  border-color: #FFF200 !important; /* Linie oddzielające stają się żółte */
}

html.high-contrast .post-featured-image-wrapper,
html.high-contrast .sidebar-post-thumb,
html.high-contrast .author-avatar-wrapper img,
html.high-contrast .post-gallery-container .gallery-item img {
  border: 1px solid #FFF200 !important; /* Wyraźne odcięcie grafik od czarnego tła */
}

/* Przycisk Czytaj dalej (Sidebar) w kontraście - Żółta czcionka i ramka */
html.high-contrast .btn-sidebar-more {
  background-color: #000000 !important;
  color: #FFF200 !important;    /* Żółta czcionka kontrastowa */
  border: 3px solid #FFF200 !important;
}

html.high-contrast .btn-sidebar-more:hover,
html.high-contrast .btn-sidebar-more:focus {
  background-color: #FFF200 !important;
  color: #000000 !important;
  /* outline: 3px solid #ffffff !important; */
}

/* TRZYSTOPNIOWE POWIĘKSZANIE TEKSTU (.ts-medium i .ts-large) */
html.ts-medium .post-main-title { font-size: 2.3rem; }
html.ts-large .post-main-title { font-size: 2.5rem; }

html.ts-medium .post-entry-content { font-size: 1.25rem; }
html.ts-large .post-entry-content { font-size: 1.45rem; }

html.ts-medium .sidebar-main-title { font-size: 2.1rem; }
html.ts-large .sidebar-main-title { font-size: 2.4rem; }

html.ts-medium .sidebar-post-title { font-size: 1.45rem; }
html.ts-large .sidebar-post-title { font-size: 1.65rem; }

html.ts-medium .btn-sidebar-more { font-size: 1.05rem; }
html.ts-large .btn-sidebar-more { font-size: 1.2rem; }

/*--------------------------------------------------------------
# 45. PODSTRONA: PARTNERSTWO
--------------------------------------------------------------*/
.partnerstwo-page-content {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 3rem;
}

/* Uniwersalny mniejszy kontener centrujący treść */
.partner-container-1400 {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ZWIĘKSZONA INTERLINIA I CZARNY TEKST DLA TEKSTÓW BAZOWYCH */
.partnerstwo-page-content p {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;            /* Zwiększona interlinia dla lepszej czytelności WCAG */
  color: #000000;               /* Czarny tekst */
  margin: 0 0 1.5rem 0;
}

/*--- SEKCJA 1: INTRO (PRZEZROCZYSTE TŁO) ---*/
.partner-intro-section {
  padding: 4rem 1.25rem;
  background: transparent;
}

.partner-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Dwie kolumny */
  gap: 4rem;
}

/*--- SEKCJA 2: ZIELONA WSTĄŻKA (RAMA 1780px) ---*/
.partner-green-ribbon-section {
  max-width: 1780px;            /* Geometria ramowa */
  width: calc(100% - 2.5rem);
  margin: 0 auto 4rem auto;
  padding: 5rem 1.25rem;
  background-color: var(--color-dark-green);    /* Twoje zielone tło */
  border-radius: 1.875rem;      /* Duże zaokrąglenie rogów */
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  
  /* Tutaj możesz wstawić swoją wstążkę jako tło w CSS */
  background-image: url('images/ribbon-employers-bg.svg'); 
  background-repeat: no-repeat;
  background-position: 0rem -10rem;
  background-size: cover;
}

.partner-ribbon-content {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}

.partner-ribbon-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 2rem;              /* Pomniejszony nagłówek */
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 1.5rem 0;
}

.partner-ribbon-subtitle {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
  color: #ffffff !important;    /* Nadpisanie bazowego czarnego koloru w tej sekcji */
  margin: 0 !important;
}

/*--- SEKCJA 3: SZCZEGÓŁY (DWIE KOLUMNY 50%) ---*/
.partner-details-section {
  padding: 2rem 1.25rem 4rem 1.25rem;
}

.partner-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Dokładnie po 50% */
  gap: 4rem;
}

.partner-details-col {
  display: flex;
  flex-direction: column;
}

/* Pomniejszone nagłówki w sekcji 3 */
.partner-details-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;            /* Pomniejszony nagłówek zgodnie z życzeniem */
  line-height: 1.4;
  color: #042A2D;
  margin: 0 0 1.5rem 0;
}

/*--------------------------------------------------------------
# 45. PODSTRONA PARTNERSTWO: UNIKALNA SEKCJA FORMULARZA
--------------------------------------------------------------*/

/* Kontener siatki dla formularza i danych dopasowany do makiet */
.contact-partner-grid-container {
  display: flex;
  width: 100%;
  gap: 4rem;                    /* Odstęp między połówkami */
  max-width: 1400px;            /* Dopasowanie do geometrii podstrony partnerstwa */
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 3rem;            /* Odstęp od dolnej krawędzi baneru/sekcji wyżej */
  padding-bottom: 5rem;         /* Odstęp od górnej krawędzi stopki */
}

/* Kolumna lewa (Teksty) i kolumna prawa (Formularz) po 50% */
.cp-left-col,
.cp-right-col {
  width: 50%;
  display: flex;
  flex-direction: column;
}

/* Wyśrodkowanie lewej kolumny (tekstowej) w pionie względem formularza */
.cp-left-col {
  justify-content: center;
}

/* Prawa strona: Zawężenie formularza do 3/4 połówki i dopchnięcie do prawej krawędzi */
.cp-form-wrapper-inner {
  margin-left: auto;            
  margin-right: 0;
}

/* Tekst wprowadzający pod nagłówkiem w lewej kolumnie */
.partner-contact-intro-text {
  font-family: "Gotham", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #000000;
  margin: 1rem 0 2.5rem 0;
}

/*--------------------------------------------------------------
# 45.1. STYLIZACJA FORMULARZA KONTAKTOWEGO (Białe tło, jasne tło pól)
--------------------------------------------------------------*/
.cp-form-main-heading {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 3rem;          
  color: var(--color-black);
  margin: 0 0 1.5rem 0;
}

.cp-custom-contact-form {
  background-color: #ffffff;
  border-radius: 1.875rem;       /* Zaokrąglenie 30px wszystkich narożników */
  padding: 2.5rem;              /* Wewnętrzne światło w formularzu */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Subtelny cień pod makietę */
}

/* Pola tekstowe obok siebie (Imię / E-mail) */
.cp-form-row-twin {
  display: flex;
  gap: 1.25rem;                 /* 20px przerwy między imieniem a mailem */
  margin-bottom: 1.25rem;
}

.cp-form-row-twin .cp-form-field-group {
  width: 50%;
  margin-bottom: 0;
}

.cp-form-field-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

.cp-field-label {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;         /* 15px */
  color: #333333;
  margin-bottom: 0.5rem;
}

.cp-required-star {
  color: #c92a2a;
  margin-left: 0.125rem;
}

/* Uniwersalny styl dla Input i Textarea */
.cp-form-input-field {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  padding: 0 1.25rem;            
  border: 1px solid #cccccc;
  border-radius: 1rem !important;
  background-color: #D8F2F1;     /* Nowy kolor tła z makiety */
  color: var(--color-medium-green);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Sztywna wysokość 56px (3.5rem) wyłącznie dla pól jednolinijkowych */
input.cp-form-input-field {
  height: 3.5rem;               /* Dokładnie 56px wysokości */
  line-height: 3.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Specjalne traktowanie dla pola wiadomości */
textarea.cp-form-input-field {
  padding: 1rem 1.25rem;
  height: auto;
  min-height: 10rem;             /* Bezpieczna minimalna wysokość */
}

/* Widoczny, kontrastowy Focus pod WCAG */
.cp-form-input-field:focus {
  border-color: var(--color-medium-green);
  outline: 2px solid var(--color-medium-green);
  outline-offset: 1px;
  background-color: #ffffff;     /* Rozjaśnienie do bieli podczas pisania */
}

.cp-field-textarea {
  resize: vertical;
}

/*--------------------------------------------------------------
# 45.2. OKRĄGŁY CHECKBOX (Bezpieczny dla czytników screen-reader)
--------------------------------------------------------------*/
.cp-form-checkbox-wrapper {
  margin-bottom: 1.5rem;
  position: relative;
}

.cp-native-checkbox-hidden {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cp-checkbox-custom-label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 0.875rem;          /* 14px */
  line-height: 1.5;
  color: #444444;
  user-select: none;
}

.cp-checkbox-custom-label::before {
  content: "";
  display: inline-block;
  min-width: 1.5rem;            /* 24px */
  height: 1.5rem;               /* 24px */
  border: 2px solid #cccccc;
  border-radius: 50%;           /* Zamiana w koło */
  margin-right: 0.875rem;
  background-color: #ffffff;
  margin-top: 0.125rem;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cp-native-checkbox-hidden:checked + .cp-checkbox-custom-label::before {
  background-color: var(--color-medium-green);
  border-color: var(--color-medium-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 0.875rem;
  background-repeat: no-repeat;
  background-position: center;
}

.cp-native-checkbox-hidden:focus + .cp-checkbox-custom-label::before {
  outline: 2px solid var(--color-medium-green);
  outline-offset: 2px;
}

/* Obowiązek informacyjny RODO */
.cp-form-info-clause {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 0.75rem;           /* 12px tekst prawny */
  line-height: 1.6;
  color: #666666;
  margin-bottom: 1.5rem;
}

/* Przycisk wysyłki */
.cp-btn-form-submit {
  width: 100%;
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;          /* 18px */
  color: #ffffff;
  background-color: var(--color-medium-green);
  border: none;
  border-radius: 1.5rem;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cp-btn-form-submit:hover {
  background-color: var(--color-brand-green);
}

.cp-btn-form-submit:focus {
  outline: 3px solid var(--color-medium-green);
  outline-offset: 2px;
}

/*--------------------------------------------------------------
# 45.3. LEWA STRONA: LISTA DANYCH KONTAKTOWYCH I GODZIN
--------------------------------------------------------------*/
.cp-info-wrapper-inner {
  padding-right: 2rem;          /* Oddech od środka makiety strony */
}

.cp-info-main-heading {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  color: var(--color-black);
  margin: 0 0 1.5rem 0;
}

.cp-info-main-subheading {
  color: var(--color-brand-green);
}

.cp-contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cp-info-list-item {
  display: flex;
  align-items: center;
}

/* Strefa grafiki ikon 62px */
.cp-info-icon-zone {
  width: 3.875rem;              /* 62px */
  height: 3.875rem;             
  margin-right: 1.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-info-icon-zone img {
  width: 100%;
  height: auto;
  display: block;
}

.cp-info-text-zone {
  display: flex;
  flex-direction: column;
  font-family: "Gotham", sans-serif;
  color: #333333;
}

.cp-info-title {
  font-weight: 700;
  font-size: 1.125rem;          /* 18px */
  color: var(--color-black);
  margin-bottom: 0.25rem;
}

.cp-info-details {
  font-weight: 300;
  font-size: 1rem;              /* 16px */
  line-height: 1.4;
}

.cp-contact-clickable-link {
  color: var(--color-medium-green);
  text-decoration: none;
  font-weight: 400;
}

.cp-contact-clickable-link:hover,
.cp-contact-clickable-link:focus {
  text-decoration: underline;
  outline: none;
}

/* Tabela godzin pracy */
.cp-hours-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.375rem;
  width: 100%;
  max-width: 20rem;             /* Szerokość tabelki 320px */
}

.cp-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.4;
  color: #333333;
  border-bottom: 1px dashed #e0e0e0;
  padding-bottom: 0.25rem;
}

.cp-hours-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cp-hours-day {
  padding-right: 1rem;
}

.cp-hours-time {
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.cp-hours-time.status-closed {
  color: #888888;
  font-weight: 300;
  font-style: italic;
}

/*--------------------------------------------------------------
# 46. ADAPTACJA RESPNSYWNA (RWD) DLA SEKCJI FORMULARZA
--------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
  /* Skalowanie dużych nagłówków na mniejszych desktopach i tabletach */
  .cp-info-main-heading,
  .cp-form-main-heading {
    font-size: 2.5rem;
  }
  .cp-form-wrapper-inner {
    width: 90%; /* Zwiększamy obszar formularza na średnich ekranach */
  }
}

@media screen and (max-width: 1024px) {
  .contact-partner-grid-container {
    flex-direction: column;     /* Układ pionowy od poziomu tabletów */
    gap: 4rem;
    padding-top: 2rem;
    padding-bottom: 4rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .cp-left-col,
  .cp-right-col {
    width: 100%;                /* Obie sekcje rozciągają się na pełną szerokość */
  }
  .cp-form-wrapper-inner {
    width: 100%;                /* Likwidacja sztucznego zawężenia 3/4 */
  }
  .cp-info-wrapper-inner {
    padding-right: 0;           /* Reset prawego marginesu */
  }
  .partner-contact-intro-text {
    margin-bottom: 1.5rem;      /* Dostosowanie marginesów */
  }
}

@media screen and (max-width: 600px) {
  .cp-form-row-twin {
    flex-direction: column;     /* Pola Imię i E-mail lądują jedno pod drugim na smartfonach */
    gap: 1.25rem;
  }
  .cp-form-row-twin .cp-form-field-group {
    width: 100%;
  }
  .cp-custom-contact-form {
    padding: 1.5rem;            /* Mniejszy padding wewnętrzny formularza na mobile */
    border-radius: 1.25rem;
  }
  .cp-info-main-heading,
  .cp-form-main-heading {
    font-size: 2rem;            /* Kompaktowe nagłówki na telefonach */
  }
  .cp-info-icon-zone {
    width: 3rem;                /* Przeskalowanie ikon do 48px na mobile */
    height: 3rem;
    margin-right: 1rem;
  }
}

/*--------------------------------------------------------------
# 47. TRYB WYSOKIEGO KONTRASTU (WCAG) DLA SEKCJI
--------------------------------------------------------------*/
html.high-contrast .cp-custom-contact-form {
  background-color: var(--bg-color) !important;
  border: 2px solid var(--text-color);
  border-radius: 0;
  box-shadow: none;
}

html.high-contrast .cp-form-main-heading,
html.high-contrast .cp-info-main-heading,
html.high-contrast .cp-field-label,
html.high-contrast .cp-info-title,
html.high-contrast .cp-info-details,
html.high-contrast .checkbox-text-content,
html.high-contrast .cp-form-info-clause,
html.high-contrast .partner-contact-intro-text {
  color: var(--text-color) !important;
}

html.high-contrast .cp-form-input-field {
  background-color: var(--bg-color) !important;
  border: 2px solid var(--text-color);
  color: var(--text-color) !important;
  border-radius: 0;
}

html.high-contrast .cp-form-input-field:focus {
  outline: 2px solid var(--link-color) !important;
}

html.high-contrast .cp-btn-form-submit {
  background-color: var(--bg-color) !important;
  border: 2px solid var(--link-color);
  color: var(--link-color) !important;
  border-radius: 0;
}

html.high-contrast .cp-btn-form-submit:hover,
html.high-contrast .cp-btn-form-submit:focus {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
  border-color: var(--text-color) !important;
}

html.high-contrast .cp-checkbox-custom-label::before {
  border: 2px solid var(--text-color) !important;
  background-color: var(--bg-color) !important;
  border-radius: 50%;
}

html.high-contrast .cp-native-checkbox-hidden:checked + .cp-checkbox-custom-label::before {
  background-color: var(--text-color) !important;
}

html.high-contrast .cp-contact-clickable-link {
  color: var(--link-color) !important;
}

html.high-contrast .cp-info-icon-zone {
  border: 1px dashed var(--text-color);
  background-color: rgba(255, 255, 255, 0.05);
}

html.high-contrast .cp-hours-day,
html.high-contrast .cp-hours-time,
html.high-contrast .cp-hours-time.status-closed {
  color: var(--text-color) !important;
  font-style: normal !important;
}

html.high-contrast .cp-hours-row {
  border-bottom: 1px dashed var(--text-color);
}

/*--------------------------------------------------------------
# 46. RESPONSIVENESS (RWD) FOR PARTNERSTWO
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .partner-intro-grid,
  .partner-details-grid {
    grid-template-columns: 1fr; /* Na tabletach i mobile przechodzimy w 1 kolumnę */
    gap: 2.5rem;
  }
  
  .partner-green-ribbon-section {
    padding: 4rem 2rem;
  }

  .partner-ribbon-title {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 480px) {
  .partner-green-ribbon-section {
    width: 100%;
    border-radius: 0;           /* Na telefonach prostujemy boki zielonej belki */
    padding: 3.5rem 1rem;
  }

  .partner-ribbon-title {
    font-size: 1.5rem;
  }

  .partner-ribbon-subtitle {
    font-size: 1.1rem !important;
  }

  .partner-details-title {
    font-size: 1.3rem;
  }
}

/*--------------------------------------------------------------
# 47. DODATKI WCAG DLA PODSTRONY PARTNERSTWO
--------------------------------------------------------------*/

/* TRYB WYSOKIEGO KONTRASTU */
html.high-contrast .partnerstwo-page-content {
  background-color: #000000 !important;
}

html.high-contrast .partnerstwo-page-content p,
html.high-contrast .partner-details-title {
  color: #FFF200 !important;    /* Kontrastowa biel tekstu */
}

html.high-contrast .partner-green-ribbon-section {
  background-color: #000000 !important;
  background-image: none !important; /* Usuwamy wstążkę w tle zgodnie z WCAG */
  border: 2px solid #FFF200 !important; /* Dodajemy jaskrawą ramkę zamiast koloru */
}

html.high-contrast .partner-ribbon-title,
html.high-contrast .partner-ribbon-subtitle {
  color: #FFF200 !important;    /* Żółty jaskrawy kolor dla tekstu na czarnym tle ramki */
}

/* TRZYSTOPNIOWE SKALOWANIE CZCIONEK (.ts-medium / .ts-large) */
html.ts-medium .partnerstwo-page-content p { font-size: 1.2rem; }
html.ts-large .partnerstwo-page-content p { font-size: 1.35rem; }

html.ts-medium .partner-ribbon-title { font-size: 2.3rem; }
html.ts-large .partner-ribbon-title { font-size: 2.6rem; }

html.ts-medium .partner-ribbon-subtitle { font-size: 1.45rem !important; }
html.ts-large .partner-ribbon-subtitle { font-size: 1.65rem !important; }

html.ts-medium .partner-details-title { font-size: 1.75rem; }
html.ts-large .partner-details-title { font-size: 1.95rem; }

/*--------------------------------------------------------------
# 49. STRONA O FUNDACJI - SZEROKOŚĆ MAX 1400PX, TŁO PRZEZROCZYSTE
--------------------------------------------------------------*/
.p-about-page-wrapper {
  width: 100%;
  background-color: transparent !important;
  padding-top: 3rem;
  padding-bottom: 0rem;
  box-sizing: border-box;
}

.p-about-container {
  max-width: 1400px;
  width: calc(100% - 2.5rem); /* Stały bezpieczny margines boczny 20px */
  margin: 0 auto;
  background-color: transparent !important;
  box-sizing: border-box;
}

/* Wspólny nagłówek 3rem */
.p-about-heading-3rem, 
.p-about-page-title {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 3rem;              /* Wymagane 3rem */
  line-height: 1.2;
  color: var(--color-black);
  margin: 0 0 1.5rem 0;
}

.p-about-page-stitle {
  color: var(--color-brand-green);
}

/* Opisy i teksty */
.p-about-lead-text {
  font-family: "Gotham", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-black);
  margin-bottom: 0rem;
}

.p-about-body-text {
  font-family: "Gotham", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-black);
  margin: 0;
}

/* Subnagłówek w sekcji hero */
.p-about-section-subheading {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-black);
  margin: 1rem 0 1rem 0;
}

/*--------------------------------------------------------------
# 49.1 SEKCJA 1: HERO (50% / 50%)
--------------------------------------------------------------*/
.p-about-hero-section {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
  margin-bottom: 5rem;
  width: 100%;
}

.p-about-hero-image-col {
  width: 50%;
  display: flex;
  justify-content: flex-start; /* Wyrównanie zdjęcia do lewej */
}

.p-about-hero-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1.25rem;       /* Lekkie estetyczne zaokrąglenie zdjęcia */
  display: block;
}

.p-about-hero-content-col {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 50%;
}

/*--------------------------------------------------------------
# 49.2 SEKCJA 2: CO CHCEMY ZMIENIAĆ / MISJA (50% / 50%)
--------------------------------------------------------------*/
.p-about-mission-section {
  display: flex;
  gap: 4rem;
  margin-bottom: 6rem;
  width: 100%;
}

.p-about-mission-col {
  width: 50%;
}

.p-about-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-p-about-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-green);
  color: var(--color-black);
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1.125rem 3rem;
  border-radius: 10rem;         /* Idealne zaokrąglenie pigułkowe */
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-p-about-actions:hover {
  color: var(--color-black);
  background-color: var(--color-medium-green);
}

.btn-p-about-actions:focus {
  outline: 3px solid #107A65;
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# 49.3 SEKCJA 3: NASI PARTNERZY ( UNIWERSALNA SIATKA )
--------------------------------------------------------------*/
.p-about-partners-section {
  width: 100%;
  margin-top: 2rem;
}

.p-about-partners-sub {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-bblack);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.5rem;
}

/* Siatka dla partnerów - automatyczne zachowanie szerokości przy dodawaniu nowych */
.p-about-partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Domyślnie 3 kafelki w rzędzie */
  gap: 2rem;
  margin-top: 3rem;
  width: 100%;
}

/* Pojedynczy kafelek partnera */
.p-about-partner-card {
  background-color: #ffffff;    /* Białe tło w środku */
  border-radius: 1.25rem;       /* Zaokrąglone narożniki */
  padding: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10rem;            /* Równa wysokość dla wszystkich kafelków */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); /* Minimalny cień dla odcięcia od przezroczystego tła strony */
  box-sizing: border-box;
}

.p-about-partner-card img {
  max-width: 100%;
  max-height: 4.5rem;           /* Blokada wysokości logotypu, by zachować estetykę */
  object-fit: containment;
  height: auto;
  display: block;
}

/*--------------------------------------------------------------
# 49.4 MOBILNOŚĆ I RESPONSYWNOŚĆ (MEDIA QUERIES)
--------------------------------------------------------------*/
@media screen and (max-width: 1100px) {
  .p-about-heading-3rem, 
  .p-about-page-title {
    font-size: 2.5rem;          /* Zmniejszenie fontu na średnich ekranach */
  }
  .p-about-hero-section,
  .p-about-mission-section {
    gap: 2.5rem;
  }
}

@media screen and (max-width: 992px) {
  /* Zmiana układów 50/50 na pionowe (jeden pod drugim) */
  .p-about-hero-section {
    flex-direction: column;
  }
  .p-about-hero-image-col,
  .p-about-hero-content-col {
    width: 100%;
  }
  .p-about-mission-section {
    flex-direction: column;
    gap: 3rem;
  }
  .p-about-mission-col {
    width: 100%;
  }
  /* Zmiana siatki partnerów z 3 kolumn na 2 kolumny na tabletach */
  .p-about-partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media screen and (max-width: 600px) {
  .p-about-heading-3rem, 
  .p-about-page-title {
    font-size: 2rem;            /* Wielkość dopasowana do smartfonów */
  }
  .p-about-page-wrapper {
    padding-top: 1.5rem;
    padding-bottom: 0rem;
  }
  .p-about-section-subheading {
    font-size: 1.25rem;
    margin: 2rem 0 1rem 0;
  }
  /* Na małych telefonach logotypy układają się jeden pod drugim na 100% szerokości */
  .p-about-partners-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
  }
  .p-about-partner-card {
    padding: 1.5rem;
    min-height: 8rem;
  }
}

/*--------------------------------------------------------------
# 49.5 DOSTOSOWANIE DO TRYBU WYSOKIEGO KONTRASTU (WCAG)
--------------------------------------------------------------*/
html.high-contrast .p-about-heading-3rem,
html.high-contrast .p-about-page-title,
html.high-contrast .p-about-page-stitle,
html.high-contrast .p-about-section-subheading,
html.high-contrast .p-about-partners-sub,
html.high-contrast .p-about-lead-text,
html.high-contrast .p-about-body-text {
  color: var(--text-color) !important;
}

html.high-contrast .p-about-partner-card {
  background-color: var(--bg-color) !important; /* Zamiana na tło systemowe wysokiego kontrastu */
  border: 2px solid var(--text-color) !important;
  border-radius: 0 !important;   /* Usunięcie zaokrągleń w trybie WCAG dla czystości geometrycznej */
  box-shadow: none !important;
}

html.high-contrast .p-about-hero-img {
  border: 2px solid var(--text-color) !important;
  border-radius: 0 !important;
}
/*--------------------------------------------------------------
# 50. STRONA NASZ ZESPÓŁ - MAŁY KONTENER (1400PX), TŁO TRANSPARENTNE
--------------------------------------------------------------*/
.p-team-page-wrapper {
  width: 100%;
  background-color: transparent !important;
  padding-top: 4rem;
  padding-bottom: 6rem;
  box-sizing: border-box;
}

.p-team-container {
  max-width: 1400px;
  width: calc(100% - 2.5rem);   /* Bezpieczny odstęp boczny 20px od ekranu */
  margin: 0 auto;
  background-color: transparent !important;
  box-sizing: border-box;
}

/* Teksty wprowadzające */
.p-team-intro-section {
  margin-bottom: 4rem;
}

.p-team-intro-lead {
  font-family: "Gotham", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-black);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.p-team-intro-text {
  font-family: "Gotham", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333333;
  margin: 0;
}

/* Struktura sekcji */
.p-team-section {
  margin-bottom: 5rem;
  width: 100%;
}

.p-team-heading-3rem {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0 0 1rem 0;
}

.p-team-section-desc {
  font-family: "Gotham", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #333333;
  margin-bottom: 3rem;
}

/*--------------------------------------------------------------
# 50.1 SIATKI ELEMENTÓW (DYNAMICZNE ULEGANIE ROZBUDOWIE)
--------------------------------------------------------------*/
.p-team-grid {
  display: grid;
  gap: 2.5rem;
  width: 100%;
}

/* Zarząd: Domyślnie 3 kolumny */
.p-team-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Zespół: Domyślnie 4 kolumny */
.p-team-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Indywidualna karta członka zespołu */
.p-team-member-card {
  display: flex;
  flex-direction: column;
  background: transparent !important; /* Bez wymuszonego tła */
  box-sizing: border-box;
}

/* Kontener na zdjęcie z zaokrąglonymi narożnikami */
.p-team-member-photo-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;          /* Idealny kwadrat bez względu na wgrany plik */
  overflow: hidden;
  border-radius: 1.25rem;       /* Zaokrąglone narożniki dla kafelka */
  margin-bottom: 1.25rem;
  box-sizing: border-box;
}

.p-team-member-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* Dopasowanie obrazu wewnątrz kadru */
  display: block;
}

/* Bloki z podpisami (Brak sztywnych wysokości - wsparcie dla zoomu) */
.p-team-member-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.p-team-member-name {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
  line-height: 1.3;
  color: var(--color-black);
  margin: 0 0 0.375rem 0;
  padding: 0;
}

.p-team-member-role {
  font-family: "Gotham", sans-serif;
  font-size: 1.25rem;
  text-align: center;
  line-height: 1.4;
  color: var(--color-brand-green);
  font-weight: 400;
}

/*--------------------------------------------------------------
# 50.2 MOBILNOŚĆ I RESPONSYWNOŚĆ (MEDIA QUERIES)
--------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
  .p-team-heading-3rem {
    font-size: 2.5rem;
  }
  .p-team-grid {
    gap: 1.75rem;
  }
  /* Zespół z 4 przechodzi płynnie na 3 kolumny na średnich laptopach */
  .p-team-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 992px) {
  /* Wszystkie siatki ujednolicamy na tabletach do 2 kolumn */
  .p-team-grid-3,
  .p-team-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .p-team-intro-lead {
    font-size: 1rem;
  }
}

@media screen and (max-width: 600px) {
  .p-team-heading-3rem {
    font-size: 2rem;
  }
  .p-team-page-wrapper {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
  .p-team-intro-section {
    margin-bottom: 3rem;
  }
  /* Smartfony: Pełen układ pionowy (1 kolumna) */
  .p-team-grid-3,
  .p-team-grid-4 {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .p-team-member-photo-wrapper {
    margin-bottom: 1rem;
  }
  .p-team-member-name {
    font-size: 1.1875rem;
  }
}

/*--------------------------------------------------------------
# 50.3 DOSTOSOWANIE DO TRYBU WYSOKIEGO KONTRASTU (WCAG - ŻÓŁTE NAPISY)
--------------------------------------------------------------*/
html.high-contrast .p-team-heading-3rem,
html.high-contrast .p-team-intro-lead,
html.high-contrast .p-team-intro-text,
html.high-contrast .p-team-section-desc,
html.high-contrast .p-team-member-name,
html.high-contrast .p-team-member-role {
  color: #ffff00 !important;    /* Wymuszenie w pełni zgodnych, żółtych napisów w trybie WCAG */
}

html.high-contrast .p-team-member-photo-wrapper {
  border: 2px solid #ffff00 !important; /* Ramka wokół zdjęcia w kontrastowym żółtym kolorze */
  border-radius: 0 !important;  /* Usunięcie zaokrągleń w trybie geometrycznym wysokiego kontrastu */
}

/*--------------------------------------------------------------
# 51. STRONA BAZA WIEDZY - MAŁY KONTENER (1400PX), TŁO TRANSPARENTNE
--------------------------------------------------------------*/
.p-kb-page-wrapper {
  width: 100%;
  background-color: transparent !important;
  padding-top: 4rem;
  padding-bottom: 6rem;
  box-sizing: border-box;
}

.p-kb-container {
  max-width: 1400px;
  width: calc(100% - 2.5rem);
  margin: 0 auto;
  background-color: transparent !important;
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# 51.1 SIATKA I IDEALNE WYŚRODKOWANIE W CENTRUM
--------------------------------------------------------------*/
.p-kb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  width: 100%;
}

.p-kb-card {
  position: relative;
  min-height: 18rem;
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* Kontener treści - odpowiada za idealne centrowanie pion / poziom */
.p-kb-card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;      /* Środek w pionie */
  align-items: start;          /* Środek w poziomie */
  text-align: left;
  box-sizing: border-box;
}

/* Tytuł na kafelku */
.p-kb-card-title {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 0 0 1.5rem 0 !important;
  padding: 0;
}

/* Strefa przycisku */
.p-kb-action-zone {
  display: flex;
  justify-content: left;
  align-items: center;
}

/* Przycisk uniwersalny */
.p-kb-btn {
  display: inline-block;
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none !important;
  padding: 0.75rem 2rem;
  border-radius: 1.5rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

/*--------------------------------------------------------------
# 51.2 STYLOWANIE SPECYFICZNYCH KAFELKÓW (ZDJĘCIE PRZENIESIONE TUTAJ)
--------------------------------------------------------------*/

/* Kafelek 1: Ze zdjęciem w tle ładowanym przez CSS */
.p-kb-card-with-bg {
  background-image: var(--card-bg); /* Ścieżka relatywna do pliku CSS */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.p-kb-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1;
}

.p-kb-card-with-bg .p-kb-card-title {
  color: var(--color-white);
}

.p-kb-card-with-bg .p-kb-btn {
  color: var(--color-black);
  /* border: 2px solid var(--color-brand-green); */
  background-color: var(--color-brand-green);
}

.p-kb-card-with-bg .p-kb-btn:hover {
  background-color: var(--color-medium-green);
  color: var(--color-white);
}

/* Kafelek 2: Z jednolitym tłem #D8F2F1 */
.p-kb-card-solid-bg {
  background-color: #D8F2F1 !important;
}

.p-kb-card-solid-bg .p-kb-card-title {
  color: var(--color-black);
}

.p-kb-card-solid-bg .p-kb-btn {
 
  color: var(--color-black);
  /* border: 2px solid var(--color-brand-green); */
  background-color: var(--color-brand-green);
}

.p-kb-card-solid-bg .p-kb-btn:hover {
  background-color: var(--color-medium-green);
  color: var(--color-white);
}

/*--------------------------------------------------------------
# 51.3 RESPONSYWNOŚĆ I RWD
--------------------------------------------------------------*/
@media screen and (max-width: 1100px) {
  .p-kb-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media screen and (max-width: 768px) {
  .p-kb-page-wrapper {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }
  .p-kb-card {
    min-height: 16rem;
  }
  .p-kb-card-title {
    font-size: 1.35rem;
  }
}

@media screen and (max-width: 600px) {
  .p-kb-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .p-kb-card {
    min-height: 15rem;
  }
  .p-kb-card-content {
    padding: 2rem 1.5rem;
  }
}

/*--------------------------------------------------------------
# 51.4 WYSOKI KONTRAST (WCAG - ŻÓŁTE NAPISY)
--------------------------------------------------------------*/
html.high-contrast .p-kb-card {
  background-image: none !important;
  background-color: var(--bg-color) !important;
  border: 2px solid #ffff00 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.high-contrast .p-kb-card-overlay {
  display: none !important;
}

html.high-contrast .p-kb-card-title {
  color: #ffff00 !important;
}

html.high-contrast .p-kb-btn {
  background-color: var(--bg-color) !important;
  border: 2px solid #ffff00 !important;
  color: #ffff00 !important;
  border-radius: 0 !important;
}

html.high-contrast .p-kb-btn:hover,
html.high-contrast .p-kb-btn:focus {
  background-color: #ffff00 !important;
  color: var(--bg-color) !important;
}

/*--------------------------------------------------------------
# 52. STRONA WSPARCIE FINANSOWE - AKORDEON WCAG (1400PX)
--------------------------------------------------------------*/
.p-acc-page-wrapper {
  width: 100%;
  background-color: transparent !important;
  padding-top: 4rem;
  padding-bottom: 6rem;
  box-sizing: border-box;
}

.p-acc-container {
  max-width: 1400px;
  width: calc(100% - 2.5rem);
  margin: 0 auto;
  background-color: transparent !important;
  box-sizing: border-box;
}

.p-acc-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Pojedynczy wiersz akordeonu separowany linią dolną */
.p-acc-item {
  width: 100%;
  border-bottom: 1px solid #cccccc; /* Separator zastępujący hr */
}

/* Natywny przycisk wyzwalający - kluczowy dla dostępności cyfrowej */
.p-acc-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent !important;
  border: none;
  padding: 2rem 0;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

/* Wyraźny focus dla osób poruszających się tabulatorem */
.p-acc-trigger:focus-visible {
  outline: 3px solid var(--color-medium-green);
  outline-offset: 4px;
}

/* Tytuł pozycji akordeonu */
.p-acc-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 2rem;              /* Wymagane 2rem */
  color: var(--color-black);
  padding-right: 2rem;
}

/* Kontener stanu (Napis + Dzióbek) wyrównany do prawej */
.p-acc-state-wrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.p-acc-state-text {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-medium-green);
  margin-right: 0.75rem;
}

/* Dynamiczny ostry nawias (dzióbek) zrobiony w CSS */
.p-acc-icon {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 3px solid var(--color-medium-green);
  border-bottom: 3px solid var(--color-medium-green);
  transform: rotate(45deg); /* Dzióbek w dół */
  transition: transform 0.25s ease;
  margin-top: -4px;
}

/* Stylizowanie stanu po rozwinięciu (aria-expanded="true") */
.p-acc-trigger[aria-expanded="true"] .p-acc-icon {
  transform: rotate(-135deg); /* Dzióbek w górę */
  margin-top: 4px;
}

/*--------------------------------------------------------------
# 52.1 KAFELEK ROZWIJANY (TŁO #D8F2F1, ZAOKRĄGLONE ROGI)
--------------------------------------------------------------*/
.p-acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out; /* Płynna animacja zwijania i rozwijania */
  width: 100%;
  box-sizing: border-box;
}
/* Gdy element ma atrybut aria-hidden="true", wymuszamy zero wysokości */
.p-acc-content[aria-hidden="true"] {
  max-height: 0 !important;
}

/* Kiedy sekcja jest widoczna, JS nada klasę lub wysokość, poniższy selektor dba o strukturę */
.p-acc-trigger[aria-expanded="true"] + .p-acc-content {
  max-height: 3000px; /* Bezpieczny limit wysokości dla długich tekstów */
}

.p-acc-content-inner {
  background-color: #D8F2F1 !important;
  border-radius: 1.25rem;
  padding: 3rem;
  margin-bottom: 2rem;
  box-sizing: border-box;
}

/* Style tekstów wewnątrz akordeonu */
.p-acc-mini-heading {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-black);
  margin: 0 0 0.75rem 0;
}

.p-acc-text {
  font-family: "Gotham", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #222222;
  margin: 0 0 2rem 0;
}

.p-acc-text:last-of-type {
  margin-bottom: 0;
}

/* Lista nieuporządkowana */
.p-acc-list {
  margin: 0 0 2rem 0;
  padding-left: 1.5rem;
}

.p-acc-list li {
  font-family: "Gotham", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #222222;
  margin-bottom: 0.5rem;
  list-style-type: disc;
}

/* Link źródłowy */
.p-acc-source a {
  color: var(--color-medium-green);
  text-decoration: underline !important;
  word-break: break-all;        /* Chroni przed rozjechaniem kontenera przez długi URL */
}

/*--------------------------------------------------------------
# 52.2 MOBILNOŚĆ I RWD
--------------------------------------------------------------*/
@media screen and (max-width: 992px) {
  .p-acc-title {
    font-size: 1.6rem;
  }
  .p-acc-content-inner {
    padding: 2rem;
  }
}

@media screen and (max-width: 600px) {
  .p-acc-trigger {
    padding: 1.5rem 0;
    align-items: flex-start;    /* Na mobile tekst tytułu wyrównany do góry */
  }
  .p-acc-title {
    font-size: 1.25rem;         /* Bezpieczny wymiar dla małych smartfonów */
    padding-right: 1rem;
  }
  .p-acc-state-text {
    font-size: 0.9375rem;       /* Zmniejszenie napisu Rozwiń/Zwiń */
  }
  .p-acc-content-inner {
    padding: 1.5rem;
  }
  .p-acc-mini-heading {
    font-size: 1.125rem;
  }
}

/*--------------------------------------------------------------
# 52.3 WYSOKI KONTRAST (WCAG - ŻÓŁTE NAPISY)
--------------------------------------------------------------*/
html.high-contrast .p-acc-item {
  border-bottom: 2px solid #ffff00 !important;
}

html.high-contrast .p-acc-title,
html.high-contrast .p-acc-state-text,
html.high-contrast .p-acc-mini-heading,
html.high-contrast .p-acc-text,
html.high-contrast .p-acc-list li,
html.high-contrast .p-acc-source a {
  color: #ffff00 !important;    /* Żółte napisy w całym komponencie */
}

html.high-contrast .p-acc-icon {
  border-right-color: #ffff00 !important;
  border-bottom-color: #ffff00 !important;
}

html.high-contrast .p-acc-content-inner {
  background-color: var(--bg-color) !important; /* Wymuszenie tła systemowego wysokiego kontrastu */
  border: 2px solid #ffff00 !important;
  border-radius: 0 !important;  /* Geometryczny wygląd WCAG */
}

html.high-contrast .p-acc-trigger:focus-visible {
  outline: 3px solid #ffff00;
}

/*--------------------------------------------------------------
# 50. STRONA - JAK WSPIERAMY
--------------------------------------------------------------*/
.wsparcie-intro-section {
  margin-bottom: 4rem;
}
.wsparcie-heading-3rem {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0 0 1rem 0;
}

.p-team-intro-text {
  font-family: "Gotham", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333333;
  margin: 0;
}

.p-kb-wsparcie-card-title {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1.5rem 0 1.5rem 0 !important;
  padding: 0;
}

.p-wsparcie-body-text {
  font-family: "Gotham", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  margin: 0 0 1.5rem 0 !important;
  color: var(--color-black);
  margin: 0;
}

.p-kb-card-with-bg .p-kb-wsparcie-card-title,
.p-kb-card-with-bg .p-wsparcie-body-text  {
  color: var(--color-white);
}


/*--------------------------------------------------------------
# 50.3 DOSTOSOWANIE DO TRYBU WYSOKIEGO KONTRASTU (WCAG - ŻÓŁTE NAPISY)
--------------------------------------------------------------*/
html.high-contrast .wsparcie-heading-3rem,
html.high-contrast .color-brand,
html.high-contrast .wsparcie-intro-text,
html.high-contrast .p-kb-wsparcie-card-title,
html.high-contrast .p-wsparcie-body-text{
  color: #ffff00 !important;    /* Wymuszenie w pełni zgodnych, żółtych napisów w trybie WCAG */
}

/*--------------------------------------------------------------
# 50.2 MOBILNOŚĆ I RESPONSYWNOŚĆ (MEDIA QUERIES)
--------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
  .wsparcie-heading-3rem {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 600px) {
  .wsparcie-heading-3rem {
    font-size: 2rem;
  }
  .wsparcie-intro-section {
    margin-bottom: 3rem;
  }

}