/*
-----------------------------------------
SIDFOT (Figma: Sidfot och koncernbolag)
1. Sidfoten: logotyp, Kontakt, Om Ohlssons Invest (länkar i två kolumner), Följ oss och den juridiska raden
2. Koncernens logotyper på ljusgrå yta
-----------------------------------------
*/

.site-footer__main {
  padding-block: var(--space-section) var(--space-40);
  background: var(--surface-brand);
  color: var(--text-inverse);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.site-footer__logo {
  inline-size: var(--size-footer-logo);
}

.site-footer__columns {
  display: flex;
  gap: var(--space-64);
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1 1 0;
  min-inline-size: 0;
}

.site-footer__column--social {
  flex: 0 0 var(--size-social);
}

.site-footer__heading {
  padding-block-start: var(--space-16);
  border-block-start: 1px solid var(--border-on-dark);
  font: var(--font-label);
  text-transform: uppercase;
}

.site-footer__address {
  font: var(--font-large);
}

.site-footer__links {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  justify-content: start;
  gap: var(--space-8) var(--space-40);
  font: var(--font-large-auto);
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font: var(--font-large-auto);
}

.site-footer__social-icon {
  inline-size: var(--size-icon-large);
  block-size: var(--size-icon-large);
}

.site-footer__social-arrow {
  inline-size: var(--size-icon-small);
  block-size: var(--size-icon-small);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  font: var(--font-small);
}

.site-footer__main a:focus-visible {
  outline-color: var(--focus-ring-color-inverse);
}

@media (hover: hover) {
  .site-footer__links a:hover,
  .site-footer__legal a:hover,
  .site-footer__social:hover {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--space-4);
  }
}

@media (width < 64rem) {
  .site-footer__columns {
    flex-wrap: wrap;
    gap: var(--space-40) var(--space-32);
  }

  .site-footer__column,
  .site-footer__column--social {
    flex: 1 1 var(--size-social);
  }
}

/* ---- Koncernens logotyper ----------------------------------------------------- */

.group-logos {
  background: var(--surface-light);
}

.group-logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-block-size: var(--size-group-band);
  padding-block: var(--space-24);
}

.group-logos__link {
  display: block;
}

.group-logos__image {
  inline-size: var(--size-group-logo-width);
  block-size: var(--size-group-logo-height);
  object-fit: contain;
  filter: var(--filter-logo);
  opacity: var(--opacity-logo);
}

/* Länkad logotyp under hover och tangentbordsfokus: färgen tillbaka och full täckning, som på ohlssons.se (utan övergång). En logotyp utan länk ändras inte. */
.group-logos__link:focus-visible .group-logos__image {
  filter: var(--filter-logo-hover);
  opacity: var(--opacity-logo-hover);
}

@media (hover: hover) {
  .group-logos__link:hover .group-logos__image {
    filter: var(--filter-logo-hover);
    opacity: var(--opacity-logo-hover);
  }
}

@media (width < 40rem) {
  .group-logos__list {
    justify-content: center;
  }
}