/* ============================================================================
   CASEMBRAPA — Tela de login (wp-login.php)
   ----------------------------------------------------------------------------
   Aplica o Design System a tela nativa de login, em layout split-screen que
   ocupa 100% da altura da viewport. Consome EXCLUSIVAMENTE tokens var(--ca-*)
   (REGRA MAXIMA 1). Mobile-first: base = card unico sobre fundo navy; o split
   de duas colunas so ativa a partir de --ca-bp-md (REGRA MAXIMA 4).

   Escopo: tudo sob body.login.casembrapa-login (classe injetada por
   inc/login.php), para nunca vazar para o wp-admin.

   Larguras de card/coluna usam px/rem literais por serem layout ESTRUTURAL
   sem token DS aplicavel (mesmo criterio de --ca-content-width / --ca-shell-width,
   que sao px na definicao). Cor, peso, line-height e font-size seguem 100%
   tokenizados.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Shell full-height
   ---------------------------------------------------------------------------- */

/* box-sizing previsivel: a tela de login carrega apenas tokens + este arquivo
   (sem base.css), entao normalizamos aqui para o padding nao estourar larguras
   (do contrario o padding do #login encolhe o painel via flex-shrink). */
body.login.casembrapa-login,
body.login.casembrapa-login *,
body.login.casembrapa-login *::before,
body.login.casembrapa-login *::after {
  box-sizing: border-box;
}

body.login.casembrapa-login {
  position: relative; /* ancora o seletor de idioma posicionado no desktop */
  min-height: 100vh;
  min-height: 100dvh; /* iOS: desconta as barras dinamicas do Safari */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ca-space-6);
  background-color: var(--ca-color-surface-deep);
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-body);
  line-height: var(--ca-leading-normal);
  color: var(--ca-color-text);
}

.casembrapa-login #login {
  width: 100%;
  max-width: 27rem; /* largura de leitura do card; layout estrutural sem token */
  padding: var(--ca-space-10) var(--ca-space-8);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left; /* alinhamento consistente de logo, titulo, mensagem e campos */
  background-color: var(--ca-color-surface);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-editorial-deep);
}

/* Cada bloco ocupa a linha inteira do card; os dois links auxiliares (secao 6)
   recebem flex-basis auto e dividem a MESMA linha. */
.casembrapa-login #login > * {
  flex-basis: 100%;
}

/* O <script> de focus do core fica entre #nav e #backtoblog; ocultá-lo evita
   que vire um item de linha cheia e quebre os links em duas linhas. */
.casembrapa-login #login > script {
  display: none;
}

/* No WP o card branco e o proprio <form>; aqui o card e o #login inteiro
   (logo + intro + mensagens + form + links), entao zeramos o estilo nativo
   de TODOS os formularios de autenticacao com um seletor unico: #loginform
   (login), #lostpasswordform (recuperar senha) e #resetpassform (nova senha).
   Antes so o #loginform era neutralizado, e as telas de senha herdavam o card
   nativo (borda + sombra + fundo branco) e ficavam sem o ritmo de campos. */
.casembrapa-login #login form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* ----------------------------------------------------------------------------
   2. Marca (logo) no topo do card, centralizada no trilho de conteudo
   ---------------------------------------------------------------------------- */

.casembrapa-login #login h1 {
  margin: 0 0 var(--ca-space-8);
  text-align: center; /* centraliza a logo no trilho (resto do form fica a esquerda) */
}

