/*
 * Site typography.
 *
 * Inter is applied to the site as a whole. Font sizes are intentionally
 * increased only for prose in the central content column; navigation,
 * sidebars, badges and other compact interface elements keep their existing
 * sizes.
 */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/InterVariable-Italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --site-font-family: 'Inter', Arial, Helvetica, sans-serif;
}

body,
button,
input,
optgroup,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.tooltip,
.popover,
.pn-bonus,
.bonus-catalog,
.pn-comments .review-box,
.prediction-banner,
.prediction-catalog-page .prediction-catalog-card,
.prediction-date-pill > b {
  font-family: var(--site-font-family);
}

/* Main prose: 15px on tablets and desktops. */
#content-center .text-justify,
#content-center .text-description,
#content-center .forecast-description,
#content-center .prediction-forecast-description,
#content-center .prediction-editorial-text,
#content-center .description-block,
#content-center .message-description,
#content-center .dialog-description,
#content-center .review-body > p.text-wrap,
#content-center .bonus-page-intro,
#content-center .bonus-seo-text,
#content-center .pn-steps p,
#content-center .pn-calculator__lead,
#content-center .pn-calculator__note,
#content-center .pn-terms li,
#content-center .pn-pros-cons li,
#content-center .pn-faq details > div,
#content-center .pn-editorial__text,
#content-center .pn-bookmaker__text,
#content-center .pn-disclaimer p {
  font-size: 15px;
  line-height: 1.6;
}

/* Main prose and editable controls: 16px on phones. */
@media (max-width: 767px) {
  #content-center .text-justify,
  #content-center .text-description,
  #content-center .forecast-description,
  #content-center .prediction-forecast-description,
  #content-center .prediction-editorial-text,
  #content-center .description-block,
  #content-center .message-description,
  #content-center .dialog-description,
  #content-center .review-body > p.text-wrap,
  #content-center .bonus-page-intro,
  #content-center .bonus-seo-text,
  #content-center .pn-steps p,
  #content-center .pn-calculator__lead,
  #content-center .pn-calculator__note,
  #content-center .pn-terms li,
  #content-center .pn-pros-cons li,
  #content-center .pn-faq details > div,
  #content-center .pn-editorial__text,
  #content-center .pn-bookmaker__text,
  #content-center .pn-disclaimer p,
  #content-center .form-control {
    font-size: 16px;
  }
}