/* ==========================================================================
   TalentMed Typing Speed Test — typing-test.css
   Scoped under .talentmed-typing-test to avoid Avada/theme conflicts.
   Brand colours: #0dafdf (blue), #a0ce4e (green), #e74c3c (red),
                  #f09a3e (orange), #f6f6f6 (bg), #333333 (dark), #747474 (body)
   ========================================================================== */

/* ------------------------------------------------------------------
   Step 1 — Base layout & wrapper
   ------------------------------------------------------------------ */

.talentmed-typing-test {
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
  font-family: inherit; /* Inter from Avada theme */
}

.talentmed-typing-test *,
.talentmed-typing-test *::before,
.talentmed-typing-test *::after {
  box-sizing: inherit;
}

/* Hide all screens by default; JS adds .tmtt-active to show one */
.talentmed-typing-test .tmtt-screen {
  display: none;
}

.talentmed-typing-test .tmtt-screen.tmtt-active {
  display: block;
}


/* ------------------------------------------------------------------
   Step 2 — Start screen
   ------------------------------------------------------------------ */

.talentmed-typing-test .tmtt-start-screen {
  text-align: center;
  padding: 40px 16px;
}

.talentmed-typing-test .tmtt-start-screen h1,
.talentmed-typing-test .tmtt-start-screen h2 {
  color: #333333;
}

.talentmed-typing-test .tmtt-start-screen p,
.talentmed-typing-test .tmtt-start-subheading {
  color: #747474;
}

.talentmed-typing-test .tmtt-start-btn {
  display: inline-block;
  background: #0dafdf;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: inherit;
}

.talentmed-typing-test .tmtt-start-btn:hover,
.talentmed-typing-test .tmtt-start-btn:focus {
  background: #0b9dc7;
}


/* ------------------------------------------------------------------
   Step 3 — Dashboard stat cards
   ------------------------------------------------------------------ */

.talentmed-typing-test .tmtt-stats {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-bottom: 24px;
}

