/**
 * Brand typography: Jabula, Thematic (logo fonts), Everlo Sans (body).
 * Loads on all pages so headings and body display correctly on desktop and mobile.
 * font-display: swap so text is visible while fonts load (critical for mobile).
 */

@font-face {
  font-family: 'Jabula';
  src: url('/fonts/Jabula.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Thematic';
  src: url('/fonts/Thematic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Ensure :root variables apply on mobile (no viewport override) */
:root {
  --ecosoap-heading-font: "Jabula", cursive;
  --ecosoap-main-font: "Everlo Sans", sans-serif;
  --ecosoap-accent-font: "Thematic", cursive;
}

/* Jabula only for large display (h1, h2, h3). Smaller headings = Lora (--sj-small-heading-font). */
body h4,
body h5,
body h6,
h4, h5, h6 {
  font-family: var(--sj-small-heading-font, "Everlo Sans", sans-serif) !important;
  letter-spacing: 0.02em;
}
h1, h2, h3,
.elementor-widget-heading .elementor-heading-title {
  letter-spacing: 0.03em;
}

/* Mobile: body + small headings Lora; only h1/h2/h3 keep Jabula for big display */
body,
.elementor-widget-heading .elementor-heading-title,
h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 1024px) {
  body {
    font-family: var(--ecosoap-main-font);
  }
  h4, h5, h6 {
    font-family: var(--sj-small-heading-font, "Everlo Sans", sans-serif) !important;
  }
  h1, h2, h3,
  .elementor-widget-heading .elementor-heading-title {
    font-family: var(--ecosoap-heading-font);
  }
}