<style>
    /* ============================================
   ERS Template - Consistent Typography CSS
   ============================================
   This CSS ensures consistent typography across all devices
   and maintains the Ranchers font family theme throughout
   ============================================ */

/* Import Ranchers font if not already loaded */
@import url('https://fonts.googleapis.com/css2?family=Ranchers&display=swap');

/* ============================================
   Root Variables for Typography
   ============================================ */
:root {
  /* Font Families */
  --primary-font: 'Ranchers', sans-serif;
  --body-font: 'Lato', sans-serif;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* Base Font Sizes */
  --base-font-size: 16px;
  --base-line-height: 1.6;
  
  /* Heading Sizes - Desktop */
  --h1-size-desktop: 48px;
  --h2-size-desktop: 40px;
  --h3-size-desktop: 32px;
  --h4-size-desktop: 24px;
  --h5-size-desktop: 20px;
  --h6-size-desktop: 18px;
  
  /* Heading Sizes - Tablet */
  --h1-size-tablet: 40px;
  --h2-size-tablet: 36px;
  --h3-size-tablet: 28px;
  --h4-size-tablet: 22px;
  --h5-size-tablet: 18px;
  --h6-size-tablet: 16px;
  
  /* Heading Sizes - Mobile */
  --h1-size-mobile: 32px;
  --h2-size-mobile: 28px;
  --h3-size-mobile: 24px;
  --h4-size-mobile: 20px;
  --h5-size-mobile: 18px;
  --h6-size-mobile: 16px;
  
  /* Line Heights */
  --heading-line-height: 1.1;
  --body-line-height: 1.6;
}

/* ============================================
   Global Typography Reset
   ============================================ */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: var(--base-font-size);
}

body {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
  line-height: var(--body-line-height);
}

/* ============================================
   Heading Styles - Mobile First Approach
   ============================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--primary-font) !important;
  font-weight: var(--font-weight-normal) !important; /* Ranchers only has 400 weight */
  line-height: var(--heading-line-height) !important;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Base (Mobile) Heading Sizes */
h1, .h1 {
  font-size: var(--h1-size-mobile) !important;
}

h2, .h2 {
  font-size: var(--h2-size-mobile) !important;
}

h3, .h3 {
  font-size: var(--h3-size-mobile) !important;
}

h4, .h4 {
  font-size: var(--h4-size-mobile) !important;
}

h5, .h5 {
  font-size: var(--h5-size-mobile) !important;
}

h6, .h6 {
  font-size: var(--h6-size-mobile) !important;
}

/* ============================================
   Homepage Title Specific Styles
   ============================================ */
.header-style.read-more-header.h1,
.home-title,
.page-title,
.welcome-title,
[class*="welcome"] {
  font-family: var(--primary-font) !important;
  font-size: var(--h1-size-mobile) !important;
  font-weight: var(--font-weight-normal) !important;
  line-height: var(--heading-line-height) !important;
}

/* Panel Titles */
.panel-title {
  font-family: var(--primary-font) !important;
  font-size: var(--h3-size-mobile) !important;
  font-weight: var(--font-weight-normal) !important;
  line-height: var(--heading-line-height) !important;
}

/* ============================================
   Tablet Breakpoint (768px and up)
   ============================================ */
@media screen and (min-width: 768px) {
  h1, .h1 {
    font-size: var(--h1-size-tablet) !important;
  }
  
  h2, .h2 {
    font-size: var(--h2-size-tablet) !important;
  }
  
  h3, .h3 {
    font-size: var(--h3-size-tablet) !important;
  }
  
  h4, .h4 {
    font-size: var(--h4-size-tablet) !important;
  }
  
  h5, .h5 {
    font-size: var(--h5-size-tablet) !important;
  }
  
  h6, .h6 {
    font-size: var(--h6-size-tablet) !important;
  }
  
  .header-style.read-more-header.h1,
  .home-title,
  .page-title,
  .welcome-title,
  [class*="welcome"] {
    font-size: var(--h1-size-tablet) !important;
  }
  
  .panel-title {
    font-size: var(--h3-size-tablet) !important;
  }
}

/* ============================================
   Desktop Breakpoint (992px and up)
   ============================================ */
@media screen and (min-width: 992px) {
  h1, .h1 {
    font-size: var(--h1-size-desktop) !important;
  }
  
  h2, .h2 {
    font-size: var(--h2-size-desktop) !important;
  }
  
  h3, .h3 {
    font-size: var(--h3-size-desktop) !important;
  }
  
  h4, .h4 {
    font-size: var(--h4-size-desktop) !important;
  }
  
  h5, .h5 {
    font-size: var(--h5-size-desktop) !important;
  }
  
  h6, .h6 {
    font-size: var(--h6-size-desktop) !important;
  }
  
  .header-style.read-more-header.h1,
  .home-title,
  .page-title,
  .welcome-title,
  [class*="welcome"] {
    font-size: var(--h1-size-desktop) !important;
  }
  
  .panel-title {
    font-size: var(--h3-size-desktop) !important;
  }
}

/* ============================================
   Additional Typography Consistency Rules
   ============================================ */

/* Ensure all heading-like elements use Ranchers font */
[class*="title"],
[class*="heading"],
.hero h1, .hero h2, .hero h3,
.section-title,
.widget-title {
  font-family: var(--primary-font) !important;
  font-weight: var(--font-weight-normal) !important;
}

/* Fix any elements that might be using different fonts */
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.h1 *, .h2 *, .h3 *, .h4 *, .h5 *, .h6 * {
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* ============================================
   Print Media Query
   ============================================ */
@media print {
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--primary-font) !important;
    font-weight: var(--font-weight-normal) !important;
  }
}

/* ============================================
   High Priority Override Rules
   ============================================ */
/* These rules ensure our styles take precedence */
.ers-template h1,
.ers-template h2,
.ers-template h3,
.ers-template h4,
.ers-template h5,
.ers-template h6,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: 'Ranchers', sans-serif !important;
  font-weight: 400 !important;
}

/* ============================================
   Debug Helper (Remove in Production)
   ============================================ */
 /*Uncomment to visually verify typography consistency*/
/*h1, h2, h3, h4, h5, h6 {*/
/*  border: 2px solid red !important;*/
/*  position: relative;*/
/*}*/

/*h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {*/
/*  content: attr(class) " - " getComputedStyle(font-family);*/
/*  position: absolute;*/
/*  top: -20px;*/
/*  left: 0;*/
/*  font-size: 12px;*/
/*  color: red;*/
/*  font-family: monospace !important;*/
/*}*/

</style>