/* =============================================================
   HR Health Check — assessment stepper and results
   Loaded only on hr-health-check.php.
   ============================================================= */

:root {
  --strong: #16a34a;
  --strong-soft: rgba(22, 163, 74, 0.1);
  --good: #2563eb;
  --good-soft: rgba(37, 99, 235, 0.1);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.12);
  --critical: #dc2626;
  --critical-soft: rgba(220, 38, 38, 0.09);
}

.assessment-page { background: #fbfcfe; }

/* ---------- Sticky assessment header ---------- */
.assess-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line-soft);
}
.assess-header__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 22rem) 1fr;
  align-items: center;
  gap: 1.5rem;
  height: 4.5rem;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.brand--sm .brand__logo { height: 2.25rem; }

.assess-progress { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.assess-progress__track {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: #e8edf5;
  overflow: hidden;
}
.assess-progress__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--primary), #3b82f6);
  transition: width 0.45s var(--ease-out);
}
.assess-progress__step {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.assess-exit {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-soft);
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, color 0.2s ease;
}
.assess-exit:hover { background: rgba(15, 23, 42, 0.04); color: var(--secondary); }
.assess-exit .icon { width: 16px; height: 16px; }

/* ---------- Step shell ---------- */
.assess-form {
  max-width: 750px;
  margin-inline: auto;
  padding: 2.5rem 1.5rem 8rem;   /* clears the fixed bottom navigation */
}
.assess-step[hidden] { display: none; }

.assess-intro { text-align: center; margin-bottom: 1.5rem; }

.assess-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  margin-bottom: 0.875rem;
  background: var(--good-soft);
  color: var(--primary);
}
.assess-icon .icon { width: 24px; height: 24px; }
.assess-icon--legal { background: var(--critical-soft); color: var(--critical); }
.assess-icon--experience { background: rgba(236, 72, 153, 0.1); color: #db2777; }
.assess-icon--performance { background: var(--strong-soft); color: var(--strong); }
.assess-icon--documentation { background: var(--warn-soft); color: var(--accent-dark); }
.assess-icon--lead { background: var(--warn-soft); color: var(--accent-dark); }

.assess-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.assess-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 0.875rem;
}
.assess-lede {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 34rem;
  margin-inline: auto;
}
/* Carries the section on its own where the heading is visually hidden. */
.assess-lede--lead {
  font-size: 1.25rem;
  color: var(--secondary);
  font-weight: 500;
  max-width: 36rem;
}
.assess-eyebrow { margin-bottom: 0.625rem; }

.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--critical-soft);
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: #b91c1c;
  font-size: 0.8125rem;
  font-weight: 600;
}
.risk-badge .icon { width: 16px; height: 16px; }

/* ---------- Question cards ---------- */
.q-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; }

