/* ============================
   WPML 言語スイッチャー
   ============================ */
.ic-lang-switcher {
    /* 親テーマのグローバルメニュー(ul.menu)はヘッダー全幅・position:relativeで、
       static配置のスイッチャーより前面に描画されクリックを奪う。relative+z-indexで
       スイッチャーを前面に出す（logo=200/floating=10000より背面、menu/sub-menu=100より前面）。 */
    position: relative;
    z-index: 101;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
}

.ic-lang-switcher__item {
    margin: 0;
    padding: 0;
}

.ic-lang-switcher__item a {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    color: #555;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.ic-lang-switcher__item a:hover,
.ic-lang-switcher__item a:focus-visible {
    color: #059de5;
    border-color: #059de5;
}

.ic-lang-switcher__item.is-active a {
    color: #fff;
    background-color: #059de5;
    border-color: #059de5;
    pointer-events: none;
}

/* モバイル: タップターゲットを広め、横並びは維持 */
@media (max-width: 768px) {
    .ic-lang-switcher {
        gap: 0.375rem;
        font-size: 0.8125rem;
    }

    .ic-lang-switcher__item a {
        padding: 0.375rem 0.5rem;
    }
}

/* ============================
   言語切替トップバー（グローバルヘッダーの上）
   ============================
   スイッチャーは #header 内ではなく、#header の直前に出力する #ic-top-bar に入る。
   #ic-top-bar は通常フロー（スクロールでページと共に隠れる）。 */

:root {
    /* トップバー高さ。#header のオフセット量と単一ソースで同期させる。 */
    --ic-topbar-h: 40px;
}

/* 親テーマ #header と同様に最上部へ absolute で浮かせる(通常フローでは body の
   padding-top=ヘッダー確保領域の「下」に入り、absolute ヘッダーと重なるため)。
   absolute なのでスクロールでページと共に隠れる(=採用したUX)。 */
#ic-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--ic-topbar-h);
    z-index: 101; /* 親テーマ #header(z:100)より前面 */
    background: #f2f6fa;
    border-bottom: 1px solid #e3e9ef;
    box-sizing: border-box;
}
body.admin-bar #ic-top-bar {
    top: 32px; /* WP管理バー分(ログイン時のみ) */
}

#ic-top-bar .ic-top-bar__inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    padding: 0 30px;
    box-sizing: border-box;
}

/* バーが relative/z-index を担うため、内側スイッチャーは中立化 */
#ic-top-bar .ic-lang-switcher {
    position: static;
    z-index: auto;
}

/* 親テーマ #header(position:absolute; top:0) をトップバーの分だけ下げ、バーの下に並べる。
   - トップバーが出力される時のみ（body.ic-has-top-bar）適用。WPML未有効でバーが無い時に
     ヘッダーが浮く空隙を防ぐ。
   - open_header/close_header(スクロール時 position:fixed; top:0 !important) は、その時点で
     バーが画面外にあるため変更しない。 */
body.ic-has-top-bar #header {
    top: var(--ic-topbar-h);
}
body.ic-has-top-bar.admin-bar #header {
    top: calc(32px + var(--ic-topbar-h));
}

/* コンテンツ(#container)をバー高さ分さらに下げ、バー＋ヘッダーの両方をクリアさせる。
   テーマの body padding-top(ヘッダー確保領域、ブレークポイントで変化)へ「加算」する形で
   margin を足すため、確保値の実数に依存しない。 */
body.ic-has-top-bar #container {
    margin-top: var(--ic-topbar-h);
}

/* スマホ: バーを少し低く、左右パディングを詰める。--ic-topbar-h の更新で
   #header のオフセットも自動追随する。 */
@media (max-width: 800px) {
    :root {
        --ic-topbar-h: 36px;
    }

    #ic-top-bar .ic-top-bar__inner {
        padding: 0 15px;
    }
}

/* ログイン時のモバイル管理バーは46px(WordPressの782pxブレークポイント)。
   本番(未ログイン)には影響しないが、staging のモバイル確認で管理バーと重ならないよう補正。 */
@media screen and (max-width: 782px) {
    body.admin-bar #ic-top-bar {
        top: 46px;
    }
    body.ic-has-top-bar.admin-bar #header {
        top: calc(46px + var(--ic-topbar-h));
    }
}

/* ============================
   ドロワー(ハンバーガー)内の言語スイッチャー
   ============================
   wp_nav_menu_items で global-menu(ヘッダー#global_menu と ドロワー#mobile_menu)の
   末尾に .ic-drawer-lang が追加される。表示は #mobile_menu 内のみに限定し、
   ヘッダーのグローバルメニュー側では非表示にする。 */
.ic-drawer-lang {
    display: none;
}

/* ヘッダーのグローバルメニューでは非表示。親テーマ #global_menu > ul > li の
   display:inline-block (specificity 1,0,2) に勝つよう #global_menu でスコープする
   (#global_menu .ic-drawer-lang = 1,1,0 で勝つ)。 */
#global_menu .ic-drawer-lang {
    display: none;
}

#mobile_menu .ic-drawer-lang {
    display: block;
    padding: 18px 20px;
    margin-top: 8px;
    border-top: 1px solid #e3e9ef;
    background: #f7fafc;
}

#mobile_menu .ic-drawer-lang__label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #888;
}

#mobile_menu .ic-drawer-lang__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#mobile_menu .ic-drawer-lang__item {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.2;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccd5dd;
    border-radius: 4px;
    background: #fff;
}

#mobile_menu .ic-drawer-lang__item.is-active {
    color: #fff;
    background-color: #059de5;
    border-color: #059de5;
    pointer-events: none;
}