/* Styles for footer.hbs — the global site footer.
   Ported from the legacy `components/layout/footer/Footer.vue`; the 1000
   breakpoint and every size below are the legacy values, as measured on the
   live site. */

.site-footer {
  margin: 40px auto 88px;
  padding-bottom: 88px;
}

.site-footer-brand {
  display: block;
  width: fit-content;
  margin: 40px 0 32px;
}

/* The file is 192x80; the attributes describe that ratio and the width here
   picks the rendered size, leaving the global `img { height: auto }` to keep
   the proportions. */
.site-footer-brand img {
  width: 76px;
}

.site-footer-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.site-footer-contact {
  display: flex;
  gap: 24px;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 400;
}

.site-footer-contact-item {
  font-size: 14px;
  font-weight: 400;
}

.site-footer-contact-item a {
  color: var(--gray-900);
}

/* Separates the two channels from each other, not from the label — so it hangs
   on the trailing one. In RTL that puts the rule on its right edge. */
.site-footer-contact-item:last-child {
  padding-right: 24px;
  border-right: 1px solid var(--gray-300);
}

.site-footer-social {
  display: flex;
  gap: 24px;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 400;
}

/* The glyphs are stroked, and the sprite draws them with `currentColor`, so
   `color` here is what tints them. */
.site-footer-social-link {
  display: flex;
  color: var(--gray-600);
}

.site-footer-divider {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--gray-300);
}

/* 16px of gap plus the 8px each link carries below it is the legacy 24px between
   stacked links — and because the trailing 8px survives on the last one, the
   copyright sits 40px down rather than 32px, exactly as upstream. */
.site-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 14px, which is what the legacy footer renders — its own stylesheet asks for
   16px and `--gray-900`, but the shared nav component it borrowed puts the label
   in a 14px span and that is what wins. Matching the rendered result rather than
   the dead declaration. The colour follows the same component: default (near
   black) in its base block and subdued only from 1000px up, so the links stay in
   step with the black contact line above them on phones and tablets. */
/* Flex and centred, both load-bearing: left inline, a 14px link inherits the
   16px line box of the nav around it, and as a stretched flex item its text
   would then sit high in the taller box rather than on the row's centre line. */
.site-footer-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: var(--on-background-neutral-default);
  font-size: 14px;
  font-weight: 400;
}

.site-footer-copyright {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--gray-600);
  font-size: 16px;
  font-weight: 400;
}

@media (min-width: 1000px) {
  .site-footer {
    margin: 80px auto 40px;
    padding-bottom: 40px;
  }

  .site-footer-brand img {
    width: 96px;
  }

  .site-footer-row {
    flex-direction: row;
  }

  .site-footer-nav {
    flex-direction: row;
    gap: 48px;
  }

  /* Laid out in a row from here, so the per-link trailing space has nothing left
     to separate and upstream drops it too. */
  .site-footer-nav-link {
    margin-bottom: 0;
    color: var(--on-background-neutral-subdued);
  }

  /* The yellow bar the legacy footer slides in under a hovered link. Upstream
     draws it from the shared nav component, whose 500ms "slide-mode" timer then
     retires it for the rest of the page; the footer is static markup here with no
     island to run that timer, so ours simply keeps answering the hover. */
  .site-footer-nav-link::after {
    content: "";
    position: absolute;
    inset-inline: 6px 6px;
    bottom: 0;
    height: 3px;
    background: var(--on-background-neutral-cta);
    border-radius: 12px 12px 0 0;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .site-footer-nav-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /* Only once the copyright and the version sit on one line does a rule between
     them mean anything; stacked, it would cut across the column. */
  .site-footer-copyright {
    flex-direction: row;
  }

  .site-footer-version {
    padding-right: 8px;
    border-right: 1px solid var(--gray-300);
  }
}