.q-card {
  background: #f4f6fa;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.q-card:hover { background: #eef2f8; }
.q-card.is-answered {
  background: var(--surface);
  border-color: var(--line-soft);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.q-card.is-missing { border-color: rgba(220, 38, 38, 0.4); background: #fffbfb; }

.q-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.q-card__text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--secondary);
  line-height: 1.45;
}

/* Segmented Yes / No */
.segmented {
  display: inline-flex;
  flex-shrink: 0;
  background: #e6ebf3;
  border-radius: var(--radius-pill);
  padding: 3px;
}
.q-card.is-answered .segmented { background: #eef1f6; }
.segmented__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.segmented__option {
  min-width: 3.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.2s var(--ease-std), color 0.2s var(--ease-std), box-shadow 0.2s ease;
}
.segmented__option:hover { color: var(--secondary); }
.segmented__input:checked + .segmented__option--yes {
  background: var(--strong);
  color: #fff;
  box-shadow: 0 2px 6px -1px rgba(22, 163, 74, 0.45);
}
.segmented__input:checked + .segmented__option--no {
  background: var(--critical);
  color: #fff;
  box-shadow: 0 2px 6px -1px rgba(220, 38, 38, 0.4);
}
.segmented__input:focus-visible + .segmented__option {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- Lead capture ---------- */
.lead-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.lead-card .form-row { margin-bottom: 1.25rem; }
.lead-card .form-row:last-of-type { margin-bottom: 0; }
.lead-card .field + .field { margin-top: 0; }
.lead-card > .field { margin-top: 1.25rem; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
}
.trust-row li { display: inline-flex; align-items: center; gap: 0.4375rem; }
.trust-row .icon { width: 15px; height: 15px; color: var(--text-faint); }

/* ---------- Bottom navigation ---------- */
/* Full-bleed bar so the rule runs the width of the viewport; the controls
   inside sit against the page gutters rather than the 750px form column. */
.assess-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px -12px rgba(15, 23, 42, 0.12);
  padding: 1rem 2.5rem;
}
.assess-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 84rem;
  margin-inline: auto;
}
.assess-nav__right { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.assess-nav__hint { font-size: 0.8125rem; color: var(--text-soft); }
.assess-nav .btn .icon { width: 17px; height: 17px; }
.assess-nav .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* =============================================================
   Results
   ============================================================= */
.results { padding-bottom: 0; }
.result-hero { text-align: center; margin-bottom: 3.5rem; }

.score-ring {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1.75rem;
}
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 14; stroke-linecap: round; }
.score-ring__track { stroke: #e8edf5; }
.score-ring__value {
  stroke: var(--good);
  stroke-dasharray: 553;  /* 2 * pi * r, r = 88 */
  stroke-dashoffset: calc(553 - (553 * var(--score) / 100));
  animation: ringIn 1.1s var(--ease-out) both;
}
@keyframes ringIn { from { stroke-dashoffset: 553; } }

.score-ring--strong .score-ring__value { stroke: var(--strong); }
.score-ring--good .score-ring__value { stroke: var(--good); }
.score-ring--warn .score-ring__value { stroke: var(--warn); }
.score-ring--critical .score-ring__value { stroke: var(--critical); }

.score-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-ring__number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.score-ring__of { font-size: 0.8125rem; color: var(--text-soft); margin-top: 0.25rem; }

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.result-badge .icon { width: 14px; height: 14px; }
.result-badge--strong { background: var(--strong-soft); color: #15803d; }
.result-badge--good { background: var(--good-soft); color: var(--primary-dark); }
.result-badge--warn { background: var(--warn-soft); color: var(--accent-deep); }
.result-badge--critical { background: var(--critical-soft); color: #b91c1c; }

.result-meta { margin-top: 1.25rem; font-size: 0.875rem; color: var(--text-faint); }

/* ---------- Nomination verdict ---------- */
.verdict {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid;
  margin-bottom: 3.5rem;
}
.verdict__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.verdict__icon .icon { width: 22px; height: 22px; }
.verdict__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.verdict__body { font-size: 0.9375rem; line-height: 1.65; color: var(--text-muted); }
.verdict__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.verdict__actions .btn .icon { width: 17px; height: 17px; }

.verdict--pass {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.07), rgba(37, 99, 235, 0.05));
  border-color: rgba(22, 163, 74, 0.28);
}
.verdict--pass .verdict__icon { background: var(--strong-soft); color: var(--strong); }
.verdict--pass .verdict__title { color: #15803d; }

.verdict--hold {
  background: #fffaf5;
  border-color: rgba(245, 158, 11, 0.4);
}
.verdict--hold .verdict__icon { background: var(--warn-soft); color: var(--accent-dark); }
.verdict--hold .verdict__title { color: var(--accent-deep); }

@media (max-width: 639px) {
  .verdict { flex-direction: column; padding: 1.375rem; }
  .verdict__actions .btn { width: 100%; }
}

/* ---------- Breakdown bars ---------- */
.breakdown, .recos { margin-bottom: 3.5rem; }
.breakdown__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  margin-bottom: 1.5rem;
}
.breakdown__list { display: flex; flex-direction: column; gap: 1.25rem; }

.bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.bar__label { font-size: 0.9375rem; font-weight: 600; }
.bar__value { font-size: 0.8125rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.bar__rating {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.6875rem;
}
.bar__track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: #eef1f6;
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: var(--fill);
  border-radius: var(--radius-pill);
  animation: barIn 0.9s var(--ease-out) both;
}
@keyframes barIn { from { width: 0; } }

.bar--strong .bar__fill { background: var(--strong); }
.bar--strong .bar__rating { background: var(--strong-soft); color: #15803d; }
.bar--good .bar__fill { background: var(--good); }
.bar--good .bar__rating { background: var(--good-soft); color: var(--primary-dark); }
.bar--warn .bar__fill { background: var(--warn); }
.bar--warn .bar__rating { background: var(--warn-soft); color: var(--accent-deep); }
.bar--critical .bar__fill { background: var(--critical); }
.bar--critical .bar__rating { background: var(--critical-soft); color: #b91c1c; }

/* ---------- Recommendations ---------- */
.reco {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.375rem 1.5rem;
}
.reco + .reco { margin-top: 1rem; }
.reco__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.reco__pill {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
}
.reco__pill--good { background: var(--good-soft); color: var(--primary-dark); }
.reco__pill--warn { background: var(--warn-soft); color: var(--accent-deep); }
.reco__pill--critical { background: var(--critical-soft); color: #b91c1c; }
.reco__list { font-size: 0.875rem; color: var(--text-muted); }
.reco__list li { position: relative; padding-left: 1.25rem; line-height: 1.6; }
.reco__list li + li { margin-top: 0.375rem; }
.reco__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5625rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- 12-month engagement ---------- */
.engagement {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  margin-bottom: 3.5rem;
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}
/* Coloured cap keyed to the band, so the card reads as part of the result. */
.engagement::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--good);
}
.engagement--strong::before { background: linear-gradient(90deg, var(--strong), #4ade80); }
.engagement--good::before { background: linear-gradient(90deg, var(--good), #60a5fa); }
.engagement--warn::before { background: linear-gradient(90deg, var(--warn), #fbbf24); }
.engagement--critical::before { background: linear-gradient(90deg, var(--critical), #f87171); }

.engagement__eyebrow {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-sm);
  background: var(--good-soft);
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.engagement__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.875rem;
}
.engagement__body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 44rem;
  margin-bottom: 1.75rem;
}

.engagement__list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.engagement__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--secondary);
  line-height: 1.5;
}
.engagement__list .icon {
  width: 20px;
  height: 20px;
  color: var(--strong);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.engagement__actions .btn .icon { width: 18px; height: 18px; }

@media (max-width: 639px) {
  .engagement { padding: 1.5rem; }
  .engagement__actions .btn { width: 100%; }
}

/* ---------- Download report ---------- */
.report-cta {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1d4ed8 145%);
  color: #fff;
  padding: 4rem 0;
  margin-top: 4rem;
}
.report-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  margin-bottom: 0.75rem;
}
.report-cta__lede { color: #cbd5e1; margin-bottom: 1rem; }
.report-cta__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
  color: #e2e8f0;
}
.report-cta__list li { display: flex; align-items: center; gap: 0.5rem; }
.report-cta__list .icon { width: 16px; height: 16px; color: #4ade80; }
.report-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.report-cta__actions .btn .icon { width: 17px; height: 17px; }
.report-cta__actions .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.report-cta__actions .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.report-cta__note { margin-top: 1.25rem; font-size: 0.8125rem; color: #94a3b8; }

/* ---------- Print ---------- */
.print-only { display: none; }

@media print {
  @page { margin: 16mm; }

  .site-header, .site-footer, .scroll-progress, .report-cta, .assess-nav { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .print-only { display: block; margin-top: 2rem; }
  .print-only h2 {
    font-size: 14pt;
    margin: 1.5rem 0 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #cbd5e1;
    break-before: auto;
  }
  .print-only h3 { font-size: 11pt; margin: 0.75rem 0 0.25rem; }
  .print-only li { margin-left: 1.25rem; list-style: disc; }
  .breakdown, .recos, .reco, .verdict, .engagement { break-inside: avoid; }
  /* Keep the engagement plan in the printed report, drop the buttons. */
  .verdict__actions, .engagement__actions { display: none; }
  .engagement { box-shadow: none; border: 1px solid #cbd5e1; }
  .score-ring__value, .bar__fill { animation: none !important; }
  .bar__track { border: 1px solid #cbd5e1; }
  a[href]::after { content: ""; }
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .assess-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    height: 4rem;
    padding-inline: 1rem;
  }
  .brand--sm .brand__logo { height: 1.875rem; }
  .assess-exit span { display: none; }

  .assess-form { padding: 2.5rem 1.25rem 7.5rem; }

  .q-card { flex-direction: column; align-items: stretch; gap: 0.875rem; }
  .segmented { align-self: stretch; }
  .segmented__option { flex: 1; }

  .assess-nav { padding: 0.875rem 1.25rem calc(0.875rem + env(safe-area-inset-bottom)); }
  .assess-nav__hint { display: none; }
  .assess-nav .btn { padding-inline: 1.25rem; }

  .report-cta__list { grid-template-columns: minmax(0, 1fr); }
  .report-cta__actions .btn { width: 100%; }
}