/* Squiz Website Readiness Quiz — styles
   Assumes the host page already loads squiznet's main.css (variables,
   @font-face, .button, and layout utilities). Only quiz-specific additions
   live here — including lead-form field/input/checkbox styles (mirroring
   main.css's HubSpot form patterns), because the quiz submits via API rather
   than as an embedded HubSpot form. */

/* Centers the quiz on a page that has little or nothing else on it —
   assumes the quiz is effectively the whole page's content. */
.squiz-quiz-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  width: 100%;
}

/* Embedded in squiznet's content-layout (wave background): center the
   intro in the viewport, top-align question steps (they need more vertical
   room than centered flex + symmetric padding allows), let the wave bleed
   past the section, and cancel the duplicate block-end padding that caused
   a scrollbar. */
main:has(.squiz-quiz-stage) {
  padding-bottom: 0;
  overflow: hidden;
}

.content-layout.has-pad-block--md:has(.squiz-quiz-stage) {
  min-height: 100dvh;
  overflow: visible;
}

.content-layout.has-pad-block--md:has(.squiz-quiz-stage):not(:has(.squiz-quiz__progress)):not(:has(.squiz-quiz__results)):not(:has(form[data-form="lead"])) {
  padding-top: var(--sp--pad-md);
  padding-bottom: var(--sp--pad-md);
  justify-content: center;
}

.content-layout.has-pad-block--md:has(.squiz-quiz-stage):is(:has(.squiz-quiz__progress), :has(form[data-form="lead"])) {
  padding-top: var(--sp--gap-sm);
  padding-bottom: var(--sp--pad-md);
  justify-content: flex-start;
}

.content-layout.has-pad-block--md:has(.squiz-quiz-stage):has(.squiz-quiz__results) {
  padding-top: var(--sp--pad-md);
  padding-bottom: var(--sp--pad-md);
  justify-content: flex-start;
}

.content-layout.has-bg-image--squiz-line:has(.squiz-quiz-stage)::before {
  bottom: calc(-1 * var(--sp--pad-md));
}

.content-layout:has(.squiz-quiz-stage) .squiz-quiz-stage {
  min-height: auto;
}

.squiz-quiz {
  max-width: 40rem;
  width: 100%;
  margin-inline: auto;
  padding: var(--sp--pad-sm);
  background-color: var(--clr-bg-main);
  border: 1px solid var(--clr-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3);
}

.squiz-quiz__logo {
  display: block;
  height: 1.25rem;
  width: auto;
  color: var(--clr-brand-primary);
  margin-block-end: var(--sp--gap-sm);
}

.squiz-quiz > a::after {
  display: none;
}

/* The results screen's two-column layout needs more room than the rest of
   the quiz's single-column steps, and reads better breaking out of the
   card treatment entirely once it's revealed. */
.squiz-quiz:has(.squiz-quiz__results) {
  max-width: 64rem;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.squiz-quiz__screen h2 {
  font-size: var(--fs-lg);
  margin-block-end: var(--sp--gap-xxxs);
}

.squiz-quiz__screen h2:focus {
  outline: none;
}

/* :focus-visible overrides the outline:none above for keyboard users; must stay after it in source order */
.squiz-quiz__screen h2:focus-visible {
  outline: 2px solid var(--clr-btn-focus);
  outline-offset: 4px;
}

.squiz-quiz__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp--gap-xxs);
  margin-block-start: var(--sp--gap-xs);
}

.squiz-quiz__progress {
  display: flex;
  align-items: center;
  gap: var(--sp--gap-xxxs);
  margin-block-end: var(--sp--gap-xs);
}

.squiz-quiz__progress-track {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--clr-bg-light-subtle);
  overflow: hidden;
}

.squiz-quiz__progress-fill {
  height: 100%;
  background: var(--clr-brand-secondary);
  border-radius: var(--radius-full);
  transition: width 300ms ease;
}

.squiz-quiz__progress-label {
  font-size: var(--fs-xs);
  color: var(--clr-text-subtle);
  white-space: nowrap;
}

.squiz-quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--sp--gap-xxxs);
  margin-block: var(--sp--gap-xs);
  border: none;
  padding: 0;
}

