/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/


/* ------------------------------------------------------------------ *
 * Przycisk "Strefa Mieszkanca" w naglowku
 *
 * Pelny granat z bialym napisem — jedyny element menu z wypelnieniem,
 * wiec wyroznia sie forma, nie kolorem. Wczesniej byl zloty; zloto
 * wycofalismy z calej palety (patrz wp-content/paleta-jednokolorowa.php).
 *
 * Barwa musi byc IDENTYCZNA w obu stanach naglowka. Przycisk zmieniajacy
 * kolor przy przewijaniu czyta sie jak dwie rozne akcje.
 * ------------------------------------------------------------------ */

#header-outer .sf-menu li.button_solid_color > a .menu-title-text {
	color: #ffffff !important;
}

#header-outer .sf-menu li.button_solid_color > a:before {
	background-color: #191834 !important;
	border-radius: 4px;
}

#header-outer .sf-menu li.button_solid_color > a:hover:before {
	background-color: #2e2c56 !important;
}

/*
 * Stan przezroczysty (naglowek nad pelnoekranowym zdjeciem) ma wlasna,
 * mocniejsza regule Salienta:
 *   #header-outer.transparent #top nav > ul > .button_solid_color > a:before
 *   { background-color:#191834!important }
 * Selektor wyzej ma nizsza specyficznosc i przegrywa. Tlo wychodzi wiec
 * granatowe samo z siebie, ale napis dziedziczy granat i znika —
 * dlatego kontre trzeba napisac tu, z przedrostkiem `body`.
 */
body #header-outer.transparent #top nav > ul > .button_solid_color > a:before {
	background-color: #191834 !important;
}

body #header-outer.transparent #top nav > ul > .button_solid_color > a:hover:before {
	background-color: #2e2c56 !important;
}

body #header-outer.transparent #top nav > ul > .button_solid_color > a .menu-title-text {
	color: #ffffff !important;
}

/* ------------------------------------------------------------------ *
 * Drugi przycisk w menu: „Zgłoś usterkę” (secondary przy „Strefie”)
 *
 * Ten sam kształt co przycisk Salienta, tylko obrys zamiast wypełnienia.
 * Nad pełnoekranowym zdjęciem obrys i napis są białe, bo granat by zniknął.
 * ------------------------------------------------------------------ */

/* Oba przyciski stoją obok siebie jak jedna grupa. */
body #header-outer #top nav > ul > li.puch-przycisk-drugi > a {
	margin-right: 0 !important;
}

body #header-outer #top nav > ul > li.button_solid_color > a {
	margin-left: 10px !important;
}

body #header-outer #top nav > ul > li.puch-przycisk-drugi > a {
	position: relative;
	padding-left: 20px !important;
}

/* Strzałka rozwijania musi zostać wewnątrz obrysu. Prawy padding wymusza
   Salient, więc odstęp niesie sama strzałka. */
body #header-outer #top nav > ul > li.puch-przycisk-drugi > a .sf-sub-indicator {
	margin-right: 12px;
}

/* Z dwoma przyciskami menu potrzebuje około 1040 px i poniżej tego łamie
   etykiety. Węższe odstępy utrzymują jedną linię na laptopach 1280 px,
   a poniżej progu hamburgera (1270 px) menu i tak się zwija. */
@media only screen and (max-width: 1500px) {
	body #header-outer #top nav > ul > li > a {
		margin-left: 9px;
		margin-right: 9px;
	}
	body #header-outer #top nav > ul > li > a {
		white-space: nowrap;
	}
}

@media only screen and (max-width: 1360px) {
	body #header-outer #top nav > ul > li > a {
		margin-left: 5px;
		margin-right: 5px;
		font-size: 15px;
	}
}

#header-outer #top nav > ul > li.puch-przycisk-drugi > a:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 38px;
	transform: translateY(-50%);
	border: 2px solid #191834;
	border-radius: 200px;
	box-sizing: border-box;
	background: transparent;
	transition: background-color .2s ease;
	z-index: -1;
}

#header-outer #top nav > ul > li.puch-przycisk-drugi > a:hover:before {
	background-color: #f2f2f6;
}

