/*
 * footer.css — the footer in the document flow (work step 8).
 *
 * Measured on the legacy site (migration/bestand/assets/merged.css, fetched 2026-08-25): three
 * stripes below one another — partner logos on white, contact area on `#707070`, legal line on
 * the same surface. The legacy site additionally pins the footer to the bottom of the viewport;
 * that does not come along under E4, here it stands in the flow.
 *
 * Why this lives here and not in a Divi preset: the footer is a theme builder template with
 * markup of its own (template-parts/footer.php). There is no Divi module there that could carry
 * a preset — the same situation as with the header, argued at length in sections.css and in E1
 * of the plan.
 *
 * The breakpoints stand as numbers in the @media rules, not as tokens: CSS does not resolve
 * custom properties inside media queries, the reference would have no effect and nobody would
 * notice.
 */

/* ------------------------------------------------------------------ *
 * The three stripes
 * ------------------------------------------------------------------ */

/*
 * `.wi-footer__inner` carries no width of its own. It gets one from `.wi-text-column`
 * (base.css), which the template puts next to it — see the head of template-parts/footer.php.
 *
 * It used to have one: 1170px capped, centred, plus `padding-inline` taken from the header's
 * logo inset. Both were wrong, and in opposite directions (F2 of the frontend defect list). The
 * padding pushed the footer text 20px further in than the content area above 1366px, which is
 * what was reported; below it the missing staggering pushed it up to 80px further OUT, right
 * against the window edge. The legacy site knows neither: it builds the content area and all
 * three footer stripes out of one and the same `section .std-content`, so the two edges line up
 * at every width.
 *
 * The class remains as a hook — `.wi-footer__legal-inner` builds on it — and as the name the
 * template speaks. What it no longer does is describe a width.
 */

.wi-footer__partners {
  background-color: var(--wi-color-surface);
  color: var(--wi-color-ink);
  padding-block: var(--wi-footer-partners-padding-block);
}

.wi-footer__contact {
  padding-block: var(--wi-footer-contact-padding-block);
}

.wi-footer__legal {
  padding-block: var(--wi-footer-legal-padding-block);
}

/*
 * The contact and legal stripes carry `wi-section--dark` (E1: the mode classes are the way for
 * everything that does not come out of the builder). Its overlay has to go here, though.
 *
 * It exists so that white lettering stays readable on an arbitrary nature photo — a half-opaque
 * veil between image and text. The footer has no image: there the veil would lie on the surface
 * colour itself and turn `#707070` into a markedly darker grey. The legacy site holds both
 * surfaces at exactly `#707070`.
 */
.wi-footer .wi-section--dark::before {
  display: none;
}

/* ------------------------------------------------------------------ *
 * Headings
 * ------------------------------------------------------------------ */

/*
 * The footer runs its H2 on its own: `footer .text-section h2` sets 35px, 40px line height and
 * a 30px margin in the legacy site — the same size as in the content area, but a tighter line
 * and a shorter gap. "Contact us" is an area heading, not a section heading.
 *
 * The `text-transform: none` stood here as a counter-rule to the uppercase H2 of the dark
 * section. That one is gone since E11; the declaration stays anyway, because this selector also
 * hits Divi content inside a footer widget, where a module preset can carry uppercase.
 */
.wi-footer__heading,
.wi-footer .wi-section--dark h2 {
  font-size: var(--wi-footer-heading-size);
  font-weight: var(--wi-font-weight-semibold);
  line-height: var(--wi-footer-heading-line-height);
  text-transform: none;
  margin: 0 0 var(--wi-footer-heading-space) 0;
}

.wi-footer__partners .wi-footer__heading {
  color: var(--wi-color-ink);
}

/* ------------------------------------------------------------------ *
 * Partner logo grid (legacy: c210)
 * ------------------------------------------------------------------ */

