/* Peekを適用するヘッダーの基本設定 */
.js-peek-header {
    position: fixed !important;
    /* JSで計算した管理バーの高さを反映。なければ0 */
    top: var(--admin-bar-height, 0);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
    will-change: transform;
}

/* 非表示（Unpinned）時 */
/* 管理バーがある場合、その高さ分を考慮して隠す */
.peek--unpinned {
    /* 管理バーの分だけ下がっているので、100% + アルファで上に飛ばす */
    transform: translateY(calc(-100% - var(--admin-bar-height, 0)));
}

/* 表示（Pinned）時 */
.peek--pinned {
    transform: translateY(0);
}

/* オーバーレイメニューが開いている時は、transformによるスタッキングコンテキスト生成を解除し、画面いっぱいに広げる */
.js-peek-header:has(.has-modal-open),
.js-peek-header:has(.is-menu-open) {
    transform: none !important;
    will-change: auto !important;
    transition: none !important;
}

/* アンカーリンク（ページ内リンク）の着地位置調整 */
html {
    scroll-padding-top: var(--total-header-height, 100px);
}