footer.astro

---
import Logo from "../components/logo-symbol.astro";
import GitHubIcon from "~icons/ph/github-logo-fill";
import LinkedInIcon from "~icons/ph/linkedin-logo-fill";
---

<footer>
  <section class="call-to-action">
    <h2>La oss utgjøre en forskjell <em>sammen</em></h2>
    <a href="/kontakt" class="button">Kontakt oss →</a>
  </section>
  <div class="footer-content">
    <section aria-labelledby="footer-about" class="about">
      <h2 id="footer-about" class="sr-only">Om Bjerk</h2>
      <p>
        Vi vil være med å lage en verden hvor folk kan gjøre mer av det de er
        gode på, og hvor teknologien tar seg av resten. Vi skaper digitale
        løsninger som forbedre og forenkle måten mennesker lærer, tenker, jobber
        og kommuniserer på.
      </p>
    </section>
    <nav>
      <ul>
        <li><a href="/om">Om oss →</a></li>
        <li><a href="/arbeid">Arbeider →</a></li>
        <li><a href="/tjenester">Tjenester →</a></li>
        <li><a href="/artikler">Artikler →</a></li>
        <li><a href="/kontakt">Kontakt oss →</a></li>
      </ul>
    </nav>
    <section class="contact">
      <address>
        <p>Arbins gate 11, 0253 Oslo</p>
        <a href="tel:+4722120512">22 12 05 12</a>
        <a href="mailto:kontoret@bjerk.io"> kontoret@bjerk.io </a>
      </address>
      <div class="socials">
        <a
          aria-label="GitHub-profile for Bjerk"
          href="https://github.com/bjerkio"
        >
          <GitHubIcon />
        </a>
        <a
          aria-label="Linked-profile for Bjerk"
          href="https://www.linkedin.com/company/bjerk"
        >
          <LinkedInIcon />
        </a>
      </div>
    </section>
  </div>
  <div class="bottom-footer">
    <div class="footer-logo" aria-hidden="true">
      <Logo />
    </div>
    <nav class="links">
      <a href="/vilkar">Vilkår</a>
      <a href="/personvern">Personvernerklæring</a>
    </nav>
  </div>
</footer>

<style>
  a {
    --color-link: var(--color-app-text);
  }

  section.about {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    & > p {
      max-width: 40ch;
    }
  }

  .footer-logo > svg {
    height: 100px;
  }

  .call-to-action {
    background-color: var(--color-focus-bg);
    color: var(--color-focus-text);
    margin-block-start: var(--gap);
    padding-block: 8rem;
    text-align: center;

    & > a {
      gap: 0.5rem;
      color: inherit;
      font-size: 1.25rem;
      text-decoration-color: inherit;
      text-decoration-thickness: 0.1rem;
      text-underline-offset: 0.25rem;
    }
  }

  footer > .footer-content {
    padding-inline: 2rem;
    padding-block: 4rem;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1125px;

    & > nav > ul {
      display: grid;
      gap: 0.5rem;
      list-style: none;
    }
  }

  footer > .bottom-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;

    & > .links {
      display: flex;
      flex-direction: row;
      align-self: flex-end;
      flex-wrap: wrap;
      gap: 2rem;

      & > a {
        display: block;
      }
    }
  }

  .contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .contact > address {
    & > p {
      margin-bottom: 0;
    }
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .socials {
    margin-top: 1.2rem;
    font-size: 1.7rem;
    display: flex;
    gap: 0.5rem;
  }

  .socials a {
    color: inherit;
  }
</style>