/* ==========================================================================
   Site Chrome — global header/footer tech-modern decoration
   ==========================================================================
   全ページ共通で SWELL のヘッダー / 固定ヘッダー / フッターをテック調に上書き。
   ページ固有のレイアウト（例: front-page の hero flush）は front-page.css 側で。
   ========================================================================== */

:root {
	--swch-white: #fff;
	--swch-transition: 0.2s ease;
	--swch-tech-navy: #0b1020;
	--swch-tech-navy-2: #111a3a;
	--swch-tech-violet: #4338ca;
	--swch-tech-fuchsia: #db2777;
	--swch-tech-cyan: #22d3ee;
}

/* ==========================================================================
   フォント（子テーマで一元管理）
   ==========================================================================
   SWELL は `body{font-family:var(--swl-font_family);font-weight:var(--swl-font_weight)}`
   と CSS 変数経由で適用し、その値は Customizer「サイト全体のフォント」
   (body_font_family) 連動で出力される。フォントの読込（class-theme.php の
   Noto Sans JP enqueue + preconnect）と font-family 指定を子テーマ側へ集約する
   ため、SWELL の変数を確実に上書きする（SWELL の `:root` より詳細度を上げる
   ため `:root:root`。読み込み順に依存せず勝てる）。

   ※ SWELL 側の Google Font 二重読込を止めるには、Customizer のフォントを
     「Noto Sans JP / Noto Serif」以外（游ゴシック等）に設定すること。
   ========================================================================== */

:root:root {
	--swl-font_family: "Noto Sans JP", sans-serif;
	--swl-font_weight: 400;
}

/* ==========================================================================
   Page min-height + background
   ==========================================================================
   ページ全体を最低 100vh 確保する。コンテンツが短いページでも
   フッターが画面上部に浮かないよう、#content 側を flex-grow で伸ばす。
   白すぎる背景を slate-50 寄りの off-white に落として読みやすさを優先。
   ========================================================================== */

body {
	background-color: #f8fafc;
}

/* ==========================================================================
   投稿ページ / アカウントページの tech 軸を落ち着いたダーク navy に上書き
   ==========================================================================
   `.swch-how-it-works` 同系の navy → indigo-800 グラデ。
   トップ（`.home` / `.swch-front`）以外の文脈では派手さを抑える。
   ========================================================================== */

body.single .l-mainContent,
body.single .p-articleHead,
body.single .p-articleMetas,
body.single .p-articleFoot,
.swch-account-page {
	--swch-tech-violet: #0b1020;
	--swch-tech-fuchsia: #312e81;
}

#body_wrap {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background-color: transparent;
}

/* 投稿本文ラッパーを白カード化して body bg から浮かせる */
body.single #main_content.l-mainContent.l-article {
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(55, 48, 163, 0.08);
	padding: 2em 1.75em;
	margin-top: 1.25em;
}

@media (max-width: 600px) {
	body.single #main_content.l-mainContent.l-article {
		padding: 1.5em 1em;
		border-radius: 10px;
	}
}

/* pjax 時は content/footer が data-barba container にラップされるので伝搬させる */
#body_wrap > [data-barba="container"] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

#content.l-content {
	flex: 1 0 auto;
	width: 100%;
}

/* ==========================================================================
   Header
   ========================================================================== */

.l-header {
	background: linear-gradient(180deg, rgba(11, 16, 32, 0.92) 0%, rgba(17, 26, 58, 0.85) 100%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
}

.l-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--swch-tech-violet) 30%, var(--swch-tech-fuchsia) 70%, transparent);
	opacity: 0.6;
	z-index: 2;
}

.l-header__inner,
.l-header__inner a,
.l-header__inner .c-iconBtn,
.l-header__logo a,
.l-header__logo .site-name-text {
	color: var(--swch-white);
}

.c-gnav a:hover {
	color: #c7d2fe;
}

.l-header__menuBtn,
.l-header__menuBtn .c-iconBtn__icon {
	color: var(--swch-white);
}