.wi-footer__partner-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*
 * In the grid the widget wrapper is not a cell of its own but transparent. WordPress puts a
 * <div> around every widget; without this rule its content would sit in one 20 % cell instead
 * of in as many as it has images. `display: contents` lifts the wrapper out of the layout
 * without taking it out of the document; the images become cells themselves.
 *
 * That leaves only `figure` needed below, and the grid holds in both shapes: 15 widgets with one
 * image each — the way bin/setup-theme-builder-footer.sh pre-fills them — or one widget with
 * several. The pre-fill is the first shape, because only it survives editing (argued at
 * wildisland_footer_fill_sidebar()); the second can still come about if somebody puts images
 * together in one widget.
 */
.wi-footer__partner-grid > .wi-footer__widget {
  display: contents;
}

/* One cell per image. */
.wi-footer__partner-grid figure {
  flex: 0 0 20%;
  max-width: 20%;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 var(--wi-footer-partner-gap) 0;
  padding: 0;
}

/*
 * The legacy site caps the width only. That is not enough: 14 of the 15 logos are 280 x 119 px,
 * the fifteenth (BROZ) is 1998 x 1124 — at equal width it stands a third taller than all the
 * others. The height cap puts them on one line and is at the same time the reference for the EU
 * requirement that the funding emblem must be at least as large as the largest other logo on the
 * same surface (assets/brand/README.md). Without a known upper bound that requirement could not
 * be checked, only claimed.
 *
 * The width says `min()` and not the token alone: on narrow windows the cell gets narrower than
 * 232px, and an image that only knows its own maximum then runs out of it. Measured at 768px —
 * the logos stuck out past the right edge and pulled the document to 1056px of scroll width. The
 * source shows nothing of it; it becomes visible as a page that can be pushed sideways.
 */
.wi-footer__partner-grid img {
  max-width: min(100%, var(--wi-footer-partner-max-width));
  max-height: var(--wi-footer-partner-max-height);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ------------------------------------------------------------------ *
 * Contact columns (legacy: c192, c193, c195, c542, c543)
 * ------------------------------------------------------------------ */

.wi-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wi-footer-column-gap);
}

/* The last paragraph of a column must not pull the stripe open at the bottom — the gap below it
 * comes out of the section's padding. */
.wi-footer__column > :last-child > :last-child {
  margin-bottom: 0;
}

/* The legacy site fills its paragraph gaps with `<p>&nbsp;</p>`. Those do not come along; the
 * gap between two widgets stands here instead. */
.wi-footer__widget + .wi-footer__widget {
  margin-top: var(--wi-space-paragraph);
}

.wi-footer__widget-title {
  font-size: var(--wi-font-size-body);
  font-weight: var(--wi-font-weight-semibold);
  margin: 0 0 calc(var(--wi-space-paragraph) / 2) 0;
}

/* ------------------------------------------------------------------ *
 * Funding block — LIFE emblem, Natura 2000 logo, funding line
 * ------------------------------------------------------------------ */

/*
 * The block replaces the legacy element c196, which carried both emblems in one 265px raster
 * image, and stands in its place: in the right column between the two text blocks. The three
 * size requirements from E4 stand as tokens in tokens.css and are applied here: two separate
 * images, a height above the tallest partner logo, a minimum height well above 1 cm at the
 * narrow breakpoint too.
 *
 * Below one another and not side by side: at the 1170px of text width this was decided on, the
 * column was roughly 525px wide, and the two emblems already take close to 320px of that. The
 * funding line next to them would have been left with 200px and would have broken
 * mid-sentence. Since NA9 the column is wider above 1460px, and the stacking stays — it is
 * right at every width and not only at the wide ones.
 */
.wi-footer__funding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--wi-space-paragraph) / 2);

  /* Like a paragraph, because in this place it is one. The legacy site frames c196 with the
   * same margins it separates its text blocks by. */
  margin-block: var(--wi-space-paragraph);
}

.wi-footer__emblems {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wi-footer-emblem-gap);
}

/*
 * Height fixed, width derived — not the other way round. Both emblems are vector files without
 * an intrinsic size (a `viewBox` only); with `height: auto` inside a flex container each size
 * would refer to the other and both would come out 0. The same trap as with the logo in
 * header.css, measured there on the instance.
 */
.wi-footer__emblem {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--wi-footer-emblem-height);
}

