/*
Theme Name:   Twenty Twenty-Five Child AEM
Description:  AEM電子調書組合 公式サイト用 Twenty Twenty-Five 子テーマ
Author:       The Association of AEM Working Papers
Template:     twentytwentyfive
Version:      0.15.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentytwentyfive-child_aem
*/

/* =============================================
   デザイン調整(theme.json で表現できない部分)

   色は theme.json のパレットにあるものは
   var(--wp--preset--color--*) を参照する。
   ヒーロー系の多段グラデーションだけは
   パレット外の中間色を含むため 16 進数のまま置く。
   ============================================= */

/* --- ヘッダー: 固定+すりガラス --- */
.aem-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(143, 80, 202, 0.15);
}

.admin-bar .aem-header {
	top: 32px;
}

/* 管理バーは 782px 以下で 46px になる */
@media screen and (max-width: 782px) {
	.admin-bar .aem-header {
		top: 46px;
	}
}

/* 固定ヘッダーの下に見出しが隠れないようにする */
html {
	scroll-padding-top: 7rem;
}

.aem-header-cta .wp-block-button__link {
	padding: 0.5rem 1.4rem;
	font-size: 0.9rem;
}

/* --- ヒーロー: 深い紫のグラデーション(中央揃え) --- */
.aem-hero {
	text-align: center;
	background-image:
		radial-gradient(1100px 550px at 85% -15%, rgba(167, 118, 214, 0.25), transparent 65%),
		radial-gradient(900px 500px at 0% 115%, rgba(143, 80, 202, 0.18), transparent 65%),
		linear-gradient(150deg, #45246e 0%, #2b1543 50%, #1a0c27 100%);
}

.aem-hero .wp-block-buttons {
	justify-content: center;
}

/* アイブロー(小さな帯) */
.aem-eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #e9dcf7;
	background: rgba(143, 80, 202, 0.3);
	border: 1px solid rgba(167, 118, 214, 0.45);
	border-radius: 999px;
	padding: 0.4rem 1.2rem;
	margin-bottom: 0.5rem;
}

.aem-hero h1 {
	margin-top: 1rem;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

.aem-hero-lead {
	font-size: 1.15rem;
	max-width: 38em;
	margin-inline: auto;
	line-height: 2;
	color: #ece4f5;
}

/* ヒーロー下部のポイント表示 */
.aem-hero-points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2rem;
	margin-top: 2.5rem;
	font-size: 0.92rem;
	color: #d9c8ef;
}

.aem-hero-points span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.aem-hero-points span::before {
	content: "";
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--accent-2);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}

/* ヒーロー内のアウトラインボタン */
.aem-btn-ghost .wp-block-button__link {
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.aem-btn-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--base);
	background: rgba(255, 255, 255, 0.1);
}

/* --- 下層ページのタイトル帯: なめらかなグラデーション --- */
.aem-page-header {
	background-image:
		radial-gradient(900px 450px at 90% -20%, rgba(167, 118, 214, 0.22), transparent 65%),
		linear-gradient(150deg, #45246e 0%, #2b1543 55%, #1a0c27 100%);
}

.aem-page-header .wp-block-post-title {
	color: var(--wp--preset--color--base);
	font-size: clamp(1.7rem, 1.4rem + 1.5vw, 2.2rem);
	letter-spacing: 0.04em;
	margin: 0;
}

/* --- セクション見出し: ブランドカラーのバー --- */
.wp-block-post-content h2.wp-block-heading {
	position: relative;
	padding-bottom: 0.65rem;
	letter-spacing: 0.03em;
}

.wp-block-post-content h2.wp-block-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-2));
}

.wp-block-post-content h2.wp-block-heading.has-text-align-center::after {
	left: 50%;
	transform: translateX(-50%);
}

/* 見出しへのアンカー移動が固定ヘッダーに隠れないようにする */
.wp-block-post-content :is(h2, h3, h4)[id] {
	scroll-margin-top: 7rem;
}

.aem-hero h1 {
	padding-bottom: 0;
}

