/* Site footer, shared by the homepages' subpages.
   Lifted verbatim from the inline <style> in {en,de,fr}/index.html, which is
   still where the homepages themselves get these rules. */

/* Sellva Bracken: a small gradient from a touch of Fern at the top down to
   the deepest green, with one soft Fern glow at the top left. Every stop is
   dark enough that the footer's white text clears 10:1.

   (This replaced a gradient that ended on #1f1650 — a violet dark enough that
   the palette pass's purple test missed it.) */
.footer {
  position: relative;
  overflow: hidden;
  /* Sellva 2.0 forest silk with a thin Fern wash, a step lighter than the
     image alone (Guilherme, 21 Oct 2026), replacing the Bracken gradient and
     its Fern glow. The colour shows while the image loads. */
  background:
    linear-gradient(rgba(79,145,96,0.16), rgba(79,145,96,0.16)),
    url('/assets/silk-footer.jpg') center top / cover no-repeat,
    #1A4334;
  padding: 36px 3rem 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* The bright arrises the light catches on a milled edge. */
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}
/* (The brushed-metal grain was retired with the Sellva palette.) */
.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}
.footer-inner,
.footer-bottom { position: relative; z-index: 1; }
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  max-width: 240px;
}
.footer-logo {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
}
.footer-tagline {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-top: 14px;
  letter-spacing: 0.01em;
}
.footer-address {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-top: 10px;
  line-height: 1.8;
}
.footer-nav-cols {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.footer-nav-col {
  display: flex; flex-direction: column;
}
.footer-nav-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 14px;
}
.footer-socials {
  display: flex; gap: 8px;
}
.footer-bottom {
  max-width: 1400px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.footer-copyright {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.footer-swiss {
  font-size: 13px;
  font-style: italic;
  color: rgba(255,255,255,0.35);
  text-align: right;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .footer { padding: 40px 1.5rem 24px; }
  .footer-inner { gap: 2rem; }
  .footer-nav-cols { gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-swiss { text-align: left; }
  .footer-inner { flex-direction: column; }
}

/* Phones: the footer used to be one long column of links (Olga, 22 Oct
   2026). Menu links sit in two columns, Access and Legal side by side, and
   the retailer guides collapse to their hub link: the guides are a tap away.
   !important because the footer's markup carries inline styles. */
@media (max-width: 767px) {
.footer-inner > div:nth-child(2) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 28px 20px !important; width: 100%; }
.footer-inner > div:nth-child(2) > div:first-child { grid-column: 1 / -1; }
.footer-inner > div:nth-child(2) > div:first-child > div { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 20px !important; }
.footer-inner [data-footer-retailers] { grid-column: 1 / -1; }
.footer-inner [data-footer-retailers] > div > a:not(:last-child) { display: none !important; }
/* The footer already pads the sides on phones; the inner block and the
   bottom bar added another 3rem each, leaving a narrow strip where links
   wrapped. */
.footer-inner { padding: 8px 0 28px !important; }
.footer > div:last-child { padding: 20px 0 8px !important; }
.footer-inner > div:nth-child(2) a { line-height: 1.3 !important; }
}

/* The Lucerne coordinate, in the footer's bottom row on every page. Same
   register as the technical marks on the homepage: quiet, monospaced-feeling
   through letter-spacing, never competing with the lines either side of it. */
.footer-coords {
  font: 500 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .footer-coords { display: none; }
}