/* =========================================================
 * header.css
 *
 * 注意: Cocoonのヘッダーマークアップ（クラス名）はバージョンによって
 * 差異があるため、以下は「一般的なCocoon構成」を前提としたベストエフォートの
 * スタイルです。実際の環境に適用する際は、ブラウザの検証ツールで
 * 実際のクラス名を確認し、必要に応じてセレクタを調整してください
 * （README.mdに調整手順を記載しています）。
 *
 * 方針: header.php 自体は上書きせず、CSSでの再スタイリングに留めることで
 * Cocoonのアップデート耐性を確保する。
 * ========================================================= */

#logo,
#header-container,
.header-container,
#navi,
.navi {
	background-color: var(--tks-surface-white) !important;
	border-bottom: 1px solid var(--tks-border-subtle);
}

#logo a,
.site-name a,
.site-title a {
	font-family: var(--tks-font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--tks-on-surface) !important;
	letter-spacing: -0.01em;
}

/* グローバルナビのリンク：文字ベース、控えめなホバー */
.navi a,
#navi a,
.global-menu-list a {
	font-family: var(--tks-font-heading);
	font-size: 14px;
	font-weight: 500;
	color: var(--tks-on-surface-variant) !important;
	letter-spacing: 0.02em;
}
.navi a:hover,
#navi a:hover {
	color: var(--tks-primary) !important;
}

/* アクティブなナビゲーション項目にアクセントカラー */
.navi .current-menu-item > a,
.navi .current-cat > a {
	color: var(--tks-primary) !important;
}

/* 検索アイコン */
#search-drawer-check + label,
.search-box,
.header-search {
	color: var(--tks-on-surface-variant);
}