/* ============================================================================
   Consilium - wp-login.php
   Enqueued from functions.php via login_enqueue_scripts, so it only ever loads
   on the login screen. Styles WordPress' own markup - nothing here assumes
   changed structure.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --cn-ink:        #14151A;
  --cn-muted:      #68676B;
  --cn-faint:      #A9A8AC;
  --cn-bg:         #FAF9F7;
  --cn-surface:    #F2F1EC;
  --cn-white:      #FFFFFF;
  --cn-yellow:     #FFCE1B;
  --cn-yellow-h:   #F0BE05;
  --cn-yellow-a:   #E0AE00;
  --cn-accent:     #0A8CA6;
  --cn-plum:       #B54A7C;
  --cn-plum-h:     #8E3861;
  --cn-line:       rgba(20, 21, 26, .08);
  --cn-line-input: rgba(20, 21, 26, .12);
  --cn-ease:       cubic-bezier(.2, .8, .2, 1);
  --cn-shadow:     0 1px 2px rgba(20, 21, 26, .04), 0 24px 48px -44px rgba(20, 21, 26, .28);
}

/* ---------- Page ---------------------------------------------------------- */
body.login {
  box-sizing: border-box;          /* WP does not set this on body; without it the
                                      48px padding is added to 100vh and the page
                                      scrolls for no reason. */
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--cn-ink);
  background: var(--cn-bg) radial-gradient(60% 40% at 50% 0%, rgba(255, 206, 27, .18) 0%, rgba(255, 206, 27, 0) 70%) no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px 16px;
}
body.login * { box-sizing: border-box; }

body.login div#login {
  width: 100%;
  max-width: 420px;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
/* Explicit rhythm rather than a single gap: the wordmark and card want room,
   the three link rows underneath want to read as one group. */
.login h1            { margin-bottom: 22px; }
.login form          { margin-bottom: 20px; }
.login #nav          { margin-bottom: 10px; }
.login #backtoblog   { margin-bottom: 0; }

/* ---------- Wordmark ------------------------------------------------------
   WordPress already prints the site name inside the logo link (login_headertext).
   Un-hide that real text rather than replacing it with generated content - it
   stays selectable and screen readers keep reading a real link label. */
.login h1 { margin: 0; text-align: center; }
.login h1 a,
.login .wp-login-logo a {
  background: none;
  width: auto;
  height: auto;
  text-indent: 0;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--cn-ink);
  margin: 0;
  text-decoration: none;
}
.login h1 a::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cn-yellow);
  flex: none;
}
.login h1 a:hover { color: var(--cn-ink); }
.login h1 a:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--cn-accent);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---------- Card ---------------------------------------------------------- */
.login form {
  background: var(--cn-white);
  border: 1px solid var(--cn-line);
  border-radius: 20px;
  padding: 36px;
  margin: 0;
  box-shadow: var(--cn-shadow);
  overflow: visible;
}

/* Headings per screen. Scoped by form id so the login copy cannot leak onto
   the password-reset or registration screens. */
.login #loginform::before,
.login #lostpasswordform::before,
.login #resetpassform::before,
.login #registerform::before {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--cn-ink);
}
.login #loginform::before        { content: 'Welcome back'; }
.login #lostpasswordform::before { content: 'Reset your password'; }
.login #resetpassform::before    { content: 'Choose a new password'; }
.login #registerform::before     { content: 'Create an account'; }

/* Sub-line. wp-login.php has no hook inside the form (login_form_top only
   exists in wp_login_form()), so it hangs off the first field group. */
.login #loginform > p:first-of-type::before,
.login #lostpasswordform > p:first-of-type::before {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cn-muted);
  margin: 6px 0 22px;
}
.login #loginform > p:first-of-type::before        { content: 'Sign in to manage the Consilium site.'; }
.login #lostpasswordform > p:first-of-type::before { content: 'We will email you a link to set a new one.'; }

/* ---------- Fields -------------------------------------------------------- */
.login label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--cn-ink);
  line-height: 1.4;
  margin-bottom: 8px;
}
.login form .input,
.login input[type=text],
.login input[type=email],
.login input[type=password] {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--cn-ink);
  background: var(--cn-bg);
  border: 1px solid var(--cn-line-input);
  border-radius: 12px;
  padding: 13px 16px;
  margin: 0 0 20px;
  width: 100%;
  min-height: 0;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .3s var(--cn-ease), box-shadow .3s var(--cn-ease), background .3s var(--cn-ease);
}
.login input::placeholder { color: var(--cn-faint); font-weight: 500; }
.login input[type=password] { padding-right: 52px; }
.login form .input:focus,
.login input[type=text]:focus,
.login input[type=email]:focus,
.login input[type=password]:focus {
  border-color: var(--cn-accent);
  box-shadow: 0 0 0 3px rgba(10, 140, 166, .15);
  background: var(--cn-white);
  outline: none;
}
/* The password field sits in .wp-pwd, which must not inherit the field margin. */
.login .user-pass-wrap { margin-bottom: 20px; }
.login .wp-pwd { position: relative; }
.login .wp-pwd input[type=password],
.login .wp-pwd input[type=text] { margin-bottom: 0; }

