/**
 * VaultRO Global Typography System
 * Centralized typography scale and variables across all public pages.
 * 
 * Rules: Strictly manages typography (font-family, sizes, weights, line-heights, letter-spacing)
 * without altering colors, card designs, layouts, spacing, or functionality.
 */

:root {
  /* Font Families */
  --vr-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --vr-heading-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Typography Scale - Desktop */
  --vr-h1-size: 2.75rem;     /* 44px */
  --vr-h1-weight: 800;
  --vr-h1-line-height: 1.2;
  --vr-h1-letter-spacing: -0.02em;

  --vr-h2-size: 2.25rem;     /* 36px */
  --vr-h2-weight: 800;
  --vr-h2-line-height: 1.25;
  --vr-h2-letter-spacing: -0.015em;

  --vr-h3-size: 1.5rem;      /* 24px */
  --vr-h3-weight: 700;
  --vr-h3-line-height: 1.35;
  --vr-h3-letter-spacing: -0.01em;

  --vr-h4-size: 1.15rem;     /* 18.4px */
  --vr-h4-weight: 700;
  --vr-h4-line-height: 1.4;
  --vr-h4-letter-spacing: normal;

  --vr-h5-size: 1rem;        /* 16px */
  --vr-h5-weight: 600;
  --vr-h5-line-height: 1.4;
  --vr-h5-letter-spacing: normal;

  --vr-h6-size: 0.875rem;    /* 14px */
  --vr-h6-weight: 600;
  --vr-h6-line-height: 1.4;
  --vr-h6-letter-spacing: normal;

  /* Eyebrows / Section Sub-titles */
  --vr-eyebrow-size: 0.8125rem; /* 13px */
  --vr-eyebrow-weight: 700;
  --vr-eyebrow-line-height: 1.2;
  --vr-eyebrow-letter-spacing: 1px;
  --vr-eyebrow-transform: uppercase;

  /* Body & Paragraphs */
  --vr-body-size: 0.9375rem;    /* 15px */
  --vr-body-weight: 400;
  --vr-body-line-height: 1.6;

  /* Buttons & CTA */
  --vr-button-size: 0.9375rem;  /* 15px */
  --vr-button-weight: 600;
  --vr-button-letter-spacing: 0.02em;
}

/* Base Font Families */
html, body, button, input, select, textarea {
  font-family: var(--vr-font-family);
}

/* Ensure icon fonts are NEVER overridden by general text font-family rules */
.fa, .fas, .fa-solid {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important;
  font-weight: 900 !important;
}
.far, .fa-regular {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important;
  font-weight: 400 !important;
}
.fal, .fa-light {
  font-family: "Font Awesome 6 Pro", "FontAwesome" !important;
  font-weight: 300 !important;
}
.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
  font-weight: 400 !important;
}
i[class^="flaticon-"], i[class*=" flaticon-"], span[class^="flaticon-"], span[class*=" flaticon-"] {
  font-family: "flaticon_purifier" !important;
}
i[class^="lnr-"], i[class*=" lnr-"], span[class^="lnr-"], span[class*=" lnr-"], .lnr {
  font-family: "linearicons-free" !important;
}

/* ----------------------------------------------------
 * H1 - Main Page Headings & Hero Titles
 * ---------------------------------------------------- */
h1, 
.page-title h1, 
.page-banner h1, 
.custom-hero-title,
.banner-section h1,
.main-slider h1,
.page-title .title,
.about-hero-section h1 {
  font-family: var(--vr-heading-font);
  font-size: var(--vr-h1-size) !important;
  font-weight: var(--vr-h1-weight) !important;
  line-height: var(--vr-h1-line-height) !important;
  letter-spacing: var(--vr-h1-letter-spacing);
}

/* ----------------------------------------------------
 * H2 - Section Headings
 * ---------------------------------------------------- */
h2, 
.sec-title h2, 
.sec-title-v2 h2, 
.sec-title-v3 h2, 
.sec-title-v4 h2,
.home-products-title,
.services-section h2,
.services-section-v2 h2,
.pricing-section h2,
.why-choose-us-section h2,
.news-section h2,
.about-section-four h2 {
  font-family: var(--vr-heading-font);
  font-size: var(--vr-h2-size) !important;
  font-weight: var(--vr-h2-weight) !important;
  line-height: var(--vr-h2-line-height) !important;
  letter-spacing: var(--vr-h2-letter-spacing);
}

/* Stat counter numbers should retain their compact line-height */
.funfact-section h2,
.stat-item h2,
.counter-column h2 {
  font-size: 2.25rem !important;
  line-height: 1 !important;
}

/* ----------------------------------------------------
 * H3 - Subheadings & Major Groups
 * ---------------------------------------------------- */
h3, 
.sub-heading, 
.sec-title h3, 
.sec-title-v2 h3, 
.sec-title-v3 h3, 
.sec-title-v4 h3,
.services-section-v2 h3 {
  font-family: var(--vr-heading-font);
  font-size: var(--vr-h3-size) !important;
  font-weight: var(--vr-h3-weight) !important;
  line-height: var(--vr-h3-line-height) !important;
  letter-spacing: var(--vr-h3-letter-spacing);
}

