/* ==========================================================================
   IPX Custom Login Screen
   Bold, branded redesign of wp-login.php to match the Infoplex portal.
   Animated blob background + floating logo banner + clean card.
   ========================================================================== */

.login {
  /* ==========================================================================
     BRAND PALETTE — the raw brand values (shared with the portal).
     Self-contained so this file never depends on theme CSS load order.
     #21b8f4 is the "plex" cyan (the 'p' in the ip logo);
     #02134b is the home-page navy. Change these three per-site.
     ========================================================================== */
  --ipx-navy: #02134b;         /* home-page dark blue                     */
  --ipx-navy-dark: #0a0f24;
  --ipx-navy-light: #1c3f7a;
  --ipx-accent: #21b8f4;       /* 'plex' cyan                             */
  --ipx-accent-light: #e5f8fd;
  --ipx-text: #343a40;
  --ipx-muted: #6c757d;
  --ipx-field: #f1f3f7;

  /* ==========================================================================
     LOGIN SURFACES — semantic tokens. Every colour below maps to one of these,
     so re-branding another site = editing THIS block only.
     ========================================================================== */
  --ipx-bg:               var(--ipx-navy-dark); /* page canvas (near-black)    */
  --ipx-login-blob-a:     var(--ipx-accent);   /* top-left quadrant  (plex)    */
  --ipx-login-blob-b:     #ffffff;             /* bottom-right quadrant        */
  --ipx-login-card-bg:    #ffffff;             /* centre card (white)          */
  --ipx-login-card-fg:    var(--ipx-navy);     /* primary text on the card     */
  --ipx-login-card-muted: rgba(2, 19, 75, 0.60); /* secondary text on card     */

  /* Input fields — light fill with dark text on the white card */
  --ipx-login-field-bg:       var(--ipx-field);
  --ipx-login-field-fg:       var(--ipx-text);
  --ipx-login-field-focus-bg: #ffffff;         /* lift to white on focus       */

  /* Notices — whole-panel tints, not left-edge stripes */
  --ipx-login-notice-bg:     var(--ipx-accent-light);
  --ipx-login-notice-border: rgba(33, 184, 244, 0.45);
  --ipx-login-error-bg:      #fdf0ef;
  --ipx-login-error-border:  rgba(160, 38, 34, 0.35);
  --ipx-login-error-fg:      #a02622;

  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  overflow: hidden;
  background: var(--ipx-bg);
  color: var(--ipx-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* --- Animated blob background ------------------------------------------- */

@keyframes ipx-blob-float {
  100% { transform: translateY(-120px); }
}

.login::before,
.login::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 100vmin;
  height: 100vmin;
  border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%;
  animation: ipx-blob-float 10s alternate infinite linear;
  pointer-events: none;
}

.login::before {
  top: -42vmin;
  left: -48vmin;
  background: var(--ipx-login-blob-a); /* top-left = full-strength plex cyan */
  opacity: 1;
}

.login::after {
  right: -50vmin;
  bottom: -55vmin;
  background: var(--ipx-login-blob-b); /* bottom-right = white */
  opacity: 0.9;
  animation-direction: alternate-reverse;
}

@media (prefers-reduced-motion: reduce) {
  .login::before,
  .login::after { animation: none; }
}

/* --- The card ----------------------------------------------------------- */

.login #login {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 0 34px 38px;
  overflow: hidden;
  background: var(--ipx-login-card-bg); /* centre card = home-page navy */
  border-radius: 24px;
  box-shadow: 0 40px 80px rgba(3, 36, 92, 0.35);
}

/* Hide the default WordPress logo heading — we inject our own banner.
   Must NOT hide our injected .ipx-login-title heading. */
.login h1:not(.ipx-login-title) { display: none; }

/* --- Branded logo banner (injected via login_message) ------------------- */

/* Logo sits directly on the clean white card — no banner behind it. */
.ipx-login-brand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 132px;
  display: grid;
  place-items: center;
}

.ipx-login-logo-link {
  display: block;
  line-height: 0;
  outline-offset: 4px;
}

