/*
 Theme Name:   Twenty Twenty-Five Child
 Theme URI:    https://strona-dla-urzedu.pl/
 Description:  Motyw potomny dla motywu Twenty Twenty-Five (Dwadzieścia Dwadzieścia-Pięć).
 Author:       strona-dla-urzedu.pl
 Template:     twentytwentyfive
 Version:      1.0.0
 Text Domain:  twentytwentyfive-child
*/

.wp-element-button,
.wp-block-button__link {
	box-sizing: border-box;
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Zawezone z "transition: all" (dziedziczonego z motywu nadrzednego) - "all" animuje tez malowanie inline SVG (fill=currentColor) niezaleznie od tekstu, co przy przejsciu tla/koloru tworzylo widoczna kreske miedzy tekstem a strzalka podczas hover */
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	/* Wymusza wlasna, stabilna warstwe kompozytowa GPU - eliminuje znany artefakt Chromium: widoczne "szwy" na granicach elementow flex wewnatrz zaokraglonego (border-radius) przycisku podczas animacji background-color */
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* Strzalka w przyciskach - zawsze dziedziczy kolor tekstu (currentColor) */
.btn-arrow {
	margin-left: 0.625rem;
	flex-shrink: 0;
}

.hero-card-icon img {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
}

.card-title {
	font-size: 1.375rem;
	min-height: 1.8rem;
}

/* Sekcja "Dla kogo tworzymy strony" - kafelki sektorow */
.sector-tile {
	border: 0.0625rem solid #E5E7EB;
	border-radius: 1rem;
	padding: 1.5rem;
	text-align: center;
	background-color: var(--wp--preset--color--base);
	transition: background-color 0.15s ease;
}
.sector-tile:hover {
	background-color: var(--wp--preset--color--gray);
}
.sector-tile h3 {
	font-size: 1.125rem;
	margin: 0;
}
.sector-tile h3 a {
	display: block;
}

/* Sekcja "System SIDIP" - karty filarow */
.sidip-card {
	position: relative;
	background-color: var(--wp--preset--color--base);
	border: 0.0625rem solid rgba(38, 72, 148, 0.14);
	border-radius: 1rem;
	padding: 2.25rem 2rem 2rem;
	box-shadow: 0 0.5rem 1.5rem rgba(38, 72, 148, 0.08);
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
}
.sidip-card-icon {
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--gray);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}
.sidip-card-icon img {
	width: 1.25rem;
	height: 1.25rem;
	object-fit: contain;
	display: block;
}