.wi-footer__funding-note {
  margin: 0;
  font-size: var(--wi-font-size-body);
  font-weight: var(--wi-font-weight-light);
  line-height: var(--wi-line-height-body);
}

/* ------------------------------------------------------------------ *
 * Legal line
 * ------------------------------------------------------------------ */

.wi-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--wi-space-paragraph) / 2);
}

.wi-footer__copyright {
  margin: 0;
  font-size: var(--wi-font-size-body);
}

/*
 * Divi gives every list in the footer layout bullet points: `.et-l--footer ul` gets
 * `list-style-type: disc`, `padding: 0 0 23px 1em` and a line height of its own — one step more
 * specific than a single class. That is why the selector carries `.wi-footer` along. The same
 * was measured in the header layout (E8).
 */
.wi-footer .wi-footer__legal-menu {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--wi-space-paragraph) / 2);

  margin: 0;
  padding: 0;
  list-style: none;
  line-height: inherit;
}

.wi-footer .wi-footer__legal-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The legacy site separates "Imprint" and "Data Protection" with a vertical bar. It stands as a
 * pseudo-element and not in the menu text: otherwise it would hang off the first entry and end
 * up in the wrong place after a reordering of the menu — or stand alone if somebody removed the
 * second entry. There is no `aria-hidden` for pseudo-elements; hence `content` with an empty
 * alternative, which tells screen readers to read out nothing. */
.wi-footer .wi-footer__legal-menu li + li::before {
  content: '|' / '';
  margin-right: calc(var(--wi-space-paragraph) / 2);
  color: var(--wi-color-on-dark);
}

/* The legacy site puts the links of the legal line on the lighter accent — the same colour as
 * the dropdown hover, not the link colour of running copy. */
.wi-footer__legal a {
  color: var(--wi-color-accent-hover);
  font-size: var(--wi-font-size-body);
}

/* ------------------------------------------------------------------ *
 * Narrower windows
 * ------------------------------------------------------------------ */

/* 1600px: here the legacy site takes back the font size of the links and of the legal line. */
@media only screen and (max-width: 1600px) {
  .wi-footer__contact a,
  .wi-footer__legal,
  .wi-footer__legal a,
  .wi-footer__copyright {
    font-size: var(--wi-font-size-body-medium);
  }
}

/* 1100px: the legacy site halves its padding here, and the step stays where it was measured.
 * The values behind the tokens are the NA7 ones since 2026-10-08 (tokens.css): 30px above and
 * below, the client's ceiling for narrow windows, no longer the halved legacy value. */
@media only screen and (max-width: 1100px) {
  .wi-footer__partners {
    padding-block: var(--wi-footer-partners-padding-block-narrow);
  }

  .wi-footer__contact {
    padding-block: var(--wi-footer-contact-padding-block-narrow);
  }
}

/*
 * 991px: the legacy site takes the headings back and goes from five columns to four in the
 * partner grid — fewer columns means wider logos here, not the other way round.
 *
 * The contact columns drop below one another at the same place: the legacy site builds them out
 * of the Bootstrap columns `col-md-6`, and their breaking point is at 992px.
 */
@media only screen and (max-width: 991px) {
  .wi-footer__heading,
  .wi-footer .wi-section--dark h2 {
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 20px;
  }

  .wi-footer__partner-grid figure {
    flex-basis: 25%;
    max-width: 25%;
  }

  .wi-footer__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wi-space-paragraph);
  }
}

@media only screen and (max-width: 768px) {
  .wi-footer__partner-grid figure {
    flex-basis: 33.33%;
    max-width: 33.33%;
  }

  /* Below the height of the partner logos, but well above the minimum of 1 cm — the size rule
   * is thus kept here too. */
  .wi-footer__emblem {
    height: var(--wi-footer-emblem-height-narrow);
  }
}

@media only screen and (max-width: 600px) {
  .wi-footer__partner-grid figure {
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media only screen and (max-width: 450px) {
  .wi-footer__partner-grid figure {
    flex-basis: 100%;
    max-width: 100%;
    margin-bottom: 5px;
  }
}