/* Keep the exported design. These rules repair what the theme left to chance,
   style states the WordPress home template could not reach (the final quiz and
   the unlocked certificate), keyboard focus, and the hidden print frame. */

/* The theme uses "Roboto-Medium" (quizzes, game tips, colour names, menus) and
   ships the font files, but never declared them, so only computers with Roboto
   installed showed it; Safari, Windows and Android fell back to a serif face.
   An installed copy still wins, exactly as on WordPress. */
@font-face {
  font-family: "Roboto-Medium";
  src: local("Roboto-Medium"), local("Roboto Medium"),
    url(/wp-content/themes/unicef/assets/fonts/roboto/Roboto-Medium.woff2) format("woff2"),
    url(/wp-content/themes/unicef/assets/fonts/roboto/Roboto-Medium.woff) format("woff");
}
/* The quiz area is capped at 600px (430/310px on smaller screens) and the answer
   row overflows it. Chromium still sizes the scroll box to end at that row;
   Safari does not and cuts it off. Let the area end at its content everywhere. */
.test_modal .test_area { max-height: none; padding-bottom: 0; }
.index-certificate.open-card .display-card { display: none; }
.static-card-status { position: absolute; left: 0; right: 0; margin: 4px 0 0; padding: 0 16px; color: #fff; font-size: 18px; line-height: 1.3; text-align: center; }
.static-card-status:empty { display: none; }
/* The final quiz uses the planet quiz overlay; the theme's .modal-area white
   backdrop would hide the white answer labels. */
.play-show.modal-area.static-final-modal { background: rgba(0, 0, 0, .7); }
.static-final-modal:focus { outline: none; }
/* The theme lifts the final result row 90px for its old Russian labels; the
   longer Ukrainian labels would cover "Наступне питання". Space it like the
   planet quizzes instead. */
.static-final-modal .test_modal .result_test.fin_test { margin: 50px 0 0; }
@media (max-width: 1070px) { .static-final-modal .test_modal .result_test.fin_test { margin-top: 0; } }
/* Its closing message is taller than the fixed 600px quiz area (310px on phones);
   let the area grow so the theme's scrollbar can reach "Заповнити посвідчення". */
.static-final-modal .test_area { height: auto !important; max-height: none; }
.static-final-modal .btn_final { max-width: 100%; white-space: normal; }
.test_answer > div[role="button"]:focus-visible, .yes_answer:focus-visible { outline: 3px solid #123f72; outline-offset: 4px; }
#static-print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
.game_open #game-modal canvas { touch-action: none; }