.ipx-login-logo {
  width: 76px;
  height: 76px;
  object-fit: contain;
  background: #fff;
  border-radius: 20px;
  padding: 9px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Text fallback when no Site Icon is set */
.ipx-login-logo-fallback {
  display: block;
  max-width: 300px;
  padding: 0 12px;
  color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.5px;
  text-align: center;
}

.ipx-login-title {
  margin: 162px 0 28px;
  color: var(--ipx-login-card-fg);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
}

/* --- The form ----------------------------------------------------------- */

.login form:not(#language-switcher) {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.login form:not(#language-switcher) p {
  margin-bottom: 16px;
}

/* Field labels only (exclude the "Remember Me" label). The password label is
   wrapped in .user-pass-wrap rather than a <p>, so target it explicitly. */
.login form:not(#language-switcher) p:not(.forgetmenot) > label,
.login form:not(#language-switcher) .user-pass-wrap > label {
  display: block;
  margin-bottom: 6px;
  color: var(--ipx-login-card-fg);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Inputs */
.login #loginform input[type="text"],
.login #loginform input[type="password"],
.login #loginform input[type="email"],
.login input.input,
.login #user_login,
.login #user_pass {
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 16px 0 46px;
  border: 2px solid transparent;
  border-radius: 10px;
  background-color: var(--ipx-login-field-bg);
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: 20px 20px;
  color: var(--ipx-login-field-fg);
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.login #loginform input:focus,
.login #user_login:focus,
.login #user_pass:focus {
  border-color: var(--ipx-accent);
  background-color: var(--ipx-login-field-focus-bg);
  outline: 2px solid transparent; /* keep AA focus visible via border + ring below */
  box-shadow: 0 0 0 4px var(--ipx-accent-light);
}

/* In-field icons (person / lock) */
.login #user_login {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.login #user_pass {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* Show/hide password button sits inside the field */
.login .wp-pwd {
  position: relative;
}

.login .wp-pwd #user_pass {
  padding-right: 48px;
}

.login button.wp-hide-pw {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 54px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ipx-muted);
  cursor: pointer;
}

.login button.wp-hide-pw:hover { color: var(--ipx-navy); }
.login button.wp-hide-pw .dashicons { vertical-align: middle; }

/* Remember me — checkbox sits to the right of the label text, on one line */
.login .forgetmenot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 24px;
}

.login .forgetmenot label {
  order: 1; /* label text first... */
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  color: var(--ipx-login-card-muted);
  cursor: pointer;
}

.login .forgetmenot input[type="checkbox"] {
  order: 2; /* ...checkbox to its right */
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ipx-accent);
  cursor: pointer;
}

/* Submit button */
.login #wp-submit,
.login .submit .button-primary {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  /* Cyan CTA that lifts off the navy card via a cyan glow (navy shadows are
     invisible against the navy card). Ends on navy-light so the button keeps a
     visible edge instead of bleeding into the card. */
  background: linear-gradient(135deg, var(--ipx-accent) 0%, var(--ipx-navy-light) 100%);
  color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-shadow: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: 0 10px 24px rgba(33, 184, 244, 0.35);
}

.login #wp-submit:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(33, 184, 244, 0.45);
}

.login #wp-submit:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(3, 36, 92, 0.28);
}

.login #wp-submit:focus-visible {
  outline: 3px solid var(--ipx-accent);
  outline-offset: 2px;
}

/* --- Links below the form ----------------------------------------------- */

.login #nav,
.login #backtoblog {
  margin: 18px 0 0;
  padding: 0;
  text-align: center;
}

.login #nav { margin-top: 22px; }

.login #nav a,
.login #backtoblog a {
  color: var(--ipx-login-card-muted);
  font-size: 14px;
  text-shadow: none;
  transition: color 0.15s ease;
}

.login #nav a:hover,
.login #backtoblog a:hover {
  color: var(--ipx-accent);
}

.login #backtoblog a {
  font-weight: 500;
  color: var(--ipx-login-card-fg);
}

/* WordPress-injected "Privacy Policy" link (sits inside the navy card) */
.login .privacy-policy-page-link a {
  color: var(--ipx-login-card-muted);
  text-decoration: underline;
}

.login .privacy-policy-page-link a:hover {
  color: var(--ipx-accent);
}

/* --- Messages / errors -------------------------------------------------- */

/* Notices read as whole tinted panels with a hairline edge. An earlier version
   used a 4px left-edge accent stripe; the tint carries the same severity
   signal without the stripe, and colour is never the only cue — the message
   text itself states the problem. */
.login #login_error,
.login .message,
.login .notice {
  z-index: 3;
  /* border-box so the padding stays inside the 420px cap — otherwise the
     notice sits 32px wider than the form and overhangs the card edge. */
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--ipx-login-notice-border);
  border-radius: 10px;
  background: var(--ipx-login-notice-bg);
  color: var(--ipx-login-card-fg);
  box-shadow: 0 12px 30px rgba(3, 36, 92, 0.12);
  font-size: 14px;
}

.login #login_error {
  border-color: var(--ipx-login-error-border);
  background: var(--ipx-login-error-bg);
  color: var(--ipx-login-error-fg);
}

.login #login_error a {
  color: var(--ipx-login-error-fg);
}

/* Language switcher, if present */
.login .language-switcher {
  position: relative;
  z-index: 3;
  margin-top: 18px;
}