/* ==========================================================================
   CONTACT
   The enquiry form and the location map.
   ========================================================================== */

/* ==========================================================================
   CONTACT — page-specific CSS
   The page hero, breadcrumbs, "worth knowing" grid, FAQ accordion, closing
   CTA, header and footer all come from the shared stylesheet; the NAP card
   from nap.css. Only the enquiry form is defined here.
     [CSS] this block -> assets/css/contact.css
   ========================================================================== */
.enq{
  background:var(--sand-lite);
  padding:clamp(2.5rem,4.6vw,5rem) var(--gutter) var(--section-y-lg);
  scroll-margin-top:var(--header-h);
}
.enq__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,24rem);
  gap:clamp(1.75rem,4vw,4.5rem);
  align-items:start;
}
/* --- The form ------------------------------------------------------------- */
/* --fpad* are shared by the input padding and by the absolutely-positioned
   date overlay, so the painted US date sits exactly where the native text
   would have. Fixed rem rather than clamp() on purpose: the two have to agree
   to the pixel at every width, and a clamp resolves differently per element. */
.form{
  --fpadx:1rem;
  --fpady:.95rem;
  margin:0;
}
.form__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,1.5vw,1.25rem);
}
.form__field{margin:0;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.form__field--wide{grid-column:1 / -1}
.form__label{
  font-size:.875rem;
  line-height:1.4;
  color:var(--text-body);
}
/* "(required)" is a word, not a red asterisk and not a color — the state has
   to survive being read aloud and being seen by someone who cannot tell the
   asterisk apart from the label. */
.form__req{color:#7A4119}
.form__opt{color:var(--text-muted)}
.form__input,.form__select,.form__textarea{
  width:100%;
  appearance:none;-webkit-appearance:none;
  margin:0;
  padding:var(--fpady) var(--fpadx);
  font:inherit;
  font-size:1rem;            /* never below 16px: iOS zooms the page otherwise */
  line-height:1.3;
  color:var(--ink);
  background:var(--white);
  border:1px solid rgba(120,105,85,.42);
  border-radius:8px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.form__textarea{
  min-height:9.5rem;
  line-height:1.55;
  resize:vertical;
}
.form__select{
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235A5247' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:13px auto;
  cursor:pointer;
}
.form__input:hover,.form__select:hover,.form__textarea:hover{border-color:rgba(120,105,85,.7)}
.form__input:focus-visible,.form__select:focus-visible,.form__textarea:focus-visible{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(17,110,156,.22);
}
/* Native validation styling, but only once the field has been touched and
   left — :invalid alone paints every empty required field red on page load. */
.form__input:user-invalid,.form__select:user-invalid,.form__textarea:user-invalid{
  border-color:#9A4A1C;
  box-shadow:0 0 0 3px rgba(154,74,28,.16);
}
.form__hint{
  margin:.1rem 0 0;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--text-soft);
}
/* --- Date fields ---------------------------------------------------------- */
/* The control keeps .field__control so the one shared date script picks it up
   and paints the value as US MM/DD/YYYY whatever the browser's locale is. That
   class was written for the dark hero panel, so the three colour declarations
   it carries are re-stated here for a white field. */
.form .field__value-wrap{display:block;position:relative}
.form .field__control[type="date"]{
  padding:var(--fpady) var(--fpadx);
  color:var(--ink);
  background:var(--white);
  border:1px solid rgba(120,105,85,.42);
  border-radius:8px;
  font-size:1rem;line-height:1.3;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}
/* Re-assert the transparency the shared rule asks for. That rule is
   `.field__control[type="date"]:not(:focus)` — the same specificity as the
   `.form .field__control[type="date"]` block above, which comes later in the
   sheet and so was winning and painting the browser's own locale text
   underneath the US overlay. Two dates, stacked. */
.form .field__control[type="date"]:not(:focus){color:transparent}
.form .field__control[type="date"]:not(:focus)::-webkit-datetime-edit{color:transparent}
.form .field__control[type="date"]:hover{border-color:rgba(120,105,85,.7)}
.form .field__control[type="date"]:focus-visible{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(17,110,156,.22);
}
.form .field__display{
  left:var(--fpadx);
  top:calc(var(--fpady) + 1px);
  font-size:1rem;line-height:1.3;
  color:var(--ink);
}
.form .field__control[type="date"].is-empty + .field__display{color:var(--text-muted)}
/* --- Honeypot ------------------------------------------------------------- */
/* Off-screen rather than display:none — a bot reading the stylesheet skips
   hidden fields, and a screen reader skips this one because of aria-hidden
   and the negative tabindex on the input itself. */
.form__trap{
  position:absolute !important;
  width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
/* --- Consent + submit ----------------------------------------------------- */
.form__consent{
  margin:clamp(1rem,1.8vw,1.4rem) 0 0;
  font-size:.8125rem;line-height:1.6;color:var(--text-soft);
  max-width:52ch;
}
.form__consent a{
  color:var(--brand);text-decoration:none;
  border-bottom:1px solid var(--link-line);
}
.form__consent a:hover,.form__consent a:focus-visible{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
.form__actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1rem,2.4vw,2rem);
  margin-top:clamp(1.1rem,2vw,1.6rem);
}
.form__submit{
  padding:1.15em 3.1em;
  background:var(--brand);color:var(--cream);border-color:var(--brand);
  border-radius:8px;
  min-height:3rem;
}
.form__submit:hover,.form__submit:focus-visible{background:var(--brand-deep);border-color:var(--brand-deep)}
.form__submit:focus-visible{outline-offset:3px}
.form__aside{
  margin:0;font-size:.875rem;line-height:1.5;color:var(--text-body);
}
.form__aside a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(17,110,156,.42);
}
.form__aside a:hover,.form__aside a:focus-visible{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
/* --- Server-rendered result panels ---------------------------------------- */
/* Rendered by the controller after the POST, never faked in the browser. An
   enquiry is only "sent" once something has accepted it. */
.form__panel{
  margin:0 0 clamp(1.1rem,2vw,1.5rem);
  padding:clamp(.9rem,1.6vw,1.2rem) clamp(1rem,1.8vw,1.35rem);
  border-radius:8px;
  border:1px solid;
  font-size:.9375rem;line-height:1.6;
}
.form__panel--ok{background:rgba(17,110,156,.07);border-color:rgba(17,110,156,.4);color:#14171A}
.form__panel--err{background:rgba(154,74,28,.07);border-color:rgba(154,74,28,.45);color:#5F2E11}
.form__panel p{margin:0}
.form__panel p + p{margin-top:.4rem}
.form__panel ul{margin:.4rem 0 0;padding-left:1.1rem}
/* --- The "already staying" note ------------------------------------------- */
.staying{
  margin:clamp(1.25rem,2.2vw,1.75rem) 0 0;
  padding:clamp(1rem,1.9vw,1.5rem);
  border:1px solid var(--line-strong);
  border-left:3px solid var(--tan);
  border-radius:8px;
  background:rgba(255,255,255,.55);
}
.staying h3{
  margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.25;color:var(--ink);
}
.staying p{
  margin:.45rem 0 0;font-size:clamp(.875rem,1.02vw,1rem);line-height:1.6;color:var(--text-body);
}
.staying a{
  color:var(--ink);font-weight:500;text-decoration:none;
  border-bottom:1px solid rgba(17,110,156,.45);
}
.staying a:hover,.staying a:focus-visible{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
@media (max-width:960px){
.enq__inner{grid-template-columns:1fr}
/* On a phone the fastest useful action is tapping the phone number, so the
     card goes above the form rather than below eight fields. */
.enq__rail{order:-1}
}
@media (max-width:560px){
.form__grid{grid-template-columns:1fr}
.form__field--half{grid-column:1 / -1}
.form__submit{width:100%;text-align:center;justify-content:center}
}

/* ==========================================================================
   LOCATION MAP — /contact/
   An OpenStreetMap iframe: no API key, no third-party cookies, nothing to
   consent to. Pinned on Huron rather than on any one house, because the
   thirteen homes are spread across the town and its neighbourhoods.
     [CSS] this block -> assets/css/map.css
   ========================================================================== */
.map{
  background:var(--sand-lite);
  padding:var(--section-y) var(--gutter) var(--section-y-lg);
  scroll-margin-top:var(--header-h);
}
/* aspect-ratio only, with no max-height: a ratio plus a height cap makes the
   browser shrink the WIDTH to keep the proportion, which is how the opening
   photograph ended up stranded off the gutter earlier in this build. */
.map__frame{
  position:relative;
  aspect-ratio:16/9;
  margin-top:var(--block-gap);
  border:1px solid rgba(120,105,85,.34);
  border-radius:14px;
  overflow:clip;
  /* a calm panel rather than a white hole if the embed is blocked, offline,
     or stripped by a privacy extension */
  background:#E6E1D8;
}
@media (min-width:1100px){
.map__frame{aspect-ratio:21/9}
}
.map__frame iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}
.map__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.4rem clamp(1rem,2vw,1.75rem);
  margin:clamp(.85rem,1.5vw,1.25rem) 0 0;
  font-size:clamp(.75rem,.88vw,.875rem);
  line-height:1.5;
  color:var(--text-soft);
}
.map__meta a{
  color:var(--brand);text-decoration:none;
  border-bottom:1px solid var(--link-line);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.map__meta a:hover,.map__meta a:focus-visible{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}