/*
 * Figma typography and header lockup for every page that still renders through
 * header.php / app.css — everything outside the four standalone Figma templates. Loaded
 * after app.css, so equal-specificity rules win; the selectors below are
 * copied verbatim from app.css for exactly that reason.
 *
 * FAMILY. Measured across all four Figma templates, "the Figma font" is not
 * Inter everywhere: .fh sets Arial as the base and only ~28 rules opt into
 * Inter. Arial carries the running copy and most section titles; Inter carries
 * the display title and the small meta/link labels. That split is reproduced.
 *
 * SCALE. app.css drives its whole scale off the root (html:10px, then .8vw
 * between 1024 and 1400, then 8px), so its text is fluid and roughly 1.5x the
 * Figma sizes — body was 36px against Figma's 24px, the nav 26px against
 * 18.667px. The Figma pages are fixed-pixel from 1024 up and step at 820px and
 * 480px, so the roles below are fixed px too and step at the same two points.
 * Explicit px overrides the rem, so the fluid root no longer reaches the text.
 *
 * Every number is measured off the live Figma pages, per role:
 *
 *   role      >=821px             481-820px      <=480px
 *   display   47.636/55.762 -.05  34/40 -1.6px   30/36 -1.3px   fh-hero__title
 *   big       47.636/55.762 -.05  32/38 -1.6px   27/32 -1.3px   fh-chal__title
 *   section   28/27.374 -.05em    18/27.374      16/27.374      fh-ideas__title
 *   copy      24/33.283 -.01em    19/26          19/26          fh-chal__desc
 *   link      24.3/27 -.03em      19/27          17/27          fh-cases__all a
 *   secondary 18/27 -.03em        18/27          17/27          fh-cta__action a
 *   meta      16/18 -.03em        16/18          16/18          fh-idea__meta
 *   nav       18.667/28 -.01em    ->             42/48 -1px     fh-nav a
 *
 * The nav is the one role that keeps app.css's own breakpoint rather than the
 * Figma one: the legacy menu turns into a full-screen overlay at 767.98px, and
 * that overlay needs the large 42/48 size the Figma pages also use for it.
 */

:root {
  --ft-sans: Arial, Helvetica, sans-serif;
  --ft-display-family: Inter, Arial, Helvetica, sans-serif;

  --ft-display: 47.636px;   --ft-display-lh: 55.762px;  --ft-display-ls: -0.05em;
  --ft-big:     47.636px;   --ft-big-lh:     55.762px;  --ft-big-ls:     -0.05em;
  --ft-section: 28px;       --ft-section-lh: 27.374px;  --ft-section-ls: -0.05em;
  --ft-copy:    24px;       --ft-copy-lh:    33.283px;  --ft-copy-ls:    -0.01em;
  --ft-link:    24.3px;     --ft-link-lh:    27px;      --ft-link-ls:    -0.03em;
  --ft-sec:     18px;       --ft-sec-lh:     27px;      --ft-sec-ls:     -0.03em;
  --ft-meta:    16px;       --ft-meta-lh:    18px;      --ft-meta-ls:    -0.03em;
  --ft-nav:     18.667px;   --ft-nav-lh:     28px;      --ft-nav-ls:     -0.01em;
}

@media (max-width: 820px) {
  :root {
    --ft-display: 34px;   --ft-display-lh: 40px;      --ft-display-ls: -1.6px;
    --ft-big:     32px;   --ft-big-lh:     38px;      --ft-big-ls:     -1.6px;
    --ft-section: 18px;   --ft-section-lh: 27.374px;  --ft-section-ls: -0.05em;
    --ft-copy:    19px;   --ft-copy-lh:    26px;
    --ft-link:    19px;   --ft-link-lh:    27px;
  }
}

@media (max-width: 480px) {
  :root {
    --ft-display: 30px;   --ft-display-lh: 36px;      --ft-display-ls: -1.3px;
    --ft-big:     27px;   --ft-big-lh:     32px;      --ft-big-ls:     -1.3px;
    --ft-section: 16px;   --ft-section-lh: 27.374px;
    --ft-link:    17px;   --ft-link-lh:    27px;
    --ft-sec:     17px;   --ft-sec-lh:     27px;
  }
}

/* ---------- base ---------- */

/* app.css sets this with a `font:` shorthand, so size and line-height both
   have to be named here or the shorthand keeps winning. */
body {
  font-family: var(--ft-sans);
  font-size: var(--ft-copy);
  line-height: var(--ft-copy-lh);
  font-weight: 400;
  letter-spacing: var(--ft-copy-ls);
  -webkit-font-smoothing: antialiased;
}

/* app.css sets h1-h6 bold; the Figma design has no bold heading anywhere. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ft-sans);
  font-weight: 400;
}

/* ---------- display — app.css .h1,h1 was 8rem/.8 (80/64) ---------- */

