/* =========================================================================
   AMPFLOW — WARIANT JASNY
   Ładowany po style.css, tylko gdy w ampflow-dodatki.php stoi
   AMPFLOW_MOTYW = 'jasny'. Zdjęcie ustawienia na 'ciemny' przywraca
   poprzedni wygląd bez ruszania czegokolwiek innego.

   Zasada: strona idzie w jasne, ale pasy ze zdjęciami, nagłówki podstron
   i sekcja kontaktowa zostają granatowe — biały tekst leży tam na zdjęciu
   albo na ciemnym gradiencie i musi taki zostać. Niebieski z logo (#0076D6)
   nie zmienia się nigdzie.
   ========================================================================= */

:root{
	/* --- paleta motywu Astra ---
	   0 i 1 to akcenty marki. Jedynkę przyciemniamy, bo #0097D7 na bieli
	   daje kontrast 3,1:1 — za mało na tekst linków (WCAG AA wymaga 4,5). */
	--ast-global-color-0: #0076D6;   /* akcent z logo — bez zmian */
	--ast-global-color-1: #0071BE;   /* akcent do tekstu i linków */
	--ast-global-color-2: #0E1B2E;   /* nagłówki */
	--ast-global-color-3: #3F5165;   /* tekst akapitów */
	--ast-global-color-4: #EDF3FA;   /* panel */
	--ast-global-color-5: #F6F9FC;   /* tło strony */

	/* --- paleta sekcji Ampflow --- */
	--amp-panel:   #FFFFFF;
	--amp-panel-2: #F1F6FC;
	--amp-panel-3: #E6EFF9;
	--amp-linia:   #DBE6F2;
	--amp-ink-dim: #55677D;

	/* cień zamiast ramki robi robotę dopiero na jasnym tle */
	--amp-cien: 0 1px 2px rgba(14,27,46,.05), 0 10px 28px rgba(14,27,46,.07);
}

/* ---------- karty: na bieli potrzebują cienia, żeby nie były płaskie ---------- */
.ampflow-produkty .wp-block-column,
.ampflow-segmenty .wp-block-column,
.ampflow-liczby .wp-block-column,
.ampflow-slupki .wp-block-column,
.ampflow-karta,
.ampflow-woj,
.ampflow-prog,
.ampflow-faq .wp-block-details{
	box-shadow: var(--amp-cien);
}

/* ---------- nagłówki kart, które były białe ---------- */
.ampflow-karta h3,
.ampflow-woj h3,
.ampflow-prog h3,
.ampflow-filary h3,
.ampflow-karta h4,
.ampflow-slupek-liczba,
.ampflow-wybor-haslo{
	color: var(--ast-global-color-2);
}

.ampflow-produkty .wp-block-column:hover .ampflow-ikona{
	color: var(--ast-global-color-0);
}

.ampflow-woj-pozostale{
	color: var(--amp-ink-dim) !important;
}

.ampflow-woj-tel a{
	color: var(--ast-global-color-2);
}

/* ---------- sekcja ekosystemu: była osobnym ciemnym panelem ---------- */
.ampflow-ekosystem{
	background: var(--amp-panel-2);
	border-top: 1px solid var(--amp-linia);
	border-bottom: 1px solid var(--amp-linia);
}

/* ---------- paski porównania ---------- */
.ampflow-slupek{
	background: rgba(14,27,46,.08);
}

.ampflow-slupek-wypelnienie{
	background: #8FA3B8;
}

