/*
      De Tussenstap – AUDIT alcoholzelftest v2
      Gebruik dit bestand als functioneel referentieprototype voor de WordPress-integratie.
      Op de introductie staat een vrijwillig, zelfstandig contactverzoek naast
      een even duidelijke route om zonder contactgegevens te starten.
      Na de volledige uitslag volgt op dezelfde pagina het algemene contactformulier.
      Beide formulieren zijn technisch gescheiden en mogen nooit antwoorden, score,
      uitslagcategorie of browserstate uit deze test ontvangen.
      Alle classes zijn genamespaced met dt-zelftest- om conflicten te voorkomen.
    */
    :root {
      --dt-zelftest-brown: #645e5b;
      --dt-zelftest-dark: #2a2a2a;
      --dt-zelftest-orange: #f9b130;
      --dt-zelftest-grey: #b2b2b2;
      --dt-zelftest-light: #f7f5f2;
      --dt-zelftest-white: #ffffff;
      --dt-zelftest-border: #dedbd8;
      --dt-zelftest-success: #2f6b4f;
      --dt-zelftest-warning: #8a5b00;
      --dt-zelftest-danger: #8a2f2f;
      --dt-zelftest-radius: 18px;
      --dt-zelftest-shadow: 0 18px 50px rgba(42, 42, 42, .10);
    }

    .dt-zelftest-app,
    .dt-zelftest-app * {
      box-sizing: border-box;
    }

    .dt-zelftest-app {
      width: 100%;
      max-width: 840px;
      margin: 32px auto;
      color: var(--dt-zelftest-dark);
      font-family: Roboto, Arial, sans-serif;
      line-height: 1.55;
    }

    .dt-zelftest-card {
      background: var(--dt-zelftest-white);
      border: 1px solid var(--dt-zelftest-border);
      border-radius: var(--dt-zelftest-radius);
      box-shadow: var(--dt-zelftest-shadow);
      overflow: hidden;
    }

    .dt-zelftest-accent {
      height: 8px;
      background: var(--dt-zelftest-orange);
    }

    .dt-zelftest-content {
      padding: clamp(24px, 5vw, 54px);
    }

    .dt-zelftest-eyebrow {
      margin: 0 0 10px;
      color: var(--dt-zelftest-brown);
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .dt-zelftest-title {
      margin: 0 0 18px;
      max-width: 720px;
      font-size: clamp(2rem, 5vw, 3.35rem);
      line-height: 1.07;
      letter-spacing: -.035em;
    }

    .dt-zelftest-lead {
      margin: 0 0 24px;
      max-width: 690px;
      color: var(--dt-zelftest-brown);
      font-size: clamp(1.04rem, 2.2vw, 1.25rem);
    }

    .dt-zelftest-info-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 28px 0;
    }

    .dt-zelftest-info {
      min-height: 94px;
      padding: 16px;
      background: var(--dt-zelftest-light);
      border-radius: 14px;
    }

    .dt-zelftest-info strong {
      display: block;
      margin-bottom: 4px;
      font-size: .96rem;
    }

    .dt-zelftest-info span {
      color: var(--dt-zelftest-brown);
      font-size: .9rem;
    }

    .dt-zelftest-note,
    .dt-zelftest-source {
      color: var(--dt-zelftest-brown);
      font-size: .9rem;
    }

    .dt-zelftest-source {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid var(--dt-zelftest-border);
    }

    .dt-zelftest-btn-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 28px;
    }

    .dt-zelftest-btn {
      appearance: none;
      min-height: 50px;
      padding: 13px 22px;
      border: 0;
      border-radius: 999px;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      text-decoration: none;
      text-align: center;
    }

    .dt-zelftest-btn:hover {
      transform: translateY(-1px);
    }

    .dt-zelftest-btn:focus-visible,
    .dt-zelftest-answer:focus-visible,
    .dt-zelftest-text-link:focus-visible {
      outline: 3px solid rgba(249, 177, 48, .55);
      outline-offset: 3px;
    }

    .dt-zelftest-btn-primary {
      color: var(--dt-zelftest-dark);
      background: var(--dt-zelftest-orange);
      box-shadow: 0 10px 24px rgba(249, 177, 48, .24);
    }

    .dt-zelftest-btn-secondary {
      color: var(--dt-zelftest-dark);
      background: var(--dt-zelftest-light);
      border: 1px solid var(--dt-zelftest-border);
    }

    .dt-zelftest-text-link {
      padding: 8px 0;
      border: 0;
      color: var(--dt-zelftest-brown);
      background: transparent;
      font: inherit;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .dt-zelftest-screen[hidden] {
      display: none !important;
    }

    .dt-zelftest-early-choice {
      margin: 26px 0 22px;
      padding: clamp(20px, 4vw, 28px);
      border: 1px solid var(--dt-zelftest-border);
      border-radius: 16px;
      background: #fffaf0;
    }

    .dt-zelftest-early-choice h2 {
      margin: 0 0 8px;
      font-size: clamp(1.3rem, 3vw, 1.65rem);
      line-height: 1.2;
    }

    .dt-zelftest-early-choice > p {
      margin: 0 0 18px;
      color: var(--dt-zelftest-brown);
    }

    .dt-zelftest-early-panel {
      margin-top: 18px;
    }

    .dt-zelftest-test-header {
      padding: 24px clamp(22px, 4vw, 42px) 0;
    }

    .dt-zelftest-progress-meta {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 9px;
      color: var(--dt-zelftest-brown);
      font-size: .86rem;
      font-weight: 700;
    }

    .dt-zelftest-progress {
      width: 100%;
      height: 9px;
      overflow: hidden;
      background: #ece9e6;
      border-radius: 999px;
    }

    .dt-zelftest-progress-bar {
      width: 0%;
      height: 100%;
      background: var(--dt-zelftest-orange);
      border-radius: inherit;
      transition: width .24s ease;
    }

    .dt-zelftest-question-wrap {
      min-height: 520px;
      padding: clamp(28px, 5vw, 54px);
    }

    .dt-zelftest-question-number {
      margin: 0 0 10px;
      color: var(--dt-zelftest-brown);
      font-size: .86rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .dt-zelftest-question {
      margin: 0 0 26px;
      max-width: 700px;
      font-size: clamp(1.55rem, 4vw, 2.35rem);
      line-height: 1.15;
      letter-spacing: -.025em;
    }

    .dt-zelftest-helper {
      margin: -12px 0 24px;
      color: var(--dt-zelftest-brown);
      font-size: .93rem;
    }

    .dt-zelftest-answers {
      display: grid;
      gap: 11px;
    }

    .dt-zelftest-answer {
      position: relative;
      width: 100%;
      min-height: 56px;
      padding: 15px 54px 15px 18px;
      border: 1px solid var(--dt-zelftest-border);
      border-radius: 14px;
      color: var(--dt-zelftest-dark);
      background: var(--dt-zelftest-white);
      font: inherit;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      transition: border-color .15s ease, background .15s ease, transform .15s ease;
    }

    .dt-zelftest-answer::after {
      content: "→";
      position: absolute;
      top: 50%;
      right: 19px;
      transform: translateY(-50%);
      color: var(--dt-zelftest-brown);
      font-size: 1.15rem;
    }

    .dt-zelftest-answer:hover {
      border-color: var(--dt-zelftest-orange);
      background: #fffaf0;
      transform: translateX(2px);
    }

    .dt-zelftest-answer[aria-pressed="true"] {
      border-color: var(--dt-zelftest-orange);
      background: #fff6e4;
    }

    .dt-zelftest-navigation {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 18px clamp(22px, 4vw, 42px) 26px;
      border-top: 1px solid var(--dt-zelftest-border);
    }

    .dt-zelftest-privacy {
      color: var(--dt-zelftest-brown);
      font-size: .8rem;
      text-align: right;
    }

    .dt-zelftest-result-band {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      padding: 8px 13px;
      border-radius: 999px;
      font-size: .88rem;
      font-weight: 800;
    }

    .dt-zelftest-result-band[data-level="none"],
    .dt-zelftest-result-band[data-level="low"] {
      color: var(--dt-zelftest-success);
      background: #eaf4ef;
    }

    .dt-zelftest-result-band[data-level="increasing"] {
      color: var(--dt-zelftest-warning);
      background: #fff3d8;
    }

    .dt-zelftest-result-band[data-level="high"],
    .dt-zelftest-result-band[data-level="very-high"] {
      color: var(--dt-zelftest-danger);
      background: #f9e5e5;
    }

    .dt-zelftest-result-title {
      margin: 0 0 14px;
      font-size: clamp(1.8rem, 4vw, 2.75rem);
      line-height: 1.12;
      letter-spacing: -.025em;
    }

    .dt-zelftest-result-copy {
      max-width: 700px;
      font-size: 1.06rem;
    }

    .dt-zelftest-result-copy p {
      margin: 0 0 16px;
    }

    .dt-zelftest-score-box {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin: 24px 0;
      padding: 20px;
      background: var(--dt-zelftest-light);
      border-radius: 14px;
    }

    .dt-zelftest-score-number {
      font-size: 2.3rem;
      font-weight: 900;
      line-height: 1;
    }

    .dt-zelftest-score-label {
      color: var(--dt-zelftest-brown);
      font-weight: 700;
    }

    .dt-zelftest-safety {
      margin: 24px 0;
      padding: 18px 20px;
      border-left: 5px solid var(--dt-zelftest-orange);
      background: #fff8e9;
      border-radius: 0 14px 14px 0;
    }

    .dt-zelftest-safety strong {
      display: block;
      margin-bottom: 5px;
    }

    .dt-zelftest-cta {
      margin-top: 30px;
      padding: clamp(22px, 4vw, 34px);
      color: var(--dt-zelftest-white);
      background: var(--dt-zelftest-dark);
      border-radius: 18px;
    }

    .dt-zelftest-cta h3 {
      margin: 0 0 9px;
      color: var(--dt-zelftest-white);
      font-size: clamp(1.35rem, 3vw, 1.85rem);
    }

    .dt-zelftest-cta p {
      margin: 0 0 20px;
      color: #e7e3e0;
    }

    .dt-zelftest-cta .dt-zelftest-btn-primary {
      display: inline-block;
    }

    .dt-zelftest-contact-form {
      display: grid;
      gap: 16px;
      margin-top: 24px;
    }

    .dt-zelftest-field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .dt-zelftest-field {
      display: grid;
      gap: 7px;
      color: var(--dt-zelftest-white);
      font-size: .94rem;
      font-weight: 750;
    }

    .dt-zelftest-field--full {
      grid-column: 1 / -1;
    }

    .dt-zelftest-field input,
    .dt-zelftest-field select,
    .dt-zelftest-field textarea {
      width: 100%;
      padding: 12px 14px;
      color: var(--dt-zelftest-dark);
      background: var(--dt-zelftest-white);
      border: 2px solid transparent;
      border-radius: 10px;
      font: inherit;
    }

    .dt-zelftest-field textarea {
      min-height: 112px;
      resize: vertical;
    }

    .dt-zelftest-field input:focus,
    .dt-zelftest-field select:focus,
    .dt-zelftest-field textarea:focus {
      border-color: var(--dt-zelftest-orange);
      outline: 3px solid rgba(249, 177, 48, .28);
      outline-offset: 1px;
    }

    .dt-zelftest-checkbox {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: #f4f1ee;
      font-size: .9rem;
    }

    .dt-zelftest-checkbox input {
      flex: 0 0 auto;
      width: 19px;
      height: 19px;
      margin-top: 2px;
      accent-color: var(--dt-zelftest-orange);
    }

    .dt-zelftest-checkbox a {
      color: var(--dt-zelftest-white);
      font-weight: 750;
      text-underline-offset: 3px;
    }

    .dt-zelftest-cta .dt-zelftest-form-hint,
    .dt-zelftest-cta .dt-zelftest-form-note {
      margin: -4px 0 0;
      color: #d9d4d0;
      font-size: .84rem;
    }

    .dt-zelftest-cta .dt-zelftest-form-error {
      margin: 0;
      color: #ffd5d5;
      font-weight: 750;
    }

    .dt-zelftest-cta .dt-zelftest-form-status {
      margin: 0;
      padding: 13px 15px;
      color: #183b2b;
      background: #dff2e7;
      border-radius: 10px;
      font-weight: 750;
    }

    .dt-zelftest-emergency {
      margin-top: 24px;
      color: var(--dt-zelftest-brown);
      font-size: .86rem;
    }

    .dt-zelftest-copy-status {
      min-height: 24px;
      margin-top: 10px;
      color: var(--dt-zelftest-success);
      font-size: .88rem;
      font-weight: 700;
    }

    @media (max-width: 680px) {
      .dt-zelftest-app {
        margin: 16px auto;
      }

      .dt-zelftest-info-grid {
        grid-template-columns: 1fr;
      }

      .dt-zelftest-field-grid {
        grid-template-columns: 1fr;
      }

      .dt-zelftest-card,
      .dt-zelftest-cta {
        border-radius: 14px;
      }

      .dt-zelftest-question-wrap {
        min-height: 560px;
      }

      .dt-zelftest-navigation {
        align-items: flex-start;
        flex-direction: column;
      }

      .dt-zelftest-privacy {
        text-align: left;
      }

      .dt-zelftest-btn-row .dt-zelftest-btn,
      .dt-zelftest-cta .dt-zelftest-btn {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .dt-zelftest-app *,
      .dt-zelftest-app *::before,
      .dt-zelftest-app *::after {
        scroll-behavior: auto !important;
        transition: none !important;
      }
    }
  
/* ------------------------------------------------------------------
   GetYos: koppeling met Contact Form 7
   De prototypeformulieren zijn vervangen door CF7-shortcodes. Deze
   regels zetten de CF7-opmaak terug naar het ontwerp van De Tussenstap
   en overrulen algemene themastijlen binnen .dt-zelftest-app.
   ------------------------------------------------------------------ */

.dt-zelftest-app .wpcf7 {
  margin: 0;
}

.dt-zelftest-app .wpcf7-form {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.dt-zelftest-app .wpcf7-form p {
  margin: 0;
}

.dt-zelftest-app .wpcf7-form-control-wrap {
  display: block;
}

.dt-zelftest-app .dt-zelftest-field input[type="text"],
.dt-zelftest-app .dt-zelftest-field input[type="email"],
.dt-zelftest-app .dt-zelftest-field input[type="tel"],
.dt-zelftest-app .dt-zelftest-field select,
.dt-zelftest-app .dt-zelftest-field textarea {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--dt-zelftest-border);
  border-radius: 12px;
  background: var(--dt-zelftest-white);
  color: var(--dt-zelftest-dark);
  font: inherit;
  box-shadow: none;
}

.dt-zelftest-app .dt-zelftest-field textarea {
  min-height: 118px;
  resize: vertical;
}

.dt-zelftest-app .dt-zelftest-field input:focus,
.dt-zelftest-app .dt-zelftest-field select:focus,
.dt-zelftest-app .dt-zelftest-field textarea:focus {
  border-color: var(--dt-zelftest-orange);
  outline: 3px solid rgba(249, 177, 48, .35);
  outline-offset: 1px;
}

.dt-zelftest-app .dt-zelftest-checkbox--cf7 .wpcf7-list-item {
  margin: 0;
}

.dt-zelftest-app .dt-zelftest-checkbox--cf7 label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--dt-zelftest-brown);
  font-size: .92rem;
  cursor: pointer;
}

.dt-zelftest-app .dt-zelftest-checkbox--cf7 input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
}

