/* ==========================================================================
   Enquiry form (contact section) — loads after theme.css
   Colours mix from the theme's band tokens so both themes and the picker work.
   ========================================================================== */
.enquiry {
  --f-ink: var(--band-ink, #f4f3f0);
  --f-muted: color-mix(in srgb, var(--f-ink) 60%, transparent);
  --f-line: color-mix(in srgb, var(--f-ink) 40%, transparent);
  --f-error: #f0a58f;
}

/* Fields */
.enquiry .field select {
  appearance: none; -webkit-appearance: none; width: 100%;
  background: transparent; border: none; border-bottom: 1px solid var(--f-line); border-radius: 0;
  padding: 10px 28px 10px 0; font-family: Archivo, sans-serif; font-size: 16px; line-height: 1.4;
  color: var(--f-ink); outline: none; cursor: pointer;
}
.enquiry .field select:focus { border-bottom-color: var(--f-ink); }
.enquiry .field select:has(option[value=""]:checked) { color: var(--f-muted); }
.enquiry .field select option { color: var(--ink); background: var(--bg); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-right: 1.5px solid var(--f-ink); border-bottom: 1.5px solid var(--f-ink);
  transform: rotate(45deg); pointer-events: none;
}

.enquiry .field input[type="file"] {
  border-bottom: none; padding: 4px 0 0; font-size: 14px; color: var(--f-muted); cursor: pointer;
}
.enquiry .field input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--f-line); background: transparent; color: var(--f-ink);
  font-family: Archivo, sans-serif; font-size: 14px; font-weight: 600;
}
.enquiry .field input[type="file"]::file-selector-button:hover { border-color: var(--f-ink); }
.field-hint { font-size: 13px; color: var(--f-muted); }

/* Category chips */
.chip-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.chip-group legend {
  padding: 0; margin-bottom: 14px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--f-ink) 55%, transparent);
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.enquiry .chip { position: relative; cursor: pointer; font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--f-ink); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--f-line);
  font-size: 15px; line-height: 1.3; color: var(--f-ink); transition: background-color 0.15s ease, border-color 0.15s ease;
}
.chip:hover span { border-color: var(--f-ink); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--f-ink); outline-offset: 2px; }

/* Consent checkboxes */
.checks { display: flex; flex-direction: column; gap: 14px; }
.check { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box {
  position: relative; flex: none; width: 18px; height: 18px; margin-top: 1px;
  border: 1px solid var(--f-line); border-radius: 3px; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.check:hover .check-box { border-color: var(--f-ink); }
.check input:checked + .check-box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check-box::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(45deg);
}
.check input:focus-visible + .check-box { outline: 2px solid var(--f-ink); outline-offset: 2px; }
.check a { text-decoration: underline; text-underline-offset: 2px; }

/* Errors and status */
.field-error { font-size: 13px; color: var(--f-error); }
.checks .field-error, .chip-group .field-error { display: block; margin-top: 10px; }
.enquiry .is-invalid input:not([type="checkbox"]):not([type="file"]),
.enquiry .is-invalid textarea,
.enquiry .is-invalid select { border-bottom-color: var(--f-error); }
.enquiry .is-invalid .chip span,
.enquiry .is-invalid .check-box { border-color: var(--f-error); }
.form-status { flex: 1 1 100%; margin: 0; font-size: 15px; line-height: 1.5; color: var(--f-ink); }
.form-status a { text-decoration: underline; text-underline-offset: 2px; }
.form-assurances {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--f-ink) 60%, transparent);
}
.form-assurances li { display: flex; align-items: center; gap: 8px; }
.form-assurances li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }
.enquiry button.btn { border: 0; font-family: inherit; cursor: pointer; }
.enquiry button.btn:disabled { opacity: 0.6; cursor: progress; }

/* Honeypot: off-screen for people, still in the form for bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sent / not sent (JS adds .is-sent; without JS the redirect targets the panel) */
.form-done { display: none; flex-direction: column; gap: 20px; align-self: start; padding-top: 8px; }
.form-done:focus { outline: none; }
.form-done-title { margin: 0; font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; max-width: 22ch; }
.form-done-title a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.form-done-back { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.enquiry.is-sent .contact-form,
.enquiry:has(.form-done:target) .contact-form { display: none; }
.enquiry.is-sent #enquiry-sent,
.form-done:target { display: flex; }

@media (max-width: 480px) {
  .enquiry button.btn { width: 100%; }
}

/* Quick form: a way on to the full brief */
.form-brief { flex: 1 1 100%; margin: 0; font-size: 15px; color: var(--f-muted); }
.form-brief a { color: var(--f-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.form-brief a::after { content: " \2192"; }
.form-done-more { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--f-muted); }
.form-done-cta { align-self: flex-start; }