/* ============================================================
   LOGIN SCREEN – CLEAN BRANDING CSS
   ============================================================ */

/* ===== 1. Fallback brand palette (ALWAYS defined on login) ===== */
:root {
  --brand-bg: #f3f3f3;          /* Shadow Grey */
  --brand-card: #ffffff;        /* White */
  --brand-text: #141414;        /* Text Black */
  --brand-muted: #424242;       /* Charcoal */
  --brand-primary: #e64626;     /* Ochra */
  --brand-primary-hover: #c63a1e; /* Link hover */
  --brand-border: #e7e7e8;      /* Lite Grey */
}

/* ============================================================
   2. Front-end theme.json variable mapping
   (DO NOT apply on login page — avoids variable undefined issues)
   ============================================================ */
body:not(.login) {
  --brand-bg: var(--wp--custom--brand--bg, var(--brand-bg));
  --brand-card: var(--wp--custom--brand--card, var(--brand-card));
  --brand-text: var(--wp--custom--brand--text, var(--brand-text));
  --brand-muted: var(--wp--custom--brand--muted, var(--brand-muted));
  --brand-primary: var(--wp--custom--brand--primary, var(--brand-primary));
  --brand-primary-hover: var(--wp--custom--brand--primary-hover, var(--brand-primary-hover));
  --brand-border: var(--wp--custom--brand--border, var(--brand-border));
}

/* ============================================================
   3. Page Background + Typography
   ============================================================ */
body.login {
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* TEMP debug (remove as needed)
body.login { outline: 4px solid magenta !important; }
*/

/* ============================================================
   4. Login Container
   ============================================================ */
#login {
  width: 380px;
  max-width: 92vw;
  padding-top: 4vh;
}

/* ============================================================
   5. Logo block
   (Image applied via functions.php)
   ============================================================ */
/* Logo block */
body.login #login h1 a {
  width: auto;
  height: 80px;
  background-image: url('https://wptheme.sydney.edu.au/assets/img/UoS_logo.svg') !important; 
  background-size: contain !important;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
}

/* ============================================================
   6. Login Form Card
   ============================================================ */
.login form {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
  padding: 26px 24px;
}

/* Labels + messages */
.login label {
  color: var(--brand-text);
  font-weight: 600;
}

.login .message,
.login .notice,
.login .success {
  border-left-color: var(--brand-primary);
}

#login_error {
  border-left-color: #d63638; /* WP core error red */
}

/* ============================================================
   7. Inputs
   ============================================================ */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  background: #ffffff;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  color: var(--brand-text);
  box-shadow: none;
}

.login form .input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 20%, transparent);
  outline: none;
}

/* ============================================================
   8. Primary Button
   ============================================================ */
.wp-core-ui .button.button-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: none;
  text-shadow: none;
}

.wp-core-ui .button.button-primary:hover,
.wp-core-ui .button.button-primary:focus {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

/* ============================================================
   9. Links (nav + back to blog)
   ============================================================ */
#nav a,
#backtoblog a {
  color: var(--brand-primary);
  text-decoration: underline;
}

#nav a:hover,
#backtoblog a:hover {
  color: var(--brand-primary-hover);
}

/* ============================================================
   10. Remember Me Label
   ============================================================ */
.login form .forgetmenot label {
  font-weight: 500;
  color: var(--brand-muted);
}

/* ============================================================
   11. WP 6.7+ "Powered by WordPress" + Privacy Link
   ============================================================ */
.login .privacy-policy-page-link {
  color: var(--brand-muted);
}