/* ==========================================================================
   QUOTE — templates/quote.php  (/quote/)
   Needs: style.css + css/base-inner.css. JS: js/quote.js.
   Rules are quote.html's own; former inline styles are the q- classes.
   The form is Contact Form 7 (cf7/quote-form.txt); shared CF7 basics are in css/cf7.css.
   ========================================================================== */

/* ── HERO — photo band ── */
.q-hero { position: relative; overflow: hidden; padding: 0; border-bottom: 1px solid var(--rule); }
.q-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.q-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19,17,16,.55), rgba(19,17,16,.35)); }
.q-hero-in { position: relative; padding-top: clamp(64px, 10vw, 110px); padding-bottom: clamp(64px, 10vw, 110px); text-align: center; }
.q-hero .q-hero-eb { color: rgba(255,255,255,.85); }
.q-hero-h1 { margin-top: 12px; color: #fff; }
.q-hero-sub { margin: 14px auto 0; color: rgba(255,255,255,.82); max-width: 520px; }

/* ── FORM + SIDE RAIL ── */
.q-main { padding: clamp(36px, 6vw, 64px) 0; }
#qcols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
@media (max-width: 900px) {
  #qcols { grid-template-columns: 1fr !important; gap: 24px !important; }
}

.formcard { background: #fff; border: 1px solid var(--rule); padding: 40px 36px; }
.formcard.q-card { padding: 0; overflow: hidden; border: 1px solid var(--rule); background: #fff; }
.q-card-top { position: relative; height: 150px; overflow: hidden; }
.q-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.q-card-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(19,17,16,.55), rgba(19,17,16,.1)); }
.q-card-cap { position: absolute; left: 22px; bottom: 14px; color: #fff; }
.q-card-k { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.q-card-t { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 19px; margin-top: 2px; }

#qform { padding: 26px 22px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
@media (max-width: 640px) {
  #qform { grid-template-columns: 1fr !important; }
}
.qf { display: flex; flex-direction: column; gap: 7px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.qfull { grid-column: 1/-1; }
.qf input, .qf textarea, .qf select, #qdw { font-family: azo-sans-web, 'Inter', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 16px; color: var(--head); background: var(--cream); border: 1px solid var(--rule); padding: 13px 14px; letter-spacing: normal; text-transform: none; width: 100%; border-radius: 0; -webkit-appearance: none; }
.qf input:focus, .qf textarea:focus, #qdw:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(173,161,117,.18); }
.qf textarea { resize: vertical; min-height: 96px; }
.qseg { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 12px 22px; border: 1px solid var(--rule); background: #fff; color: var(--body); cursor: pointer; }
.qseg.sel { border-color: var(--gold-ink); color: var(--gold-ink); background: var(--cream2); }

.q-segrow { display: flex; gap: 8px; margin-top: 8px; }
.qf .q-segrow [data-name="designer"] { display: none; flex: 1; }           /* design: #qdw display:none, shown by "Yes" */
.qf .q-segrow.is-yes [data-name="designer"] { display: block; }
.q-prefwrap { margin-top: 12px; }
.q-segrow.is-yes + .q-prefwrap { display: none; }
.q-pref-l { margin-bottom: 7px; }
.q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 2px; }
/* Design: .btn-gold sets no background on inner pages, so the button shows the browser's
   default button grey (#efefef in Chrome) — pinned here so every browser matches. */
.btn.btn-gold.q-submit { border: 0; background: #efefef; color: var(--head, #1c1a17); }
.q-note { font-size: 12px; color: var(--body); }
.q-alt { text-align: center; font-size: 12.5px; color: var(--body); margin-top: 12px; }
.q-missing { padding: 26px 22px 24px; font-size: 14px; line-height: 1.7; color: var(--body); }

/* ── SIDE RAIL ── */
.q-rail { display: flex; flex-direction: column; gap: 14px; }
.q-box { background: var(--cream2); border: 1px solid var(--rule); padding: 22px; }
.q-box--steps { padding: 22px 22px 18px; }
.q-eb12 { margin-bottom: 12px; }
.q-eb10 { margin-bottom: 10px; }
.q-step { display: flex; gap: 12px; margin-bottom: 12px; }
.q-step--last { margin-bottom: 0; }
.q-step-n { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--gold-ink); padding-top: 2px; }
.q-step-p { font-size: 13.5px; line-height: 1.65; color: var(--body); }
.q-phone { font-size: 15px; color: var(--head); margin-bottom: 4px; }
.q-phone a { color: var(--head); }
.q-small { font-size: 12.5px; color: var(--body); line-height: 1.6; }
.q-mt10 { margin-top: 10px; }
.q-visit { font-size: 13.5px; color: var(--body); line-height: 1.65; }
.q-quote { border-left: 2px solid var(--gold); padding: 4px 0 4px 16px; }
.q-quote-p { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 14.5px; line-height: 1.7; color: var(--head); }
.q-quote-by { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--body); margin-top: 6px; }

/* ── CONTACT FORM 7 — field wrappers + messages (shared CF7 basics: css/cf7.css) ── */
.qf .wpcf7-form-control-wrap { display: block; }
.qf .wpcf7-form-control-wrap > input,
.qf .wpcf7-form-control-wrap > textarea,
.qf .wpcf7-form-control-wrap > select { display: block; }
/* Errors: the design's single message (#qerr) above the button; fields marked, no per-field tips. */
.qf .wpcf7-not-valid, .qf .wpcf7-not-valid:focus { border-color: #8a3b2e; }
#qform .wpcf7-response-output { grid-column: 1/-1; font-size: 12.5px; color: #8a3b2e; }
#qform .wpcf7-response-output:empty,
#qform.init .wpcf7-response-output,
#qform.submitting .wpcf7-response-output,
#qform.resetting .wpcf7-response-output { display: none; }
#qform.sent .wpcf7-response-output { color: var(--body); }
#qform.submitting .q-submit { pointer-events: none; }
/* Sending: js/quote.js marks the button .is-busy from submit until the thank-you redirect.
   The label stays in place (transparent) so the button keeps its size; a gold ring spins on top. */
.q-submit.is-busy { position: relative; color: transparent !important; cursor: progress; pointer-events: none; }
.q-submit.is-busy::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -10px 0 0 -10px; border: 2px solid rgba(173,161,117,.35); border-top-color: var(--gold-ink); border-radius: 50%; animation: q-spin .7s linear infinite; }
@keyframes q-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .q-submit.is-busy::after { animation-duration: 2s; } }
/* Cloudflare Turnstile: CF7 inserts the widget as the form's first child, so it took the
   first grid cell and pushed every field one cell along. Full width instead, and moved (order)
   to just above the response message and the button. Interaction-only: 0px tall until a
   challenge is needed. */
#qform > .wpcf7-turnstile { grid-column: 1/-1; order: 1; min-width: 0; }
#qform > .wpcf7-response-output, #qform > .q-actions { order: 2; }
p.q-alt {
    display: none !important;
}