/**
 * auth-recover.css — Reset Password + Remind Username pages
 * .pen nodes: Reset ABcGF(L) y9skE(D) UokmU(M) · Remind MXrfZ(L) vYK4g(D) w4Daj(M)
 * Loaded via com_users override's WebAssetManager registerAndUseStyle (per P69 rule).
 * Dark rules scoped to html.t4-dark — NOT in shared darkmode.css (race avoidance).
 * !important used on same-spec overrides per P69 (auth-recover.css bundles BEFORE
 * template.css in T4 optimize → must pin to win cascade).
 */

/* ────────────────────────────────────────────────────────────────────────────
   1. AUTH SECTION (centered-card zone + help band wrapper)
   ──────────────────────────────────────────────────────────────────────────── */

.voy-auth-recover-section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--voy-bg) !important;       /* #FAF6F0 light */
  padding: 96px 48px !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   2. AUTH CARD (.pen: 460px w, r22, p40, gap20, stroke #E5DCD0)
   ──────────────────────────────────────────────────────────────────────────── */

.voy-auth-recover-card {
  width: 460px;
  max-width: 100%;
  background: #FFFFFF !important;
  border-radius: 22px !important;
  padding: 40px !important;
  gap: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid #E5DCD0 !important;
  box-shadow: none !important;
}

/* ── Icon chip (56×56 circle, #F2EBE1 bg, icon = primary) ────────────────── */
.voy-auth-recover-chip {
  width: 56px !important;
  height: 56px !important;
  border-radius: 9999px !important;
  background-color: #F2EBE1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  align-self: center;
}

.voy-auth-recover-chip svg {
  width: 26px !important;
  height: 26px !important;
  color: var(--voy-primary) !important;  /* #C2562F */
  stroke: currentColor !important;
}

/* ── Head block (title + subtitle) ────────────────────────────────────────── */
.voy-auth-recover-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px !important;
}

.voy-auth-recover-title {
  font-family: var(--voy-font-head) !important;  /* Playfair Display */
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--voy-heading) !important;           /* #1A1512 */
  line-height: 1.2 !important;
  text-align: center !important;
  margin: 0 !important;
}

.voy-auth-recover-sub {
  font-family: var(--voy-font-body) !important;   /* Inter */
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--voy-muted) !important;             /* #8A7E72 */
  line-height: 1.55 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ── Field group (label + input) ────────────────────────────────────────── */
.voy-auth-recover-field {
  display: flex;
  flex-direction: column;
  gap: 7px !important;
  width: 100% !important;
}

.voy-auth-recover-label {
  font-family: var(--voy-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--voy-text) !important;              /* #2B2420 */
  display: block !important;
  margin: 0 !important;
}

/* Force required star hidden (design shows clean label only) */
.voy-auth-recover-label .star {
  display: none !important;
}

/* Joomla client validation injects <span.form-control-feedback> INSIDE the label
   ("Please fill in this field") with no styling → it glues to the label text and
   the label gets class .invalid. The .pen has no inline message; render it as a
   proper small danger message BELOW the label so it never concatenates. Scoped to
   the shared auth-recover card class so it covers BOTH Reset and Remind (the only
   two pages using these classes) — generalized per the orchestrator OPEN item. */
