/* Site footer — dark-green surface; a wave (components/wave.css) sits on top. */

/* The dark-green surface (and its text/heading/link/button flips) comes from
   the .bg-green-dark utility on the element; footer.css only adds layout. */
.site-footer {
  position: relative;
  padding-block: var(--section-spacing) var(--space-l);
}

.site-footer-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.footer-column h2,
.footer-column .chapeau {
  margin-block-end: var(--space-s);
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

/* Footer column links (phone / email) are bold; the copyright-row menu links
   keep the default weight. */
.footer-column a {
  font-weight: 700;
}

.footer-brand-logo {
  width: auto;
  max-width: 270px;
  height: auto;
  margin-block-end: var(--space-s);
}

.footer-social {
  display: flex;
  gap: var(--space-2xs);
}

.footer-social a {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  color: var(--color-green-light);   /* light-green icons (per Figma), via the SVGs' currentColor */
}

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

.footer-social svg {
  width: 2rem;          /* 32px icon (per Figma), in the 40px link → 4px padding */
  height: 2rem;
  fill: currentColor;
}

/* "Onderdeel van" follows the social links — offset its heading to separate the
   two sections. Adjacent-scoped, so when there are no socials it stays
   top-aligned with the other footer columns. */
.footer-social + .chapeau {
  margin-block-start: 2rem;
}

.footer-partners {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
}

/* The theme sizes the partner logo for visual consistency — never the upload's
   own dimensions. WordPress stamps an SVG's width/height from its viewBox (e.g.
   222×173) when the file lacks a matching height attribute, so the raw <img>
   would otherwise render at that viewBox width. height stays auto (base.css). */
.footer-partners img {
  max-width: 120px;
}

.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  align-items: center;
  justify-content: center;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  font-size: var(--text-small);
}

/* Divider above the copyright row. Inset to the same offset as the footer
   content (the .container padding) instead of spanning the element's full
   width — otherwise it runs edge-to-edge on mobile while the content is inset. */
.footer-bottom::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--distance-to-edge);
  border-block-start: 1px solid rgb(255 255 255 / 0.4);
}

.footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs); /* 12px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu a {
  color: inherit;
  text-decoration: none;
}

.footer-menu a:hover,
.footer-menu .current-menu-item > a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}