/**
 * janschenk.pl — reguły dla ekranów telefonu.
 *
 * Do 20.09.2026 motyw potomny nie miał ani jednej reguły @media, a nagłówek
 * (szablon Elementora 35) miał wyłącznie regułę min-width: 768px. Ten plik
 * domyka to, czego nie da się ustawić klikaniem w Elementorze.
 *
 * Tokeny kolorów są te same co w zestawie Elementora (kit 4).
 */

:root {
	--js-ink: #1d1d1d;
	--js-graphite: #222;
	--js-line: #e5e5e5;
	--js-mist: #f5f5f5;
	--js-hi: #c1272d;
	--js-wa: #1f9d55;
	/* Ten sam znak marki, ale dociemniony do progu AA — podpis „WhatsApp"
	   w #1f9d55 na białym ma 3,49:1 przy wymaganych 4,5:1 (zmierzone 22.09).
	   Ikona zostaje w #1f9d55, bo grafika nieinformacyjna ma próg 3:1. */
	--js-wa-napis: #157f3f;
	--js-dock-h: 64px;
}

/* Pasek żyje tylko na telefonie. */
.js-dock {
	display: none;
}

@media (max-width: 767px) {

	/* --- dolny pasek akcji --------------------------------------------- */
	.js-dock {
		position: fixed;
		z-index: 9990;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		gap: 8px;
		padding: 8px 12px;
		padding-bottom: calc( 8px + env( safe-area-inset-bottom, 0px ) );
		background: #fff;
		border-top: 1px solid var(--js-line);
		box-shadow: 0 -2px 14px rgba( 0, 0, 0, 0.07 );
	}

	.js-dock__link {
		display: flex;
		flex: 1;
		gap: 8px;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		border: 1.5px solid currentColor;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.1;
		text-decoration: none;
	}

	.js-dock__link svg {
		width: 19px;
		height: 19px;
		flex: 0 0 auto;
	}

	/* Zestaw Elementora ustawia kolor dla każdego <a>, stąd podbita specyficzność. */
	.js-dock a.js-dock__link--tel,
	.js-dock a.js-dock__link--tel:hover,
	.js-dock a.js-dock__link--tel:visited {
		color: var(--js-graphite);
	}

	.js-dock a.js-dock__link--wa,
	.js-dock a.js-dock__link--wa:hover,
	.js-dock a.js-dock__link--wa:visited {
		color: var(--js-wa);
	}

	.js-dock a.js-dock__link--quote,
	.js-dock a.js-dock__link--quote:hover,
	.js-dock a.js-dock__link--quote:visited {
		flex: 1.15;
		border-color: var(--js-hi);
		background: var(--js-hi);
		color: #fff;
	}

	.js-dock__link span,
	.js-dock__link svg {
		color: inherit;
		fill: currentColor;
	}

	/* WCAG 1.4.3 (AA): tekst musi mieć 4,5:1, ikona jako element graficzny
	   tylko 3:1 — dlatego rozdzielamy odcień podpisu od odcienia znaku. */
	.js-dock a.js-dock__link--wa span {
		color: var(--js-wa-napis);
	}

	.js-dock__link:focus-visible {
		outline: 3px solid var(--js-ink);
		outline-offset: 2px;
	}

	/* Stopka i treść nie chowają się pod paskiem. */
	body.ma-dock {
		padding-bottom: var(--js-dock-h);
	}

	/* WCAG 2.2 / 2.4.11 Focus Not Obscured (AA). Przeglądarka przewija element,
	   który dostał fokus, tak żeby dotknął dolnej krawędzi okna — a tam stoi
	   przyklejony pasek kontaktu i zasłania go w całości. Zmierzone 22.09 na
	   hubie wnętrz: 1 z 45 przystanków Tab kończył pod paskiem („Zobacz pełny
	   cennik →"). scroll-padding rezerwuje pas, w który przewijanie nie wjedzie. */
	html {
		scroll-padding-bottom: calc( var(--js-dock-h) + 12px );
	}

	/* --- nagłówek ------------------------------------------------------- */

	/* Hamburger jako pełny cel dotykowy, dosunięty do prawej krawędzi. */
	.elementor-location-header .elementor-menu-toggle {
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 8px;
	}

	.elementor-location-header .elementor-menu-toggle i,
	.elementor-location-header .elementor-menu-toggle svg {
		font-size: 24px;
		width: 24px;
		height: 24px;
	}

	/* Rozwinięte menu na pełną szerokość ekranu, nie w słupku szerokim na 102 px. */
	.elementor-location-header .elementor-nav-menu--dropdown {
		width: 100vw;
		max-width: 100vw;
		margin-left: 0;
		left: 0;
		box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.08 );
	}

	/* UWAGA: .elementor-nav-menu--dropdown to <nav>, a nie <ul>. Selektor "… ul a"
	   łapie tu WSZYSTKIE pozycje, nie same podpozycje — stąd poziomy trzeba
	   rozróżniać przez > li > a oraz .sub-menu. */

	/* Pozycje główne: białe tło, pełny cel dotykowy, wyrównane do lewej krawędzi treści. */
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu > li > a {
		display: flex;
		align-items: center;
		/* 46 px zamiast 52: przy rozwiniętej „Ofercie” cała lista razem z przyciskiem
		   mieści się bez przewijania. Wciąż powyżej progu 44 px dla celu dotykowego. */
		min-height: 46px;
		padding: 0 16px;
		border-top: 1px solid var(--js-line);
		background: #fff;
		font-size: 16px;
		line-height: 1.3;
	}

	/* Menu otwiera się z rozwiniętą „Ofertą” (assets/js/mobile-menu.js), więc bywa
	   wyższe niż ekran. Ograniczenie do przestrzeni między nagłówkiem a dolnym
	   paskiem sprawia, że lista przewija się wewnątrz, zamiast chować ostatnią
	   pozycję pod paskiem akcji. */
	.elementor-location-header .elementor-nav-menu--dropdown {
		/* Elementor wylicza max-height ze zmiennej --menu-height wstrzykiwanej inline
		   (1000vmax), której z arkusza nie da się przebić inaczej niż !important. */
		max-height: calc( 100vh - 81px - var(--js-dock-h) - 8px ) !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Rozwinięcie podmenu nadaje pozycji stan „highlighted”, który w ustawieniach
	   widgetu ma biały kolor tekstu — na białym tle menu mobilnego etykieta znikała.
	   Kolor trzymamy tu, niezależnie od stanu. */
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu > li > a,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu > li > a:hover,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu > li > a:focus,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.highlighted,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item-active {
		color: var(--js-ink);
		background: #fff;
	}

	/* Stan otwartego podmenu sygnalizuje sama strzałka, nie zmiana koloru tła. */
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.highlighted .sub-arrow svg {
		transform: rotate( 180deg );
	}

	/* Podpozycje: wcięcie i szare tło niosą informację o zagnieżdżeniu.
	   Etykiety „Realizacje – …” zostają w całości, mogą łamać się na dwie linie. */
	.elementor-location-header .elementor-nav-menu--dropdown .sub-menu a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 6px 16px 6px 32px;
		background: var(--js-mist);
		font-size: 14px;
		font-weight: 400;
		line-height: 1.35;
	}

	/* Strzałka podmenu ma się mieścić w menu, a nie wypadać poza nie. */
	.elementor-location-header .elementor-nav-menu--dropdown .sub-arrow {
		margin-left: auto;
		padding: 0 6px;
	}

}

