/* Shared footer. Figma node 15:409: 1440 x 585 charcoal band, four equal
   columns on the 1200px container, copyright bottom-left, no divider rule. */

.footer {
  background-color: var(--color-footer);
  color: var(--color-footer-ink);
}

.footer__container {
  width: min(100%, calc(var(--container-max) + 2 * var(--gutter)));
  margin-inline: auto;
  padding: var(--space-5xl) var(--gutter) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

/* Figma: footer column headings are Raleway 500 / 24 (e.g. "Категорії"). */
.footer-menu__heading {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-footer-ink);
}

.footer-menu__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  list-style: none;
}

.footer-menu__list a {
  font-size: var(--font-size-xs);
  color: var(--color-footer-muted);
  text-decoration: none;
}

/* ---- Contact column: quiet label above a prominent value ---- */

.footer-contact__label {
  margin: 0 0 var(--space-3xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-footer-muted);
}

/* Figma: contact values are Raleway 500 / 26. */
.footer-contact__value {
  display: block;
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-footer-ink);
  text-decoration: none;
}

.footer-contact__subheading {
  margin: var(--space-md) 0 var(--space-md);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-footer-ink);
}

/* The licence-required attribution has no Figma frame, so it shares the
   copyright's row rather than adding a line to the band: opposite ends on
   desktop, stacked once the row no longer fits. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
}

.footer__copyright {
  margin: 0;
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-footer-ink);
}

/* The attribution and the source-code link: one quiet line, quieter than the
   copyright beside it, whose links pick up the band's amber hover from
   `.footer a:hover` below. */
.footer__notices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  color: var(--color-footer-muted);
}

/* The dot is decoration, so it carries empty alternative text where a browser
   supports it. With the attribution hidden by a removal key there is nothing
   before the source link and no dot. */
.footer__notices > * + *::before {
  content: "\00B7";
  content: "\00B7" / "";
  margin-inline: var(--space-2xs);
}

.footer__source {
  margin: 0;
  font-size: var(--font-size-3xs);
}

.footer__source a {
  color: inherit;
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .footer a:hover {
    color: var(--color-action);
  }
}

@media (max-width: 61.9375rem) {
  .footer__container {
    padding-block: var(--space-3xl) var(--space-xl);
    gap: var(--space-xl);
  }

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

@media (max-width: 30rem) {
  .footer__columns {
    grid-template-columns: 1fr;
  }
}