.ampflow-slupek-mocny .ampflow-slupek-wypelnienie{
	background: linear-gradient(90deg, #0076D6, #12A366);
}

.ampflow-kol-mocna .ampflow-slupek-liczba{
	color: #0E7A50;
}

/* ---------- plakietka „dla kogo" na kartach dofinansowań ---------- */
.ampflow-prog-kto{
	color: #0A5E9E !important;
	background: rgba(0,118,214,.09);
	border-color: rgba(0,118,214,.24);
}

/* ---------- przycisk z obrysem ---------- */
.ampflow-btn-obrys{
	color: var(--ast-global-color-0) !important;
	border-color: #B9D3EA;
}

.ampflow-btn-obrys:hover{
	background: rgba(0,118,214,.08);
}

/* ---------- kroki ekosystemu ---------- */
.ampflow-krok::before{
	background: linear-gradient(180deg, var(--amp-linia), rgba(219,230,242,.2));
}


/* =========================================================================
   WOAL NA ZDJĘCIACH — ROZJAŚNIONY I PRZESUNIĘTY W BŁĘKIT MARKI
   Ciemne zostają wyłącznie zdjęcia — bo to zdjęcia, a nie tło strony.
   Woal siedzi w zmiennych, więc adresy zdjęć są nietknięte.
   ====================================================================== */
:root{
	--amp-woal-hero:   linear-gradient(180deg, rgba(9,58,102,.42) 0%, rgba(9,58,102,.58) 55%, rgba(9,58,102,.68) 100%);
	--amp-woal-hero-m: linear-gradient(180deg, rgba(9,58,102,.38) 0%, rgba(9,58,102,.70) 100%);
	--amp-woal-pas:    linear-gradient(180deg, rgba(9,58,102,.32) 0%, rgba(9,58,102,.66) 100%);
	--amp-woal-pas-m:  linear-gradient(180deg, rgba(9,58,102,.38) 0%, rgba(9,58,102,.72) 100%);
	--amp-woal-foto:   linear-gradient(180deg, rgba(9,58,102,.30) 0%, rgba(9,58,102,.64) 100%);
}

.ampflow-hero,
.ampflow-pas,
.ampflow-foto{
	background-color: #0A4272;
}

.ampflow-hero{ border-color: rgba(255,255,255,.18); }

.ampflow-foto{
	border-top-color: rgba(255,255,255,.16);
	border-bottom-color: rgba(255,255,255,.16);
}

/* tekst na zdjęciach zostaje jasny — pod nim jest fotografia */
.ampflow-hero h1,
.ampflow-hero h2,
.ampflow-pas h2,
.ampflow-foto h2{
	color: #FFFFFF;
}

.ampflow-hero .ampflow-lead,
.ampflow-pas .ampflow-lead,
.ampflow-foto p{
	color: #E4EFFA;
}

.ampflow-hero .ampflow-eyebrow{
	color: #C9E7FA;
	text-shadow: 0 1px 10px rgba(5,25,46,.7);
}

.ampflow-hero .ampflow-btn-obrys{
	color: #FFFFFF !important;
	border-color: rgba(255,255,255,.45);
}

.ampflow-hero .ampflow-btn-obrys:hover{
	background: rgba(255,255,255,.14);
}


/* =========================================================================
   NAGŁÓWEK PODSTRONY — BEZ WŁASNEGO TŁA
   Pas tytułowy dostawał wcześniej granat, a potem błękit. Teraz jest po prostu
   początkiem jasnej strony: tytuł na tle strony, cienka linia pod spodem.
   ====================================================================== */
.ampflow-naglowek{
	background: transparent;
	border-bottom: 1px solid var(--amp-linia);
	padding-top: 104px;
}

.ampflow-naglowek h1,
.ampflow-naglowek h2{
	color: var(--ast-global-color-2);
	text-shadow: none;
}

.ampflow-naglowek .ampflow-lead{
	color: var(--amp-ink-dim);
	text-shadow: none;
}

.ampflow-naglowek .ampflow-eyebrow{
	color: var(--ast-global-color-1);
	text-shadow: none;
}


/* =========================================================================
   SEKCJA KONTAKTOWA NA DOLE STRONY GŁÓWNEJ — JASNA KARTA
   ====================================================================== */
.ampflow-kontakt{
	background: var(--amp-panel);
	border: 1px solid var(--amp-linia);
	box-shadow: var(--amp-cien);
}

.ampflow-kontakt h2,
.ampflow-kontakt h3{
	color: var(--ast-global-color-2);
	text-shadow: none;
}

.ampflow-kontakt p,
.ampflow-kontakt .ampflow-lead,
.ampflow-telefony p{
	color: var(--amp-ink-dim);
	text-shadow: none;
}

.ampflow-kontakt .ampflow-eyebrow{ color: var(--ast-global-color-1); }

.ampflow-telefony strong a{ color: var(--ast-global-color-2); }
.ampflow-telefony strong a:hover{ color: var(--ast-global-color-0); }

.ampflow-kontakt .ampflow-btn-obrys{
	color: var(--ast-global-color-0) !important;
	border-color: #B9D3EA;
}

.ampflow-kontakt .ampflow-btn-obrys:hover{
	background: rgba(0,118,214,.08);
}


/* =========================================================================
   PASEK NAWIGACJI
   Domyślnie przezroczysty nad jasną stroną — więc logo i pozycje menu idą
   w ciemne. Wyjątkiem jest strona główna na dużym ekranie: tam pasek leży
   na zdjęciu i wraca do wersji jasnej.
   ====================================================================== */
.site-header,
.ast-primary-header-bar,
.ast-below-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-primary-header-bar.ast-primary-header.main-header-bar{
	background-color: transparent !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

.site-header img[src*="bialy-napis"]{
	content: url("https://ampflow.pl/wp-content/uploads/2024/10/AMPFLOV-logo-kolor-przezroczyste-tlo-PNG.png");
}

.main-header-menu > .menu-item > a,
.ast-masthead-custom-menu-items,
.site-header .ast-builder-menu a{
	color: var(--ast-global-color-2) !important;
	text-shadow: none;
}

.main-header-menu > .menu-item > a:hover,
.main-header-menu > .current-menu-item > a{
	color: var(--ast-global-color-1) !important;
}

.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .ast-mobile-menu-trigger-minimal .ast-mobile-svg{
	color: var(--ast-global-color-2) !important;
	fill: var(--ast-global-color-2) !important;
}

/* strona główna na dużym ekranie — pasek leży na zdjęciu */
body.page-id-1240:not(.ast-header-break-point) .site-header img[src*="bialy-napis"]{
	content: normal;
}

body.page-id-1240:not(.ast-header-break-point) .main-header-menu > .menu-item > a,
body.page-id-1240:not(.ast-header-break-point) .ast-masthead-custom-menu-items{
	color: #EAF3FB !important;
	text-shadow: 0 1px 8px rgba(5,25,46,.55);
}

body.page-id-1240:not(.ast-header-break-point) .main-header-menu > .menu-item > a:hover,
body.page-id-1240:not(.ast-header-break-point) .main-header-menu > .current-menu-item > a{
	color: #FFFFFF !important;
}

/* podmenu i menu mobilne rozwijają się nad treścią, więc mają własne tło */
.main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu,
.main-navigation .sub-menu,
.ast-header-break-point .main-header-menu,
.ast-header-break-point .main-header-menu ul,
.ast-header-break-point .main-navigation ul,
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-popup-drawer .ast-mobile-popup-inner{
	background-color: #FFFFFF !important;
}

.main-header-menu .sub-menu{
	border: 1px solid var(--amp-linia) !important;
	box-shadow: 0 18px 40px rgba(14,27,46,.16) !important;
}

.main-header-menu .sub-menu a,
.main-navigation .sub-menu a,
.ast-header-break-point .main-header-menu a,
.ast-mobile-popup-drawer .main-header-menu a{
	color: var(--ast-global-color-1) !important;
	text-shadow: none !important;
	border-color: var(--amp-linia) !important;
}

.main-header-menu .sub-menu a:hover,
.main-header-menu .sub-menu a:focus,
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu .current-menu-item > a{
	background: rgba(0,118,214,.10) !important;
	color: var(--ast-global-color-0) !important;
}


/* =========================================================================
   STOPKA — JASNA NA CAŁEJ WYSOKOŚCI
   Astra dzieli ją na trzy pasy; ciemny był ten górny, z danymi firmy.
   ====================================================================== */
.site-footer,
.ast-small-footer,
.footer-widget-area,
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap{
	background-color: #EDF3FA !important;
}

.site-footer{ border-top: 1px solid var(--amp-linia); }

.site-footer .footer-widget-area,
.site-footer .footer-widget-area p,
.site-footer .footer-widget-area li,
.site-footer .footer-widget-area span,
.site-footer .ast-builder-html-element,
.site-above-footer-wrap,
.site-above-footer-wrap p,
.site-above-footer-wrap span,
.site-above-footer-wrap li,
.site-below-footer-wrap,
.site-below-footer-wrap p,
.site-below-footer-wrap span{
	color: var(--amp-ink-dim) !important;
}

.site-footer .widget-title,
.site-footer h2,
.site-footer h3,
.site-footer h4{
	color: var(--ast-global-color-2) !important;
}

.site-footer a,
.site-footer .footer-widget-area a,
.site-footer .uagb-icon-list__label,
.site-above-footer-wrap a,
.site-below-footer-wrap a{
	color: var(--ast-global-color-1) !important;
}

.site-footer a:hover,
.site-footer .footer-widget-area a:hover,
.site-above-footer-wrap a:hover,
.site-below-footer-wrap a:hover{
	color: var(--ast-global-color-0) !important;
}

.site-footer .uagb-icon-list__source-wrap svg,
.site-footer .ast-builder-social-element svg{
	fill: var(--ast-global-color-1) !important;
	color: var(--ast-global-color-1) !important;
}

.site-footer img[src*="bialy-napis"]{
	content: url("https://ampflow.pl/wp-content/uploads/2024/10/AMPFLOV-logo-kolor-przezroczyste-tlo-PNG.png");
}


/* =========================================================================
   STRONA GŁÓWNA — WYBÓR KLIENTA JAKO GŁÓWNY KOMUNIKAT
   Pasek nawigacji leży na zdjęciu, więc pas powitalny zaczyna treść poniżej.
   ====================================================================== */
body.page-id-1240 .ampflow-hero{
	padding-top: 116px;
	padding-bottom: 46px;
}

.ampflow-wybor-pytanie{
	font-size: 16px !important;
	letter-spacing: .04em;
	text-transform: none;
	font-weight: 700;
	color: #FFFFFF;
	margin: 0 0 18px !important;
	text-shadow: 0 1px 12px rgba(5,25,46,.6);
}

.ampflow-hero .ampflow-wybor-przyciski{
	margin-bottom: 0;
	gap: 12px;
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}

.ampflow-hero .ampflow-wybor-btn{
	background: rgba(6,38,68,.52);
	border: 1px solid rgba(190,222,245,.5);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	padding: 16px 28px;
	border-radius: 12px;
	backdrop-filter: blur(4px);
}

.ampflow-hero .ampflow-wybor-btn:hover{
	border-color: #FFFFFF;
	background: rgba(6,38,68,.72);
}

.ampflow-hero .ampflow-wybor-btn.is-aktywny{
	background: var(--ast-global-color-0);
	border-color: #FFFFFF;
	color: #FFFFFF;
	box-shadow: 0 6px 20px rgba(0,118,214,.45);
}

@media (max-width: 921px){
	body.page-id-1240 .ampflow-hero{ padding-top: 40px; padding-bottom: 40px; }
	.ampflow-naglowek{ padding-top: 48px; }
	.ampflow-wybor-pytanie{ font-size: 15px !important; }
	.ampflow-hero .ampflow-wybor-btn{ font-size: 14.5px; padding: 13px 18px; }
}

/* Przycisk „Kalkulator" w menu ma biały napis na niebieskim — nie może złapać
   ciemnego koloru z reguły powyżej. Tło o ćwierć tonu głębsze, żeby biały
   tekst trzymał kontrast 5:1 zamiast granicznych 4,4:1. */
.main-header-menu .ampflow-menu-cta > a,
.ast-header-break-point .ampflow-menu-cta > a,
.ampflow-menu-cta > a{
	background: #0069C0 !important;
	color: #FFFFFF !important;
	text-shadow: none !important;
}

.ampflow-menu-cta > a:hover{
	background: var(--ast-global-color-0) !important;
}

/* =========================================================================
   PODMENU I PASEK NA TELEFONIE — DOMKNIĘCIE
   Reguły z wersji ciemnej celują w podmenu mocniej (trzy klasy), więc bez
   równie mocnego selektora zostawały czarne tła z białym tekstem.
   ====================================================================== */
.ast-header-break-point .main-header-menu .sub-menu,
.ast-header-break-point .main-navigation .sub-menu,
.ast-mobile-popup-drawer .main-header-menu .sub-menu{
	background-color: #F1F6FC !important;
	border: 0 !important;
}

.ast-header-break-point .main-header-menu .sub-menu a,
.ast-mobile-popup-drawer .main-header-menu .sub-menu a{
	color: var(--ast-global-color-1) !important;
}

.main-header-menu .sub-menu a:hover,
.main-header-menu .sub-menu a:focus,
.ast-header-break-point .main-header-menu .sub-menu a:hover,
.main-navigation .sub-menu .current-menu-item > a{
	color: var(--ast-global-color-2) !important;
}

/* Pasek nie ma jechać za użytkownikiem na telefonie — psuł układ strony. */
.ast-header-break-point .site-header,
.ast-header-break-point .ast-primary-header-bar,
.ast-header-break-point .ast-mobile-header-wrap{
	position: static !important;
	top: auto !important;
}