/* Live-site icon next to the case page title (links set in project-links.js) */
.case-hero__site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.8em;
  height: 0.8em;
  margin-inline-start: 0.3em;
  vertical-align: 0.05em;
  border-radius: 0.2em;
  color: var(--text-muted, currentColor);
  transition: color 0.2s ease, transform 0.2s ease;
}

.case-hero__site::before {
  content: "";
  width: 70%;
  height: 70%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4L10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4L10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.case-hero__site:hover,
.case-hero__site:focus-visible {
  color: var(--accent, #3b82f6);
  transform: translate(0.04em, -0.04em);
}

.case-hero__site:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 3px;
}

[dir="rtl"] .case-hero__site::before {
  transform: scaleX(-1);
}

/* No live site yet: offer a demo request instead of a dead icon */
.case-hero__demo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-inline-start: 0.6em;
  padding: 0.25em 0.7em;
  border: 1px solid var(--border, currentColor);
  border-radius: 999px;
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted, currentColor);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.case-hero__demo-link::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12c-2.5 4.5-6 7-10 7s-7.5-2.5-10-7c2.5-4.5 6-7 10-7s7.5 2.5 10 7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12c-2.5 4.5-6 7-10 7s-7.5-2.5-10-7c2.5-4.5 6-7 10-7s7.5 2.5 10 7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
}

.case-hero__demo-link:hover,
.case-hero__demo-link:focus-visible {
  color: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  background: color-mix(in oklch, var(--accent, #3b82f6) 10%, transparent);
}

.case-hero__demo-link:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 3px;
}