/* ==========================================================================
   SITE FOOTER
   --------------------------------------------------------------------------
   Figma "Footer", node 714:8090 (1920 x 110).

   Shared by every page. Deliberately SELF-CONTAINED: work/switching.html
   ships its own standalone stylesheet and never loads tokens.css, so this
   file defines its own values on .site-footer rather than reaching for the
   design tokens. Scoping them to the block keeps them from leaking into a
   page that has tokens of the same name.

   Load it LAST so it wins over any page-level footer rules.
   ========================================================================== */

.site-footer {
  /* --- frame values ------------------------------------------------- */
  --footer-bg:      #303032;
  --footer-muted:   #8A857F;
  --footer-bright:  #EDEDEA;

  /* 46 / 80 at 1920, easing down to 28 / 20 on a phone */
  --footer-pad-block:  clamp(1.75rem, 1.47694rem + 1.16505vw, 2.875rem);
  --footer-pad-inline: clamp(1.25rem, 0.33981rem + 3.88350vw, 5rem);

  display: block;
  padding: var(--footer-pad-block) var(--footer-pad-inline);
  background-color: var(--footer-bg);
  color: var(--footer-muted);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;                /* 16 */
  font-weight: 300;               /* Light */
  line-height: 1.25;              /* 20 / 16 */
  letter-spacing: 0.3px;
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--footer-pad-block);
}

.site-footer p { margin: 0; }

/* --- left: copyright ------------------------------------------------ */
.site-footer__copyright {
  flex: 0 1 auto;
  color: var(--footer-muted);
}

/* --- right: build credits ------------------------------------------- */
.site-footer__tools {
  display: flex;
  flex-wrap: wrap;
  /* At 1920 the label runs to ~355px and the tool list starts at 375px
     from the group's left edge, so the gap between them is 20. */
  gap: 0.25rem 1.25rem;
  color: var(--footer-muted);
}

.site-footer__tools-list {
  color: var(--footer-bright);
}

/* The frame writes its separators as "  |  " - two spaces either side - so
   the pipes sit wider than a bare glyph would. 0.7rem reproduces that and
   lands the tool list on the frame's 333px measure. */
.site-footer__sep {
  padding-inline: 0.7rem;
}

/* --- stack once the two groups stop fitting side by side ------------- */
@media (max-width: 899px) {
  .site-footer__inner {
    flex-direction: column;
    gap: var(--footer-pad-block);
  }
}