/**
 * Ekran logowania — układ dwukolumnowy (wzorowany na BuddyBoss).
 * Kontrasty zweryfikowane pod WCAG 2.1 AA.
 */

body.parlo-login {
	background: #F5F7FA;
	margin: 0;
	min-height: 100vh;
}

/* Ukrywamy domyślny układ WP, budujemy własny */
body.parlo-login #login {
	width: 100%;
	max-width: 26rem;
	padding: 0;
	margin: 0;
}

.parlo-login__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 100vh;
}

/* Kolumna formularza */
.parlo-login__form-col {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 2rem;
	background: #fff;
	order: 1;
}

/* Panel informacyjny — wizualnie po prawej */
.parlo-login__aside {
	order: 2;
	background: #1E2132;
	color: #fff;
	display: flex;
	align-items: center;
	padding: 3rem 2.75rem;
}

.parlo-login__aside-inner {
	max-width: 30rem;
}

.parlo-login__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #7CBFFF; /* 8.15:1 na #1E2132 */
	margin: 0 0 0.75rem;
}

.parlo-login__aside-title {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 1rem;
	color: #fff;
}

.parlo-login__aside-text {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #C7CCD9; /* 9.6:1 na #1E2132 */
	margin: 0 0 1.75rem;
}

.parlo-login__list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.parlo-login__list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.625rem;
	color: #E5E9F0;
	font-size: 1rem;
}

.parlo-login__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.75rem;
	height: 0.4rem;
	border-left: 2px solid #7CBFFF;
	border-bottom: 2px solid #7CBFFF;
	transform: rotate(-45deg);
}

.parlo-login__aside-foot {
	font-size: 0.875rem;
	line-height: 1.5;
	color: #A8B0C2; /* 6.2:1 na #1E2132 */
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- Formularz --- */
body.parlo-login #loginform,
body.parlo-login.login form {
	background: #fff;
	border: 1px solid #E3E8EF;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(20, 24, 31, 0.06);
	padding: 1.75rem;
	margin-top: 1.25rem;
}

body.parlo-login.login label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #14181f;
}

body.parlo-login.login input[type="text"],
body.parlo-login.login input[type="password"],
body.parlo-login.login input[type="email"] {
	font-size: 1rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid #75828f; /* 3.93:1 — WCAG 1.4.11 */
	border-radius: 6px;
	min-height: 44px;
	background: #fff;
	color: #14181f;
}

body.parlo-login.login input[type="text"]:focus,
body.parlo-login.login input[type="password"]:focus,
body.parlo-login.login input[type="email"]:focus {
	border-color: #0A6FE0;
	outline: 3px solid #0A6FE0;
	outline-offset: 1px;
	box-shadow: none;
}

body.parlo-login.login .button-primary {
	background: #0A6FE0; /* biały na nim = 4.81:1 */
	border-color: #0A6FE0;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	min-height: 44px;
	border-radius: 6px;
	width: 100%;
	text-shadow: none;
	box-shadow: none;
}

body.parlo-login.login .button-primary:hover,
body.parlo-login.login .button-primary:focus {
	background: #0B4FA8;
	border-color: #0B4FA8;
}

body.parlo-login.login .button-primary:focus-visible {
	outline: 3px solid #14181f;
	outline-offset: 2px;
}

/* Nagłówek — bez logo WordPressa, sam tytuł serwisu
   UWAGA: WP używa selektora .login h1 a (klasa), NIE #login h1 a */
body.parlo-login.login h1 {
	text-align: left;
	margin: 0 0 1.25rem;
}

body.parlo-login.login h1 a {
	background-image: none !important;
	background: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0;
	text-indent: 0;
	overflow: visible;
	white-space: normal;
	display: block;
	color: #14181f;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	max-width: 24rem;
}

body.parlo-login.login h1 a:hover,
body.parlo-login.login h1 a:focus {
	color: #0A6FE0;
}