.casembrapa-login #login h1 a {
  display: block;
  width: 16rem; /* wordmark horizontal, um pouco maior; layout estrutural */
  max-width: 100%;
  aspect-ratio: 620 / 150; /* proporcao natural da logo.webp (sem distorcao/letterbox) */
  height: auto;
  margin: 0 auto; /* bloco centralizado horizontalmente */
  background-image: var(--ca-login-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -9999px; /* esconde o texto, mantem acessivel via aria */
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   3. Intro (titulo + subtitulo) injetada via login_message
   ---------------------------------------------------------------------------- */

.casembrapa-login .casembrapa-login__intro {
  margin: 0 0 var(--ca-space-6);
  text-align: left;
}

.casembrapa-login .casembrapa-login__title {
  margin: 0 0 var(--ca-space-1);
  font-family: var(--ca-font-display);
  font-size: var(--ca-text-h3);
  font-weight: var(--ca-weight-extrabold);
  line-height: var(--ca-leading-tight);
  letter-spacing: var(--ca-tracking-tight);
  color: var(--ca-color-text-strong);
}

.casembrapa-login .casembrapa-login__subtitle {
  margin: 0;
  font-size: var(--ca-text-small);
  color: var(--ca-color-text-muted);
}

/* ----------------------------------------------------------------------------
   4. Campos do formulario (labels + inputs nativos + campo 2FA do plugin)
   ---------------------------------------------------------------------------- */

.casembrapa-login #login form > p,
.casembrapa-login .user-pass-wrap,
.casembrapa-login .casembrapa-2fa-login-field {
  margin: 0 0 var(--ca-space-5);
  text-align: left;
}

/* Respiro acima do campo de 2FA: ele segue logo apos a senha e estava colado. */
.casembrapa-login .casembrapa-2fa-login-field {
  margin-top: var(--ca-space-6);
}

.casembrapa-login #login form label,
.casembrapa-login .casembrapa-2fa-login-field label {
  display: block;
  margin-bottom: var(--ca-space-2);
  font-size: var(--ca-text-small);
  font-weight: var(--ca-weight-medium);
  color: var(--ca-color-text-soft);
}

.casembrapa-login input[type="text"],
.casembrapa-login input[type="password"],
.casembrapa-login input[type="email"],
.casembrapa-login input.input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ca-tap-target-min);
  margin: 0;
  padding: var(--ca-space-3) var(--ca-space-4);
  background-color: var(--ca-color-surface);
  border: 1px solid var(--ca-color-border); /* espessura literal toleravel; cor via token */
  border-radius: var(--ca-radius-md);
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-body); /* 16px: evita auto-zoom no iOS */
  line-height: var(--ca-leading-normal);
  color: var(--ca-color-text);
  transition: border-color var(--ca-duration-fast) var(--ca-easing-standard),
    box-shadow var(--ca-duration-fast) var(--ca-easing-standard);
}

.casembrapa-login input::placeholder {
  color: var(--ca-color-text-muted);
}

.casembrapa-login input[type="text"]:focus,
.casembrapa-login input[type="password"]:focus,
.casembrapa-login input[type="email"]:focus,
.casembrapa-login input.input:focus {
  outline: none;
  border-color: var(--ca-color-border-strong);
  box-shadow: var(--ca-focus-ring);
}

/* Toggle nativo de mostrar/ocultar senha (.wp-pwd > .wp-hide-pw) */
.casembrapa-login .wp-pwd {
  display: flex;
  align-items: center;
}

.casembrapa-login .wp-pwd input {
  flex: 1 1 auto;
  padding-right: var(--ca-space-10);
}

.casembrapa-login .wp-pwd .button.wp-hide-pw {
  position: relative;
  margin-left: calc(var(--ca-space-10) * -1);
  min-height: var(--ca-tap-target-min);
  min-width: var(--ca-tap-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ca-color-text-muted);
  border-radius: var(--ca-radius-sm);
}

.casembrapa-login .wp-pwd .button.wp-hide-pw:hover {
  color: var(--ca-color-text);
}

.casembrapa-login .wp-pwd .button.wp-hide-pw:focus {
  outline: none;
  box-shadow: var(--ca-focus-ring);
}

.casembrapa-login .wp-pwd .button.wp-hide-pw .dashicons {
  width: var(--ca-icon-size-sm);
  height: var(--ca-icon-size-sm);
  font-size: var(--ca-icon-size-sm);
}

/* ----------------------------------------------------------------------------
   5. Lembrar-me (checkbox premium) + submit
   ---------------------------------------------------------------------------- */

.casembrapa-login .forgetmenot {
  display: flex;
  align-items: center;
  gap: var(--ca-space-2);
  margin-bottom: var(--ca-space-6);
  font-size: var(--ca-text-small);
  color: var(--ca-color-text-soft);
}

.casembrapa-login .forgetmenot label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-weight: var(--ca-weight-medium);
  color: var(--ca-color-text-soft);
  cursor: pointer;
}

