/*
 * テーマ共通のカスタムスタイル.
 * functions.php の enqueue_block_assets でフロントとブロックエディタの
 * 両方に読み込む. 各種カスタム指定をこのファイルにまとめる.
 *
 * --header-height は assets/js/header-height.js が実測値 (rem) を書き込む.
 * JS 実行前のフォールバックとして 0 を置き, calc が無効値にならないようにする.
 */

/*
 * フロントにはコア全体の box-sizing リセットが無く (コアは各ブロックの要素にだけ border-box を当てる),
 * 自前で足した要素は content-box のまま幅計算がズレる. エディタ canvas 側は広く border-box が効くため,
 * フロントとエディタの見え方を揃える目的で全体へ border-box を敷く.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --header-height: 0rem;
}

body {
    overflow-wrap: anywhere; /* 収まらない場合に折り返す */
    word-break: normal; /* 単語の分割はデフォルトに依存 */
    line-break: strict; /* 禁則処理を厳格に適用 */
}

header.wp-block-template-part {
    /*position: sticky;*/
    /*top: var(--wp-admin--admin-bar--height, 0px);*/
    /*z-index: 10;*/
    margin-bottom: calc(-1 * var(--header-height, 0px));
    /*position: relative;*/
    /*z-index: 500;*/
}

header.wp-block-template-part + div {
    margin-top: 0;
}

/*
 * フロントページの KV だけを実ヘッダー高さ分だけ上へずらし,
 * 追従ヘッダーの背面に潜り込ませて重ねる.
 */
/*.home .kv {*/
/*    margin-top: calc(-1 * var(--header-height));*/
/*}*/