/* Black Water — customer scheduling form (/book.html).
   Adds ONLY what the shared marketing sheet (site.css) does not already carry. Every colour is
   pulled from site.css's custom properties so this page cannot drift away from the brand, and the
   contrast pairs below were chosen against the same --cream / --navy the rest of the site uses.

   Accessibility rules that are load-bearing here, not decoration:
     - every interactive control clears 44x44 CSS px (WCAG 2.2 AA, 2.5.8 Target Size Minimum);
     - focus is visible on a dark AND a light background (site.css sets :focus-visible globally,
       this sheet never removes an outline);
     - error text is never colour-alone — it carries the "!" marker and is wired to its field with
       aria-describedby in the markup;
     - the whole sheet respects prefers-reduced-motion: there is no transition a reduced-motion
       user still receives. */

.book-head{background:var(--navy);color:var(--cream);padding:48px 0 40px}
.book-head h1{color:var(--cream);margin-bottom:.35em}
.book-head .lede{color:#d7dee6;max-width:56ch;font-size:1.08rem;margin:0}

.book-body{padding:36px 0 64px}
.book-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:36px;align-items:start}
@media(max-width:860px){.book-grid{grid-template-columns:minmax(0,1fr);gap:28px}}

/* ---- the form ---- */
.bookform{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-width:0}
@media(max-width:560px){.bookform{padding:18px}}

.fset{border:0;padding:0;margin:0 0 26px}
.fset>legend{padding:0;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:14px}
.subfset{border:1px solid var(--line);border-radius:10px;padding:14px 14px 8px;margin:0 0 18px}
.subfset>legend{padding:0 6px;font-size:.82rem;font-weight:700;color:var(--navy)}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.row2{grid-template-columns:1fr;gap:0}}

.field{margin:0 0 18px;min-width:0}
.field>label{display:block;font-size:.86rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.field .req{font-weight:600;color:var(--muted);font-size:.78rem;letter-spacing:0}

.bookform input[type=text],
.bookform input[type=tel],
.bookform input[type=email],
.bookform input[type=date],
.bookform select,
.bookform textarea{
  display:block;width:100%;min-height:48px;padding:12px;border:1px solid #93a1b0;border-radius:10px;
  background:#fff;color:var(--ink);font:inherit;font-size:1rem
}
.bookform textarea{min-height:96px;resize:vertical}
.bookform select{appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.bookform input:focus,.bookform select:focus,.bookform textarea:focus{border-color:var(--navy)}
/* A field the validator rejected: red border AND the "!" line under it AND aria-invalid in the
   DOM. Three signals, only one of which is colour. */
.bookform [aria-invalid="true"]{border-color:#a4271b;border-width:2px}

.fhint{margin:6px 0 0;font-size:.84rem;color:var(--muted);line-height:1.45}
.ferr{margin:6px 0 0;font-size:.86rem;font-weight:600;color:#8f2114;line-height:1.45}
.ferr::before{content:"! ";font-weight:700}

/* ---- radios + checkbox: real controls, 44px rows, no custom-painted fakes ---- */
.radios{display:flex;flex-direction:column;gap:2px}
.radio,.check{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 4px;cursor:pointer;font-size:.98rem;color:var(--ink);line-height:1.4}
.radio input,.check input{width:22px;height:22px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--brass-deep)}
.radio span,.check span{padding-top:1px}
.consent{margin-top:4px;padding:14px;background:var(--cream-2);border-radius:10px}

/* ---- error summary ---- */
.errsummary{border:2px solid #8f2114;border-left-width:6px;border-radius:10px;background:#fdf3f1;padding:14px 16px;margin:0 0 22px}
.errsummary h2{font-size:1rem;margin:0 0 8px;color:#8f2114}
.errsummary ul{margin:0;padding-left:20px}
.errsummary li{margin:0 0 4px;font-size:.92rem}
.errsummary a{color:#8f2114;font-weight:600}
.errsummary:focus-visible{outline:3px solid #8f2114;outline-offset:3px}

.book-submit{width:100%;margin-top:4px}
.formerr{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#fdf3f1;border:1px solid #8f2114;color:#8f2114;font-weight:600;font-size:.94rem}
.smallprint{margin:16px 0 0;font-size:.86rem;color:var(--muted)}

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

/* ---- confirmation ---- */
.bookdone{background:#fff;border:1px solid var(--line);border-left:6px solid var(--brass-deep);border-radius:var(--radius);padding:26px;min-width:0}
.bookdone h2{margin-bottom:.4em}
.bookdone .bd-ref{font-weight:700;color:var(--navy)}
.bookdone:focus-visible{outline:3px solid var(--brass-deep);outline-offset:3px}

/* ---- side note ---- */
.booknote{background:var(--cream-2);border-radius:var(--radius);padding:22px;min-width:0}
.booknote h2{font-size:1.15rem}
.booknote ol{margin:0 0 14px;padding-left:20px}
.booknote li{margin:0 0 8px}
.booknote p{margin:0;font-size:.94rem;color:var(--muted)}
.booknote a{color:var(--navy)}

.site-foot{background:var(--navy);color:#aebac7;padding:26px 0;font-size:.9rem}
.site-foot p{margin:0 0 6px}
.site-foot a{color:var(--cream)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}