/* ==========================================================================
   ePublic.css - iThuba public employer pages (Landing, eLogin, eRegister,
   eResetPassword). Polished marketing/auth template: navy hero, white form
   cards, accent CTAs. Loaded after the page's own <style>.
   Colours come from employer/tokens.css (iThuba employer palette). No photos.
   ========================================================================== */

/* ---------- Landing ---------- */
body.it-public { font-family: var(--it-font, system-ui, sans-serif); background: #fff; color: var(--color-text, #1B2A3D); line-height: 1.55; }
body.it-public h1, body.it-public h2, body.it-public h3 { font-family: var(--it-font-heading, var(--font-display, system-ui, sans-serif)); }
.ml-hero .it-hero__inner { padding: clamp(40px, 6vw, 88px) 0; }
.ml-hero h1 { line-height: 1.12; }
.ml-hero .it-eyebrow { margin-bottom: 14px; }
.ml-mock {
  width: min(100%, 420px); background: #fff; border-radius: var(--it-radius-lg, 6px); padding: 18px 20px 20px; color: var(--color-text, #1B2A3D);
  box-shadow: 0 24px 60px rgba(0,0,0,0.38); border-top: 4px solid var(--color-amber, #E1A83D);
}
.ml-mock__bar { display: flex; gap: 6px; margin-bottom: 12px; }
.ml-mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border, #E7E2D6); }
.ml-mock__title { font-weight: 700; color: var(--color-dark-surface, #1B2A3D); font-size: 1.05rem; display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--color-border, #E7E2D6); }
.ml-mock__title small { color: var(--color-text-muted, #64748B); font-weight: 500; font-size: 0.78rem; }
.ml-mock__row { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #EEF0F4; }
.ml-mock__row b { display: block; font-size: 0.92rem; }
.ml-mock__row i { display: block; font-style: normal; color: var(--color-text-muted, #64748B); font-size: 0.78rem; }
.ml-avatar { width: 38px; height: 38px; border-radius: var(--it-radius, 4px); background: var(--color-border, #E7E2D6); color: var(--color-ink, #1B2A3D); font-weight: 700; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; }
.ml-stars { font-weight: 800; color: var(--color-dark-surface, #1B2A3D); font-size: 0.95rem; }
.ml-stars::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; background: var(--color-amber, #E1A83D); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.ml-mock__foot { margin-top: 14px; }
.ml-mock__foot small { color: var(--color-text-muted, #64748B); font-size: 0.78rem; display: block; margin-top: 6px; }
.ml-bar { display: block; height: 8px; background: var(--color-border, #E7E2D6); border-radius: var(--it-radius, 4px); overflow: hidden; }
.ml-bar span { display: block; height: 100%; background: var(--color-ink-theme, #2C3E50); }
.ml-strip { background: #fff; border-bottom: 1px solid var(--color-border, #E7E2D6); }
.ml-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.ml-strip__inner > div { padding: 22px 20px; border-left: 1px solid var(--color-border, #E7E2D6); }
.ml-strip__inner > div:first-child { border-left: 0; }
.ml-strip__inner b { display: block; color: var(--color-dark-surface, #1B2A3D); font-size: 1.05rem; }
.ml-strip__inner span { color: var(--color-text-muted, #64748B); font-size: 0.85rem; }
@media (max-width: 900px) { .ml-strip__inner { grid-template-columns: repeat(2, 1fr); } .ml-strip__inner > div:nth-child(3) { border-left: 0; } }
@media (max-width: 520px) { .ml-strip__inner { grid-template-columns: 1fr; } .ml-strip__inner > div { border-left: 0; border-top: 1px solid var(--color-border, #E7E2D6); padding: 14px 4px; } .ml-strip__inner > div:first-child { border-top: 0; } }
body.it-public .it-grid { margin: 0; }
body.it-public .it-card h3 { font-size: 1.1rem; }
body.it-public .it-card p { line-height: 1.6; }
body.it-public .it-btn { margin: 0; }
body.it-public .it-btn:hover { transform: none; }

/* ---------- Auth pages: login, register, reset ---------- */
body.it-auth {
  background-color: var(--color-dark-surface, #1B2A3D);
  /* iThuba's Johannesburg photo under a dark tint, so the form card stands out */
  background-image:
    linear-gradient(135deg, rgba(27, 42, 61, 0.88) 0%, rgba(44, 62, 80, 0.78) 100%),
    url('../images/Jburgsunset.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--color-text, #1B2A3D);
}
body.it-auth::before {
  background-color: transparent;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
}
body.it-auth .content { max-width: none; margin: 0; background: transparent; border: 0; box-shadow: none; }
body.it-auth #footer-container { position: relative !important; }

/* White form cards */
body.it-auth .login-container, body.it-auth .reset-container, body.it-auth .form-frame {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--color-border, #E7E2D6); border-top: 4px solid var(--color-amber, #E1A83D); border-radius: var(--it-radius-lg, 6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
}
body.it-auth .login-container h2, body.it-auth .reset-container h2, body.it-auth .form-frame h2,
body.it-auth .form-frame h3 { text-shadow: none; color: var(--color-dark-surface, #1B2A3D); font-weight: 800; letter-spacing: -0.01em; }
body.it-auth .login-container h2, body.it-auth .form-frame h2, body.it-auth .reset-container h2 { font-size: 1.7rem; }
body.it-auth .form-frame h3 { font-size: 1.1rem; padding-bottom: 8px; border-bottom: 1px solid var(--color-border, #E7E2D6); }
body.it-auth .form-frame .lead, body.it-auth .reset-container .lead { color: var(--color-text-secondary, #475569); text-shadow: none; }
body.it-auth .form-group label, body.it-auth .form-frame label {
  color: var(--color-text, #1B2A3D); text-shadow: none; font-weight: 600; font-size: 0.85rem;
}
body.it-auth .checkbox-group label { font-weight: 400; }

/* Inputs */
body.it-auth .form-group input[type="email"], body.it-auth .form-group input[type="password"], body.it-auth .form-group input[type="text"],
body.it-auth .form-frame input[type="text"], body.it-auth .form-frame input[type="email"], body.it-auth .form-frame input[type="password"],
body.it-auth .form-frame input[type="tel"], body.it-auth .form-frame input[type="url"], body.it-auth .form-frame select, body.it-auth .form-frame textarea,
body.it-auth .reset-container input {
  background: #fff; color: var(--color-text, #1B2A3D); border: 1px solid var(--color-border, #E7E2D6); border-radius: var(--it-radius, 4px); font-weight: 400; font-size: 0.95rem; box-shadow: none;
}
body.it-auth .form-group input:hover, body.it-auth .form-frame input:hover, body.it-auth .form-frame select:hover, body.it-auth .form-frame textarea:hover {
  background: #fff; border-color: var(--color-text-faint, #94A3B8);
}
body.it-auth .form-group input:focus, body.it-auth .form-frame input:focus, body.it-auth .form-frame select:focus, body.it-auth .form-frame textarea:focus,
body.it-auth .reset-container input:focus {
  background: #fff; border-color: var(--color-teal, #2F9E8F); outline: 0; box-shadow: 0 0 0 3px var(--color-border, #E7E2D6);
}
body.it-auth .form-frame input::placeholder { color: var(--color-text-faint, #94A3B8); }
body.it-auth .password-toggle, body.it-auth .password-toggle:hover { color: var(--color-text-muted, #64748B); }

/* Buttons */
body.it-auth .btn-primary, body.it-auth .submit-btn, body.it-auth .add-contact-btn {
  background: var(--color-ink-theme, #2C3E50); color: #fff; border-radius: var(--it-radius, 4px); border: 0; box-shadow: 0 1px 2px rgba(27, 42, 61,0.2);
}
body.it-auth .btn-primary:hover, body.it-auth .submit-btn:hover, body.it-auth .add-contact-btn:hover { background: var(--color-ink, #1B2A3D); transform: none; box-shadow: 0 1px 2px rgba(27, 42, 61,0.2); }
body.it-auth .add-contact-btn { background: #fff; color: var(--color-ink-theme, #2C3E50); border: 1px solid var(--color-ink-theme, #2C3E50); box-shadow: none; }
body.it-auth .add-contact-btn:hover { background: var(--color-paper, #F6F4EF); color: var(--color-ink, #1B2A3D); }
body.it-auth .login-footer a, body.it-auth .checkbox-group a, body.it-auth .resend-link { color: var(--color-ink-theme, #2C3E50); text-shadow: none; }
body.it-auth .resend-link.disabled { color: var(--color-text-faint, #94A3B8); }

/* Register extras */
body.it-auth .contact-person { background: var(--color-paper, #F6F4EF); border: 1px solid var(--color-border, #E7E2D6); border-radius: var(--it-radius, 4px); backdrop-filter: none; }
body.it-auth .contact-person .remove-contact { background: var(--color-danger, #D9534F); border-radius: var(--it-radius, 4px); }
body.it-auth .contact-person .remove-contact:hover { background: #b52b27; transform: none; }
body.it-auth .success-panel { background: var(--color-teal-bg, #EAF4F2); border: 1px solid var(--color-teal-bg, #EAF4F2); border-radius: var(--it-radius, 4px); }
body.it-auth .success-panel h3 { color: var(--color-teal, #2F9E8F); text-shadow: none; border: 0; }
body.it-auth .success-panel p, body.it-auth .countdown, body.it-auth .redirect-message { text-shadow: none; color: var(--color-text, #1B2A3D); }
body.it-auth .resend-container { border-top-color: var(--color-teal-bg, #EAF4F2); }
body.it-auth .show-validation:invalid { border-color: var(--color-danger, #D9534F); background: #fbeceb; }
body.it-auth .hero-registration { background: transparent; padding: clamp(24px, 4vw, 48px) 2rem 0; }
body.it-auth .hero-text h1 { text-shadow: none; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.01em; }
body.it-auth .hero-text h1::after { content: ''; display: block; width: 56px; height: 4px; background: var(--color-amber, #E1A83D); margin-top: 14px; border-radius: var(--it-radius, 4px); }
body.it-auth .hero-text .lead { text-shadow: none; color: #C5D4EE; font-size: 1.05rem; max-width: 62ch; }
body.it-auth .hero-content-wrapper { max-width: 1100px; }
body.it-auth .hero-image { flex: 0 0 300px; }
.ml-reg-panel { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--it-radius-lg, 6px); padding: 20px 22px; color: #fff; }
.ml-reg-panel__title { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--color-amber, #E1A83D); margin-bottom: 12px; }
.ml-reg-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ml-reg-panel li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: #E8EEF8; }
.ml-reg-panel li span { flex: 0 0 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-teal, #2F9E8F); color: #fff; border-radius: var(--it-radius, 4px); }
@media (max-width: 992px) { body.it-auth .hero-image { flex: 0 0 auto; width: 100%; max-width: 420px; } body.it-auth .hero-text h1::after { margin-left: auto; margin-right: auto; } }
body.it-auth .registration-section { padding-top: 1.75rem; }
@media (max-width: 640px) { body.it-auth .login-container, body.it-auth .reset-container, body.it-auth .form-frame { padding: 1.4rem; } }

/* ---------- Layout polish ---------- */
body.it-public h1, body.it-public h2, body.it-public h3 { font-weight: 700; }
body.it-public .it-title { color: var(--color-dark-surface, #1B2A3D); font-weight: 800; letter-spacing: -0.01em; }
body.it-public .it-section--navy .it-title { color: #fff; }
body.it-public .it-hero h1 { font-weight: 800; }
body.it-auth { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 0 !important; }
body.it-auth > .content, body.it-auth > .registration-section { flex: 1 0 auto; }
body.it-auth #footer-container { margin-top: auto; min-height: 0; flex: 0 0 auto; display: block; position: relative !important; }
body.it-auth #header-container, body.it-auth .hero-registration { flex: 0 0 auto; }
body.it-auth > .content { min-height: 0; align-items: center; }
body.it-auth .btn-warning, body.it-public .btn-warning { background: var(--color-amber, #E1A83D); border-color: var(--color-amber, #E1A83D); color: var(--color-text, #1B2A3D); font-weight: 700; border-radius: var(--it-radius, 4px); }
body.it-auth .btn-warning:hover { background: var(--color-amber, #E1A83D); border-color: var(--color-amber, #E1A83D); color: var(--color-text, #1B2A3D); }
body.it-auth .btn-secondary { background: var(--color-ink-theme, #2C3E50); border-color: var(--color-ink-theme, #2C3E50); border-radius: var(--it-radius, 4px); }
body.it-auth .btn-secondary:disabled { background: var(--color-text-faint, #94A3B8); border-color: var(--color-text-faint, #94A3B8); opacity: 1; }
body.it-auth .btn-outline-secondary { color: var(--color-ink-theme, #2C3E50); border-color: var(--color-ink-theme, #2C3E50); border-radius: var(--it-radius, 4px); }
body.it-auth .btn-outline-secondary:hover { background: var(--color-paper, #F6F4EF); color: var(--color-ink, #1B2A3D); }
.site-header .nav-links a { white-space: nowrap; }