/* ============================================================
   Nyckel — Marketing Content Typography Standard
   ------------------------------------------------------------
   The display/reading type system for ALL marketing pages
   (homepage, blog, classifiers, detectors, general pages).
   NOT loaded on docs pages — docs own their type via docs.css.

   Loaded AFTER main.css so it overrides the legacy rem-based
   sizes in _sass/style.scss, which ballooned because the
   marketing document root is 20px (1rem = 20px). Everything
   here is px-based via the shared design tokens so sizes are
   uniform regardless of root.

   The homepage's hp-* classes are intentionally untouched
   (class selectors out-rank these bare-tag rules), so this
   only standardizes the rest of the marketing content.
   ============================================================ */

/* ── Reading copy ───────────────────────────────────────── */
body {
  font-size: var(--text-content);
  line-height: 1.6;
}
p {
  font-size: var(--text-content);
  line-height: 1.65;
  margin: 0 0 1rem;
}
li,
address {
  font-size: var(--text-content);
  line-height: 1.6;
}
.lead,
.intro {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ── Headings — px sizes, stronger weight, dark color so
      titles read clearly above body text ─────────────────── */
h1, .h1 {
  font-size: var(--text-3xl);
  line-height: 1.2;
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
h2, .h2 {
  font-size: var(--text-2xl);
  line-height: 1.25;
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
h3, .h3 {
  font-size: var(--text-xl);
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
h4, .h4 {
  font-size: var(--text-lg);
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
h5, .h5 {
  font-size: var(--text-md);
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
h6, .h6 {
  font-size: var(--text-sm);
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

/* ── Display / section titles (reduced from 44–60px) ─────── */
/* Hero title (`.display-custom`, was 2.2–2.7rem ≈ 44–54px) and the
   Bootstrap-style `.display-2…5` ladder used across marketing pages
   (how-nyckel-works, industries intros, product pages, etc.). All
   token-driven px so the scale is uniform and root-independent.
   Homepage `hp-*` and docs are untouched. */
.page-title,
.display-1,
.display-custom,
.display-custom2,
.display-custom3 {
  font-size: var(--text-display);
  line-height: 1.15;
  font-weight: var(--fw-bold);
}
.display-2 {
  font-size: var(--text-3xl);
  line-height: 1.2;
  font-weight: var(--fw-bold);
}
.display-3 {
  font-size: var(--text-2xl);
  line-height: 1.25;
  font-weight: var(--fw-bold);
}
.display-4 {
  font-size: var(--text-xl);
  line-height: 1.3;
  font-weight: var(--fw-semibold);
}
.display-5 {
  font-size: var(--text-lead);
  line-height: 1.5;
  font-weight: var(--fw-normal);
}
@media (max-width: 640px) {
  .display-custom,
  .display-custom2,
  .display-custom3 {
    font-size: var(--text-3xl);
    line-height: 1.2;
  }
}
.section-title {
  font-size: var(--text-2xl);
  line-height: 1.25;
  font-weight: var(--fw-bold);
}
.section-title.larger {
  font-size: var(--text-3xl);
  line-height: 1.2;
}

/* ── Blog featured hero ─────────────────────────────────── */
/* `.hero h1` (legacy, Arial 2.5rem) is more specific than a single
   class, so scope to `.hero .summary-hero-title` to win the cascade. */
.hero .summary-hero-title {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: 1.2;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0 0 12px;
}
.hero .summary {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-text-muted);
}
/* Post page hero sits on a dark background — keep the explainer white
   like the rest of the post hero text. Higher specificity than
   `.hero .summary` so it wins regardless of load order. */
.post .hero .summary {
  color: #fff;
}

/* ── Blog summary cards — clear title / body contrast ────── */
.summary-card-title {
  font-size: var(--text-lead);
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 6px;
}
.summary-card .entry,
.summary-card .entry p {
  font-size: var(--text-base);
  line-height: 1.55;
  font-weight: var(--fw-normal);
  color: var(--color-text-muted);
  margin: 0;
}

/* Card footer — compact, professional meta + action.
   Shared by blog cards and the industries grid. */
.summary-footer .date {
  font-size: var(--text-xs);
  line-height: 1.4;
  font-weight: var(--fw-normal);
  color: var(--color-text-muted);
}
.summary-footer .read-more {
  font-size: var(--text-base);
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  color: var(--color-blue);
  margin: auto 0;
}

/* ── Article / long-form body ───────────────────────────── */
.entry p,
.entry ul,
.entry ol,
.entry li {
  font-size: var(--text-content);
  line-height: 1.7;
}