/*
 * Die Fusszeile nach dem Mockup (wp/mockup/index.html, der <footer> ganz
 * unten): eine dunkle, abgerundete Karte in der Seitenflaeche, oben Marke und
 * Zeile darunter, unten die Verweise.
 *
 * Sie steht auf jeder Seite -- wie der Seitenkopf. Die Klassen c-site-footer*
 * kommen aus dem Template-Part "footer", alles andere sind Klassen von
 * Core-Bloecken. Tokens: src/pages/design/design.css.
 */

/* Die Huelle traegt nur Breite und Rand; die Karte ist das Kind darin. Beide
   Masse muessen denen von .c-shop-layout entsprechen, damit die Kante der
   Karte mit dem Inhalt darueber fluchtet. */
footer.wp-block-template-part {
  box-sizing    : border-box;
  max-width     : var(--page-width);
  margin-inline : auto;
  padding       : var(--space-4) var(--space-4) var(--space-6);
}


/* ── Die Karte ───────────────────────────────────────────────────────── */

/* min-height wie im Mockup: die Verweise sollen unten stehen, auch wenn oben
   nur zwei Zeilen Text sind -- daher space-between statt einfachem Fluss. */
.c-site-footer {
  display         : flex;
  flex-direction  : column;
  justify-content : space-between;
  gap             : var(--space-8);
  min-height      : 260px;
  padding         : var(--space-8) var(--space-6);
  border-radius   : var(--radius-lg);
  background      : var(--color-neutral-900);
  color           : var(--color-neutral-100);
  font-family     : var(--font-body);
}

/* Der Gruppen-Block steht im Flow-Layout, und WordPress gibt jedem Kind daraus
   `margin-block: 1.2rem 0` mit -- zusammen mit dem gap oben stuende zwischen
   Marke und Verweisen der doppelte Abstand. */
.c-site-footer > * {
  margin-block : 0;
}


/* ── Marke ───────────────────────────────────────────────────────────── */

.c-site-footer__brand {
  display        : flex;
  flex-direction : column;
  gap            : var(--space-2);
}

.c-site-footer__brand > * {
  margin-block : 0;
}

.c-site-footer .wp-block-site-title {
  font-family : var(--font-title);
  font-weight : var(--font-title-weight);
  font-size   : 24px;
  line-height : 1.2;
}

.c-site-footer .wp-block-site-title a {
  color           : var(--color-bg);
  text-decoration : none;
}

.c-site-footer .wp-block-site-title a:hover {
  color : var(--color-accent-300);
}

.c-site-footer .wp-block-site-tagline {
  font-size : 14px;
  color     : var(--color-neutral-300);
}


/* ── Verweise ────────────────────────────────────────────────────────── */

.c-site-footer .c-site-footer__links {
  gap       : var(--space-4);
  font-size : 14px;
}

.c-site-footer .c-site-footer__links a {
  color           : var(--color-neutral-200);
  text-decoration : none;
}

.c-site-footer .c-site-footer__links a:hover {
  color           : var(--color-bg);
  text-decoration : underline;
}

.c-site-footer :focus-visible {
  outline        : 2px solid var(--color-accent-300);
  outline-offset : 2px;
}

@media (max-width: 959px) {
  footer.wp-block-template-part {
    padding-inline : var(--space-3);
  }
}

@media (max-width: 600px) {
  .c-site-footer {
    min-height : 0;
    gap        : var(--space-6);
    padding    : var(--space-6) var(--space-4);
  }

  .c-site-footer .wp-block-site-title {
    font-size : 20px;
  }
}