/*
  Footer — verified via get_design_context on the live instance 2:13425
  (Home page, fileKey DU3fuTo8QXIJ0uMcI3jh91). Pixel values below are
  literal values read from that instance, not a formal spacing token
  (Figma does not define one — see docs/Portfolio_Data_Inventory.md).

  Figma laid this out with absolute positioning inside a fixed
  1280px-wide frame; reimplemented here as a responsive flex layout
  that preserves the same visual arrangement (logo+social row, then
  copyright+contact row) at the same 80px page margin used elsewhere.
*/

/* UI: GLOBAL-FOOTER-01 | Site footer | inspect/adjust */
.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--color-deep-text);
  padding: 24px 80px;
}

/*
  Fixed 2026-08-25: was fixed at 1280px and centered, so it never
  reached the screen edges below 1280px viewports (clipped by
  .site-footer's overflow:hidden) and left empty space beyond 1280px
  on wider screens. The source SVG is preserveAspectRatio="none" (a
  plain stroked rectangle), so stretching it to 100% width is safe —
  no distortion risk the way a photo would have.
*/
.site-footer__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 256px;
  z-index: 0;
  pointer-events: none;
}

.site-footer__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer__row--top {
  margin-bottom: 45px;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 38px;
}

/*
  Hover added 2026-08-25. Figma's "Social link" icons (2:15077 etc.)
  have no Hover variant defined — unlike every other interactive
  element in this file, they're single-state static icons. A uniform
  recolor-to-purple (this site's usual hover convention) isn't safe
  here: the LinkedIn icon is a two-tone badge (white background +
  #373737 glyph), so recoloring only one fill would look broken next
  to the single-color Instagram/Telegram icons. Scale/opacity feedback
  works the same regardless of an icon's own color makeup, so it's
  used for all three instead of inventing a Figma-unspecified color.
*/
.site-footer__social a {
  display: inline-flex;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.site-footer__social a:hover {
  transform: scale(1.12);
  opacity: 0.8;
}

.site-footer__social a img {
  width: 24px;
  height: 24px;
}

.site-footer__copyright,
.site-footer__contact {
  color: var(--color-light-gray);
}

.site-footer__contact a {
  color: inherit;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 24px;
  }
}