/**
 * CQI Press — Social Sharing Module Styles
 *
 * Uses only CSS custom properties from the CQI Press token system.
 * No hardcoded colours, spacing, or font values. No platform brand colours.
 * Enqueued conditionally — only on pages where the sharing block renders.
 *
 * Handle:     cqi-press-social
 * Depends on: cqi-press (press.css — provides the token root)
 *
 * @package    CQI_Press
 * @subpackage Social_Sharing
 * @since      1.7.0
 */

/* ── Sharing block container ──────────────────────────────────────── */

.cqi-share {
	display: flex;
	align-items: center;
	gap: var(--cqi-space-3);
	padding: var(--cqi-space-4) 0;
	border-top: 1px solid var(--cqi-color-border);
	margin-top: var(--cqi-space-4);
}

/* ── Label ────────────────────────────────────────────────────────── */

.cqi-share__label {
	font-size: var(--cqi-text-sm);
	color: var(--cqi-color-muted);
	font-family: var(--cqi-font-body);
	white-space: nowrap;
}

/* ── Button row ───────────────────────────────────────────────────── */

.cqi-share__buttons {
	display: flex;
	align-items: center;
	gap: var(--cqi-space-2);
	flex-wrap: wrap;
}

/* ── Individual button ────────────────────────────────────────────── */

.cqi-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--cqi-radius);
	color: var(--cqi-color-muted);
	transition: color 0.2s ease, background-color 0.2s ease;
	text-decoration: none;
}

.cqi-share__btn:hover,
.cqi-share__btn:focus-visible {
	color: var(--cqi-color-primary);
	background-color: var(--cqi-color-primary-100);
	outline: none;
}

.cqi-share__btn:focus-visible {
	box-shadow: 0 0 0 2px var(--cqi-color-primary);
}

/* ── SVG inside button ────────────────────────────────────────────── */

.cqi-share__btn svg {
	display: block;
	flex-shrink: 0;
}

/* ── Responsive: stack vertically on very narrow viewports ────────── */

@media (max-width: 400px) {
	.cqi-share {
		flex-direction: column;
		align-items: flex-start;
	}
}