/* ============================================================
 Donato Architecture Studio — inquiry form component
 ------------------------------------------------------------
 Extracted in Prompt 305 (Audit AD, AD.07) from the inline
 <style> blocks of contact.html and services.html, which carried
 the same 62 rules under the same class names in two copies.
 The two Netlify forms remain deliberately separate (`contact`
 and `intake-services` — distinct names are required or Netlify
 silently drops one). It is only the STYLING that was duplicated.

 Loaded after css/site.css and BEFORE each page's own <style>,
 so a page-local rule of equal specificity still wins. Two such
 overrides exist on contact.html and are intentionally page-local:
 the (min-width: 901px) two-column .inquiry__grid beside the
 photo figure, and the (min-width: 901px) flex centering of
 .inquiry-start-zone against it (Prompts 257-262). services.html
 has neither and must not inherit them.
 ============================================================ */

.inquiry__grid {
  /* Prompt 124 — the WHY narrative (comment #62) was removed, so the
     form now stands alone under the heading. Constrain it to a
     comfortable entry width, left-aligned with the heading, rather
     than stretching the full shell.
     Prompt 257 — a supporting photo column (client-requested stair
     interior) joins at desktop: form keeps its 680px entry width in
     the first track, the portrait figure takes the second. The two
     tracks shrink proportionally below --maxw; under 900px the grid
     collapses and the figure stacks AFTER the reveal unit, so the
     Start control's position above the fold is untouched.
     Prompt 259 — collapsed-state composition: the figure track
     widens to 600px (natural aspect, no crop) and the columns
     switch to stretch so the collapsed left column can center its
     CTA against the plate's full height. (Prompt 260 removed 259's
     right-edge bleed; the figure respects the shell gutter.) */
  max-width: 680px;
}

/* FORM column --------------------------------------------- */
.form {
  border-top: 1px solid var(--ink);
  padding-top: 26px;
}

.field {
  display: block;
  margin: 0 0 18px 0;
  position: relative;
}

.field-row {
  /* Paired field grouping — title-block-style cells. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.field-row .field { margin-bottom: 0; }

.field__label {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 8px 0;
}

.field__label .req { color: var(--slate-deep); margin-left: 6px; }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  /* Prompt 34 wins preserved: visible fillable zone, ink bottom
     rule, graphite all-around border. Prompt 122 set padding to
     12px 15px (~48px control height) for a more substantial,
     professional field without bloating it. */
  background: #FCFCFC;
  border: 1px solid var(--graphite);
  border-bottom: 1px solid var(--ink);
  padding: 12px 15px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 280ms ease, background 280ms ease, box-shadow 280ms ease;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: #6F6F6F;
  opacity: 1;
}

.field__input:hover,
.field__select:hover,
.field__textarea:hover {
  background-color: var(--white);
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  background-color: var(--white);
  border-color: var(--ink);
  /* slate-deep drafting underline reads as an intentional brand
     accent rather than ink-on-ink */
  box-shadow: inset 0 -2px 0 0 var(--slate-deep);
}

/* Active field's label darkens graphite -> ink for orientation. */
.field:focus-within > .field__label,
.fieldset:focus-within > legend.field__label { color: var(--ink); }

.field__textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.55;
}

.field__select {
  background-color: #FCFCFC;
  /* Clean single chevron (graphite hairline) that darkens to
     slate-deep on focus — replaces the old dual-gradient triangle. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235A5A5A' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-position: right 15px center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}

.field__select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%233D4E62' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* Submit row ---------------------------------------------- */
.form__submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--ink);
  padding-top: 22px;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 18px;
}

.form__submit-meta {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1.5;
  max-width: 36ch;
}

/* Prompt 86 — contextual privacy note + link to the collection section
   (privacy.html#p02), per California DOJ guidance against linking only to
   the top of a policy. Sits below the submit row; .text-link is the
   existing site-wide component. */
.form__privacy { margin-top: 20px; }

.form__privacy-note {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1.5;
  margin: 0 0 8px 0;
  max-width: 52ch;
}

.submit {
  font-family: var(--display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 16px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  transition: background 320ms ease, color 320ms ease, transform 320ms ease;
}

.submit:hover {
  background: var(--slate-deep);
  border-color: var(--slate-deep);
}

.submit:active { transform: translateY(1px); }

.submit::after {
  content: "→";
  font-family: var(--display);
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1);
}

.submit:hover::after { transform: translateX(4px); }

