/**
 * Formularze UWM — bazowy arkusz frontu.
 *
 * Wszystko jest zakresowane do `.uwm-form` i nie używa `!important`: arkusz ma dołożyć
 * wygląd tam, gdzie motyw nic nie mówi, a nie wygrywać z motywem na siłę. Kolory,
 * odstępy i kształty siedzą w zmiennych ustawionych na samym formularzu, więc wtyczka
 * witryny robi własną skórkę, nadpisując kilkanaście wartości pod
 * `.uwm-form.uwm-form--{slug}` — bez kopiowania reguł i bez walki o specyficzność.
 *
 * JEDNOSTKI — jedna reguła, bez wyjątków:
 *
 * - **`em` dla wszystkiego, co jest typografią albo z niej wynika**: rozmiary tekstu,
 *   paddingi kontrolek, wysokości pól, kwadracik checkboxa. Te rzeczy mają skalować się
 *   razem z tekstem, inaczej pole „ściska" swoją zawartość.
 * - **`rem` dla rytmu strony**: odstępy między polami, marginesy i padding sekcji,
 *   maksymalna szerokość. To są odległości fizyczne, nie typograficzne.
 *
 * Punktem odniesienia dla `em` jest `--uwm-form-font-size` ustawione na samym formularzu.
 * Domyślnie `1rem`, bo formularz to interfejs, a nie tekst do czytania — a motywy
 * potrafią dać treści sporo więcej (Twenty Twenty-Five: `clamp(1.125rem, …, 1.375rem)`
 * przy wadze 300, czyli 18–22 px). Przy takim motywie skala pilnowana korzeniem rozjeżdża
 * się z odziedziczoną: nagłówek sekcji wychodzi mniejszy od etykiet pod nim.
 *
 * Witryna, która woli iść za motywem, ustawia `--uwm-form-font-size: inherit` — wtedy
 * cała skala jedzie za treścią, bo reszta rozmiarów jest wyrażona względem niej.
 *
 * Całość wyłącza filtr `uwm_forms_enqueue_styles`.
 */

.uwm-form,
.uwm-form-success {
	/* Punkt odniesienia całej skali. `inherit` = idź za motywem. */
	--uwm-form-font-size: 1rem;
	--uwm-form-line-height: 1.45;
	--uwm-form-font-weight: 400;

	/* Skala typograficzna — wszystko względem `--uwm-form-font-size` */
	--uwm-form-legend-size: 1.35em;
	--uwm-form-legend-weight: 600;
	--uwm-form-legend-color: inherit;
	--uwm-form-label-weight: 500;
	--uwm-form-small-size: 0.875em;

	/* Rytm strony */
	--uwm-form-max-width: 46rem;
	--uwm-form-gap: 1.5rem;
	--uwm-form-field-gap: 0.35em;
	--uwm-form-section-padding: 1.25rem 1.5rem 1.5rem;

	/* Kolory tekstu */
	--uwm-form-text: inherit;
	--uwm-form-muted: #5b6b7c;

	/* Kontrolki */
	--uwm-form-control-bg: #fff;
	--uwm-form-control-text: inherit;
	--uwm-form-control-border: #c9d3de;
	--uwm-form-control-radius: 0;
	--uwm-form-control-padding: 0.55em 0.7em;

	/* Akcent — focus, zaznaczenie kontrolek */
	--uwm-form-accent: #2f78c6;

	/* Sekcje */
	--uwm-form-section-bg: transparent;
	--uwm-form-section-border: #e3eaf2;

	/* Stany */
	--uwm-form-required: #b32d2e;
	--uwm-form-error: #b32d2e;
	--uwm-form-error-bg: #fdf1f1;
	--uwm-form-success-text: #1e4620;
	--uwm-form-success-bg: #edf7ed;
	--uwm-form-success-border: #4a8f4a;
	--uwm-form-notice-text: #4f3a00;
	--uwm-form-notice-bg: #fcf6e5;
	--uwm-form-notice-border: #c9a227;

	/* Przycisk */
	--uwm-form-button-bg: #2f78c6;
	--uwm-form-button-bg-hover: #245e9b;
	--uwm-form-button-text: #fff;
	--uwm-form-button-padding: 0.7em 2.5em;
	--uwm-form-button-radius: 0;
	--uwm-form-button-weight: 600;
}

