/*
 * Cioffi Concepts: the way back to the neural landing page, on every page of a
 * site the portfolio hosts (added by scripts/add-home-link.ts). It sits just
 * before the site's brand in its header, else at the window's top left. The
 * badge is the logo's mark on its own dark ground (cc-home-mark.webp, cut from
 * the art); its hairline ring and divider take the site's own hairline colour
 * where it has one (--bd on the CC V8 Engine demo, whose --line is its accent,
 * or --line on Cioffi Family Law), so it matches whichever mode and theme the
 * visitor picks.
 */
.cc-home {
  position: relative;
  box-sizing: border-box;
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: 14px;
  padding: 0;
  line-height: 0;
  text-decoration: none;
  border: 1px solid var(--bd, var(--line, rgba(255, 255, 255, 0.18)));
  border-radius: 50%;
  background: #02040c;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    scale 0.2s ease;
}

/* A hairline between it and the site's own wordmark, midway across the gap. */
.cc-home::after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: -15px;
  border-right: 1px solid var(--bd, var(--line, rgba(255, 255, 255, 0.18)));
  pointer-events: none;
}

/* The mark fills the badge, whatever the host site does with every image. */
.cc-home img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  transition: filter 0.25s ease;
}

.cc-home:hover,
.cc-home:focus-visible {
  border-color: rgba(150, 190, 255, 0.55);
  box-shadow: 0 0 14px -2px rgba(120, 170, 255, 0.45);
}

.cc-home:hover img,
.cc-home:focus-visible img {
  filter: brightness(1.18);
}

.cc-home:active {
  scale: 0.94;
}

.cc-home:focus-visible {
  outline: 2px solid var(--copper-2, var(--acc, #8fb8ff));
  outline-offset: 3px;
}

/* The CC V8 Engine demo's top bar spreads its items apart: the brand keeps
   to the left, beside the mark, and the room goes after it. */
.top > .cc-home + .brand {
  margin-right: auto;
}

/* A site without a brand link: on its own at the window's top left. */
.cc-home--float {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 2147483000;
  margin: 0;
  border-color: rgba(255, 255, 255, 0.22);
}

.cc-home--float::after {
  content: none;
}

/* The header's narrower sizes (the Cioffi Family Law template's breakpoints). */
@media (max-width: 560px) {
  .cc-home {
    width: 30px;
    height: 30px;
    margin-right: 8px;
  }

  .cc-home::after {
    right: -9px;
  }

  /* The V8 demo's bar keeps its 16px gap at every size. */
  .top > .cc-home::after {
    right: -13px;
  }
}

@media (max-width: 380px) {
  .cc-home {
    width: 28px;
    height: 28px;
    margin-right: 6px;
  }

  .cc-home::after {
    right: -7px;
  }

  .top > .cc-home::after {
    right: -12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-home,
  .cc-home img {
    transition: none;
  }
}