/* ---- IBM Plex Sans, self-hosted -----------------------------------------
   SIL Open Font Licence 1.1. Self-hosted rather than pulled from a font CDN:
   the house rule on every site we run is no external font host, and on a page
   that only ever renders for a signed-in client there is no reason to tell a
   third party that they opened it. Latin subset only, three weights, ~59 KB.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

/* ==========================================================================
   SEOzo Client Workspace — sign-in screen
   Loaded only on wp-login.php, via DBD_Access::style_login(), followed by the
   client's theme.css which supplies every --wk-* colour below. The fallbacks
   in var() are a neutral navy so a missing theme is visible, not broken.

   Same square geometry as dashboard.css. The point is that the client never
   sees a stock WordPress login on a page we asked them to trust with a
   password.
   ========================================================================== */

body.login {
  background: var(--wk-login-bg, #F4F6FA);
  background-image:
    radial-gradient(52rem 28rem at 84% -8%, var(--wk-login-glow-a, rgba(59, 91, 219, .09)), transparent 62%),
    radial-gradient(40rem 22rem at 6% 0%, var(--wk-login-glow-b, rgba(27, 36, 64, .06)), transparent 60%);
  background-repeat: no-repeat;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  color: #333;
}

#login { width: 340px; padding-top: 7vh; }

/* The logo slot. Replaced with a wordmark rather than the WordPress mark, so
   the page identifies the product the client was sent to.

   Scoped through #login on purpose. WordPress ships `#login h1 a` with an ID
   in the selector, which beats any plain class rule — measured on WP 7.0.2,
   where a `body.login h1 a` rule was silently losing and the stock WordPress
   mark was still being painted. `.wp-login-logo` is the WP 7 class; the bare
   `h1 a` is kept alongside it so this still works if that class goes away. */
body.login #login h1 a,
body.login #login .wp-login-logo a {
  display: block;
  width: 190px;
  height: 36px;
  margin: 0 auto 22px;
  padding: 0;
  background-image: url("../img/logo.svg");
  background-size: 190px 36px;
  background-position: center;
  background-repeat: no-repeat;
  /* The text stays in the DOM for screen readers; it is only moved off-canvas. */
  text-indent: -9999px;
  overflow: hidden;
  color: #141633;   /* currentColor for the wordmark's inherited fills */
}

