/* =========================================================================
   remind.css — page-scoped overlay for com_users REMIND (view=remind).
   Matches the established Login/Register auth pattern (login.css/register.css).
   Loaded render-last via addCustomTag in html/com_users/remind/default.php;
   scoped under body.view-remind + !important to beat the P69 bundle-order trap.
   .pen: A5fii(dark) · T3aEeO(light) · Ctrzv(mobile). OVERLAY ONLY — no scss touched.
   ========================================================================= */

/* R-HEAD — show the card title "Recover username" (.pen CardTitle Geist 700 22px).
   The shared scss hides body.view-remind .auth-head; the .pen card DOES have a title,
   so restore it. The masthead carries the full "Forgot your username?" H1. */
body.view-remind .auth-head { display: block !important; }
body.view-remind .auth-title {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--color-heading) !important;
  margin: 0 !important;
}

/* R-H1 — desktop masthead H1 = 38px (.pen A5fii/T3aEeO Geist 700 38px). The shared
   scss body.com_users .t4-masthead-title forces 40px !important → beat it. */
body.view-remind .t4-masthead-title { font-size: 38px !important; }

/* R-EYEBROW — desktop eyebrow "REMINDER" = ACCENT (.pen mobile Ctrzv $accent). */
body.view-remind .masthead-eyebrow {
  color: var(--color-primary) !important;
}

/* R-FOOT — any auth-foot text = $text-dim (mirrors login/register). */
body.view-remind .auth-foot { color: var(--color-text-dim) !important; }

/* R-STAR — hide the required `.star` asterisk (.pen "Email" label carries none). */
body.view-remind .auth-card .control-label .star,
body.view-remind .auth-card label .star { display: none !important; }

/* R-PLACEHOLDER — placeholder = .pen field hint $text-dim, matching login/register. */
body.view-remind .auth-card input.form-control::placeholder,
body.view-remind .form-control::placeholder {
  color: var(--color-text-dim) !important;
  opacity: 1 !important;
}

/* R-BORDER — dark AuthCard border: BS .card forces --color-border (#262945);
   .pen dark stroke = #1C1E38 (border-soft). Light already #ECEEF5. */
html[data-bs-theme="dark"] body.view-remind .auth-card,
html[data-bs-theme="dark"] body.view-remind .auth-card.card {
  border-color: var(--color-border-soft) !important;
}

/* R-BACK — back-link arrow alignment + fw600 accent (.pen Back Inter 13.5/600). */
body.view-remind .auth-link-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
}

/* R-ICO — help-band icon tiles: .pen Ico = 38×38 rounded-square (r10) $bg-card-2.
   Override the nth-child(3n+2) scss that recolours tile 2 (#1a1c36). */
body.view-remind .sec-feature-grid .feature-ico {
  background: var(--color-card-2) !important;
}

/* R-BTN — Primary submit: FLAT #3B82F6 (Geist 15/600), no hover shift.
   Scoped to the auth card. Mirrors login L8 / register REG14. */
body.view-remind .auth-card .btn.btn-primary,
body.view-remind .auth-card button[type="submit"].btn-primary {
  background: var(--color-primary) !important;
  background-image: none !important;
  border-color: var(--color-primary) !important;
  font-family: var(--font-heading) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.view-remind .auth-card .btn.btn-primary:hover,
body.view-remind .auth-card button[type="submit"].btn-primary:hover {
  background: var(--color-primary-hover) !important;
  background-image: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* R-WIDTH — [FIELD-WIDTH-COLLAPSE] un-cap the 240px .form-control default so the
   input fills the 460px card. Mirrors register REG9. */
body.view-remind .auth-card .auth-form,
body.view-remind .auth-card form.auth-form,
body.view-remind .auth-card .com-users-remind__form {
  width: 100% !important;
  max-width: none !important;
}
body.view-remind .auth-card .control-group,
body.view-remind .auth-card .controls,
body.view-remind .auth-card fieldset { width: 100% !important; max-width: none !important; }
body.view-remind .auth-card input.form-control,
body.view-remind .auth-card .auth-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]) {
  width: 100% !important;
  max-width: none !important;
}

/* R-BAND — Help band top hairline (.pen 1px border-soft). */
body.view-remind .sec-feature-grid {
  border-top: 1px solid var(--color-border-soft) !important;
}

/* =========================================================================
   MOBILE (≤767.98) — .pen Ctrzv deltas. ONE complete ≤767.98 block.
   ========================================================================= */
@media (max-width: 767.98px) {
  /* mobile eyebrow ACCENT 11.5/1.5 (.pen Ctrzv) */
  body.view-remind .masthead-eyebrow {
    color: var(--color-primary) !important;
    font-size: 11.5px !important;
    letter-spacing: 1.5px !important;
  }
  /* mobile H1 = 28px (.pen Ctrzv) */
  body.view-remind .t4-masthead-title {
    font-size: 28px !important;
    letter-spacing: -1px !important;
  }
  /* mobile sub 14.5px (.pen Ctrzv) */
  body.view-remind .masthead-sub { font-size: 14.5px !important; }
  /* LIGHT mobile card: elevated grey surface (#EEF1F8) visible on white page bg. */
  body.view-remind .auth-card,
  body.view-remind .auth-card.card {
    background: var(--color-surface-2) !important;
    border-color: var(--color-border) !important;
  }
  /* DARK mobile card: .pen Ctrzv = #13142A ($bg-card = --color-surface). */
  html[data-bs-theme="dark"] body.view-remind .auth-card,
  html[data-bs-theme="dark"] body.view-remind .auth-card.card {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
  }
  /* mobile inputs: .pen Ctrzv fill #101023 ($bg-elev), pad[13,14]. */
  body.view-remind .auth-card input.form-control,
  body.view-remind .auth-card .auth-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
    background: var(--color-bg-alt) !important;
    padding: 13px 14px !important;
  }
  /* mobile back link: .pen Ctrzv = plain, $text-dim 13/normal, centered. */
  body.view-remind .auth-link-back {
    color: var(--color-text-dim) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    justify-content: center !important;
    width: 100% !important;
  }
  /* Help band dropped on mobile (.pen Ctrzv omits it). */
  body.view-remind .sec-feature-grid { display: none !important; }
}