/*
 * KnotPicker – technical layer, loaded after the design's own <style>.
 * Accessibility fixes and the contact form. It reuses the design's
 * variables (--red, --ink, --sans…) so it follows the design if it changes.
 * Injected by scripts/build.mjs; edit partials/site.css.
 */

/* --- Accessibility fixes (no visual change for mouse users) --- */

/* The top bar is invisible until you scroll: show it when a keyboard user tabs into it. */
.js .bar:focus-within { opacity: 1; transform: none; pointer-events: auto; }

/* Cards fade in on scroll: never keep focused content invisible. */
.js .card:focus-within { opacity: 1; transform: none; }

/* --- Legal links in the footer --- */
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }

/* --- Contact form --- */
.contact-form { margin-top: 22px; display: grid; gap: 14px; }
.contact-form .form-field { display: grid; gap: 6px; }
.contact-form label { font-weight: 700; font-size: 0.95em; color: var(--ink, #141414); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink, #141414);
  background: #fff;
  border: 2px solid #d6d6d6;
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color .2s ease;
}
.contact-form textarea { resize: vertical; min-height: 7.5em; }
.contact-form input:hover,
.contact-form textarea:hover { border-color: #9a9a9a; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { border-color: var(--red, #E32734); outline: 3px solid var(--ink, #141414); outline-offset: 2px; }
.contact-form [aria-invalid="true"] { border-color: var(--red-deep, #B81E29); }

.field-error { margin: 0; font-size: 0.9em; font-weight: 700; color: var(--red-deep, #B81E29); }
.field-error[hidden] { display: none; }

.form-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.form-consent input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--red, #E32734); }
.form-consent label { font-weight: 400; font-size: 0.92em; }
.form-consent a, .form-legal a { color: var(--red-deep, #B81E29); }

.form-legal { margin: 0 !important; font-size: 0.78em; line-height: 1.5; color: var(--muted, #4a4a4a); }

.contact-form .actions { margin-top: 4px; }
.contact-form button { border: 0; cursor: pointer; }
.contact-form button[disabled] { opacity: .7; cursor: progress; transform: none; }

.form-status { margin: 0 !important; font-weight: 700; }
.form-status:empty { display: none; }
.form-status:focus { outline: none; }
.form-status[data-state="success"] { color: var(--ink, #141414); padding: 12px 14px; border-left: 4px solid var(--red, #E32734); background: #fdf1f2; border-radius: 8px; }
.form-status[data-state="error"] { color: var(--red-deep, #B81E29); }

/* Honeypot: off-screen rather than display:none (some bots skip hidden fields). */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .contact-form input, .contact-form textarea { transition: none; }
}