/*
 * Webgroeiers typography system
 * Based on the local SelectCursor design tokens: one variable Manrope family,
 * calm 700-weight headings, 400-weight body copy and restrained tracking.
 */

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/manrope-latin-variable.woff2") format("woff2-variations");
}

:root {
  --wg-font-sans: "Manrope Variable", "Manrope", "Inter", ui-sans-serif,
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wg-font-display: var(--wg-font-sans);
}

html,
body,
body a,
body button,
body input,
body label,
body li,
body p,
body select,
body small,
body span:not(.material-symbols-rounded),
body strong,
body textarea,
button,
input,
select,
textarea {
  font-family: var(--wg-font-sans) !important;
  font-synthesis: none;
}

body {
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-headline,
.dienst-h1,
.section-heading,
.h-kop,
.kb-title,
.mega-feature-price,
.wg-v2-service-card__body h3,
.wg-v2-portal-copy h3 {
  font-family: var(--wg-font-display) !important;
  font-optical-sizing: auto;
  font-style: normal;
}

h1,
.hero-headline,
.dienst-h1,
.wg-v2-hero h1,
.switch-hero h1 {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.02 !important;
}

h2,
.section-heading,
.h-kop {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}

h3,
h4,
.kb-title,
.wg-v2-service-card__body h3,
.wg-v2-portal-copy h3 {
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
}

p,
li,
dd,
dt {
  font-family: var(--wg-font-sans);
}

strong,
b {
  font-weight: 700;
}

.site-header,
.site-header button,
.site-header a,
.mobile-menu,
.mobile-menu button,
.mobile-menu a,
.wg-header-v8 .nav-links > li > a,
.wg-header-v8 .nav-mega-trigger {
  font-family: var(--wg-font-sans) !important;
}

.wg-header-v8 .nav-links > li > a,
.wg-header-v8 .nav-mega-trigger {
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

.btn,
.btn-primary,
.btn-secondary,
.nav-login,
.nav-cta,
.wg-v2-button,
.switch-button,
.mega-feature-button,
button[type="submit"],
input[type="submit"] {
  font-family: var(--wg-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.wg-v2-eyebrow,
.section-eyebrow,
.switch-pill,
.switch-eyebrow,
.mega-heading,
.mega-feature-eyebrow,
.wg-v2-service-card__label,
.wg-v2-integration-card > span:first-child {
  font-family: var(--wg-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* The main marketing pages follow SelectCursor's desktop type rhythm. */
.wg-v2-hero h1,
.switch-hero h1,
.wg-page-v8 .dienst-h1 {
  font-size: clamp(2.75rem, 4.7vw, 3.75rem) !important;
}

.wg-v2 h2,
.overstappen-page main h2,
.wg-page-v8 main h2 {
  font-size: clamp(2.25rem, 3.45vw, 2.75rem) !important;
}

.wg-v2-hero__lead,
.switch-hero__lead,
.wg-page-v8 .dienst-intro {
  font-size: clamp(1.0625rem, 1.55vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
}

/* Preserve the icon font when it is nested in typography-controlled UI. */
.material-symbols-rounded {
  font-family: "Material Symbols Rounded" !important;
  font-weight: normal !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
}

@media (max-width: 767px) {
  .wg-v2-hero h1,
  .switch-hero h1,
  .wg-page-v8 .dienst-h1 {
    font-size: clamp(2.5rem, 11.25vw, 2.75rem) !important;
    line-height: 1.08 !important;
  }

  .wg-v2 h2,
  .overstappen-page main h2,
  .wg-page-v8 main h2 {
    font-size: clamp(2rem, 9.25vw, 2.25rem) !important;
    line-height: 1.12 !important;
  }

  .wg-v2-hero__lead,
  .switch-hero__lead,
  .wg-page-v8 .dienst-intro {
    font-size: 1.0625rem !important;
    line-height: 1.5 !important;
  }
}