/* Forms on every page (the booking form on Visit, the enquiry form on Events). Load after site.css.
   A form gets class="form"; its thank-you gets class="form-done". Behaviour is in book.js / enquiry.js. */

/* The summary after a failed submit */
.form-errors { margin-bottom: 2rem; padding: 1.25rem 1.5rem; box-shadow: inset 0 0 0 2px var(--error); background: color-mix(in oklab, var(--error) 7%, transparent); outline: none; }
.form-errors h3 { margin: 0 0 0.6rem; text-transform: none; letter-spacing: 0; font-size: 1.1rem; }
.form-errors ul { display: grid; gap: 0.35rem; margin: 0; padding-left: 1.2rem; }
.form-errors a { color: var(--error); font-weight: 600; text-underline-offset: 0.2em; }

/* Fields: label above, hint and error under */
.field { display: grid; align-content: start; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; font-weight: 600; font-size: 0.95rem; }
fieldset.field > legend { margin-bottom: 0.5rem; }
.field__hint { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.field__error { margin: 0; font-size: var(--sc-t-sm); font-weight: 600; color: var(--error); }
.field__error a { color: inherit; }
.opt { font-weight: 400; color: var(--sc-ink-soft); }
/* :where() keeps these at the weight of one class, so any more specific style (the sentence picker) wins. */
.form :where(input:not([type="radio"]):not([type="hidden"]), select, textarea) {
  width: 100%; height: 3.25rem; padding: 0 1rem; border: 1px solid var(--field-line); border-radius: 0; background: var(--sc-canvas); color: var(--sc-ink); font: inherit; color-scheme: dark;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out); }
.form :where(textarea) { height: auto; min-height: 6.5rem; padding: 0.85rem 1rem; resize: vertical; line-height: 1.5; }
.form :where(select) { appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23ada596' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center; }
.form :is(input, select, textarea)::placeholder { color: #8a8378; }
@media (hover: hover) and (pointer: fine) { .form :where(input:not([type="radio"]), select, textarea):where(:not(:disabled)):hover { border-color: color-mix(in oklab, var(--sc-ink) 55%, transparent); } }
.form :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.form :is(select, input):disabled { opacity: 0.55; cursor: not-allowed; }

/* Choices as buttons. The radios are visually hidden but keep their keyboard behaviour
   (arrow keys move within a group). */
.chip-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chips__row { position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips__group { margin: 0.25rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; color: var(--sc-ink-soft); }
.chip { display: inline-flex; align-items: center; justify-content: center; min-width: 3.4rem; height: 3rem; padding: 0 1rem; background: var(--sc-canvas); box-shadow: inset 0 0 0 1px var(--field-line); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .chip-input:not(:checked):not(:disabled) + :is(.chip, .cal__day):hover { background: color-mix(in oklab, var(--sc-ink) 10%, var(--sc-canvas)); } }
.chip-input:checked + :is(.chip, .cal__day) { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: none; }
.chip-input:focus-visible + :is(.chip, .cal__day) { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

/* Details in two columns; the spam trap; the send row */
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; margin-top: 2rem; }
.field--wide { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* spam trap: people never see it */
.form-submit { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.25rem; }
.form-submit p { margin: 0; max-width: 38ch; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.btn:disabled { opacity: 0.7; cursor: progress; }

/* The thank-you that replaces the form */
.form-done { margin-top: 2.25rem; outline: none; }
.form-done h3 { margin: 0; text-transform: uppercase; letter-spacing: 0; font-weight: 850; font-stretch: 62%; font-size: clamp(2.6rem, 3.6vw, 3.6rem); line-height: 0.9; }
.form-done p { margin: 1rem 0 0; max-width: 46ch; font-size: var(--sc-t-lg); line-height: 1.55; color: var(--sc-ink-soft); }
.form-done p b { color: var(--sc-ink); font-weight: 600; }
.form-done .concept-note { padding: 0.8rem 1rem; background: color-mix(in oklab, var(--sc-ink) 6%, transparent); font-size: var(--sc-t-sm); }
.form-done .btn { margin-top: 1.75rem; }

/* Phone: one field per row; 16px or more in fields, so phones don't zoom in when you tap one */
@media (max-width: 640px) {
  .details { grid-template-columns: 1fr; gap: 1.25rem; }
  .form :where(input:not([type="radio"]):not([type="hidden"]), select, textarea) { font-size: max(1rem, 16px); }
  .form-submit { gap: 1rem; }
  .form-submit .btn { width: 100%; }
  .form-errors { padding: 1rem 1.1rem; }
}