/* ==========================================================================
   ASSK Login + Register — Ultimate Member card + promo-panel skin
   Direction: Modern Civic Blue (see active DESIGN.md, slug assk-modern-civic-blue)
   Scoped entirely to body.assk-auth-page so it never leaks elsewhere.
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jakarta-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jakarta-500.ttf') format('truetype');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/jakarta-600.ttf') format('truetype');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/jakarta-700.ttf') format('truetype');
}

body.assk-auth-page {
  --auth-bg: #F5F7FA;
  --auth-surface: #FFFFFF;
  --auth-ink: #10151C;
  --auth-accent: #1D4ED8;
  --auth-accent-dark: #1531A6;
  --auth-accent-light: #DCE6FB;
  --auth-support: #64748B;
  --auth-danger: #B3261E;
  --auth-radius: 10px;
  --auth-radius-lg: 20px;
  --auth-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Page chrome ---- */

/* body.assk-auth-page #content.site-content {
  background:
    radial-gradient(circle at 12% 0%, rgba(29, 78, 216, 0.08), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(29, 78, 216, 0.06), transparent 50%),
    linear-gradient(160deg, #F8FAFD 0%, var(--auth-bg) 100%);
  padding: 0;
} */

body.assk-auth-page .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

body.assk-auth-page #primary.content-area {
  width: 100%;
  float: none;
  margin: 0;
}

body.assk-auth-page main#main.site-main {
  padding: 0;
}

body.assk-auth-page article.ast-article-single {
  max-width: none;
  width: 100%;
}

body.assk-auth-page .entry-header {
  display: none;
}

body.assk-auth-page .entry-content.clear {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* ---- The shell: bounded two-column grid on the plain page ground ---- */

body.assk-auth-page .assk-auth-shell {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  min-height: 86vh;
  padding: 64px 24px;
}

/* ---- Form card ---- */

body.assk-auth-page .assk-auth-form-panel {
  background: var(--auth-surface);
  border-radius: var(--auth-radius-lg);
  box-shadow:
    0 24px 50px -24px rgba(16, 21, 28, 0.16),
    0 2px 10px rgba(16, 21, 28, 0.04);
  padding: 25px;
  width: 100%;
}

body.assk-auth-page .assk-auth-form-panel .um {
  width: 100%;
}

body.assk-auth-page .assk-auth-form-head {
  margin: 0 0 20px;
  text-align: left;
}

body.assk-auth-page .assk-auth-form-title {
  font-family: var(--auth-font);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  color: var(--auth-ink);
  margin: 0 0 6px;
}

body.assk-auth-page .assk-auth-form-sub {
  font-family: var(--auth-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--auth-support);
  margin: 0;
}

/* ---- Promo panel ---- */

body.assk-auth-page .assk-auth-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body.assk-auth-page .assk-auth-badge {
  display: inline-block;
  background: var(--auth-accent-light);
  color: var(--auth-accent-dark);
  font-family: var(--auth-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

body.assk-auth-page .assk-auth-promo-headline {
  font-family: var(--auth-font);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.15;
  color: var(--auth-ink);
  margin: 0 0 16px;
}

body.assk-auth-page .assk-auth-promo-headline .accent {
  display: block;
  color: var(--auth-accent);
}

body.assk-auth-page .assk-auth-promo-copy {
  font-family: var(--auth-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--auth-support);
  margin: 0 0 28px;
  max-width: 46ch;
}

body.assk-auth-page .assk-auth-feature-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--auth-surface);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow:
    0 14px 34px -22px rgba(16, 21, 28, 0.18),
    0 1px 4px rgba(16, 21, 28, 0.04);
  margin-bottom: 28px;
  max-width: 420px;
}

body.assk-auth-page .assk-auth-feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--auth-accent-light);
  color: var(--auth-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.assk-auth-page .assk-auth-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.assk-auth-page .assk-auth-feature-title {
  font-family: var(--auth-font);
  font-weight: 700;
  font-size: 14px;
  color: var(--auth-ink);
}

body.assk-auth-page .assk-auth-feature-sub {
  font-family: var(--auth-font);
  font-size: 13px;
  color: var(--auth-support);
}

body.assk-auth-page .assk-auth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: var(--auth-radius);
  border: 1.5px solid var(--auth-accent);
  color: var(--auth-accent);
  font-family: var(--auth-font);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  background: transparent;
  transition: background-color 0.15s ease;
}

body.assk-auth-page .assk-auth-cta:hover {
  background: var(--auth-accent-light);
}

body.assk-auth-page .assk-auth-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.28);
}

/* ---- Fields ---- */

body.assk-auth-page .um-row {
  margin: 0 !important;
}

body.assk-auth-page .um-col-1 {
  display: flex;
  flex-direction: column;
}

body.assk-auth-page .um-field {
  margin-bottom: 14px;
}

/* Register card: pair Username on its own row, First/Last Name side by side,
   E-mail on its own row, Password/Confirm side by side -- cuts 6 stacked
   rows down to 4 so the card isn't so tall. */
body.assk-register-page .assk-auth-form-panel .um-col-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
}

body.assk-register-page .assk-auth-form-panel .um-col-1>.um-field:nth-child(1),
body.assk-register-page .assk-auth-form-panel .um-col-1>.um-field:nth-child(4) {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  body.assk-register-page .assk-auth-form-panel .um-col-1 {
    grid-template-columns: 1fr;
  }

  body.assk-register-page .assk-auth-form-panel .um-col-1>.um-field {
    grid-column: 1 / -1;
  }
}

