/*
 * Jordan McGilvray.net
 * Components
 *
 * Reusable site elements that are not part of the
 * overall page geometry.
 */

/* Profile image */
.profile {
  margin-bottom: 1.25rem;
  text-align: center;
}

.profile-image {
  display: block;
  width: 175px;
  height: 175px;
  margin: 0 auto;
  border: 3px solid var(--color-border);
  border-radius: 50%;
  object-fit: cover;
}

/* Social links */
.social-links {
  margin-bottom: 1.5rem;
}

.social-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.social-links li {
  margin: 0;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background-color: var(--color-surface);
  color: var(--color-text);

  font-size: 1.4rem;
  line-height: 1;

  text-decoration: none;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.social-links a:visited {
  color: var(--color-text);
}

.social-links a:hover,
.social-links a:focus {
  background-color: var(--solarized-orange);
  color: var(--solarized-base2);

  text-decoration: none;
  transform: translateY(-1px);
}

/* Sidebar typography */
.site-sidebar {
  font-size: 0.875rem;
  line-height: 1.25;
}

/* Sidebar navigation */
.sidebar-navigation ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.sidebar-navigation li {
  margin: 0;
  padding: 0.5rem 0;

}

.sidebar-navigation li:first-child {
}

.sidebar-navigation a {
  display: flex;
  align-items: center;
  gap: 0.45rem;

  text-decoration: none;
}

.sidebar-navigation a:hover,
.sidebar-navigation a:focus {
  text-decoration: none;
}

.sidebar-navigation a .fa-link {
  flex: 0 0 auto;

  color: var(--color-text);

  font-size: 0.85em;
}

.navigation-description {
  display: block;

  margin-top: 0.15rem;
  margin-left: 1.3rem;

  color: var(--color-muted);

  font-size: 0.8em;
  line-height: 1.15;
}
/* HomeLab ASCII diagram */
.homelab-diagram {
  max-width: 100%;

  margin: 1.5rem 0;
  padding: 1rem 1.25rem;

  overflow-x: auto;

  background-color: #001e1f;
  color: var(--solarized-base0);

  border-radius: 0.5rem;

  box-shadow:
    inset 0 0 0 1px var(--color-surface),
    0 4px 6px rgb(0 0 0 / 10%);

  font-family:
    "Space Mono",
    "Lucida Console",
    "Liberation Mono",
    "Noto Sans Mono",
    "Courier",
    monospace;

  font-size: 0.9rem;
  line-height: 1.4;

  white-space: pre;
}

/* 404 page */
.not-found-game {
  text-align: center;
}

.not-found-visuals {
  margin: 2rem 0;
}

/* Flickering torch */
.torch {
  position: relative;

  width: 10px;
  height: 180px;

  margin: 2rem auto;

  background:
    radial-gradient(
      circle at 50% 90%,
      #333 10%,
      transparent 80%
    );
}

.flame {
  position: absolute;

  bottom: 100%;
  left: 50%;

  width: 20px;
  height: 60px;

  margin-left: -10px;

  background:
    radial-gradient(
      circle at 50% 50%,
      #ff9 0%,
      #f60 60%,
      transparent 90%
    );

  filter: blur(4px);

  animation: flicker 0.15s infinite alternate;
}

@keyframes flicker {
  from {
    opacity: 0.9;
    transform:
      translateX(-2px)
      scale(1.05)
      rotate(-2deg);
  }

  to {
    opacity: 1;
    transform:
      translateX(2px)
      scale(1)
      rotate(2deg);
  }
}

/* Roguelike animation */
.roguelike-gif {
  margin: 1.5rem auto;
  text-align: center;
}

.roguelike-gif img {
  max-width: 100%;
  height: auto;

  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.roguelike-gif figcaption {
  margin-top: 0.5rem;

  color: var(--color-muted);

  font-style: italic;
}

/* Manny quote */
.quote-mannie {
  max-width: 42rem;

  margin: 2rem auto 1rem;
  padding-left: 1rem;

  border-left: 4px solid var(--color-border);

  color: var(--color-strong);

  text-align: left;
}

.quote-mannie footer {
  margin-top: 0.75rem;

  color: var(--color-text);

  font-style: normal;
}

.quote-note {
  margin-top: -0.25rem;
  margin-bottom: 2rem;

  color: var(--color-muted);

  font-size: 0.95rem;

  text-align: center;
}

/* Narrow screens */
@media (max-width: 720px) {
  .profile-image {
    width: 140px;
    height: 140px;
  }

  .social-links ul {
    gap: 0.6rem;
  }

  .social-links a {
    width: 42px;
    height: 42px;
  }

  .sidebar-navigation {
    max-width: 28rem;
    margin: 0 auto;
  }

  .homelab-diagram {
    font-size: 0.8rem;
  }
}