/* ==========================================================================
   FCL PARTICIPAÇÕES — TELA DE LOGIN (wp-login.php)
   Reveste a tela padrão do WordPress com a identidade do site: fundo ink com
   grade blueprint + brilho lima, logo da marca, cartão de credenciais em
   bone-paper, foco lima e botão de acento. Depende de tokens.css (var(--…)).
   ========================================================================== */

/* --- Palco: ink + grade blueprint + brilho lima -------------------------------- */
body.login {
  min-height: 100vh;
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-family: var(--font-body);
  position: relative;
  overflow-x: hidden;
}
body.login::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(120% 85% at 50% 28%, #000 18%, transparent 74%);
  mask-image: radial-gradient(120% 85% at 50% 28%, #000 18%, transparent 74%);
}
body.login::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 42% at 50% 20%, rgba(215, 248, 76, 0.10), transparent 70%);
}

/* --- Coluna central ------------------------------------------------------------ */
#login {
  position: relative;
  z-index: 1;
  width: 400px;
  max-width: calc(100vw - 3rem);
  padding: clamp(3.5rem, 10vh, 7rem) 0 4rem;
}

/* --- Logo ---------------------------------------------------------------------- */
#login h1 { margin-bottom: var(--space-6); }
#login h1 a {
  background-image: url(../assets/logo/fcl-logo-white.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 56px;
  margin: 0;
  text-indent: -9999px;
  overflow: hidden;
}

/* --- Eyebrow + subtítulo ------------------------------------------------------- */
.fcl-login-intro {
  text-align: center;
  margin: 0 0 var(--space-6);
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}
.fcl-login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-on-dark-mut);
}
.fcl-login-eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--c-accent);
  border-radius: 2px;
  transform: rotate(45deg);
}
.fcl-login-sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--c-on-dark-mut);
}

/* --- Cartão de credenciais ----------------------------------------------------- */
/* :not(.language-switcher) — o seletor de idioma também é um <form>, mas não é
   um cartão de credenciais; sem isso o cartão e a faixa vazam para ele. */
.login form:not(.language-switcher) {
  margin-top: 0;
  padding: clamp(1.75rem, 1rem + 3vw, 2.5rem);
  background: var(--c-paper);
  border: 1px solid rgba(244, 243, 238, 0.08);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
/* Faixa de acento no topo do cartão — a assinatura lima */
.login form:not(.language-switcher)::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-accent);
}

/* Rótulos: micro-labels mono, como no site */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0.75rem 0.9rem;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.login label {
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
}
/* O "Lembrar-me" e demais rótulos com checkbox voltam ao corpo, sem uppercase */
.login .forgetmenot label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-text-muted);
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
.login input[type="checkbox"]:focus {
  border-color: var(--c-accent-dim);
  box-shadow: 0 0 0 3px rgba(76, 122, 26, 0.18);
  outline: 2px solid transparent;
}

/* Checkbox no tom da marca */
.login input[type="checkbox"] {
  border-radius: 5px;
  border: 1px solid var(--line-strong);
}
.login input[type="checkbox"]:checked {
  background: var(--c-accent-dim);
  border-color: var(--c-accent-dim);
}
.login input[type="checkbox"]:checked::before {
  content: "\f147";
  color: var(--c-white);
  margin: -3px 0 0 -4px;
}

/* Ícone "mostrar senha" */
.login .button.wp-hide-pw {
  color: var(--c-text-faint);
}
.login .button.wp-hide-pw:hover { color: var(--c-text); }

/* --- Botão de acesso: acento lima, compacto e alinhado à direita ---------------- */
.login p.submit { text-align: right; }
.login .submit .button-primary,
.wp-core-ui .login .button-primary,
.login #wp-submit {
  display: inline-block;
  width: auto;
  float: none;
  margin: 0.25rem 0 0;
  padding: 0.42rem 1.9rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-ink) !important;
  background: var(--c-accent) !important;
  border: 1px solid var(--c-accent) !important;
  border-radius: var(--r-pill);
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.login #wp-submit:hover {
  background: var(--c-accent-deep) !important;
  border-color: var(--c-accent-deep) !important;
  transform: translateY(-1px);
}
.login #wp-submit:active { transform: translateY(0); }

/* --- Links auxiliares (fora do cartão, sobre o ink) ---------------------------- */
#login #nav,
#login #backtoblog {
  text-align: center;
  padding: 0;
  margin-top: var(--space-5);
  text-shadow: none;
}
#login #nav a,
#login #backtoblog a,
.login .privacy-policy-page-link a {
  color: var(--c-on-dark-mut);
  font-size: 0.85rem;
  transition: color var(--dur-fast) var(--ease-out);
}
#login #nav a:hover,
#login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover {
  color: var(--c-on-dark);
}
#login #nav { margin-top: var(--space-6); }

/* --- Mensagens de erro / aviso ------------------------------------------------- */
.login #login_error,
.login .message,
.login .success,
.login .notice {
  background: var(--c-paper);
  color: var(--c-text);
  border-left: 4px solid var(--c-accent-dim);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  padding: 0.9rem 1.1rem;
}
.login #login_error { border-left-color: #C0392B; }
.login #login_error a,
.login .message a { color: var(--c-accent-dim); }

/* --- Entrada orquestrada (CSS puro) -------------------------------------------- */
@keyframes fclLoginUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.login #login > * {
  animation: fclLoginUp 0.7s var(--ease-out) both;
}
body.login #login h1              { animation-delay: 0s; }
body.login #login .fcl-login-intro { animation-delay: 0.07s; }
body.login #login form            { animation-delay: 0.14s; }
body.login #login #nav            { animation-delay: 0.22s; }
body.login #login #backtoblog     { animation-delay: 0.28s; }

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