/**
 * css/components/single-header.css
 * ============================================================
 * A LEGEND 2：Single Header
 * ============================================================
 *
 * 役割：
 * - template-parts/components/single-header.php の詳細ページ見出しを装飾します。
 *
 * 今回の改修：
 * - 固定紫グローを --aleg2-glow-secondary へ置換します。
 * - 見出し色を design.colors.heading 由来の --aleg2-color-heading へ接続します。
 * - 見出しフォントを design.fonts.heading 由来の --aleg2-font-heading へ接続します。
 * - eyebrow は英字装飾扱いとして --aleg2-font-latin / --aleg2-color-primary へ接続します。
 * - 横幅・左右余白は design.layout.* 由来の container token を使い続けます。
 * - 既存セレクタ・既存HTML構造・レスポンシブ挙動は維持します。
 *
 * 追加の今回改修：
 * - 固定ヘッダーからの退避余白は .aleg2-single-top へ移しました。
 * - このファイルは詳細ヘッダー自体の幅、文字組み、下余白だけを担当します。
 */

/* ------------------------------------------------------------
 * Single header wrapper
 * ------------------------------------------------------------
 *
 * 投稿詳細・固定ページ詳細などの上部見出し領域です。
 *
 * 注意：
 * - 幅は --aleg2-container-sm を使い、本文導入部として読みやすい幅にします。
 * - 左右余白は --aleg2-container-padding を使い、design.layout.page_side に追従します。
 * - 固定ヘッダーからの退避は css/pages/single.css の .aleg2-single-top が担当します。
 * - ここではパンくず下からタイトルブロックまでの余白と、見出し自体の下余白だけを管理します。
 */
.aleg2-single-header {
	position: relative;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-sm));
	padding-top: 0;
	padding-bottom: clamp(36px, 6vw, 72px);
	margin-inline: auto;
}

/**
 * 背景グロー。
 *
 * 旧コードでは rgba(182,140,255,0.16) の固定紫でした。
 * 今回は --aleg2-glow-secondary を参照し、
 * design.colors.accent_2 / secondary 系の設定へ自然に追従させます。
 */
.aleg2-single-header::before {
	position: absolute;
	top: 46%;
	right: 0;
	z-index: -1;
	width: min(46vw, 560px);
	height: min(46vw, 560px);
	pointer-events: none;
	content: "";
	background:
		radial-gradient(
			circle,
			var(--aleg2-glow-secondary),
			transparent 66%
		);
	transform: translate3d(44%, -50%, 0);
}

/**
 * 背景グローOFF時。
 *
 * design.background.glow がOFFの場合、bodyに .aleg2-bg-glow が付かない設計です。
 * それに合わせて詳細ページ見出し固有のグローも停止します。
 */
body:not(.aleg2-bg-glow) .aleg2-single-header::before {
	display: none;
}

/* ------------------------------------------------------------
 * Eyebrow
 * ------------------------------------------------------------
 *
 * 投稿タイプ名やカテゴリー名などを示す小さなラベルです。
 *
 * 英字や短い識別子として使われることが多いため、
 * design.fonts.latin 由来の --aleg2-font-latin を使います。
 */
.aleg2-single-header__eyebrow {
	display: inline-flex;
	gap: var(--aleg2-space-2);
	align-items: center;
	margin: 0 0 var(--aleg2-space-4);
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	letter-spacing: var(--aleg2-letter-spacing-wider);
	text-transform: uppercase;
}

/**
 * eyebrow 左側のライン。
 *
 * currentColor を使い、primary色に自動追従させます。
 */
.aleg2-single-header__eyebrow::before {
	display: inline-block;
	width: 38px;
	height: 1px;
	background: currentColor;
	content: "";
	opacity: 0.75;
}

/* ------------------------------------------------------------
 * Title
 * ------------------------------------------------------------
 *
 * 詳細ページの主見出しです。
 *
 * 既存の大きな可変サイズは維持しつつ、
 * 色・フォント・行高・字間をDesign Tokenへ接続します。
 */
.aleg2-single-header__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(2rem, 1.3rem + 4vw, 5.4rem);
	font-weight: 900;
	line-height: var(--aleg2-line-height-tight);
	letter-spacing: var(--aleg2-letter-heading);
}

/**
 * タイトル内リンク。
 *
 * 何らかの拡張でタイトル内にリンクが入る場合でも、
 * 見出しとして自然に見えるようにします。
 */
.aleg2-single-header__title a {
	color: inherit;
	text-decoration: none;
}

.aleg2-single-header__title a:hover {
	color: var(--aleg2-color-link-hover);
	text-decoration: none;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存のスマホ調整を維持します。
 */
@media (max-width: 640px) {
	.aleg2-single-header {
		padding-top: 0;
		padding-bottom: var(--aleg2-space-8);
	}

	.aleg2-single-header__eyebrow::before {
		width: 28px;
	}
}