/* Sekcja "System SIDIP" - odznaki (AI - WordPress - Open Source) */
.sidip-badges {
	margin-top: 1.25rem;
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* Sekcja "Wsparcie po wdrozeniu" - karty */
.support-card {
	display: block;
	position: relative;
	background: var(--wp--preset--color--base);
	border: 0.0625rem solid rgba(38, 72, 148, 0.18);
	border-radius: 1rem;
	padding: 1.75rem;
	box-shadow: 0 0.5rem 1.25rem rgba(38, 72, 148, 0.06);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.support-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0.25rem 0.875rem rgba(38, 72, 148, 0.12);
}
.support-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.support-card-icon {
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--gray);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.support-card-icon img {
	width: 1.25rem;
	height: 1.25rem;
	object-fit: contain;
	display: block;
}
.support-card-arrow {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	margin: 0;
}
.support-card-arrow img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.support-card h4 {
	margin-top: 1.25rem;
}
.support-card a {
	text-decoration: none;
	color: inherit;
}
.support-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Sekcja "Baza wiedzy" - karty artykulow */
.kb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--base);
	border: 0.0625rem solid rgba(38, 72, 148, 0.18);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 0.5rem 1.25rem rgba(38, 72, 148, 0.06);
	height: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kb-card > p:not(.kb-tag):not(.kb-card__more) {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kb-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0.25rem 0.875rem rgba(38, 72, 148, 0.12);
}
.kb-card > *:not(.kb-image-placeholder) {
	margin-left: 1.5rem;
	margin-right: 1.5rem;
}
.kb-card > .kb-tag {
	margin-top: 1.5rem;
}
/* Blokujemy globalna plynna typografie (settings.typography.fluid odziedziczone z motywu nadrzednego) na tytulach kart artykulow - bez tego tytul kurczy sie na mobile ponizej rozmiaru tagu kategorii (.kb-tag), ktory ma sztywny rozmiar 0.9375rem */
.kb-card h3,
.kb-card h4 {
	font-size: 1.375rem !important;
}
.kb-card h3 a,
.kb-card h4 a {
	position: static;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.kb-card h3 a::after,
.kb-card h4 a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.kb-card > .kb-card__more {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	margin-left: 1.5rem;
	margin-right: 1.5rem;
	margin-bottom: 1.5rem;
	padding-top: 1.25rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.kb-card__more img {
	width: 0.875rem;
	height: 0.875rem;
}
.kb-card .kb-tag {
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	margin-bottom: 0.5rem;
}

/* Sekcja kontakt - wprowadzenie */
.kontakt-intro {
	max-width: 47.5rem;
}

/* Sekcja kontakt - karta formularza */
.contact-form-card {
	background: var(--wp--preset--color--base);
	border: 0.0625rem solid rgba(38, 72, 148, 0.18);
	border-radius: 1rem;
	padding: 2.5rem;
	box-shadow: 0 0.5rem 1.5rem rgba(38, 72, 148, 0.08);
	box-sizing: border-box;
}

/* Sekcja kontakt - formularz natywny (bez wtyczki) */
.icu-contact-form__required-note {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--secondary);
}
.icu-contact-form__required-note span {
	color: var(--wp--preset--color--red);
	font-weight: 700;
}
.icu-contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.icu-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.icu-contact-form__field--full {
	grid-column: 1 / -1;
}
@media (max-width: 40rem) {
	.icu-contact-form {
		grid-template-columns: 1fr;
	}
}
.icu-contact-form label {
	font-size: 1.125rem;
	font-weight: 700;
}
.icu-contact-form input,
.icu-contact-form textarea {
	width: 100%;
	padding: 0 0.875rem;
	min-height: 44px;
	border: 0.0625rem solid rgba(38, 72, 148, 0.4);
	border-radius: 0.25rem;
	font-family: inherit;
	font-size: 0.9375rem;
	box-sizing: border-box;
}
.icu-contact-form textarea {
	padding: 0.75rem 0.875rem;
	min-height: auto;
	resize: vertical;
}
.icu-contact-form__consent {
	grid-column: 1 / -1;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--secondary);
}
.icu-contact-form input:focus-visible,
.icu-contact-form textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.contact-form-status:empty {
	display: none;
}
.contact-form-status--success {
	color: var(--wp--preset--color--green);
	font-weight: 700;
	margin-bottom: 1.5rem;
}
.contact-form-status--error {
	color: var(--wp--preset--color--red);
	font-weight: 700;
	margin-bottom: 1.5rem;
}

/* Globalny widoczny fokus (WCAG 2.4.7 i 2.4.13) */
/* Jawnie zerujemy domyslny obrys przegladarki gdy :focus nie jest jednoczesnie :focus-visible (np. klikniecie myszka na <button>) - bez tego niektóre przegladarki nadal pokazuja własny natywny outline mimo ze :focus-visible poprawnie sie nie dopasowuje */
:focus:not(:focus-visible) {
	outline: none;
}
:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.on-dark :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -999rem;
	top: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding: 0.75rem 1.25rem;
	font-weight: 700;
	font-size: 0.9375rem;
	border-radius: 0.25rem;
	z-index: 100;
	text-decoration: none;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* Plynne przewijanie do sekcji (np. przycisk "Dowiedz sie wiecej" w hero) - wylaczone dla uzytkownikow z prefers-reduced-motion */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
/* Offset docelowych sekcji pod sticky naglowek, zeby po skoku/scrollu tresc nie chowala sie pod nim */
#o-nas {
	scroll-margin-top: 7.5rem;
}

