/* ===================================
   Anchor Link Scroll Offset
   ヘッダー分を考慮したスクロール位置の調整
   =================================== */

/* WordPressが設定するscroll-padding-topに加えて、追加のオフセットを設定 */
html {
    /* WordPressの管理バー分(32px)に加えて、サイトヘッダー分を追加 */
    scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 32px) + 80px);
}

/* 管理バーがない場合（ログインしていない場合）のオフセット */
html:not(.admin-bar) {
    scroll-padding-top: 80px;
}

/* レスポンシブ対応 */
@media screen and (max-width: 782px) {
    html {
        /* モバイル時の管理バー分(46px)に加えて、モバイルヘッダー分を追加 */
        scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 46px) + 70px);
    }
    
    html:not(.admin-bar) {
        scroll-padding-top: 70px;
    }
}

@media screen and (max-width: 600px) {
    html {
        scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 46px) + 60px);
    }
    
    html:not(.admin-bar) {
        scroll-padding-top: 60px;
    }
}

/* 古いブラウザ対応：scroll-padding-topがサポートされていない場合のJavaScriptによる代替案 */
@supports not (scroll-padding-top: 1px) {
    /* フォールバック用のスタイルは必要に応じて追加 */
}