/*
 * newsletter-signup.css — styles for the two-step "Houd me op de hoogte" signup
 * Version: 1.1.1
 * Created: 2026-07-21 UTC
 * Spec: NEWSLETTER_SIGNUP_TECHNICAL_SPEC_v1_0_0.md
 *
 * Self-contained module (file-isolation principle): all newsletter styles live
 * here under the .olw-nsu- prefix. Removing the feature = delete this file +
 * newsletter-signup.js + the marked mount snippet in index.html.
 *
 * Production location: https://olwidu.com/assets/newsletter-signup.css
 * (flat assets/ folder, same as olwidu.css — NOT assets/css/, per site SSOT)
 *
 * Context: rendered inside the dark CTA card (.olw-card--dark) on the
 * homepage, so text defaults to light-on-navy. Uses olwidu.css tokens.
 *
 * Changelog:
 * - v1.1.1 (2026-07-21): Spinner-fix — .olw-nsu__spinner[hidden] toegevoegd; de
 *   display:inline-block overschreef anders het hidden-attribuut → spinner stond
 *   permanent zichtbaar naast "Aanmelden" (zelfde bug als question-form v1.0.1).
 * - v1.1.0 (2026-07-21): Mobile fix — the dark CTA card has 64px inline
 *   padding per side, leaving only ~199px input width on a 375px viewport.
 *   Scoped ≤600px override brings the signup-card padding down to space-6
 *   (!important needed to beat the inline style). Rule lives here so it
 *   disappears with the module (file-isolation intact).
 * - v1.0.0 (2026-07-21): Initial release — states 0/1/2, error styles,
 *   spinner, focus rings (site green), prefers-reduced-motion support.
 */

/* mobile: relax the signup-card's 64px inline padding so fields get room */
@media (max-width: 600px) {
  #signup .olw-card--dark {
    padding: var(--space-6) var(--space-4) !important;
  }
}

/* ---------- container ---------- */
.olw-nsu {
  max-width: 520px;
  margin: 0 auto var(--space-6);
  text-align: left;
}

/* state transitions: gentle fade/slide-in on each state container */
.olw-nsu__state {
  animation: olw-nsu-in 0.25s ease-out;
}
@keyframes olw-nsu-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- state 0 · email row ---------- */
.olw-nsu__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* screen-reader-only label (email field has no visible label, placeholder only) */
.olw-nsu__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-nsu__input {
  flex: 1 1 220px;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  font-family: inherit;
  color: var(--olw-navy, #1F2937);
  background: var(--olw-white);
  width: 100%;
}
.olw-nsu__input:focus-visible,
.olw-nsu__check input:focus-visible,
.olw-nsu__chip input:focus-visible,
.olw-nsu button:focus-visible {
  outline: 3px solid var(--olw-green-light);
  outline-offset: 2px;
}

/* ---------- state 1 · follow-up form ---------- */
.olw-nsu__intro {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-4);
}

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

/* checkbox rows (business + consent) */
.olw-nsu__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
  cursor: pointer;
}
.olw-nsu__check input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--olw-green);
  cursor: pointer;
}

/* organisation-type fieldset */
.olw-nsu__orgtypes {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin: 0 0 var(--space-4);
}
.olw-nsu__orgtypes legend {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  padding: 0 var(--space-2);
}
.olw-nsu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.olw-nsu__chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  cursor: pointer;
}
.olw-nsu__chip input {
  width: 16px;
  height: 16px;
  accent-color: var(--olw-green);
  cursor: pointer;
}

/* ---------- errors ---------- */
.olw-nsu__error {
  color: #FCA5A5; /* light red, readable on the dark navy card */
  font-size: 0.85rem;
  margin: var(--space-2) 0 0;
  flex: 1 1 100%;
}
.olw-nsu__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);
}

/* ---------- actions (submit + back) ---------- */
.olw-nsu__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.olw-nsu__back {
  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-nsu__back:hover {
  color: var(--olw-white);
  text-decoration: underline;
}

/* button spinner (visible while the POST is in flight) */
.olw-nsu__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-nsu-spin 0.8s linear infinite;
}
@keyframes olw-nsu-spin {
  to { transform: rotate(360deg); }
}
/* attribute+class specificity beats the display:inline-block above, so [hidden] truly hides it */
.olw-nsu__spinner[hidden] { display: none; }

/* ---------- state 2 · success ---------- */
.olw-nsu__success {
  text-align: center;
}
.olw-nsu__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-nsu__success-title:focus {
  outline: none; /* programmatic focus target only (tabindex="-1") */
}
.olw-nsu__success-body {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .olw-nsu__state { animation: none; }
  .olw-nsu__spinner { animation: none; opacity: 0.6; }
}