/* =====================================================================
   questionnaire.css: the Questionnaire section
   (partials/site/questionnaire.html)
   ---------------------------------------------------------------------
   A centered column holding the form fields, an error line
   (.form__status, hidden while empty) and a "thank you" card shown
   after sending. The behaviour lives in js/questionnaire.js.
   ===================================================================== */

.questionnaire { padding: 80px 64px; }
.questionnaire__col { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.questionnaire__header { display: flex; flex-direction: column; gap: 16px; text-align: center; }
.questionnaire__intro { color: var(--muted); }
.form { display: flex; flex-direction: column; gap: 24px; }
/* Required marker after a label, and the "* Required fields" note above the fields */
.req { color: var(--olive); }
.form__legend { margin-bottom: -8px; font-size: 13px; color: var(--subtle); text-align: right; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0 16px; height: 52px;
  border: 1px solid var(--input); border-radius: 4px; background-color: var(--paper);
  font: 400 16px/1.5 var(--sans); color: var(--ink);
}
.field textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; }
.field textarea::placeholder { color: var(--subtle); opacity: .7; }
/* Custom chevron instead of the browser's default select arrow */
.field select {
  appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A60' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
/* Yes/No radios (a fieldset, so the legend plays the label's role) */
.field--choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.field--choice legend { padding: 0; margin-bottom: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.choices { display: flex; gap: 32px; }
.choice { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 16px; color: var(--ink); }
.field .choice input { width: 20px; height: 20px; padding: 0; margin: 0; accent-color: var(--olive); cursor: pointer; }
.field .choice input:focus { box-shadow: none; }
.field .choice input:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.field .choice input[aria-invalid="true"] { outline: 2px solid #A04A3A; outline-offset: 2px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(94, 107, 71, .15); }
.field input[aria-invalid="true"] { border-color: #A04A3A; }
.form__status { min-height: 0; font-size: 14px; color: #A04A3A; }
.form__status:empty { display: none; }
.thanks {
  padding: 48px 32px; border-radius: 4px; background: var(--olive); color: var(--paper);
  text-align: center; display: flex; flex-direction: column; gap: 12px; outline: none;
}
.thanks__title { font: 400 36px/1.1 var(--serif); }

/* Thank-you card entrance: the card rises in, the check mark draws itself,
   then the text and button fade up one after another. js/questionnaire.js
   adds .is-appearing (to the card, or to the form after "Send another"). */
.thanks { align-items: center; }
.thanks__check { width: 56px; height: 56px; margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* --len is each stroke's length: a dash that long, fully offset, is invisible */
.thanks__check circle { --len: 151; opacity: .5; }
.thanks__check path { --len: 36; }
.thanks__check * { stroke-dasharray: var(--len); }
.thanks__again { margin-top: 12px; height: 48px; border-color: rgba(255, 253, 248, .5); color: var(--paper); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.thanks__again:hover { background: rgba(255, 253, 248, .12); border-color: var(--paper); }
.thanks__again:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

.thanks.is-appearing { animation: card-in .6s cubic-bezier(.2, .7, .2, 1) both; }
.thanks.is-appearing .thanks__check circle { animation: draw .7s ease-out .2s both; }
.thanks.is-appearing .thanks__check path { animation: draw .4s ease-out .7s both; }
.thanks.is-appearing > :not(svg) { animation: rise .5s ease both; }
.thanks.is-appearing > :nth-child(2) { animation-delay: .5s; }
.thanks.is-appearing > :nth-child(3) { animation-delay: .65s; }
.thanks.is-appearing > :nth-child(4) { animation-delay: .9s; }
.form.is-appearing { animation: rise .5s ease both; }

@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }