/* ==========================================================================
   ePublic.css - Mukana public employer pages (Landing, eLogin, eRegister,
   eResetPassword). Polished marketing/auth template: navy hero, white form
   cards, gold primary accents. Loaded after the page's own <style>.
   Palette: blues, cool greys, mint (success), gold (accent). No photos.
   ========================================================================== */

/* ---------- Landing ---------- */
body.mk-public { font-family: var(--mk-font, 'Inter', system-ui, sans-serif); background: #fff; color: #1B2A3D; line-height: 1.55; }
body.mk-public h1, body.mk-public h2, body.mk-public h3 { font-family: var(--mk-font, 'Inter', system-ui, sans-serif); }
.ml-hero .mk-hero__inner { padding: clamp(40px, 6vw, 88px) 0; }
.ml-hero h1 { line-height: 1.12; }
.ml-hero .mk-eyebrow { margin-bottom: 14px; }
.ml-mock {
  width: min(100%, 420px); background: #fff; border-radius: 6px; padding: 18px 20px 20px; color: #1B2A3D;
  box-shadow: 0 24px 60px rgba(0,0,0,0.38); border-top: 4px solid #FFC72C;
}
.ml-mock__bar { display: flex; gap: 6px; margin-bottom: 12px; }
.ml-mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: #D3D8E0; }
.ml-mock__title { font-weight: 700; color: #0A2A5E; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid #E5E8ED; }
.ml-mock__title small { color: #7A8494; 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: #7A8494; font-size: 0.78rem; }
.ml-avatar { width: 38px; height: 38px; border-radius: 4px; background: #DCE7F7; color: #153F85; font-weight: 700; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; }
.ml-stars { font-weight: 800; color: #0A2A5E; font-size: 0.95rem; }
.ml-stars::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; background: #FFC72C; 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: #7A8494; font-size: 0.78rem; display: block; margin-top: 6px; }
.ml-bar { display: block; height: 8px; background: #E5E8ED; border-radius: 2px; overflow: hidden; }
.ml-bar span { display: block; height: 100%; background: #1D4F9F; }
.ml-strip { background: #fff; border-bottom: 1px solid #E5E8ED; }
.ml-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.ml-strip__inner > div { padding: 22px 20px; border-left: 1px solid #E5E8ED; }
.ml-strip__inner > div:first-child { border-left: 0; }
.ml-strip__inner b { display: block; color: #0A2A5E; font-size: 1.05rem; }
.ml-strip__inner span { color: #7A8494; 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 #E5E8ED; padding: 14px 4px; } .ml-strip__inner > div:first-child { border-top: 0; } }
body.mk-public .mk-grid { margin: 0; }
body.mk-public .mk-card h3 { font-size: 1.1rem; }
body.mk-public .mk-card p { line-height: 1.6; }
body.mk-public .mk-btn { margin: 0; }
body.mk-public .mk-btn:hover { transform: none; }

/* ---------- Auth pages: login, register, reset ---------- */
body.mk-auth {
  background-color: #071B3F;
  background-image:
    radial-gradient(900px 500px at 85% -10%, rgba(143,177,230,0.22), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(47,107,196,0.35), transparent 60%),
    linear-gradient(135deg, #071B3F 0%, #0A2A5E 60%, #153F85 100%);
  background-attachment: fixed;
  background-size: auto;
  background-repeat: no-repeat;
  color: #1B2A3D;
}
body.mk-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.mk-auth .content { max-width: none; margin: 0; background: transparent; border: 0; box-shadow: none; }
body.mk-auth #footer-container { position: relative !important; }

/* White form cards */
body.mk-auth .login-container, body.mk-auth .reset-container, body.mk-auth .form-frame {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid #E5E8ED; border-top: 4px solid #FFC72C; border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
}
body.mk-auth .login-container h2, body.mk-auth .reset-container h2, body.mk-auth .form-frame h2,
body.mk-auth .form-frame h3 { text-shadow: none; color: #0A2A5E; font-weight: 800; letter-spacing: -0.01em; }
body.mk-auth .login-container h2, body.mk-auth .form-frame h2, body.mk-auth .reset-container h2 { font-size: 1.7rem; }
body.mk-auth .form-frame h3 { font-size: 1.1rem; padding-bottom: 8px; border-bottom: 1px solid #E5E8ED; }
body.mk-auth .form-frame .lead, body.mk-auth .reset-container .lead { color: #5B6573; text-shadow: none; }
body.mk-auth .form-group label, body.mk-auth .form-frame label {
  color: #263140; text-shadow: none; font-weight: 600; font-size: 0.85rem;
}
body.mk-auth .checkbox-group label { font-weight: 400; }

/* Inputs */
body.mk-auth .form-group input[type="email"], body.mk-auth .form-group input[type="password"], body.mk-auth .form-group input[type="text"],
body.mk-auth .form-frame input[type="text"], body.mk-auth .form-frame input[type="email"], body.mk-auth .form-frame input[type="password"],
body.mk-auth .form-frame input[type="tel"], body.mk-auth .form-frame input[type="url"], body.mk-auth .form-frame select, body.mk-auth .form-frame textarea,
body.mk-auth .reset-container input {
  background: #fff; color: #1B2A3D; border: 1px solid #D3D8E0; border-radius: 4px; font-weight: 400; font-size: 0.95rem; box-shadow: none;
}
body.mk-auth .form-group input:hover, body.mk-auth .form-frame input:hover, body.mk-auth .form-frame select:hover, body.mk-auth .form-frame textarea:hover {
  background: #fff; border-color: #A9B1BE;
}
body.mk-auth .form-group input:focus, body.mk-auth .form-frame input:focus, body.mk-auth .form-frame select:focus, body.mk-auth .form-frame textarea:focus,
body.mk-auth .reset-container input:focus {
  background: #fff; border-color: #2F6BC4; outline: 0; box-shadow: 0 0 0 3px #DCE7F7;
}
body.mk-auth .form-frame input::placeholder { color: #A9B1BE; }
body.mk-auth .password-toggle, body.mk-auth .password-toggle:hover { color: #7A8494; }

/* Buttons */
body.mk-auth .btn-primary, body.mk-auth .submit-btn, body.mk-auth .add-contact-btn {
  background: #1D4F9F; color: #fff; border-radius: 4px; border: 0; box-shadow: 0 1px 2px rgba(10,42,94,0.2);
}
body.mk-auth .btn-primary:hover, body.mk-auth .submit-btn:hover, body.mk-auth .add-contact-btn:hover { background: #153F85; transform: none; box-shadow: 0 1px 2px rgba(10,42,94,0.2); }
body.mk-auth .add-contact-btn { background: #fff; color: #1D4F9F; border: 1px solid #1D4F9F; box-shadow: none; }
body.mk-auth .add-contact-btn:hover { background: #EEF3FB; color: #153F85; }
body.mk-auth .login-footer a, body.mk-auth .checkbox-group a, body.mk-auth .resend-link { color: #1D4F9F; text-shadow: none; }
body.mk-auth .resend-link.disabled { color: #A9B1BE; }

/* Register extras */
body.mk-auth .contact-person { background: #F7F8FA; border: 1px solid #E5E8ED; border-radius: 4px; backdrop-filter: none; }
body.mk-auth .contact-person .remove-contact { background: #C0392B; border-radius: 4px; }
body.mk-auth .contact-person .remove-contact:hover { background: #A93226; transform: none; }
body.mk-auth .success-panel { background: #E6F6EF; border: 1px solid #BFE7D6; border-radius: 4px; }
body.mk-auth .success-panel h3 { color: #1F7A59; text-shadow: none; border: 0; }
body.mk-auth .success-panel p, body.mk-auth .countdown, body.mk-auth .redirect-message { text-shadow: none; color: #263140; }
body.mk-auth .resend-container { border-top-color: #BFE7D6; }
body.mk-auth .show-validation:invalid { border-color: #C0392B; background: #FBEAE8; }
body.mk-auth .hero-registration { background: transparent; padding: clamp(24px, 4vw, 48px) 2rem 0; }
body.mk-auth .hero-text h1 { text-shadow: none; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.01em; }
body.mk-auth .hero-text h1::after { content: ''; display: block; width: 56px; height: 4px; background: #FFC72C; margin-top: 14px; border-radius: 2px; }
body.mk-auth .hero-text .lead { text-shadow: none; color: #C5D4EE; font-size: 1.05rem; max-width: 62ch; }
body.mk-auth .hero-content-wrapper { max-width: 1100px; }
body.mk-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: 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: #FFC72C; 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: #2E9A74; color: #fff; border-radius: 4px; }
@media (max-width: 992px) { body.mk-auth .hero-image { flex: 0 0 auto; width: 100%; max-width: 420px; } body.mk-auth .hero-text h1::after { margin-left: auto; margin-right: auto; } }
body.mk-auth .registration-section { padding-top: 1.75rem; }
@media (max-width: 640px) { body.mk-auth .login-container, body.mk-auth .reset-container, body.mk-auth .form-frame { padding: 1.4rem; } }

/* ---------- Layout polish ---------- */
body.mk-public h1, body.mk-public h2, body.mk-public h3 { font-weight: 700; }
body.mk-public .mk-title { color: #0A2A5E; font-weight: 800; letter-spacing: -0.01em; }
body.mk-public .mk-section--navy .mk-title { color: #fff; }
body.mk-public .mk-hero h1 { font-weight: 800; }
body.mk-auth { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 0 !important; }
body.mk-auth > .content, body.mk-auth > .registration-section { flex: 1 0 auto; }
body.mk-auth #footer-container { margin-top: auto; min-height: 0; flex: 0 0 auto; display: block; position: relative !important; }
body.mk-auth #header-container, body.mk-auth .hero-registration { flex: 0 0 auto; }
body.mk-auth > .content { min-height: 0; align-items: center; }
body.mk-auth .btn-warning, body.mk-public .btn-warning { background: #FFC72C; border-color: #FFC72C; color: #1B2A3D; font-weight: 700; border-radius: 4px; }
body.mk-auth .btn-warning:hover { background: #FFD23F; border-color: #FFD23F; color: #1B2A3D; }
body.mk-auth .btn-secondary { background: #1D4F9F; border-color: #1D4F9F; border-radius: 4px; }
body.mk-auth .btn-secondary:disabled { background: #A9B1BE; border-color: #A9B1BE; opacity: 1; }
body.mk-auth .btn-outline-secondary { color: #1D4F9F; border-color: #1D4F9F; border-radius: 4px; }
body.mk-auth .btn-outline-secondary:hover { background: #EEF3FB; color: #153F85; }
.site-header .nav-links a { white-space: nowrap; }