/* --- セクションの連結: ルート直下とフルワイド帯は隙間なし --- */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

.wp-block-post-content > .alignfull {
	margin-block-start: 0 !important;
}

/* 通常の本文の直後に帯が来る場合だけ、間に余白を確保 */
.wp-block-post-content > :not(.alignfull) + .alignfull {
	margin-block-start: 4.5rem !important;
}

/* --- 本文セクションの余白リズム --- */
.wp-block-post-content > * {
	margin-block-start: 1.4rem;
}

.wp-block-post-content > h2.wp-block-heading {
	margin-block-start: 3.5rem;
}

/* 下層ページ: タイトル帯直後と本文末尾に呼吸を持たせる */
.wp-block-post-content > :first-child:not(.alignfull) {
	margin-block-start: 3.25rem;
}

.wp-block-post-content > :last-child:not(.alignfull) {
	margin-block-end: 4.5rem;
}

/* --- カード: 高さを揃え、上質な影に --- */
.wp-block-column.aem-card {
	align-self: stretch;
	border: 1px solid #ece4f5;
	box-shadow:
		0 1px 2px rgba(26, 12, 39, 0.05),
		0 10px 28px -14px rgba(65, 29, 98, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.wp-block-column.aem-card:hover {
	transform: translateY(-4px);
	border-color: rgba(143, 80, 202, 0.35);
	box-shadow:
		0 2px 4px rgba(26, 12, 39, 0.05),
		0 18px 40px -16px rgba(65, 29, 98, 0.3);
}

.aem-card h3 {
	font-size: 1.25rem;
	margin: 0.25rem 0 0;
}

.aem-card p {
	color: #56495f;
	font-size: 1rem;
	line-height: 1.9;
}

/* カードのアイコン */
.aem-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	color: var(--wp--preset--color--base);
	background: linear-gradient(135deg, var(--wp--preset--color--accent-2), var(--wp--preset--color--accent-3));
	box-shadow: 0 6px 14px rgba(104, 47, 157, 0.3);
	margin-bottom: 1.1rem;
}

/* --- ボタン: なめらかなホバー --- */
.wp-element-button {
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-element-button:hover {
	box-shadow: 0 6px 16px rgba(143, 80, 202, 0.35);
	transform: translateY(-1px);
}

/* --- 引用: 淡い紫の面で見せる --- */
.wp-block-post-content blockquote.wp-block-quote {
	background: var(--wp--preset--color--accent-5);
	padding: 1.25rem 1.5rem;
	border-radius: 0 8px 8px 0;
}

/* --- 表: ヘッダー行を紫に、左列を絞る --- */
.wp-block-post-content .wp-block-table th {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent-3);
	padding: 0.9rem 1rem;
	text-align: left;
	font-size: 0.95rem;
}

.wp-block-post-content .wp-block-table td {
	border-color: #e7ddf2;
	padding: 0.9rem 1rem;
	font-size: 1rem;
	line-height: 1.8;
}

.wp-block-post-content .wp-block-table td:first-child {
	width: 9em;
	background: #faf7fd;
	font-weight: 700;
}

.wp-block-post-content .wp-block-table tbody tr:nth-child(even) td:not(:first-child) {
	background: #fcfaff;
}

/* --- リスト: マーカーをブランドカラーに --- */
.wp-block-post-content ul.wp-block-list li::marker {
	color: var(--wp--preset--color--accent-1);
}

.wp-block-post-content ul.wp-block-list li {
	margin-bottom: 0.4rem;
}

/* --- 画面紹介(media-text) --- */
.aem-screen {
	margin-block-start: 2.75rem;
	align-items: center;
	grid-template-columns: 56% auto !important;
}

.aem-screen.has-media-on-the-right {
	grid-template-columns: auto 56% !important;
}

.aem-screen img {
	border: 1px solid #e7ddf2;
	border-radius: 10px;
	box-shadow: 0 12px 32px -12px rgba(26, 12, 39, 0.25);
}

.aem-screen .wp-block-media-text__content {
	padding: 0 0 0 2.25rem;
}

.aem-screen.has-media-on-the-right .wp-block-media-text__content {
	padding: 0 2.25rem 0 0;
}

.aem-screen h3 {
	font-size: 1.2rem;
	margin-top: 0;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid #ece4f5;
}

.aem-screen p {
	color: #56495f;
	font-size: 1rem;
	line-height: 1.9;
}

@media (max-width: 781px) {
	.aem-screen .wp-block-media-text__content,
	.aem-screen.has-media-on-the-right .wp-block-media-text__content {
		padding: 1.25rem 0 0 0;
	}
}

.aem-screen-note {
	color: #6b5e79;
	font-size: 0.85rem;
}

/* --- お問い合わせフォーム: カードと入力欄の整形 --- */
.aem-form-area {
	max-width: 680px;
	margin-inline: auto !important;
	border: 1px solid #ece4f5;
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	box-shadow:
		0 1px 2px rgba(26, 12, 39, 0.05),
		0 12px 32px -16px rgba(65, 29, 98, 0.2);
}

.aem-form-area label {
	display: block;
	font-weight: 700;
	font-size: 0.92rem;
	color: #3a2d47;
	margin-bottom: 0.4rem;
}

/*
 * 枠線は WCAG 1.4.11(非テキストのコントラスト 3:1)を満たす色にする。
 * #9784aa は背景 #fdfcff に対して 3.32:1。
 */
.aem-form-area input[type="text"],
.aem-form-area input[type="email"],
.aem-form-area input[type="tel"],
.aem-form-area input[type="url"],
.aem-form-area textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	border: 1px solid #9784aa;
	border-radius: 8px;
	background: #fdfcff;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.6;
	margin-bottom: 1.4rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aem-form-area textarea {
	min-height: 10em;
}

.aem-form-area input:focus,
.aem-form-area textarea:focus {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 3px rgba(143, 80, 202, 0.18);
}

.aem-form-area input:focus-visible,
.aem-form-area textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

.aem-form-area input[type="submit"],
.aem-form-area button[type="submit"] {
	display: block;
	margin: 0.5rem auto 0;
	min-width: 220px;
	padding: 0.8rem 2.5rem;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.aem-form-area input[type="submit"]:hover,
.aem-form-area button[type="submit"]:hover {
	background: var(--wp--preset--color--accent-3);
	box-shadow: 0 6px 16px rgba(143, 80, 202, 0.35);
	transform: translateY(-1px);
}

/*
 * ラジオボタン(お問い合わせの種類)。
 *
 * 選択肢はひとつずつ <label> で包む(CF7 の use_label_element)。
 * 他の項目と同じように項目名を <label> にして中にラジオを並べると、
 * label が「最初のコントロール」に紐づくため、「デモのご依頼」の文字を
 * クリックしても「お問い合わせ」が選ばれてしまう。項目名は fieldset / legend で示す。
 *
 * その代わり、fieldset のブラウザ既定の枠線を消し、legend を他の項目名と同じ体裁にし、
 * 選択肢のラベルには .aem-form-area label のブロック表示・太字を打ち消す必要がある。
 */
.aem-form-area .aem-form-fieldset {
	margin: 0 0 1.4rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

.aem-form-area .aem-form-fieldset legend {
	margin-bottom: 0.4rem;
	padding: 0;
	font-weight: 700;
	font-size: 0.92rem;
	color: #3a2d47;
}

.aem-form-area .aem-form-fieldset p {
	margin: 0;
}

.aem-form-area .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.75rem;
}

.aem-form-area .wpcf7-list-item {
	margin: 0;
}

/* ラベル全体がクリック対象。高さ 44px で WCAG 2.2 AA の 2.5.8 を満たす */
.aem-form-area .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	margin-bottom: 0;
	font-weight: 400;
	font-size: 1rem;
	color: inherit;
	cursor: pointer;
}

.aem-form-area input[type="radio"] {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--wp--preset--color--accent-1);
}

