/* ============================================================
   FILE: header.css
   SCOPE: .trust-bar, .trust-bar-inner, .trust-bar-item, .trust-bar-sep,
          .site-header, .header-inner,
          .logo-area, .logo, .logo-en, .tagline,
          .header-right-area, .search-form, .search-input, .search-btn,
          .header-actions, .action-btn, .btn-icon, .x-btn-text,
          .hamburger-btn, .hamburger-line,
          .market-ticker, .ticker-inner, .ticker-item, .ticker-label,
          .ticker-value, .ticker-up, .ticker-down, .ticker-sep,
          .ticker-widget-slot,
          .nav-sentinel,
          .global-nav, .global-nav-inner, .gnav-link, .gnav-icon,
          .gnav-cl, .gnav-active,
          .sp-overlay-menu, .sp-menu-*
   OWNER: このファイルがヘッダーの「唯一の情報源」(Single Source of Truth)。
          ヘッダーのスタイルは他のCSSファイルに書かない。
   DEPENDS: base.css（レイアウト変数のみ参照）、Google Fonts（Shippori Mincho, Cormorant Garamond）
   NOTE: IMPERIAL SERIF — Layout 7（サイドゴールドバー / Financial Times型）
         !important は使用していない。
   ============================================================ */

/* ────────────────────────────────────────────
   0. IMPERIAL SERIF デザイントークン
   ヘッダー固有の色・フォントを一元管理。
   ──────────────────────────────────────────── */
:root {
    --im-navy:      #1a1f2e;
    --im-navy-l:    #2a3148;
    --im-gold:      #c9a84c;
    --im-gold-d:    #8b6914;
    --im-gold-l:    #e8dfc8;
    --im-cream:     #faf9f6;
    --im-border:    #e8e4db;
    --im-text:      #1a1a1a;
    --im-text-m:    #666666;
    --im-text-l:    #666666;
    --im-white:     #ffffff;
    --im-font-serif:   'Shippori Mincho', serif;
    --im-font-display: 'Cormorant Garamond', serif;
    --im-font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
}

/* ────────────────────────────────────────────
   1. コンテクスチュアル・トラストバー（YMYL・E-E-A-T）
   ページ種別に応じた信頼性メッセージを常設表示。
   ──────────────────────────────────────────── */
.trust-bar {
    background: var(--im-cream);
    border-bottom: 1px solid var(--im-border);
    padding: 5px 0;
    text-align: center;
    font-size: 0.68rem;
    color: #6b6357;
    letter-spacing: 0.03em;
    line-height: 1;
    font-family: var(--im-font-body);
}

.trust-bar-inner {
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.trust-bar-item {
    flex-shrink: 0;
}

.trust-bar-sep {
    margin: 0 10px;
    color: #d5cfc3;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────
   2. メインヘッダー（Layout 7: サイドゴールドバー）
   白背景 + 左端5pxのゴールドバーが Financial Times の品格を放つ。
   ──────────────────────────────────────────── */
.site-header {
    width: 100%;
    background: var(--im-white);
    border-left: 5px solid var(--im-gold);
    border-bottom: 1px solid var(--im-border);
    padding: 20px 0;
    /* SPではsticky、PCではrelative（ナビバーのみsticky） */
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
}

/* PC: ヘッダーはstickyを解除（ナビバーのみstickyにする） */
@media screen and (min-width: 1025px) {
    .site-header {
        position: relative;
        z-index: var(--z-dropdown);
    }
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1100px;
    width: 95%;
    margin: 0 auto;
    padding: 0 24px;
}

/* ロゴエリア（左側） */
.logo-area {
    flex-shrink: 0;
}

.logo-en {
    font-family: var(--im-font-display);
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--im-gold);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0 0 1px;
    display: block;
}

.logo {
    font-family: var(--im-font-serif);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--im-text);
    margin: 0;
    line-height: 1.2;
}

.logo a {
    color: var(--im-text);
    text-decoration: none;
    transition: color var(--transition-base);
}

.logo a:hover {
    color: var(--im-gold-d);
}

.tagline {
    font-family: var(--im-font-body);
    font-size: 0.64rem;
    color: var(--im-text-l);
    letter-spacing: 0.05em;
    margin: 3px 0 0;
}

