/*
 * Tela de acesso do aluno (wp-login.php) com a identidade da Pos em
 * Direito Previdenciario. Carregada pelo mu-plugin wordpress/fbr-login.php.
 *
 * So aparencia: a tela continua sendo o login do WordPress, que e o mesmo
 * usado na recuperacao de senha e no acesso da equipe.
 *
 * O nome deste arquivo e fixo e o servidor guarda .css por um ano; o
 * mu-plugin acrescenta a data de modificacao na URL para furar o cache.
 */

@font-face {
  font-family: "Archivo FBr";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body.login {
  --navy-950: #050e1a;
  --navy-900: #0a1a2f;
  --navy-800: #102741;
  --laranja-500: #d9660f;
  --laranja-600: #b8540b;
  --laranja-700: #9a460a;
  --tinta-900: #152437;
  --tinta-600: #4c5f76;
  --tinta-400: #7e90a5;
  --linha: #dee5ed;
  --fundo: #f4f7fa;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
  background-color: var(--navy-900);
  background-image: radial-gradient(120% 70% at 50% 0%, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  font-family: "Archivo FBr", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta-900);
}

/* O cartao branco e o proprio #login: logo, textos e formulario dentro dele. */
body.login #login {
  width: min(440px, 100%);
  margin: 0;
  padding: 40px 36px 30px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgb(5 14 26 / 0.25), 0 28px 64px -28px rgb(0 0 0 / 0.6);
}

body.login #login h1 a {
  background-image: url("logo-fbr.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 184px;
  height: 46px;
  margin: 0 auto 26px;
  outline-offset: 4px;
}

.fbr-login-intro {
  margin: 0 0 18px;
  text-align: center;
}
.fbr-login-intro strong {
  display: block;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinta-900);
}
.fbr-login-intro span {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--tinta-600);
}

/* Avisos: dica de primeiro acesso e mensagens do proprio WordPress. */
body.login .message,
body.login .notice,
body.login .success {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--fundo);
  box-shadow: none;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-600);
}
body.login #login_error,
body.login .notice-error {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: #fdecec;
  box-shadow: none;
  font-size: 13.5px;
  line-height: 1.5;
  color: #8f1d1d;
}
body.login #login_error a { color: #8f1d1d; font-weight: 600; }

/*
 * Formularios: login, recuperar senha, definir senha.
 * O seletor por id e necessario: um plugin do WordPress imprime depois deste
 * arquivo um "#loginform { border: 2px solid #ddd }", e id ganha de classe.
 */
body.login form,
body.login #loginform,
body.login #lostpasswordform,
body.login #resetpassform,
body.login #registerform {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
/* Espaco entre os campos. Com id pelo mesmo motivo: o plugin zera essas margens. */
body.login #loginform > p,
body.login #loginform .user-pass-wrap,
body.login #lostpasswordform > p,
body.login #resetpassform > p,
body.login #resetpassform .user-pass1-wrap {
  margin: 0 0 16px;
}
body.login #loginform .forgetmenot { margin: 0; }
body.login #loginform p.submit,
body.login #lostpasswordform p.submit,
body.login #resetpassform p.submit {
  margin: 22px 0 0;
}
body.login label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta-900);
}
body.login form .input,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
  width: 100%;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--tinta-900);
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.login form .input:hover { border-color: #c5d0dc; }
body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
  outline: none;
  border-color: var(--laranja-500);
  box-shadow: 0 0 0 3px rgb(217 102 15 / 0.18);
}

/* Olho de mostrar a senha, dentro do campo. */
body.login .wp-pwd { position: relative; }
body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"] { padding-right: 48px; }
body.login .button.wp-hide-pw {
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--tinta-400);
}
body.login .button.wp-hide-pw:hover,
body.login .button.wp-hide-pw:focus { color: var(--tinta-900); }
body.login .button.wp-hide-pw:focus-visible {
  outline: 2px solid var(--laranja-500);
  outline-offset: -4px;
  border-radius: 10px;
}

body.login .forgetmenot {
  float: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}
body.login .forgetmenot label {
  display: inline;
  margin: 0;
  font-weight: 500;
  color: var(--tinta-600);
}
/* Caixinha nativa na cor da marca, no lugar do visto azul do WordPress. */
body.login input[type="checkbox"] {
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--laranja-600);
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0;
  box-shadow: none;
}
body.login input[type="checkbox"]::before { content: none; display: none; }
body.login input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--laranja-500);
  outline-offset: 2px;
}

/*
 * Botao principal. Tom 600 da paleta, nao o 500 da pagina de vendas: branco
 * sobre o 500 da 3,6:1 de contraste, abaixo do minimo para texto desse
 * tamanho. Sobre o 600 da 4,9:1.
 */
body.login p.submit {
  float: none;
  clear: both;
  margin: 20px 0 0;
  padding: 0;
}
body.login .button-primary,
body.login #wp-submit {
  float: none;
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--laranja-600);
  box-shadow: 0 12px 28px -14px rgb(184 84 11 / 0.9);
  text-shadow: none;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 48px;
  color: #fff;
  transition: background-color 0.15s, transform 0.15s;
}
body.login .button-primary:hover,
body.login .button-primary:focus { background: var(--laranja-700); color: #fff; }
body.login .button-primary:active { transform: translateY(1px); }
body.login .button-primary:focus-visible {
  outline: 2px solid var(--laranja-600);
  outline-offset: 3px;
  box-shadow: none;
}

/* Links de baixo, dentro do cartao. */
body.login #nav,
body.login #backtoblog {
  margin: 16px 0 0;
  padding: 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
}
body.login #backtoblog { margin-top: 8px; }
body.login #nav a,
body.login #backtoblog a {
  color: var(--tinta-600);
  text-decoration: none;
  transition: color 0.15s;
}
body.login #nav a:hover,
body.login #backtoblog a:hover { color: var(--laranja-600); text-decoration: underline; text-underline-offset: 3px; }
body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible {
  outline: 2px solid var(--laranja-500);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: none;
}

/* Politica de privacidade: nesta versao do WordPress fica dentro do cartao. */
body.login .privacy-policy-page-link {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  text-align: center;
}
body.login .privacy-policy-page-link a {
  color: var(--tinta-400);
  font-size: 12.5px;
  text-decoration: none;
}
body.login .privacy-policy-page-link a:hover { color: var(--laranja-600); text-decoration: underline; }

@media (max-width: 480px) {
  body.login { padding: 20px 12px; justify-content: flex-start; }
  body.login #login { padding: 32px 22px 24px; border-radius: 18px; }
  .fbr-login-intro strong { font-size: 20px; }
}

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