.aem-form-area input[type="radio"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

/*
 * 必須 / 任意のバッジ。CF7 は必須項目に印を付けないので、フォーム側で
 * <span class="aem-required">必須</span> を書いて、ここで体裁を与える。
 * 色だけで区別せず文字で示す(WCAG 1.4.1 の色に依存しない情報伝達)。
 */
.aem-form-area .aem-required,
.aem-form-area .aem-optional {
	display: inline-block;
	margin-left: 0.45rem;
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: 0.08em;
}

/* #682f9d は背景 #f5f0fa に対して 7.54:1 */
.aem-form-area .aem-required {
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-3);
}

.aem-form-area .aem-optional {
	background: #f0eef2;
	color: #5b5262;
}

/* --- クラシックメニュー(外観 > メニュー で管理) --- */
.aem-nav ul,
.aem-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.75rem;
}

/* タップ領域を確保する(WCAG 2.5.8 の 24px を上回る 44px) */
.aem-nav a,
.aem-footer-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.15s ease;
}

.aem-nav a {
	color: var(--wp--preset--color--contrast);
	font-size: 0.98rem;
}

.aem-nav a:hover {
	color: var(--wp--preset--color--accent-1);
}

.aem-footer-nav ul {
	display: flex;
	flex-direction: column;
}

