/*
 * Spire Alliance Health Check
 * Everything is scoped under .spire-hc so it cannot collide with the theme.
 */

.spire-hc{
  --shc-navy:#0F0B3C;
  --shc-crimson:#D13148;
  --shc-crimson-deep:#A8253A;
  --shc-limestone:#EEF0F6;
  --shc-paper:#FFFFFF;
  --shc-ink:#16143A;
  --shc-slate:#5C6180;
  --shc-line:#D9DCE8;
  --shc-line-soft:#E9EBF3;
  --shc-ok:#1F7A5C;
  --shc-sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --shc-serif:'Cormorant Garamond','Times New Roman',serif;
  --shc-radius:14px;
  --shc-offset:0px;

  font-family:var(--shc-sans);
  font-size:16px;
  line-height:1.55;
  color:var(--shc-ink);
  text-align:left;
}
.spire-hc *,
.spire-hc *::before,
.spire-hc *::after{box-sizing:border-box}
.spire-hc p{margin:0}
.spire-hc h3,.spire-hc h4{margin:0; font-family:var(--shc-sans); color:var(--shc-ink)}
.spire-hc button{font:inherit}
.spire-hc [hidden]{display:none !important}

.spire-hc .shc-eyebrow{
  font-family:var(--shc-serif); font-weight:600;
  text-transform:uppercase; letter-spacing:.34em;
  font-size:13px; line-height:1.4; margin:0; color:var(--shc-crimson);
}

/* ---------- hero ---------- */
.spire-hc .shc-hero{
  background:var(--shc-navy); color:#fff; border-radius:var(--shc-radius) var(--shc-radius) 0 0;
  padding:clamp(30px,5vw,48px); position:relative; overflow:hidden;
}
.spire-hc .shc-hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:4px; background:var(--shc-crimson);
}
.spire-hc .shc-title{
  font-weight:700; font-size:clamp(27px,4.6vw,42px); line-height:1.07;
  letter-spacing:-.022em; margin:14px 0 0; max-width:17ch; color:#fff;
}
.spire-hc .shc-lead{
  margin:18px 0 0; max-width:54ch; color:#C9CBE0; font-size:clamp(15px,2vw,17px);
}
.spire-hc .shc-meta{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 20px;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:#8E92B4; font-weight:600;
}

/* ---------- progress rail ---------- */
.spire-hc .shc-rail{
  position:sticky; top:var(--shc-offset); z-index:20;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--shc-line);
}
.spire-hc .shc-rail-in{display:flex; align-items:center; gap:14px; padding:9px 4px}
.spire-hc .shc-rail-in svg{width:22px; height:27px; flex:none}
.spire-hc .shc-count{font-size:13px; font-weight:600; color:var(--shc-slate); white-space:nowrap}
.spire-hc .shc-count b{color:var(--shc-navy)}
.spire-hc .shc-track{flex:1; height:5px; border-radius:99px; background:var(--shc-line-soft); overflow:hidden}
.spire-hc .shc-fill{display:block; height:100%; width:0; border-radius:99px; background:var(--shc-crimson); transition:width .3s ease}

/* ---------- cards ---------- */
.spire-hc .shc-card{
  background:var(--shc-paper); border:1px solid var(--shc-line-soft); border-radius:var(--shc-radius);
  padding:clamp(20px,4vw,30px); box-shadow:0 12px 30px -26px rgba(15,11,60,.55); margin-top:16px;
}
.spire-hc .shc-card-head{margin-bottom:18px}
.spire-hc .shc-card-head h3{font-size:clamp(19px,3vw,23px); font-weight:700; letter-spacing:-.015em; margin:8px 0 0}
.spire-hc .shc-sub{margin:6px 0 0; color:var(--shc-slate); font-size:14.5px}

