@import url(/assets/styles/components/buttons_social.css);

.footer > .primary {
  background: var(--clr-base-800);
}

.footer > .secondary {
  background: var(--clr-base-900);
}
.footer .content__wrapper {
  --section-padding-inline: var(--spacing-2);
  --section-padding-block: var(--spacing-6);
  --section-gap: var(--spacing-4);

  display: grid;

  grid-template-columns:
    [section-start] var(--section-padding-inline)
    [primary-start secondary-start] 1fr
    [primary-end secondary-end]var(--section-padding-inline)
    [section-end];

  grid-template-rows:
    [section-start] var(--section-padding-block)
    [primary-start] auto
    [primary-end] var(--section-gap)
    [secondary-start] auto
    [secondary-end] var(--section-padding-block)
    [section-end];
}
@media (width >= 60rem) {
  .footer .content__wrapper {
    grid-template-columns:
      [section-start] var(--section-padding-inline)
      [secondary-start] 1fr
      [secondary-end] var(--section-gap)
      [primary-start] min-content
      [primary-end] var(--section-padding-inline)
      [section-end];

    grid-template-rows:
      [section-start] var(--section-padding-block)
      [primary-start secondary-start] auto
      [primary-end secondary-end] var(--section-padding-block)
      [section-end];
  }
}

.footer .links__social {
  grid-row: primary;
  grid-column: primary;

  display: flex;
  justify-content: center;
  gap: var(--spacing-2, 0.5rem);
}

.footer .links__navigation {
  grid-row: secondary;
  grid-column: secondary;

  display: grid;
  grid-template-columns: max-content;
  justify-content: center;

  gap: var(--spacing-1, 0.25rem);
}
@media (width >= 60rem) {
  .footer .links__navigation {
    grid-template-columns: repeat(auto-fill, minmax(200px, min-content));
    justify-content: flex-start;
    align-items: center;
  }
}

.footer .links__navigation .navigation__item {
  /* Layout */
  display: block; /* Required for ::first-letter to work */
  height: var(--size-16, 3rem);
  padding: var(--spacing-4, 1rem);
  border-radius: var(--radius-3, 0.25rem);
  background-color: var(--clr-surface-01);

  /* border: 1px solid aqua; */

  /* Typography */
  color: var(--clr-onSurface-01);
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1rem; /* 100% */

  /* Interaction */
  transition: background-color 300ms ease-out, color 300ms ease-out;

  overflow-wrap: break-word;
  min-width: 0;
}
.footer .links__navigation .navigation__item span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.footer .links__navigation .navigation__item::first-letter {
  text-transform: uppercase; /*? display:block or inline-block required to this work*/
}

@media (hover: hover) {
  .footer .links__navigation .navigation__item:hover {
    background-color: var(--clr-surface-04);
    color: var(--clr-onSurface-04--strong);
  }
}
.footer .language {
  grid-row: primary;
  grid-column: primary;

  justify-self: center;
}
@media (width >= 60rem) {
  .footer .language {
    justify-self: flex-end;
    text-align: left;
  }
}

.footer .copyright {
  grid-row: secondary;
  grid-column: secondary;

  max-width: max-content;
  justify-self: center;

  color: var(--clr-onSurface-02--subtle);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem; /* 133.333% */
  font-weight: 400;
  text-align: center;
}
.footer .copyright strong {
  display: block;
  color: var(--clr-onSurface-02);
  font-weight: 600;
  line-height: 1.5rem; /* 200% */
  text-transform: uppercase;
}

@media (width >= 60rem) {
  .footer .copyright {
    justify-self: flex-start;
    text-align: left;
  }
}