/**
 * Social Links Manager — Public Button Styles
 *
 * Uses a CSS custom property (--slm-color) injected per-button via inline style.
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */
.slm-btn {
	--slm-color:      #555;
	--slm-hover-dark: rgba(0, 0, 0, .12);

	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	text-decoration: none;
	cursor:          pointer;
	transition:      transform .15s, box-shadow .15s, filter .15s;
	border:          none;
	outline:         none;
	background:      var(--slm-color);
	color:           #fff;
	font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight:     600;
	line-height:     1;
	position:        relative;
	overflow:        hidden;
	vertical-align:  middle;
}

.slm-btn:hover,
.slm-btn:focus-visible {
	filter:     brightness(1.08);
	transform:  translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	color:      #fff;
	text-decoration: none;
}

.slm-btn:active {
	transform:  translateY(0);
	box-shadow: none;
	filter:     brightness(.96);
}

.slm-btn:focus-visible {
	outline:        3px solid var(--slm-color);
	outline-offset: 3px;
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */
.slm-btn__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}

.slm-btn__icon svg {
	display: block;
	fill:    currentColor;
}

/* ── Small (icon only, circle) ────────────────────────────────────────────── */
.slm-btn--small {
	width:         44px;
	height:        44px;
	border-radius: 50%;
	padding:       0;
}

.slm-btn--small .slm-btn__icon {
	width:  44px;
	height: 44px;
}

/* ── Large (icon + label, pill) ───────────────────────────────────────────── */
.slm-btn--large {
	gap:           10px;
	padding:       0 22px 0 16px;
	height:        48px;
	border-radius: 100px;
	font-size:     15px;
	letter-spacing: .01em;
}

.slm-btn--large .slm-btn__icon {
	width:  22px;
	height: 22px;
}

.slm-btn__label {
	white-space: nowrap;
	line-height: 1.2;
}

/* ── Block wrapper — single blocks ────────────────────────────────────────── */
.slm-block-wrap,
.ssml-block-wrap {
	display: block;
}

.slm-block-wrap.aligncenter,
.ssml-block-wrap.aligncenter {
	text-align: center;
}

.slm-block-wrap.alignright,
.ssml-block-wrap.alignright {
	text-align: right;
}

.slm-block-wrap.alignleft,
.ssml-block-wrap.alignleft {
	text-align: left;
}

/* ── Shortcode align wrapper — single button ──────────────────────────────── */
.ssml-align-wrap {
	display: block;
}

.ssml-align-wrap.ssml-align-center { text-align: center; }
.ssml-align-wrap.ssml-align-right  { text-align: right; }
.ssml-align-wrap.ssml-align-left   { text-align: left; }

/* ── Row block ────────────────────────────────────────────────────────────── */
/*
 * KEY FIX: width:100% is required so that justify-content has space to work.
 * A flex container with no explicit width is only as wide as its children —
 * justify-content:center on a container that's exactly the same width as its
 * content has zero visible effect. Setting width:100% fills the available
 * column width and gives the items room to be positioned within it.
 *
 * justify-content is set via inline style in PHP (from the sidebar attribute)
 * so we do NOT set it here — CSS rules cannot override inline styles, so any
 * justify-content set here would be silently ignored whenever an inline style
 * is present.
 */
.ssml-row {
	display:     flex;
	align-items: center;
	width:       100%;  /* ← THE critical fix */
	box-sizing:  border-box;
}

/*
 * Inner block wrappers become transparent to the flex layout.
 * display:contents removes the div from box layout while keeping its children
 * as direct flex children of .ssml-row, so gap and justify-content apply
 * directly to the buttons themselves.
 */
.ssml-row .ssml-block-wrap,
.ssml-row .slm-block-wrap {
	display: contents;
}

/* ── Shortcode row wrapper — [ssml_row] ───────────────────────────────────── */
/*
 * Same rules as .ssml-row. justify-content and gap come from inline styles
 * set by the shortcode PHP, so they are not repeated here.
 */
.ssml-shortcode-row {
	display:    flex;
	align-items: center;
	width:      100%;
	box-sizing: border-box;
	flex-wrap:  wrap;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.slm-btn { box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.slm-btn { transition: none; }
}

/* ── Instagram gradient ───────────────────────────────────────────────────── */
.slm-btn[data-network="instagram"] {
	background: #e1306c;
	background: linear-gradient( 45deg, #fcb045 0%, #fd1d1d 50%, #833ab4 100% );
}
.slm-btn[data-network="instagram"]:hover,
.slm-btn[data-network="instagram"]:focus-visible {
	background: linear-gradient( 45deg, #fcb045 0%, #fd1d1d 50%, #833ab4 100% );
	filter: brightness(1.1);
}

/* ── TikTok gradient ──────────────────────────────────────────────────────── */
.slm-btn[data-network="tiktok"] {
	background: #010101;
	background: linear-gradient( 135deg, #25F4EE 0%, #010101 40%, #FE2C55 100% );
}
.slm-btn[data-network="tiktok"]:hover,
.slm-btn[data-network="tiktok"]:focus-visible {
	background: linear-gradient( 135deg, #25F4EE 0%, #010101 40%, #FE2C55 100% );
	filter: brightness(1.15);
}

/* ── Pocket gradient ──────────────────────────────────────────────────────── */
.slm-btn[data-network="pocket"] {
	background: #ef3f56;
	background: linear-gradient( 145deg, #ff6b6b 0%, #ef3f56 55%, #c0202f 100% );
}
.slm-btn[data-network="pocket"]:hover,
.slm-btn[data-network="pocket"]:focus-visible {
	background: linear-gradient( 145deg, #ff6b6b 0%, #ef3f56 55%, #c0202f 100% );
	filter: brightness(1.08);
}

/* ── Snapchat — yellow background needs black text & icon ─────────────────── */
/*
 * Snapchat's brand yellow (#FFFC00) is a light colour — white text and the
 * default white currentColor icon would be invisible against it.
 * We override color to black so both the label text and the SVG icon
 * (which uses fill="#000000" in the path itself) render correctly.
 */
.slm-btn[data-network="snapchat"] {
	color: #000000;
}

.slm-btn[data-network="snapchat"]:hover,
.slm-btn[data-network="snapchat"]:focus-visible {
	color: #000000;
	filter: brightness(0.97);
}

.slm-btn[data-network="snapchat"]:focus-visible {
	outline-color: #000000;
}