/*
 * uzupelnienie.css - warstwa zgodnosci. Ladowany PO css/main.css.
 *
 * Arkusz main.css zostaje bez zmian, zeby strona wygladala dokladnie tak
 * samo jak wczesniej. Tutaj jest tylko to, co trzeba bylo dolozyc po
 * wymianie dwoch rzeczy: ikon (byly czcionka z kit.fontawesome.com, teraz
 * sa rysunkami SVG) i mapy (byla ramka Google, teraz rysowana lokalnie).
 */

/* ---------------------------------------------------------------- ikony */

/*
 * Rozmiar ikony bierze sie z wysokosci tekstu, dokladnie tak, jak dzialala
 * czcionka - wszystkie reguly w main.css ustawiaja ikonom font-size i to
 * dalej ma decydowac.
 *
 * box-sizing: content-box TO JEST NAJWAZNIEJSZA LINIA W TYM PLIKU.
 * Gdy arkusz ustawia globalnie border-box (a main.css to robi) i ikona
 * dostaje padding, wysokosc pudelka zjada padding i na rysunek zostaje
 * zero pikseli. Przegladarka nie ma wtedy jak przeskalowac viewBoxa
 * i rysuje sciezke w jej wlasnych jednostkach - kilkaset pikseli, poza
 * widocznym obszarem.
 */
.limo-ikona {
	display: inline-block;
	box-sizing: content-box;
	height: 1em;
	width: 1em;
	vertical-align: middle;
	transform: translateY(-0.08em);
	fill: currentColor;
	flex-shrink: 0;
}

/*
 * Szerokosc z proporcji rysunku, a nie na sztywno 1em - inaczej ikony
 * szersze niz wysokie wychodza sciesnione. Osobno, bo w kolumnie
 * elastycznej "width: auto" bez aspect-ratio zwija sie do zera.
 */
@supports (aspect-ratio: 1) {
	.limo-ikona {
		width: auto;
		aspect-ratio: var(--limo-proporcja, 1);
	}
}

/*
 * W stopce ikony telefonu mialy w oryginale wpisany wprost odstep
 * (style="padding-right: 5px"). Ten sam odstep, tylko z arkusza.
 */
.limo-ikona.ikona-w-odnosniku {
	padding-right: 5px;
}

/* ----------------------------------------------------------------- mapa */

/*
 * Mapa zajmuje dokladnie to miejsce, co wczesniej ramka Google: ta miala
 * wpisane w kodzie width="250px" height="200px" i odstep u gory.
 */
.limo-mapa {
	width: 250px;
	max-width: 100%;
	height: 200px;
	margin-top: 20px;
}

.limo-mapa .leaflet-container {
	font-family: inherit;
	background: #ddd;
}

/* Odnosnik do autorow OpenStreetMap ma byc widoczny - wymaga tego licencja. */
.limo-mapa .leaflet-control-attribution {
	font-size: 10px;
}

/* ------------------------------------------------------------ formularz */

/* Pulapka na roboty: pole ma byc niewidoczne dla czlowieka, ale nie
   ukryte przez display:none - czesc automatow takie pola pomija. */
.pole-ukryte {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}