/* swch-header-account-menu の文字色も合わせる */
.swch-header-account-menu,
.swch-header-account-menu a,
.swch-header-account-menu .swch-header-account-menu__email {
	color: var(--swch-white);
}

.swch-header-account-menu a:hover {
	color: #c7d2fe;
}

/* ==========================================================================
   Fixed (sticky) Header
   ========================================================================== */

.l-fixHeader::before {
	background: linear-gradient(180deg, rgba(11, 16, 32, 0.92) 0%, rgba(17, 26, 58, 0.85) 100%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.l-fixHeader::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--swch-tech-violet) 30%, var(--swch-tech-fuchsia) 70%, transparent);
	opacity: 0.6;
	z-index: 2;
	pointer-events: none;
}

.l-fixHeader__inner,
.l-fixHeader__inner a,
.l-fixHeader__inner .c-iconBtn,
.l-fixHeader__logo a,
.l-fixHeader__logo .site-name-text {
	color: var(--swch-white);
}

.l-fixHeader .c-gnav a:hover {
	color: #c7d2fe;
}

/* ==========================================================================
   Footer
   ==========================================================================
   ヒーロー / How it works / CTA と同系統のダーク + グラデーションメッシュで
   サイト全体の色バランスを保つ
   ========================================================================== */

.l-footer {
	position: relative;
	background:
		radial-gradient(ellipse 60% 50% at 20% 0%, rgba(79, 70, 229, 0.18), transparent 60%),
		radial-gradient(ellipse 50% 50% at 85% 100%, rgba(236, 72, 153, 0.14), transparent 60%),
		linear-gradient(180deg, var(--swch-tech-navy-2) 0%, var(--swch-tech-navy) 100%);
	color: rgba(255, 255, 255, 0.78);
	overflow: hidden;
}

/* 上端のグラデーション細線（header と対になる） */
.l-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--swch-tech-violet) 30%, var(--swch-tech-fuchsia) 70%, transparent);
	opacity: 0.5;
	z-index: 2;
	pointer-events: none;
}

/* グリッドメッシュオーバーレイ */
.l-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

.l-footer__inner,
.l-footer__foot {
	position: relative;
	z-index: 1;
}

/* 見出し・本文・リンク色 */
.l-footer h2,
.l-footer h3,
.l-footer .wp-block-heading {
	color: var(--swch-white);
}

.l-footer a {
	color: rgba(255, 255, 255, 0.85);
	transition: color var(--swch-transition);
}

.l-footer a:hover {
	color: #c7d2fe;
}

/* before_footer ウィジェット（あれば） */
.w-beforeFooter {
	position: relative;
	background:
		radial-gradient(ellipse 60% 80% at 50% 0%, rgba(79, 70, 229, 0.25), transparent 60%),
		linear-gradient(180deg, var(--swch-tech-navy) 0%, var(--swch-tech-navy-2) 100%);
	color: rgba(255, 255, 255, 0.85);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.w-beforeFooter h2,
.w-beforeFooter h3 {
	color: var(--swch-white);
}

/* フッターメニュー — ミニマル
   親テーマ(SWELL)の縦罫線 / 3vw フォント / 13px などを打消し、
   薄いドット区切り + 控えめなトラッキングで端正な見た目に整える。 */
.l-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2px 0;
	padding: 1.5em 0 0.75em;
	border: 0;
	color: rgba(255, 255, 255, 0.6);
}

.l-footer__nav li {
	display: flex;
	align-items: center;
}

/* リンク間の薄いドット区切り */
.l-footer__nav li + li::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}

.l-footer__nav a {
	display: inline-block;
	color: rgba(255, 255, 255, 0.62);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
	padding: 0.35em 1em;
	border: 0;
	text-decoration: none;
	transition: color var(--swch-transition);
}

.l-footer__nav a:hover {
	color: var(--swch-white);
	text-decoration: none;
}