.h1, h1 {
  font-family: var(--ft-display-family);
  font-size: var(--ft-display);
  line-height: var(--ft-display-lh);
  letter-spacing: var(--ft-display-ls);
}

/* ---------- big title — app.css tier at 6.2rem/6.6rem (62/66) ---------- */

.entry h2,
.big-links a,
.field-item h2,
.home-item h2 {
  font-size: var(--ft-big);
  line-height: var(--ft-big-lh);
  letter-spacing: var(--ft-big-ls);
}

/* ---------- section title — app.css tier at 3.6rem/.944 (36/34) ---------- */

.h2, h2,
.entry.sm h2,
.numbers-v-list li,
.v-number-item .label {
  font-size: var(--ft-section);
  line-height: var(--ft-section-lh);
  letter-spacing: var(--ft-section-ls);
}

/* ---------- copy — app.css body/.entry at 3.6rem/1.389 (36/50) ----------
   p, li and the rest are deliberately NOT listed: app.css's reset gives them
   `font: inherit`, so they already follow body. Naming them here would break
   that chain — a footer <li> would jump to copy size instead of inheriting the
   footer's own. Only selectors app.css sizes explicitly need an entry. */

.entry,
.contact-info .entry p,
.team-cat li {
  font-size: var(--ft-copy);
  line-height: var(--ft-copy-lh);
  letter-spacing: var(--ft-copy-ls);
}

/* Buttons take the copy size but keep app.css's line-height: that is what sets
   their height, so overriding it would resize the control, not the text. */
.btn-submit,
.load-more,
.more-details .impact strong {
  font-size: var(--ft-copy);
  letter-spacing: var(--ft-copy-ls);
}

/* .btn-h's line-height is the button's height, so only the size moves. */
.btn-h {
  font-size: var(--ft-sec);
  letter-spacing: var(--ft-sec-ls);
}

/* app.css makes this contact link large on narrow screens; it stays a
   prominent link rather than dropping to secondary. */
.contact-row .entry.sm a {
  font-size: var(--ft-link);
  line-height: var(--ft-link-lh);
  letter-spacing: var(--ft-link-ls);
}

/* ---------- secondary — app.css tiers at 2.6rem (26) and 2.8rem (28) ------- */

.btn-underline,
.entry.xs,
.entry.sm,
.contact-row .form-row p.sm,
.form-group,
.wpcf7-form-control,
.more-details,
.project-toggle,
.case-item .title,
.filters,
.v-number-item p,
.entry-graph,
.footer,
.contact-info .social,
.contact-info .entry p a,
.share-post.entry.sm,
.contact-row .entry.sm,
.cookie-bar .btns a,
.filters button,
.filters a {
  font-size: var(--ft-sec);
  line-height: var(--ft-sec-lh);
  letter-spacing: var(--ft-sec-ls);
}

/* ---------- meta — app.css tier at 1.8rem (18) ---------- */

.field-item p,
.team-cat .label,
.numbers-v-list .number,
.number-list .number,
.cats-list a,
.filters .count,
.thinking-list .label,
.home-item .number,
.home-item p,
.sticky-g,
.cookie-bar p {
  font-size: var(--ft-meta);
  line-height: var(--ft-meta-lh);
  letter-spacing: var(--ft-meta-ls);
}

/* ---------- nav ---------- */

.main-nav a {
  font-size: var(--ft-nav);
  line-height: var(--ft-nav-lh);
  letter-spacing: var(--ft-nav-ls);
}

/* app.css turns the menu into a full-screen overlay here, and the Figma pages
   use the same large size for theirs. */
@media (max-width: 767.98px) {
  .main-nav a {
    font-size: 42px;
    line-height: 48px;
    letter-spacing: -1px;
  }
}

/* ---------- form controls ---------- */

input, button, textarea, select {
  font-family: var(--ft-sans);
  letter-spacing: inherit;
}


/* ---------- header lockup — node 1:109, mirrors .fh-logo ----------
   app.css sized the old cicons.svg mark at 46.6rem x 6.1rem (466x61) on desktop
   and swapped to a narrow 165x61 mark below 1024. The Figma lockup is a
   different drawing at a different aspect (1028x212 against 461.53x61.53), so
   header.php now points at the same PNG the Figma nav uses and the box below
   reproduces .fh-logo exactly — including the inset, which is how that node
   crops in the design. One lockup at every width, as the Figma pages do. */

.header .logo,
.section-hero .logo {
  /* display:block matters: app.css only sets it on the header logo, so the 404
     hero's anchor stayed inline and collapsed its box to 0x0. */
  display: block;
  width: 254px;
  height: 55px;
  position: relative;
  overflow: hidden;
}

.header .logo img,
.section-hero .logo img {
  position: absolute;
  top: -0.06%;
  left: -5.12%;
  width: 105.12%;
  height: 100.11%;
  max-width: none;
  display: block;
}

@media (max-width: 820px) {
  .header .logo,
  .section-hero .logo {
    width: 200px;
    height: 43px;
  }
}