/*
 * question-form.css — styles for the "Vraag of idee?" contact form (about.olwidu.com)
 * Version: 1.0.1
 * Created: 2026-07-21 UTC
 *
 * Self-contained module (file-isolation principle): all styles live here under
 * the .olw-qf- prefix. Removing the feature = delete this file + question-form.js
 * + the marked mount snippet in about.olwidu.com/index.html.
 *
 * Production location: https://olwidu.com/assets/question-form.css
 * (flat assets/ folder, same as olwidu.css)
 *
 * Context: rendered inside the dark Contact CTA card (.olw-section--dark) so text
 * defaults to light-on-navy. Uses olwidu.css tokens.
 *
 * Changelog:
 * - v1.0.1 (2026-07-21): Spinner-fix — .olw-qf__spinner[hidden] toegevoegd; de
 *   display:inline-block overschreef anders het hidden-attribuut → spinner stond
 *   permanent zichtbaar naast "Versturen".
 * - v1.0.0 (2026-07-21): Initial release — toggle button → inline form → success,
 *   validation, focus rings (site green), spinner, prefers-reduced-motion.
 */

.olw-qf {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.olw-qf__state { animation: olw-qf-in 0.25s ease-out; }
@keyframes olw-qf-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* state 0: the toggle button sits centered like the original CTA */
.olw-qf__toggle-wrap { text-align: center; }

/* screen-reader-only (email/message have visible labels, but keep util handy) */
.olw-qf__sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.olw-qf__field { margin-bottom: var(--space-4); }
.olw-qf__field label {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}

.olw-qf__input,
.olw-qf__textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  font-family: inherit;
  color: var(--olw-navy, #1F2937);
  background: var(--olw-white);
}
.olw-qf__textarea {
  min-height: 120px;
  resize: vertical;
}
.olw-qf__input:focus-visible,
.olw-qf__textarea:focus-visible,
.olw-qf button:focus-visible {
  outline: 3px solid var(--olw-green-light);
  outline-offset: 2px;
}

/* errors — light red, readable on dark navy */
.olw-qf__error {
  color: #FCA5A5;
  font-size: 0.85rem;
  margin: var(--space-2) 0 0;
}
.olw-qf__error--banner {
  background: rgba(220, 38, 38, 0.18);
  border: 1px solid rgba(252, 165, 165, 0.5);
  border-radius: 8px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.olw-qf__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.olw-qf__cancel {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  padding: var(--space-2);
}
.olw-qf__cancel:hover { color: var(--olw-white); text-decoration: underline; }

.olw-qf__spinner {
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: var(--space-2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--olw-white);
  border-radius: 50%;
  vertical-align: -2px;
  animation: olw-qf-spin 0.8s linear infinite;
}
/* attribute+class specificity beats the display:inline-block above, so [hidden] truly hides it */
.olw-qf__spinner[hidden] { display: none; }
@keyframes olw-qf-spin { to { transform: rotate(360deg); } }

/* state 2: success */
.olw-qf__success { text-align: center; }
.olw-qf__success-title {
  color: var(--olw-green-light);
  font-family: var(--olw-font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.olw-qf__success-title:focus { outline: none; }
.olw-qf__success-body { color: rgba(255, 255, 255, 0.85); }

@media (prefers-reduced-motion: reduce) {
  .olw-qf__state { animation: none; }
  .olw-qf__spinner { animation: none; opacity: 0.6; }
}