/* ======================================================================
   FLOWHAZE TYPOGRAPHY CONTROLS
   ----------------------------------------------------------------------
   Edit ONLY this file when you want to change fonts or heading sizes.
   This file loads last, so these values override the other stylesheets.

   Font examples:
   Arial, Helvetica, sans-serif
   Inter, Arial, sans-serif
   Georgia, 'Times New Roman', serif
   'Times New Roman', serif

   Size examples:
   64px                  = fixed size
   clamp(44px, 4vw, 72px)= responsive size
   ====================================================================== */

:root {
  /* GLOBAL FONTS — change these two values to change the whole website */
  --fh-font-normal: Arial, Helvetica, sans-serif;
  --fh-font-cursive: Georgia, 'Times New Roman', serif;
  --fh-font-body: Arial, Helvetica, sans-serif;

  /* GLOBAL BODY TEXT */
  --fh-body-size: 16px;
  --fh-body-mobile-size: 15px;
  --fh-body-line-height: 1.55;

  /* HOME HERO */
  --fh-home-hero-size: clamp(52px, 4.55vw, 76px);
  --fh-home-hero-mobile-size: clamp(40px, 11vw, 52px);
  --fh-home-hero-line-height: .96;
  --fh-home-hero-cursive-gap: .16em;

  /* GENERAL HOME-PAGE SECTION HEADINGS */
  --fh-home-section-size: clamp(44px, 3.8vw, 64px);
  --fh-home-section-mobile-size: clamp(36px, 9.5vw, 46px);
  --fh-home-section-line-height: .98;
  --fh-home-section-cursive-gap: .14em;

  /* TESTIMONIAL HEADING */
  --fh-testimonial-size: clamp(44px, 3.8vw, 64px);
  --fh-testimonial-mobile-size: clamp(35px, 9vw, 44px);
  --fh-testimonial-line-height: .98;
  --fh-testimonial-cursive-gap: .14em;

  /* SERVICES PAGE */
  --fh-services-hero-size: clamp(46px, 4vw, 68px);
  --fh-services-hero-mobile-size: clamp(38px, 10vw, 48px);
  --fh-services-section-size: clamp(38px, 3.2vw, 54px);
  --fh-services-section-mobile-size: clamp(32px, 8.5vw, 42px);

  /* AI PAGE */
  --fh-ai-hero-size: clamp(48px, 4.1vw, 70px);
  --fh-ai-hero-mobile-size: clamp(38px, 10vw, 49px);
  --fh-ai-section-size: clamp(40px, 3.4vw, 58px);
  --fh-ai-section-mobile-size: clamp(33px, 8.8vw, 43px);

  /* WHY FLOWHAZE PAGE */
  --fh-why-hero-size: clamp(48px, 4.1vw, 70px);
  --fh-why-hero-mobile-size: clamp(38px, 10vw, 49px);
  --fh-why-section-size: clamp(42px, 3.6vw, 60px);
  --fh-why-section-mobile-size: clamp(34px, 9vw, 44px);

  /* CONTACT PAGE */
  --fh-contact-heading-size: clamp(48px, 4.1vw, 70px);
  --fh-contact-heading-mobile-size: clamp(38px, 10vw, 48px);

  /* FINAL CTA / LARGE CLOSING HEADINGS */
  --fh-final-cta-size: clamp(48px, 4.2vw, 72px);
  --fh-final-cta-mobile-size: clamp(38px, 10vw, 50px);

  /* CURSIVE STYLE USED EVERYWHERE */
  --fh-cursive-weight: 400;
  --fh-cursive-line-height: 1.03;
  --fh-cursive-letter-spacing: -.042em;
}

/* GLOBAL BODY FONT */
html, body, button, input, select, textarea {
  font-family: var(--fh-font-body) !important;
}
body {
  font-size: var(--fh-body-size) !important;
  line-height: var(--fh-body-line-height) !important;
}

/* GLOBAL NORMAL + CURSIVE FONT RULES */
.hero-copy h1,
.section-heading h2,
.system-copy h2,
.ai-copy h2,
.engagement-content h2,
.testimonial-heading h2,
.final-copy h2,
.inner-hero h1,
.contact-hero h1,
.page-cta h2,
.split-story h2,
.founders-copy h2,
.ai-showcase-copy h2,
.service-copy h2 {
  font-family: var(--fh-font-normal) !important;
}

