/**
 * Sley Share Buttons - default styles.
 *
 * All colors/sizes are exposed as CSS custom properties scoped to
 * .sley-share-buttons so a parent theme can override them without
 * touching this file, e.g.:
 *
 *   .sley-share-buttons {
 *     --sley-share-accent: #1a4d8f;
 *     --sley-share-icon-size: 22px;
 *   }
 *
 * Class names use the "sley-share" prefix (configurable in PHP via the
 * class_prefix argument) so they never collide with the theme's own,
 * disabled ".x-entry-share" / ".x-share" block.
 */

.sley-share-buttons {
	--sley-share-gap: 0.6rem;
	--sley-share-icon-size: 18px;
	--sley-share-button-size: 44px;
	--sley-share-radius: 999px;
	--sley-share-color: #ffffff;
	--sley-share-bg: #4a4a4a;
	--sley-share-bg-hover: #2f2f2f;
	--sley-share-accent: #2f6f4e;
	--sley-share-border-color: #c7c7c7;
	--sley-share-text-color: inherit;
	--sley-share-font-size: 1rem;
	--sley-share-focus-color: #1a4d8f;
	--sley-share-logo-height: 100px;

	box-sizing: border-box;
	position: relative;
	margin: 2.5rem 0 1.5rem;
	padding: 1.5rem;
	padding-bottom: calc(1.5rem + var(--sley-share-logo-height) + 0.75rem);
	border: 1px solid var(--sley-share-accent);
	color: var(--sley-share-text-color);
	font-size: var(--sley-share-font-size);
}

@media (max-width: 480px) {
	.sley-share-buttons {
		--sley-share-logo-height: 80px;
	}
}

.sley-share-buttons *,
.sley-share-buttons *::before,
.sley-share-buttons *::after {
	box-sizing: inherit;
}

/*
 * The native-share button, copy/print buttons and (when JS swaps to native
 * share) the individual network <li> items are toggled via the plain HTML
 * `hidden` attribute from sley-share-buttons.js. Author stylesheets always
 * win over the browser's built-in "[hidden] { display: none }" rule
 * regardless of selector specificity, so the later `display:
 * flex`/`inline-flex` declarations below would otherwise make elements
 * marked `hidden` visible again. This rule restores the expected behavior
 * at any nesting depth.
 */
.sley-share-buttons [hidden] {
	display: none !important;
}

.sley-share-heading {
	margin: 0 0 0.75rem;
	font-weight: 600;
}

/*
 * !important: this plugin is designed to be theme-independent (see the
 * plugin header), so it can't rely on loading after the theme's CSS.
 * Parent-theme selectors like ".s-post-bottom .sley-share-motivation"
 * carry two classes, (0,2,0) specificity, which already ties or beats a
 * plain ".sley-share-motivation" rule - a tie would fall back to source
 * order, which is not reliable. !important guarantees this single,
 * plugin-owned declaration always wins regardless of theme CSS.
 */
.sley-share-motivation {
	max-width: 32rem;
	margin: 0 0 1rem;
	line-height: 1.5;
	font-style: normal !important;
}

.sley-share-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sley-share-gap);
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.sley-share-item {
	margin: 0;
	padding: 0;
}

.sley-share-link,
.sley-share-native-button,
.sley-share-copy-button,
.sley-share-print-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-width: var(--sley-share-button-size);
	height: var(--sley-share-button-size);
	padding: 0 0.9em;
	border: 0;
	border-radius: var(--sley-share-radius);
	background-color: var(--sley-share-bg);
	color: var(--sley-share-color);
	text-decoration: none;
	line-height: 1;
	font-size: 0.95em;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.sley-share-link {
	padding: 0;
	width: var(--sley-share-button-size);
}

.sley-share-link:hover,
.sley-share-link:focus-visible,
.sley-share-native-button:hover,
.sley-share-native-button:focus-visible,
.sley-share-copy-button:hover,
.sley-share-copy-button:focus-visible,
.sley-share-print-button:hover,
.sley-share-print-button:focus-visible {
	background-color: var(--sley-share-bg-hover);
	color: var(--sley-share-color);
}

