/**
 * css/components/social-links.css
 * ============================================================
 * A LEGEND 2：SNSリンク共通コンポーネント
 * ============================================================
 *
 * 役割：
 * - template-parts/components/social-links.php が出力するSNSリンクを装飾します。
 * - TOP Hero / Footer の両方で同じHTMLを使い、context別modifierで見た目だけを切り替えます。
 * - 色・角丸・影・ホバーはDesign Tokenへ接続し、SNS公式色や固定アクセント色は使いません。
 */

.aleg2-social-links {
	--aleg2-social-button-size: 42px;
	--aleg2-social-icon-size: 18px;
	--aleg2-social-gap: var(--aleg2-space-2, 8px);
	--aleg2-social-color: var(--aleg2-color-text-muted);
	--aleg2-social-color-hover: var(--aleg2-color-on-primary);
	--aleg2-social-bg: var(--aleg2-glass-bg);
	--aleg2-social-bg-hover: var(--aleg2-color-primary);
	--aleg2-social-border: var(--aleg2-color-border);
	--aleg2-social-border-hover: var(--aleg2-color-primary);
	--aleg2-social-radius: var(--aleg2-radius-button);
	--aleg2-social-shadow: none;
	--aleg2-social-shadow-hover: var(--aleg2-shadow-soft);

	color: var(--aleg2-social-color);
}

.aleg2-social-links__header {
	max-width: 32em;
	margin: 0 0 var(--aleg2-space-4, 16px);
}

.aleg2-social-links__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-latin, var(--aleg2-font-heading, serif));
	font-size: var(--aleg2-font-size-sm, .95rem);
	font-weight: 900;
	line-height: var(--aleg2-line-height-heading, 1.18);
	letter-spacing: var(--aleg2-letter-spacing-wider, .18em);
	text-transform: uppercase;
}

.aleg2-social-links__description {
	margin: var(--aleg2-space-2, 8px) 0 0;
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-sm, .95rem);
	line-height: var(--aleg2-line-height-body, 1.8);
}

.aleg2-social-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-social-gap);
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.aleg2-social-links__item {
	margin: 0;
}

.aleg2-social-links__link {
	display: inline-flex;
	gap: .58em;
	align-items: center;
	justify-content: center;
	min-width: var(--aleg2-social-button-size);
	min-height: var(--aleg2-social-button-size);
	padding: .68em .82em;
	color: var(--aleg2-social-color);
	font-family: var(--aleg2-font-latin, var(--aleg2-font-body, sans-serif));
	font-size: var(--aleg2-font-size-xs, .78rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: var(--aleg2-letter-spacing-wide, .12em);
	text-decoration: none;
	text-transform: uppercase;
	background: var(--aleg2-social-bg);
	border: 1px solid var(--aleg2-social-border);
	border-radius: var(--aleg2-social-radius);
	box-shadow: var(--aleg2-social-shadow);
	transition:
		color var(--aleg2-duration-fast, 180ms) var(--aleg2-ease-standard, ease),
		background var(--aleg2-duration-fast, 180ms) var(--aleg2-ease-standard, ease),
		border-color var(--aleg2-duration-fast, 180ms) var(--aleg2-ease-standard, ease),
		box-shadow var(--aleg2-duration-fast, 180ms) var(--aleg2-ease-standard, ease),
		transform var(--aleg2-duration-fast, 180ms) var(--aleg2-ease-standard, ease),
		opacity var(--aleg2-duration-fast, 180ms) var(--aleg2-ease-standard, ease);
}

.aleg2-social-links__link:hover {
	color: var(--aleg2-social-color-hover);
	text-decoration: none;
	background: var(--aleg2-social-bg-hover);
	border-color: var(--aleg2-social-border-hover);
	box-shadow: var(--aleg2-social-shadow-hover);
}

body.aleg2-buttons-hover-lift .aleg2-social-links__link:hover {
	transform: translateY(calc(var(--aleg2-button-hover-amount, 2px) * -1));
}

.aleg2-social-links__link:focus-visible {
	outline: none;
	box-shadow: var(--aleg2-focus-ring);
}

.aleg2-social-links__icon {
	display: inline-grid;
	place-items: center;
	width: var(--aleg2-social-icon-size);
	height: var(--aleg2-social-icon-size);
	color: currentColor;
	line-height: 0;
	flex: 0 0 auto;
}

.aleg2-social-links__icon svg {
	display: block;
	width: var(--aleg2-social-icon-size);
	height: var(--aleg2-social-icon-size);
	max-width: 100%;
	max-height: 100%;
	color: currentColor;
	fill: currentColor;
}

.aleg2-social-links__label {
	white-space: nowrap;
}

/**
 * FANBOXは横長ロゴのため、同じ正方形アイコンサイズだと小さく見えます。
 * ボタン枠は共通のまま、SVG本体だけ横方向へ少し広げます。
 */
.aleg2-social-links__item--fanbox .aleg2-social-links__icon {
	width: calc(var(--aleg2-social-icon-size) * 1.55);
}

.aleg2-social-links__item--fanbox .aleg2-social-links__icon svg {
	width: calc(var(--aleg2-social-icon-size) * 1.55);
}

/**
 * Skeb SVGは旧コード由来の内部クラスを持つため、すべて currentColor に寄せます。
 */
.aleg2-social-links__icon .skeb-fill-ring,
.aleg2-social-links__icon .skeb-fill-white {
	fill: currentColor;
}

.aleg2-social-links__icon .skeb-fill-none {
	fill: none;
	stroke: currentColor;
}

/* ------------------------------------------------------------
 * Hero context
 * ------------------------------------------------------------ */
.aleg2-social-links--hero {
	--aleg2-social-button-size: clamp(36px, 3vw, 44px);
	--aleg2-social-icon-size: clamp(15px, 1.32vw, 19px);
	--aleg2-social-gap: clamp(6px, .72vw, 10px);
	--aleg2-social-color: var(--aleg2-hero-muted, var(--aleg2-color-text-muted));
	--aleg2-social-color-hover: var(--aleg2-hero-heading, var(--aleg2-color-heading));
	--aleg2-social-bg: transparent;
	--aleg2-social-bg-hover: color-mix(in srgb, var(--aleg2-hero-accent, var(--aleg2-color-primary)) 18%, transparent);
	--aleg2-social-border: color-mix(in srgb, var(--aleg2-hero-heading, var(--aleg2-color-heading)) 34%, transparent);
	--aleg2-social-border-hover: var(--aleg2-hero-accent, var(--aleg2-color-primary));
	--aleg2-social-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--aleg2-hero-accent, var(--aleg2-color-primary)) 28%, transparent), var(--aleg2-shadow-soft);
}

.aleg2-social-links--hero .aleg2-social-links__list {
	flex-direction: column;
	flex-wrap: nowrap;
}

.aleg2-social-links--hero .aleg2-social-links__link {
	padding: 0;
	border-radius: 999px;
	backdrop-filter: blur(10px);
}

/* ------------------------------------------------------------
 * Footer context
 * ------------------------------------------------------------ */
.aleg2-social-links--footer {
	--aleg2-social-button-size: 42px;
	--aleg2-social-icon-size: 18px;
}

.aleg2-social-links--footer .aleg2-social-links__list {
	justify-content: flex-end;
}

@media (max-width: 760px) {
	.aleg2-social-links--footer .aleg2-social-links__list {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aleg2-social-links__link {
		transition: none;
	}
}