/**
 * Safari テーマの見た目（theme.json で表現できない部分）
 *
 * 色・余白・文字サイズ・影はすべて theme.json のトークン（--wp--preset--* / --wp--custom--*）を参照する。
 */

/* ------------------------------------------------------------
 * 全体
 * ---------------------------------------------------------- */
body {
	background: var(--wp--preset--gradient--stage) no-repeat top center / 100% 60rem, var(--wp--preset--color--base);
}

/* ヘッダーと本文の間の標準の余白（blockGap）は使わない。本文側の padding で取る */
.wp-site-blocks > main {
	margin-block-start: 0;
}

::selection {
	background: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}

/* キーボード操作時のフォーカスを全要素で見えるように */
:where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--focus);
	outline-offset: 0.125rem;
}

/* ------------------------------------------------------------
 * ヘッダー
 * ---------------------------------------------------------- */
.safari-header {
	color: var(--wp--preset--color--contrast);
	isolation: isolate;
	position: sticky;
	top: 0;
	z-index: 20;
}
/* すりガラスの背景は疑似要素に置く。ヘッダー本体に backdrop-filter を付けると、
 * 中の position: fixed（スマホのメニューの全画面表示）がヘッダーの高さに閉じ込められるため */
.safari-header::before {
	backdrop-filter: blur(0.75rem);
	background: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}
.admin-bar .safari-header {
	top: var(--wp-admin--admin-bar--height, 0);
}
/* 鍵盤の色（シアン→ピンク→イエロー）のライン */
.safari-header::after {
	background: var(--wp--preset--color--main);
	bottom: 0;
	content: "";
	height: var(--wp--custom--border-width--thin);
	opacity: 0.7;
	left: 0;
	position: absolute;
	right: 0;
}
.safari-logo {
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	text-decoration: none;
}
/* 幅で指定して高さは比率に任せる（狭い画面でナビが2段にならないよう 60vw を上限に） */
.safari-logo svg,
.safari-logo img {
	display: block;
	height: auto;
	width: min(15rem, 60vw);
}
.safari-logo:hover {
	color: var(--wp--preset--color--main);
}
.safari-header .wp-block-navigation {
	font-weight: 700;
}
.safari-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--main);
}

/* フッター最下段（広告表記と ©）。上に区切り線 */
.safari-footer__bottom {
	border-top: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--40);
}
.safari-footer__bottom p {
	margin: 0;
}

/* ------------------------------------------------------------
 * ヒーロー（トップページ）
 * ---------------------------------------------------------- */
.safari-hero {
	/* 背景写真（assets/img/hero.webp があれば functions.php が --safari-hero-image を入れる）の上に、
	   文字側を濃く・右側を薄くする覆いを重ねる。写真が無いときは stage グラデーションだけ */
	background-color: var(--wp--preset--color--base);
	background-image:
		linear-gradient(
			to right,
			color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent) 45%,
			color-mix(in srgb, var(--wp--preset--color--base) 20%, transparent) 100%
		),
		var(--safari-hero-image, var(--wp--preset--gradient--stage));
	background-position: center;
	background-size: cover;
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
	position: relative;
}
/* 狭い画面では文字が全幅に広がるので、覆いを一様に濃くする */
@media (max-width: 48rem) {
	.safari-hero {
		background-image:
			linear-gradient(color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent), color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent)),
			var(--safari-hero-image, var(--wp--preset--gradient--stage));
	}
}
/* 下端に鍵盤色のライン（ヘッダーと揃える） */
.safari-hero::after {
	background: var(--wp--preset--color--main);
	bottom: 0;
	content: "";
	height: var(--wp--custom--border-width--thin);
	left: 0;
	opacity: 0.4;
	position: absolute;
	right: 0;
}
.safari-hero__eyebrow {
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--accent);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	margin-bottom: var(--wp--preset--spacing--20);
}
.safari-hero__title {
	color: var(--wp--preset--color--contrast);
	line-height: 1.35;
	margin-top: 0;
	/* 日本語を文節で折り返し、行の長さを揃える（未対応のブラウザでは通常の折り返し） */
	text-wrap: balance;
	word-break: auto-phrase;
}
/* 見出しの強調語: イエローの文字 + 鍵盤色の下線 */
.safari-hero__em {
	color: var(--wp--preset--color--main);
}
.safari-hero__lead {
	color: var(--wp--preset--color--contrast-soft);
	max-width: 36rem;
	text-wrap: pretty;
}