body.parlo-login.login h1 a:focus-visible {
	outline: 3px solid #0A6FE0;
	outline-offset: 3px;
	border-radius: 3px;
	box-shadow: none;
}

/* Przełącznik języka — wyłączony filtrem, ukrywamy resztki znaczników */
body.parlo-login .language-switcher,
body.parlo-login #language-switcher {
	display: none !important;
}

/* Linki pomocnicze */
body.parlo-login.login #nav,
body.parlo-login.login #backtoblog {
	padding: 0.75rem 0 0;
	text-align: left;
}

body.parlo-login.login #nav a,
body.parlo-login.login #backtoblog a {
	color: #0A6FE0;
	font-size: 0.9375rem;
	text-decoration: underline;
}

body.parlo-login.login #nav a:hover,
body.parlo-login.login #backtoblog a:hover {
	color: #0B4FA8;
}

body.parlo-login.login #nav a:focus-visible,
body.parlo-login.login #backtoblog a:focus-visible {
	outline: 3px solid #0A6FE0;
	outline-offset: 2px;
}

/* Komunikaty — nie tylko kolorem (WCAG 1.4.1) */
body.parlo-login.login .message,
body.parlo-login.login #login_error {
	border-radius: 6px;
	border-left-width: 4px;
	font-size: 0.9375rem;
	padding: 0.875rem 1rem;
}

body.parlo-login.login #login_error {
	border-left-color: #a4232b;
	background: #fdf3f3;
	color: #14181f;
}

body.parlo-login.login .message {
	border-left-color: #0A6FE0;
	background: #f1f7fe;
	color: #14181f;
}

/* Checkbox „zapamiętaj mnie" — powiększony cel dotykowy */
body.parlo-login.login .forgetmenot input[type="checkbox"] {
	width: 1.35rem;
	height: 1.35rem;
}

body.parlo-login.login .forgetmenot label {
	font-weight: 400;
	font-size: 0.9375rem;
}

/* Odstęp „Zapamiętaj mnie" → przycisk.
   🚨 Rdzeń WP ma regułę `#login form p { margin-bottom: 0 }` — selektor
   z IDENTYFIKATOREM bije każdą kombinację klas, więc `body.parlo-login.login
   .forgetmenot` przegrywało mimo trzech klas. Dlatego własny selektor też
   musi zawierać `#login`. */
body.parlo-login.login #login form p.forgetmenot,
body.parlo-login.login .forgetmenot {
	margin-bottom: 2rem;
}

body.parlo-login.login .submit,
body.parlo-login.login #wp-submit {
	margin-top: 0;
}

/* Podgląd hasła: własna ikona zamiast dashicona „oko".
   Dashicon zastąpiony maską SVG, żeby przycisk zachował semantykę i etykietę. */
body.parlo-login.login .wp-pwd .button.wp-hide-pw {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--primary, #0A6FE0);
}

body.parlo-login.login .wp-pwd .button.wp-hide-pw .dashicons {
	width: 22px;
	height: 22px;
	font-size: 1.375rem;
}

/* Ukrywamy glif czcionki ikonowej, rysujemy własny kształt maską */
body.parlo-login.login .wp-pwd .button.wp-hide-pw .dashicons::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 22px 22px;
	mask-size: 22px 22px;
}

/* Stan „pokaż hasło" — oko (Lucide eye) */
body.parlo-login.login .wp-pwd .button.wp-hide-pw .dashicons-visibility::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Stan „ukryj hasło" — oko przekreślone (Lucide eye-off) */
body.parlo-login.login .wp-pwd .button.wp-hide-pw .dashicons-hidden::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