.submit[disabled] {
  background: var(--rule);
  border-color: var(--rule);
  color: var(--paper);
  cursor: not-allowed;
}

/* Honeypot — Netlify bot detection (hidden field). Off-screen clip, not display:none — modern bots skip display:none, defeating the check. */
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Thank-you state */
.thanks {
  display: none;
  border-top: 1px solid var(--ink);
  padding: clamp(48px, 7vw, 96px) 0;
  text-align: left;
}

.thanks.is-active { display: block; }

.form.is-sent { display: none; }

.thanks__eye {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-deep);
  margin: 0 0 22px 0;
}

.thanks__head {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  margin: 0 0 22px 0;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.thanks__copy {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--graphite);
  margin: 0;
  max-width: 52ch;
}

/* ============================================================
   REVEAL-IN-PLACE inquiry (Prompt 121). The full intake form is
   collapsed behind a "Start a Project Inquiry" control so it
   doesn't read as a wall of fields (Arlene's ask). Progressive
   enhancement: without JS the form shows open and the control is
   hidden; the `.js` class (set in <head>) collapses the form and
   shows the control. grid-template-rows 0fr->1fr gives a clean
   height expand; `inert` (toggled in the page script) keeps the
   collapsed fields out of the tab order + a11y tree. Expand in
   place — no modal, no overlay, no lightbox.
   ============================================================ */
.inquiry-start-zone { display: none; }

.js .inquiry-start-zone { display: block; }

.js .inquiry-reveal.is-open .inquiry-start-zone { display: none; }

.inquiry-start {
  font-family: var(--display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 18px 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: background 320ms ease, border-color 320ms ease, transform 320ms ease;
}

.inquiry-start::after {
  content: "\2193";
  font-family: var(--display);
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1);
}

.inquiry-start:hover::after { transform: translateY(3px); }

.inquiry-start:hover { background: var(--slate-deep); border-color: var(--slate-deep); }

.inquiry-start:active { transform: translateY(1px); }

.inquiry-start:focus-visible { outline: 2px solid var(--slate-deep); outline-offset: 4px; }

.inquiry-form-wrap { display: grid; grid-template-rows: 1fr; }

.js .inquiry-form-wrap {
  grid-template-rows: 0fr;
  transition: grid-template-rows 480ms cubic-bezier(.2, .7, .2, 1);
}

.js .inquiry-reveal.is-open .inquiry-form-wrap { grid-template-rows: 1fr; }

.inquiry-form-wrap > form { min-height: 0; overflow: hidden; }

/* Fully collapse the form's own top border + padding so the closed
   state is 0px (no residual sliver); animate them back on open. */
.js .inquiry-form-wrap > form {
  border-top-width: 0;
  padding-top: 0;
  transition: padding-top 480ms cubic-bezier(.2, .7, .2, 1),
              border-top-width 480ms cubic-bezier(.2, .7, .2, 1);
}

.js .inquiry-reveal.is-open .inquiry-form-wrap > form {
  border-top-width: 1px;
  padding-top: 26px;
}

/* Y/N radio group + conditional follow-up */
.fieldset { border: 0; padding: 0; margin: 0 0 18px 0; min-width: 0; }

legend.field__label { padding: 0; }

.radio-row { display: flex; gap: 28px; margin-top: 2px; }

.radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}

/* Custom square selection control — zero-radius + hairline to match
   the drafting document-grid; a slate-deep square scales in on check.
   Reads more bespoke than a native OS radio. */
.radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid var(--graphite);
  background: #FCFCFC;
  border-radius: 0;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.radio input::before {
  content: "";
  width: 10px; height: 10px;
  background: var(--slate-deep);
  transform: scale(0);
  transition: transform 180ms cubic-bezier(.2, .7, .2, 1);
}

.radio input:hover { background: var(--white); }

.radio input:checked { border-color: var(--ink); background: var(--white); }

.radio input:checked::before { transform: scale(1); }

.radio input:focus-visible { outline: 2px solid var(--slate-deep); outline-offset: 3px; }

.conditional[hidden] { display: none; }

.conditional:not([hidden]) { animation: fieldIn 320ms ease; }

/* Conditional follow-up entrance. */
@keyframes fieldIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .field-row { grid-template-columns: 1fr; gap: 18px; }
  .field-row .field + .field { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
.submit::after { transition: none; }
.inquiry-start::after { transition: none; }
.js .inquiry-form-wrap,
  .js .inquiry-form-wrap > form { transition: none; }
.radio input::before { transition: none; }
.conditional:not([hidden]) { animation: none; }
}