/**
 * ANYTAL Media — 本体寄せの追加スタイル（フェーズ5-B）
 *
 * 色は theme.json の slug 参照を原則とする。
 * 例外はヘッダーのすりガラス背景のみ（半透明＋blur は palette の不透明色で
 * 表現できない "ヘッダー専用UIエフェクト値" のため、本体実測値を直書きする）。
 */

/* -------------------------------------------------------------------------
 * ヘッダー：スマート追従＋淡色すりガラス（フェーズ5-C）
 * fixed で画面上部に追従。下スクロールで隠れ（is-hidden）、上スクロールで再出現。
 * 位置は header.html 側の sticky 指定を撤去し、ここで一元管理する。
 * 本文の被りは header-scroll.js が body に実寸ぶんの padding-top を確保して解消。
 * ---------------------------------------------------------------------- */
.site-header-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 200;
	/* ★例外：メディア独自の半透明・淡ベージュ＋すりガラス（フェーズ6-Aで基調統一） */
	background: hsla(28, 40%, 95%, 0.55);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	transition: transform 0.4s ease;
}

/* 下スクロールで隠す状態（JS が付け外し） */
.site-header-bar.is-hidden {
	transform: translateY(-100%);
}

/* 管理バー（ログイン中のみ）と重ならないよう、ヘッダーを下げる */
.admin-bar .site-header-bar {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .site-header-bar {
		top: 46px;
	}
}

/* -------------------------------------------------------------------------
 * カードタイトル：黒（contrast）＋ホバーで公式緑（primary）
 * リンク挙動は緑で統一。アクセントピンク（secondary）は強調・タグ専用。
 * 対象は post-title ブロックのリンクと、関連記事カードのタイトルリンクのみ。
 * （single の H1 はリンクではないため影響しない）
 * ---------------------------------------------------------------------- */
.wp-block-post-title a,
.anytal-related__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus,
.anytal-related__title a:hover,
.anytal-related__title a:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * フッターロゴ：黒線画（logo_media.png）を白化して暗背景に乗せる（5-D）
 * 透過は維持される。brightness(0) で真っ黒化→ invert(1) で真っ白に。
 * ---------------------------------------------------------------------- */
.site-footer-logo img {
	filter: brightness(0) invert(1);
}

/* -------------------------------------------------------------------------
 * ハンバーガーメニューの一時非表示（5-D → 5-E でナビ全体に）
 * 削除ではなく非表示。復帰時はこのブロックを削除するだけ。
 * トグルだけでなくナビ要素ごと隠すことで、CTA 右の余分な間隔（flex gap）も消え、
 * CTA が最右の要素になって固定バーのボタンと右端が揃う。ロゴと CTA は残る。
 * ---------------------------------------------------------------------- */
.site-header-bar .wp-block-navigation {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * トップ以外の H1 を少し縮小（5-D）
 * トップ（.home）のヒーロー H1 は対象外で現状維持。
 * has-xx-large-font-size の !important を上書きするため !important を付す。
 * 値はトークン xx-large の 0.85 倍（明朝トーンは維持・サイズのみ）。
 * ---------------------------------------------------------------------- */
body:not(.home) h1 {
	font-size: calc(var(--wp--preset--font-size--xx-large) * 0.85) !important;
}

/* -------------------------------------------------------------------------
 * ヘッダー内側の左右余白（5-D 追補 → 5-E で左右非対称に）
 * 左：ロゴが左端にベタ付かないよう余白を維持（気持ちいい空気）。
 * 右：0 にして、ヘッダーの root padding（spacing|30）だけを効かせる。
 *     画面下固定バー（.anytal-context-bar も左右 spacing|30）と右端が縦に揃う。
 * ---------------------------------------------------------------------- */
.site-header-bar > .wp-block-group {
	padding-left: clamp(1rem, 4vw, 1.5rem);
	padding-right: 0;
}

/* -------------------------------------------------------------------------
 * 画面下固定バー：左テキストをボタン左の領域内で中央寄せ（5-D 追補）
 * ボタンの位置・サイズは変えない。
 * ---------------------------------------------------------------------- */
.anytal-context-bar__text {
	text-align: center;
}

/* =========================================================
 * 記事本文の要素装飾（テーブル・リスト・引用）
 * theme.json のパレットトークンに準拠：
 * primary(#C46A3A)テラコッタ / secondary(#9DB4AD)くすみ緑
 * surface(#F6F2EE)ベージュ / surface-green(#ECF0EE)淡緑 / border(#DADADA)
 * 本文ラッパー .wp-block-post-content 配下に当てる（素のHTML・ブロック両対応）
 * ========================================================= */

/* テーブル：ヘッダー淡緑・偶数行ベージュ・スマホ横スクロール */
.wp-block-post-content .wp-block-table,
.wp-block-post-content figure.wp-block-table {
    overflow-x: auto;
    margin: 1.6em 0;
}
.wp-block-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.6em 0;
    font-size: 0.95em;
    line-height: 1.7;
}
.wp-block-post-content th,
.wp-block-post-content td {
    border: 1px solid var(--wp--preset--color--border);
    padding: 0.6em 0.85em;
    text-align: left;
    vertical-align: top;
}
.wp-block-post-content thead th {
    background: var(--wp--preset--color--surface-green);
    color: var(--wp--preset--color--contrast);
    font-weight: 600;
}
.wp-block-post-content tbody tr:nth-child(even) {
    background: var(--wp--preset--color--surface);
}