/* Naglowek strony */
/* Sticky naglowek - position:sticky jest tu, na OUTER wrapperze template-part (<header class="wp-block-template-part">),
   a nie na .site-header (wewnetrznym divie). Powod: .site-header jest jedynym dzieckiem tego wrappera i ma dokladnie
   TAKA SAMA wysokosc jak on (rodzic "owija sie" ciasno wokol dziecka) - w takiej sytuacji sticky na dziecku nie ma
   zadnego "zapasu" w obrebie wlasnego containing block i wizualnie nie dziala (scrolluje sie normalnie razem z rodzicem).
   Wrapper template-part siedzi natomiast bezposrednio w duzo wyzszym .wp-site-blocks, wiec sticky na nim dziala poprawnie. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header {
	position: relative;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0.25rem 0.75rem rgba(38, 72, 148, 0.08);
}
.site-header__inner {
	max-width: 78rem;
	margin: 0 auto;
	padding: 0.875rem clamp(1.875rem, 5vw, 3.125rem);
	min-height: 5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
}
.site-logo__img {
	display: block;
	height: 4.5rem;
	width: auto;
}
.site-logo {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.site-logo__mark {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.site-logo__sub {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}
.main-nav {
	flex: 1;
	min-width: 0;
	align-self: stretch;
}
.main-nav > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	height: 100%;
	gap: 0.5rem 2rem;
	font-size: 1rem;
	font-weight: 400;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-dropdown > .nav-link {
	font-weight: 700;
}
.nav-link {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	height: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.625rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	background: none;
	border: none;
	border-bottom: 0.1875rem solid transparent;
	font: inherit;
	cursor: pointer;
	min-height: 44px;
}
.nav-link[aria-expanded="true"] {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}
.nav-link .caret {
	font-size: 0.625rem;
	color: var(--wp--preset--color--secondary);
}
.nav-dropdown {
	position: relative;
	list-style: none;
	align-self: stretch;
	display: flex;
	align-items: stretch;
}
.nav-dropdown__menu {
	position: absolute;
	top: calc(100% + 0.875rem);
	left: 0;
	min-width: 17.5rem;
	background: var(--wp--preset--color--base);
	border: 0.0625rem solid rgba(38, 72, 148, 0.18);
	border-radius: 0.25rem;
	box-shadow: 0 0.75rem 1.75rem rgba(38, 72, 148, 0.14);
	padding: 0.5rem;
	margin: 0;
	list-style: none;
	display: none;
	z-index: 60;
}
.nav-dropdown--wide .nav-dropdown__menu {
	min-width: 35rem;
	padding: 0.75rem;
	column-count: 2;
	column-gap: 0.5rem;
}
.nav-dropdown.is-open > .nav-dropdown__menu,
.nav-dropdown:focus-within > .nav-dropdown__menu {
	display: block;
}
.nav-dropdown__menu li {
	break-inside: avoid;
}
.nav-dropdown__menu a {
	display: block;
	padding: 0.625rem 0.75rem;
	border-radius: 0.25rem;
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.nav-dropdown__menu a:hover {
	background: var(--wp--preset--color--gray);
}
.site-header__cta {
	flex-shrink: 0;
}

/* Mega-menu (Oferta / Dla kogo) */
.nav-dropdown--mega.is-open > .nav-dropdown__mega,
.nav-dropdown--mega:focus-within > .nav-dropdown__mega {
	display: grid;
}
.nav-dropdown__mega {
	width: 47.5rem;
	min-width: 0;
	border-radius: 1.25rem;
	border-color: rgba(38, 72, 148, 0.14);
	box-shadow: 0 1.5rem 3rem rgba(38, 72, 148, 0.18);
	padding: 1.75rem;
	grid-template-columns: 1.4fr 1fr;
	gap: 2rem;
}
.nav-dropdown__mega-list {
	display: grid;
	gap: 0.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-dropdown__mega-list a {
	display: block;
	padding: 0.75rem 0.875rem;
	border-radius: 0.75rem;
	text-decoration: none;
	min-height: 44px;
}
.nav-dropdown__mega-list a:hover,
.nav-dropdown__mega-list a:focus-visible {
	background: var(--wp--preset--color--gray);
}
.nav-dropdown__mega-title {
	display: block;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}
.nav-dropdown__mega-desc {
	display: block;
	margin-top: 0.1875rem;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--secondary);
}
.nav-dropdown__mega-promo {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.625rem;
	background: var(--wp--preset--color--primary);
	border-radius: 0.875rem;
	padding: 1.5rem;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	min-height: 11rem;
}
.nav-dropdown__mega-promo:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 82%, black);
}
.nav-dropdown__mega-promo-icon {
	width: 1.5rem;
	height: 1.5rem;
}
.nav-dropdown__mega-promo-title {
	font-size: 1.0625rem;
	font-weight: 700;
}
.nav-dropdown__mega-promo-desc {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: rgba(252, 252, 252, 0.85);
}
.nav-dropdown--wide.is-open > .nav-dropdown__mega-grid,
.nav-dropdown--wide:focus-within > .nav-dropdown__mega-grid {
	display: grid;
}
.nav-dropdown--wide .nav-dropdown__mega-grid {
	width: 44rem;
	min-width: 0;
	border-radius: 1.25rem;
	padding: 1.5rem;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.125rem;
	column-count: initial;
}
.nav-dropdown__mega-grid a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem;
	border-radius: 0.75rem;
	font-weight: 700;
	font-size: 0.84375rem;
	line-height: 1.3;
}
.nav-dropdown__mega-grid img {
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	flex-shrink: 0;
	object-fit: contain;
}