.login .wp-pwd .button.wp-hide-pw {
  position: absolute;
  right: 8px;
  top: 6px;                      /* (48px field - 36px button) / 2. Anchored to the
                                    field, not .wp-pwd's centre - the caps-lock
                                    warning lives in there too and would shift it. */
  bottom: auto;
  transform: none;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--cn-muted);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .3s var(--cn-ease), color .3s var(--cn-ease);
}
.login .wp-pwd .button.wp-hide-pw .dashicons { width: 20px; height: 20px; font-size: 20px; }
.login .wp-pwd .button.wp-hide-pw:hover { background: var(--cn-surface); color: var(--cn-ink); }
.login .wp-pwd .button.wp-hide-pw:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--cn-accent);
  outline-offset: 0;
}

/* Caps-lock warning. Core defaults it to display:none and jQuery .show() writes
   an INLINE display:block, so this must not declare `display` at all - doing so
   either pins it open or fights an inline style it cannot win. */
.login .wp-pwd .caps-warning {
  position: relative;
  top: 0;
  margin-top: 10px;
  padding: 8px 12px;
  background: #FFFBEB;
  border: 1px solid rgba(255, 206, 27, .55);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cn-ink);
}
.login .wp-pwd .caps-icon { width: 16px; height: 16px; margin-right: 6px; }
.login .wp-pwd .caps-icon svg { fill: var(--cn-ink); stroke: var(--cn-ink); width: 14px; height: 15px; }

/* ---------- Remember me --------------------------------------------------
   Core renders the checkbox and its label as SIBLINGS, with a toggletip button
   after them - so the spacing has to live on the row, not on the label. */
.login form .forgetmenot {
  float: none;                   /* core floats this left, which takes the row out
                                    of flow and drags p.submit up over it. */
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-size: 13.5px;
}
.login form .forgetmenot label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cn-muted);
  line-height: 1.4;
  cursor: pointer;
}
.login input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  border-radius: 4px;
  border: 1px solid rgba(20, 21, 26, .25);
  accent-color: var(--cn-ink);
  cursor: pointer;
}
.login input[type=checkbox]:checked { background: var(--cn-ink); border-color: var(--cn-ink); }
.login input[type=checkbox]:checked::before { filter: brightness(10); }
.login input[type=checkbox]:focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 2px; box-shadow: none; }

/* Core's help toggletip next to "Remember Me". */
.login .wp-tooltip__toggle {
  border: none;
  background: transparent;
  color: var(--cn-faint);
  padding: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .3s var(--cn-ease);
}
.login .wp-tooltip__toggle:hover { color: var(--cn-muted); }
.login .wp-tooltip__toggle .dashicons { width: 17px; height: 17px; font-size: 17px; }
.login .wp-tooltip__bubble {
  border: 1px solid var(--cn-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cn-muted);
  background: var(--cn-white);
  box-shadow: var(--cn-shadow);
  max-width: 260px;
}

/* ---------- Submit -------------------------------------------------------- */
.login p.submit { float: none; margin: 0; }
.login .button-primary {
  float: none;                   /* core floats it right, collapsing p.submit to 0 height */
  font-family: inherit;
  width: 100%;
  background: var(--cn-yellow);
  color: var(--cn-ink);
  border: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.005em;
  padding: 14px 24px;
  min-height: 0;
  height: auto;
  line-height: 1.2;
  border-radius: 100px;
  box-shadow: 0 1px 2px rgba(20, 21, 26, .08);
  text-shadow: none;
  cursor: pointer;
  transition: background .35s cubic-bezier(.32, .72, 0, 1);
}
.login .button-primary:hover  { background: var(--cn-yellow-h); color: var(--cn-ink); }
.login .button-primary:active { background: var(--cn-yellow-a); }

/* Buttons change colour on hover, nothing else - no growth, lift or scale. */
.login .button,
.login .button-primary,
.login .wp-pwd .button.wp-hide-pw,
.login .wp-tooltip__toggle {
  transform: none !important;
  transition-property: background-color, color, box-shadow, border-color;
}
.login .button:hover,
.login .button:focus,
.login .button-primary:hover,
.login .button-primary:focus,
.login .wp-pwd .button.wp-hide-pw:hover,
.login .wp-tooltip__toggle:hover { transform: none !important; }
.login .button-primary:focus-visible {
  background: var(--cn-yellow-h);
  color: var(--cn-ink);
  box-shadow: 0 0 0 3px rgba(10, 140, 166, .25);
  outline: none;
}

/* ---------- Links below the card ------------------------------------------ */
.login #nav,
.login #backtoblog {
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
  color: var(--cn-muted);
  text-decoration: none;
  transition: color .3s var(--cn-ease);
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover,
.login a:hover { color: var(--cn-plum); }
.login #nav a:focus-visible,
.login #backtoblog a:focus-visible,
.login .privacy-policy-page-link a:focus-visible {
  outline: 2px solid var(--cn-accent);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: none;
}

