/*
 * サイト共通の最小CSS。
 *
 * ここに入れてよいのは「ほぼ全ページで必要な、ごく基本の見え方」だけ。
 * ブロック個別の装飾は assets/css/blocks/ へ置き、
 * inc/assets.php の wp_enqueue_block_style() で紐づけること。
 *
 * 色・文字サイズ・余白は theme.json のトークンを参照し、ここで直値を書かない。
 */

/* ---- 読みやすさの基本 ---- */

body {
	-webkit-text-size-adjust: 100%;
	text-spacing-trim: trim-start;
}

/* 日本語の折り返し。単語途中で不自然に切らない。 */
p,
li,
dd,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

/* ---- 画像 ---- */

img,
video {
	max-width: 100%;
	height: auto;
}

/* ---- 見出しの前後の間隔 ---- */

:where(.wp-block-post-content) > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--60);
}

:where(.wp-block-post-content) > h2 {
	padding-block-end: var(--wp--preset--spacing--20);
	border-block-end: 2px solid var(--wp--preset--color--border);
}

/* ---- 操作しているところが見えるようにする（M11） ---- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/*
 * 横スクロールする表そのものにもフォーカスが当たる。
 *
 * 最近のブラウザは「中に操作できるものが無いスクロール領域」をキーボードで
 * 選べるようにしており（比較表がこれに当たる）、そのとき上の指定には
 * 当てはまらない。どこを操作しているのか見えないままになるので、
 * 同じ見え方を与えておく。
 *
 * outline-offset を負にしているのは、表が本文の幅いっぱいのとき、
 * 外側に描くと枠が隠れてしまうため。
 */
:where(.wp-block-table):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: -3px;
}

/* キーボード操作でのみ本文へ飛べるリンク。 */
.kenzo-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1rem;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

.kenzo-skip-link:focus {
	left: var(--wp--preset--spacing--40);
	top: var(--wp--preset--spacing--40);
}

/* ---- 動きを減らす設定を尊重する ---- */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- 目次リンクで飛んだ見出しが、固定要素の下に隠れないようにする ---- */

:where(h2, h3)[id] {
	scroll-margin-block-start: var(--wp--preset--spacing--60);
}