/* Bez podkreślenia z efektu najechania: obrys już niesie sygnał. */
#header-outer #top nav > ul > li.puch-przycisk-drugi > a .menu-title-text:after {
	display: none !important;
}

body #header-outer.transparent #top nav > ul > li.puch-przycisk-drugi > a:before {
	border-color: #ffffff;
}

body #header-outer.transparent #top nav > ul > li.puch-przycisk-drugi > a:hover:before {
	background-color: rgba(255, 255, 255, .15);
}

/* ------------------------------------------------------------------ *
 * Przycisk w treści, taki sam jak „Strefa Mieszkańca” w menu
 * ------------------------------------------------------------------ */

body .puch-przycisk {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 13px 26px;
	min-height: 48px;
	box-sizing: border-box;
	border-radius: 200px;
	background-color: #191834;
	box-shadow: 0 8px 22px rgba(25, 24, 52, .22);
	color: #ffffff !important;
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .2s ease;
}

body .puch-przycisk:hover,
body .puch-przycisk:focus-visible {
	background-color: #2e2c56;
	color: #ffffff !important;
}

body .puch-przycisk svg {
	flex: none;
}

/* ------------------------------------------------------------------ *
 * Szerokosc rozwijanego menu
 *
 * Salient ma ja zaszyta na 240px (pozycje 200px) i nie udostepnia opcji
 * w ustawieniach motywu. Polskie nazwy uslug lamia sie przy tej szerokosci
 * na dwie linie, wiec poszerzamy do 320px.
 * ------------------------------------------------------------------ */

#header-outer nav > ul > li > ul.sub-menu {
	width: 320px;
}

#header-outer nav > ul > li > ul.sub-menu > li {
	width: 280px;
}

/* Menu mobilne stoi na granacie — tam pozycja-przycisk musi byc biala,
   granat na granacie by zniknal. */
#slide-out-widget-area .off-canvas-menu-container li.button_solid_color > a {
	color: #ffffff;
}







/* ------------------------------------------------------------------ *
 * Okruszki — sciezka nawigacyjna w pasie naglowkowym
 *
 * Wariant "jasny" = jasny tekst na granatowym pasie (domyslny).
 * Wariant "ciemny" = granatowy tekst na jasnym tle.
 *
 * Element biezacy nie jest odnosnikiem i ma pelna jasnosc — reszta sladu
 * jest przygaszona, zeby okruszki nie konkurowaly z tytulem strony.
 * ------------------------------------------------------------------ */

.puch-okruszki {
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	margin-bottom: 0;   /* odstep daje column_element_spacing pasa naglowkowego */
}

.puch-okruszki__sep {
	display: inline-block;
	margin: 0 8px;
	opacity: 0.45;
}

.puch-okruszki a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.puch-okruszki a:hover {
	border-bottom-color: currentColor;
}