body.assk-auth-page .um-field-label {
  margin-bottom: 6px;
}

body.assk-auth-page .um-field-label label {
  font-family: var(--auth-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--auth-support);
}

body.assk-auth-page input.um-form-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(16, 21, 28, 0.14);
  border-radius: var(--auth-radius);
  padding: 12px 14px;
  font-family: var(--auth-font);
  font-size: 14px;
  color: var(--auth-ink);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.assk-auth-page input.um-form-field::placeholder {
  color: var(--auth-support);
  opacity: 0.7;
}

body.assk-auth-page input.um-form-field:focus {
  outline: none;
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* Honeypot */
body.assk-auth-page .um_request_name {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  left: -9999px !important;
  margin: 0 !important;
}

/* ---- Remember me checkbox (login only) ---- */

body.assk-auth-page .um-field-c {
  margin: 4px 0 4px;
}

body.assk-auth-page .um-field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--auth-font);
  font-size: 13px;
  color: var(--auth-support);
}

body.assk-auth-page .um-field-checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 16px;
  height: 16px;
  margin: 0;
}

body.assk-auth-page .um-field-checkbox-state {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid rgba(16, 21, 28, 0.22);
  border-radius: 5px;
  background: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.assk-auth-page .um-field-checkbox-state i {
  display: none;
}

body.assk-auth-page .um-field-checkbox input:checked+.um-field-checkbox-state {
  background: var(--auth-accent);
  border-color: var(--auth-accent);
}

body.assk-auth-page .um-field-checkbox input:checked+.um-field-checkbox-state::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.assk-auth-page .um-field-checkbox input:focus-visible+.um-field-checkbox-state {
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);
}

/* ---- Row: checkbox left / forgot-password link right (login only) ---- */

body.assk-auth-page .um-field-c {
  display: inline-block;
}

body.assk-auth-page .um-col-alt>.um-field-c,
body.assk-auth-page .um-col-alt {
  position: relative;
}

/* ---- Buttons ---- */

body.assk-auth-page .um-col-alt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

body.assk-auth-page .um-left.um-half,
body.assk-auth-page .um-right.um-half {
  width: 100%;
  float: none;
  margin: 0;
}

body.assk-auth-page .um-clear {
  display: none;
}

body.assk-auth-page #um-submit-btn.um-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--auth-accent);
  color: #fff;
  border: none;
  border-radius: var(--auth-radius);
  padding: 13px 20px;
  font-family: var(--auth-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.08s ease;
}

body.assk-auth-page #um-submit-btn.um-button:hover {
  background: var(--auth-accent-dark);
}

body.assk-auth-page #um-submit-btn.um-button:active {
  transform: translateY(1px);
}

body.assk-auth-page #um-submit-btn.um-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.28);
}

body.assk-auth-page .um-button.um-alt {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: transparent;
  color: var(--auth-accent);
  border: 1.5px solid rgba(29, 78, 216, 0.35);
  border-radius: var(--auth-radius);
  padding: 11.5px 20px;
  font-family: var(--auth-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.assk-auth-page .um-button.um-alt:hover {
  background: rgba(29, 78, 216, 0.06);
  border-color: var(--auth-accent);
}

/* Login card: drop the secondary Register button -- the promo panel's
   "Start New Application" CTA already covers that path. */
body.assk-login-page .um-right.um-half {
  display: none;
}

/* Register card: drop the secondary Login button -- the promo panel's
   "Sign In to Portal" CTA already covers that path. */
body.assk-register-page .um-right.um-half {
  display: none;
}

/* Register card: tighter padding than Login's -- the 6-field form needs
   the extra room more than the breathing space does. */
body.assk-register-page .assk-auth-form-panel {
  padding: 25px;
}

/* ---- Forgot password link ---- */

body.assk-auth-page .um-col-alt-b {
  text-align: center;
  margin-top: 16px;
}

body.assk-auth-page .um-link-alt {
  font-family: var(--auth-font);
  font-size: 13px;
  color: var(--auth-support);
  text-decoration: none;
}

body.assk-auth-page .um-link-alt:hover,
body.assk-auth-page .um-link-alt:focus-visible {
  color: var(--auth-accent);
  text-decoration: underline;
}

/* ---- Validation state ---- */

body.assk-auth-page .um-field.um-error input.um-form-field,
body.assk-auth-page input.um-form-field.invalid {
  border-color: var(--auth-danger);
}

body.assk-auth-page .um-error-msg,
body.assk-auth-page .um-notice {
  font-family: var(--auth-font);
  font-size: 13px;
  color: var(--auth-danger);
}

/* ---- Motion ---- */

@media (prefers-reduced-motion: reduce) {
  body.assk-auth-page * {
    transition: none !important;
  }
}

/* ---- Collapse: promo column hides entirely below ~900px ---- */

@media (max-width: 900px) {
  body.assk-auth-page .assk-auth-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 40px 20px;
  }

  body.assk-auth-page .assk-auth-promo {
    /* display: none; */
  }

  body.assk-auth-page .assk-auth-form-panel {
    max-width: 440px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  body.assk-auth-page .assk-auth-shell {
    padding: 28px 14px;
  }

  body.assk-auth-page .assk-auth-form-panel {
    padding: 28px 22px;
  }

  body.assk-auth-page .assk-auth-form-title {
    font-size: 22px;
  }
}