/* --- Układ na węższych ekranach --- */
@media (max-width: 900px) {
	.parlo-login__split {
		grid-template-columns: minmax(0, 1fr);
		min-height: auto;
	}

	.parlo-login__form-col {
		order: 1;
		padding: 2rem 1.25rem;
	}

	.parlo-login__aside {
		order: 2;
		padding: 2rem 1.25rem 2.5rem;
	}

	.parlo-login__aside-title {
		font-size: 1.375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.parlo-login * {
		transition: none !important;
	}
}

/* ==========================================================================
   TRYB WYSOKIEGO KONTRASTU NA EKRANIE LOGOWANIA
   --------------------------------------------------------------------------
   🚨 Ekran logowania ma własny arkusz o wysokiej specyficzności
   (`body.parlo-login.login label` itd.), więc reguły z `a11y.css` go nie
   dosięgały: lewa kolumna zostawała biała (żółty tekst na białym = 1,07),
   etykiety pól znikały, a panel informacyjny w ogóle nie reagował.

   Selektory poniżej powtarzają tę samą specyficzność, poprzedzoną atrybutem
   `html[data-a11y-contrast="1"]`.
   ========================================================================== */

html[data-a11y-contrast="1"] body.parlo-login,
html[data-a11y-contrast="1"] body.parlo-login .parlo-login__split,
html[data-a11y-contrast="1"] body.parlo-login .parlo-login__form-col,
html[data-a11y-contrast="1"] body.parlo-login .parlo-login__aside,
html[data-a11y-contrast="1"] body.parlo-login.login #loginform,
html[data-a11y-contrast="1"] body.parlo-login.login form {
	background: #000 !important;
	color: #fff !important;
}

/* Etykiety pól — bez tego znikały na czarnym tle */
html[data-a11y-contrast="1"] body.parlo-login.login label,
html[data-a11y-contrast="1"] body.parlo-login.login .forgetmenot label,
html[data-a11y-contrast="1"] body.parlo-login .parlo-login__aside-text,
html[data-a11y-contrast="1"] body.parlo-login .parlo-login__aside-foot,
html[data-a11y-contrast="1"] body.parlo-login .parlo-login__list,
html[data-a11y-contrast="1"] body.parlo-login .parlo-login__list li,
html[data-a11y-contrast="1"] body.parlo-login .parlo-login__aside-title {
	color: #fff !important;
}

html[data-a11y-contrast="1"] body.parlo-login .parlo-login__eyebrow {
	color: #ffff00 !important;
}

/* Nagłówek nad formularzem: żółty na czarnym (19,56), nie na białym (1,07) */
html[data-a11y-contrast="1"] body.parlo-login.login h1,
html[data-a11y-contrast="1"] body.parlo-login.login h1 a {
	color: #ffff00 !important;
	background: transparent !important;
}

html[data-a11y-contrast="1"] body.parlo-login.login input[type="text"],
html[data-a11y-contrast="1"] body.parlo-login.login input[type="password"],
html[data-a11y-contrast="1"] body.parlo-login.login input[type="email"] {
	background: #000 !important;
	color: #fff !important;
	border: 2px solid #fff !important;
}

html[data-a11y-contrast="1"] body.parlo-login.login input[type="submit"],
html[data-a11y-contrast="1"] body.parlo-login.login .button-primary {
	background: #ffff00 !important;
	color: #000 !important;
	border: 2px solid #ffff00 !important;
}

/* Odnośniki pomocnicze pod formularzem */
html[data-a11y-contrast="1"] body.parlo-login.login #nav a,
html[data-a11y-contrast="1"] body.parlo-login.login #backtoblog a {
	color: #ffff00 !important;
}

/* Podgląd hasła i znaczniki listy — dziedziczą kolor akcentu */
html[data-a11y-contrast="1"] body.parlo-login.login .wp-hide-pw,
html[data-a11y-contrast="1"] body.parlo-login .parlo-login__list li::before {
	color: #ffff00 !important;
}

html[data-a11y-contrast="1"] body.parlo-login.login .forgetmenot input[type="checkbox"] {
	accent-color: #ffff00;
	outline: 2px solid #fff;
}

/* Dymek podpowiedzi WordPressa przy „Zapamiętaj mnie" — pojawia się po
   najechaniu na znak zapytania i ma własne, jasne tło z rdzenia. */