.aem-footer-nav a {
	font-size: 0.95rem;
}

/* --- キーボードフォーカス: 親テーマ任せにしない --- */
.aem-nav a:focus-visible,
.aem-footer a:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-3);
	outline-offset: 3px;
}

.aem-hero .wp-element-button:focus-visible,
.aem-cta .wp-element-button:focus-visible,
.aem-footer a:focus-visible {
	outline-color: var(--wp--preset--color--accent-2);
}

/* --- CTA帯: フッターと区別できる紫グラデーション --- */
.aem-cta {
	background-image:
		radial-gradient(1000px 500px at 85% -15%, rgba(167, 118, 214, 0.22), transparent 65%),
		linear-gradient(150deg, #45246e 0%, #2b1543 55%, #1a0c27 100%);
}

/* --- フッター: CTA帯との境界線 --- */
.aem-footer {
	border-top: 1px solid rgba(167, 118, 214, 0.25);
}

.aem-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.aem-footer a:hover {
	color: var(--wp--preset--color--accent-2);
	text-decoration: underline;
}

/* =============================================
   スマートフォン: 固定ヘッダーの高さを抑える

   ロゴとナビ+CTA の2段になるのは項目名が日本語で
   横幅が足りないため。段数は変えずに各行を詰める。
   ============================================= */
@media (max-width: 600px) {
	html {
		scroll-padding-top: 10rem;
	}

	.wp-block-post-content :is(h2, h3, h4)[id] {
		scroll-margin-top: 10rem;
	}

	.aem-header {
		padding-top: 0.25rem !important;
		padding-bottom: 0.25rem !important;
	}

	.aem-header-logo img {
		width: 132px !important;
		height: auto;
	}

	/* ナビと CTA の間隔を詰めて、ナビ 2 項目を 1 行に収める */
	.aem-header .wp-block-group.is-nowrap {
		gap: 0.5rem;
	}

	.aem-nav ul {
		gap: 0 0.75rem;
	}

	.aem-header-cta .wp-block-button__link {
		padding: 0.5rem 1rem;
	}
}

/* =============================================
   動きの抑制設定を尊重する
   ============================================= */
@media (prefers-reduced-motion: reduce) {
	.wp-block-column.aem-card,
	.wp-element-button,
	.aem-btn-ghost .wp-block-button__link,
	.aem-nav a,
	.aem-footer-nav a,
	.aem-form-area input,
	.aem-form-area textarea,
	.aem-form-area button[type="submit"] {
		transition: none;
	}

	.wp-block-column.aem-card:hover,
	.wp-element-button:hover,
	.aem-form-area input[type="submit"]:hover,
	.aem-form-area button[type="submit"]:hover {
		transform: none;
	}
}