/**
 * 学習コース体系化計画 v2 Phase 2.2: ナビゲーションスタイル
 *
 * 4専門家統合設計 v3 準拠:
 * - WCAG 2.1 AA 準拠（コントラスト・ARIA・focus-visible）
 * - prefers-reduced-motion 対応
 * - tabular-nums で数字桁揃え
 * - 「Hub/Spoke」業界用語は全て「総合ガイド/個別解説」日本語化（HTML 側）
 * - SVG/絵文字は HTML 側で SVG 化推奨（暫定で絵文字使用）
 *
 * 命名規則: om-course-nav-* / om-step-card-* / om-course-progress-*
 *
 * 適用先: 学習コース所属記事のみ（条件付き enqueue・my-snow-monkey.php 側で制御）
 */

/* =====================================================
 * 学習コース ナビゲーション [om_learn_nav]
 * ===================================================== */

.om-course-nav {
	margin: 3rem 0 2rem;
	padding: 1.5rem 1.75rem;
	background: linear-gradient(135deg, #F4F8FB 0%, #E8ECF0 100%);
	border: 1px solid #DFE2E6;
	border-radius: 10px;
	font-family: 'Noto Sans JP', sans-serif;
}

/* コース全体への戻りリンク（最上部・主要動線） */
.om-course-nav__hub {
	margin-bottom: 1.25rem;
}

.om-course-nav__hub-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	background: #FDF8E9;
	border: 1.5px solid #B8860B;
	border-radius: 8px;
	color: #0E2F44;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.om-course-nav__hub-link:hover {
	background: #FAEFCB;
	border-color: #A07208;
	transform: translateY(-1px);
}

.om-course-nav__hub-icon {
	font-size: 1.1em;
}

/* 前/次のSTEP（コンテナ幅に応じて自動カラム切替）
 * - 280px x 2 + gap が入る幅（約 575px）以上で2カラム
 * - それ未満で自動的に1カラム
 * - Snow Monkey の content-width / sidebar 構成に依存しない */
.om-course-nav__siblings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.om-course-nav__prev,
.om-course-nav__next {
	display: flex;
	flex-direction: column;
	min-height: 48px;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 1.5px solid #1A5276;
	border-radius: 8px;
	color: #2C2C2A;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
	overflow: hidden;
}

.om-course-nav__prev:hover,
.om-course-nav__next:hover {
	background: #F4F8FB;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(26,82,118,0.10);
}

.om-course-nav__prev {
	align-items: flex-start;
}

.om-course-nav__next {
	align-items: flex-end;
	text-align: right;
}

.om-course-nav__prev--disabled,
.om-course-nav__next--disabled {
	background: #f5f5f5;
	border-color: #DFE2E6;
	color: #8b8b8b;
	cursor: not-allowed;
}

.om-course-nav__direction {
	font-size: 0.75rem;
	font-weight: 600;
	color: #5A6270;
	margin-bottom: 0.15rem;
}

