/* Sykli Typography System — v1.4.1 RC13
   All typography uses design tokens from design-tokens.css.
*/

/* Base */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
}

/* Logo */
.logo,
.footer .logo {
  font-family: var(--font-heading);
  font-size: var(--text-logo);
  font-weight: 700;
}

/* Navigation, language switch, footer links */
.nav,
.nav-link,
.language-switch,
.footer-links a {
  font-family: var(--font-body);
  font-size: var(--text-menu-link);
  font-weight: 400;
}

/* Hero */
.hero h1 {
  font-family: var(--font-heading);
  font-size: var(--hero-h1);
  font-weight: 700;
  text-transform: uppercase;
}

.hero p,
.hero-body {
  font-family: var(--font-body);
  font-size: var(--hero-subtitle);
  font-weight: 400;
}

/* Editorial statement on homepage image */
.statement h2 {
  font-family: var(--font-heading);
  font-size: var(--text-hero-statement);
  font-weight: 700;
  text-transform: none;
}

/* H1 / Page title */
.services-hero h1,
.why-copy h1,
.contact-page h1,
.steps h2 {
  font-family: var(--font-heading);
  font-size: var(--text-page-title);
  font-weight: 700;
  text-transform: uppercase;
}

/* H2 / Section heading */
.contact h2,
.contact-copy h2,
.accordion-group h2,
.faq-title,
.sources-section h2,
.why-accordion h2 {
  font-family: var(--font-heading);
  font-size: var(--text-section-heading);
  font-weight: 700;
}

/* H3 / Subheading */
.why-copy h2,
.subheading,
.lead-heading,
.about-copy h2,
.page-intro h2,
.services-intro h2 {
  font-family: var(--font-heading);
  font-size: var(--text-subheading);
  font-weight: 700;
}

/* H4 / Card headings */
.card h3,
.step-card h3,
.service-card h3,
.service-item h3,
.background-list h3 {
  font-family: var(--font-heading);
  font-size: var(--text-card-heading);
  font-weight: 700;
}

/* Service titles */
.service-component h2 {
  font-family: var(--font-heading);
  font-size: var(--text-service-title);
  font-weight: 700;
  text-transform: uppercase;
}

/* Service mini-headings: Sisältää / Mitä opit / Sopii sinulle, jos... */
.service-component h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 800;
}

/* FAQ question headings */
.faq-accordion h3 {
  font-family: var(--font-heading);
  font-size: var(--text-faq-question);
  font-weight: 700;
}

/* Body copy — paragraphs and lists */
main p:not(.service-meta):not(.price),
.body-copy,
.card p,
.step-card p,
.service-component p,
.service-component li,
.service-copy li,
.follow-up-service p,
.accordion-section p,
.accordion-section li,
.faq-answer p,
.why-copy p,
.behind-copy p,
.background-list p,
.contact-copy p,
.contact-page-copy p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
}

/* Prices and service metadata follow body copy */
.price,
.service-meta {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
}

/* UI text */
.button,
button {
  font-family: var(--font-body);
  font-size: var(--button-text);
  font-weight: 400;
}

.contact-form label,
.form-label,
input,
textarea,
select {
  font-family: var(--font-body);
  font-size: var(--form-label);
  font-weight: 400;
}

.footer p {
  font-family: var(--font-body);
  font-size: var(--text-footer-copyright);
  font-weight: 400;
}

/* Mobile typography overrides */
@media (max-width: 820px) {
  .hero h1 {
    font-size: clamp(46px, 12vw, 72px);
  }

  .hero p {
    font-size: var(--hero-subtitle);
  }

  .statement h2 {
    font-size: clamp(38px, 10vw, 56px);
  }

  .faq-accordion h3 {
    font-size: 22px;
  }
}