/* ============================================================
   Button base.

   In the export these declarations are INLINE styles emitted by the
   design system's <Button> React component -- they are not in any
   stylesheet, which is why assets/css/ds/homepage.css only carries the
   :hover rules. Pages transcribed from the export keep the inline styles
   (so they match byte for byte); every other template just uses the
   .fa-btn classes and picks the same values up from here.

   Keep these in sync with the inline styles in
   template-parts/chrome/header.php.
   ============================================================ */

.fa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-none, 0px);
  padding: var(--pad-btn-y, 15px) var(--pad-btn-x, 20px);
  font: var(--type-button);
  letter-spacing: var(--ls-tight, -0.01em);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: opacity var(--dur-base, 200ms) var(--ease-standard),
              background var(--dur-base, 200ms) var(--ease-standard),
              color var(--dur-base, 200ms) var(--ease-standard);
}

.fa-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.fa-btn--yellow {
  background: var(--btn-yellow-bg);
  color: var(--btn-yellow-fg);
}

.fa-btn--outline {
  background: transparent;
  color: var(--btn-outline-fg);
  box-shadow: var(--border-ink);
}

.fa-btn--outline-on-dark {
  background: transparent;
  color: var(--btn-outline-on-dark-fg);
  box-shadow: var(--border-on-dark);
}

img {
  max-width: 100%;
}

/* The design has NO global img rule; the one above is ours, so an
   editor-inserted image cannot overflow its column. It must not reach the
   design's scrolling tracks.

   Each track is a flex item sized by `width: max-content` and is free to
   shrink (flex: 0 1 auto). It only holds its full width because its
   automatic minimum size is the sum of its images -- and capping an image's
   contribution collapses the whole track to its container. The animation
   still runs for its full duration, but now crosses the container width
   instead of the track width, so it crawls.

   That is what made the careers marquee look broken: 140s to cross 1440px
   instead of 22323px, 5.1 px/s against the design's 79.7 px/s -- 16x too
   slow, from a rule that never touched the images themselves.

   Fixed at the mechanism rather than per image: a track that cannot shrink
   keeps its max-content width whatever else caps its contents. */
.cr-marquee,
.fa-marquee__track,
.fa-trustbar__track,
.fa-tstrip__track {
  flex: none;
}