/**
 * PW Motion — pole w stylu wyszukiwarki nad nagłówkiem (klasy pw-search, pw-type).
 *
 * pw-search zamienia kontener w wąską pigułkę z obwódką, która nie rozciąga się
 * na całą szerokość rodzica. pw-type oznacza napis wpisywany znak po znaku;
 * bez JavaScriptu widać po prostu cały tekst, więc treść nigdy nie znika.
 */

.pw-search {
	/* Kontenery Elementora sterują szerokością zmienną --width; sama reguła
	   width by tu nie wystarczyła. */
	width: auto !important;
	--width: auto;
	max-width: 100%;
	flex: 0 0 auto !important;
	--flex-grow: 0;
	--flex-shrink: 0;
	align-self: flex-start;
	/* Elementor na wąskim ekranie zawija kontenery z automatu; tu zawinięcie
	   rozbiłoby pigułkę na dwa wiersze. */
	flex-wrap: nowrap !important;
	--flex-wrap: nowrap;
	--flex-wrap-mobile: nowrap;
	border: 1px solid rgba(120, 200, 255, 0.22);
	border-radius: 999px;
	background: rgba(7, 16, 24, 0.55);
	box-shadow: 0 0 0 4px rgba(94, 200, 255, 0.035);
}

/* Elementor rozciąga widgety w rzędzie na całą wysokość kontenera. W pigułce
   ma być odwrotnie: lupka i oba napisy stoją w jednej linii, wyśrodkowane. */
.pw-search > .elementor-widget {
	align-self: center;
	--container-widget-align-self: center;
	height: auto;
	--container-widget-height: initial;
	line-height: 0;
}

/* Miejsce na słowo rezerwuje skrypt co do piksela, więc kursor musi zostać
   w tym samym wierszu — inaczej spada pod napis. */
.pw-type .elementor-heading-title {
	white-space: nowrap;
}

/* Kursor tekstowy na końcu wpisywanego słowa. */
.pw-type .elementor-heading-title::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -0.14em;
	background: currentColor;
	animation: pw-caret 1.05s steps(1) infinite;
}

@keyframes pw-caret {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

/* Miejsce na pełne słowo rezerwuje skrypt, więc pigułka nie rośnie w trakcie
   pisania. Tekst dla czytników ekranu leży obok, poza obrazem. */
.pw-type-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Na najwęższych ekranach pigułka ma zostać w jednym wierszu, więc oddajemy
   trochę światła między znakami i z zapasu przy krawędziach. */
@media (max-width: 420px) {
	.pw-search {
		padding-left: 12px;
		padding-right: 14px;
		gap: 7px;
		--gap: 7px 7px;
	}

	.pw-search .elementor-heading-title {
		letter-spacing: 0.9px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pw-type .elementor-heading-title::after {
		animation: none;
		opacity: 0.6;
	}
}