/* ============================================
   Brand Guidelines - Global Styles
   ============================================ */

/* ============================================
   Font Face Declarations
   ============================================ */

/* Font declarations are now in the template using get_asset_url for proper HubSpot asset resolution */

/* ============================================
   CSS Custom Properties (Color Variables)
   ============================================ */

:root {
  /* Brand Colors */
  --color-green: #01A04A;
  --color-blue: #1D64EF;
  --color-pink: #F1ADD4;
  --color-dark-green: #005426;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray: #E9E3DE;
  --color-light-gray: #E9E3DE;
  --color-yellow: #D5FF7A;
  --color-tan: #E9E3DE;

  /* Typography */
  --font-header: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-quote: 'Merriweather', Georgia, serif;
  --monasans: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  --merriweather: 'Merriweather', serif;

  /* Font Weights */
  --font-weight-header: 800; /* ExtraBold */
  --font-weight-black: 900; /* Black */
  --font-weight-bold: 700; /* Bold */
  --font-weight-medium: 500; /* Medium */
  --font-weight-regular: 400; /* Regular */
  --font-weight-light: 300; /* Light */
  --font-weight-thin: 200; /* Thin */
  --font-weight-extra-light: 100; /* Extra Light */
  --font-weight-extra-bold: 800; /* Extra Bold */
  --font-weight-body: 500; /* Medium */
  --font-weight-quote: 400; /* Regular */

  /* Typography Sizes - Using clamp() for responsive scaling */
  /* Format: clamp(min, preferred, max) */
  /* Preferred uses viewport units for fluid scaling between breakpoints */
  /* Calculations: linear interpolation from mobile (320px) to desktop (1920px) */
  
  /* h1: 137px desktop (1920px) → 40px mobile (320px) */
  /* Formula: 40px + (137-40) * (vw - 320) / (1920 - 320) = 40 + 97 * (vw - 320) / 1600 */
  --font-size-h1: clamp(2.5rem, 1.29rem + 6.06vw, 8.5625rem); /* 40px → 137px */
  
  /* h2: 57px desktop → 28px mobile */
  /* Formula: 28px + (57-28) * (vw - 320) / 1600 = 28 + 29 * (vw - 320) / 1600 */
  --font-size-h2: clamp(1.75rem, 1.05rem + 1.81vw, 3.5625rem); /* 28px → 57px */
  
  /* h3: 31px desktop → 20px mobile */
  /* Formula: 20px + (31-20) * (vw - 320) / 1600 = 20 + 11 * (vw - 320) / 1600 */
  --font-size-h3: clamp(1.25rem, 0.875rem + 0.688vw, 1.9375rem); /* 20px → 31px */
  
  /* p: 31px desktop → 16px mobile */
  /* Formula: 16px + (31-16) * (vw - 320) / 1600 = 16 + 15 * (vw - 320) / 1600 */
  --p-desktop-size: clamp(0.9rem, 0.625rem + 0.938vw, 1.9375rem); /* 16px → 31px */
  
  /* p-large: 52px desktop → 20px mobile */
  /* Formula: 20px + (52-20) * (vw - 320) / 1600 = 20 + 32 * (vw - 320) / 1600 */
  --p-desktop-size-large: clamp(1.25rem, 0.75rem + 2vw, 3.25rem); /* 20px → 52px */

  /* footer-heading: 24px desktop → 16px mobile */
  /* Formula: 16px + (24-16) * (vw - 320) / 1600 = 16 + 8 * (vw - 320) / 1600 */
  --font-size-footer-heading: clamp(1rem, 1rem + 0.938vw, 1.125rem); /* 16px → 24px */

  /* footer-text: 16px desktop → 14px mobile */
  /* Formula: 14px + (16-14) * (vw - 320) / 1600 = 14 + 2 * (vw - 320) / 1600 */
  --font-size-footer-text: clamp(0.875rem, 0.75rem + 0.3125vw, 1rem); /* 14px → 16px */

  /* button: 24px desktop → 20px mobile */
  /* Formula: 20px + (24-20) * (vw - 320) / 1600 = 20 + 4 * (vw - 320) / 1600 */
  --font-size-button: clamp(1.5rem, 1rem + 1.25vw, 2rem); /* 20px → 24px */

  /* Line Heights */
  --line-height-ultra-tight: 1;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Typography Sizes - Legacy variables for Header/Footer compatibility */
  --nav-desktop-size: 50px;
  --nav-mobile-size: 30px;
  --h1-desktop-size: 80px;
  --h1-desktop-alt-size: 95px;
  --h1-mobile-size: 40px;
  --h2-desktop-size: 38px;
  --h2-mobile-size: 24px;
  --h3-desktop-size: 36px;
  --h3-mobile-size: 20px;
  --h3-desktop-alt-size: 30px;
  --h4-desktop-size: 22px;
  --h4-mobile-size: 18px;
  --h5-desktop-size: 22px;
  --h5-mobile-size: 16px;
  --p-desktop-size: 22px;
  --p-desktop-alt-size: 26px;
  --p-mobile-size: 18px;

  /* Spacing */
  --desktop-padding: 3rem;
  --mobile-padding: 2rem;
}