/* Naklada przy otwartym mega-menu */
/* position:absolute wzgledem .site-header (position:relative) zamiast position:fixed z zahardkodowanym top -
   dzieki temu zawsze zaczyna sie dokladnie na dole naglowka, niezaleznie od jego aktualnej wysokosci (logo, menu itd.) */
.nav-backdrop {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 100vh;
	background: rgba(41, 45, 47, 0.35);
	z-index: 45;
}
.site-header.menu-open .nav-backdrop {
	display: block;
}

/* Stopka */
.site-footer {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding: 4rem 0 2rem;
}
.site-footer__cols {
	max-width: 78rem;
	margin: 0 auto;
	padding: 0 clamp(1.875rem, 5vw, 3.125rem);
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 2.5rem;
}
.site-footer__logo {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
}
.site-footer__blurb {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(252, 252, 252, 0.85);
	max-width: 17.5rem;
}
.site-footer__heading {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(252, 252, 252, 0.7);
	margin: 0;
}
.site-footer__list {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	font-size: 0.875rem;
	list-style: none;
	padding: 0;
}
.site-footer__list a {
	color: rgba(252, 252, 252, 0.85);
	text-decoration: none;
}
.site-footer__list a:hover {
	text-decoration: underline;
}
.site-footer__bottom {
	max-width: 78rem;
	margin: 2.5rem auto 0;
	padding: 1.5rem clamp(1.875rem, 5vw, 3.125rem) 0;
	border-top: 0.0625rem solid rgba(252, 252, 252, 0.2);
	font-size: 0.8125rem;
	color: rgba(252, 252, 252, 0.65);
}
@media (max-width: 51.25rem) {
	.site-footer__cols {
		grid-template-columns: 1fr 1fr;
	}
}