.voy-auth-recover-label .form-control-feedback {
  display: block !important;
  margin-top: 6px !important;
  font-family: var(--voy-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #C2562F !important;            /* danger = primary terracotta */
}

/* Don't let the .invalid label class recolor the whole label text */
.voy-auth-recover-label.invalid {
  color: var(--voy-text) !important;
}

.voy-auth-recover-input {
  width: 100% !important;
  max-width: none !important;
  background-color: var(--voy-bg) !important;     /* #FAF6F0 */
  border: 1px solid var(--voy-border) !important; /* #E5DCD0 */
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-family: var(--voy-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--voy-text) !important;
  box-shadow: none !important;
  transition: border-color .15s ease !important;
}

.voy-auth-recover-input::placeholder {
  color: var(--voy-muted) !important;
  opacity: 1 !important;
}

/* Focus ring — primary border + soft ring (P36.4 spec; !important beats BS + validated states) */
.voy-auth-recover-input:focus,
.voy-auth-recover-input.is-valid:focus,
.voy-auth-recover-input.is-invalid:focus {
  border-color: var(--voy-primary) !important;
  box-shadow: 0 0 0 3px rgba(194, 86, 47, .18) !important;
  outline: none !important;
  background-color: var(--voy-bg) !important;
}

/* ── Submit button (full-width r9999, primary fill, Inter 15/600 white) ───── */
.voy-auth-recover-btn {
  width: 100% !important;
  border-radius: 9999px !important;
  background-color: var(--voy-primary) !important;  /* #C2562F */
  border: none !important;
  padding: 14px !important;
  font-family: var(--voy-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color .15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.voy-auth-recover-btn:hover,
.voy-auth-recover-btn:focus {
  background-color: #A6451F !important;     /* darker terracotta hover */
  color: #FFFFFF !important;
}

/* ── Back link (arrow-left + "Back to sign in", centered, primary color) ─── */
.voy-auth-recover-back {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: var(--voy-primary) !important;   /* #C2562F */
}

.voy-auth-recover-back:hover,
.voy-auth-recover-back:focus {
  color: #A6451F !important;
  text-decoration: none !important;
}

.voy-auth-recover-back svg {
  width: 15px !important;
  height: 15px !important;
  color: inherit !important;
  stroke: currentColor !important;
  flex-shrink: 0;
}

.voy-auth-recover-back-text {
  font-family: var(--voy-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: inherit !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   3. HELP BAND (.pen: #F2EBE1 bg, padding 72/48, "Still locked out?" heading,
      3-col grid gap 24; each card = Feature card reuse wwueo)
   ──────────────────────────────────────────────────────────────────────────── */

.voy-auth-recover-help {
  background-color: var(--voy-elevated) !important;  /* #F2EBE1 */
  padding: 72px 48px !important;
  width: 100% !important;
}

.voy-auth-recover-help-inner {
  max-width: 1140px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 32px !important;
}

.voy-auth-recover-help-title {
  font-family: var(--voy-font-head) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--voy-heading) !important;    /* #1A1512 */
  margin: 0 !important;
  text-align: center !important;
}

.voy-auth-recover-help-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Help card (matches feature card wwueo: white bg, r22, p26, border) */
.voy-auth-recover-help-card {
  background: #FFFFFF !important;
  border-radius: 22px !important;
  padding: 26px !important;
  border: 1px solid var(--voy-border) !important;  /* #E5DCD0 */
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.voy-auth-recover-help-card-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background-color: var(--voy-elevated) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

.voy-auth-recover-help-card-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--voy-primary) !important;
  stroke: currentColor !important;
}

.voy-auth-recover-help-card-title {
  font-family: var(--voy-font-head) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--voy-heading) !important;
  margin: 0 !important;
}

.voy-auth-recover-help-card-body {
  font-family: var(--voy-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--voy-muted) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   4. MOBILE (≤767px) — card fills width, reduced padding
   .pen UokmU / w4Daj: card padding 28, gap 18, section 48/20, title 24px,
   help 40/20, help-title 22px, help grid stacks to 1-col gap 16
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .voy-auth-recover-section {
    padding: 48px 20px !important;
  }

  .voy-auth-recover-card {
    width: 100% !important;
    padding: 28px !important;
    gap: 18px;
  }

  .voy-auth-recover-title {
    font-size: 24px !important;
  }

  .voy-auth-recover-help {
    padding: 40px 20px !important;
  }

  .voy-auth-recover-help-title {
    font-size: 22px !important;
  }

  .voy-auth-recover-help-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .voy-auth-recover-btn {
    padding: 13px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   5. DARK MODE — scoped to html.t4-dark (NOT in shared darkmode.css)
   Palette: card #211B16, stroke #352C24, title #FBF6EF, sub #9C9085,
   label #E8DFD4, input bg #15110E, btn #D86A3F, back #D86A3F,
   help bg #1C1712, help-title #FBF6EF, help-card #211B16 border #352C24
   ──────────────────────────────────────────────────────────────────────────── */

html.t4-dark .voy-auth-recover-section {
  background-color: var(--voy-bg) !important;     /* dark: #15110E */
}

html.t4-dark .voy-auth-recover-card {
  background: #211B16 !important;
  border-color: #352C24 !important;
}

html.t4-dark .voy-auth-recover-chip {
  background-color: #1C1712 !important;
}

html.t4-dark .voy-auth-recover-chip svg {
  color: var(--voy-primary) !important;           /* dark: #D86A3F */
}

html.t4-dark .voy-auth-recover-title {
  color: #FBF6EF !important;
}

html.t4-dark .voy-auth-recover-sub {
  color: #9C9085 !important;
}

html.t4-dark .voy-auth-recover-label {
  color: #E8DFD4 !important;
}

html.t4-dark .voy-auth-recover-label .form-control-feedback {
  color: #D86A3F !important;             /* danger = dark primary terracotta */
}

html.t4-dark .voy-auth-recover-label.invalid {
  color: #E8DFD4 !important;
}

/* [DARK-SPECIFICITY-FIX] darkmode.css has html.t4-dark .form-control { bg: var(--voy-surface) !important }
   which is (0,2,1) — same specificity, but darkmode.css loads AFTER auth-recover.css so it wins.
   Adding .voy-auth-recover-card parent bumps us to (0,3,1) to guarantee we win regardless of load order. */
html.t4-dark .voy-auth-recover-card .voy-auth-recover-input,
html.t4-dark .voy-auth-recover-input {
  background-color: #15110E !important;
  border-color: #352C24 !important;
  color: var(--voy-text) !important;              /* dark: #E8DFD4 */
}

html.t4-dark .voy-auth-recover-card .voy-auth-recover-input::placeholder,
html.t4-dark .voy-auth-recover-input::placeholder {
  color: #9C9085 !important;
}

html.t4-dark .voy-auth-recover-card .voy-auth-recover-input:focus,
html.t4-dark .voy-auth-recover-input:focus,
html.t4-dark .voy-auth-recover-input.is-valid:focus,
html.t4-dark .voy-auth-recover-input.is-invalid:focus {
  border-color: var(--voy-primary) !important;    /* dark: #D86A3F */
  box-shadow: 0 0 0 3px rgba(216, 106, 63, .22) !important;
  background-color: #15110E !important;
}

html.t4-dark .voy-auth-recover-btn {
  background-color: #D86A3F !important;
}

html.t4-dark .voy-auth-recover-btn:hover,
html.t4-dark .voy-auth-recover-btn:focus {
  background-color: #C2562F !important;
}

html.t4-dark .voy-auth-recover-back {
  color: #D86A3F !important;
}

html.t4-dark .voy-auth-recover-back:hover {
  color: #C2562F !important;
}

html.t4-dark .voy-auth-recover-help {
  background-color: #1C1712 !important;
}

html.t4-dark .voy-auth-recover-help-title {
  color: #FBF6EF !important;
}

html.t4-dark .voy-auth-recover-help-card {
  background: #211B16 !important;
  border-color: #352C24 !important;
}

html.t4-dark .voy-auth-recover-help-card-icon {
  background-color: #1C1712 !important;
}

html.t4-dark .voy-auth-recover-help-card-icon svg {
  color: #D86A3F !important;
}

html.t4-dark .voy-auth-recover-help-card-title {
  color: #FBF6EF !important;
}

html.t4-dark .voy-auth-recover-help-card-body {
  color: #9C9085 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   6. LAYOUT BREAKOUT — suppress T4 masthead + escape the T4 col container
   (body.item-264 = Reset, body.item-265 = Remind)
   .pen shows NO masthead band; card/help must be full-viewport-width (P29 trick)
   ──────────────────────────────────────────────────────────────────────────── */

/* Hide the T4 masthead band injected by layout JSON for these pages */
body.item-264 #t4-masthead,
body.item-265 #t4-masthead,
body.item-264 .t4-masthead,
body.item-265 .t4-masthead {
  display: none !important;
}

/* Hide breadcrumbs on auth-recover pages — .pen shows no breadcrumb trail */
body.item-264 .t4-breadcrumbs,
body.item-265 .t4-breadcrumbs,
body.item-264 #t4-breadcrumbs,
body.item-265 #t4-breadcrumbs {
  display: none !important;
}

/* Remove T4 sticky-header padding-top that leaves a gap when masthead is hidden (P58) */
body.item-264 .t4-main-body,
body.item-265 .t4-main-body {
  padding-top: 0 !important;
}

/* Break our full-width sections out of the T4 .t4-col > .container box (P29 vw trick).
   The T4 col is 1140px wide starting at x≈150. We negative-margin back to the viewport edge. */
body.item-264 .voy-auth-recover-section,
body.item-265 .voy-auth-recover-section,
body.item-264 .voy-auth-recover-help,
body.item-265 .voy-auth-recover-help {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   7. SUPPRESS T4 / Joomla default form chrome that we're replacing
   (the override wraps the form; hide old control-group / .well / page-header)
   ──────────────────────────────────────────────────────────────────────────── */

/* Remove base .well background/border injected by core form wrapper */
.voy-auth-recover-card .com-users-reset__form,
.voy-auth-recover-card .com-users-remind__form {
  display: contents !important;  /* make form a passthrough container */
}

/* Prevent layout break from T4's .form-horizontal fieldset padding */
.voy-auth-recover-card fieldset {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  min-width: 0 !important;
  display: contents !important;
}

/* Hide default fieldset legend (replaced by our .voy-auth-recover-head) */
.voy-auth-recover-card legend {
  display: none !important;
}

/* Hide default .control-group row wrapper; we emit our own .voy-auth-recover-field */
.voy-auth-recover-card .control-group {
  display: none !important;
}

/* But keep the hidden CSRF / task / form-token fields emitted by renderControlFields() */
.voy-auth-recover-card input[type="hidden"] {
  display: none !important;
}