/* Zabtek Web Solutions: free website audit + booking button.
   Loaded per page through $page['css'] (/free-website-audit and /contact), so
   style.css stays untouched. Uses the tokens from style.css only.

   The [hidden] guard matters: .btn and the result panel set display, which
   would beat the hidden attribute and show empty panels before an audit runs. */
.audit-result[hidden], .audit-result [hidden], #auditFormError[hidden], .book-call [hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.field__optional { font-weight: 400; color: #6f665c; }

.audit-result {
  margin-top: var(--s4); background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--teal); border-radius: var(--radius); padding: var(--s5);
}
.audit-result__title { font-size: clamp(22px, 2.4vw, 28px); }
.audit-result__title:focus { outline: 3px solid var(--teal); outline-offset: 4px; }
.audit-result__status { margin-top: var(--s2); color: var(--ink-3); }
.audit-result__score { margin: var(--s3) 0; color: var(--ink); }

.audit-progress { margin-top: var(--s4); }
.audit-progress progress {
  width: 100%; height: 10px; border: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--paper-2); color: var(--brand); appearance: none; -webkit-appearance: none;
}
.audit-progress progress::-webkit-progress-bar { background: var(--paper-2); }
.audit-progress progress::-webkit-progress-value { background: var(--brand); transition: width .6s ease; }
.audit-progress progress::-moz-progress-bar { background: var(--brand); }

.audit-checks { list-style: none; padding: 0; margin: 0; }
.audit-checks li {
  position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--line); color: var(--ink-3);
}
.audit-checks li:first-child { border-top: 0; }
.audit-checks li::before {
  content: ""; position: absolute; left: 4px; top: 19px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg);
}

.book-call { margin-top: var(--s3); }
.book-call__btn { gap: 10px; }
.book-call__note { margin-top: var(--s2); font-size: 13px; color: #6f665c; }
.on-dark .book-call__note { color: rgba(250, 248, 245, .78); }

@media (max-width: 860px) {
  .audit-result { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .audit-progress progress::-webkit-progress-value { transition: none; }
}