/*
 * ot-header.css — Cocoon ヘッダー・ナビゲーションのダーク化
 * 全ページに適用。Cocoon の ID/クラスセレクタに勝つため !important を使用。
 * ot-tokens.css の変数（--ot-*）に依存。
 */

/* ================================================================
 * 1. サイトヘッダー領域
 * ================================================================ */
#header-container,
#header-container-in,
#header {
  background: var(--ot-bg-deepest) !important;
  border-bottom: 1px solid var(--ot-border) !important;
  box-shadow: none !important;
}

/* ---- サイト名 グラデーション文字 ---- */
#site-name a,
#site-name .site-name-text,
.site-name-text {
  font-family: var(--ot-font-jp) !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  background: var(--ot-grad-main) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-decoration: none !important;
}

/* キャッチフレーズ */
#site-description,
.tagline {
  color: var(--ot-text-sub) !important;
  font: 500 12px var(--ot-font-jp) !important;
  margin-top: 4px !important;
}

/* ヘッダー内リンク全般のリセット */
#header a {
  color: var(--ot-text) !important;
  text-decoration: none !important;
}

/* ================================================================
 * 2. グローバルナビゲーション
 * ================================================================ */
#navi,
#navi-container,
#navi-in,
.navi-in {
  background: var(--ot-bg-base) !important;
  border-top: 1px solid var(--ot-border) !important;
  border-bottom: 1px solid var(--ot-border) !important;
  box-shadow: none !important;
}

/* ナビ内のリンク */
#navi .navi-menu-items li a,
.navi-in > ul > li > a,
#navi .menu-item > a,
#navi .page_item > a {
  color: var(--ot-text) !important;
  font: 500 15px var(--ot-font-jp) !important;
  padding: 14px 20px !important;
  display: block !important;
  transition: background .18s, color .18s !important;
  background: transparent !important;
  -webkit-text-fill-color: var(--ot-text) !important;
}

/* ホバー・アクティブ */
#navi .navi-menu-items li a:hover,
.navi-in > ul > li > a:hover,
#navi .menu-item > a:hover,
#navi .current-menu-item > a,
#navi .current_page_item > a,
#navi .current-menu-ancestor > a,
#navi .current_page_ancestor > a {
  background: var(--ot-grad-main) !important;
  color: var(--ot-ink) !important;
  -webkit-text-fill-color: var(--ot-ink) !important;
  box-shadow: 0 0 16px var(--ot-glow-cyan) !important;
}

/* ドロップダウン（サブメニュー） */
#navi .sub-menu,
.navi-in ul ul {
  background: var(--ot-bg-deepest) !important;
  border: 1px solid var(--ot-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
#navi .sub-menu li a,
.navi-in ul ul li a {
  border-bottom: 1px solid var(--ot-border-soft) !important;
}

/* ================================================================
 * 3. ハンバーガーメニュー（モバイル）
 * ================================================================ */
.menu-button,
#menu-button,
.navi-menu-button {
  background: transparent !important;
  color: var(--ot-text) !important;
}

/* モバイルメニュー展開時 */
.navi-toggle-input:checked ~ #navi,
.navi-toggle-open ~ #navi {
  background: var(--ot-bg-base) !important;
}

/* ================================================================
 * 4. ヘッダー下の境界線強調（デザインのシアンライン）
 * ================================================================ */
#navi::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--ot-grad-edge);
  opacity: .6;
}

/* ================================================================
 * 5. レスポンシブ調整
 * ================================================================ */
@media (max-width: 768px) {
  #site-name .site-name-text { font-size: 22px !important; }
  #navi .navi-menu-items li a,
  .navi-in > ul > li > a { padding: 12px 16px !important; font-size: 14px !important; }
}