/**
 * IMA Social Share Styles
 *
 * Minimal CSS for social share buttons.
 * Relies heavily on Bootstrap 5 utility classes.
 *
 * @package IMA_Shortcodes
 * @since 1.1.0
 */

/* ==========================================================================
   CSS Custom Properties - Platform Colors
   ========================================================================== */
:root {
	--ima-share-facebook: #1877f2;
	--ima-share-twitter: #000000;
	--ima-share-linkedin: #0a66c2;
	--ima-share-telegram: #26a5e4;
	--ima-share-whatsapp: #25d366;
	--ima-share-email: #6c757d;
	--ima-share-copy: #6c757d;
	--ima-share-native: #6c757d;
	--ima-share-btn-size: 2.5rem;
	--ima-share-icon-size: 1.25rem;
}

/* ==========================================================================
   Button Base Styles
   ========================================================================== */
.ima-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: var(--ima-share-btn-size);
	min-height: var(--ima-share-btn-size);
	padding: 0.5rem;
	border: none;
	border-radius: 0.375rem;
	background-color: var(--ima-share-color, var(--ima-share-copy));
	color: #fff;
	font-size: var(--ima-share-icon-size);
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.ima-share-btn:hover {
	opacity: 0.85;
	color: #fff;
	text-decoration: none;
}

.ima-share-btn:active {
	transform: scale(0.95);
}

/* Focus visible for keyboard navigation */
.ima-share-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   Platform-Specific Colors
   ========================================================================== */
.ima-share-btn--facebook {
	--ima-share-color: var(--ima-share-facebook);
}

.ima-share-btn--twitter {
	--ima-share-color: var(--ima-share-twitter);
}

.ima-share-btn--linkedin {
	--ima-share-color: var(--ima-share-linkedin);
}

.ima-share-btn--telegram {
	--ima-share-color: var(--ima-share-telegram);
}

.ima-share-btn--whatsapp {
	--ima-share-color: var(--ima-share-whatsapp);
}

.ima-share-btn--email {
	--ima-share-color: var(--ima-share-email);
}

.ima-share-btn--copy {
	--ima-share-color: var(--ima-share-copy);
}

.ima-share-btn--native {
	--ima-share-color: var(--ima-share-native);
}

/* ==========================================================================
   Labels (when show_labels="true")
   ========================================================================== */
.ima-share-label {
	font-size: 0.875rem;
	font-weight: 500;
}

/* ==========================================================================
   Native Share Button - Hidden by Default
   Shown via JS when Web Share API is available
   ========================================================================== */
.ima-share-native-only {
	display: none;
}

/* JS adds this class when Web Share API is supported */
.ima-share-native-supported .ima-share-native-only {
	display: inline-flex;
}

/* ==========================================================================
   Full Mode - URL Input
   ========================================================================== */
.ima-share-container--full {
	flex-direction: column;
	align-items: stretch;
}

.ima-share-url-wrapper {
	flex: 1;
	min-width: 200px;
	max-width: 400px;
}

.ima-share-url-input {
	font-family: monospace;
	font-size: 0.875rem;
}

/* ==========================================================================
   Copy Success Feedback
   ========================================================================== */
.ima-share-btn--copied {
	background-color: #198754 !important;
}

.ima-share-btn--copied .ima-share-label {
	display: inline;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 575.98px) {
	.ima-share-container--full {
		gap: 1rem;
	}

	.ima-share-url-wrapper {
		width: 100%;
		max-width: none;
	}
}

/* ==========================================================================
   Greyscale Mode - For Color Consistency
   ========================================================================== */
.ima-share-container--greyscale .ima-share-btn {
	--ima-share-color: #6c757d !important;
}

.ima-share-container--greyscale .ima-share-btn:hover {
	--ima-share-color: #5a6268 !important;
}

/* ==========================================================================
   Theme Color Modes - Bootstrap Color Palette
   ========================================================================== */
.ima-share-container--color-primary .ima-share-btn {
	--ima-share-color: var(--bs-primary, #0d6efd) !important;
}

.ima-share-container--color-primary .ima-share-btn:hover {
	--ima-share-color: var(--bs-primary-rgb, #0a58ca) !important;
}

.ima-share-container--color-secondary .ima-share-btn {
	--ima-share-color: var(--bs-secondary, #6c757d) !important;
}

.ima-share-container--color-secondary .ima-share-btn:hover {
	--ima-share-color: var(--bs-secondary-rgb, #5a6268) !important;
}

.ima-share-container--color-success .ima-share-btn {
	--ima-share-color: var(--bs-success, #198754) !important;
}

.ima-share-container--color-success .ima-share-btn:hover {
	--ima-share-color: var(--bs-success-rgb, #146c43) !important;
}

.ima-share-container--color-danger .ima-share-btn {
	--ima-share-color: var(--bs-danger, #dc3545) !important;
}

.ima-share-container--color-danger .ima-share-btn:hover {
	--ima-share-color: var(--bs-danger-rgb, #b02a37) !important;
}

.ima-share-container--color-warning .ima-share-btn {
	--ima-share-color: var(--bs-warning, #ffc107) !important;
}

.ima-share-container--color-warning .ima-share-btn:hover {
	--ima-share-color: var(--bs-warning-rgb, #cc9a06) !important;
}

.ima-share-container--color-info .ima-share-btn {
	--ima-share-color: var(--bs-info, #0dcaf0) !important;
}

.ima-share-container--color-info .ima-share-btn:hover {
	--ima-share-color: var(--bs-info-rgb, #0aa2c0) !important;
}

.ima-share-container--color-light .ima-share-btn {
	--ima-share-color: var(--bs-light, #f8f9fa) !important;
	color: #000 !important;
}

.ima-share-container--color-light .ima-share-btn:hover {
	--ima-share-color: var(--bs-light-rgb, #e2e6ea) !important;
	color: #000 !important;
}

.ima-share-container--color-dark .ima-share-btn {
	--ima-share-color: var(--bs-dark, #212529) !important;
}

.ima-share-container--color-dark .ima-share-btn:hover {
	--ima-share-color: var(--bs-dark-rgb, #1a1d20) !important;
}

/* ==========================================================================
   Screen Reader Only (Bootstrap's visually-hidden backup)
   ========================================================================== */
.ima-share-sr-announcement {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}