/* ============================
   WPML 言語スイッチャー（渋谷院・cure_tcd082）
   ============================
   本サイト(serum)版を移植。cure_tcd082 はヘッダー機構が異なる:
   - 通常ページ: #header は通常フロー（static）
   - ホーム(body.home): #header は position:absolute でFVスライダーに透過オーバーレイ
   - スクロール時(.header_fix): #header は position:fixed; top:0
   よって #ic-top-bar は「#container 先頭の通常フロー帯」とし、ホームのみ absolute ヘッダーを
   バー高さ分オフセットする。スクロール時はバーがページと共に流れる(=採用UX)。
   ※ オフセット値は staging で DevTools 実測のうえ確定すること。 */

.ic-lang-switcher {
    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; }
}

/* ============================
   言語切替トップバー（#container 先頭の通常フロー帯）
   ============================ */
:root {
    /* トップバー高さ。#header(home) のオフセット量と単一ソースで同期させる。 */
    --ic-topbar-h: 40px;
}

#ic-top-bar {
    position: relative;
    z-index: 101; /* 親テーマ #header(z:100)より前面 */
    width: 100%;
    height: var(--ic-topbar-h);
    background: #f2f6fa;
    border-bottom: 1px solid #e3e9ef;
    box-sizing: border-box;
}

#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（#container 基準）でスライダーに重なる。
   トップバー(通常フロー・40px)の下へ来るようヘッダーを offset する。
   バーが出力される時(body.ic-has-top-bar)のみ適用。 */
body.home.ic-has-top-bar #header { top: var(--ic-topbar-h); }

/* スクロールで .header_fix が付与され #header が position:fixed; top:0 になった時は、
   トップバーは既に画面外へ流れているため offset を打ち消して最上部に固定する。
   上の非fixedルール(specificity 1,2,1)に勝つよう .header_fix を加えてスコープ(1,3,1)。 */
body.home.ic-has-top-bar.header_fix #header { top: 0; }

/* スマホ: バーを少し低く、左右パディングを詰める */
@media (max-width: 800px) {
    :root { --ic-topbar-h: 36px; }
    #ic-top-bar .ic-top-bar__inner { padding: 0 15px; }
}

/* ============================
   ドロワー(ハンバーガー)内の言語スイッチャー
   ============================
   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(specificity 1,0,2)に
   勝つよう #global_menu でスコープ（#global_menu .ic-drawer-lang = 1,1,0）。
   ※ 実際の specificity は staging で getComputedStyle により確認すること。 */
#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;
}