/* ≥600px の親テーマ規則（border / font-size:13px / padding:0 .75em）を打消し */
@media (min-width: 600px) {
	.l-footer__nav a {
		font-size: 12px;
		padding: 0.35em 1.1em;
		border-right: 0;
		border-left: 0;
	}

	.l-footer__nav li:first-child a {
		border-left: 0;
	}
}

/* コピーライト */
.l-footer__foot {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.copyright {
	color: rgba(255, 255, 255, 0.55);
}

/* SNS アイコンリスト */
.l-footer__foot .c-iconList a {
	color: rgba(255, 255, 255, 0.7);
}

.l-footer__foot .c-iconList a:hover {
	color: var(--swch-white);
}

/* フッター内のウィジェットボックス（背景白を上書き） */
.l-footer .p-fWidArea__title,
.l-footer .swiper-pagination-bullet {
	color: var(--swch-white);
}

/* ==========================================================================
   Breadcrumb (#breadcrumb) — tech-modern pill
   ==========================================================================
   SWELL 標準パンくず（単一投稿・アーカイブ等）をアカウントページの
   .swch-breadcrumb と同じピル形状に揃える。
   ========================================================================== */

/* 外枠を l-container 相当にして中のピルをコンテンツ左端に揃える */
#breadcrumb.p-breadcrumb,
#breadcrumb.p-breadcrumb.-bg-on {
	background: transparent !important;
	box-shadow: none !important;
	width: 100%;
	max-width: calc(var(--container_size, 0px) + var(--swl-pad_container, 0px) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: var(--swl-pad_container, 16px);
	padding-right: var(--swl-pad_container, 16px);
}

/* list（ol）をピルに */
#breadcrumb .p-breadcrumb__list.l-container {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	width: auto;
	max-width: 100%;
	padding: 5px 14px 5px 12px;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #64748b;
	background: linear-gradient(135deg, rgba(79, 70, 229, 0.06) 0%, rgba(236, 72, 153, 0.05) 100%);
	border: 1px solid rgba(79, 70, 229, 0.14);
	border-radius: 999px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	overflow: visible;
}

#breadcrumb .p-breadcrumb__item {
	color: inherit;
	gap: 6px;
}

/* chevron 区切りを swch-breadcrumb と同じ斜め矢印に差し替え */
#breadcrumb .p-breadcrumb__item::after {
	width: 5px !important;
	height: 5px !important;
	background: none !important;
	-webkit-clip-path: none !important;
	clip-path: none !important;
	border-top: 1.5px solid var(--swch-text-muted, #94a3b8);
	border-right: 1.5px solid var(--swch-text-muted, #94a3b8);
	transform: rotate(45deg);
	opacity: 0.75;
}

#breadcrumb .p-breadcrumb__item:last-child::after {
	content: none;
}

#breadcrumb .p-breadcrumb__text {
	color: inherit;
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* ホームアイコン */
#breadcrumb .p-breadcrumb__text .__home {
	color: var(--swch-tech-violet);
}

/* リンクのホバー: グラデーションテキスト */
#breadcrumb a.p-breadcrumb__text:hover {
	background: linear-gradient(90deg, var(--swch-tech-violet), var(--swch-tech-fuchsia));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

#breadcrumb a.p-breadcrumb__text:hover span {
	color: inherit;
	opacity: 1;
}

#breadcrumb a.p-breadcrumb__text:hover .__home {
	color: inherit;
}

/* 現在ページ: アカウント版と同じく通常テキスト扱い（SWELL の 0.8 opacity を解除） */
#breadcrumb .p-breadcrumb__item:last-child > span.p-breadcrumb__text,
#breadcrumb .p-breadcrumb__item:last-child span {
	opacity: 1;
}

/* SWELL は .single 投稿で現在ページタイトルを display:none しているが、
   プラグイン詳細等の CPT 詳細でもパンくずに現在ページ名を表示させる */
.single #breadcrumb .p-breadcrumb__item:last-child > span.p-breadcrumb__text {
	display: inline-flex;
}