/**
 * css/layout/footer.css
 * ============================================================
 * A LEGEND 2：Site Footer
 * ============================================================
 *
 * 役割：
 * - template-parts/layout/site-footer.php の共通フッターを装飾します。
 *
 * 今回の改修：
 * - フッター背景の固定白グラデーションを廃止し、surface / background tokenへ接続します。
 * - フッター上部の固定水色グローを --aleg2-glow-primary へ接続します。
 * - SNSリンク背景の固定白半透明を --aleg2-glass-bg へ置換します。
 * - SNSリンクhover文字色の固定 #061018 を --aleg2-color-on-primary へ置換します。
 * - design.colors.text / muted / faint / primary / border がフッター全体へ反映されるようにします。
 * - design.radius.button / shadow.soft / buttons.hover_lift / hover_amount をSNSリンクへ反映します。
 * - 既存セレクタ・既存HTML構造・レスポンシブ挙動は維持します。
 */

.aleg2-site-footer {
	position: relative;
	padding-block: clamp(56px, 8vw, 96px);
	margin-top: var(--aleg2-space-16);
	overflow: hidden;
	color: var(--aleg2-color-text);
	background:
		linear-gradient(
			180deg,
			transparent,
			var(--aleg2-color-surface)
		);
	border-top: 1px solid var(--aleg2-color-border);
}

/**
 * フッター背景グロー。
 *
 * 旧コードでは rgba(142, 230, 255, 0.11) の固定水色でした。
 * 今回は --aleg2-glow-primary を参照し、design.colors.accent 側の世界観に追従させます。
 *
 * design.background.glow がOFFの場合は、body class側で非表示にします。
 */
.aleg2-site-footer::before {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 0;
	width: min(76vw, 920px);
	height: min(76vw, 920px);
	pointer-events: none;
	content: "";
	background:
		radial-gradient(
			circle,
			var(--aleg2-glow-primary),
			transparent 68%
		);
	transform: translate3d(-50%, -62%, 0);
}

/**
 * 背景グローOFF時。
 *
 * inc/core/utilities.php 側で design.background.glow がOFFの場合、
 * body に .aleg2-bg-glow が付かない設計です。
 * それに合わせてフッター固有のグローも停止します。
 */
body:not(.aleg2-bg-glow) .aleg2-site-footer::before {
	display: none;
}

.aleg2-site-footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--aleg2-space-8);
	align-items: end;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-xl));
	margin-inline: auto;
}

.aleg2-site-footer__brand {
	min-width: 0;
}

.aleg2-site-footer__name {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(1.45rem, 1rem + 2vw, 3rem);
	font-weight: 900;
	line-height: var(--aleg2-line-height-tight);
	letter-spacing: var(--aleg2-letter-spacing-tight);
	text-transform: uppercase;
}

.aleg2-site-footer__lead {
	max-width: 560px;
	margin-top: var(--aleg2-space-4);
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-sm);
	line-height: var(--aleg2-line-height-body);
}

.aleg2-site-footer__sns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	justify-content: flex-end;
	padding: 0;
	margin: 0;
	list-style: none;
}

.aleg2-site-footer__sns-item {
	margin: 0;
}

/**
 * SNSリンク。
 *
 * 旧コードでは rgba(255,255,255,0.05) の固定ガラス背景でした。
 * 今回は --aleg2-glass-bg / --aleg2-color-border / --aleg2-radius-button へ接続します。
 */
.aleg2-site-footer__sns-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0.55em 0.9em;
	color: var(--aleg2-color-text-muted);
	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);
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-site-footer__sns-link:hover {
	color: var(--aleg2-color-on-primary);
	text-decoration: none;
	background: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-soft);
}

/**
 * hover liftが有効な場合だけ、SNSリンクを少し持ち上げます。
 */
body.aleg2-buttons-hover-lift .aleg2-site-footer__sns-link:hover {
	transform: translateY(calc(var(--aleg2-button-hover-amount) * -1));
}

/**
 * キーボード操作時のフォーカス表示。
 */
.aleg2-site-footer__sns-link:focus-visible {
	outline: none;
	box-shadow: var(--aleg2-focus-ring);
}

.aleg2-site-footer__copy {
	grid-column: 1 / -1;
	margin: var(--aleg2-space-6) 0 0;
	color: var(--aleg2-color-text-faint);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 700;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-transform: uppercase;
}

@media (max-width: 760px) {
	.aleg2-site-footer__inner {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.aleg2-site-footer__sns {
		justify-content: flex-start;
	}
}
/* ------------------------------------------------------------
 * Social links block
 * ------------------------------------------------------------
 * SNS本体のボタンUIは css/components/social-links.css に集約します。
 * ここではフッター内の配置・横幅・整列だけを担当し、
 * brand.social.*_url の最大8個表示でも自然に折り返せるようにします。
 */
.aleg2-site-footer__social {
	justify-self: end;
	max-width: min(100%, 560px);
	text-align: right;
}

.aleg2-site-footer__social .aleg2-social-links__header {
	margin-left: auto;
}

.aleg2-site-footer__social .aleg2-social-links__description {
	max-width: 34em;
}

@media (max-width: 760px) {
	.aleg2-site-footer__social {
		justify-self: start;
		text-align: left;
	}

	.aleg2-site-footer__social .aleg2-social-links__header {
		margin-left: 0;
	}
}