/* ---------- Notices ------------------------------------------------------- */
.login #login_error,
.login .message,
.login .success,
.login .notice {
  background: var(--cn-white);
  border: 1px solid var(--cn-line);
  border-left: 4px solid var(--cn-accent);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cn-muted);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(20, 21, 26, .04);
  margin: 0;
}
.login #login_error {
  border-color: rgba(181, 74, 124, .35);
  border-left-color: var(--cn-plum);
  animation: cn-login-shake .4s var(--cn-ease);
}
.login #login_error strong,
.login .message strong { color: var(--cn-ink); font-weight: 700; }
.login #login_error a,
.login .message a { color: var(--cn-plum); font-weight: 600; }
.login #login_error a:hover,
.login .message a:hover { color: var(--cn-plum-h); }

@keyframes cn-login-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ---------- Misc ---------------------------------------------------------- */
.login .privacy-policy-page-link { margin: 0; font-size: 12.5px; text-align: center; }
.login .language-switcher { display: none; }
.login #pass-strength-result {
  border-radius: 12px;
  border: 1px solid var(--cn-line);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  margin: 0 0 20px;
}
.login .indicator-hint { font-size: 12.5px; color: var(--cn-muted); padding-top: 0; }

@media (max-width: 480px) {
  body.login { padding: 32px 14px; }
  .login form { padding: 26px 22px; border-radius: 18px; }
  .login #loginform::before,
  .login #lostpasswordform::before,
  .login #resetpassform::before,
  .login #registerform::before { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .login #login_error { animation: none; }
  .login * { transition-duration: .01ms !important; }
}

/* ---------- Spacing overrides -------------------------------------------
   Core sets these with #id and `.login form x` selectors, so the rhythm has
   to be re-stated at that weight rather than with plain classes. */
#login h1                     { margin: 0 0 22px; }
#login form                   { margin: 0 0 20px; }
#login form .forgetmenot      { margin: 0 0 22px; }
#login #nav                   { margin: 0 0 10px; padding: 0; }
#login #backtoblog            { margin: 0 0 14px; padding: 0; }
#login .privacy-policy-page-link { margin: 0; }

/* ---------- Checkbox ------------------------------------------------------
   Core paints its own box (appearance:none + a dashicons tick) and a blue
   double-ring on :focus. Take the whole control over so the checked state
   matches the brand instead of the admin theme colour. */
#login form .forgetmenot { gap: 10px; }

#login form .forgetmenot input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  flex: none;
  display: inline-grid;
  place-content: center;
  border: 1.5px solid rgba(20, 21, 26, .25);
  border-radius: 5px;
  background: var(--cn-white);
  box-shadow: none;
  cursor: pointer;
  transition: background .2s var(--cn-ease), border-color .2s var(--cn-ease);
}
#login form .forgetmenot input[type=checkbox]:hover { border-color: rgba(20, 21, 26, .45); }

#login form .forgetmenot input[type=checkbox]::before {
  content: '';
  width: 11px;
  height: 11px;
  margin: 0;
  background: none;
  background-color: var(--cn-white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  transform: scale(0);
  transition: transform .15s var(--cn-ease);
  color: transparent;
  font-size: 0;
  line-height: 0;
}
#login form .forgetmenot input[type=checkbox]:checked {
  background: var(--cn-ink);
  border-color: var(--cn-ink);
}
#login form .forgetmenot input[type=checkbox]:checked::before { transform: scale(1); filter: none; }

/* Core's blue :focus double-ring has to be cleared explicitly. */
#login form .forgetmenot input[type=checkbox]:focus {
  box-shadow: none;
  outline: none;
  border-color: var(--cn-ink);
}
#login form .forgetmenot input[type=checkbox]:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--cn-accent);
  outline-offset: 2px;
}

/* ---------- Notice spacing ------------------------------------------------
   #login is a flex column with no gap, and core zeroes these margins, so
   stacked notices sat flush against each other and against the card. */
#login .notice,
#login .message,
#login .success,
#login #login_error {
  margin: 0 0 14px;
}
#login .notice p,
#login .message p,
#login #login_error p { margin: 0; padding: 0; }
#login .notice p + p,
#login .message p + p { margin-top: 8px; }

/* Checkbox focus ring: core's UA-ish dark outline wins over the class rule,
   so restate it here at #login weight. */
#login form .forgetmenot input[type=checkbox]:focus-visible {
  outline: 2px solid var(--cn-accent);
  outline-offset: 2px;
  box-shadow: none;
}
#login form .forgetmenot input[type=checkbox]:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* iOS zoom: same 16px rule as the site's contact form. Under 16px Safari
   zooms the page on focus; 16px avoids it without a user-scalable=no
   viewport, which would block pinch-zoom entirely. */
@media (pointer: coarse) {
  .login form .input,
  .login input[type=text],
  .login input[type=email],
  .login input[type=password] { font-size: 16px; }
}