.login form {
  margin-top: 0;
  padding: 26px 24px 24px;
  background: #fff;
  border: 1px solid #DDE0E9;
  border-top: 3px solid var(--wk-primary, #1B2440);
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px var(--wk-login-shadow, rgba(27, 36, 64, .07));
}

.login label { color: #1B1D26; font-size: 14px; font-weight: 600; }

.login form .input,
.login input[type="text"],
.login input[type="password"] {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #C9CCD6;
  border-radius: 0;
  /* 16px deliberately: anything smaller makes iOS Safari zoom the page on
     focus, which on a login form reads as the page breaking. */
  font-size: 16px;
  font-family: inherit;
  color: #1B1D26;
  box-shadow: none;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
  border-color: var(--wk-accent, #3B5BDB);
  box-shadow: 0 0 0 3px var(--wk-accent-soft, rgba(59, 91, 219, .18));
  outline: 0;
}

.wp-pwd .button.wp-hide-pw { border-radius: 0; color: #5A5F6E; }
.wp-pwd .button.wp-hide-pw:hover { color: var(--wk-primary, #1B2440); }

.login .button-primary,
.wp-core-ui .button-primary {
  width: 100%;
  height: auto;
  padding: 12px 20px;
  background: var(--wk-accent, #3B5BDB);   /* every client's accent is checked for white text on it */
  border: 1px solid var(--wk-accent, #3B5BDB);
  border-radius: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: none;
  box-shadow: none;
}

.login .button-primary:hover,
.login .button-primary:focus,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
  background: var(--wk-accent-h, #2C46B0);
  border-color: var(--wk-accent-h, #2C46B0);
  color: #fff;
  box-shadow: none;
}

.login .button-primary:focus-visible {
  outline: 3px solid var(--wk-accent, #3B5BDB);
  outline-offset: 2px;
}

.login #nav,
.login #backtoblog {
  padding: 0;
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
}
.login #nav a,
.login #backtoblog a { color: #5A5F6E; text-decoration: none; }
.login #nav a:hover,
.login #backtoblog a:hover { color: var(--wk-primary, #1B2440); text-decoration: underline; }

/* Messages. The maintenance-mode notice and our own throttle message both
   land here, so they have to be readable rather than WordPress yellow. */
.login .message,
.login .notice,
.login #login_error {
  padding: 10px 13px;
  border-left: 3px solid var(--wk-primary, #1B2440);
  border-radius: 0;
  background: #F1F2F8;
  color: #333;
  font-size: 13.5px;
  box-shadow: none;
}

.login #login_error {
  border-left-color: #B3261E;
  background: #FBEDEC;
  color: #7A1A15;
}

/* ---- "Continue with Google" ---------------------------------------------
   Printed by DBD_Google::button_and_notice() through `login_message`, so it
   sits inside #login between the wordmark and the password form. It is a
   complete card on its own. When the form is the very next element, the two
   are joined into one panel: the card keeps its indigo accent and its hairline
   bottom edge becomes the divider, and the form drops its own accent. When
   WordPress prints something between them - "You are now logged out.", a
   wrong-password error, the throttle notice - the join is not made and the
   reader sees two proper cards with the notice between, which is what core's
   20px message margins were designed around.

   Joining is gated on :has(), so a browser without it gets the two-card
   layout rather than a half-joined one. Measured on the live WP 7.1 markup:
   nothing sits between the login_message output and <form> on the plain
   screen or after a ?dbd_sso= bounce (our notice is printed before the card,
   inside the same string), so the joined panel is the common case.

   The button follows Google's "Sign in with Google" branding guidelines for
   a custom light button: white fill, 1px #747775 stroke, #1F1F1F text, and
   the standard four-colour "G" at fixed size and colour, 40px tall. The one
   departure is the typeface: the guideline names Google Sans, which is on
   Google Fonts and could be self-hosted, but a second font family for one
   button is not worth its weight on a sign-in page, so the button inherits
   the page's IBM Plex Sans.
   -------------------------------------------------------------------------- */
.login .dbd-sso {
  margin: 0 0 20px;            /* the spacing core gives .message / #login_error */
  padding: 22px 24px 18px;
  background: #fff;
  border: 1px solid #DDE0E9;
  border-top: 3px solid var(--wk-primary, #1B2440);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px var(--wk-login-shadow, rgba(27, 36, 64, .07));
}
@supports selector(:has(+ form)) {
  .login .dbd-sso:has(+ form) { margin-bottom: 0; }
  .login .dbd-sso + form { border-top: 0; }
}

.login .dbd-sso__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #747775;
  border-radius: 0;
  color: #1F1F1F;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.login .dbd-sso__btn:hover { background: #F2F2F2; color: #1F1F1F; }
.login .dbd-sso__btn:focus-visible {
  outline: 3px solid var(--wk-accent, #3B5BDB);
  outline-offset: 2px;
}
.login .dbd-sso__g { width: 20px; height: 20px; flex: 0 0 20px; }

.login .dbd-sso__or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  color: #5A5F6E;
  font-size: 12.5px;
  white-space: nowrap;
}
.login .dbd-sso__or::before,
.login .dbd-sso__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #DDE0E9;
}

/* The outcome notice sits above the card; a link inside it inherits the
   error colour so it stays readable on the rose background. */
/* ID selector to outrank core's own `.login #login_error` margin rule. */
.login #login_error.dbd-sso__notice { margin-bottom: 14px; }
.login .dbd-sso__notice a { color: #7A1A15; text-decoration: underline; }

/* Neither of these earns its place on a one-language client sign-in. */
.login .privacy-policy-page-link,
.login .language-switcher { display: none; }

@media (max-width: 420px) {
  #login { width: 92%; padding-top: 5vh; }
}

/* 6 Sep 2026 (Luke): the Log In button sat hard against the fields. More air
   between the password field, "Remember me" and the button. */
.login form p.forgetmenot { margin: 10px 0 0; }
.login form p.submit { margin-top: 26px; }
.login form .user-pass-wrap { margin-top: 6px; }