/* Hero - wskazniki zaufania (wersja kompaktowa) */
.trust-list-compact {
	margin-top: 2.5rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.trust-dot {
	color: var(--wp--preset--color--primary);
	margin: 0 0.5rem;
}

/* Hero - odznaki na ilustracji */
.hero-media {
	position: relative;
}
.hero-badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 0.625rem 1.125rem;
	box-shadow: 0 0.75rem 1.75rem rgba(38, 72, 148, 0.18);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.hero-badge img {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
.hero-badge--top {
	top: 8%;
	right: 2%;
}
.hero-badge--bottom {
	bottom: 10%;
	left: 0%;
}

/* Sekcja "Dla kogo" - karty-linki z ikona */
.sector-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--wp--preset--color--base);
	border: 0.0625rem solid rgba(38, 72, 148, 0.18);
	border-radius: 1rem;
	padding: 1.375rem 1.5rem;
	box-shadow: 0 0.5rem 1.25rem rgba(38, 72, 148, 0.06);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	height: 100%;
	box-sizing: border-box;
}
.sector-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0.25rem 0.875rem rgba(38, 72, 148, 0.12);
}
.sector-card-icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--gray);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0;
}
.sector-card-icon img {
	width: 1.375rem;
	height: 1.375rem;
	object-fit: contain;
	display: block;
}
.sector-card-arrow {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	margin: 0;
}
.sector-card-arrow img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.sector-card p {
	margin: 0;
	flex: 1;
	line-height: 1.3;
}
.sector-card a {
	font-weight: 700;
	font-size: 0.96875rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.sector-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Kreska rozdzielajaca hero/O nas - ograniczona do szerokosci tresci (78rem), nie na cala szerokosc strony */
.onas-divider {
	position: relative;
}
.onas-divider::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 78rem;
	max-width: 100%;
	border-top: 0.0625rem solid rgba(38, 72, 148, 0.18);
}

/* Sekcja "O nas" - placeholdery certyfikatow */
.cert-placeholder {
	margin: 0;
	min-width: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--gray);
	border: 0.0625rem solid rgba(38, 72, 148, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
	box-sizing: border-box;
}
.cert-placeholder--portrait {
	aspect-ratio: 3 / 4;
}
.cert-placeholder--landscape {
	aspect-ratio: 4 / 3;
}
.cert-placeholder p {
	margin: 0;
	font-family: 'Courier New', monospace;
	font-size: 0.71875rem;
	color: var(--wp--preset--color--secondary);
}

/* Sekcja "Dlaczego wybieraja" - karty z checklista */
.why-card {
	background: var(--wp--preset--color--base);
	border: 0.0625rem solid rgba(38, 72, 148, 0.18);
	border-radius: 1rem;
	padding: 1.75rem;
	box-shadow: 0 0.5rem 1.25rem rgba(38, 72, 148, 0.08);
	height: 100%;
	box-sizing: border-box;
}
.why-card__points {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	list-style: none;
	padding: 0;
}
.why-card__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}
.why-card__check {
	flex-shrink: 0;
	margin-top: 0.125rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: rgba(34, 197, 94, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
}
.why-card__check img {
	width: 0.8125rem;
	height: 0.8125rem;
}

/* Sekcja proces - numer kroku */
.process-step__n {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
	display: block;
	margin: 0 0 1rem;
}

/* Sekcja FAQ - akordeon */
.faq-intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.faq-intro h2 {
	flex: 1;
	min-width: 20rem;
	margin-bottom: 0;
}
.faq-intro p {
	flex: 1;
	min-width: 20rem;
	margin: 0;
}
.faq-group {
	margin-top: 4.375rem;
}
.faq-group__title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
}
.faq-item {
	border-bottom: 0.0625rem solid rgba(38, 72, 148, 0.18);
}
.faq-item__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}
.faq-item__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	text-align: left;
	padding: 1.5rem 0;
	background: none;
	border: none;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	min-height: 44px;
	font-family: inherit;
}
.faq-item__icon {
	flex-shrink: 0;
	display: flex;
}
.faq-item__icon svg {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
}
.faq-item__icon .faq-item__icon-minus {
	display: none;
}
.faq-item__trigger[aria-expanded="true"] .faq-item__icon .faq-item__icon-plus {
	display: none;
}
.faq-item__trigger[aria-expanded="true"] .faq-item__icon .faq-item__icon-minus {
	display: block;
}
.faq-item__panel {
	padding-bottom: 1.5rem;
}
.faq-item__panel[hidden] {
	display: none;
}
.faq-item__panel p {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	max-width: 54rem;
}

