/* =============================================================================
   Footer — Rechtliches + Social (Zahnarztpraxis Mozin)
   -----------------------------------------------------------------------------
   Der Footer selbst ist eine gerade blaue Box (kein skew) und laeuft bis unten
   durch. Die schräge Oberkante macht ein geskewtes ::before, das den vorigen
   Block schräg abschliesst — der Inhalt bleibt dadurch gerade.
   ========================================================================== */

@scope (.footer) {
  :scope {
    position: relative;
    background-color: var(--color-blue);
    color: var(--color-white);
  }

  /* Schräge Oberkante: blaues Dreieck, das oben aus dem Footer herausragt und den
     weissen Vormodul im 5°-Winkel abschneidet, parallel zur Sektion darueber. Als
     clip-path-Dreieck statt skewY, weil das geskewte Band beim Rauszoomen weisse
     Keile hinterliess. */
  :scope::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    /* +1px laesst das Dreieck leicht in den Footer hineinlaufen statt exakt an
       dessen Oberkante zu enden — sonst blieb durch Sub-Pixel-Rundung eine
       haarfeine helle Fuge sichtbar. */
    inset-block-start: calc(-8.75vw + 1px);
    block-size: calc(8.75vw + 1px);
    background-color: var(--color-blue);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
  }

  /* Flache Leiste: Rechts-Links + Icons in einer Zeile, links ausgerichtet. */
  .inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2.5rem; /* Abstand zwischen Link-Gruppe und Icon-Gruppe (-> 40px) */
    padding-block: 2.5rem;
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 3.125rem; /* 50px zwischen den Links */
  }

  .footer-nav a {
    color: var(--color-white);
    font-family: var(--font-family-heading);
    font-size: 1.5rem; /* 24px */
    text-transform: uppercase;
    text-decoration: none;

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }

  /* Icons direkt neben den Links (nicht am rechten Rand). */
  .social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .social a {
    display: block;
    line-height: 0;
  }

  .social img {
    display: block;
    inline-size: 70px; /* 70x70 */
    block-size: 70px;
    transition: opacity 0.3s ease;
  }

  .social a:hover img,
  .social a:focus-visible img {
    opacity: 0.7;
  }

  /* Tablet/Mobil: Links + Icons stapeln zentriert. Breakpoint bewusst 900px statt
     767px, da die Leiste bereits auf Tablet-Breite eng wird (die Links rutschen
     sonst in eine zweite, linksbuendige Zeile). */
  @media (width <= 900px) {
    .inner {
      flex-direction: column;
      align-items: center;
      gap: 0;
      text-align: center;
    }

    .footer-nav {
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    /* 25px Abstand pro Zeile. */
    .footer-nav a,
    .social {
      padding-block-start: 25px;
    }
  }
}