/* West View IT — quiz.css
   Styles for the embedded IT Journey Quiz (template-quiz-landing.php +
   js/quiz.js). Ported from the Marketing Hub quiz's design onto the theme
   palette. Everything is qz- prefixed so nothing collides with the theme's
   existing .step / .steps / .gate-* classes. Enqueued only on the quiz
   template. */

/* ----- layout ----- */
.qz-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 980px) {
  .qz-layout { grid-template-columns: minmax(0, 640px) 1fr; gap: 56px; }
  .qz-aside { position: sticky; top: 40px; }
}

.qz-head h2 { font-family: var(--font-display); font-size: 1.65rem; color: var(--ink); margin: 0 0 6px; }
.qz-head > p { color: var(--navy); font-weight: 600; font-size: 0.95rem; margin: 0 0 18px; }

/* ----- macro phase tracker ----- */
.qz-tracker { display: flex; gap: 7px; margin-bottom: 26px; }
.qz-tracker-seg { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.qz-tracker-seg .bar { height: 5px; border-radius: 999px; background: var(--line-light); }
.qz-tracker-seg .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mist-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-tracker-seg.on .bar { background: var(--orange); }
.qz-tracker-seg.on .lbl { color: var(--ember-text); }

/* ----- the card ----- */
.qz-card { background: var(--paper); border: 1px solid var(--line-light); border-radius: 18px; box-shadow: 0 10px 30px -18px rgba(11, 20, 43, 0.25); padding: 28px; }
@media (min-width: 640px) { .qz-card { padding: 32px; } }
.qz-smallprint { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--mist-dim); margin: 18px 0 0; }

/* step fade-in (replayed on every question change) */
@keyframes qzFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qz-fade { animation: qzFadeIn 0.24s ease both; }
@media (prefers-reduced-motion: reduce) { .qz-fade { animation: none; } }

/* ----- progress dots + back ----- */
.qz-dotrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.qz-dots { display: flex; gap: 5px; }
.qz-dot { width: 22px; height: 6px; border-radius: 999px; background: var(--line-light); }
.qz-dot.done { background: var(--orange); }
.qz-dot.cur { background: rgba(240, 145, 62, 0.35); }
.qz-back { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 700; color: var(--mist-dim); }
.qz-back:hover { color: var(--ink); }

/* ----- question header ----- */
.qz-qhead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.qz-qicon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: var(--paper-tint); color: var(--ember); display: flex; align-items: center; justify-content: center; }
.qz-eyebrow { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mist-dim); }
.qz-qtitle { font-family: var(--font-body); font-size: 1.13rem; font-weight: 800; line-height: 1.35; color: var(--ink); margin: 2px 0 0; }

