/* ============================================================================
   Kadence Child FFF — assets/fff.css
   ----------------------------------------------------------------------------
   theme.json で表現できない細部のみをここに書く。
   設計トークン (色 / フォント / 余白) は theme.json 側を正とする。
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. ベース調整
   ---------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* リンクの下線は控えめゴールドに. */
a {
	text-underline-offset: 0.2em;
	text-decoration-color: var(--wp--preset--color--gold-faint);
	text-decoration-thickness: 1px;
	transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

a:hover {
	text-decoration-color: var(--wp--preset--color--gold);
}

/* ----------------------------------------------------------------------------
   2. 英字小見出し (eyebrow)
   ---------------------------------------------------------------------------- */

.fff-eyebrow {
	font-family: var(--wp--preset--font-family--en);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
}

.fff-eyebrow::before {
	content: "";
	display: inline-block;
	width: 2.5em;
	height: 1px;
	background: var(--wp--preset--color--gold);
}

/* ----------------------------------------------------------------------------
   3. ローマ数字セクション番号
   .fff-section-num に data-num="I" を付与すると、
   見出し左上にローマ数字を銘板的に表示する.
   ---------------------------------------------------------------------------- */

.fff-section-num {
	position: relative;
	padding-top: 2em;
}

.fff-section-num::before {
	content: attr(data-num);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--wp--preset--font-family--en);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--gold);
}

/* ----------------------------------------------------------------------------
   4. 細い金線がホバーで伸びるユーティリティ
   ---------------------------------------------------------------------------- */

.fff-line-grow {
	position: relative;
	display: inline-block;
}

.fff-line-grow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.2em;
	width: 0;
	height: 1px;
	background: var(--wp--preset--color--gold);
	transition: width 0.6s ease;
}

.fff-line-grow:hover::after,
.fff-line-grow:focus-visible::after {
	width: 100%;
}

/* ----------------------------------------------------------------------------
   5. 銘板的な見出し装飾 (微かな陰影)
   ---------------------------------------------------------------------------- */

.fff-relief {
	text-shadow:
		1px 1px 0 rgba(15, 15, 15, 0.04),
		-1px -1px 0 rgba(255, 255, 255, 0.6);
}

/* ----------------------------------------------------------------------------
   6. ボタン色を theme.json の ink/gold に強制
   Thorne インポートで入った Kadence Customizer のアクセント色 (オレンジ等) が
   ボタンに反映されるのを防ぐ。
   ---------------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link,
.wp-block-button__link.wp-element-button,
.button,
button.button,
.kb-button,
.wp-block-kadence-advancedbtn .kb-button {
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--paper) !important;
	border-radius: 0 !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--en) !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button__link.wp-element-button:hover,
.button:hover,
button.button:hover,
.kb-button:hover,
.wp-block-kadence-advancedbtn .kb-button:hover {
	background-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--paper) !important;
	border-color: var(--wp--preset--color--gold) !important;
}

/* アウトラインタイプ (Kadence の outline button) */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--paper) !important;
}

/* ----------------------------------------------------------------------------
   7. WooCommerce: カード乱用を抑止 (Phase 4 で本番反映)
   ---------------------------------------------------------------------------- */

.woocommerce ul.products li.product {
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	box-shadow: none;
	transition: border-color 0.3s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--wp--preset--color--gold);
}

.woocommerce .related.products,
.woocommerce .upsells.products {
	display: none; /* 関連商品の自動カード羅列を抑制 (Phase 4 で見直し) */
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--en);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background 0.3s ease;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--wp--preset--color--gold);
}

/* ----------------------------------------------------------------------------
   7. Elementor との併用期間 (Phase 2〜5) 用の打ち消し
   旧 Elementor ページでフォント等が衝突した場合の救済.
   ---------------------------------------------------------------------------- */

body.elementor-page :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--ja);
}

/* ----------------------------------------------------------------------------
   8. アクセシビリティ: フォーカスリング
   ---------------------------------------------------------------------------- */

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   9. Page Rail 微調整
   ・上端をヘッダー直下にぴったり寄せる
   ・フッターをレールより前面に配置（フッター部分は背景に隠れる）
   ---------------------------------------------------------------------------- */

/* Page Rail はデフォルトで非表示（モバイル・タブレット） */
.fff-page-rail {
	display: none !important;
}

/* 重ね順: 背景 → Page Rail → Header/Footer の順で前に来る.
   ヘッダー・フッターがレールを自然に覆う. */
#masthead.site-header,
header#masthead,
#colophon.site-footer,
footer#colophon {
	position: relative;
	z-index: 70; /* Page Rail (z-index:65) より上に */
}

/* レールの top 位置は JS (page-rail-position.js) でヘッダー高さに動的追従.
   ヘッダー背景色には触れない（Kadence の Customizer 設定をそのまま尊重）. */

/* ----------------------------------------------------------------------------
   Page Rail スリム化
   ・各バーの中の縦線 (::before) を非表示
   ・リンク幅を縮小、レール全体幅もスリムに
   ---------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	/* 各バー内の縦線を非表示 */
	.fff-page-rail .fff-page-rail__link::before {
		display: none !important;
	}

	/* リンク（バー）の幅を縮小 */
	.fff-page-rail .fff-page-rail__link {
		width: clamp(0.5rem, 0.65vw, 0.7rem) !important;
	}

	.fff-page-rail .fff-page-rail__link:is(:hover, :focus-visible, .is-active) {
		width: clamp(0.7rem, 0.9vw, 0.95rem) !important;
	}

	/* レール全体の幅も縮小 */
	.fff-page-rail {
		max-width: min(2rem, 3.5vw) !important;
	}

	/* ラベル位置を画面の上から 30vh の固定位置に.
	   motion.js が --fff-page-rail-marker-y を動的更新してスクロール追従させてるのを
	   !important で上書きして、スクロールしても位置が動かないようにする. */
	.fff-page-rail {
		--fff-page-rail-marker-y: 30vh !important;
	}
}

/* PC モニタ (1024px 以上) でのみ Page Rail を表示.
   レールは画面最上部から下端まで伸ばし、ヘッダー・フッターが上から覆う. */
@media (min-width: 1024px) {
	.fff-page-rail {
		display: flex !important;
		top: 0; /* 画面最上部から開始、ヘッダーが上から覆う */
	}
	.admin-bar .fff-page-rail {
		top: 32px; /* WP 管理バー (32px) の下から開始 */
	}
	#content,
	main#main,
	.site-content,
	.entry-content {
		padding-right: 3.5rem;
	}
}

/* ----------------------------------------------------------------------------
   10. reduced-motion 対応
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}