.sley-share-link:focus-visible,
.sley-share-native-button:focus-visible,
.sley-share-copy-button:focus-visible,
.sley-share-print-button:focus-visible,
.sley-share-copy-input:focus-visible {
	outline: 3px solid var(--sley-share-focus-color);
	outline-offset: 2px;
}

.sley-share-icon {
	width: var(--sley-share-icon-size);
	height: var(--sley-share-icon-size);
	flex: 0 0 auto;
	fill: currentColor;
}

.sley-share-link-facebook {
	background-color: #1877f2;
}

.sley-share-link-whatsapp {
	/* WhatsApp's brand green (#25d366) only gives ~2:1 contrast against the
	   white icon, below the 3:1 non-text contrast minimum; the darker,
	   equally-official WhatsApp teal-green passes comfortably (~7.7:1). */
	background-color: #075e54;
}

.sley-share-link-x {
	background-color: #000000;
}

.sley-share-link-threads {
	background-color: #000000;
}

.sley-share-link-telegram {
	/* Telegram's lighter app-icon blue (#26A5E4/#229ED9) only gives ~3:1
	   contrast against the white icon, right at the non-text minimum; the
	   classic, equally-official Telegram blue passes comfortably (~3.9:1). */
	background-color: #0088cc;
}

.sley-share-link-linkedin {
	background-color: #0a66c2;
}

.sley-share-link-email {
	background-color: var(--sley-share-accent);
}

.sley-share-link-sms {
	background-color: var(--sley-share-accent);
}

.sley-share-native-button {
	background-color: var(--sley-share-accent);
	margin-bottom: 1rem;
}

.sley-share-copy {
	max-width: 32rem;
}

.sley-share-copy-label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

/*
 * The row's own selectors are chained through .sley-share-buttons AND
 * .sley-share-copy-row (three classes, specificity (0,3,0)) instead of the
 * flat single-class selectors used elsewhere in this file, to win
 * specificity fights against common theme-level form resets such as
 * ".entry-content input[type=text] { width: 100% }" (0,2,1). A two-class
 * chain like ".sley-share-buttons .sley-share-copy-input" (0,2,0) would only
 * tie such a rule at the class tier and still lose on the type-selector
 * tier - three classes are needed to actually outrank it outright. This
 * still can't guarantee a win against an arbitrarily more specific theme
 * rule, but it resolves the common case.
 */
.sley-share-buttons .sley-share-copy-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
}

.sley-share-buttons .sley-share-copy-row .sley-share-copy-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: var(--sley-share-button-size);
	padding: 0 0.75em;
	border: 1px solid var(--sley-share-border-color);
	border-radius: calc(var(--sley-share-radius) / 6);
	background-color: #fff;
	color: #222;
	font-size: 0.95em;
}

.sley-share-buttons .sley-share-copy-row .sley-share-copy-button {
	flex: 0 0 auto;
	background-color: var(--sley-share-accent);
}

.sley-share-copy-feedback {
	display: block;
	margin-top: 0.4rem;
	min-height: 1.2em;
	font-size: 0.85em;
}

/*
 * Chained through .sley-share-buttons (0,2,0) rather than the flat
 * single-class selector, for the same reason as .sley-share-copy-row
 * .sley-share-copy-input above: common theme content-area image resets
 * (e.g. ".entry-content img { max-width: 100%; height: auto }", (0,1,1))
 * would otherwise outrank a flat ".sley-share-logo" and silently override
 * the fixed corner size, blowing the logo up to its native 778x560.
 */
.sley-share-buttons .sley-share-logo {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	height: var(--sley-share-logo-height);
	width: auto;
	max-width: calc(100% - 2rem);
}

@media (prefers-reduced-motion: reduce) {
	.sley-share-link,
	.sley-share-native-button,
	.sley-share-copy-button,
	.sley-share-print-button {
		transition: none;
	}
}