/* Sekcja baza wiedzy - placeholder grafiki artykulu */
.kb-image-placeholder {
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(135deg, rgba(38, 72, 148, 0.07) 0 0.875rem, rgba(38, 72, 148, 0.18) 0.875rem 1.75rem);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.kb-image-placeholder p {
	margin: 0;
	font-family: 'Courier New', monospace;
	font-size: 0.6875rem;
	color: var(--wp--preset--color--secondary);
}


/* ==========================================================================
   Proporcjonalna skala typografii na mobile/tablet (<= 48rem / 768px)
   Od 2026-09-07 rozmiary czcionek sa globalnie STALE (fluid typography
   wylaczone w theme.json - patrz komentarz przy "fluid": false), zeby
   uniknac chaotycznego, niespojnego kurczenia sie roznych elementow.
   Ten blok swiadomie i spojnie skaluje w dol TE SAME elementy na waskich
   ekranach, zeby zachowac czytelnosc i estetyke (bez "jedno slowo w wierszu"
   w naglowkach), przy zachowaniu proporcji miedzy poziomami naglowkow.
   ========================================================================== */
@media (max-width: 48rem) {
	body {
		font-size: 1rem; /* 18px -> 16px, tekst akapitowy */
	}
	h1 {
		font-size: 1.875rem; /* 44px -> 30px */
		margin-bottom: 1rem;
	}
	h2 {
		font-size: 1.625rem; /* 36px -> 26px */
		margin-bottom: 0.875rem;
	}
	h3 {
		font-size: 1.375rem; /* 28px -> 22px */
	}
	h4 {
		font-size: 1.1875rem; /* 22px -> 19px */
	}
	h5 {
		font-size: 1.0625rem; /* 19px -> 17px */
	}
	h6 {
		font-size: 1rem; /* 17px -> 16px */
	}
	.wp-element-button,
	.wp-block-button__link {
		font-size: 1rem; /* 18px -> 16px, rowno z tekstem akapitowym */
	}
	.kb-card h3,
	.kb-card h4 {
		font-size: 1.1875rem !important; /* 22px -> 19px, rowno z nowym mobilnym h4 */
	}
	.why-card__points li {
		font-size: 1rem; /* 18px -> 16px, rowno z tekstem akapitowym */
	}
	.faq-group {
		margin-top: 3rem; /* 70px -> 48px, mniejszy odstep miedzy kategoriami */
	}
	.faq-group__title {
		font-size: 1.1875rem; /* 22px -> 19px, rowno z nowym mobilnym h4 */
	}
	.faq-item__trigger {
		font-size: 1rem; /* 18px -> 16px, rowno z tekstem akapitowym */
	}
	.faq-item__panel p {
		font-size: 1rem; /* 18px -> 16px, rowno z tekstem akapitowym */
	}
}

/* ==========================================================================
   Widget dostepnosci w naglowku (2026-09-08) - zaimportowane z Claude Design.
   Przycisk "Dostepnosc" otwiera panel: rozmiar tekstu, tryby kontrastu,
   przelaczniki czytelnosci, linijka czytania, linki (deklaracja dostepnosci
   itp.), reset. Stan zapisywany w localStorage, logika w assets/js/a11y.js.
   ========================================================================== */
.a11y-dropdown {
	position: relative;
}
.a11y-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.625rem 0.75rem;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 0.875rem;
	font-family: inherit;
	cursor: pointer;
}
.a11y-toggle:hover {
	background: var(--wp--preset--color--gray);
}
.a11y-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}
.a11y-panel {
	position: absolute;
	top: calc(100% + 0.875rem);
	right: 0;
	width: 24rem;
	max-width: calc(100vw - 2rem);
	background: var(--wp--preset--color--base);
	border: 0.0625rem solid rgba(38, 72, 148, 0.14);
	border-radius: 1.25rem;
	box-shadow: 0 1.5rem 3rem rgba(38, 72, 148, 0.18);
	padding: 1.25rem;
	display: none;
	flex-direction: column;
	gap: 1rem;
	z-index: 70;
	max-height: calc(100vh - 7rem);
	overflow-y: auto;
}
.nav-dropdown.is-open > .a11y-panel {
	display: flex;
}
.a11y-panel__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}
.a11y-panel__title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.a11y-panel__subtitle {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}
.a11y-panel__close {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.a11y-panel__close:hover {
	background: var(--wp--preset--color--gray);
}
.a11y-panel__section-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 0.5rem;
}
.a11y-font-control {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.a11y-step-btn {
	min-height: 44px;
	min-width: 44px;
	padding: 0 1rem;
	border-radius: 0.75rem;
	border: 0.125rem solid var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
}
.a11y-step-btn:hover:not(:disabled) {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.a11y-step-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.a11y-font-control__label {
	flex: 1;
	margin: 0;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.a11y-contrast-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}
.a11y-contrast-btn {
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.75rem;
	border: 0.125rem solid rgba(38, 72, 148, 0.28);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	font-size: 0.8125rem;
	text-align: left;
	line-height: 1.2;
	font-family: inherit;
	cursor: pointer;
}
.a11y-contrast-btn[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.a11y-contrast-swatch {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 999px;
	flex-shrink: 0;
	border: 0.0625rem solid rgba(0, 0, 0, 0.15);
}
.a11y-contrast-swatch--default {
	background: linear-gradient(135deg, #fff 50%, #264894 50%);
}
.a11y-contrast-swatch--high {
	background: #000;
	border-color: #ffee58;
	box-shadow: inset 0 0 0 0.1875rem #ffee58;
}
.a11y-contrast-swatch--invert {
	background: linear-gradient(135deg, #292929 50%, #fcfcfc 50%);
}
.a11y-contrast-swatch--gray {
	background: linear-gradient(135deg, #fff 50%, #888 50%);
}
.a11y-switch-list {
	display: grid;
}
.a11y-switch-row {
	width: 100%;
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: 0.75rem;
	border: none;
	background: transparent;
	font-family: inherit;
	cursor: pointer;
}
.a11y-switch-row:hover {
	background: var(--wp--preset--color--gray);
}
.a11y-switch-row span:not(.a11y-switch-track):not(.a11y-switch-knob) {
	flex: 1;
	text-align: left;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.a11y-switch-track {
	flex-shrink: 0;
	width: 2.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 0.125rem solid var(--wp--preset--color--secondary);
	display: flex;
	align-items: center;
	padding: 0.125rem;
	justify-content: flex-start;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.a11y-switch-knob {
	width: 1rem;
	height: 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	display: block;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.a11y-switch-row[aria-checked="true"] .a11y-switch-track {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	justify-content: flex-end;
}
.a11y-switch-row[aria-checked="true"] .a11y-switch-knob {
	background: var(--wp--preset--color--base);
}
.a11y-panel__footer {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.75rem;
	border-top: 0.0625rem solid rgba(38, 72, 148, 0.14);
}
.a11y-links-list {
	display: grid;
	gap: 0.125rem;
}
.a11y-link {
	width: 100%;
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.a11y-link:hover {
	background: var(--wp--preset--color--gray);
}
.a11y-reset-btn {
	min-height: 44px;
	width: 100%;
	border-radius: 999px;
	border: 0.125rem solid var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 0.875rem;
	font-family: inherit;
	cursor: pointer;
}
.a11y-reset-btn:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
/* Na wezszych desktopach/laptopach (ale wciaz powyzej progu zawijania calego menu do hamburgera,
   ktorego jeszcze nie ma) chowamy sam tekst "Dostepnosc" - zostaje ikonka + aria-label,
   zeby caly pasek menu zmiescil sie w jednym wierszu bez zawijania pojedynczych pozycji. */
@media (max-width: 85rem) {
	.a11y-toggle span {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.a11y-toggle {
		padding: 0.625rem;
	}
}
.a11y-ruler {
	position: fixed;
	left: 0;
	right: 0;
	top: 50%;
	height: 3rem;
	border: 0.125rem solid var(--wp--preset--color--primary);
	background: rgba(38, 72, 148, 0.1);
	pointer-events: none;
	z-index: 80;
	display: none;
}