html[data-a11y-contrast="1"] body.parlo-login.login .wp-tooltip__bubble,
html[data-a11y-contrast="1"] body.parlo-login.login .wp-tooltip__bubble * {
	background: #000 !important;
	color: #fff !important;
	border: 2px solid #ffff00 !important;
}

html[data-a11y-contrast="1"] body.parlo-login.login .wp-tooltip__toggle {
	color: #ffff00 !important;
	border-color: #ffff00 !important;
}

/* Przycisk logowania — odstęp niesie element powyżej, tu tylko zerujemy
   ewentualny własny margines. Selektor z `#login` z tego samego powodu. */
body.parlo-login.login #login form p.submit,
body.parlo-login.login .submit {
	margin-top: 0;
	padding-top: 0;
}

/* Znaczniki „✓" w panelu informacyjnym — w trybie kontrastu zostawały
   niebieskie (4,36 na czarnym). Żółty daje 19,56 i jest spójny z resztą
   akcentów tego trybu. */
/* 🚨 Znacznik „✓" nie jest tekstem ani ikoną SVG — to dwie krawędzie
   obrócone o 45°. `color` go nie dotyczy, trzeba zmienić `border-color`. */
html[data-a11y-contrast="1"] body.parlo-login .parlo-login__list li::before {
	border-left-color: #ffff00 !important;
	border-bottom-color: #ffff00 !important;
}

html[data-a11y-contrast="1"] body.parlo-login .parlo-login__list svg {
	fill: #ffff00 !important;
	stroke: #ffff00 !important;
}

/* ==========================================================================
   KOMUNIKATY WORDPRESSA W TRYBIE KONTRASTU
   Ekrany „Nie pamiętasz hasła" i „Ustaw nowe hasło" wyświetlają ramki
   `.message` / `.notice` z jasnym tłem z rdzenia — biały tekst na nich
   stawał się nieczytelny.
   ========================================================================== */

/* Ramkę dostaje TYLKO kontener — elementy wewnątrz przejmują samo tło
   i kolor, inaczej powstawało podwójne obramowanie. */
html[data-a11y-contrast="1"] body.parlo-login.login .message,
html[data-a11y-contrast="1"] body.parlo-login.login .notice,
html[data-a11y-contrast="1"] body.parlo-login.login #login_error,
html[data-a11y-contrast="1"] body.parlo-login.login .success {
	background: #000 !important;
	color: #fff !important;
	border: 2px solid #fff !important;
	border-left: 4px solid #ffff00 !important;
}

html[data-a11y-contrast="1"] body.parlo-login.login .message *,
html[data-a11y-contrast="1"] body.parlo-login.login .notice *,
html[data-a11y-contrast="1"] body.parlo-login.login #login_error * {
	background: transparent !important;
	color: #fff !important;
	border: 0 !important;
}

/* Błąd logowania — czerwony wyróżnik, ale czytelny na czarnym (7,57) */
html[data-a11y-contrast="1"] body.parlo-login.login #login_error {
	border-left-color: #ff6b6b !important;
}

html[data-a11y-contrast="1"] body.parlo-login.login .message a,
html[data-a11y-contrast="1"] body.parlo-login.login .notice a,
html[data-a11y-contrast="1"] body.parlo-login.login #login_error a {
	color: #ffff00 !important;
	background: transparent !important;
	border: 0 !important;
}

/* Ekran odzyskiwania hasła — ten sam układ, inne identyfikatory formularza */
html[data-a11y-contrast="1"] body.parlo-login.login #lostpasswordform,
html[data-a11y-contrast="1"] body.parlo-login.login #resetpassform {
	background: #000 !important;
	color: #fff !important;
}

html[data-a11y-contrast="1"] body.parlo-login.login #lostpasswordform label,
html[data-a11y-contrast="1"] body.parlo-login.login #resetpassform label,
html[data-a11y-contrast="1"] body.parlo-login.login .description,
html[data-a11y-contrast="1"] body.parlo-login.login .indicator-hint {
	color: #fff !important;
}