/*
-----------------------------------------
SIDFOT (Figma: Sidfot) och koncernens logotyper
1. Mörk sidfot med tre kolumner: om företaget, snabblänkar och följ oss (med villkor)
2. Koncernens logotyper ("Företag i Ohlssons invest AB"): vit rad under sidfoten, formen mätt på www.ohlssons.se
-----------------------------------------
*/

.site-footer__main {
  padding-block: var(--space-64);
  background: var(--surface-footer);
}

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

/* Fokusmarkeringen är vit på den mörka ytan */
.site-footer__main :focus-visible {
  outline-color: var(--focus-ring-color-inverse);
}

/* Varje kolumn börjar med en linje; avståndet efter den är samma som mellan kolumnens delar (20 px i första kolumnen, 12 px i övriga) */
.site-footer__column {
  --footer-gap: var(--space-12);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-gap);
  padding-block-start: var(--footer-gap);
  border-block-start: 1px solid var(--border-on-dark);
}

.site-footer__column--about {
  --footer-gap: var(--space-20);
}

.site-footer__company {
  font: var(--font-company-name);
  color: var(--text-inverse);
}

.site-footer__heading {
  font: var(--font-contact-heading);
  color: var(--text-inverse);
  text-transform: uppercase;
}

.site-footer__about {
  font: var(--font-body);
  color: var(--text-on-dark);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  font: var(--font-link);
}

.site-footer__legal {
  padding-block-start: var(--space-20);
}

.site-footer__link {
  font: var(--font-link);
  color: var(--text-on-dark);
}

@media (hover: hover) {
  .site-footer__link:hover {
    text-decoration: underline;
  }
}

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

.group-logos {
  padding-block: var(--space-24);
  background: var(--surface-page);
}

.group-logos__heading {
  margin-block-end: var(--space-24);
  font: var(--font-card-heading);
  color: var(--text-heading);
  text-align: center;
  text-transform: uppercase;
}

.group-logos__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12) var(--space-24); /* ohlssons.se har 30 px; 24 px gör att sex logotyper ryms i en rad inom innehållsbredden (6 x 180 + 5 x 24 = 1200 av 1216 px) */
}

.group-logos__item {
  display: flex;
  flex: 0 0 var(--size-group-logo);
  align-items: center;
  justify-content: center;
}

.group-logos__link {
  display: block;
  inline-size: 100%;
}

.group-logos__img {
  inline-size: 100%;
  block-size: auto;
  max-inline-size: none;
  padding: var(--space-16); /* som på ohlssons.se: bilden är 180 px bred med 16 px luft, så själva logotypen är 148 px */
  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__img {
  filter: var(--filter-logo-hover);
  opacity: var(--opacity-logo-hover);
}

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

@media (width < 64rem) {
  .site-footer__columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Två logotyper per rad på smal skärm, som på ohlssons.se */
@media (width < 40rem) {
  .group-logos__item {
    flex-basis: calc((100% - var(--space-24)) / 2);
  }
}