/* Checkbox custom: caixa com radius DS, marca em check branco sobre o navy. */
.casembrapa-login .forgetmenot input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 1.25rem; /* dimensao de controle; layout estrutural */
  height: 1.25rem;
  min-height: 0;
  margin: 0 var(--ca-space-2) 0 0;
  padding: 0;
  background-color: var(--ca-color-surface);
  border: 1px solid var(--ca-color-border-strong); /* espessura literal toleravel */
  border-radius: var(--ca-radius-sm);
  cursor: pointer;
  transition: background-color var(--ca-duration-fast) var(--ca-easing-standard),
    border-color var(--ca-duration-fast) var(--ca-easing-standard);
}

.casembrapa-login .forgetmenot input[type="checkbox"]:hover {
  border-color: var(--ca-color-cta-bg);
}

.casembrapa-login .forgetmenot input[type="checkbox"]:checked {
  background-color: var(--ca-color-cta-bg);
  border-color: var(--ca-color-cta-bg);
}

.casembrapa-login .forgetmenot input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.4rem; /* posicao do check; layout estrutural */
  top: 0.15rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid var(--ca-color-cta-fg);
  border-width: 0 2px 2px 0; /* espessura do check; toleravel */
  transform: rotate(45deg);
}

.casembrapa-login .forgetmenot input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--ca-focus-ring);
}

.casembrapa-login .submit {
  margin: 0;
}

.casembrapa-login #wp-submit,
.casembrapa-login .button-primary {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ca-tap-target-min);
  margin: 0;
  padding: var(--ca-space-3) var(--ca-space-5);
  background: var(--ca-color-cta-bg);
  border: 0;
  border-radius: var(--ca-radius-sm);
  box-shadow: none;
  font-family: var(--ca-font-display);
  font-size: var(--ca-text-caption);
  font-weight: var(--ca-weight-extrabold);
  letter-spacing: var(--ca-tracking-wider);
  line-height: var(--ca-leading-none);
  text-transform: uppercase;
  text-shadow: none;
  color: var(--ca-color-cta-fg);
  cursor: pointer;
  transition: background-color var(--ca-duration-fast) var(--ca-easing-standard);
}

.casembrapa-login #wp-submit:hover,
.casembrapa-login .button-primary:hover {
  background: var(--ca-color-cta-bg-hover);
}

.casembrapa-login #wp-submit:focus,
.casembrapa-login .button-primary:focus {
  outline: none;
  box-shadow: var(--ca-focus-ring);
}

/* ----------------------------------------------------------------------------
   6. Links auxiliares (perdeu a senha / voltar ao site)
   ----------------------------------------------------------------------------
   Base (mobile): empilhados e centralizados (sem separador, para nao deixar um
   "|" orfao quando o texto nao cabe). No desktop (secao 10) ficam na MESMA
   linha, separados por "|". O <script> de focus entre eles e ocultado (sec. 1).
   ---------------------------------------------------------------------------- */

.casembrapa-login #nav,
.casembrapa-login #backtoblog {
  margin: var(--ca-space-3) 0 0;
  padding: 0;
  text-align: center;
  font-size: var(--ca-text-small);
}

.casembrapa-login #nav {
  margin-top: var(--ca-space-6);
}

.casembrapa-login #nav a,
.casembrapa-login #backtoblog a {
  color: var(--ca-color-text-link);
  font-weight: var(--ca-weight-medium);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color var(--ca-duration-fast) var(--ca-easing-standard);
}

.casembrapa-login #nav a:hover,
.casembrapa-login #backtoblog a:hover {
  color: var(--ca-color-text-link-hover);
  text-decoration: underline;
}

.casembrapa-login #nav a:focus-visible,
.casembrapa-login #backtoblog a:focus-visible {
  outline: none;
  border-radius: var(--ca-radius-sm);
  box-shadow: var(--ca-focus-ring);
}

/* ----------------------------------------------------------------------------
   7. Mensagens do core (erro / aviso / sucesso), alinhadas com o card
   ---------------------------------------------------------------------------- */

.casembrapa-login #login .message,
.casembrapa-login #login .notice,
.casembrapa-login #login #login_error {
  margin: 0 0 var(--ca-space-5);
  padding: var(--ca-space-3) var(--ca-space-4);
  border-radius: var(--ca-radius-md);
  font-size: var(--ca-text-small);
  text-align: left;
  border-left: var(--ca-rule-accent);
  background-color: var(--ca-color-surface-muted);
  color: var(--ca-color-text);
}