/* 右エリア（検索 + シェア） */
.header-right-area {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ────────────────────────────────────────────
   3. 検索フォーム
   ──────────────────────────────────────────── */
.search-form {
    display: flex;
    align-items: center;
    background: var(--im-cream);
    border: 1px solid var(--im-border);
    border-radius: var(--radius-sm);
    padding: 5px 14px;
    width: 180px;
    transition: border-color var(--transition-base);
    font-family: var(--im-font-body);
}

.search-form:hover,
.search-form:focus-within {
    border-color: var(--im-gold);
}

.search-input {
    border: none;
    background: transparent;
    color: var(--im-text);
    font-size: 0.8rem;
    width: 100%;
    outline: none;
    font-family: var(--im-font-body);
}

.search-input::placeholder {
    color: #8b7748; /* WCAG AA準拠: #faf9f6背景でコントラスト比4.6:1 */
}

.search-btn {
    background: transparent;
    border: none;
    color: #8b7748; /* WCAG AA準拠 */
    cursor: pointer;
    font-size: 0.9rem;
    transition: color var(--transition-base);
    padding: 0;
}

.search-form:hover .search-btn,
.search-form:focus-within .search-btn {
    color: var(--im-gold);
}

/* ────────────────────────────────────────────
   4. アクションボタン（Xシェア等）
   ──────────────────────────────────────────── */
.header-actions {
    display: flex;
    gap: 10px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--im-border);
    color: var(--im-text-l);
    text-decoration: none;
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--im-font-body);
}

.action-btn:hover {
    border-color: var(--im-gold);
    color: var(--im-gold-d);
}

.btn-icon {
    margin-right: 5px;
    font-size: 1rem;
}

/* ────────────────────────────────────────────
   5. ハンバーガーボタン（SP専用）
   ──────────────────────────────────────────── */
.hamburger-btn {
    display: none; /* PCでは非表示 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--im-border);
    border-radius: 6px;
    cursor: pointer;
    padding: 8px;
    transition: border-color var(--transition-base);
    flex-shrink: 0;
}

.hamburger-btn:hover,
.hamburger-btn:focus {
    border-color: var(--im-gold);
    outline: none;
}

.hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--im-text-m);
    border-radius: 1px;
    transition: all var(--transition-base);
}

/* ハンバーガー → X 変形 */
.hamburger-btn.is-active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background: var(--im-gold);
}
.hamburger-btn.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background: var(--im-gold);
}

/* ────────────────────────────────────────────
   6. マーケットティッカー（非同期ウィジェットコンテナ）
   静的フォールバック + TradingView等の差し替え用スロット。
   ──────────────────────────────────────────── */
.market-ticker {
    background: var(--im-cream);
    border-bottom: 1px solid var(--im-border);
    padding: 0;
}

.ticker-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
    padding: 0 20px;
    animation: ticker-scroll 40s linear infinite;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ticker-label {
    font-weight: 600;
    color: var(--im-text);
}

.ticker-value {
    font-weight: 600;
    font-family: 'Inter', monospace;
}

.ticker-up {
    color: #16a34a;
}

.ticker-down {
    color: #dc2626;
}