.uwm-form {
	max-width: var(--uwm-form-max-width);
	/* Rodzinę kroju zostawiamy motywowi — to jedyna część typografii, która ma za nim
	   iść. Rozmiar i wagę ustawiamy same, bo dotyczą interfejsu, nie tekstu. */
	font-size: var(--uwm-form-font-size);
	font-weight: var(--uwm-form-font-weight);
	line-height: var(--uwm-form-line-height);
	color: var(--uwm-form-text);
}

.uwm-form *,
.uwm-form *::before,
.uwm-form *::after {
	box-sizing: border-box;
}

/* --- Komunikat po wysyłce ------------------------------------------------- */

/* Stoi poza `<form>` (jest jego rodzeństwem), więc dostaje zmienne osobno — stąd
   selektor grupowy przy deklaracjach wyżej. */
.uwm-form-success {
	max-width: var(--uwm-form-max-width);
	margin: 0 0 var(--uwm-form-gap);
	padding: 0.875em 1.125em;
	font-size: var(--uwm-form-font-size);
	line-height: var(--uwm-form-line-height);
	border-left: 4px solid var(--uwm-form-success-border);
	background: var(--uwm-form-success-bg);
	color: var(--uwm-form-success-text);
}

/* Komunikat o całym zgłoszeniu, który nie jest ani sukcesem, ani błędem pola — np.
   „przyjęte, ale czeka na ręczne sprawdzenie". Osobny kolor, bo zielone tło sukcesu
   kazałoby przejść dalej, a czerwone tło błędu — szukać pola do poprawienia. */
.uwm-form-notice {
	max-width: var(--uwm-form-max-width);
	margin: 0 0 var(--uwm-form-gap);
	padding: 0.875em 1.125em;
	font-size: var(--uwm-form-font-size);
	line-height: var(--uwm-form-line-height);
	border-left: 4px solid var(--uwm-form-notice-border);
	background: var(--uwm-form-notice-bg);
	color: var(--uwm-form-notice-text);
}

/* --- Sekcje --------------------------------------------------------------- */

.uwm-form-section {
	/* `min-width: 0` jest obowiązkowe: fieldset ma wbudowaną minimalną szerokość treści
	   i bez tego rozpycha układ, gdy trafi w grid albo flex motywu. */
	min-width: 0;
	margin: 0 0 var(--uwm-form-gap);
	padding: var(--uwm-form-section-padding);
	border: 1px solid var(--uwm-form-section-border);
	background: var(--uwm-form-section-bg);
}

.uwm-form-legend {
	padding: 0 0.4em;
	margin-left: -0.4em;
	font-size: var(--uwm-form-legend-size);
	font-weight: var(--uwm-form-legend-weight);
	line-height: 1.3;
	color: var(--uwm-form-legend-color);
}

/* --- Pole ----------------------------------------------------------------- */

.uwm-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--uwm-form-field-gap);
	margin: 0 0 var(--uwm-form-gap);
}

.uwm-form-field:last-child {
	margin-bottom: 0;
}

.uwm-form-label {
	font-weight: var(--uwm-form-label-weight);
	line-height: 1.4;
}

.uwm-form-required {
	color: var(--uwm-form-required);
}

.uwm-form-description {
	font-size: var(--uwm-form-small-size);
	line-height: 1.5;
	color: var(--uwm-form-muted);
}

.uwm-form-link {
	font-size: var(--uwm-form-small-size);
}

.uwm-form-error {
	font-size: var(--uwm-form-small-size);
	font-weight: 500;
	line-height: 1.4;
	color: var(--uwm-form-error);
}

/* --- Kontrolki ------------------------------------------------------------ */

.uwm-form input[type="text"],
.uwm-form input[type="email"],
.uwm-form input[type="number"],
.uwm-form input[type="date"],
.uwm-form input[type="tel"],
.uwm-form input[type="url"],
.uwm-form select,
.uwm-form textarea {
	width: 100%;
	max-width: 100%;
	/* Bez tego przeglądarka daje kontrolkom własny krój i ~13 px niezależnie od strony.
	   `font: inherit` zabiera rodzinę, rozmiar i wagę z formularza — czyli z naszej skali. */
	font: inherit;
	line-height: var(--uwm-form-line-height);
	color: var(--uwm-form-control-text);
	background-color: var(--uwm-form-control-bg);
	border: 1px solid var(--uwm-form-control-border);
	border-radius: var(--uwm-form-control-radius);
	padding: var(--uwm-form-control-padding);
}

