/*
  Footer.

  Overgenomen uit TGP_website_v52.html, ongewijzigd op een punt na: de
  linklijsten komen nu uit wp_nav_menu en dat zet er een ul met eigen classes
  omheen. De selectors hieronder mikken daarom op .footer ul en .footer li in
  plaats van op een vaste class, zodat het werkt ongeacht welke classes
  WordPress meegeeft.
*/

.footer {
  background: var(--noir);
  color: var(--cream);
  padding: 4rem 5% 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 3rem;
  max-width: var(--breedte-max);
  margin: 0 auto 2.5rem;
}

/* ── Merkblok ── */

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.footer-logo {
  height: 56px;
  width: auto;
  display: block;
  opacity: 0.95;
}

.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--cream);
  opacity: 0.8;
  line-height: 1.4;
  margin: 0;
  max-width: 280px;
}

/* ── Kolommen ── */

.footer h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.footer p {
  font-size: 0.875rem;
  line-height: 1.8;
  opacity: 0.8;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer ul li {
  margin-bottom: 0.75rem;
}

.footer a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.footer a:hover {
  color: var(--gold);
}

/* ── Aanmelden ── */

.email-signup {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.email-signup input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid rgba(253, 246, 240, 0.2);
  background: rgba(253, 246, 240, 0.05);
  color: var(--cream);
  border-radius: 8px;
  font-family: var(--font-body);
}

.email-signup button {
  background: var(--gold);
  color: var(--noir);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  transition: all 0.2s;
}

.email-signup button:hover {
  background: var(--wine);
  color: var(--cream);
}

/* ── Onderrand ── */

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(253, 246, 240, 0.1);
  font-size: 0.75rem;
  opacity: 0.6;
}

.stars {
  color: var(--gold);
  margin-right: 0.5rem;
}

/*
  Mobiel. De breekpunten komen uit v52: de footer schakelt al op 780px naar
  twee kolommen, niet op 600px.
*/
@media (max-width: 780px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand {
    align-items: center;
    text-align: center;
  }

  .footer-logo {
    height: 60px;
    margin: 0 auto;
  }

  .footer-tagline {
    text-align: center;
    max-width: 100%;
  }
}