.dt-zelftest-app .dt-zelftest-checkbox--cf7 a {
  color: inherit;
}

.dt-zelftest-app .wpcf7-submit {
  width: auto;
}

.dt-zelftest-app .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: var(--dt-zelftest-danger);
  font-size: .85rem;
  font-weight: 700;
}

.dt-zelftest-app .dt-zelftest-field input.wpcf7-not-valid,
.dt-zelftest-app .dt-zelftest-field select.wpcf7-not-valid,
.dt-zelftest-app .dt-zelftest-field textarea.wpcf7-not-valid {
  border-color: var(--dt-zelftest-danger);
}

.dt-zelftest-app .wpcf7-response-output {
  margin: 4px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--dt-zelftest-border);
  border-radius: 12px;
  background: var(--dt-zelftest-light);
  color: var(--dt-zelftest-dark);
  font-size: .92rem;
}

.dt-zelftest-app .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--dt-zelftest-success);
  color: var(--dt-zelftest-success);
}

.dt-zelftest-app .wpcf7 form.invalid .wpcf7-response-output,
.dt-zelftest-app .wpcf7 form.unaccepted .wpcf7-response-output,
.dt-zelftest-app .wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--dt-zelftest-danger);
  color: var(--dt-zelftest-danger);
}

.dt-zelftest-app .wpcf7-spinner {
  margin: 0 0 0 10px;
}

@media (max-width: 720px) {
  .dt-zelftest-app .wpcf7-submit {
    width: 100%;
  }
}

/* Grid-kolom mag nooit breder worden dan de container; anders duwt de
   Turnstile-widget (vast 300px) alle velden buiten het donkere blok. */
.dt-zelftest-app .dt-zelftest-contact-form,
.dt-zelftest-app .wpcf7-form {
  grid-template-columns: minmax(0, 1fr);
}

.dt-zelftest-app .wpcf7-form > * {
  min-width: 0;
}

/* Fallback zonder JS: niet buiten het blok laten lopen. Met JS schaalt
   dt-zelftest.js de widget naar de breedte van de velden. */
.dt-zelftest-app .wpcf7-form .cf-turnstile,
.dt-zelftest-app .wpcf7-form .wpcf7-turnstile {
  max-width: 100%;
}

@media (max-width: 420px) {
  .dt-zelftest-app .dt-zelftest-cta {
    padding: 20px 16px;
  }
}