/*
 * DTF Prints type system. Two fonts, used everywhere.
 *   Display (headlines):  Bebas Neue, big, bold, condensed.   Levels: h1, h2, h3.
 *   Text (everything else): Inter, clean and crisp.            Body, menus, buttons, forms, prices, card titles, h4-h6.
 * Change a font here and the whole site follows.
 */
:root {
    --dtf-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
    --dtf-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Text font everywhere (the theme's default was the system font on most pages) */
body, button, input, select, textarea, optgroup,
.main-navigation, .main-navigation a, .woocommerce, .woocommerce button, .woocommerce input, .woocommerce select, .woocommerce textarea,
.mailpoet_form, .mailpoet_form * {
    font-family: var(--dtf-text) !important;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.entry-content p, .entry-content li, .woocommerce-product-details__short-description, .term-description { font-size: 1rem; line-height: 1.65; }
h4, h5, h6, .widget h2, .woocommerce-loop-product__title, .dtfb-card-title { font-family: var(--dtf-text) !important; font-weight: 700; letter-spacing: 0; }

/* Display font for headline levels h1 to h3, plus the theme's title classes and the newsletter heading */
h1, h2, h3, .entry-title, .page-title, .product_title, .woocommerce-products-header__title, .mailpoet-heading, .dtf-footer-col h3 {
    font-family: var(--dtf-display) !important;
    font-weight: 400 !important;
    letter-spacing: .02em;
    line-height: 1.05;
    text-transform: none;
}
/* Bebas has one weight, so a thin stroke makes the big headlines bolder (h1, h2 and page titles only) */
h1, h2, .entry-title, .page-title, .product_title, .woocommerce-products-header__title { -webkit-text-stroke: .02em currentColor; }
.cfw-checkout h1, .cfw-checkout h2, #cfw-wrapper h1, #cfw-wrapper h2 { -webkit-text-stroke: 0; }

/* The condensed display face reads small, so page titles get a size that matches the hierarchy */
h1.entry-title, h1.page-title, .woocommerce-products-header__title { font-size: clamp(38px, 5vw, 58px); }
.dtf-blank-grid .product_title { font-size: clamp(36px, 4.4vw, 52px); font-weight: 400; letter-spacing: .02em; line-height: 1.02; }
.mailpoet_form .mailpoet-heading, .mailpoet_form h2.mailpoet-heading { font-family: var(--dtf-display) !important; font-size: 28px !important; font-weight: 400 !important; letter-spacing: .02em; }
.woocommerce-products-header__title.page-title { font-size: clamp(38px, 5vw, 58px) !important; }

/* Question headings in accordions are small, so they use the text font to stay readable (FAQ page id 234) */
.page-id-234 h3, .page-id-234 .faq-toc h2 { font-family: var(--dtf-text) !important; font-size: 17px; font-weight: 600 !important; letter-spacing: 0; line-height: 1.4; }

/* Leave third-party apps alone */
.cfw-checkout h1, .cfw-checkout h2, .cfw-checkout h3, #cfw-wrapper h1, #cfw-wrapper h2, #cfw-wrapper h3, #wpadminbar, #wpadminbar * { font-family: inherit !important; letter-spacing: inherit; }