/* =========================================================
   SITE TYPOGRAPHY
   Headings in Cormorant Garamond with italic accent words and
   body text in Manrope (option 4 of the RevAlpha font demo),
   in HM colours.
   Imported at the top of css/style.css, so every page that
   loads style.css gets it, including the pages the CMS and
   the HR system generate.
   ========================================================= */

/* Only weights 500-700 are loaded on purpose: headings the theme sets to
   300/400 render at 500 (as in the demo) and 800/900 render at 700. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --hm-heading-font: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --hm-body-font: 'Manrope', 'DM Sans', system-ui, sans-serif;
  --hm-accent: #c73689;
}

/* Body text in Manrope. Each selector is one notch more specific than the DM Sans
   rule it replaces (style.css, home.css, loader.min.css), so it wins without
   !important, and text the theme sets in another font (menu, buttons, footer) keeps it. */
html body,
html p,
html .widget .post-title,
html .guarantee,
html .listing,
html .cssload-preloader .cssload-preloader-box > div {
  font-family: var(--hm-body-font);
}

/* !important because many pages set the old heading font in their own <style> blocks */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hm-heading-font) !important;
  letter-spacing: -.01em;
}

/* blog articles: home.css and style.css force their sub-headings (.blog-h) to DM Sans.
   24px keeps them as prominent as the old 21px sans. */
h1.blog-h, h2.blog-h, h3.blog-h, h4.blog-h, h5.blog-h, h6.blog-h {
  font-family: var(--hm-heading-font) !important;
  font-size: 24px;
}

/* accent words: italic, in the colour the page already gives them */
h1 .sx-text-primary, h2 .sx-text-primary, h3 .sx-text-primary,
h4 .sx-text-primary, h5 .sx-text-primary, h6 .sx-text-primary {
  font-style: italic;
}

/* <em> inside a heading becomes an HM-pink accent word */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-style: italic;
  color: var(--hm-accent);
}