/**
 * @file
 * Footer-Styling
 */

/* ==========================================================================
   Footer Container
   ========================================================================== */

.site-footer {
  background-color: #1e3a5f !important;
  color: #ffffff !important;
  padding: var(--nn-space-lg) 0 !important;
  margin-top: var(--nn-space-xl) !important;
  font-family: 'Poppins', sans-serif !important;
}

.site-footer__top {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--nn-space-md) !important;
  justify-content: flex-start !important;
}

/* ==========================================================================
   Footer Regionen (Spalten)
   ========================================================================== */

.site-footer .region {
  flex: 0 0 auto !important;
  min-width: 150px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   Footer Überschriften - Linie nur so breit wie Text
   ========================================================================== */

.site-footer h2 {
  font-size: var(--nn-font-size-sm) !important;
  font-weight: var(--nn-font-weight-semibold) !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 var(--nn-space-md) 0 !important;
  padding-bottom: var(--nn-space-sm) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
  display: inline-block !important;
  width: auto !important;
}

/* ==========================================================================
   Footer Navigation Links - alle untereinander
   ========================================================================== */

.site-footer .nav,
.site-footer ul.nav {
  flex-direction: column !important;
  gap: 0 !important;
  display: flex !important;
}

.site-footer .nav-item {
  margin: 0 !important;
  display: block !important;
  line-height: 1.4 !important;
}

.site-footer .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 2px 0 !important;
  font-size: var(--nn-font-size-sm) !important;
  transition: color var(--nn-transition-fast), padding-left var(--nn-transition-fast) !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* Nützliche Links Block (p-Tags statt nav) */
.site-footer .field--name-body p {
  margin: 0 0 2px 0 !important;
  line-height: 1.4 !important;
}

.site-footer .field--name-body a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: var(--nn-font-size-sm) !important;
  transition: color var(--nn-transition-fast), padding-left var(--nn-transition-fast) !important;
  display: inline-block !important;
  padding-left: 0 !important;
}

.site-footer .field--name-body a:hover,
.site-footer .field--name-body a:focus {
  color: #ffffff !important;
  text-decoration: none !important;
  padding-left: var(--nn-space-sm) !important;
}

.site-footer .nav-link:hover,
.site-footer .nav-link:focus {
  color: #ffffff !important;
  padding-left: var(--nn-space-sm) !important;
  text-decoration: none !important;
}

/* ==========================================================================
   Footer Blöcke
   ========================================================================== */

.site-footer .block {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .site-footer {
    padding: var(--nn-space-lg) 0 !important;
  }

  .site-footer__top {
    flex-direction: column !important;
    gap: var(--nn-space-lg) !important;
  }

  .site-footer .region {
    min-width: 100% !important;
  }
}