/* ==========================================================================
   Leie Folk — one calm type scale for the whole site
   --------------------------------------------------------------------------
   The page stylesheets grew their own, ever larger headings. This file is
   loaded last on every public page and brings them onto the scale of the
   contact page: page headlines up to ~3.25rem, section headings up to
   ~2.25rem, lead text at 1rem and 44px form fields. Layout, spacing and
   colours stay with the page stylesheets.
   ========================================================================== */

/* ---------------------------------------------------------- page headlines */
.about-intro h1,
.team-hero h1,
.article-hero h1,
.articles-hero h1,
.legal-hero h1,
.it-areas-hero h1,
.business-process-hero h1,
.company-hero h1,
.jobs-hero h1,
.candidate-process-hero h1,
.why-hero h1,
.registration-form h1,
.registration-success h1,
.registration-choice h1,
.admin-login-card h1 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.04em;
}

/* the front page keeps a slightly larger statement */
.premium-home .hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: 1.06;
}

/* ------------------------------------------------------------- lead text */
.about-intro-copy > p,
.team-hero > p:last-child,
.article-lead,
.articles-hero p:last-child,
.it-areas-hero-copy > p:not(.eyebrow),
.it-areas-hero-copy > p.it-areas-lead,
.business-process-lead,
.company-hero-copy > p:not(.eyebrow),
.jobs-hero-copy p,
.candidate-process-intro p,
.why-hero-copy > p:not(.eyebrow),
.why-intro > p,
.candidate-process-future h2 + p,
.registration-lead,
.premium-home .hero-copy > p {
  font-size: 1rem;
  line-height: 1.7;
}

/* ------------------------------------------------------ section headings */
h2,
.premium-home h2,
.premium-home .home-about h2,
.premium-home .home-stats-heading h2,
.premium-home .service-models-heading h2,
.premium-home .faq-heading h2,
.premium-home .home-jobs-heading h2,
.home-about h2,
.about-section-heading h2,
.about-mission h2,
.about-values > h2,
.team-heading h2,
.article-body h2,
.it-areas-catalog-heading h2,
.it-areas-overlap h2,
.business-process-heading h2,
.company-section-heading h2,
.company-expertise h2,
.company-relationships h2,
.company-models .company-section-heading h2,
.jobs-catalog-intro h2,
.jobs-results-heading h2,
.job-detail-header h2,
.candidate-process-section-heading h2,
.candidate-process-future h2,
.why-intro h2,
.why-process h2,
.why-relationship h2,
.why-faq h2,
.registration-aside-card h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -.035em;
}

/* closing calls to action get a little more weight than a section */
.about-purpose h2,
.team-cta h2,
.article-cta h2,
.it-areas-cta h2,
.business-process-cta h2,
.company-cta h2,
.jobs-cta h2,
.why-cta h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -.035em;
}

/* headings inside cards and quotes */
.articles-grid .article-card h2,
.premium-home .insights h2,
.premium-home .tab-panel h2 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.25;
}

/* ------------------------------------------------------------------ forms */
.registration-form input:not([type=checkbox]),
.registration-form select,
.admin-login-form input,
.jobs-filters input,
.jobs-filters select {
  height: 44px;
  min-height: 0;
  font-size: .9375rem;
}
.registration-form input:not([type=checkbox]),
.registration-form select,
.registration-form textarea {
  border-color: #e2e7ed;
  border-radius: 10px;
}
.registration-form textarea {
  min-height: 112px;
  font-size: .9375rem;
}
.registration-form input:not([type=checkbox]):focus,
.registration-form select:focus,
.registration-form textarea:focus {
  border-color: #071d36;
  outline: 0;
  box-shadow: 0 0 0 3px #071d3614;
}

/* ----------------------------------------------------------------- phones */
@media (max-width: 700px) {
  .about-intro h1,
  .team-hero h1,
  .article-hero h1,
  .articles-hero h1,
  .legal-hero h1,
  .it-areas-hero h1,
  .business-process-hero h1,
  .company-hero h1,
  .jobs-hero h1,
  .candidate-process-hero h1,
  .why-hero h1,
  .registration-form h1,
  .registration-success h1,
  .registration-choice h1,
  .admin-login-card h1 {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem);
  }
  .premium-home .hero h1 {
    font-size: clamp(2rem, 8.5vw, 2.75rem);
  }
  .about-intro-copy > p,
  .team-hero > p:last-child,
  .article-lead,
  .articles-hero p:last-child,
  .it-areas-hero-copy > p:not(.eyebrow),
  .it-areas-hero-copy > p.it-areas-lead,
  .business-process-lead,
  .company-hero-copy > p:not(.eyebrow),
  .jobs-hero-copy p,
  .candidate-process-intro p,
  .why-hero-copy > p:not(.eyebrow),
  .registration-lead,
  .premium-home .hero-copy > p {
    font-size: .9375rem;
  }
  h2,
  .premium-home h2,
  .premium-home .home-about h2,
  .premium-home .home-stats-heading h2,
  .premium-home .service-models-heading h2,
  .premium-home .faq-heading h2,
  .premium-home .home-jobs-heading h2,
  .home-about h2,
  .about-section-heading h2,
  .about-mission h2,
  .about-values > h2,
  .team-heading h2,
  .article-body h2,
  .it-areas-catalog-heading h2,
  .it-areas-overlap h2,
  .business-process-heading h2,
  .company-section-heading h2,
  .company-expertise h2,
  .company-relationships h2,
  .company-models .company-section-heading h2,
  .jobs-catalog-intro h2,
  .jobs-results-heading h2,
  .job-detail-header h2,
  .candidate-process-section-heading h2,
  .candidate-process-future h2,
  .why-intro h2,
  .why-process h2,
  .why-relationship h2,
  .why-faq h2,
  .registration-aside-card h2,
  .about-purpose h2,
  .team-cta h2,
  .article-cta h2,
  .it-areas-cta h2,
  .business-process-cta h2,
  .company-cta h2,
  .jobs-cta h2,
  .why-cta h2 {
    font-size: 1.6rem;
  }
}

/* ------------------------------------------------------------ login card
   A small form, so its headline stays compact rather than page-sized. */
.admin-login-card h1 {
  margin-bottom: 10px;
  font-size: 2.25rem;
}
@media (max-width: 700px) {
  .admin-login-card h1 {
    font-size: 1.875rem;
  }
}
/* iOS Safari zooms the whole page into any field set below 16px. On phones
   and other touch screens every field gets 16px, whatever the page sets. */
@media (max-width: 900px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}