/* Footer layout. Kept out of the Webflow export so a re-export won't overwrite it.
   Three columns: Showroom | Legal | Contact, with the social icons under Contact.
   Phones (<768px) keep the Webflow stacked layout, which already puts the icons under Contact. */

/* The Webflow export hides the "Legal" column; visitors must be able to reach it
   (including "Cookie settings", used to withdraw consent). */
.footer-navigation-item.footter-legal {
  display: block;
}

.footer-navigation-item.footter-legal .footer-link {
  color: #fff;
}

.footer-navigation-item.footter-legal .footer-link:hover,
.footer-navigation-item.footter-legal .footer-link:focus-visible {
  color: #fff;
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .footer-navigation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 4vw;
    row-gap: 1.5vw;
    align-items: start;
  }

  .footer-navigation-item {
    max-width: none;
  }

  /* Order in the markup: showroom, legal, contact, social icons. */
  .footer-navigation-item:nth-child(1) { grid-column: 1; grid-row: 1; }
  .footer-navigation-item:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; } /* spans both rows so the icons sit right under Contact */
  .footer-navigation-item:nth-child(3) { grid-column: 3; grid-row: 1; }

  .footer-navigation-item.footer-socials {
    grid-column: 3;
    grid-row: 2;
    justify-content: flex-start;
    padding-top: 0;
  }
}