/* ============================================
   Base Typography Styles
   ============================================ */

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--p-desktop-size);
  line-height: var(--line-height-normal);
  color: var(--color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  margin: 0;
  /* Header padding is set dynamically via JavaScript based on header variant */
}

/* ============================================
   Heading Styles with Inheritance
   ============================================ */

h1,
.h1 {
  font-family: var(--font-header);
  font-weight: var(--font-weight-header);
  font-size: var(--h1-desktop-size);
  line-height: var(--line-height-tight);
  color: var(--color-black);
  margin: 0;
}

h2,
.h2 {
  font-family: var(--font-header);
  font-weight: var(--font-weight-header);
  font-size: var(--h2-desktop-size);
  line-height: var(--line-height-tight);
  color: var(--color-black);
  margin: 0;
}

@media (max-width: 768px) {
  h1,
  .h1 {
    font-size: var(--h1-mobile-size);
  }
  h2,
  .h2 {
    font-size: var(--h2-mobile-size);
  }
  h3,
  .h3 {
    font-size: var(--h3-mobile-size);
  }
}

/* h2 inherits from h1 when nested */
h1 h2,
.h1 .h2,
h1 .h2,
.h1 h2 {
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  font-weight: inherit;
}

h3,
.h3 {
  font-family: var(--font-header);
  font-weight: var(--font-weight-header);
  font-size: var(--h3-desktop-size);
  line-height: var(--line-height-tight);
  color: var(--color-black);
  margin: 0;
}

/* h3 inherits from h2 when nested */
h2 h3,
.h2 .h3,
h2 .h3,
.h2 h3 {
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  font-weight: inherit;
}

/* h3 inherits from h1 when nested */
h1 h3,
.h1 .h3,
h1 .h3,
.h1 h3 {
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  font-weight: inherit;
}

/* ============================================
   Body Text Styles
   ============================================ */

p,
.p {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--p-desktop-size);
  line-height: var(--line-height-normal);
  color: var(--color-black);
  margin: 0;
}

p.large,
.p-large {
  font-size: var(--p-desktop-size-large);
  line-height: var(--line-height-relaxed);
}

/* ============================================
   Quote Text Styles
   ============================================ */

blockquote,
.quote {
  font-family: var(--font-quote);
  font-weight: var(--font-weight-quote);
  font-style: italic;
  font-size: var(--p-desktop-size);
  line-height: var(--line-height-relaxed);
  color: var(--color-black);
  margin: 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-green);
}

q,
.quote-inline {
  font-family: var(--font-quote);
  font-weight: var(--font-weight-quote);
  font-style: italic;
  font-size: inherit;
}

/* ============================================
   Utility Classes for Colors
   ============================================ */

.text-green {
  color: var(--color-green);
}

.text-blue {
  color: var(--color-blue);
}

.text-pink {
  color: var(--color-pink);
}

.text-dark-green {
  color: var(--color-dark-green);
}

.text-white {
  color: var(--color-white);
}

.text-black {
  color: var(--color-black);
}

.text-gray {
  color: var(--color-gray);
}

.bg-green {
  background-color: var(--color-green);
}

.bg-blue {
  background-color: var(--color-blue);
}

.bg-pink {
  background-color: var(--color-pink);
}

.bg-dark-green {
  background-color: var(--color-dark-green);
}

.bg-white {
  background-color: var(--color-white);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-gray {
  background-color: var(--color-gray);
}

/* ============================================
   Responsive Breakpoints (for reference)
   ============================================ */

/* Mobile: 320px - 767px */
/* Tablet: 768px - 1023px */
/* Desktop: 1024px+ */
/* Large Desktop: 1920px+ */

/* ============================================
   reCAPTCHA Badge (Hidden)
   Note: When hiding the badge, Google requires 
   displaying a privacy notice on the form.
   ============================================ */

.grecaptcha-badge {
  visibility: hidden !important;
}

.content_box{
  margin-top:0 !important;
}

.two-col-content {
  padding: 2rem !important;
  gap: 0 !important;
  margin:0;
}

.two-col-content .flex_row{
  padding: 0;
  margin:0;
  gap: 0 !important;
}


.two-col-content .description{
  padding: 0;
  margin:0 !important;
}

.item-pagination-title{
  font-size:14px !important;
  color:#000000 !important;
  text-transform:uppercase;
  line-height:1.3 !important;
  font-weight: var(--font-weight-header) !important;
  font-family: var(--font-header) !important;
}

.counter-section .inner {
  width: 100%;
}

nav li:before {
  content: unset !important;
}

nav li a:hover {
  color: var(--color-white) !important;
}