.talentmed-typing-test .tmtt-stat-card {
  flex: 1;
  background: #f6f6f6;
  border: 1px solid #ebeaea;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.talentmed-typing-test .tmtt-stat-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

/* WPM value — TalentMed Blue */
.talentmed-typing-test .tmtt-stat-value--wpm {
  color: #0dafdf;
}

/* Accuracy value — Green */
.talentmed-typing-test .tmtt-stat-value--accuracy {
  color: #a0ce4e;
}

/* Timer value — dark by default, orange when under 10 s */
.talentmed-typing-test .tmtt-stat-value--timer {
  color: #333333;
}

.talentmed-typing-test .tmtt-timer-card.tmtt-warning .tmtt-stat-value {
  color: #f09a3e;
}

.talentmed-typing-test .tmtt-stat-label {
  display: block;
  font-size: 13px;
  color: #747474;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}


/* ------------------------------------------------------------------
   Step 4 — Word display area
   ------------------------------------------------------------------ */

.talentmed-typing-test .tmtt-words {
  background: #ffffff;
  border: 2px solid #ebeaea;
  border-radius: 12px;
  padding: 24px;
  font-size: 20px;
  line-height: 2;
  max-height: 160px;
  overflow: hidden;
  position: relative;
  word-break: break-word;
}

/* Individual word spans */
.talentmed-typing-test .tmtt-words span {
  display: inline;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

/* Current word — highlighted */
.talentmed-typing-test .tmtt-words .tmtt-current {
  color: #333333;
  background: #e8f7fb;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Correctly typed word */
.talentmed-typing-test .tmtt-words .tmtt-correct {
  color: #a0ce4e;
  background: transparent;
}

/* Incorrectly typed word */
.talentmed-typing-test .tmtt-words .tmtt-incorrect {
  color: #e74c3c;
  text-decoration: line-through;
  background: transparent;
}

/* Words not yet reached — WCAG AA compliant */
.talentmed-typing-test .tmtt-words .tmtt-upcoming {
  color: #767676;
  background: transparent;
}


/* ------------------------------------------------------------------
   Step 5 — Input field and progress bar
   ------------------------------------------------------------------ */

.talentmed-typing-test .tmtt-input {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  font-family: inherit;
  border: 2px solid #ebeaea;
  border-radius: 8px;
  margin-top: 16px;
  outline: none;
  transition: border-color 0.2s ease;
  background: #ffffff;
  color: #333333;
}

.talentmed-typing-test .tmtt-input:focus {
  border-color: #0dafdf;
}

.talentmed-typing-test .tmtt-progress {
  height: 4px;
  background: #ebeaea;
  border-radius: 2px;
  margin-top: 16px;
  overflow: hidden;
}

.talentmed-typing-test .tmtt-progress-fill {
  height: 100%;
  background: #0dafdf;
  border-radius: 2px;
  transition: width 1s linear;
  width: 0%;
}


/* ------------------------------------------------------------------
   Step 6 — Results screen
   ------------------------------------------------------------------ */

.talentmed-typing-test .tmtt-result-wpm {
  font-size: 72px;
  font-weight: 700;
  color: #0dafdf;
  text-align: center;
  line-height: 1;
  margin-bottom: 4px;
}

.talentmed-typing-test .tmtt-result-label {
  text-align: center;
  font-size: 14px;
  color: #747474;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.talentmed-typing-test .tmtt-result-stats {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 32px;
  font-size: 24px;
  color: #333333;
  margin-bottom: 24px;
}

.talentmed-typing-test .tmtt-benchmark-rating {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  text-align: center;
  margin: 8px 0;
}

.talentmed-typing-test .tmtt-benchmark-message {
  font-size: 16px;
  color: #747474;
  max-width: 500px;
  margin: 0 auto 24px;
  text-align: center;
  line-height: 1.5;
}


/* ------------------------------------------------------------------
   Step 7 — Email capture form
   ------------------------------------------------------------------ */

.talentmed-typing-test .tmtt-email-form {
  background: #f6f6f6;
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  margin: 24px auto;
}

.talentmed-typing-test .tmtt-email-form h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: #333333;
  text-align: center;
}

.talentmed-typing-test .tmtt-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 4px;
}

.talentmed-typing-test .tmtt-form-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-family: inherit;
  border: 2px solid #ebeaea;
  border-radius: 8px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s ease;
  background: #ffffff;
  color: #333333;
}

.talentmed-typing-test .tmtt-form-input:focus {
  border-color: #0dafdf;
}

.talentmed-typing-test .tmtt-submit-btn {
  display: inline-block;
  width: 100%;
  background: #0dafdf;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: inherit;
  text-align: center;
}

.talentmed-typing-test .tmtt-submit-btn:hover,
.talentmed-typing-test .tmtt-submit-btn:focus {
  background: #0b9dc7;
}

.talentmed-typing-test .tmtt-privacy {
  font-size: 13px;
  color: #747474;
  text-align: center;
  margin-top: 8px;
}

.talentmed-typing-test .tmtt-form-message {
  text-align: center;
  margin-top: 12px;
  font-weight: 600;
}

.talentmed-typing-test .tmtt-form-success {
  color: #a0ce4e;
}

.talentmed-typing-test .tmtt-form-error {
  color: #e74c3c;
}

/* Honeypot — visually and functionally hidden */
.talentmed-typing-test .tmtt-hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
}


/* ------------------------------------------------------------------
   Step 8 — CTA button and Try Again button
   ------------------------------------------------------------------ */

.talentmed-typing-test .tmtt-cta-btn {
  display: inline-block;
  background: #0dafdf;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 16px;
  transition: background 0.2s ease;
}

.talentmed-typing-test .tmtt-cta-btn:hover,
.talentmed-typing-test .tmtt-cta-btn:focus {
  background: #0b9dc7;
  color: #ffffff;
  text-decoration: none;
}

.talentmed-typing-test .tmtt-try-again {
  background: transparent;
  color: #0dafdf;
  border: 2px solid #0dafdf;
  padding: 12px 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease;
}

.talentmed-typing-test .tmtt-try-again:hover,
.talentmed-typing-test .tmtt-try-again:focus {
  background: #0dafdf;
  color: #ffffff;
}


/* ------------------------------------------------------------------
   Step 9 — Responsive: ≤ 768px
   ------------------------------------------------------------------ */

@media (max-width: 768px) {

  .talentmed-typing-test .tmtt-stats {
    flex-direction: column;
    gap: 8px;
  }

  .talentmed-typing-test .tmtt-stat-value {
    font-size: 24px;
  }

  .talentmed-typing-test .tmtt-words {
    font-size: 16px;
    max-height: 120px;
    padding: 16px;
  }

  .talentmed-typing-test .tmtt-result-wpm {
    font-size: 48px;
  }

  .talentmed-typing-test .tmtt-result-stats {
    flex-direction: column;
    gap: 8px;
    font-size: 18px;
  }

  .talentmed-typing-test .tmtt-email-form {
    max-width: 100%;
    padding: 16px;
  }

}