/*
  Vetrixo site footer - one component, used on every surface.

  Markup contract:
    <footer class="site-footer">
      <div class="footer-inner">
        <picture>…<img class="footer-logo">…</picture>
        <div class="footer-links"> <a>…</a> </div>
        <div class="footer-legal">© 2026 Vetrixo</div>
      </div>
    </footer>

  Three items on one row, space-between: logo left, links centre, copyright
  right. The logo is load-bearing - with only two items the free space
  collapses into a single gap that strands the copyright hundreds of pixels
  from the links on a wide screen. Keep all three.

  Links and copyright share the footer's muted colour, so the row reads as one
  block.

  Link order is fixed: About, Privacy, Terms, Cookies, Acceptable Use,
  Data Processing, Contact. The pharmacy surfaces prepend Pharmacy
  Verification Terms. Colour comes from tokens.css.

  Links are not underlined at rest - the brand colour carries the affordance -
  and underline on hover and keyboard focus.
*/

.site-footer {
  margin-top: 54px;
  padding-top: 20px;
  border-top: 1px solid var(--vx-border);
  color: var(--vx-ink-soft);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding-bottom: 24px;
  font-size: 0.87rem;
  font-weight: 700;
}

.footer-legal {
  color: inherit;
}

/* Only inset when the footer sits outside a padded page container. */
body > .site-footer .footer-inner {
  padding-right: 18px;
  padding-left: 18px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Links share the footer's muted colour; the brand tint and underline arrive
   on hover and keyboard focus. */
.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--vx-brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-logo {
  display: block;
  width: 132px;
  height: auto;
}

@media (max-width: 760px) {
  .site-footer {
    margin-top: 32px;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .footer-links {
    gap: 12px 16px;
  }
}