/* タブヘッダー — Reels / ビル情報 共通 */

/* この要素の padding / font-size を変えたら、実高さの決め打ち複製である
 * building-info.css 側の var(--tabs-height)（variables.css で定義）も合わせて更新すること。 */
.kajima-tabs {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-tabs);
    display: flex;
    font-family: var(--font-family-base);
    font-size: 0.95rem;
    padding-top: env(safe-area-inset-top, 0);
}

.kajima-tabs__item {
    flex: 1;
    text-align: center;
    padding: 0.85rem 0.5rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* iOS WebView はタップ時のネイティブハイライトが遷移後も矩形で焼き付くため無効化 */
    -webkit-tap-highlight-color: transparent;
}

.kajima-tabs__item:not(.kajima-tabs__item--active) {
    opacity: 0.55;
    font-weight: 500;
}

.kajima-tabs__item--active::after {
    content: "";
    position: absolute;
    left: 30%; right: 30%;
    bottom: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

/* Reels 画面: 背景画像をぼかしつつ、わずかに暗化して文字を浮かせる */
.kajima-tabs[data-active="reels"] {
    background: rgba(27, 35, 42, 0.25); /* #1B232A 25% */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
}

/* ビル情報画面: 白背景帯 + アクティブタブは黒文字 + 赤の下線 */
.kajima-tabs[data-active="building-info"] {
    background: var(--color-surface);
    color: var(--color-text-base);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* 下線(::after)はデフォルトで currentColor のため、ビル情報タブでは赤に上書き */
.kajima-tabs[data-active="building-info"] .kajima-tabs__item--active::after {
    background: var(--color-accent);
}

/* wp-adminにログイン時に管理バー(<div id="wpadminbar">) が表示されると、Reels/ビル情報固定タブが裏に隠れる。
 * これを防ぐため管理バーの高さ分だけタブを下げる（値・詳しい経緯は variables.css の
 * --wp-adminbar-height / --wp-adminbar-height-mobile を参照）。
 * 管理バー表示中は .kajima-tabsの親要素のbodyタグに .admin-bar（wp-includes/post-template.phpで付与）が付くので、それを条件にReels/ビル情報固定タブを下げる。
 * 通常コンテンツは WP が自動で下げるが、position:fixed のタブは対象外なので手動で下げる。 */
.admin-bar .kajima-tabs {
    top: var(--wp-adminbar-height);
}
@media screen and (max-width: 782px) {
    /* モバイルは管理バーが absolute でスクロールすると消え、固定タブとズレるので fixed に固定 */
    #wpadminbar {
        position: fixed !important;
    }
    .admin-bar .kajima-tabs {
        top: var(--wp-adminbar-height-mobile);
    }
}