/*
  Shared home button: a plain house outline in 80% grey (/assets/img/home.svg),
  the same on every page so it blends with any theme.

  Usage:
    <link rel="stylesheet" href="/assets/css/home.css">
    <a class="home-link" href="/" aria-label="Home"></a>

  Optional, set on .home-link (or a parent):
    --home-size              icon size          (default 40px, 32px on phones)
    --home-top / --home-left position           (default 16px / 16px)
  Add class "home-link--inline" to drop the fixed positioning and place it yourself.
*/
.home-link {
  position: fixed;
  top: var(--home-top, 16px);
  left: var(--home-left, 16px);
  z-index: 1000;
  display: block;
  width: var(--home-size, 40px);
  height: var(--home-size, 40px);
  background: url("/assets/img/home.svg") center / contain no-repeat;
  transition: transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.home-link:hover { transform: scale(1.1); }
.home-link:focus-visible { outline: 2px solid rgba(128, 128, 128, .8); outline-offset: 4px; border-radius: 4px; }

.home-link--inline { position: relative; top: auto; left: auto; display: inline-block; }

@media (max-width: 600px) {
  .home-link { width: var(--home-size, 32px); height: var(--home-size, 32px); top: var(--home-top, 10px); left: var(--home-left, 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-link { transition: none; }
  .home-link:hover { transform: none; }
}