/**
 * Share button ("Jaga") component.
 *
 * Extracted from single-post.css so the button can render outside single
 * posts (e.g. the fotokonkurss page) without pulling in the single-post
 * stylesheet and its front-page dependency. Depends only on the design
 * tokens in the global stylesheet. Markup: partials/share-button.php;
 * behaviour: assets/js/share-button.js. The class prefix stays
 * `single-post__` (legacy styling hook shared with the post header layout).
 */

.single-post__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}

.single-post__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.single-post__action:hover,
.single-post__action:focus-visible {
  color: var(--color-green-accent);
  background-color: var(--color-gray-bg);
}

.single-post__action:focus-visible {
  outline: 2px solid var(--color-green-light);
  outline-offset: 2px;
}

/* Share: a faint transparent icon read as "not a button" (Janek,
   2026-09-14). Make it an obvious labelled green pill instead. */
.single-post__action--share {
  width: auto;
  gap: 0.4rem;
  padding: 0 0.9rem;
  border: 2px solid var(--color-green-medium);
  color: var(--color-green-medium);
  font-size: 0.95rem;
  font-weight: 700;
}

.single-post__action--share:hover,
.single-post__action--share:focus-visible {
  color: var(--color-white);
  background-color: var(--color-green-medium);
}

.single-post__action-label {
  line-height: 1;
}