/* セクション見出しの前に付ける小さなラベル */
.safari-section-label {
	color: var(--wp--preset--color--contrast-soft);
	font-family: var(--wp--preset--font-family--accent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}
/* 一覧のセクション見出しは、本文の h2 の帯スタイルを使わない */
.safari-section-title {
	background: none !important;
	border: 0 !important;
	margin-top: 0 !important;
	padding: 0 !important;
}

/* ------------------------------------------------------------
 * 記事カード（トップ・一覧）
 * ---------------------------------------------------------- */
.safari-card {
	background: var(--wp--preset--color--base-soft);
	box-shadow: var(--wp--preset--shadow--card);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}
.safari-card:hover,
.safari-card:focus-within {
	border-color: var(--wp--preset--color--main);
	box-shadow: var(--wp--preset--shadow--glow);
	transform: translateY(-0.125rem);
}
.safari-card .wp-block-post-featured-image {
	margin: 0;
}
.safari-card .wp-block-post-featured-image img {
	border-radius: 0;
}
/* カード全体をクリックできるように、タイトルのリンクを広げる */
.safari-card .wp-block-post-title a::after {
	content: "";
	inset: 0;
	position: absolute;
}
.safari-card .wp-block-post-title {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
}
.safari-card .wp-block-post-terms {
	position: relative;
	z-index: 1;
}
/* 画像の無い記事のプレースホルダー */
.safari-card .wp-block-post-featured-image:empty,
.safari-card__noimage {
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--gradient--stage);
}

/* ------------------------------------------------------------
 * 記事ページ
 * ---------------------------------------------------------- */
.safari-article-header .wp-block-post-title {
	background: none;
	border: 0;
	padding: 0;
}
.safari-meta {
	color: var(--wp--preset--color--contrast-soft);
}
/* 公開日と更新日を区別するラベル */
.safari-meta .wp-block-post-date::before {
	color: var(--wp--preset--color--main);
	content: "公開 ";
	font-weight: 700;
}
.safari-meta .wp-block-post-date__modified-date::before {
	content: "更新 ";
}

/* 本文の見出しの上の余白。theme.json の h2 / h3 の margin.top は、レイアウトのブロック間余白
   （:root :where(.is-layout-constrained) > *）の方が優先されて効かないため、本文の中だけ同じ値を当て直す */
:root :where(.wp-block-post-content) > h2 {
	margin-block-start: var(--wp--preset--spacing--60);
}
:root :where(.wp-block-post-content) > h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}
/* 見出しの直後の見出し（h2 のすぐ下の h3 など）は、ふつうのブロック間余白に戻す */
:root :where(.wp-block-post-content) > :is(h2, h3, h4) + :is(h3, h4) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* 目次（safari-blocks の includes/toc.php が出力） */
.safari-toc {
	background: var(--wp--preset--color--base-soft);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	border-top: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.safari-toc__title {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--label);
}
.safari-toc ol {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding-inline-start: var(--wp--preset--spacing--40);
}
.safari-toc ol ol {
	margin-top: var(--wp--preset--spacing--10);
}
.safari-toc li {
	margin-block: var(--wp--preset--spacing--10);
}
.safari-toc li::marker {
	color: var(--wp--preset--color--main);
	font-weight: 700;
}
.safari-toc a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.safari-toc a:hover {
	color: var(--wp--preset--color--main);
	text-decoration: underline;
}

/* 目次のリンク先が固定ヘッダーの下に隠れないように */
:where(h2, h3)[id] {
	scroll-margin-top: 5rem;
}

/* 著者ボックス */
.safari-author {
	background: var(--wp--preset--color--base-soft);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
}
.safari-author__icon {
	flex: none;
	margin: 0;
}
.safari-author__icon img {
	border: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--main);
	border-radius: 50%;
}

/* ------------------------------------------------------------
 * フッター
 * ---------------------------------------------------------- */
.safari-footer {
	border-top: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
}
.safari-footer a {
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: none;
}
.safari-footer a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* ------------------------------------------------------------
 * 検索フォーム（入力欄の枠は非テキストのコントラスト 3:1 を満たす色）
 * ---------------------------------------------------------- */
.wp-block-search__input {
	background: var(--wp--preset--color--base-soft);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--contrast-soft);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	padding-inline: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------
 * フォーム（コメント欄など）。入力欄の枠は非テキストのコントラスト 3:1 を満たす色
 * ---------------------------------------------------------------- */
:where(.wp-block-post-comments-form, .comment-form, .wpcf7-form) :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea) {
	background: var(--wp--preset--color--base-soft);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--contrast-soft);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.safari-optional {
	color: var(--wp--preset--color--contrast-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

/* お問い合わせフォーム（Contact Form 7） */
.wpcf7-form label {
	display: block;
	font-weight: 700;
}
.wpcf7-form :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea) {
	box-sizing: border-box;
	font: inherit;
	font-weight: 400;
	margin-top: var(--wp--preset--spacing--10);
	width: 100%;
}
.wpcf7-form .wpcf7-submit {
	background: var(--wp--preset--color--main);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
}
.wpcf7-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--accent);
}
/* 入力エラーの文字（CF7 既定の赤はダークで 4.5:1 に届かない） */
.wpcf7-form .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--swl-deep-01);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}
.wpcf7-form :is(input, textarea)[aria-invalid="true"] {
	border-color: var(--wp--preset--color--swl-deep-01);
}
/* reCAPTCHA の注記はフォーム本文の改行が <br> になって細切れになるので、1段落に */
.wpcf7-form small br {
	display: none;
}
.wpcf7-form .wpcf7-response-output {
	border-radius: var(--wp--custom--radius--small);
	margin-inline: 0;
}

