@font-face { font-family: "Archivo"; src: url(fonts/archivo-var.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/atkinson-next-var.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

body.login {
	--paper: oklch(97.2% 0.012 85);
	--ink: oklch(23% 0.035 260);
	--ink-2: oklch(40% 0.03 260);
	--magenta: oklch(54% 0.21 352);
	--magenta-deep: oklch(44% 0.19 352);
	--dusk: oklch(77% 0.15 62);
	--line: oklch(84% 0.02 85);
	font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
	color: var(--ink);
	min-height: 100vh;
	background: var(--ink) url(img/hero-pilota-tramonto.webp) 35% 50% / cover no-repeat;
	position: relative;
}
body.login::before { content: ""; position: fixed; inset: 0; background: linear-gradient(90deg, oklch(18% 0.035 260 / .2), oklch(18% 0.035 260 / .78)); pointer-events: none; }
#login { position: relative; width: min(420px, calc(100vw - 32px)); padding: 6vh 0 40px; margin: 0 6vw 0 auto; }
@media (max-width: 760px) { #login { margin: 0 auto; } }

.login h1 { text-align: left; }
.login h1 a {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23f6f1e7' stroke-linecap='round'%3E%3Cpath d='M14 14 L50 50 M50 14 L14 50' stroke-width='7'/%3E%3Ccircle cx='14' cy='14' r='10' stroke-width='2.5'/%3E%3Ccircle cx='50' cy='14' r='10' stroke-width='2.5'/%3E%3Ccircle cx='14' cy='50' r='10' stroke-width='2.5'/%3E%3Ccircle cx='50' cy='50' r='10' stroke-width='2.5'/%3E%3C/g%3E%3Cg stroke='%23e0408a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 14h14M43 14h14M7 50h14M43 50h14'/%3E%3C/g%3E%3Crect x='25' y='25' width='14' height='14' rx='4' fill='%23f6f1e7'/%3E%3Ccircle cx='32' cy='32' r='2.6' fill='%23e0408a'/%3E%3C/svg%3E") left center / 52px 52px no-repeat;
	width: auto; height: 60px; margin: 0 0 18px; padding-left: 58px;
	display: inline-flex; align-items: center; text-indent: 0; overflow: visible; font-size: 0;
}
.login h1 a::after { content: "droni"; font: 850 2.1rem/1 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.02em; color: var(--paper); }

.xd-login-intro { color: var(--paper); font-size: 1.12rem; line-height: 1.45; margin: 0 0 18px; }
.login .message, .login .notice, .login .success { border: 0; border-radius: 14px; background: var(--paper); box-shadow: none; }
.login .notice-error, .login #login_error { border-left: 0; border-radius: 14px; background: oklch(95% 0.03 352); color: var(--ink); }

.login form {
	background: var(--paper); border: 0; border-radius: 24px; padding: 30px 28px 28px; margin-top: 0;
	box-shadow: 0 30px 80px oklch(10% 0.03 260 / .45);
}
.login label { font-weight: 700; color: var(--ink); font-size: .95rem; }
.login form .input, .login input[type="text"], .login input[type="password"], .login input[type="email"] {
	font-size: 1.05rem; padding: 10px 14px; min-height: 50px; border-radius: 12px; border: 1.5px solid var(--line); background: oklch(99% 0.006 85); color: var(--ink); box-shadow: none;
}
.login form .input:focus, .login input:focus { border-color: var(--magenta); box-shadow: 0 0 0 3px oklch(54% 0.21 352 / .2); outline: 0; }
.login .button.wp-hide-pw { color: var(--ink-2); min-height: 50px; }
.login .button.wp-hide-pw:focus { border-color: var(--magenta); box-shadow: none; }
.wp-core-ui .button-primary {
	background: var(--magenta); border: 0; border-radius: 999px; min-height: 48px; padding: 0 26px;
	font: 700 1rem/1 "Archivo", sans-serif; font-stretch: 112%; text-shadow: none; box-shadow: none; color: var(--paper);
}
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { background: var(--magenta-deep); color: var(--paper); box-shadow: none; }
.login .forgetmenot label { font-weight: 400; }
.login input[type="checkbox"]:checked::before { filter: hue-rotate(110deg); }

.login #nav, .login #backtoblog { padding: 0 6px; margin-top: 16px; }
.login #nav a, .login #backtoblog a, .login .privacy-policy-page-link a { color: var(--paper); font-weight: 600; }
.login #nav a:hover, .login #backtoblog a:hover { color: var(--dusk); }
.login .language-switcher { display: none; }