/* ========================================================
   CHAOS CALL — ヘッダー / グローバルナビ 上書きスタイル
   SWELL本体(l-header等)は編集せず、SWELL2.0のクラス構造に対して
   上書きCSSのみで対応する。

   事前に管理画面側で以下を設定しておくこと：
   1. 設定 > 一般 > キャッチフレーズ に「GLOBAL GAMING NETWORK」
   2. 外観 > カスタマイズ > ヘッダー > キャッチフレーズ設定 >
      表示位置 を「ヘッダーロゴの近くに表示」に変更
   3. 外観 > カスタマイズ > ヘッダー > カスタムボタン設定 で
      テキスト「ACCESS」、リンク先、アイコンを設定（§ACCESSボタン）
   ======================================================== */

/* ---------- ヘッダー全体（通常時 / 追従時 共通） ---------- */

#header.l-header,
#fix_header.l-fixHeader {
    background-color: rgba(2, 7, 8, 0.92);
    border-bottom: var(--cc-border-width) solid rgba(0, 229, 232, 0.15);
    backdrop-filter: blur(6px);
}

#fix_header.l-fixHeader {
    border-bottom-color: rgba(0, 229, 232, 0.25);
}

/* ---------- ロゴ ----------
   SWELL標準では .l-header__logo 内で .c-headLogo と .c-catchphrase が
   横並び（中央揃え）になる。CHAOS CALLのデザインでは「ロゴの下に
   キャッチフレーズ」という縦並びにしたいため、ここで上書きする。 */

.l-header__logo,
.l-fixHeader__logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

.c-headLogo {
    background: none;
    margin-right: 0;
}

.c-headLogo__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cc-font-headline);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cc-white);
    text-decoration: none;
}

.cc-logo-icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    flex-shrink: 0;
}

/* ---------- キャッチフレーズ（ロゴ近くに表示、の設定が前提） ---------- */

.c-catchphrase {
    font-family: var(--cc-font-ui);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--cc-text-muted);
    text-transform: uppercase;
}

/* ---------- グローバルナビ ---------- */

.c-gnav .menu-item > a {
    font-family: var(--cc-font-ui);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cc-text-muted);
    transition: color var(--cc-transition-fast);
}

.c-gnav .menu-item > a:hover {
    color: var(--cc-white);
}

.c-gnav .menu-item.current-menu-item > a,
.c-gnav .menu-item.current_page_item > a {
    color: var(--cc-cyan);
    text-shadow: var(--cc-glow-cyan);
    position: relative;
}

.c-gnav .menu-item.current-menu-item > a::after,
.c-gnav .menu-item.current_page_item > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--cc-cyan);
    box-shadow: var(--cc-glow-cyan);
}

/* ---------- ACCESSボタン（ヘッダーのカスタムボタン機能） ---------- */

.l-header__customBtn a,
.l-header__customBtn button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: var(--cc-border-width) solid var(--cc-cyan);
    border-radius: var(--cc-border-radius);
    background: transparent;
    color: var(--cc-cyan);
    font-family: var(--cc-font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all var(--cc-transition-fast);
}

.l-header__customBtn a:hover,
.l-header__customBtn button:hover {
    background: var(--cc-cyan);
    color: var(--cc-bg);
    box-shadow: var(--cc-glow-cyan);
}

/* ---------- ACCESSボタン（代替：グローバルメニューに手動追加した場合） ----------
   外観 > カスタマイズ 側の「カスタムボタン」機能が見当たらない場合は、
   外観 > メニュー でメニュー項目を1つ追加し（例：リンク=ACCESSページURL、
   リンクテキスト=ACCESS）、その項目の「CSSクラス」欄に cc-access-btn と
   入力すると、同じ見た目のボタンとして表示される。
   （CSSクラス欄が出ない場合は、メニュー編集画面右上の「表示オプション」で
   「CSSクラス」にチェックを入れると出てくる） */

.c-gnav .menu-item.cc-access-btn > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px !important;
    border: var(--cc-border-width) solid var(--cc-cyan);
    border-radius: var(--cc-border-radius);
    color: var(--cc-cyan) !important;
    text-shadow: none !important;
}

.c-gnav .menu-item.cc-access-btn > a:hover {
    background: var(--cc-cyan);
    color: var(--cc-bg) !important;
    box-shadow: var(--cc-glow-cyan);
}

/* ---------- ハンバーガーメニュー（モバイル） ---------- */

.l-header__menuBtn {
    color: var(--cc-white);
}
.l-header__menuBtn span {
    background-color: var(--cc-white) !important;
}

/* ---------- モバイル用ドロワーナビ ---------- */

.l-header__spNav,
.p-spHeadMenu {
    background-color: var(--cc-bg) !important;
}

.p-spHeadMenu .menu-item > a {
    font-family: var(--cc-font-ui);
    letter-spacing: 1px;
    color: var(--cc-white);
    border-bottom: var(--cc-border-width) solid rgba(255, 255, 255, 0.08);
}

.p-spHeadMenu .menu-item.current-menu-item > a {
    color: var(--cc-cyan);
}