/**
 * 土台の CSS
 *
 * ブラウザごとの見た目の差をなくし、文字・リンク・画像などの「タグそのもの」の見た目を決める。
 * ここではクラスを使わず、タグ（body・a・img など）に直接スタイルを当てる。
 * 部品の見た目は components.css、ブログ本文の見た目は prose.css に書く。
 */

/* 幅の計算に枠線と内側の余白を含める（width: 100% に padding を足してもはみ出さないように） */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* スマホを横にしたとき、勝手に文字が大きくならないようにする */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* ページ内リンク（#faq など）で飛んだとき、上に固定したヘッダーの裏に見出しが隠れないようにする */
	scroll-padding-top: calc(var(--locus-header-height) + 1rem);
}

body {
	margin: 0;
	font-family: var(--locus-font-sans);
	font-size: var(--locus-font-size-base);
	line-height: var(--locus-line-height);
	color: var(--locus-color-text);
	background-color: var(--locus-color-bg);
	/* 長い URL などが画面からはみ出さないよう、必要なら途中で折り返す */
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--locus-font-heading);
	line-height: var(--locus-line-height-tight);
	font-weight: var(--locus-font-weight-heading);
	/* 見出しは文字の間隔を詰める（日本語の約物「、」「（」などの余白を減らして締まって見せる） */
	font-feature-settings: "palt";
	letter-spacing: 0.02em;
	/*
	 * 日本語の見出しが「計 / 測」のように言葉の途中で改行されないよう、言葉のまとまり（文節）で改行する。
	 * text-wrap: balance は、各行の長さをそろえて、最後の行に 1〜2 文字だけ残るのを防ぐ。
	 * どちらも対応していないブラウザでは無視され、今までどおりの改行になるだけなので害はない。
	 */
	word-break: auto-phrase;
	text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
	margin: 0;
}

/* 画像・動画は親の幅を超えない。height: auto で縦横比を保ったまま縮む */
img,
svg,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: var(--locus-color-primary);
	text-underline-offset: 0.2em;
	transition: color var(--locus-transition);
}

a:hover {
	color: var(--locus-color-primary-dark);
}

/*
 * キーボード操作（Tab キー）で選んでいる場所に、はっきりした枠を出す。
 * :focus-visible はマウスでクリックしたときには出ず、キーボード操作のときだけ出る。
 */
:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--locus-color-primary) 55%, transparent);
	outline-offset: 2px;
}

table {
	border-collapse: collapse;
	width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* hidden 属性を付けたものは、CSS で display を指定していても必ず隠す */
[hidden] {
	display: none !important;
}

/*
 * 画面には見せず、読み上げソフトにだけ伝える文字。
 * .screen-reader-text は WordPress 本体やプラグインが使う決まりの名前なので、テーマで必ず用意する。
 * .u-visually-hidden はテーマの命名ルールに合わせた同じもの。
 */
.screen-reader-text,
.u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * 「本文へ移動」リンク。ふだんは隠れていて、キーボードで Tab を押したときだけ左上に出る。
 * キーボードで操作する人が、毎ページでメニューを全部たどらずに本文へ飛べるようにする。
 */
.u-skip-link {
	position: absolute;
	top: -100px;
	left: var(--locus-space-sm);
	z-index: 1000;
	padding: var(--locus-space-xs) var(--locus-space-sm);
	background: var(--locus-color-bg);
	border-radius: var(--locus-radius);
	box-shadow: var(--locus-shadow-lg);
}

.u-skip-link:focus {
	top: var(--locus-space-sm);
}