@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

#tmh-page, #tmh-page * {
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased;
}

.inside-article, .entry-content, .page-content { padding: 0 !important; margin: 0 !important; }
.site-main, .site-main > .inside-article, #primary, .content-area > .site-main { padding-top: 0 !important; margin-top: 0 !important; }

#tmh-page {
  font-family: 'Nunito', 'Segoe UI', sans-serif !important;
  color: #1e1b4b !important; background: #fff !important;
  overflow: visible !important; margin: 0 !important; padding: 0 !important;
  width: 100vw !important; position: relative !important; left: 50% !important; margin-left: -50vw !important;
}

#tmh-page h2, #tmh-page h3, #tmh-page p, #tmh-page span, #tmh-page div, #tmh-page section {
  margin: 0 !important; padding: 0 !important; border: none !important;
  font-family: 'Nunito', 'Segoe UI', sans-serif !important;
}

#tmh-page a { text-decoration: none !important; font-family: 'Nunito', 'Segoe UI', sans-serif !important; }

#tmh-page .tmh-eyebrow {
  display: inline-block !important; font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: 1.2px !important; text-transform: uppercase !important;
  color: #6366f1 !important; margin-bottom: 14px !important; padding: 0 !important;
}

#tmh-page .tmh-section-inner {
  max-width: 1100px !important; margin: 0 auto !important; padding: 30px 40px !important;
}

#tmh-page .tmh-section-head { text-align: center !important; margin-bottom: 52px !important; }
#tmh-page .tmh-section-head h2 {
  font-size: clamp(28px, 4vw, 40px) !important; font-weight: 900 !important;
  color: #1e1b4b !important; line-height: 1.2 !important; margin-top: 6px !important;
}
.tmh-section-sub { font-size: 15px !important; color: #64748b !important; margin-top: 10px !important; line-height: 1.6 !important; }

/* ══ FUN TESTS SECTION ══ */
#tmh-fun { background: #fff; padding: 0 !important; }

.tmh-fun-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }

.tmh-fun-card {
  display: flex !important; flex-direction: column !important;
  background: #fff !important;
  border: 2px solid #e2e8f0 !important; border-radius: 24px !important;
  padding: 28px 24px !important; text-decoration: none !important;
  transition: transform .3s, box-shadow .3s, border-color .3s !important;
  position: relative !important; overflow: hidden !important;
}

.tmh-fun-card:hover {
  transform: translateY(-6px) !important;
}

.tmh-fun-coming { background: #f8fafc !important; border-color: #e2e8f0 !important; cursor: default !important; }
.tmh-fun-coming:hover { transform: none !important; box-shadow: none !important; border-color: #e2e8f0 !important; }

.tmh-fun-emoji { font-size: 44px !important; line-height: 1 !important; margin-bottom: 14px !important; display: block !important; }

.tmh-fun-badge {
  display: inline-block !important; font-size: 10px !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: .8px !important;
  padding: 3px 10px !important; border-radius: 20px !important;
  background: #f1f5f9 !important; color: #64748b !important; margin-bottom: 10px !important;
}

.tmh-fun-badge-soon { background: #f1f5f9 !important; color: #94a3b8 !important; }

.tmh-fun-body h3 { font-size: 18px !important; font-weight: 800 !important; color: #1e1b4b !important; margin-bottom: 8px !important; line-height: 1.3 !important; }
.tmh-fun-body p { font-size: 13px !important; color: #64748b !important; line-height: 1.6 !important; margin-bottom: 16px !important; }

.tmh-fun-cta { font-size: 14px !important; font-weight: 800 !important; color: #64748b !important; margin-top: auto !important; display: block !important; }
.tmh-fun-cta-soon { color: #94a3b8 !important; }

/* ══ ANIMATIONS ══ */
.tmh-reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.tmh-reveal.tmh-visible { opacity: 1; transform: translateY(0); }

/* ══ RESPONSIVE ══ */
@media (max-width: 900px) {
  .tmh-fun-grid { grid-template-columns: 1fr !important; max-width: 480px !important; margin: 0 auto !important; }
}
@media (max-width: 768px) {
  #tmh-page .tmh-section-inner { padding: 60px 24px !important; }
}
/* ══ PER-TEST COLOR THEMES ══ */

/* Footballer — Green (default/existing) */
.tmh-fun-green {
  background: linear-gradient(160deg, #f0fdf4, #fff) !important;
  border-color: #bbf7d0 !important;
}
.tmh-fun-green:hover { box-shadow: 0 16px 40px rgba(22,163,74,.13) !important; border-color: #16a34a !important; }
.tmh-fun-green .tmh-fun-badge { background: #dcfce7 !important; color: #16a34a !important; }
.tmh-fun-green .tmh-fun-cta   { color: #16a34a !important; }

/* Superhero — Purple */
.tmh-fun-purple {
  background: linear-gradient(160deg, #f5f3ff, #fff) !important;
  border-color: #ddd6fe !important;
}
.tmh-fun-purple:hover { box-shadow: 0 16px 40px rgba(124,58,237,.13) !important; border-color: #7c3aed !important; }
.tmh-fun-purple .tmh-fun-badge { background: #ede9fe !important; color: #7c3aed !important; }
.tmh-fun-purple .tmh-fun-cta   { color: #7c3aed !important; }

/* Genius — Amber/Gold */
.tmh-fun-amber {
  background: linear-gradient(160deg, #fffbeb, #fff) !important;
  border-color: #fde68a !important;
}
.tmh-fun-amber:hover { box-shadow: 0 16px 40px rgba(217,119,6,.13) !important; border-color: #d97706 !important; }
.tmh-fun-amber .tmh-fun-badge { background: #fef3c7 !important; color: #d97706 !important; }
.tmh-fun-amber .tmh-fun-cta   { color: #d97706 !important; }

/* Career — Teal */
.tmh-fun-teal {
  background: linear-gradient(160deg, #f0fdfa, #fff) !important;
  border-color: #99f6e4 !important;
}
.tmh-fun-teal:hover { box-shadow: 0 16px 40px rgba(13,148,136,.13) !important; border-color: #0d9488 !important; }
.tmh-fun-teal .tmh-fun-badge { background: #ccfbf1 !important; color: #0d9488 !important; }
.tmh-fun-teal .tmh-fun-cta   { color: #0d9488 !important; }

/* Amazing Facts — Orange */
.tmh-fun-orange {
  background: linear-gradient(160deg, #fff7ed, #fff) !important;
  border-color: #fed7aa !important;
}
.tmh-fun-orange:hover { box-shadow: 0 16px 40px rgba(234,88,12,.13) !important; border-color: #ea580c !important; }
.tmh-fun-orange .tmh-fun-badge { background: #ffedd5 !important; color: #ea580c !important; }
.tmh-fun-orange .tmh-fun-cta   { color: #ea580c !important; }