/* ----------------------------------------------------
 * H4 - Card Headings & Step Titles
 * ---------------------------------------------------- */
h4, 
.card-title, 
.inner-box h4, 
.pricing-block h4, 
.product-card h4, 
.news-block h4,
.service-block h4,
.feature-card h4 {
  font-family: var(--vr-heading-font);
  font-size: var(--vr-h4-size) !important;
  font-weight: var(--vr-h4-weight) !important;
  line-height: var(--vr-h4-line-height) !important;
  letter-spacing: var(--vr-h4-letter-spacing);
}

/* ----------------------------------------------------
 * H5 - Minor Titles & Subsection Items
 * ---------------------------------------------------- */
h5, 
.minor-title, 
.inner-box h5,
.feature-card h5 {
  font-family: var(--vr-heading-font);
  font-size: var(--vr-h5-size) !important;
  font-weight: var(--vr-h5-weight) !important;
  line-height: var(--vr-h5-line-height) !important;
}

/* ----------------------------------------------------
 * H6 - Small Labels & Meta Headings
 * ---------------------------------------------------- */
h6, 
.inner-box h6 {
  font-family: var(--vr-heading-font);
  font-size: var(--vr-h6-size) !important;
  font-weight: var(--vr-h6-weight) !important;
  line-height: var(--vr-h6-line-height) !important;
}

/* ----------------------------------------------------
 * Section Labels & Eyebrows
 * ---------------------------------------------------- */
.sec-title .sub-title,
.sec-title-v2 .sub-title,
.sec-title-v3 .sub-title,
.sec-title-v4 .sub-title,
span.sub-title,
.section-eyebrow {
  font-family: var(--vr-font-family);
  font-size: var(--vr-eyebrow-size) !important;
  font-weight: var(--vr-eyebrow-weight) !important;
  line-height: var(--vr-eyebrow-line-height) !important;
  letter-spacing: var(--vr-eyebrow-letter-spacing) !important;
  text-transform: var(--vr-eyebrow-transform) !important;
  display: inline-block;
}

/* ----------------------------------------------------
 * Body Text & Paragraphs
 * ---------------------------------------------------- */
p, 
.text, 
.desc, 
.content p, 
.inner-box p {
  font-family: var(--vr-font-family);
  font-size: var(--vr-body-size);
  font-weight: var(--vr-body-weight);
  line-height: var(--vr-body-line-height);
}

/* ----------------------------------------------------
 * Buttons & CTA Text
 * ---------------------------------------------------- */
.theme-btn,
.btn-style-one,
.btn-style-two,
.btn-style-three,
.btn-style-four,
.btn-style-five,
.header-btn {
  font-family: var(--vr-font-family);
  font-size: var(--vr-button-size);
  font-weight: var(--vr-button-weight);
  letter-spacing: var(--vr-button-letter-spacing);
}

/* ----------------------------------------------------
 * Responsive Typography Scaling
 * ---------------------------------------------------- */

/* Laptop (992px - 1199px) */
@media only screen and (max-width: 1199px) {
  :root {
    --vr-h1-size: 2.5rem;    /* 40px */
    --vr-h2-size: 2.1rem;    /* 33.6px */
    --vr-h3-size: 1.4rem;    /* 22.4px */
    --vr-h4-size: 1.125rem;  /* 18px */
  }
}

/* Tablet (768px - 991px) */
@media only screen and (max-width: 991px) {
  :root {
    --vr-h1-size: 2.25rem;   /* 36px */
    --vr-h2-size: 1.85rem;   /* 29.6px */
    --vr-h3-size: 1.3rem;    /* 20.8px */
    --vr-h4-size: 1.1rem;    /* 17.6px */
    --vr-h5-size: 0.95rem;   /* 15.2px */
    --vr-body-size: 0.925rem;/* 14.8px */
  }
}

/* Mobile (480px - 767px) */
@media only screen and (max-width: 767px) {
  :root {
    --vr-h1-size: 1.85rem;   /* 29.6px */
    --vr-h2-size: 1.55rem;   /* 24.8px */
    --vr-h3-size: 1.2rem;    /* 19.2px */
    --vr-h4-size: 1.05rem;   /* 16.8px */
    --vr-h5-size: 0.9rem;    /* 14.4px */
    --vr-body-size: 0.9rem;  /* 14.4px */
    --vr-button-size: 0.875rem; /* 14px */
    --vr-eyebrow-size: 0.75rem; /* 12px */
  }
}

/* Small Mobile (< 480px) */
@media only screen and (max-width: 479px) {
  :root {
    --vr-h1-size: 1.65rem;   /* 26.4px */
    --vr-h2-size: 1.4rem;    /* 22.4px */
    --vr-h3-size: 1.15rem;   /* 18.4px */
    --vr-h4-size: 1rem;      /* 16px */
    --vr-h5-size: 0.875rem;  /* 14px */
    --vr-body-size: 0.875rem;/* 14px */
    --vr-button-size: 0.85rem; /* 13.6px */
  }
}