/* =============== OakTech Login Branding (with design system vars) =============== */

/* 1) Your design system variables (paste as-is so future changes are centralized) */
:root {
  --e-a-color-white: #fff;
  --e-a-color-black: #000;
  --e-a-color-logo: #fff;
  --e-a-color-primary: #7149FF;
  --e-a-color-primary-bold: #7149FF;
  --e-a-color-secondary: #1E1E1E;
  --e-a-color-success: #0a875a;
  --e-a-color-danger: #dc2626;
  --e-a-color-info: #2563eb;
  --e-a-color-warning: #f59e0b;
  --e-a-color-accent: #93003f;
  --e-a-color-global: #1dddbf;
  --e-a-color-accent-promotion: #93003f;
  --e-a-bg-default: #fff;
  --e-a-bg-invert: #0c0d0e;
  --e-a-bg-hover: #f1f2f3;
  --e-a-bg-active: #e6e8ea;
  --e-a-bg-active-bold: #d5d8dc;
  --e-a-bg-loading: #f9fafa;
  --e-a-bg-logo: #000;
  --e-a-bg-primary: #fae8ff;
  --e-a-bg-secondary: #1E1E1E;
  --e-a-bg-success: #f2fdf5;
  --e-a-bg-info: #f0f7ff;
  --e-a-bg-danger: #fef1f4;
  --e-a-bg-warning: #fffbeb;
  --e-a-bg-chip: #f1f2f3;
  --e-a-color-txt: #1E1E1E;
  --e-a-color-txt-muted: #818a96;
  --e-a-color-txt-disabled: #babfc5;
  --e-a-color-txt-invert: #fff;
  --e-a-color-txt-accent: #0c0d0e;
  --e-a-color-txt-hover: #3f444b;
  --e-a-color-txt-active: #0c0d0e;
  --e-a-border-color: #e6e8ea;
  --e-a-border-color-bold: #d5d8dc;
  --e-a-border-color-focus: #babfc5;
  --e-a-border-color-accent: #0c0d0e;
  --e-a-border: 1px solid var(--e-a-border-color);
  --e-a-border-bold: 1px solid var(--e-a-border-color-bold);
  --e-a-border-radius: 3px;
  --e-a-btn-color: #0c0d0e;
  --e-a-btn-color-invert: var(--e-a-color-txt-invert);
  --e-a-btn-color-disabled: var(--e-a-color-txt-disabled);
  --e-a-btn-bg: #1E1E1E;
  --e-a-btn-bg-hover: #3a4046;
  --e-a-btn-bg-active: #23262a;
  --e-a-btn-bg-disabled: #d5d8dc;
  --e-a-btn-bg-primary: #7149FF;
  --e-a-btn-bg-primary-hover: #7149FF;
  --e-a-btn-bg-primary-active: #7149FF;
  --e-a-btn-bg-accent: #93003f;
  --e-a-btn-bg-accent-hover: #8f1a4c;
  --e-a-btn-bg-accent-active: #a93365;
  --e-a-btn-bg-info: #2563eb;
  --e-a-btn-bg-info-hover: #134cca;
  --e-a-btn-bg-info-active: #0e3b9c;
  --e-a-btn-bg-success: #0a875a;
  --e-a-btn-bg-success-hover: #06583a;
  --e-a-btn-bg-success-active: #03281b;
  --e-a-btn-bg-warning: #f59e0b;
  --e-a-btn-bg-warning-hover: #c57f08;
  --e-a-btn-bg-warning-active: #945f06;
  --e-a-btn-bg-danger: #dc2626;
  --e-a-btn-bg-danger-hover: #b21d1d;
  --e-a-btn-bg-danger-active: #861616;
  --e-a-dark-bg: #0c0d0e;
  --e-a-dark-color-txt: #9da5ae;
  --e-a-dark-color-txt-hover: #d5d8dc;
  --e-a-font-family: Roboto, Arial, Helvetica, sans-serif;
  --e-a-transition-hover: all .3s;
  --e-a-popover-shadow: 0 2px 15px rgba(0, 0, 0, .3);
  --e-a-dropdown-shadow: 0 0 3px rgba(0, 0, 0, .2);
}

/* 2) Bridge: map OAK tokens used by this sheet to your e-a-* tokens */
:root{
  /* Update logo URL */
  --oak-logo-url: url("https://your-site.com/wp-content/uploads/oaktech-logo-login.png");

  /* Core theme tokens sourced from your system */
  --oak-primary: var(--e-a-btn-bg-primary);
  --oak-primary-txt: var(--e-a-color-txt-invert);

  --oak-heading: var(--e-a-color-primary-bold);
  --oak-text: var(--e-a-color-txt);
  --oak-muted: var(--e-a-color-txt-muted);

  --oak-bg: var(--e-a-bg-default);
  --oak-card: var(--e-a-bg-default);
  --oak-border: var(--e-a-border-color);
}

/* 3) Presentation (unchanged selectors, now driven by tokens) */

/* Page + typography */
body.login{
  background: var(--oak-bg);
  color: var(--oak-text);
  font-family: var(--e-a-font-family, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,Verdana,sans-serif);
}
#login{ width:100%; max-width:720px; margin:24px auto 0; }

