/* Footer layout, both modes (SiteFooter.astro). */

/* The theme makes only the footer-only link (Lieferkettenpolitik, two lines) an inline block,
   which sat it further from its neighbours than the others are from each other: all links
   as blocks, so every gap is the same. */
footer ul.footer-nav li a,
footer ul.footer-meta-nav li a {
  display: block;
}

/* The four social icons on one row, evenly spaced, the first one under the menu text above
   (the theme's 15px padding per link fit three icons; the fourth wrapped onto its own row). */
footer .social-icon {
  display: flex;
  gap: 20px;
  padding-left: 45px;
}
footer .social-icon a {
  padding: 0;
  line-height: 1;
}

/* Below 1281px the theme stacks the footer's three rows (menus, seals, back-to-top arrow),
   which left the arrow alone in the middle under the seals. The seals and the arrow now share
   the second row: seals left, arrow right. */
@media (max-width: 1280px) {
  footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  footer > .container:first-child {
    flex: 0 0 100%;
  }
  footer > .container:nth-child(2) {
    flex: 1 1 0;
    min-width: 0;
  }
  footer > .container:last-child {
    flex: none;
    width: auto;
  }
}

/* Phones: seals centred, the arrow centred below them without the theme's extra 80px gap. */
@media (max-width: 650px) {
  footer .social-icon {
    padding-left: 15px;
  }
  footer > .container:nth-child(2) {
    flex: 0 0 100%;
    padding-bottom: 20px;
  }
  footer .siegel-wrap {
    justify-content: center;
    width: 100%;
    margin-bottom: 0;
  }
  footer > .container:last-child {
    flex: 0 0 100%;
    justify-content: center;
  }
  footer #toTop {
    margin-right: 0;
  }
}