/* ------------------------------------------------------------
 * 一覧のページ送り（core/query-pagination）
 * ---------------------------------------------------------------- */
.wp-block-query-pagination {
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}
.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	align-items: center;
	background: var(--wp--preset--color--base-soft);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--accent);
	font-weight: 700;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	gap: var(--wp--preset--spacing--10);
	padding-inline: var(--wp--preset--spacing--30);
}
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--main);
}
/* 今いるページ */
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--main);
	border-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}
/* 省略の「…」は枠なし */
.wp-block-query-pagination .page-numbers.dots {
	background: none;
	border: 0;
	min-width: auto;
}

/* ------------------------------------------------------------
 * コメント欄
 * ---------------------------------------------------------------- */
.safari-comments-count {
	color: var(--wp--preset--color--contrast-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	margin-inline-start: var(--wp--preset--spacing--20);
}
/* Q&A カード: スレッド（最上位のコメント + 返信）ごとに1枚のカード */
.wp-block-comment-template,
.wp-block-comment-template ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wp-block-comment-template > li {
	background: var(--wp--preset--color--base-soft);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--card);
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
}
/* 返信はカードの中で一段沈んだ面に。返信への返信は同じ面の中に続ける */
.safari-replies ol > li {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--small);
	margin-block-start: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
}
.safari-replies ol ol > li {
	padding: var(--wp--preset--spacing--30) 0 0;
}
/* 丸印: 質問は Q、筆者の返信は A、読者の返信は Re（筆者かどうかは「筆者」の札でも伝える） */
.safari-comment__meta::before {
	align-items: center;
	background: var(--wp--preset--color--main);
	border-radius: 50%;
	color: var(--wp--preset--color--base);
	content: "Q" / "";
	display: inline-flex;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	height: 1.75rem;
	justify-content: center;
	width: 1.75rem;
}
li:not(.depth-1) > .safari-comment .safari-comment__meta::before {
	background: var(--wp--preset--color--base-strong);
	color: var(--wp--preset--color--contrast-soft);
	content: "Re" / "";
	font-size: var(--wp--preset--font-size--xs);
}
li:not(.depth-1).bypostauthor > .safari-comment .safari-comment__meta::before {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	content: "A" / "";
	font-size: inherit;
}
/* 返信の折りたたみ（functions.php の safari_fold_comment_replies） */
.safari-replies {
	margin-block-start: var(--wp--preset--spacing--20);
}
.safari-replies__toggle {
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--main);
	cursor: pointer;
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	list-style: none;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
}
.safari-replies__toggle::-webkit-details-marker {
	display: none;
}
.safari-replies__toggle::before {
	content: "▶ " / "";
	font-size: 0.75em;
}
.safari-replies[open] > .safari-replies__toggle::before {
	content: "▼ " / "";
}
.safari-replies__toggle:hover {
	border-color: var(--wp--preset--color--main);
}
.safari-replies__close,
.safari-replies[open] .safari-replies__open {
	display: none;
}
.safari-replies[open] .safari-replies__close {
	display: inline;
}
.safari-comment__meta {
	align-items: center;
	color: var(--wp--preset--color--contrast-soft);
}
.safari-comment__meta .wp-block-comment-author-name {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}
.safari-comment__meta .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}
/* 筆者のコメントに札 */
.bypostauthor > .safari-comment .wp-block-comment-author-name::after {
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--main);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--main);
	content: "筆者";
	font-size: var(--wp--preset--font-size--xs);
	margin-inline-start: var(--wp--preset--spacing--20);
	padding: 0 var(--wp--preset--spacing--20);
}
.safari-comment .wp-block-comment-content p {
	margin-block: 0 var(--wp--preset--spacing--20);
}
.safari-comment .wp-block-comment-reply-link a {
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: none;
}
.safari-comment .wp-block-comment-reply-link a::before {
	content: "↩ " / "";
}
.safari-comment .wp-block-comment-reply-link a:hover {
	color: var(--wp--preset--color--main);
	text-decoration: underline;
}

/* ------------------------------------------------------------
 * カテゴリー別セクション（safari/category-posts）
 * ---------------------------------------------------------------- */
.safari-category-posts__head {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	justify-content: space-between;
}
.safari-category-posts__more {
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	text-decoration: none;
}
/* 一覧の後ろに置く「すべて見る」（トップの各セクション。safari/pick-posts とテンプレートの新着記事で共通） */
.safari-picks__more {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
}
.safari-category-posts__more:hover {
	border-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--main);
}
.safari-category-posts__list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
}
.safari-card__body {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
}

/* 読み上げ専用テキスト */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ------------------------------------------------------------
 * 詳細（開閉）ブロック: 見出しを押せる場所として目立たせる
 * ---------------------------------------------------------------- */
.wp-block-details > summary {
	cursor: pointer;
	font-weight: 700;
}
.wp-block-details > summary::marker {
	color: var(--wp--preset--color--main);
}
.wp-block-details[open] > summary {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* 本文中の長い URL（リンク文が URL そのもの）で横にはみ出さないよう、リンク文はどこでも折り返せるようにする */
.wp-block-post-content a {
	overflow-wrap: anywhere;
}