/* ----- answer buttons ----- */
.qz-answers { display: flex; flex-direction: column; gap: 10px; }
.qz-answer { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--line-light); background: var(--paper); cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--ink); transition: border-color 0.15s, background 0.15s; }
.qz-answer:hover { border-color: rgba(240, 145, 62, 0.6); }
.qz-answer.sel { border-color: var(--orange); background: rgba(240, 145, 62, 0.1); }
.qz-answer-badge { flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--line-light); color: var(--mist-dim); font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.qz-answer.sel .qz-answer-badge { border: 0; background: var(--orange); color: #fff; }

/* ----- 1–10 satisfaction scale ----- */
.qz-scale-ends { display: flex; justify-content: space-between; margin-bottom: 8px; }
.qz-scale-ends span { font-size: 0.69rem; font-weight: 800; text-transform: uppercase; color: var(--mist-dim); }
.qz-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.qz-scale button { height: 48px; border-radius: 12px; border: 2px solid var(--line-light); background: var(--paper); color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 800; cursor: pointer; transition: all 0.15s; }
.qz-scale button:hover { border-color: rgba(240, 145, 62, 0.6); }
.qz-scale button.sel { border-color: var(--orange); background: var(--orange); color: #fff; transform: scale(1.05); box-shadow: 0 6px 16px -6px rgba(240, 145, 62, 0.5); }

/* ----- forms ----- */
.qz-h2 { font-size: 1.13rem; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.qz-sub { font-size: 0.88rem; font-weight: 600; color: var(--navy); margin: 0 0 22px; }
.qz-field { margin-bottom: 16px; }
.qz-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.qz-input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-light); background: var(--paper-tint); font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink); outline: none; transition: border-color 0.15s; }
.qz-input:focus { border-color: var(--orange); }
.qz-input-wrap { position: relative; }
.qz-input-wrap .qz-input { padding-right: 44px; }
.qz-input-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mist-dim); pointer-events: none; }
.qz-grid2 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 22px; }
@media (min-width: 640px) { .qz-grid2 { grid-template-columns: 1fr 1fr; } }
.qz-btn { width: 100%; height: 44px; border-radius: 12px; border: 0; background: var(--orange); color: #fff; font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; transition: background 0.15s; }
.qz-btn:hover { background: var(--ember); }
.qz-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.qz-error { font-size: 0.88rem; font-weight: 600; padding: 12px 14px; margin-bottom: 18px; border-radius: 12px; background: #FEF5F5; border: 1px solid #F5C6C6; color: #C0392B; }
.qz-warn { font-size: 0.75rem; font-weight: 600; color: var(--ember-text); margin: 8px 0 0; }
.qz-note { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin: 0 0 22px; }
.qz-note .ic { flex-shrink: 0; margin-top: 2px; color: var(--ember); }
.qz-formfoot { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--mist-dim); margin: 12px 0 0; }

/* two-option follow-up buttons (M365) */
.qz-pair { display: flex; gap: 12px; }
.qz-pair .qz-answer { flex: 1; justify-content: center; text-align: center; }

/* honeypot — visually gone, skipped by keyboard + screen readers */
.qz-hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ----- loading ----- */
.qz-loading { text-align: center; padding: 20px 0 8px; }
.qz-ring { position: relative; width: 96px; height: 96px; margin: 0 auto 20px; }
.qz-ring svg { transform: rotate(-90deg); }
.qz-ring .pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.13rem; font-weight: 800; color: var(--ink); }
.qz-checklist { max-width: 380px; margin: 20px auto 0; text-align: left; }
.qz-checkrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--paper-tint); }
.qz-checkrow:last-child { border-bottom: 0; }
.qz-checkrow .st { flex-shrink: 0; width: 24px; height: 24px; }
.qz-checkrow .st.done { color: var(--orange); }
.qz-checkrow .st.todo { color: var(--line-light); }
.qz-checkrow .txt { font-size: 0.88rem; font-weight: 600; color: var(--mist-dim); }
.qz-checkrow.done .txt, .qz-checkrow.active .txt { color: var(--ink); }
@keyframes qzSpin { to { transform: rotate(360deg); } }
.qz-spin { width: 24px; height: 24px; border-radius: 999px; border: 2.5px solid var(--paper-tint); border-top-color: var(--orange); animation: qzSpin 0.8s linear infinite; }

/* ----- reveal ----- */
.qz-pdfrow { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.qz-pdfbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line-light); background: var(--paper); font: inherit; font-size: 0.75rem; font-weight: 700; color: var(--mist-dim); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.qz-pdfbtn:hover { color: var(--ink); border-color: var(--navy); }

