/**
 * Identidad BeFun en wp-login.php.
 *
 * Se encola con dependencia del handle 'login' del núcleo (ver
 * inc/login-branding.php): varias reglas de aquí tienen la misma
 * especificidad que las suyas y el desempate es por orden de impresión.
 */

/* Tokens duplicados a propósito: befun-variables.css no se carga en
   wp-login.php, así que esta hoja no puede depender de él. No es un
   descuido que haya que "arreglar" fusionándolo con el archivo del front. */
:root {
  --bf-yellow:      #ffe102;
  --bf-yellow-dark: #e6c900;
  --bf-black:       #0e0e0e;
}

/* ── Logo ──────────────────────────────────────────────────────
   Los dos SVG del tema son blancos puros (#fff): sobre el fondo claro del
   login serían invisibles. Se recolorean con mask-image, que permite
   cualquier color sin tocar el archivo.

   El @supports no es decorativo: sin soporte de mask, background-color
   pintaría un rectángulo negro sólido donde debería ir el logotipo. Fuera
   del bloque se conserva la W de WordPress — fea, pero no rota. */
@supports ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
  .login h1 a {
    width: 200px;
    height: 57px;
    background-image: none;
    background-color: var(--bf-black);
    -webkit-mask: url("../images/befun-logo.svg") no-repeat center / contain;
            mask: url("../images/befun-logo.svg") no-repeat center / contain;
  }

  /* En alto contraste forzado se ignora background-color: sin esta regla
     el logo enmascarado desaparece por completo y no queda reserva. */
  @media (forced-colors: active) {
    .login h1 a {
      background-color: CanvasText;
    }
  }
}

/* El núcleo pone outline:none en este enlace (login.css:301) y desplaza el
   texto con text-indent, así que enfocarlo no mostraba nada. No era una
   regresión nuestra, pero ahora el enlace navega de verdad a la home
   (login_headerurl), así que el foco importa. */
.login h1 a:focus-visible {
  outline: 3px solid var(--bf-black);
  outline-offset: 4px;
}

/* ── Tipografía ────────────────────────────────────────────────────
   La pila de reserva es la misma del sitio y aquí importa más que en
   ninguna otra pantalla: si Adobe Fonts no responde, el login tiene que
   seguir siendo perfectamente usable. */
body.login,
.login form,
.login label,
.login #nav,
.login #backtoblog,
.wp-core-ui .button-primary {
  font-family: roc-grotesk, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
}

/* ── Botón ─────────────────────────────────────────────────────
   Sin sombra dura, sin rotación y sin mayúsculas, aunque el design system
   las traiga: misma decisión que en el banner de cookies. Un formulario de
   acceso es utilidad, no llamada a la acción. El amarillo basta. */
.wp-core-ui .button-primary {
  background: var(--bf-yellow);
  border-color: var(--bf-black);
  color: var(--bf-black);
  text-shadow: none;
  box-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus,
.wp-core-ui .button-primary:active {
  background: var(--bf-yellow-dark);
  border-color: var(--bf-black);
  color: var(--bf-black);
  box-shadow: none;
}

/* Anillo negro, no amarillo: sobre un botón amarillo el amarillo no se ve. */
.wp-core-ui .button-primary:focus-visible {
  outline: 3px solid var(--bf-black);
  outline-offset: 2px;
}

/* ── Campos y foco ─────────────────────────────────────────────
   El amarillo sobre el fondo claro del login da ~1.2:1 de contraste: como
   único indicador de foco es prácticamente invisible, y esta es una pantalla
   donde se navega con teclado y con gestores de contraseñas.

   Por eso el foco lleva DOS anillos: el negro hace el trabajo de
   accesibilidad, el amarillo el de marca. Ambos con box-shadow y no con
   border-width, para que el campo no salte al enfocarse.

   El outline transparente no es adorno: en modo de alto contraste forzado
   los box-shadow desaparecen y el outline es lo único que sobrevive. */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  border-color: #949494;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
  border-color: var(--bf-black);
  box-shadow: 0 0 0 2px var(--bf-black), 0 0 0 4px var(--bf-yellow);
  outline: 2px solid transparent;
  outline-offset: 0;
}

/* La casilla «Recuérdame» no puede compartir la regla de arriba: en un campo
   de 302×40 el doble anillo se ve, pero en una casilla de 16px el amarillo
   pegado al borde negro es imperceptible. Se usa el patrón "outset" del
   núcleo (forms.css:110) — hueco blanco, luego negro, luego amarillo. */
.login input[type="checkbox"]:focus {
  border-color: var(--bf-black);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bf-black), 0 0 0 6px var(--bf-yellow);
  outline: 2px solid transparent;
  outline-offset: 0;
}

/* El ojo de «mostrar contraseña» viene en el azul del admin. */
.login .wp-hide-pw {
  color: var(--bf-black);
}

.login .button.wp-hide-pw:focus-visible {
  outline: 2px solid var(--bf-black);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Enlaces ───────────────────────────────────────────────────
   «¿Olvidaste tu contraseña?» y «← Ir a BeFun Entertainment». */
.login #nav a,
.login #backtoblog a {
  color: var(--bf-black);
  text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover {
  color: var(--bf-black);
  text-decoration: underline;
  text-decoration-color: var(--bf-yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.login #nav a:focus-visible,
.login #backtoblog a:focus-visible {
  outline: 2px solid var(--bf-black);
  outline-offset: 2px;
  box-shadow: none;
}