.casembrapa-login #login #login_error {
  border-left-color: var(--ca-error-500);
  background-color: var(--ca-error-50);
  color: var(--ca-error-700);
}

.casembrapa-login #login .message,
.casembrapa-login #login .notice-success {
  border-left-color: var(--ca-success-700);
  background-color: var(--ca-success-50);
  color: var(--ca-success-700);
}

/* ----------------------------------------------------------------------------
   8. Politica de privacidade (rodape nativo do core)
   ----------------------------------------------------------------------------
   O seletor de idioma foi removido em inc/login.php (login_display_language_dropdown
   => false): o site e 100% pt-BR.
   ---------------------------------------------------------------------------- */

.casembrapa-login .privacy-policy-page-link {
  margin: var(--ca-space-5) 0 0;
  text-align: center;
}

.casembrapa-login .privacy-policy-page-link a {
  color: var(--ca-color-text-link);
  font-size: var(--ca-text-small);
  text-decoration: none;
}

.casembrapa-login .privacy-policy-page-link a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ----------------------------------------------------------------------------
   9. Painel institucional (aside) — oculto no mobile; split no desktop
   ---------------------------------------------------------------------------- */

.casembrapa-login .casembrapa-login__aside {
  display: none;
}

/* ----------------------------------------------------------------------------
   10. DESKTOP — split-screen de duas colunas a partir de --ca-bp-md (1024px)
   ---------------------------------------------------------------------------- */

@media (min-width: 64em) /* var(--ca-bp-md) */ {
  body.login.casembrapa-login {
    /* Shell de conteudo: o FUNDO continua full-bleed (navy + branco de borda a
       borda, inalterado), mas o CONTEUDO (texto do painel + formulario) fica
       confinado a um trilho central de 1470px. O gutter e a folga de cada lado
       entre a borda da viewport e o trilho; encolhe ate o piso (space-14)
       quando a tela e <= ~1470px, mantendo a proporcao em qualquer largura.
       1470px e largura ESTRUTURAL de layout (mesmo criterio de 25rem/27rem). */
    --ca-login-gutter: max(var(--ca-space-14), calc((100vw - 1470px) / 2));
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background-color: var(--ca-color-surface);
  }

  /* Painel esquerdo (injetado via login_footer; reposicionado com order). */
  .casembrapa-login .casembrapa-login__aside {
    order: -1;
    position: relative;
    flex: 1 1 44%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Esquerda = gutter do shell (conteudo navy comeca na linha esquerda do
       trilho de 1470px); demais lados mantem o respiro interno. */
    padding: var(--ca-space-16) var(--ca-space-12) var(--ca-space-16) var(--ca-login-gutter);
    overflow: hidden;
    background-color: var(--ca-color-surface-deep);
    color: var(--ca-color-text-on-inverse);
  }

  /* Marca d'agua do icone institucional (decorativa). */
  .casembrapa-login .casembrapa-login__aside::after {
    content: "";
    position: absolute;
    right: calc(var(--ca-space-16) * -1);
    bottom: calc(var(--ca-space-16) * -1);
    width: 22rem; /* marca d'agua decorativa; layout estrutural */
    height: 22rem;
    background-image: var(--ca-login-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
  }

  .casembrapa-login .casembrapa-login__aside-inner {
    position: relative;
    max-width: 30rem; /* medida de leitura do painel; layout estrutural */
  }

  .casembrapa-login .casembrapa-login__eyebrow {
    display: inline-block;
    padding-left: var(--ca-space-3);
    border-left: var(--ca-rule-accent);
    font-family: var(--ca-font-display);
    font-size: var(--ca-text-overline);
    font-weight: var(--ca-weight-bold);
    letter-spacing: var(--ca-tracking-widest);
    line-height: var(--ca-leading-tight);
    text-transform: uppercase;
    color: var(--ca-color-accent);
  }

  .casembrapa-login .casembrapa-login__headline {
    margin: var(--ca-space-5) 0 var(--ca-space-3);
    font-family: var(--ca-font-display);
    font-size: var(--ca-text-h2);
    font-weight: var(--ca-weight-extrabold);
    line-height: var(--ca-leading-tight);
    letter-spacing: var(--ca-tracking-tight);
    color: var(--ca-color-text-on-inverse);
  }

  .casembrapa-login .casembrapa-login__lead {
    margin: 0;
    font-size: var(--ca-text-lead);
    line-height: var(--ca-leading-relaxed);
    color: var(--ca-overlay-text-on-inverse-80);
  }

  .casembrapa-login .casembrapa-login__seal {
    position: relative;
    margin: var(--ca-space-8) 0 0;
    font-size: var(--ca-text-small);
    color: var(--ca-overlay-text-on-inverse-80);
  }

  /* Coluna direita: o card vira a coluna do formulario (sem flutuar).
     flex-wrap + align-content: flex-start ANCORA o conjunto no TOPO, para a
     logo (1o item) alinhar na mesma altura do eyebrow "PORTAL CASEMBRAPA" do
     painel navy (ambos partem do padding-top space-16). O conteudo ocupa o
     trilho que vai da divisa ate a linha direita do shell (padding-right = gutter). */
  .casembrapa-login #login {
    flex: 1 1 56%;
    width: auto;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    /* Os blocos full-width (logo, titulos, campos) nao se movem com o
       justify-content (ja ocupam 100%); o center afeta apenas os links
       auxiliares (auto-width), que ficam centralizados sob o conteudo. */
    justify-content: center;
    /* Direita = gutter do shell (conteudo do form termina na linha direita do
       trilho de 1470px); esquerda mantem o respiro interno desde a divisa. */
    padding: var(--ca-space-16) var(--ca-login-gutter) var(--ca-space-16) var(--ca-space-14);
    border-radius: 0;
    box-shadow: none;
    background-color: var(--ca-color-surface);
  }

  /* Cada bloco ocupa a largura do trilho de conteudo (da divisa ate a linha
     direita do shell), alinhado a ESQUERDA. Sem centralizacao: logo, titulo,
     subtitulo, campos e links partilham a MESMA borda esquerda. */
  .casembrapa-login #login > * {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Os dois links auxiliares dividem a MESMA linha (desktop), com separador "|".
     flex-basis auto evita ocupar a linha cheia; o padding interno e zerado. */
  .casembrapa-login #login > #nav,
  .casembrapa-login #login > #backtoblog {
    width: auto;
    flex-basis: auto;
    padding-inline: 0;
    margin-top: var(--ca-space-6);
    text-align: left;
  }

  .casembrapa-login #login > #backtoblog {
    margin-left: var(--ca-space-3);
  }

  .casembrapa-login #login > #nav::after {
    content: "|";
    margin-left: var(--ca-space-3);
    color: var(--ca-color-border-strong);
  }

  /* Mensagens do core: alinhadas a esquerda, na largura do trilho, como o
     restante do conteudo. */
  .casembrapa-login #login #login-message,
  .casembrapa-login #login .notice,
  .casembrapa-login #login .message {
    margin-inline: 0;
  }
}