.squiz-quiz__options legend {
  margin-block-end: var(--sp--gap-xxs);
}

.squiz-quiz__option {
  display: flex;
  align-items: center;
  gap: var(--sp--gap-xxxs);
  padding: var(--sp--pad-xxs);
  border: 1px solid var(--clr-border-default);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.squiz-quiz__option:hover {
  border-color: var(--clr-border-strong);
}

/* Deliberately not per-answer-color here (unlike the results breakdown
   badges below) — every selected option highlights the same green,
   regardless of which answer it is. */
.squiz-quiz__option:has(input:checked) {
  border-color: var(--clr-badge-green-outline);
  background-color: var(--clr-badge-green-bg);
}

.squiz-quiz__option:has(input:focus-visible) {
  outline: 2px solid var(--clr-btn-focus);
  outline-offset: 2px;
}

/* Host main.css sets appearance:none on all radios (and sr-only clip on
   checkboxes). Restore native radio controls inside question options. */
.squiz-quiz__option input[type="radio"] {
  position: static;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: initial;
  flex-shrink: 0;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  accent-color: var(--clr-brand-primary);
  cursor: pointer;
}

.squiz-quiz__option-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin-inline-start: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border-default);
  background-color: var(--clr-bg-light-subtle);
  color: var(--clr-text-subtle);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.squiz-quiz__key-hint {
  display: none;
  font-size: var(--fs-xs);
  color: var(--clr-text-subtle);
}

@media (width > 800px) {
  .squiz-quiz__key-hint {
    display: block;
  }
}

/* These custom properties now only drive the results-page breakdown
   badges (.squiz-quiz__breakdown-answer below) — the question-screen
   option highlight above is intentionally uniform green regardless of
   answer, so this is where "which answers need attention" is actually
   color-coded. */
.squiz-quiz__answer-color--working-well { --option-accent: var(--clr-badge-green-outline); --option-accent-bg: var(--clr-badge-green-bg); }
.squiz-quiz__answer-color--in-progress { --option-accent: var(--clr-badge-blue-outline); --option-accent-bg: var(--clr-badge-blue-bg); }
.squiz-quiz__answer-color--gap { --option-accent: var(--clr-badge-orange-outline); --option-accent-bg: var(--clr-badge-orange-bg); }
.squiz-quiz__answer-color--not-sure { --option-accent: var(--clr-badge-grey-outline); --option-accent-bg: var(--clr-badge-grey-bg); }

.squiz-quiz__field-error {
  display: block;
  color: var(--clr-badge-pink-outline);
  font-size: var(--fs-xs);
  margin-block-start: 0.25rem;
}

/* Lead form — mirrors .hs-form.hs-form field/input patterns from main.css.
   The quiz submits to HubSpot's API but is plain HTML, so these styles are
   scoped here rather than relying on HubSpot embed selectors. */
.squiz-quiz form[data-form="lead"] {
  display: flex;
  flex-direction: column;
  gap: var(--sp--gap-xxs);
}

.squiz-quiz form[data-form="lead"] .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.squiz-quiz form[data-form="lead"] .form-label {
  font-size: var(--fs-sm);
  font-weight: var(--font-normal, 400);
  line-height: var(--lh-base);
  color: var(--clr-text-primary);
}

.squiz-quiz form[data-form="lead"] .form-input {
  width: 100%;
  min-height: 48px;
  padding: 16px 12px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: var(--clr-input-text);
  background-color: var(--clr-input-bg);
  border: 1px solid var(--clr-input-border);
  border-radius: var(--radius-input);
  outline: none;
  box-sizing: border-box;
}

.squiz-quiz form[data-form="lead"] .form-input::placeholder {
  color: var(--clr-input-placeholder);
  opacity: 1;
}

.squiz-quiz form[data-form="lead"] .form-input:focus-visible {
  outline: 2px solid var(--clr-input-focus);
  outline-offset: 2px;
}

.squiz-quiz form[data-form="lead"] .form-input[aria-invalid="true"] {
  border-color: var(--clr-badge-pink-outline);
}

/* Host main.css hides all checkboxes (sr-only clip + appearance:none) for its
   own custom patterns (.search-filters, .hs-form, etc.). Restore a visible
   checkbox aligned with .hs-form-booleancheckbox-display from main.css. */
.squiz-quiz form[data-form="lead"] .form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--font-normal, 400);
  line-height: var(--lh-base);
  color: inherit;
  cursor: pointer;
}

.squiz-quiz form[data-form="lead"] .form-checkbox input[type="checkbox"],
.squiz-quiz form[data-form="lead"] #squiz-quiz-consent {
  position: static;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: initial;
  flex-shrink: 0;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  accent-color: var(--clr-input-focus);
  cursor: pointer;
}

.squiz-quiz form[data-form="lead"] .form-checkbox input[type="checkbox"]:focus-visible,
.squiz-quiz form[data-form="lead"] #squiz-quiz-consent:focus-visible {
  outline: 2px solid var(--clr-input-focus);
  outline-offset: 2px;
}

.squiz-quiz__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.squiz-quiz__results {
  display: flex;
  flex-direction: column;
  gap: var(--sp--gap-sm);
  align-items: flex-start;
}

@media (width > 800px) {
  .squiz-quiz__results {
    flex-direction: row;
  }
}

.squiz-quiz__results-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp--gap-xxxs);
  flex: 0 0 auto;
  width: 100%;
}

@media (width > 800px) {
  .squiz-quiz__results-summary {
    position: sticky;
    top: var(--sp--gap-xs);
    width: 26rem;
  }
}

.squiz-quiz__results-breakdown-col {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.squiz-quiz__score {
  font-family: var(--font-headings);
  font-size: var(--fs-super);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-block: var(--sp--gap-xxxs) 0;
}

.squiz-quiz__score-max {
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--clr-text-subtle);
}

h2.squiz-quiz__band-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-brand-primary);
  margin-block-start: 0;
}

.squiz-quiz__breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--sp--gap-xxxs);
  margin-block: var(--sp--gap-xs);
}

.squiz-quiz__breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp--gap-xxs);
  /* Equal padding-block reads top-heavy in practice — the font's own
     line-height leading sits mostly above the glyphs, so top is nudged
     down slightly to look optically even with the bottom. */
  padding-block: calc(var(--sp--gap-xs) - 0.375rem) var(--sp--gap-xs);
  border-block-end: 1px solid var(--clr-border-default);
  font-size: var(--fs-sm);
}

.squiz-quiz__breakdown-answer {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-badge);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  color: var(--clr-text-primary);
  background-color: var(--option-accent-bg, var(--clr-bg-light-alt));
  border: 1px solid var(--option-accent, var(--clr-border-default));
}

.squiz-quiz__cta {
  margin-block-start: var(--sp--gap-sm);
  padding: var(--sp--pad-xs);
  border-radius: var(--radius-md);
  background-color: var(--clr-bg-highlight);
}

.squiz-quiz__cta h3 {
  margin-block-end: var(--sp--gap-xxxs);
}

.squiz-quiz__cta p {
  margin-block-end: var(--sp--gap-xxs);
}

/* main.css's .button has a blurred hover-glow pseudo-element sized for
   wide buttons (min-width: 195px) — on our short nav buttons (Back/Next/
   Continue/Submit) it overlaps the visible button even at rest, showing
   as a smudge. Disabled within the quiz rather than editing main.css. */
.squiz-quiz .button::before {
  content: none;
}

/* main.css leans on that same glow to provide the hover background swap
   for non-reduced-motion users, and never actually defines --btn-hover-text
   on the base (primary) .button — only its --outline/--ghost modifiers do.
   With the glow disabled above, the primary button's hover state would be
   both invisible (background barely changes) and illegible (text falls
   through to an unrelated dark color). Defined explicitly here instead of
   relying on main.css's hover cascade; the --btn-hover-text fallback keeps
   the outline/ghost modifiers' own correct values where they're already set. */
.squiz-quiz .button:hover {
  background-color: var(--btn-hover);
  color: var(--btn-hover-text, var(--clr-btn-primary-hover-text-light));
  border-color: var(--btn-hover-text, var(--clr-btn-primary-hover-text-light));
}