/* Quick quote (quote/quick/quick.js). The site's design system (site.css,
   docs/DESIGN.md): every colour, radius and font reads a site token, with the
   same value as a fallback. Cards are white with a 1px hairline and a 6px
   radius, a line icon above the label; selected is the brand blue border, the
   light blue fill and a check mark (so it never relies on colour alone).
   Two columns on phones, four from 768px, at least 88px tall. A thin 4px
   progress bar. No gradients, no shadows, no glow.
   Text inputs and checkboxes keep the quote form's control outline (#7B8CA3,
   3.6:1 on white) so they meet the 3:1 non-text contrast minimum; the 1.3:1
   card hairline is what the brief asks for, and each card's label names it. */

.qq-app {
  --qq-blue: var(--blue-500, #1A6BDB);
  --qq-tint: var(--blue-100, #E6F0FB);
  --qq-line: var(--line, #D7E1EE);
  --qq-ink: var(--ink, #0F1B2D);
  --qq-muted: var(--muted, #4A5568);
  --qq-deep: var(--blue-900, #0B2545);
  --qq-error: var(--error, #B42318);
  --qq-control: #7B8CA3;
  --qq-radius: var(--radius, 6px);
  --qq-ease: var(--ease, 150ms ease);
  /* Step 1's drawn height, reserved before the script runs so nothing below moves when it draws.
     Home by default; each flow's own height below, measured with the site fonts at every width
     from 300 to 800px and every 20px to 1440px. Labels wrap onto more lines on narrow phones.
     Left as is: home at 381 to 383px and business at 381 to 387px, which wrap one label more. */
  --qq-reserve-sm: 472px;
  --qq-reserve-lg: 368px;
  position: relative;
  max-width: 880px;
  scroll-margin-top: 88px;
  color: var(--qq-ink);
  font-family: var(--font-body, 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif);
}
.qq-app[data-flow="condo"] { --qq-reserve-sm: 326px; --qq-reserve-lg: 243px; }
.qq-app[data-flow="business"], .qq-app[data-flow="boat"] { --qq-reserve-sm: 432px; --qq-reserve-lg: 367px; }
@media (max-width: 367px) { .qq-app[data-flow="home"] { --qq-reserve-sm: 492px; } }
@media (min-width: 401px) { .qq-app[data-flow="home"] { --qq-reserve-sm: 452px; } }
@media (min-width: 473px) { .qq-app[data-flow="home"] { --qq-reserve-sm: 432px; } }
@media (max-width: 336px) { .qq-app[data-flow="condo"] { --qq-reserve-sm: 346px; } }
@media (max-width: 371px) { .qq-app[data-flow="business"] { --qq-reserve-sm: 452px; } }
@media (max-width: 357px) { .qq-app[data-flow="business"] { --qq-reserve-sm: 472px; } }
@media (max-width: 323px) { .qq-app[data-flow="business"] { --qq-reserve-sm: 502px; } }
@media (max-width: 348px) { .qq-app[data-flow="boat"] { --qq-reserve-sm: 452px; } }
@media (scripting: enabled) {
  .qq-app:not([data-ready]) { min-height: var(--qq-reserve-sm); }
}
@media (scripting: enabled) and (min-width: 768px) {
  .qq-app:not([data-ready]) { min-height: var(--qq-reserve-lg); }
}
.qq-app [hidden] { display: none !important; }

/* The static shell around the component on a service page (scripts/gen-pages.mjs). */
.qq-title { margin: 0 0 var(--s1, 8px); }
.qq-sub { margin: 0 0 var(--s3, 24px); color: var(--qq-muted); }

/* Honeypot and the live region: present for the server and screen readers, never seen. */
.qq-hp, .qq-live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* ---- top row: Back, Step X of 5, sound ---- */
.qq-top { display: flex; align-items: center; gap: var(--s1, 8px); min-height: 44px; }
.qq-count { flex: 1; margin: 0; text-align: center; font-size: 1rem; font-weight: 600; color: var(--qq-muted); }
.qq-back, .qq-sound { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0;
  border-radius: var(--qq-radius); background: transparent; color: var(--qq-deep); font: 600 1rem/1.2 var(--font-body, sans-serif);
  cursor: pointer; transition: background-color var(--qq-ease); }
.qq-back { margin-left: -10px; }
a.qq-back, a.qq-back:hover { color: var(--qq-deep); text-decoration: none; } /* step 1 on a dedicated page: the same look as the button */
.qq-sound { margin-right: -10px; color: var(--qq-muted); }
.qq-back .q-icon, .qq-sound .q-icon { width: 20px; height: 20px; flex: none; }
.qq-back[aria-hidden="true"] { visibility: hidden; }
@media (hover: hover) { .qq-back:hover, .qq-sound:hover { background: var(--qq-tint); } }

.qq-bar { height: 4px; margin: var(--s1, 8px) 0 var(--s3, 24px); border-radius: 2px; background: var(--qq-line); overflow: hidden; }
.qq-bar-fill { display: block; width: 20%; height: 100%; background: var(--qq-blue); transition: width var(--qq-ease); }

/* ---- the question ---- */
.qq-q { max-width: none; margin: 0 0 var(--s2, 16px); font-family: var(--font-display, 'Source Serif 4', Georgia, serif);
  font-size: 1.5rem; font-weight: 600; line-height: 1.25; color: var(--qq-deep); }
@media (min-width: 768px) { .qq-q { font-size: 1.75rem; } }
.qq-q:focus { outline: none; }
.qq-q:focus-visible { outline: 3px solid var(--qq-blue); outline-offset: 4px; border-radius: var(--qq-radius); }
.qq-help { margin: calc(-1 * var(--s1, 8px)) 0 var(--s2, 16px); color: var(--qq-muted); }

/* ---- cards ---- */
.qq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .qq-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qq-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  min-height: 88px; margin: 0; padding: 16px 8px; background: #fff; border: 1px solid var(--qq-line); border-radius: var(--qq-radius);
  color: var(--qq-ink); font: 600 1rem/1.25 var(--font-body, sans-serif); text-align: center; cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--qq-ease), background-color var(--qq-ease); }
@media (min-width: 768px) { .qq-opt { min-height: 112px; } }
@media (hover: hover) { .qq-opt:hover { border-color: var(--qq-blue); } }
.qq-opt[aria-pressed="true"] { padding: 15px 7px; border: 2px solid var(--qq-blue); background: var(--qq-tint); }
.qq-opt-icon { width: 32px; height: 32px; flex: none; color: var(--qq-deep); }
.qq-opt-label { display: block; }
.qq-opt-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; opacity: 0; color: var(--qq-blue); }
.qq-opt-check .q-icon { display: block; width: 20px; height: 20px; stroke-width: 2.4; }
.qq-opt[aria-pressed="true"] .qq-opt-check { top: 5px; right: 5px; opacity: 1; }
.qq-opt.is-press { animation: qq-press 160ms ease; }
@keyframes qq-press { 50% { transform: scale(.97); } }

/* ---- typed answers and contact details ---- */
.qq-fields { display: grid; gap: var(--s2, 16px); max-width: 560px; }
.qq-field { display: flex; flex-direction: column; gap: 6px; }
.qq-label { font-weight: 600; color: var(--qq-ink); }
.qq-field-help { margin: 0; font-size: .9375rem; color: var(--qq-muted); }
.qq-input { width: 100%; min-height: 48px; padding: 10px 14px; background: #fff; border: 1px solid var(--qq-control);
  border-radius: var(--qq-radius); color: var(--qq-ink); font: 400 1.0625rem/1.4 var(--font-body, sans-serif);
  -webkit-appearance: none; appearance: none; transition: border-color var(--qq-ease); }
.qq-input:focus-visible { outline: 3px solid var(--qq-blue); outline-offset: 2px; border-color: var(--qq-blue); }
.qq-input[aria-invalid="true"] { padding: 9px 13px; border: 2px solid var(--qq-error); }
.qq-field-err, .qq-error { margin: 0; color: var(--qq-error); font-size: .9375rem; font-weight: 600; }
.qq-error { margin-top: var(--s2, 16px); }

.qq-checks { display: grid; gap: 4px; max-width: 640px; margin: var(--s3, 24px) 0 0; }
.qq-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; }
.qq-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--qq-blue); cursor: pointer; }
.qq-check label { line-height: 1.45; cursor: pointer; }
.qq-check input:focus-visible { outline: 3px solid var(--qq-blue); outline-offset: 2px; }
.qq-check input[aria-invalid="true"] { outline: 2px solid var(--qq-error); outline-offset: 2px; }
/* Focus wins over the error outline: Send moves focus to an unticked consent box, and it must show. */
.qq-check input[aria-invalid="true"]:focus-visible { outline: 3px solid var(--qq-blue); outline-offset: 2px; }
.qq-checks .qq-field-err { margin: -4px 0 4px 36px; }
.qq-ack, .qq-privacy { max-width: 640px; margin: var(--s2, 16px) 0 0; font-size: .9375rem; color: var(--qq-muted); }
.qq-privacy { margin-top: 4px; }

/* ---- actions ---- */
.qq-actions { margin-top: var(--s3, 24px); }
.qq-actions .btn { width: 100%; }
@media (min-width: 768px) { .qq-actions .btn { width: auto; min-width: 180px; } }
.qq-send:disabled { opacity: .7; cursor: progress; }

.qq-fail { max-width: 640px; margin-top: var(--s2, 16px); padding: 12px 16px; background: #fff;
  border: 1px solid var(--qq-error); border-radius: var(--qq-radius); }
.qq-fail p { margin: 0 0 var(--s1, 8px); }
.qq-fail p:last-child { margin: 0; }
.qq-fail:focus { outline: none; }
.qq-fail:focus-visible { outline: 3px solid var(--qq-blue); outline-offset: 2px; }

/* ---- thank you ---- */
.qq-done { padding: var(--s1, 8px) 0; }
.qq-done-text { margin: 0 0 var(--s2, 16px); font-size: 1.125rem; }
.qq-done-more { margin: 0; }

.qq-turnstile:empty { display: none; }
.qq-turnstile { margin-top: var(--s2, 16px); }

/* ---- motion ---- */
.qq-step.qq-enter { animation: qq-enter 200ms ease; }
.qq-step.qq-enter-back { animation: qq-enter-back 200ms ease; }
@keyframes qq-enter { from { opacity: 0; transform: translateX(16px); } }
@keyframes qq-enter-back { from { opacity: 0; transform: translateX(-16px); } }
@media (prefers-reduced-motion: reduce) {
  .qq-app *, .qq-app *::before, .qq-app *::after { animation: none !important; transition: none !important; }
}
.qq-app[data-motion="reduced"] * { animation: none !important; }

/* Forced colours: a selected card gets a thick Highlight border (and keeps its check mark), so the
   outline stays free for the focus ring and a focused selected card still looks focused. */
@media (forced-colors: active) {
  .qq-opt[aria-pressed="true"] { padding: 14px 6px; border: 3px solid Highlight; }
  .qq-bar-fill { background: Highlight; }
}