/* Identyfikacja wizualna — zzz-marka.php */

/* ─── Logo w nagłówku ─────────────────────────────────────────────────────── */
.custom-logo-link { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.custom-logo-link:hover, .custom-logo-link:focus { text-decoration: none; }
.custom-logo-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 40px; }

/* Okrągła odznaka: białe tło logo + obwódka i cień, czytelna na ciemnym zdjęciu. Motyw
   ustawia img.custom-logo { max-height: 70px !important }, stąd !important poniżej. */
.navigation-bar img.custom-logo {
	flex: none; width: 92px !important; height: 92px !important; max-height: none !important;
	border-radius: 50%; background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .35);
}
body:not(.home) .navigation-bar img.custom-logo { width: 80px !important; height: 80px !important; }

/* Nazwa obok logo — wygląd dawnego napisu-logo motywu (a.text-logo). */
.gkp-nazwa { color: #fff; font-size: 1.6rem; font-weight: 600; line-height: 1.1; text-transform: uppercase; }

/* Nazwa tylko na stronie głównej, póki menu nie jest przyklejone. Ukrycie wizualne, nie
   display:none — czytnik ekranu dalej słyszy nazwę jako treść linku do strony głównej. */
body:not(.home) .gkp-nazwa,
.navigation-bar.fixto-fixed .gkp-nazwa {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Strona główna: u góry w menu tylko nazwa — logo jest duże w hero (zzz-marka.php) i wraca do menu
   dopiero w białym pasku po przewinięciu. */
body.home .navigation-bar:not(.fixto-fixed) img.custom-logo { display: none; }

.gkp-hero-logo { margin-top: 1.75rem; }
.gkp-hero-logo-img {
	display: inline-block; width: 160px; height: 160px; border-radius: 50%; background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 8px 24px rgba(0, 0, 0, .4);
}

/* Menu po przewinięciu (białe tło): samo logo jako odznaka wystająca 18 px dołem poza pasek.
   Obrazek jest pozycjonowany absolutnie względem samego paska (position: fixed, a między nim
   a logo nie ma pozycjonowanych kontenerów), więc wystaje tyle samo na każdej stronie, choć
   pasek na stronie głównej jest wyższy (112 px) niż na podstronach (85 px). Link zostaje
   niski i trzyma miejsce w poziomie, żeby pasek nie urósł.
   Selektory z „body”, żeby przebić body:not(.home) z reguły dla podstron. */
body .navigation-bar.fixto-fixed .custom-logo-link { width: 92px; height: 52px; }
/* Motyw daje kolumnie logo w układzie „logo nad menu” min-height 80 px i 5 px odstępu także po
   przyklejeniu — pasek strony głównej miał przez to 112 px zamiast 85 px jak na podstronach. */
.navigation-bar.logo-above-menu.fixto-fixed .logo_col { min-height: 0; padding-top: 0; padding-bottom: 0; }
body .navigation-bar.fixto-fixed .custom-logo-link img.custom-logo {
	position: absolute; top: auto; bottom: -18px; z-index: 2;
	width: 92px !important; height: 92px !important;
	box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0, 0, 0, .28);
}
.navigation-bar.fixto-fixed .custom-logo-link:focus-visible { outline-color: #0277bd; }

@media (max-width: 767px) {
	.navigation-bar img.custom-logo,
	body:not(.home) .navigation-bar img.custom-logo { width: 60px !important; height: 60px !important; }
	.custom-logo-link { gap: 10px; }
	.gkp-nazwa { font-size: 1.15rem; }
	/* Hero na telefonie jest niskie: odstęp pod logo wydłuża je, żeby logo nie wchodziło na szary trójkąt u dołu. */
	.gkp-hero-logo { margin: 1.25rem 0 3rem; }
	.gkp-hero-logo-img { width: 104px; height: 104px; }
	body .navigation-bar.fixto-fixed .custom-logo-link { width: 64px; height: 40px; }
	body .navigation-bar.fixto-fixed .custom-logo-link img.custom-logo { bottom: -14px; width: 64px !important; height: 64px !important; }
}

/* ─── Kolory marki G-K-P na stronie głównej ───────────────────────────────── */
/* Trzy ikony pod nagłówkiem („O nas”, „Patronat”, „Niesienie pomocy”) w kolejności liter logo. */
.overlappable-4 .col-xs-12:nth-child(1) i.fa.icon.reverse { background-color: #0032ca; }
.overlappable-4 .col-xs-12:nth-child(2) i.fa.icon.reverse { background-color: #2e8b00; }
.overlappable-4 .col-xs-12:nth-child(3) i.fa.icon.reverse { background-color: #d1122a; }

/* Pasek „Przekaż darowiznę” w czerwieni serca „Pomagam”, z białym przyciskiem. */
.cta-blue-section.bg-color1 { background-color: #d1122a; }
.cta-blue-section .button.color2 { border-color: #fff; background-color: #fff; color: #b30f24; }
.cta-blue-section .button.color2:hover,
.cta-blue-section .button.color2:focus { border-color: #fbe3e6; background-color: #fbe3e6; color: #8f0c1d; }