/* ==========================================================================
   321 Study — Contact page styles
   Ported from contact.dc.html (helmet <style> block + Genesis Input/focus
   states that the dc page got from the design-system bundle).
   ========================================================================== */

/* ---- FAQ accordion (CSS-only details/summary) ---- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] svg.faq-chevron { transform: rotate(180deg); }

/* ---- Genesis Input (text fields) ---- */
.contact-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.contact-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--ring);
}

/* ---- style-focus on the select and textarea ---- */
.contact-field:focus {
  border-color: var(--border-focus);
  box-shadow: var(--ring);
  outline: none;
}