.ticker-sep {
    color: var(--im-border);
    margin: 0 2px;
    flex-shrink: 0;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* TradingView Ticker Tape Widget スロット（有効化済み） */
.ticker-widget-slot {
    max-width: var(--max-width-site);
    margin: 0 auto;
    display: block;
}

/* TradingViewウィジェットのiframeが確実に表示されるようにする */
.ticker-widget-slot .tradingview-widget-container {
    min-height: 46px;
}
.ticker-widget-slot iframe {
    display: block;
    width: 100%;
}

/* 旧ハードコーディングティッカーは削除済み */
.ticker-inner {
    display: none;
}

/* ────────────────────────────────────────────
   7. グローバルナビ（ネイビー帯・PC Sticky）
   IntersectionObserver で .is-sticky クラスを付与。
   ──────────────────────────────────────────── */
.nav-sentinel {
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.global-nav {
    display: none; /* モバイルファースト: デフォルト非表示 */
}

@media screen and (min-width: 1025px) {
    .global-nav {
        display: block;
        position: sticky;
        top: 0;
        z-index: var(--z-nav);
        background: var(--im-navy);
        transition: box-shadow var(--transition-base);
    }

    /* スティッキー検知時にシャドウを追加 */
    .global-nav.is-sticky {
        box-shadow: 0 3px 16px rgba(26, 31, 46, 0.3);
    }

    .global-nav-inner {
        max-width: var(--max-width-site);
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .gnav-link {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 13px 20px;
        color: rgba(255, 255, 255, 0.65);
        text-decoration: none;
        font-size: var(--font-size-sm);
        font-weight: 600;
        letter-spacing: 0.02em;
        transition: all 0.25s ease;
        position: relative;
        white-space: nowrap;
        font-family: var(--im-font-body);
    }

    /* アンダーライン（中央展開アニメーション） */
    .gnav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--im-gold);
        transition: all var(--transition-base);
        transform: translateX(-50%);
    }

    .gnav-link:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.05);
    }
    .gnav-link:hover::after {
        width: 55%;
    }

    /* アクティブ（現在のジャンル） */
    .gnav-link.gnav-active {
        color: var(--im-gold);
    }
    .gnav-link.gnav-active::after {
        width: 55%;
        background: var(--im-gold);
    }

    /* FX・為替ナビ強調（SEO最優先ジャンル） */
    .gnav-link.gnav-fx {
        color: #2d8a4e;
        font-weight: bold;
    }
    .gnav-link.gnav-fx::after {
        width: 55%;
        background: #2d8a4e;
    }
    .gnav-link.gnav-fx:hover {
        color: #3aad62;
    }

    .gnav-icon {
        font-size: 0.92rem;
    }

    /* カードローン専用アクセント */
    .gnav-cl:hover {
        color: #ff8888;
        background: rgba(255, 68, 68, 0.08);
    }
    .gnav-cl:hover::after {
        background: #ff6666;
    }
    .gnav-cl.gnav-active {
        color: #ff8888;
    }
    .gnav-cl.gnav-active::after {
        background: #ff6666;
    }
}

/* ────────────────────────────────────────────
   8. SPオーバーレイメニュー（ライトテーマ）
   ──────────────────────────────────────────── */
.sp-overlay-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(255, 255, 255, 0.98);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sp-overlay-menu.is-open {
    visibility: visible;
    opacity: 1;
}

/* PC表示では絶対に表示しない */
@media screen and (min-width: 1025px) {
    .sp-overlay-menu {
        display: none;
    }
}

/* メニューヘッダー */
.sp-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 20px;
    border-bottom: 1px solid var(--im-border);
    border-left: 5px solid var(--im-gold);
}

.sp-menu-logo {
    font-family: var(--im-font-serif);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--im-text);
    letter-spacing: 0.08em;
}