/* リスト：マーカーをテラコッタ、行間ゆったり */
.wp-block-post-content ul,
.wp-block-post-content ol {
    padding-left: 1.4em;
    margin: 1.2em 0;
    line-height: 1.9;
}
.wp-block-post-content li {
    margin: 0.3em 0;
}
.wp-block-post-content ul li::marker,
.wp-block-post-content ol li::marker {
    color: var(--wp--preset--color--primary);
    font-weight: 600;
}

/* 引用：30秒サマリー・CTA用。左テラコッタ罫＋ベージュ地 */
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote {
    margin: 1.6em 0;
    padding: 1em 1.2em;
    background: var(--wp--preset--color--surface);
    border-left: 4px solid var(--wp--preset--color--primary);
    border-radius: 4px;
}
.wp-block-post-content blockquote p {
    margin: 0.4em 0;
}

/* -------------------------------------------------------------------------
 * E-1：記事目次（v3 開閉式）
 * C-2 の設計思想（主張を弱める・primary は細く）を継承。リンクは控えめ、
 * ホバー／フォーカスで cta 色に。外枠の左アクセントは single.html 側の
 * anytal-toc-wrap が持つため、details 自体は素のまま。
 * ---------------------------------------------------------------------- */

/* 開閉ラベル */
.anytal-toc__summary {
    cursor: pointer;
    list-style: none; /* デフォルトの三角マーカーを消す */
    font-size: var(--wp--preset--font-size--large, 1.25rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4em;
    user-select: none;
}
/* Webkit 系のデフォルトマーカーも消す（両方消さないと二重に三角が出る） */
.anytal-toc__summary::-webkit-details-marker {
    display: none;
}
/* 自前の開閉マーカー（▸）。閉じてる時は右向き、開くと下向き */
.anytal-toc__summary::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid var(--wp--preset--color--primary);
    border-bottom: 2px solid var(--wp--preset--color--primary);
    transform: rotate(-45deg); /* 閉：右向き */
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}
.anytal-toc[open] .anytal-toc__summary::before {
    transform: rotate(45deg); /* 開：下向き */
}

/* 中身 */
.anytal-toc__nav {
    margin-top: 0.6em;
}
.anytal-toc__list,
.anytal-toc__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.anytal-toc__item {
    margin: 0.4em 0;
    line-height: 1.6;
}
.anytal-toc__sublist {
    margin-left: 1.2em;
    padding-left: 0.6em;
    border-left: 1px solid var(--wp--preset--color--surface);
}
.anytal-toc__item--child {
    font-size: 0.92em;
}
.anytal-toc a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.anytal-toc a:hover,
.anytal-toc a:focus {
    color: var(--wp--preset--color--cta);
    border-bottom-color: var(--wp--preset--color--cta);
}
/* アンカージャンプ時、追従ヘッダー（fixed）に見出しが隠れないよう余白を確保 */
:is(h2, h3)[id^="toc-"] {
    scroll-margin-top: 6rem;
}