/* ----------------------------------------------------------------------------
   11. Contexto interim-login (modal #wp-auth-check do wp-admin)
   ----------------------------------------------------------------------------
   Quando a sessao do wp-admin expira, o WordPress abre o modal #wp-auth-check e
   carrega ESTA tela (wp-login.php?interim-login=1) dentro de um <iframe>
   estreito. O core marca o <body> com a classe .interim-login e ja suprime os
   links #nav / #backtoblog; inc/login.php tambem suprime a intro custom e o
   painel institucional nesse contexto.

   Aqui o card "veste" o modal: sem min-height:100vh nem centralizacao vertical
   (era a causa do scroll dentro do iframe), sem moldura propria (sombra, raio e
   fundo ficam por conta da caixa #wp-auth-check, estilizada em auth-check.css) e
   com logo e espacos compactos. Como o iframe e estreito (< 64em), o split-screen
   do desktop (secao 10) nunca ativa aqui; basta neutralizar a base.
   ---------------------------------------------------------------------------- */

body.login.casembrapa-login.interim-login {
  min-height: 0;
  display: block;
  padding: var(--ca-space-5);
  background-color: transparent;
}

.casembrapa-login.interim-login #login {
  width: 100%;
  max-width: none;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Logo compacta e respiro menor no topo do card do modal. */
.casembrapa-login.interim-login #login h1 {
  margin-bottom: var(--ca-space-5);
}

.casembrapa-login.interim-login #login h1 a {
  width: 11rem; /* wordmark compacto no modal; layout estrutural */
}