/* Replace default WP mark with our logo */
.login h1 a{
  background-image: var(--oak-logo-url);
  background-size: contain;
  background-position: left center;
  width: 180px;
  height: 36px;
  margin: 0 0 8px;
}

/* Hero (matches your Figma) */
.oak-hero{ text-align:center; margin:8px 0 24px; }
.oak-h1{ color: var(--oak-heading); font-size: clamp(28px,4vw,40px); line-height:1.1; margin:12px 0 6px; font-weight:800; }
.oak-sub{ color: var(--oak-text); font-weight:700; font-size: clamp(16px,2.3vw,20px); margin:0 0 8px; }
.oak-blurb{ color: var(--oak-muted); font-size:15px; margin:0; }

/* Form card */
.login form{
  background: var(--oak-card);
  border: 1px solid var(--oak-border);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
  padding: 40px;
  margin-top: 18px;
}
.login form .input,
.login form input[type="text"],
.login form input[type="password"]{
  border-radius: 999px;
  border:1px solid var(--oak-border);
  background:#F1F5F9;
  height:44px;
  padding:0 16px;
  box-shadow:none;
}
.login form .input:focus{
  border-color: var(--oak-primary);
  box-shadow: 0 0 0 1px var(--oak-primary);
  outline:none;
}

/* Remember + links */
.forgetmenot label{ color: var(--oak-muted); }
.login #nav, .login #backtoblog{ text-align:left; }
.login #nav a, .login #backtoblog a{ color: var(--oak-primary); }

/* Primary button */
.wp-core-ui .button-primary{
  background: var(--oak-primary);
  border-color: var(--oak-primary);
  color: var(--oak-primary-txt);
  border-radius:999px;
  height:44px;
  min-width:120px;
  padding:0 16px;
  box-shadow:none; text-shadow:none;
  font-weight:700;
  transition: var(--e-a-transition-hover);
}
.wp-core-ui .button-primary:hover{ filter: brightness(0.95); }

/* Notices */
.login .message, .login .notice, .login .success{
  border-left-color: var(--oak-primary);
  border-radius:10px;
}

/* Footer help bar */
.oak-footer{
  position: fixed; left:0; right:0; bottom:0;
  background:#0B1437; color:#E2E8F0; padding:16px 0;
}
.oak-footer-inner{ max-width:980px; margin:0 auto; text-align:center; font-size:14px; }
.oak-footer a{ color:#B4C6FF; text-decoration: underline; }

/* Widen form on desktop */
@media (min-width:480px){
  .login form{ width:520px; margin-left:auto; margin-right:auto; }
}

/* Optional cleanups */
.login .language-switcher, .login .privacy-policy-page-link{ display:none; }
.login .shake{ animation:none; }

/* Hide "← Back to" */
.login #backtoblog { display: none !important; }

/* Style the Join link under Forgot password */
.login #nav .oak-join-link {
  color: var(--oak-text);
  text-decoration: none;
}
.login #nav .oak-join-link:hover {
  text-decoration: underline;
}

/* 2FA layout tweaks: prevent cutoff */
body.login .login form{
  padding-bottom: 40px;     /* extra room for actions */
  overflow: visible;         /* avoid clipping shadows/buttons */
}

body.login .login form p.submit,
body.login .login form .submit{
  margin-top: 16px;          /* space above the button row */
}

/* Solid Security 2FA containers: ensure enough height */
body.login .login form .itsec-two-factor__container,
body.login .login form .itsec-2fa-container,
body.login .login form .itsec-2fa,
body.login .login form .two-factor,
body.login .login form .two-factor-authentication{
  min-height: 240px;         /* adjust if still tight */
}

/* Keep the Log In button from hugging the edge */
body.login .login form .button-primary{
  float: none;
  display: inline-block;
}

.border-top {
    display: none;
}

body.login {
    padding: 0 25px;
}

/* === Fixed Header (uses your variables) === */
.oak-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--e-a-bg-secondary);     /* dark bar */
  border-bottom: 1px solid var(--e-a-border-color);
  z-index: 1000;
}
.oak-header-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.oak-header-brand img{
  height: 28px;
  display: block;
}

/* Push the login stack down so header doesn’t overlap */
body.login { padding-top: 60px; } /* adjust if your logo bar is taller */

/* === Footer (you already had styles; keep + ensure full width on mobile) === */
.oak-footer{
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--e-a-bg-secondary);
  color: var(--e-a-color-txt-invert);
  padding: 14px 0;
  z-index: 1000;
}
.oak-footer-inner{
  max-width: 1100px; margin: 0 auto; text-align: center; font-size: 14px;
  padding: 0 20px;
}
.oak-footer a{ color: var(--e-a-color-primary); text-decoration: underline; }

/* Avoid crowding on tablet/mobile (you added side padding already) */
@media (max-width: 1024px){
  body.login { padding-top: 64px; padding-bottom: 64px; }
}

/* Make sure the #login block stays centered between header/footer */
#login{ margin-bottom: 40px; }   /* a little breathing room above footer */