.om-course-nav__title {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: #1A5276;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 読了マークボタン（明示式・自動既読禁止） */
.om-course-nav__mark-read-wrap {
	text-align: center;
	margin-bottom: 1rem;
}

.om-mark-read {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0.5rem 1.25rem;
	background: #fff;
	border: 1.5px solid #5A6270;
	border-radius: 999px;
	color: #5A6270;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.om-mark-read:hover {
	background: #F4F8FB;
	border-color: #1A5276;
	color: #1A5276;
}

.om-mark-read--done {
	background: #B8860B;
	border-color: #B8860B;
	color: #fff;
}

.om-mark-read--done:hover {
	background: #A07208;
	border-color: #A07208;
	color: #fff;
}

.om-mark-read__note {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.7rem;
	color: #8b8b8b;
}

/* メタ情報（コース名表示） */
.om-course-nav__meta {
	text-align: center;
	padding-top: 0.75rem;
	border-top: 1px dashed #DFE2E6;
	color: #5A6270;
}

.om-course-nav__meta small {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

/* =====================================================
 * サービスカード om-cross-grid--services（学習コース記事末尾用）
 *
 * lp/omotenashi-lp-design-system.css の `.om-lp .om-cross-grid` は
 * .om-lp クラス制約のため業種LP外では効かない。学習コース記事＋ハブで
 * 同等の5列グリッド表示を実現する独立スタイル。
 * ===================================================== */

.om-cross-grid--services .om-cross-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.om-cross-grid--services .om-cross-grid__card {
	display: block;
	padding: 1.2rem;
	background: #fff;
	border: 1.5px solid #DFE2E6;
	border-radius: 8px;
	text-decoration: none;
	color: #2C2C2A;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.om-cross-grid--services .om-cross-grid__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(26, 82, 118, 0.10);
	border-color: #1A5276;
}

/* H3 装飾を完全リセット（site-base.css の H3 装飾を回避） */
.om-cross-grid--services .om-cross-grid__card__title,
.om-cross-grid--services h3.om-cross-grid__card__title {
	display: block;
	margin: 0 0 0.5rem;
	padding: 0;
	font-family: 'Shippori Mincho', serif;
	font-size: 1rem;
	font-weight: 600;
	color: #1A5276;
	line-height: 1.4;
	background: none;
	border: none;
}

.om-cross-grid--services .om-cross-grid__card__title::before,
.om-cross-grid--services .om-cross-grid__card__title::after,
.om-cross-grid--services h3.om-cross-grid__card__title::before,
.om-cross-grid--services h3.om-cross-grid__card__title::after {
	content: none !important;
	display: none !important;
}

.om-cross-grid--services .om-cross-grid__card p {
	font-size: 0.85rem;
	color: #5A6270;
	margin: 0;
	line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.om-cross-grid--services .om-cross-grid__card,
	.om-cross-grid--services .om-cross-grid__card:hover {
		transition: none;
		transform: none;
	}
}

/* =====================================================
 * 既読 STEP カード視覚マーク（ハブページ用）
 * ===================================================== */

/* 既読カード: 金色チェック + やや薄い表示で「読了済み」を示す */
.om-step-card--read {
	position: relative;
	opacity: 0.85;
}

.om-step-card--read::after {
	content: "✓";
	position: absolute;
	top: -10px;
	right: -10px;
	width: 28px;
	height: 28px;
	background: #B8860B;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(184, 134, 11, 0.4);
	border: 2px solid #fff;
	z-index: 2;
}

/* インライン style="..." カードでも適用されるよう .om-step-card--read 単体でも有効に */
a.om-step-card--read,
.om-step-card[data-om-step-post-id].om-step-card--read {
	position: relative;
}

/* hover 時は完全不透明に戻す（読了済みでも再読しやすく） */
.om-step-card--read:hover {
	opacity: 1;
}

/* prefers-reduced-motion: 既読マーク自体は表示維持 */
@media (prefers-reduced-motion: reduce) {
	.om-step-card--read,
	.om-step-card--read:hover {
		transition: none;
	}
}

/* =====================================================
 * 進捗バー [om_learn_progress] （ハブページ用）
 * ===================================================== */

.om-course-progress {
	margin: 1.5rem 0 2.5rem;
	padding: 1.5rem 1.75rem;
	background: linear-gradient(135deg, #F4F8FB 0%, #E8ECF0 100%);
	border: 1px solid #DFE2E6;
	border-radius: 10px;
	font-family: 'Noto Sans JP', sans-serif;
}

/* セクションラベル（<p>要素・装飾不要） */
.om-course-progress__heading {
	display: block;
	margin: 0 0 0.75rem;
	padding: 0;
	font-family: 'Shippori Mincho', serif;
	font-size: 1.25rem;
	font-weight: 600;
	color: #1A5276;
	line-height: 1.4;
	background: none;
	border: none;
}

.om-course-progress__count {
	margin: 0 0 0.85rem;
	font-size: 1rem;
	color: #2C2C2A;
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.om-course-progress__count [data-om-learn-progress-text] {
	color: #1A5276;
	font-size: 1.1em;
}

/* プログレスバー本体 */
.om-course-progress__bar {
	height: 12px;
	background: #fff;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 1rem;
	border: 1px solid #DFE2E6;
}

.om-course-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, #1A5276 0%, #B8860B 100%);
	transition: width .5s ease;
	border-radius: 999px;
}

/* LEVEL 階段ドット表示 */
.om-course-progress__levels {
	list-style: none !important;
	margin: 0 0 1rem !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.om-course-progress__level {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	padding: 0 !important;
}

.om-course-progress__level::before {
	content: none !important;
}

.om-course-progress__level-name {
	font-weight: 700;
	color: #1A5276;
	min-width: 2.5em;
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.om-course-progress__level-dots {
	display: inline-flex;
	gap: 0.2em;
}

.om-course-progress__dot {
	display: inline-block;
	font-size: 1.1em;
	line-height: 1;
	color: #98A1AA;  /* 銀鼠背景でも視認できる中濃度グレー */
	transition: color .15s ease;
	font-weight: 700;
}

.om-course-progress__dot--read {
	color: #B8860B;  /* 金色（既読） */
}

.om-course-progress__dot--unread {
	color: #98A1AA;  /* 中濃度グレー（未読・背景と区別可能） */
}

/* リセットボタン */
.om-course-progress__actions {
	text-align: right;
	margin-top: 0.5rem;
}

.om-course-progress__reset {
	background: none;
	border: none;
	color: #5A6270;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 0.8rem;
	cursor: pointer;
	text-decoration: underline;
	padding: 4px 8px;
	transition: color .15s ease;
}

.om-course-progress__reset:hover {
	color: #D0353A;
}

.om-course-progress__note {
	margin: 0.5rem 0 0;
	color: #8b8b8b;
}

.om-course-progress__note small {
	font-size: 0.75rem;
}

/* =====================================================
 * モバイル対応（768px 以下）
 * カラム切替は auto-fit に委任（main grid 修正済）
 * ここはモバイル専用の見た目調整のみ
 * ===================================================== */
@media (max-width: 768px) {
	.om-course-nav {
		padding: 1.25rem 1rem;
	}

	.om-course-nav__hub-link {
		font-size: 0.95rem;
		padding: 0.65rem 0.85rem;
	}

	.om-course-nav__siblings {
		gap: 0.5rem;
	}

	/* 1カラム時に next も左寄せ（auto-fit が 1カラムに切り替わった状態） */
	.om-course-nav__next {
		align-items: flex-start;
		text-align: left;
	}

	.om-course-nav__title {
		-webkit-line-clamp: 3;
	}
}

/* =====================================================
 * アクセシビリティ
 * ===================================================== */

/* キーボードフォーカス（CTA 真朱を流用） */
.om-course-nav a:focus-visible {
	outline: 3px solid #D0353A;
	outline-offset: 2px;
	border-radius: 8px;
}

/* prefers-reduced-motion 対応（必須・WCAG 2.3.3） */
@media (prefers-reduced-motion: reduce) {
	.om-course-nav__hub-link,
	.om-course-nav__prev,
	.om-course-nav__next {
		transition: none;
	}

	.om-course-nav__hub-link:hover,
	.om-course-nav__prev:hover,
	.om-course-nav__next:hover {
		transform: none;
	}
}