/* =========================================================================
   Formularz kontaktu
   =========================================================================
   Formularz Elementora dostawał na telefonie 212 px z 390: kontener miał
   padding 48 px z każdej strony. Pola miały font 15 px, przez co iOS Safari
   powiększał stronę przy wejściu w pole, a radio i checkbox mierzyły 13×13 px.

   Style są celowo poza media query tam, gdzie poprawiają formularz na każdej
   szerokości (cele dotykowe, kontrast, wybór jako kafelki).
   ========================================================================= */

/* Nagłówki grup pól (pola typu HTML w formularzu). */
.js-form__grupa {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 12px 0 4px;
	color: #5c5c5c;
	font-size: 13px;
	font-weight: 700;
}

.js-form__grupa::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--js-line);
}

/* Pola: pełny cel dotykowy i font, który nie wywołuje zoomu na iOS. */
.elementor-field-group .elementor-field-textual {
	min-height: 52px;
	padding: 12px 14px;
	border: 1.5px solid var(--js-line);
	border-radius: 10px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--js-ink);
	transition: border-color .15s, box-shadow .15s;
}

.elementor-field-group textarea.elementor-field-textual {
	min-height: 120px;
}

.elementor-field-group .elementor-field-textual:focus {
	border-color: var(--js-ink);
	box-shadow: 0 0 0 3px rgba( 29, 29, 29, .12 );
	outline: none;
}

.elementor-field-group > label {
	margin-bottom: 6px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--js-graphite);
}

.elementor-field-group .elementor-field-required .elementor-mark-required,
.elementor-field-group .elementor-mark-required {
	color: var(--js-hi);
}

/* Wybór: kafelek zamiast kropki 13 px. */
.elementor-field-subgroup .elementor-field-option {
	position: relative;
	display: block;
	margin: 0 0 8px;
}

.elementor-field-subgroup .elementor-field-option input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.elementor-field-subgroup .elementor-field-option input[type="radio"] + label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	margin: 0;
	padding: 12px 14px;
	border: 1.5px solid var(--js-line);
	border-radius: 10px;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--js-graphite);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.elementor-field-subgroup .elementor-field-option input[type="radio"] + label::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid #c4c4c4;
	border-radius: 50%;
	transition: border-color .15s, box-shadow .15s;
}

.elementor-field-subgroup .elementor-field-option input[type="radio"]:checked + label {
	border-color: var(--js-ink);
	background: var(--js-mist);
}

.elementor-field-subgroup .elementor-field-option input[type="radio"]:checked + label::before {
	border-color: var(--js-hi);
	box-shadow: inset 0 0 0 5px var(--js-hi);
}

.elementor-field-subgroup .elementor-field-option input[type="radio"]:focus-visible + label {
	box-shadow: 0 0 0 3px rgba( 29, 29, 29, .12 );
}

/* Zgoda: cały blok jako cel dotykowy. */
.elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 56px;
	padding: 16px 14px;
	border: 1.5px solid var(--js-line);
	border-radius: 10px;
	background: var(--js-mist);
}

.elementor-field-type-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin: 0;
	accent-color: var(--js-hi);
}

.elementor-field-type-acceptance label {
	font-size: 13.5px;
	line-height: 1.5;
	color: #4a4a4a;
}

/* Przycisk wysyłki. */
.elementor-widget-form .elementor-button[type="submit"] {
	width: 100%;
	min-height: 56px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
}

@media (max-width: 767px) {

	/* Kontener formularza oddawał 96 px z 390 na sam padding. */
	.elementor-widget-form,
	.elementor-widget-form .elementor-form {
		width: 100%;
	}

	/* Na wąskim ekranie każde pole zajmuje całą szerokość. */
	.elementor-widget-form .elementor-field-group {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
	}
}