.uwm-form textarea {
	min-height: 7em;
	resize: vertical;
}

/* Selecta zostawiamy z natywną strzałką: `appearance: none` wymaga podstawienia własnej
   ikony tłem, a to rozjeżdża się między przeglądarkami i w trybie wysokiego kontrastu.
   Zmieniamy tylko tło, ramkę i wysokość. */
.uwm-form select {
	min-height: 2.6em;
}

/* Data zostaje natywnym `input[type="date"]` — kalendarz systemowy, obsługa klawiatury
   i walidacja z przeglądarki. Poprawiamy tylko wskaźnik kalendarza, żeby nie ginął na
   ciemniejszym tle skórki. */
.uwm-form input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.6;
}

.uwm-form input[type="date"]:hover::-webkit-calendar-picker-indicator,
.uwm-form input[type="date"]:focus::-webkit-calendar-picker-indicator {
	opacity: 1;
}

.uwm-form input:focus-visible,
.uwm-form select:focus-visible,
.uwm-form textarea:focus-visible {
	outline: 2px solid var(--uwm-form-accent);
	outline-offset: 1px;
	border-color: var(--uwm-form-accent);
}

.uwm-form-field--has-error input,
.uwm-form-field--has-error select,
.uwm-form-field--has-error textarea {
	border-color: var(--uwm-form-error);
	background-color: var(--uwm-form-error-bg);
}

/* --- Checkbox ------------------------------------------------------------- */

/* Kontrolka po lewej, etykieta obok, opis i błędy pod etykietą. Kolumna 1 trzyma
   wyłącznie kwadracik, więc wielolinijkowa klauzula zgody nie podwija się pod niego. */
.uwm-form-field--type-checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.6em;
	align-items: start;
}

.uwm-form-field--type-checkbox > input[type="checkbox"] {
	grid-column: 1;
	grid-row: 1;
	width: 1.1em;
	height: 1.1em;
	/* Wyrównanie do pierwszej linii etykiety, nie do środka pola. */
	margin: 0.18em 0 0;
	accent-color: var(--uwm-form-accent);
}

.uwm-form-field--type-checkbox > .uwm-form-label {
	grid-column: 2;
	grid-row: 1;
	font-weight: 400;
}

.uwm-form-field--type-checkbox > .uwm-form-description,
.uwm-form-field--type-checkbox > .uwm-form-link,
.uwm-form-field--type-checkbox > .uwm-form-error {
	grid-column: 2;
	margin-top: var(--uwm-form-field-gap);
}

.uwm-form-field--type-checkbox > input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--uwm-form-accent);
	outline-offset: 2px;
}

/* --- Radio ---------------------------------------------------------------- */

/* Każda opcja renderuje własne `<label><input> tekst</label>`; wspólny nagłówek pola to
   `<span class="uwm-form-label">` wskazany przez `aria-labelledby` na kontenerze. */
.uwm-form-field--type-radio > label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
}

.uwm-form-field--type-radio input[type="radio"] {
	width: 1.1em;
	height: 1.1em;
	accent-color: var(--uwm-form-accent);
}

/* --- Przycisk ------------------------------------------------------------- */

.uwm-form-submit {
	font: inherit;
	font-weight: var(--uwm-form-button-weight);
	line-height: 1.4;
	color: var(--uwm-form-button-text);
	background-color: var(--uwm-form-button-bg);
	border: 0;
	border-radius: var(--uwm-form-button-radius);
	padding: var(--uwm-form-button-padding);
	cursor: pointer;
}

.uwm-form-submit:hover,
.uwm-form-submit:focus {
	background-color: var(--uwm-form-button-bg-hover);
}

.uwm-form-submit:focus-visible {
	outline: 2px solid var(--uwm-form-accent);
	outline-offset: 2px;
}

/* --- Wąskie ekrany -------------------------------------------------------- */

@media (max-width: 30em) {
	.uwm-form,
	.uwm-form-success {
		--uwm-form-section-padding: 1rem;
		--uwm-form-gap: 1.25rem;
	}

	.uwm-form-submit {
		width: 100%;
	}
}