/* Na granacie */
.puch-okruszki--jasny            { color: #a9abc4; }
.puch-okruszki--jasny a          { color: #a9abc4; }
.puch-okruszki--jasny a:hover    { color: #ffffff; }
.puch-okruszki--jasny .puch-okruszki__biezacy { color: #ffffff; }

/* Na jasnym tle */
.puch-okruszki--ciemny           { color: #6b6a80; }
.puch-okruszki--ciemny a         { color: #6b6a80; }
.puch-okruszki--ciemny a:hover   { color: #191834; }
.puch-okruszki--ciemny .puch-okruszki__biezacy { color: #191834; }

@media only screen and (max-width: 690px) {
	.puch-okruszki { font-size: 13px; }
	.puch-okruszki__sep { margin: 0 6px; }
}

/* ------------------------------------------------------------------ *
 * Kafel ze zdjeciem — sciete narozniki
 *
 * Ta sama geometria co sciecie pasa naglowkowego (`tilt_alt`): ukos
 * biegnacy w kierunku "/". Scinamy dwa PRZECIWLEGLE narozniki, gorny lewy
 * i dolny prawy — dzieki temu kafel czyta sie jak przechylony prostokat,
 * a nie jak scieta ze wszystkich stron plakietka.
 *
 * Zaokraglenie z szablonu (20 px) trzeba zdjac. Zaokraglone rogi obok
 * scietych to dwa jezyki form naraz i wyglada na niedokonczone.
 *
 * `clip-path` przycina takze zapas, po ktorym jezdzi zdjecie — to dobrze,
 * bo nadmiar ma byc niewidoczny.
 * ------------------------------------------------------------------ */

.puch-kafel > .vc_column-inner {
	border-radius: 0 !important;
	clip-path: polygon(
		56px 0,
		100% 0,
		100% calc(100% - 56px),
		calc(100% - 56px) 100%,
		0 100%,
		0 56px
	);
}

@media only screen and (max-width: 999px) {

	.puch-kafel > .vc_column-inner {
		clip-path: polygon(
			32px 0,
			100% 0,
			100% calc(100% - 32px),
			calc(100% - 32px) 100%,
			0 100%,
			0 32px
		);
	}
}

/* ------------------------------------------------------------------ *
 * Kafel z ikona zamiast zdjecia (docs/klocki.py, `split(ikona=...)`)
 *
 * Ramka jest nieruchoma, a jej wnetrze przesuwa Salient
 * (`animation_type="parallax"` na kolumnie wewnetrznej). Ikona jest wieksza
 * niz ramka i celowo przycieta — przy przewijaniu wyjezdza gora poza kafel.
 *
 * `min-height` jest konieczna: bez zdjecia kafel nie ma od czego wziac
 * wysokosci i przy krotkim tekscie zrobilby sie plaskim paskiem.
 * ------------------------------------------------------------------ */

.puch-kafel--ikona > .vc_column-inner {
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.puch-kafel--ikona .vc_column-inner .wpb_wrapper {
	width: 100%;
}

/* UWAGA: Iconsmind renderuje sie jako inline SVG w `span.im-icon-wrap`,
   a nie jako `<i>` z fontem — i klasa opakowania ma PODKRESLNIKI
   (`nectar_icon_wrap`), nie myslniki. Selektory z myslnikami nie trafiaja. */
.puch-kafel--ikona .nectar_icon_wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

.puch-kafel--ikona .im-icon-wrap svg {
	display: block;
}

@media only screen and (max-width: 999px) {

	.puch-kafel--ikona > .vc_column-inner {
		min-height: 300px;
	}
}

/* ------------------------------------------------------------------
 * Stopka — sygnal najechania na ciemnym tle
 *
 * Salient wypuszcza `#footer-outer a:hover { color: #191834 !important }`
 * z koloru akcentu (plus blizniacza regula skorki material dla odnosnikow
 * w widgetach). Na granatowej stopce granat jest tlem, wiec odnosnik
 * znikal pod kursorem.
 *
 * Sygnal niesie teraz podkreslenie wjezdzajace od lewej — ten sam jezyk co
 * w naglowku (`header-hover-effect` => `animated_underline`) — a kolor tekstu
 * rozjasnia sie z przygaszonego #c3cedb do bieli. Dwa sygnaly zamiast zmiany
 * barwy, ktora na ciemnym tle nie ma dokad pojsc.
 *
 * Podkreslenie rysuje mechanizm Salienta (`footer-link-hover` => `underline`,
 * wlaczany przez `wp-content/stopka-kolory.php`). Tutaj zostaje sam kolor
 * tekstu, bo motyw wymusza jedna barwe na obu stanach.
 *
 * Waga selektorow: motyw uzywa `!important` przy (0,1,1,1). Kontra musi byc
 * mocniejsza — stad przedrostek `body` i drugi identyfikator.
 * ------------------------------------------------------------------ */

body #footer-outer #footer-widgets a:not(.nectar-button),
body #footer-outer #copyright a:not(.nectar-button) {
	color: #c3cedb !important;
	transition: color .25s ease;
}

body #footer-outer #footer-widgets a:not(.nectar-button):hover,
body #footer-outer #footer-widgets a:not(.nectar-button):focus-visible,
body #footer-outer #copyright a:not(.nectar-button):hover,
body #footer-outer #copyright a:not(.nectar-button):focus-visible {
	color: #ffffff !important;
	opacity: 1;
}

/*
 * Samo podkreslenie rysuje juz Salient: biel bierze z `footer-font-color`
 * (#ffffff), a szerokosc animuje z 0 do 100%. Nie ma czego nadpisywac —
 * jest tu tylko wariant dla klawiatury, bo motyw obsluguje wylacznie
 * `:hover`. Selektor musi byc kopia tego z motywu (te same `:not()`),
 * inaczej przegrywa specyficznoscia; `body` z przodu daje przewage.
 */
body #footer-outer[data-link-hover="underline"] #footer-widgets ul:not([class*="nectar_blog_posts"]) li > a:not(.tag-cloud-link):not(.nectar-button):focus-visible,
body #footer-outer[data-link-hover="underline"] #footer-widgets .textwidget a:not(.nectar-button):focus-visible {
	background-size: 100% 1px;
}

/* Linie miedzy pozycjami list szly w #444 — szarosc dobrana pod domyslne,
   szare tlo stopki motywu. Na granacie schodzi na biel o niskim kryciu. */
body #footer-outer #footer-widgets .col ul li {
	border-bottom-color: rgba(255, 255, 255, .09);
}

/* ------------------------------------------------------------------ *
 * Kafelki-skroty na stronie glownej (docs/klocki.py, `kafelki()`)
 *
 * Ta sama geometria co pozostale kafle: dwa przeciwlegle narozniki
 * sciete pod tym samym katem co skos pasa naglowkowego. Kafelki sa
 * mniejsze od kafla ze zdjeciem, wiec sciecie tez jest mniejsze.
 * ------------------------------------------------------------------ */

.puch-kafelek > .vc_column-inner {
	clip-path: polygon(
		28px 0,
		100% 0,
		100% calc(100% - 28px),
		calc(100% - 28px) 100%,
		0 100%,
		0 28px
	);

	/* Rynna miedzy kaflami. Musi siedziec na `.vc_column-inner`, a nie na
	   kolumnie: kolumna trzyma szerokosc siatki, a tlo kafla wypelnia
	   wnetrze — margines na kolumnie rozjechalby siatke.

	   Skrajne kafle wychodzilyby przez to o 10 px do srodka wzgledem
	   naglowka sekcji; wyrownuje to ujemny margines wiersza nizej. */
	margin: 0 10px;

	/* Rowna wysokosc w rzedzie (wiersz ma `equal_height`), a tresc uklada
	   sie w kolumne, zeby odnosnik zawsze siedzial przy dolnej krawedzi
	   niezaleznie od dlugosci opisu. */
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease;
}

.puch-kafelek > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Kompensacja rynny na krawedziach: wiersz z kaflami rozciaga sie o 10 px
   w obie strony, dzieki czemu pierwszy kafel zaczyna sie dokladnie tam,
   gdzie naglowek sekcji, a ostatni konczy rowno z jego prawa krawedzia. */
.wpb_row:has(> .row_col_wrap_12_inner > .puch-kafelek) > .row_col_wrap_12_inner {
	/* `!important` jest tu konieczne: bez niego regula przegrywa z ustawieniem
	   siatki Salienta, mimo ze selektor pasuje. Sprawdzone — ta sama regula
	   bez `!important` daje wyliczone `margin-left: 0`. */
	margin-left: -10px !important;
	margin-right: -10px !important;
}

/* Odnosnik dosuniety do dolu kafla. */
.puch-kafelek .nectar-cta {
	margin-top: auto;
	padding-top: 14px;
}

/* Kafelek jest odnosnikiem w calosci — lekkie uniesienie sygnalizuje,
   ze da sie w niego kliknac. */
.puch-kafelek > .vc_column-inner:hover {
	transform: translateY(-4px);
}

@media only screen and (max-width: 690px) {

	.puch-kafelek > .vc_column-inner {
		clip-path: polygon(
			20px 0,
			100% 0,
			100% calc(100% - 20px),
			calc(100% - 20px) 100%,
			0 100%,
			0 20px
		);
		margin: 0;
	}

	.wpb_row:has(> .row_col_wrap_12_inner > .puch-kafelek) > .row_col_wrap_12_inner {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}