/* login.css — Estiliza wp-login.php com a identidade visual da Palatine
   (Passo 3 do plano F4.5), espelhando Website/web/src/pages/login.astro:
   header global no topo, fundo com hero da biblioteca e card de login
   centralizado. Os campos de texto/senha já recebem o estilo `.form-input`
   de tokens.css (enfileirado antes deste arquivo); aqui tratamos o layout
   da página, o card do formulário, o título/subtítulo e os links. */

body.login {
  background-color: var(--color-bg-dark);
  background-image:
    linear-gradient(to bottom, oklch(11% 0.015 302 / 0.55) 0%, oklch(11% 0.015 302 / 0.82) 100%),
    radial-gradient(ellipse at center top, oklch(76% 0.14 80 / 0.06) 0%, transparent 60%),
    url('../images/hero-library.jpg');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  font-family: var(--font-sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Logo padrão do WordPress: o header global (injetado via login_header) já
   mostra o escudo da Palatine, então o logo nativo do #login é ocultado. */
body.login #login h1 {
  display: none;
}

/* Container do card — centralizado verticalmente no espaço abaixo do header */
body.login #login {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 140px var(--space-sm) var(--space-xxl);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Título e subtítulo (montados no servidor em functions.php) */
body.login .login-header {
  text-align: center;
  margin-bottom: var(--space-md);
}

body.login .login-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary-dark);
  margin: 0 0 0.35rem;
}

body.login .login-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted-dark);
  line-height: 1.4;
  margin: 0;
}

/* Card de todos os formulários de autenticação (login, cadastro, recuperar e
   redefinir senha). O .language-switcher fica oculto (regra mais abaixo). */
body.login #login form {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px oklch(10% 0.01 302 / 0.7);
  padding: var(--space-md);
  transition: border-color var(--transition-normal);
  /* Contém os floats do WordPress (.forgetmenot / botão), senão o card não
     cresce e o footer injetado sobrepõe o botão. */
  display: flow-root;
}

body.login #login form:hover {
  border-color: oklch(76% 0.14 80 / 0.4);
}

/* Aviso "Uma confirmação…" (cadastro) e dicas/força de senha (redefinir) */
body.login #reg_passmail,
body.login #login .description,
body.login #login .indicator-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted-dark);
  margin: var(--space-xs) 0 0;
}

body.login label {
  color: var(--color-text-secondary-dark);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-sm);
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
  box-shadow: none;
}

/* Linha do label "Senha" + link "Esqueceu a senha?" (montado no servidor em functions.php) */
body.login .user-pass-wrap .label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

body.login .user-pass-wrap .label-row label {
  margin: 0;
}

body.login .forgot-link {
  font-size: var(--text-xs);
  color: var(--color-text-muted-dark);
  text-transform: none;
  letter-spacing: normal;
}

body.login .forgot-link:hover {
  color: var(--color-gold);
}

/* Lembrar-me */
body.login .forgetmenot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  float: none; /* WP flutua o "Lembrar-me" à esquerda; aqui mantemos no fluxo */
}

body.login .forgetmenot input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-gold);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

body.login .forgetmenot label {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted-dark);
  margin: 0;
  cursor: pointer;
}

/* Botão "Acessar" — wp-login.php não tem o wrapper .wp-core-ui, então o
   esquema de cores do admin (azul) é aplicado direto em .button-primary;
   !important necessário para vencer essa mesma especificidade. */
body.login .button-primary {
  background-color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-bg-dark) !important;
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius-sm);
  text-shadow: none;
  box-shadow: none;
  width: 100%;
  padding: 0.9rem;
  font-size: var(--text-sm);
  margin-top: 0.4rem;
  float: none; /* WP flutua o botão; mantemos em bloco no fluxo (largura total) */
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

body.login .button-primary:hover,
body.login .button-primary:focus {
  background-color: var(--color-gold-hover) !important;
  border-color: var(--color-gold-hover) !important;
  color: var(--color-bg-dark) !important;
}

/* Ícone de mostrar/ocultar senha */
body.login .wp-hide-pw {
  background: transparent !important;
  border-color: var(--color-border-dark) !important;
  color: var(--color-text-secondary-dark) !important;
  box-shadow: none !important;
}

body.login .wp-hide-pw:hover,
body.login .wp-hide-pw:focus {
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
}

/* Botões secundários do WP (ex.: "Gerar senha" na tela de redefinir senha) */
body.login .button:not(.button-primary):not(.wp-hide-pw) {
  background: transparent !important;
  border: 1px solid var(--color-border-dark) !important;
  color: var(--color-text-secondary-dark) !important;
  border-radius: var(--radius-sm);
  text-shadow: none;
  box-shadow: none !important;
}

body.login .button:not(.button-primary):not(.wp-hide-pw):hover,
body.login .button:not(.button-primary):not(.wp-hide-pw):focus {
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
}

/* #nav nativo: removido server-side nas telas conhecidas; estilo mantido como
   fallback para telas sem formulário reconhecido. */
body.login #nav {
  text-align: center;
  margin-top: var(--space-sm);
}

body.login #nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted-dark);
}

body.login #nav a:hover {
  color: var(--color-gold);
}

/* Footer "Não tem conta? Criar conta gratuita" (montado no servidor em
   functions.php, dentro do #loginform), réplica do .login-footer de login.astro. */
body.login .login-footer {
  text-align: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-dark);
}

body.login .login-footer p {
  font-size: var(--text-sm);
  color: var(--color-text-muted-dark);
  margin: 0;
}

body.login .login-footer a {
  color: var(--color-gold);
  font-weight: 500;
}

body.login .login-footer a:hover {
  color: var(--color-gold-hover);
}

/* Não fazem sentido com o header global no topo */
body.login #backtoblog,
body.login .language-switcher {
  display: none;
}

/* Mensagens de erro/sucesso — espelham o .alert-box de login.astro: erro em
   vermelho, mensagens (logout, "verifique seu e-mail") em verde, cada uma com
   ícone à esquerda via mask-image colorido por currentColor. */
body.login #login_error,
body.login .message,
body.login .success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  box-shadow: none;
  font-size: var(--text-sm);
  line-height: 1.4;
}

body.login #login_error::before,
body.login .message::before,
body.login .success::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.15rem;
  background-color: currentColor;
  -webkit-mask: var(--alert-icon) center / contain no-repeat;
  mask: var(--alert-icon) center / contain no-repeat;
}

/* Erro (vermelho) */
body.login #login_error {
  color: oklch(65% 0.18 28);
  background-color: var(--color-surface-dark);
  border-color: oklch(55% 0.16 28 / 0.5);
  --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 108 1a7 7 0 000 14zm.75-10.25v4.5h-1.5v-4.5h1.5zm0 6v1.5h-1.5v-1.5h1.5z' fill='%23000'/%3E%3C/svg%3E");
}

/* Mensagens / sucesso (verde) */
body.login .message,
body.login .success {
  color: var(--color-green);
  background-color: var(--color-surface-dark);
  border-color: oklch(50% 0.15 142 / 0.5);
  --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 108 1a7 7 0 000 14zm-1-4.25L4.25 8.25l1.06-1.06L7 8.88l3.69-3.69 1.06 1.06L7 10.75z' fill='%23000'/%3E%3C/svg%3E");
}