/* ==========================================================================
   Site footer component
   Two-row footer with sitemap groups, NKG block, and social/meta row.

  <footer class="site-footer">
    <div class="container main">
      <nav class="footer" aria-label="Sidfotslänkar">
        <div class="column">
          <div class="group">
            <a class="hub clean">Kök</a>
            <a class="clean">Renovera kök</a>
          </div>
        </div>
      </nav>
      <aside class="nkg">
        <p>En del av Nordic Kitchen Group</p>
        <a class="img" href="https://nordickitchen.se" target="_blank" rel="noopener noreferrer">
          <img src="https://hagakoket.se/wp-content/uploads/2019/04/NKG_white.png" alt="Nordic Kitchen Group">
        </a>
      </aside>
    </div>

    <div class="container meta">
      <p>Copyright 2019 Hagaköket</p>
      <div class="social">
        <a class="btn icon sm" href="https://www.facebook.com/hagakoket" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
          <span class="icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
          </span>
        </a>
      </div>
    </div>
  </footer>

   ========================================================================== */

/*

  <div class="container main">..
  <div class="container meta">..

*/

/* main ********************************************************/

/*
  <nav class="footer">..
  <aside class="nkg">..
*/

footer.section .container.main {
  display: grid;
  gap: var(--s-48);
}

nav.footer {
  column-count: 1;
  column-gap: var(--s-48);
  column-width: 12rem; /* Minimum width before reducing column count */
}

nav.footer a {
  padding-block: 3px;
  display: flex; /* Full-width column links that flow label + optional icon inline */
  align-items: center;
}

nav.footer .group {
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  margin-bottom: var(--s-48); /* Vertical space between groups in the same column */
}

nav.footer a.hub {
  --link-current-size: 1em;
  margin-bottom: var(--s-8);
}

nav.footer a.sub {
  border-left: 1px solid var(--border-divider-light-strong);
  padding-left: var(--s-12);
}

nav.footer a.sub + a.xs:not(.sub) {
  margin-top: var(--s-8);
}

/* aside ********************************************************/

footer.section .container.main aside {
  display: grid;
  place-items: center;
  gap: var(--s-8);
  border-top: 1px solid var(--border-divider-light);
  padding: var(--s-48) 0 var(--s-24);
}

footer.section .container.main aside p {
  font-family: var(--p-bodoni-font-family);
  font-weight: var(--p-bodoni-font-weight);
  font-style: var(--p-bodoni-font-style);
  font-optical-sizing: none;
  letter-spacing: var(--p-bodoni-letter-spacing);
  line-height: var(--p-bodoni-line-height);
}

footer.section .container.main aside a.img {
  display: inline-block;
  max-width: 80vw;
}

/* meta ********************************************************/

footer.section .container.meta {
  display: grid;
  place-items: center;
  gap: var(--s-16);
}

footer.section .container.meta p {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  align-items: center;
}

footer.section .container.meta p .separator {
  display: none;
}

footer.section .container.meta p a {
  font-weight: 400;
}

footer.section .container.meta nav {
  display: flex;
  gap: var(--s-8);
}

/* breakpoints ********************************************************/

@media (min-width: 40rem) {
  nav.footer {
    column-count: 2;
  }

  footer.section .container.main {
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: start;
  }

  footer.section .container.main aside {
    padding-block: 0;
    place-items: start;
    border-top: none;
  }

  footer.section .container.meta {
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--s-24);
    border-top: 1px solid var(--border-divider-light);
  }

  footer.section .container.meta p {
    flex-direction: row;
  }

  footer.section .container.meta p .separator {
    display: block;
  }
}

@media (min-width: 64rem) {
  nav.footer {
    column-count: 3;
  }
}

@media (min-width: 90rem) {
  nav.footer {
    display: flex;
    gap: 5vw;
  }
}