.hero-copy h1 em,
.section-heading h2 em,
.system-copy h2 em,
.ai-copy h2 em,
.testimonial-heading h2 em,
.inner-hero h1 em,
.contact-hero h1 em,
.page-cta h2 em,
.split-story h2 em,
.founders-copy h2 em,
.ai-showcase-copy h2 em,
.service-copy h2 em {
  display: block !important;
  position: relative !important;
  font-family: var(--fh-font-cursive) !important;
  font-style: italic !important;
  font-weight: var(--fh-cursive-weight) !important;
  line-height: var(--fh-cursive-line-height) !important;
  letter-spacing: var(--fh-cursive-letter-spacing) !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* HOME HERO */
.home-page .hero-copy h1 {
  font-size: var(--fh-home-hero-size) !important;
  line-height: var(--fh-home-hero-line-height) !important;
}
.home-page .hero-copy h1 em {
  margin-top: var(--fh-home-hero-cursive-gap) !important;
}

/* HOME SECTIONS */
.home-page .section-heading h2,
.home-page .system-copy h2,
.home-page .ai-copy h2,
.home-page .engagement-content h2,
.home-page .final-copy h2 {
  font-size: var(--fh-home-section-size) !important;
  line-height: var(--fh-home-section-line-height) !important;
}
.home-page .section-heading h2 em,
.home-page .system-copy h2 em,
.home-page .ai-copy h2 em,
.home-page .engagement-content h2 em,
.home-page .final-copy h2 em {
  margin-top: var(--fh-home-section-cursive-gap) !important;
}

/* TESTIMONIALS */
.home-page .testimonial-heading h2 {
  font-size: var(--fh-testimonial-size) !important;
  line-height: var(--fh-testimonial-line-height) !important;
}
.home-page .testimonial-heading h2 em {
  margin-top: var(--fh-testimonial-cursive-gap) !important;
}

/* SERVICES */
html[data-page="services"] .inner-hero h1 {
  font-size: var(--fh-services-hero-size) !important;
}
html[data-page="services"] .service-copy h2,
html[data-page="services"] .section-heading h2 {
  font-size: var(--fh-services-section-size) !important;
}

/* AI */
html[data-page="ai"] .inner-hero h1 {
  font-size: var(--fh-ai-hero-size) !important;
}
html[data-page="ai"] .section-heading h2,
html[data-page="ai"] .ai-showcase-copy h2,
html[data-page="ai"] .final-copy h2 {
  font-size: var(--fh-ai-section-size) !important;
}

/* WHY FLOWHAZE */
html[data-page="about"] .inner-hero h1 {
  font-size: var(--fh-why-hero-size) !important;
}
html[data-page="about"] .split-story h2,
html[data-page="about"] .founders-copy h2,
html[data-page="about"] .section-heading h2 {
  font-size: var(--fh-why-section-size) !important;
}

/* CONTACT */
html[data-page="contact"] .contact-hero h1,
html[data-page="contact"] .inner-hero h1 {
  font-size: var(--fh-contact-heading-size) !important;
}

/* FINAL CTA */
.page-cta h2 {
  font-size: var(--fh-final-cta-size) !important;
}

/* MOBILE CONTROLS */
@media (max-width: 760px) {
  body { font-size: var(--fh-body-mobile-size) !important; }

  .home-page .hero-copy h1 {
    font-size: var(--fh-home-hero-mobile-size) !important;
  }
  .home-page .section-heading h2,
  .home-page .system-copy h2,
  .home-page .ai-copy h2,
  .home-page .engagement-content h2,
  .home-page .final-copy h2 {
    font-size: var(--fh-home-section-mobile-size) !important;
  }
  .home-page .testimonial-heading h2 {
    font-size: var(--fh-testimonial-mobile-size) !important;
  }
  html[data-page="services"] .inner-hero h1 {
    font-size: var(--fh-services-hero-mobile-size) !important;
  }
  html[data-page="services"] .service-copy h2,
  html[data-page="services"] .section-heading h2 {
    font-size: var(--fh-services-section-mobile-size) !important;
  }
  html[data-page="ai"] .inner-hero h1 {
    font-size: var(--fh-ai-hero-mobile-size) !important;
  }
  html[data-page="ai"] .section-heading h2,
  html[data-page="ai"] .ai-showcase-copy h2,
  html[data-page="ai"] .final-copy h2 {
    font-size: var(--fh-ai-section-mobile-size) !important;
  }
  html[data-page="about"] .inner-hero h1 {
    font-size: var(--fh-why-hero-mobile-size) !important;
  }
  html[data-page="about"] .split-story h2,
  html[data-page="about"] .founders-copy h2,
  html[data-page="about"] .section-heading h2 {
    font-size: var(--fh-why-section-mobile-size) !important;
  }
  html[data-page="contact"] .contact-hero h1,
  html[data-page="contact"] .inner-hero h1 {
    font-size: var(--fh-contact-heading-mobile-size) !important;
  }
  .page-cta h2 {
    font-size: var(--fh-final-cta-mobile-size) !important;
  }
}

/* ======================================================================
   OPTIONAL ONE-SECTION OVERRIDE EXAMPLE
   ----------------------------------------------------------------------
   Remove the comment marks around an example and change the value.

   Example: make only the AI hero 60px

   html[data-page="ai"] .inner-hero h1 {
     font-size: 60px !important;
     font-family: 'Times New Roman', serif !important;
   }

   Example: make only the homepage testimonial heading smaller

   .home-page .testimonial-heading h2 {
     font-size: 48px !important;
   }
   ====================================================================== */