/* ==========================================================================
   Tela de login com a identidade da Ellos

   O gradiente e o halo são os mesmos do hero do site: quem chega aqui vindo
   do site não sente que trocou de lugar.

   Nada aqui esconde ou remove campo do formulário nativo. Login é a porta de
   entrada, e uma porta que "quase" funciona porque alguém escondeu um aviso
   é o pior desfecho possível — inclusive as mensagens de erro e o link de
   recuperação de senha continuam onde estavam.
   ========================================================================== */

body.login {
	background:
		radial-gradient(1200px 600px at 85% -10%, rgba(0, 120, 214, .28) 0%, rgba(0, 120, 214, 0) 60%),
		radial-gradient(900px 500px at 10% 110%, rgba(212, 47, 46, .16) 0%, rgba(212, 47, 46, 0) 60%),
		linear-gradient(160deg, #013FB6 0%, #01143C 100%);
	color: #fff;
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* O halo gira devagar, e para quando o sistema pede menos movimento. */
body.login::before {
	content: "";
	position: fixed;
	top: -30vh;
	right: -20vw;
	width: 80vw;
	height: 80vw;
	max-width: 900px;
	max-height: 900px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(101, 179, 253, .22) 0%, rgba(101, 179, 253, 0) 70%);
	pointer-events: none;
	animation: ellos-halo 26s ease-in-out infinite alternate;
}

@keyframes ellos-halo {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-4%, 5%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	body.login::before { animation: none; }
}

#login {
	position: relative;
	z-index: 1;
	width: min(24rem, 92vw);
	padding: 5vh 0 3vh;
}

/* --- Logo ---------------------------------------------------------------

   A imagem entra por variável, escrita pelo PHP a partir do logo do site.
   Sem logo definida, a marca do WordPress dá lugar ao nome do site — melhor
   um nome legível que um espaço vazio.
   ------------------------------------------------------------------------ */

.login h1 { margin-bottom: 1.5rem; }

.login h1 a {
	background-image: var(--ellos-login-logo, none);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: var(--ellos-login-logo-altura, 84px);
	margin: 0 auto;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-indent: 0;
	overflow: visible;
	line-height: var(--ellos-login-logo-altura, 84px);
}

/* Com logo, o nome do site sai da vista — mas continua no HTML.

   text-indent negativo, e não display:none nem texto removido: o leitor de
   tela e o buscador continuam lendo o nome, e é ele que dá contexto a um link
   que, visualmente, é só uma imagem.

   A classe vem do body, e é assim que o PHP a escreve. Na versão anterior a
   regra mirava uma classe no próprio link, que nunca era aplicada — e o nome
   do site aparecia por cima da logo. */
/* `body.login.ellos-tem-logo h1 a`, e não `body.ellos-tem-logo .login h1 a`:
   o `.login` é o próprio body, não um filho dele. A segunda forma procura um
   elemento que não existe e não casa com nada — foi o que deixou o nome do
   site por cima da logo. */
body.login.ellos-tem-logo h1 a {
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}

/* --- Formulário --------------------------------------------------------- */

.login form {
	background: rgba(255, 255, 255, .96);
	border: 0;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(1, 20, 60, .38);
	padding: 1.75rem 1.5rem 1.5rem;
	color: #1D283B;
}

.login label { color: #1D283B; font-size: .9rem; font-weight: 500; }

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	border: 1px solid rgba(1, 63, 182, .2);
	border-radius: 8px;
	padding: .7rem .8rem;
	font-size: 1rem;
	box-shadow: none;
	background: #fff;
	color: #1D283B;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: #0078D6;
	box-shadow: 0 0 0 3px rgba(0, 120, 214, .2);
	outline: 0;
}

.login .button-primary {
	width: 100%;
	background: #D42F2E;
	border: 0;
	border-radius: 999px;
	padding: .7em 1.2em;
	height: auto;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	box-shadow: none;
	transition: background 160ms ease, transform 160ms ease;
}

.login .button-primary:hover,
.login .button-primary:focus {
	background: #B32423;
	transform: translateY(-1px);
}

/* Alvo de toque decente e foco visível: a caixa "lembrar" nativa tem 16px, o
   que é pequeno demais para o dedo. */
.login .forgetmenot label { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem 0; }

.login input[type="checkbox"]:focus-visible,
.login a:focus-visible {
	outline: 3px solid #65B3FD;
	outline-offset: 2px;
	box-shadow: none;
}

/* --- Links e avisos ------------------------------------------------------

   Continuam visíveis, e com contraste sobre o fundo escuro. Esconder o link
   de recuperar senha para "limpar" a tela é o tipo de enfeite que gera
   chamado de suporte.
   ------------------------------------------------------------------------- */

.login #nav,
.login #backtoblog {
	text-align: center;
	padding: .6rem 0 0;
	text-shadow: none;
}

.login #nav a,
.login #backtoblog a {
	color: rgba(255, 255, 255, .82);
	font-size: .85rem;
}

.login #nav a:hover,
.login #backtoblog a:hover { color: #fff; }

.login .message,
.login .notice,
.login #login_error {
	border-radius: 10px;
	border-left-width: 4px;
	color: #1D283B;
	box-shadow: 0 10px 30px rgba(1, 20, 60, .2);
}

.login .privacy-policy-page-link a { color: rgba(255, 255, 255, .82); }

/* O tema escuro do navegador não deve inverter o cartão branco. */
@media (prefers-color-scheme: dark) {
	.login form { background: rgba(255, 255, 255, .96); color: #1D283B; }
}