/*
 * File: components.css
 * Responsibility: Basic desktop appearance for reusable calls to action.
 */

.hero__actions {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: var(--space-0);
  white-space: nowrap;
}

.hero__action-primary,
.hero__action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding-inline: var(--space-3);
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  transition: color var(--transition-fast) var(--easing-standard);
}

.hero__action-primary {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

.hero__action-primary:hover,
.hero__action-secondary:hover {
  color: var(--color-accent-hover);
}

.hero__action-primary:active,
.hero__action-secondary:active {
  color: var(--color-accent-active);
}

.hero__action-primary:focus-visible,
.hero__action-secondary:focus-visible {
  outline: calc(var(--border-width) * 2) var(--border-style) var(--color-focus-ring);
  outline-offset: var(--space-1);
}

.hero__actions a + a {
  border-left: var(--border-width) var(--border-style) var(--color-border);
}

.social-link {
  gap: var(--space-2);
}

.social-link__icon {
  display: block;
  flex: none;
  height: var(--space-4);
  width: auto;
}