/**
 * css/components/share-button.css
 * ============================================================
 * A LEGEND 2：Share Button
 * ============================================================
 *
 * 役割：
 * - template-parts/components/share-x.php のXシェアボタンを装飾します。
 *
 * 今回の改修：
 * - ボタン背景の固定白半透明を --aleg2-glass-bg / --aleg2-glass-bg-strong へ置換します。
 * - hover装飾の固定水色・紫グラデーションを
 *   --aleg2-glow-primary / --aleg2-glow-secondary へ置換します。
 * - 角丸を design.radius.button 由来の --aleg2-radius-button へ接続します。
 * - hover移動量を design.buttons.hover_amount 由来の --aleg2-button-hover-amount へ接続します。
 * - design.buttons.hover_lift がONの時だけボタンを持ち上げます。
 * - 英字装飾扱いとして --aleg2-font-latin を使用します。
 * - キーボード操作用の focus-visible を追加します。
 * - 既存セレクタ・既存HTML構造・レスポンシブ挙動は維持します。
 */

/* ------------------------------------------------------------
 * X share button
 * ------------------------------------------------------------
 *
 * Xシェア用の共通ボタンです。
 *
 * 注意：
 * - template-parts/components/share-x.php から出力される想定です。
 * - 詳細ページ本文下では .aleg2-single-share に包まれて配置されます。
 * - 背景は固定rgbaではなくglass tokenへ寄せ、ライト/ダーク両方に対応します。
 */
.aleg2-share-x {
	position: relative;
	display: inline-flex;
	gap: var(--aleg2-space-2);
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0.72em 1.1em;
	overflow: hidden;
	color: var(--aleg2-color-text);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	line-height: 1;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-decoration: none;
	text-transform: uppercase;
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-button);
	backdrop-filter: var(--aleg2-backdrop-glass);
	transition:
		color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		background var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * hover時の装飾レイヤー。
 *
 * 旧コードでは rgba(142,230,255,0.18) / rgba(182,140,255,0.16) の
 * 固定グラデーションでした。
 * 今回は --aleg2-glow-primary / --aleg2-glow-secondary を使い、
 * デザイン設定のアクセント色へ追従させます。
 */
.aleg2-share-x::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	content: "";
	background:
		linear-gradient(
			135deg,
			var(--aleg2-glow-primary),
			var(--aleg2-glow-secondary)
		);
	opacity: 0;
	transition: opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * hover状態。
 *
 * 旧コードでは常に translateY(-2px) でした。
 * 今回は通常hoverでは色・背景・枠線のみ変更し、
 * 移動は body.aleg2-buttons-hover-lift がある時だけ行います。
 */
.aleg2-share-x:hover {
	color: var(--aleg2-color-heading);
	text-decoration: none;
	background: var(--aleg2-glass-bg-strong);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-soft);
}

.aleg2-share-x:hover::before {
	opacity: 1;
}

/**
 * hover liftが有効な場合だけ、Xシェアボタンを少し持ち上げます。
 */
body.aleg2-buttons-hover-lift .aleg2-share-x:hover {
	transform: translate3d(0, calc(var(--aleg2-button-hover-amount) * -1), 0);
}

/**
 * キーボード操作時のフォーカス表示。
 */
.aleg2-share-x:focus-visible {
	outline: none;
	border-color: var(--aleg2-color-primary);
	box-shadow:
		var(--aleg2-shadow-soft),
		var(--aleg2-focus-ring);
}

/**
 * 背景グローOFF時。
 *
 * design.background.glow がOFFの場合、bodyに .aleg2-bg-glow が付かない設計です。
 * それに合わせて、シェアボタン内の発光レイヤーも抑制します。
 */
body:not(.aleg2-bg-glow) .aleg2-share-x::before {
	background: var(--aleg2-color-surface-strong);
}

/**
 * アイコン・ラベル。
 *
 * 装飾レイヤーより前面に出します。
 */
.aleg2-share-x__icon,
.aleg2-share-x__label {
	position: relative;
	z-index: 1;
}

.aleg2-share-x__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	font-size: 1.1em;
}

/* ------------------------------------------------------------
 * Single page share area
 * ------------------------------------------------------------
 *
 * 詳細ページ本文下のシェアボタン配置エリアです。
 *
 * 注意：
 * - 幅は --aleg2-container-sm を使い、本文幅と揃えます。
 * - 左右余白は --aleg2-container-padding を使い、design.layout.page_side に追従します。
 * - PCでは右寄せ、SPでは全幅ボタンにします。
 */
.aleg2-single-share {
	display: flex;
	justify-content: flex-end;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-sm));
	margin: var(--aleg2-space-10) auto 0;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存のスマホ調整を維持します。
 */
@media (max-width: 640px) {
	.aleg2-single-share {
		justify-content: stretch;
	}

	.aleg2-share-x {
		width: 100%;
	}
}