/* ═══════════════════════════════════════════════
   YES COCKTAIL CO. — FOOTER
   Footer nav columns 2026-08.
   Layered over main.css. Styles the multi-column
   footer nav (Shop / Discover / Find Us + children).
   ═══════════════════════════════════════════════ */

.footer-menu-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
}

.footer-menu-column {
  flex: 1 1 0;
  min-width: 130px;
}

.footer-menu-heading {
  display: block;
}

.footer-menu-links {
  margin-top: 16px;
}

/* Tap target: the 8px gap between links is carried as padding on the <a> rather
   than margin on the <li>, so rows are contiguous and touchable at ~28px tall
   without changing the visual spacing. */
.footer-menu-links a {
  display: inline-block;
  padding: 4px 0;
}

/* Reclaim the dead space between the nav and the contact column so three
   headings sit on one line at the widths main.css sets for .footer-menu. */
@media (min-width: 992px) {
  .footer-menu {
    padding-right: 4%;
  }
}

@media (max-width: 991.98px) {
  .footer-menu-columns {
    gap: 28px 32px;
  }

  .footer-menu-column {
    flex: 0 0 calc(50% - 16px);
  }
}

@media (max-width: 575.98px) {
  .footer-menu-column {
    flex: 0 0 100%;
  }
}