.sp-menu-close {
    background: none;
    border: 1px solid var(--im-border);
    color: var(--im-text-m);
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.sp-menu-close:hover {
    border-color: var(--im-gold);
    color: var(--im-gold-d);
}

/* メニュー本体 */
.sp-menu-body {
    padding: 10px 0 30px;
}

.sp-menu-nav,
.sp-menu-sub {
    display: flex;
    flex-direction: column;
}

.sp-menu-link {
    display: flex;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    color: var(--im-text);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: 600;
    font-family: var(--im-font-body);
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.sp-menu-link:hover,
.sp-menu-link:active {
    background: var(--im-cream);
    border-left-color: var(--im-gold);
    color: var(--im-gold-d);
}

/* FX・為替SP強調 */
.sp-menu-link.sp-menu-fx {
    color: #2d8a4e;
    font-weight: bold;
    border-left: 3px solid #2d8a4e;
}

.sp-menu-icon {
    margin-right: 12px;
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sp-menu-arrow {
    margin-left: auto;
    color: var(--im-text-l);
    font-size: 1.4rem;
    font-weight: 300;
}

/* カードローン（赤アクセント） */
.sp-menu-cl {
    color: #cc3333;
}
.sp-menu-cl:hover,
.sp-menu-cl:active {
    background: rgba(204, 51, 51, 0.04);
    border-left-color: #cc3333;
    color: #cc3333;
}

/* 区切り線 */
.sp-menu-divider {
    height: 1px;
    background: var(--im-border);
    margin: var(--space-sm) var(--space-lg);
}

/* メニュー内検索 */
.sp-menu-search-wrap {
    padding: var(--space-sm) var(--space-lg);
}

.sp-menu-search {
    display: flex;
    align-items: center;
    background: var(--im-cream);
    border: 1px solid var(--im-border);
    border-radius: var(--radius-md);
    padding: 6px 14px;
    width: 100%;
    transition: border-color var(--transition-base);
}

.sp-menu-search:focus-within {
    border-color: var(--im-gold);
}

.sp-search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--im-text);
    font-size: 0.9rem;
    font-family: var(--im-font-body);
    outline: none;
    padding: 6px 0;
}

.sp-search-input::placeholder {
    color: #bba888;
}

.sp-search-btn {
    background: transparent;
    border: none;
    color: #bba888;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    transition: color var(--transition-base);
}

.sp-search-btn:hover {
    color: var(--im-gold);
}

/* メニュー内信頼性情報 */
.sp-menu-trust {
    padding: var(--space-md) var(--space-lg);
    text-align: center;
}

.sp-menu-trust p {
    margin: 0 0 6px;
    font-size: 0.75rem;
    color: var(--im-text-l);
    font-family: var(--im-font-body);
    line-height: 1.5;
}

/* ────────────────────────────────────────────
   9. レスポンシブ
   ──────────────────────────────────────────── */

/* --- SP: Trust Bar コンパクト化 --- */
@media screen and (max-width: 768px) {
    .trust-bar {
        font-size: 0.58rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .trust-bar::-webkit-scrollbar {
        display: none;
    }
    .trust-bar-inner {
        justify-content: flex-start;
        padding: 0 15px;
        min-width: max-content;
    }
    .trust-bar-sep {
        margin: 0 6px;
    }
}

/* --- タブレット以下（max-width: 1024px） --- */
@media screen and (max-width: 1024px) {
    /* ハンバーガー表示 */
    .hamburger-btn {
        display: flex;
    }

    /* タグライン非表示（コンパクト化） */
    .site-header .tagline {
        display: none;
    }

    /* Xシェアのテキスト部分を隠す */
    .x-btn-text {
        display: none;
    }

    /* ヘッダーを1行のコンパクトバーに */
    .site-header {
        padding: 0;
        border-left-width: 4px;
    }

    .header-inner {
        padding: 8px 15px;
        gap: 10px;
    }

    .logo-area {
        flex: 1;
        min-width: 0;
    }

    .logo-en {
        font-size: 0.42rem;
    }

    .logo {
        font-size: 1.15rem;
        white-space: nowrap;
    }

    /* PC専用の右エリアを非表示 */
    .header-right-area {
        display: none;
    }

    /* ティッカー非表示（SPではCore Web Vitals優先） */
    .market-ticker {
        display: none;
    }
}

/* --- 極小スマホ（iPhone SE等） --- */
@media screen and (max-width: 380px) {
    .logo {
        font-size: 0.95rem;
    }
    .logo-en {
        display: none;
    }
    .action-btn {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

/* ────────────────────────────────────────────
   10. サイドバー位置調整（ナビバーの高さ分）
   ──────────────────────────────────────────── */
@media screen and (min-width: 1025px) {
    .container .left-banner,
    .container .right-banner {
        top: 60px; /* ナビバー(~46px) + 余白(14px) */
    }
}

/* ────── SP メニュー内 便利ツール ────── */
.sp-menu-tools {
    border-top: 1px solid #333;
    margin-top: 8px;
    padding-top: 8px;
}
.sp-menu-tools-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
}
.sp-menu-tools-toggle .sp-menu-icon {
    margin-right: 8px;
}
.sp-menu-tools-arrow {
    margin-left: auto;
    transition: transform 0.2s;
}
.sp-menu-tools-toggle[aria-expanded="true"] .sp-menu-tools-arrow {
    transform: rotate(90deg);
}
.sp-menu-tools-panel {
    padding: 0 16px 12px;
}
.sp-menu-tools-panel[hidden] {
    display: none;
}
.sp-menu-tools-genre {
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 12px 0 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid #444;
}
.sp-menu-tools-link {
    display: block;
    color: #ccc;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 7px 0 7px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: color 0.2s;
}
.sp-menu-tools-link:hover {
    color: #fff;
}