.qz-hero { background: var(--ink-deep); border-radius: 18px; padding: 28px 24px; margin-bottom: 24px; text-align: center; }
.qz-hero .eyebrow-sm { font-size: 0.69rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.qz-level-pill { display: inline-block; padding: 4px 10px; margin-top: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; }
.qz-hero-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 6px; }
.qz-hero-title .ic { width: 40px; height: 40px; border-radius: 999px; background: rgba(240, 145, 62, 0.15); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.qz-hero-title h3 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; }
.qz-track { display: flex; align-items: flex-start; justify-content: center; gap: 4px; max-width: 360px; margin: 24px auto 0; }
.qz-track-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qz-track-step .bar { width: 100%; height: 3px; }
.qz-track-step .node { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.qz-track-step .lbl { font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }

.qz-stagecopy { text-align: center; max-width: 430px; margin: 0 auto 24px; }
.qz-stagecopy h4 { font-size: 1rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.qz-stagecopy p { font-size: 0.88rem; font-weight: 600; line-height: 1.6; color: var(--navy); margin: 0; }

.qz-box-orange { border: 1.5px solid #FBD9AE; background: #FFF9F2; border-radius: 12px; }
.qz-box-red { border: 1.5px solid #F5C6C6; background: #FEF5F5; border-radius: 12px; }
.qz-benchmark { padding: 14px 16px; margin-bottom: 24px; }
.qz-benchmark p { font-size: 0.88rem; font-weight: 600; color: var(--navy); text-align: center; margin: 0 0 10px; }
.qz-benchmark strong { font-weight: 800; color: var(--ink); }
.qz-benchbar { width: 100%; height: 8px; border-radius: 999px; background: var(--paper-tint); border: 1px solid var(--line-light); overflow: hidden; }
.qz-benchbar > div { height: 100%; border-radius: 999px; background: var(--orange); }

.qz-boxhead { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mist-dim); margin: 0 0 10px; }
.qz-hlgrid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
@media (min-width: 640px) { .qz-hlgrid { grid-template-columns: 1fr 1fr; } }
.qz-hlgrid > div { padding: 14px; }
.qz-hllist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qz-hllist li { display: flex; align-items: flex-start; gap: 8px; }
.qz-hllist .ic { flex-shrink: 0; margin-top: 1px; }
.qz-hllist .ic.good { color: #D9780F; }
.qz-hllist .ic.bad { color: #C0392B; }
.qz-hllist .t { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.qz-hllist .next { font-size: 0.72rem; font-weight: 600; color: var(--navy); line-height: 1.5; margin: 2px 0 0; }
.qz-quickwin { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: rgba(240, 145, 62, 0.15); color: var(--ember-text); font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

.qz-scoregrid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
@media (min-width: 640px) { .qz-scoregrid { grid-template-columns: repeat(3, 1fr); } }
.qz-scoregrid > div { padding: 14px; }
.qz-scorehead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.qz-scorehead .nm { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.03em; color: var(--ink); }
.qz-scorehead .vd { margin-left: auto; font-size: 0.69rem; font-weight: 800; }
.qz-scoregrid p { font-size: 0.75rem; font-weight: 600; color: var(--navy); line-height: 1.55; margin: 0; }

.qz-breach { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 24px; }
.qz-breach p { font-size: 0.88rem; font-weight: 700; color: var(--ink); margin: 0; }

.qz-statgrid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
@media (min-width: 640px) { .qz-statgrid { grid-template-columns: repeat(3, 1fr); } }
.qz-statgrid > div { border: 1px solid var(--line-light); background: var(--paper-tint); border-radius: 12px; padding: 14px; }
.qz-statgrid .big { font-size: 1.38rem; font-weight: 900; color: var(--ember-text); line-height: 1; margin-bottom: 6px; }
.qz-statgrid p { font-size: 0.75rem; font-weight: 600; color: var(--navy); line-height: 1.55; margin: 0; }
.qz-statgrid a { display: block; font-size: 0.63rem; font-weight: 600; color: var(--mist-dim); margin-top: 8px; text-decoration: underline; text-underline-offset: 2px; }
.qz-statgrid a:hover { color: var(--ember-text); }

.qz-cta { border: 1.5px solid #FBD9AE; background: #FFF7ED; border-radius: 18px; padding: 22px 20px; text-align: center; }
.qz-cta h4 { font-size: 1.06rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.qz-cta > p { font-size: 0.88rem; font-weight: 600; color: var(--navy); margin: 0 0 16px; }
.qz-cta-btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 28px; border-radius: 12px; background: var(--orange); color: #fff !important; font-size: 0.88rem; font-weight: 800; text-decoration: none; transition: background 0.15s; }
.qz-cta-btn:hover { background: var(--ember); }
.qz-cta-btn.off { background: rgba(240, 145, 62, 0.5); pointer-events: none; }
.qz-cta-foot { font-size: 0.72rem; font-weight: 700; color: var(--mist-dim); margin: 14px 0 0; }
.qz-subscribe { margin-top: 16px; }
.qz-subscribe button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 700; color: var(--mist-dim); text-decoration: underline; text-underline-offset: 2px; }
.qz-subscribe button:hover { color: var(--ink); }
.qz-subscribe button:disabled { opacity: 0.6; }
.qz-subscribe .err { font-size: 0.75rem; font-weight: 600; color: #C0392B; margin: 0 0 8px; }
.qz-subscribed { font-size: 0.75rem; font-weight: 600; color: var(--navy); margin: 16px 0 0; }
.qz-emailed { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.75rem; font-weight: 600; color: var(--mist-dim); margin: 14px 0 0; }

.qz-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--line-light); box-shadow: 0 -8px 24px -12px rgba(57, 69, 99, 0.15); padding: 12px 16px; transform: translateY(100%); transition: transform 0.3s; }
.qz-sticky.show { transform: translateY(0); }
.qz-sticky .in { max-width: 640px; margin: 0 auto; }
.qz-sticky a { display: block; height: 48px; line-height: 48px; text-align: center; border-radius: 12px; background: var(--orange); color: #fff !important; font-size: 0.88rem; font-weight: 800; text-decoration: none; }
.qz-sticky a:hover { background: var(--ember); }

/* ----- print: the reveal becomes a clean 1–2 page report ----- */
@media print {
  header.nav, footer.footer, .qz-aside, .qz-head, .qz-smallprint, .qz-sticky,
  .qz-pdfrow, .qz-subscribe, .qz-emailed, .qz-cta-btn, .qz-print-hide,
  #main > section:not(#quiz) { display: none !important; }
  #quiz { padding: 0 !important; }
  .qz-card { border: 0; box-shadow: none; padding: 0; }
  .qz-hero, .qz-box-orange, .qz-box-red, .qz-statgrid > div, .qz-cta {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid;
  }
}