/* Typography-only overrides. Loaded after fonts.css and styles.css. */

body {
  font-size: 17px;
}

.brand-copy strong {
  font-size: 32px;
}

.brand-copy small {
  font-size: 15px;
}

.nav-btn {
  font-size: 17px;
}

.hero-eyebrow,
.section-kicker,
.form-step,
.modal-kicker {
  font-size: 16px;
}

.hero-copy h1 {
  font-size: clamp(56px, 4.5vw, 64px);
}

.hero-subtitle {
  font-size: clamp(18px, 1.4vw, 20px);
}

.journey-steps strong {
  font-size: 17px;
}

.journey-steps small,
.form-hint {
  font-size: 16px;
}

.form-label,
.filter-field,
.check-filter,
.form-field,
.consent-field,
.major-search-label {
  font-size: 16px;
}

.major-trigger,
.major-option,
.text-input,
.search-field input,
.filter-field select,
.form-field input,
.form-field select {
  font-size: 16px;
}

.btn-primary,
.btn-secondary,
.btn-quiet,
.btn-card-view,
.btn-card-save,
.button-link,
.icon-button,
.modal-close,
.modal-back {
  font-size: 16px;
}

.card-title {
  font-size: 22px;
}

.card-problem p {
  font-size: 17px;
}

.card-context,
.card-meta,
.card-problem > span,
.card-english,
.badge {
  font-size: 15px;
}

.footer-brand strong {
  font-size: 26px;
}

.footer-brand p,
.footer-owner span,
.social-link {
  font-size: 16px;
}

.footer-owner strong {
  font-size: 22px;
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }

  .brand-copy strong {
    font-size: 30px;
  }

  .hero-copy h1 {
    font-size: clamp(40px, 12vw, 48px);
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy,
  .form-card,
  .bottom-nav-item {
    min-width: 0;
  }

  .hero-copy h1,
  .hero-subtitle,
  .bottom-nav-item span {
    overflow-wrap: anywhere;
  }

  .hero-subtitle {
    font-size: 18px;
  }

  .form-label,
  .filter-field,
  .check-filter,
  .form-field,
  .consent-field,
  .major-search-label,
  .major-trigger,
  .major-option,
  .text-input,
  .search-field input,
  .filter-field select,
  .form-field input,
  .form-field select,
  .btn-primary,
  .btn-secondary,
  .btn-quiet,
  .btn-card-view,
  .btn-card-save,
  .button-link,
  .bottom-nav-item {
    font-size: 16px;
  }

  .card-title {
    font-size: 22px;
  }

  .card-problem p {
    font-size: 16px;
  }

  .footer-brand strong {
    font-size: 24px;
  }

  .footer-brand p,
  .footer-owner span,
  .social-link {
    font-size: 16px;
  }
}