/**
 * @file
 * Proyección Mundial 2026 form fixes.
 *
 * Fixes:
 * - Twemoji <img> inside labels respect 17×17 size and align properly.
 * - Responsive font sizes for trivia header and step-1 header on mobile.
 */

/* --------------------------------------------------------------------------
   1. Twemoji size fix inside form labels
   -------------------------------------------------------------------------- */
#webform-submission-proyeccion-mundial-2026-form label img.emoji,
#webform-submission-proyeccion-mundial-2026-add-form label img.emoji,
.webform-submission-proyeccion-mundial-2026-form label img.emoji {
  width: 17px;
  height: 17px;
  vertical-align: middle;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   1b. Trofeo SVG in the Campeón label (replaces the 🏆 emoji)
   Targets the JS-generated .wc2026-ranking-label--campeon badge.
   -------------------------------------------------------------------------- */
.wc2026-ranking-label--campeon::before {
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url('../img/trofeo.svg') no-repeat center center;
  background-size: contain;
  vertical-align: middle;
  margin-right: 0.35em;
}

/* --------------------------------------------------------------------------
   2. Mobile font-size overrides for processed_text headers
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Trivia step header (desktop: 32px / 18px -> mobile: 20px / 14px) */
  #webform-submission-proyeccion-mundial-2026-form .wc2026-trivia-header h2,
  .webform-submission-proyeccion-mundial-2026-form .wc2026-trivia-header h2 {
    font-size: 20px !important;
  }

  #webform-submission-proyeccion-mundial-2026-form .wc2026-trivia-header p span,
  .webform-submission-proyeccion-mundial-2026-form .wc2026-trivia-header p span {
    font-size: 14px !important;
  }

  /* Step 1 mobile header (h2 -> 24px, p -> 18px) */
  #webform-submission-proyeccion-mundial-2026-form .d-block.d-md-none h2.text-align-center,
  #webform-submission-proyeccion-mundial-2026-form .d-block.d-md-none h2.text-center,
  .webform-submission-proyeccion-mundial-2026-form .d-block.d-md-none h2.text-align-center,
  .webform-submission-proyeccion-mundial-2026-form .d-block.d-md-none h2.text-center {
    font-size: 24px !important;
  }

  #webform-submission-proyeccion-mundial-2026-form .d-block.d-md-none p.text-align-center,
  #webform-submission-proyeccion-mundial-2026-form .d-block.d-md-none p.text-center,
  .webform-submission-proyeccion-mundial-2026-form .d-block.d-md-none p.text-align-center,
  .webform-submission-proyeccion-mundial-2026-form .d-block.d-md-none p.text-center {
    font-size: 18px !important;
  }
}