/* ---------- fields ---------- */
.spire-hc .shc-fields{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.spire-hc .shc-field{display:flex; flex-direction:column; gap:6px}
.spire-hc .shc-wide{grid-column:1 / -1}
.spire-hc .shc-field label{
  font-size:12.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--shc-slate);
}
.spire-hc .shc-req{color:var(--shc-crimson)}
.spire-hc .shc-opt{color:var(--shc-slate); font-weight:500; text-transform:none; letter-spacing:0}
.spire-hc .shc-field input{
  font:inherit; font-size:16px; color:var(--shc-ink); background:#fff;
  border:1.5px solid var(--shc-line); border-radius:9px; padding:12px 13px; width:100%;
  transition:border-color .15s, box-shadow .15s; margin:0;
}
.spire-hc .shc-field input::placeholder{color:#9AA0BC}
.spire-hc .shc-field input:focus{outline:none; border-color:var(--shc-navy); box-shadow:0 0 0 3px rgba(15,11,60,.12)}
.spire-hc .shc-field input[aria-invalid="true"]{border-color:var(--shc-crimson); background:#FEF6F7}
.spire-hc .shc-err{font-size:12.5px; color:var(--shc-crimson-deep); font-weight:600; margin-top:10px}
.spire-hc .shc-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- legend ---------- */
.spire-hc .shc-legend{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px;
  border-top:1px solid var(--shc-line-soft); padding-top:16px;
}
.spire-hc .shc-legend div{font-size:12.5px; color:var(--shc-slate); line-height:1.35}
.spire-hc .shc-legend b{
  display:block; font-family:var(--shc-serif); font-size:21px; font-weight:700;
  color:var(--shc-navy); line-height:1;
}

/* ---------- questions ---------- */
.spire-hc .shc-q{border-top:1px solid var(--shc-line-soft); padding:22px 0 20px; scroll-margin-top:calc(var(--shc-offset) + 70px)}
.spire-hc .shc-q:first-child{border-top:0; padding-top:4px}
.spire-hc .shc-q-head{display:flex; gap:13px; align-items:baseline}
.spire-hc .shc-q-num{
  font-family:var(--shc-serif); font-weight:700; font-size:26px; line-height:1;
  color:var(--shc-crimson); flex:none; width:34px; letter-spacing:-.02em;
}
.spire-hc .shc-q-title{font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0}
.spire-hc .shc-q-text{margin:8px 0 0 47px; color:var(--shc-slate); font-size:15px}
.spire-hc .shc-q.shc-missing .shc-q-title{color:var(--shc-crimson-deep)}

.spire-hc .shc-opts{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:15px 0 0 47px}
.spire-hc .shc-opt{position:relative; margin:0}
.spire-hc .shc-opt input{position:absolute; opacity:0; width:1px; height:1px}
.spire-hc .shc-opt span{
  display:flex; flex-direction:column; gap:3px; height:100%; cursor:pointer;
  border:1.5px solid var(--shc-line); border-radius:11px; background:#fff;
  padding:11px 11px 12px; transition:border-color .14s, background .14s;
}
.spire-hc .shc-opt span::before{
  content:attr(data-n); font-family:var(--shc-serif); font-size:24px;
  font-weight:700; line-height:1; color:var(--shc-navy);
}
.spire-hc .shc-opt span em{font-style:normal; font-size:13px; font-weight:600; color:var(--shc-slate); line-height:1.25}
.spire-hc .shc-opt input:hover + span{border-color:#B9BED4}
.spire-hc .shc-opt input:focus-visible + span{outline:3px solid rgba(15,11,60,.35); outline-offset:2px}
.spire-hc .shc-opt input:checked + span{background:var(--shc-navy); border-color:var(--shc-navy)}
.spire-hc .shc-opt input:checked + span::before{color:#fff}
.spire-hc .shc-opt input:checked + span em{color:#C7CAE2}
.spire-hc .shc-q.shc-missing .shc-opt span{border-color:#F0B9C1}

/* ---------- submit ---------- */
.spire-hc .shc-submit-card{text-align:center}
.spire-hc .shc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--shc-crimson); color:#fff; border:1.5px solid var(--shc-crimson);
  border-radius:11px; font-weight:700; font-size:17px; text-decoration:none;
  padding:16px 30px; cursor:pointer; width:100%; max-width:340px; transition:background .15s;
}
.spire-hc .shc-btn:hover{background:var(--shc-crimson-deep); border-color:var(--shc-crimson-deep); color:#fff}
.spire-hc .shc-btn:focus-visible{outline:3px solid rgba(209,49,72,.4); outline-offset:3px}
.spire-hc .shc-btn[disabled]{opacity:.6; cursor:progress}
.spire-hc .shc-btn-ghost{background:transparent; color:var(--shc-navy); border-color:var(--shc-navy)}
.spire-hc .shc-btn-ghost:hover{background:var(--shc-navy); border-color:var(--shc-navy); color:#fff}
.spire-hc .shc-note{margin:13px auto 0; max-width:44ch; font-size:13px; color:var(--shc-slate)}
.spire-hc .shc-form-error{
  margin:0 auto 16px; max-width:46ch; background:#FEF6F7; border:1px solid #F3C6CD;
  color:var(--shc-crimson-deep); border-radius:10px; padding:11px 14px; font-size:14px; font-weight:600;
}

/* ---------- results ---------- */
.spire-hc .shc-result{display:none; margin-top:16px; scroll-margin-top:calc(var(--shc-offset) + 60px)}
.spire-hc .shc-result.shc-on{display:block}
.spire-hc .shc-result-top{
  background:var(--shc-navy); color:#fff; border-radius:var(--shc-radius) var(--shc-radius) 0 0;
  padding:clamp(26px,5vw,38px); text-align:center;
}
.spire-hc .shc-score{display:flex; align-items:center; justify-content:center; gap:clamp(16px,4vw,30px); margin-top:20px}
.spire-hc .shc-score svg{width:clamp(52px,13vw,74px); height:auto; flex:none}
.spire-hc .shc-score-num{
  font-family:var(--shc-serif); font-weight:700; line-height:.86;
  font-size:clamp(64px,15vw,104px); letter-spacing:-.03em;
}
.spire-hc .shc-score-den{font-family:var(--shc-serif); font-size:clamp(20px,4vw,26px); color:#9296BA; font-weight:600}
.spire-hc .shc-tier{margin:18px 0 0; font-size:clamp(21px,4vw,28px); font-weight:700; letter-spacing:-.015em}
.spire-hc .shc-tier-msg{margin:12px auto 0; max-width:50ch; color:#C9CBE0; font-size:clamp(15px,2.2vw,17px)}

.spire-hc .shc-result-body{
  background:var(--shc-paper); border:1px solid var(--shc-line-soft); border-top:0;
  border-radius:0 0 var(--shc-radius) var(--shc-radius); padding:clamp(20px,4vw,30px);
}
.spire-hc .shc-focus-title{font-size:16px; font-weight:700; margin:0 0 4px}
.spire-hc .shc-focus-sub{margin:0 0 16px; color:var(--shc-slate); font-size:14px}

.spire-hc .shc-bars{display:flex; flex-direction:column; gap:9px; margin:0 0 26px}
.spire-hc .shc-bar{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center}
.spire-hc .shc-bar-name{font-size:14px; font-weight:600}
.spire-hc .shc-bar-val{font-family:var(--shc-serif); font-size:17px; font-weight:700; color:var(--shc-navy)}
.spire-hc .shc-bar-track{grid-column:1 / -1; height:6px; border-radius:99px; background:var(--shc-line-soft); overflow:hidden}
.spire-hc .shc-bar-fill{display:block; height:100%; border-radius:99px; background:var(--shc-navy); transition:width .6s cubic-bezier(.2,.7,.3,1)}
.spire-hc .shc-bar.shc-low .shc-bar-fill{background:var(--shc-crimson)}
.spire-hc .shc-bar.shc-low .shc-bar-val{color:var(--shc-crimson)}

.spire-hc .shc-status{
  display:flex; gap:11px; align-items:flex-start; border:1px solid var(--shc-line-soft);
  background:#F8F9FC; border-radius:11px; padding:13px 15px;
  font-size:14px; color:var(--shc-slate); margin-bottom:22px;
}
.spire-hc .shc-dot{width:9px; height:9px; border-radius:99px; background:var(--shc-slate); flex:none; margin-top:7px}
.spire-hc .shc-status.shc-ok .shc-dot{background:var(--shc-ok)}
.spire-hc .shc-status.shc-warn .shc-dot{background:var(--shc-crimson)}
.spire-hc .shc-status a{color:var(--shc-navy); font-weight:600}

.spire-hc .shc-cta{text-align:center; border-top:1px solid var(--shc-line-soft); padding-top:22px}
.spire-hc .shc-cta p{margin:0 auto 16px; max-width:44ch; font-size:15px; color:var(--shc-slate)}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .spire-hc .shc-fields{grid-template-columns:1fr}
  .spire-hc .shc-legend{grid-template-columns:repeat(2,1fr); gap:12px 10px}
  .spire-hc .shc-opts{grid-template-columns:repeat(2,1fr); margin-left:0}
  .spire-hc .shc-q-text{margin-left:0}
  .spire-hc .shc-q-head{gap:10px}
  .spire-hc .shc-q-num{width:26px; font-size:23px}
  .spire-hc .shc-score{gap:14px}
}
@media (max-width:380px){
  .spire-hc .shc-opt span{padding:10px 9px 11px}
  .spire-hc .shc-opt span em{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .spire-hc *{transition:none !important}
}
@media print{
  .spire-hc .shc-rail,
  .spire-hc .shc-submit-card,
  .spire-hc .shc-cta{display:none !important}
}