/* ============================================================================
 * Hinoki AIO Articles - frontend stylesheet
 *
 * 読み込みタイミング: wp_enqueue_scripts priority 20、
 *   is_singular( aio_article ) / is_post_type_archive / is_tax(aio_category|aio_tag) 時のみ。
 *   (Hinoki_AIO_Assets::enqueue_styles)
 *
 * 構成:
 *   Layer 0  CSSカスタムプロパティ（テーマ _common.scss $mainColor: #647B64 のコピー）
 *   Layer 1  テーマテンプレが使うスネークケースクラスへの加筆
 *            (.sec_aio スコープ内に閉じることで既存ページに副作用を出さない)
 *   Layer 2  プラグイン PHP 出力／フォールバックテンプレ用の aio- ハイフンクラス
 *   Layer 3  Siftly エディタDOM残骸の保険
 *
 * テーマ無修正方針のため、ここで触るのは新規クラス（aio_*, aio-*）と
 * .sec_aio 配下に限定する。テーマ既存の section_wrap / inner / inner_sm /
 * post_content / list_pagination / blog_ttl_wrap などには手を出さない。
 * ============================================================================ */


/* ----- Layer 0: tokens ----- */
:root {
	--aio-color-main: #647B64;        /* テーマ _common.scss $mainColor */
	--aio-color-bg-soft: #f6f8f5;
	--aio-color-border: #e3e3e3;
	--aio-color-border-soft: #ececec;
	--aio-color-text-sub: #666;
	--aio-radius: 4px;
	--aio-gap: 1.5rem;
}


/* ============================================================================
 * Layer 1: テーマテンプレ側スネークケースクラス
 *   (single-aio_article.php / archive-aio_article.php / inc/inc-aio_article.php)
 * ============================================================================ */

/* ---- タイトル領域 ---- */
.aio_ttl_wrap .aio_reviewed {
	margin-top: .25rem;
	font-size: .85rem;
	color: var(--aio-color-text-sub);
}
.aio_writer {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 1rem 0 .5rem;
}
.aio_writer dt {
	flex: 0 0 auto;
	margin: 0;
}
.aio_writer dt img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.aio_writer dd {
	margin: 0;
	font-size: .95rem;
}

/* ---- 本文セクション ---- */
.sec_aio .aio_section_ttl {
	margin: 2.5rem 0 .75rem;
	padding-left: .6em;
	border-left: 4px solid var(--aio-color-main);
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight: 700;
}
.sec_aio .aio_summary {
	margin: 1rem 0 2rem;
	padding: 1rem 1.25rem;
	background: var(--aio-color-bg-soft);
	border-radius: var(--aio-radius);
}
.sec_aio .aio_summary p {
	margin: 0;
	line-height: 1.8;
}

.sec_aio .aio_points {
	margin: 0 0 2rem;
}
.sec_aio .aio_points ul {
	margin: 0;
	padding-left: 1.5em;
	list-style: disc;
}
.sec_aio .aio_points li {
	margin: .35em 0;
	line-height: 1.7;
}

.sec_aio .aio_content {
	margin: 1.5rem 0 2.5rem;
	line-height: 1.9;
}
.sec_aio .aio_content h2 {
	margin: 2.5rem 0 1rem;
	padding-left: .6em;
	border-left: 4px solid var(--aio-color-main);
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight: 700;
}
.sec_aio .aio_content h3 {
	margin: 2rem 0 .75rem;
	font-size: 1.1rem;
	line-height: 1.5;
	font-weight: 700;
}
.sec_aio .aio_content h4 {
	margin: 1.5rem 0 .5rem;
	font-size: 1rem;
	font-weight: 700;
}
.sec_aio .aio_content p {
	margin: 0 0 1em;
}
.sec_aio .aio_content ul,
.sec_aio .aio_content ol {
	margin: 1rem 0 1.5em;
	padding: 1rem 1rem 1rem 1.25rem;
	background: var(--aio-color-bg-soft);
	border-left: 3px solid var(--aio-color-main);
	border-radius: var(--aio-radius);
	list-style: none;
	counter-reset: aio-li;
}
.sec_aio .aio_content li {
	position: relative;
	margin: .35em 0;
	padding-left: 1.5em;
	line-height: 1.7;
}
.sec_aio .aio_content ul > li::before {
	content: "";
	position: absolute;
	left: .25em;
	top: .7em;
	width: .4em;
	height: .4em;
	border-radius: 50%;
	background: var(--aio-color-main);
}
.sec_aio .aio_content ol {
	counter-reset: aio-li;
}
.sec_aio .aio_content ol > li {
	counter-increment: aio-li;
}
.sec_aio .aio_content ol > li::before {
	content: counter(aio-li) ".";
	position: absolute;
	left: 0;
	top: 0;
	min-width: 1.25em;
	color: var(--aio-color-main);
	font-weight: 700;
}
/* Siftly は <li><p>…</p></li> のように p をネストする。
   p のテーマ既存マージン (margin-top:35px) を li 内では中和。 */
.sec_aio .aio_content li > p,
.sec_aio .aio_content li > p:not([class]) {
	margin: 0;
	display: inline;
}
.sec_aio .aio_content blockquote {
	margin: 1.5rem 0;
	padding: .75rem 1rem;
	border-left: 3px solid var(--aio-color-border);
	background: var(--aio-color-bg-soft);
	color: var(--aio-color-text-sub);
}
.sec_aio .aio_content table {
	width: 100%;
	margin: 1rem 0 2rem;
	border-collapse: collapse;
	font-size: .95rem;
}
.sec_aio .aio_content th,
.sec_aio .aio_content td {
	padding: .6rem .8rem;
	border: 1px solid var(--aio-color-border);
	vertical-align: top;
	text-align: left;
}
.sec_aio .aio_content th {
	background: var(--aio-color-bg-soft);
	font-weight: 700;
}
/* テーマ既存 .post_content table td:first-child { background:#a3ebd9 } を上書き */
.sec_aio .aio_content table td:first-child {
	background: #DDE2DD;
}
.sec_aio .aio_content a {
	color: var(--aio-color-main);
	text-decoration: underline;
}
.sec_aio .aio_content .citation-ref {
	margin-left: .15em;
	font-size: .75em;
	vertical-align: super;
	text-decoration: none;
}

/* ---- Key Takeaways (本文内 h2 + ul を識別) ---- */
.sec_aio .aio_content .aio-key-takeaways__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 2.5rem 0 0;
	padding: .75rem 1rem;
	border-left: none;
	background: var(--aio-color-main);
	color: #fff;
	border-radius: var(--aio-radius) var(--aio-radius) 0 0;
	font-size: 1.05rem;
}
.sec_aio .aio_content .aio-key-takeaways__title::before {
	content: "★";
	color: #f9d976;
}
.sec_aio .aio_content .aio-key-takeaways__list {
	margin: 0 0 2rem;
	padding: 1.25rem 1.25rem 1.25rem 2.75rem;
	background: var(--aio-color-bg-soft);
	border: 1px solid var(--aio-color-main);
	border-top: none;
	border-left-width: 1px;
	border-radius: 0 0 var(--aio-radius) var(--aio-radius);
	list-style: disc;
}
.sec_aio .aio_content .aio-key-takeaways__list > li {
	margin: .5em 0;
	line-height: 1.75;
}
.sec_aio .aio_content .aio-key-takeaways__list li::marker {
	color: var(--aio-color-main);
}

/* ---- 本文内 FAQ セクション (Siftly が出す .faq-item) ----
 *   Siftly DOM 構造:
 *     <div class="react-renderer node-faqItem">
 *       <div class="faq-item" style="white-space:normal">
 *         <div class="faq-item-content" style="white-space:pre-wrap">
 *           <div ...>
 *             <h3 class="faq-question">…</h3>
 *             <p class="faq-answer">…</p>
 *           </div>
 *         </div>
 *       </div>
 *     </div>
 *   インラインの white-space:pre-wrap が改行を出すので normal に倒し、
 *   flex は使わず padding + 擬似要素 absolute で Q/A ラベルを置く。
 */
.sec_aio .aio_content .aio-inline-faqs__title {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}
.sec_aio .aio_content .node-faqItem {
	display: block;
	margin: 0;
	padding: 0;
	height: auto;
	min-height: 0;
}
.sec_aio .aio_content .node-faqItem + .node-faqItem .faq-item {
	border-top: 1px solid var(--aio-color-border-soft);
}
.sec_aio .aio_content .faq-item {
	display: block;
	margin: 0;
	padding: 1.5em 0;
	height: auto;
	min-height: 0;
	background: transparent;
	white-space: normal !important;
}
/* Siftly が <div class="faq-item-content"> や中の <div> に
   inline style で white-space:pre-wrap を当てるため改行が肥大化する。
   display:contents で中間 div をレイアウト計算から消す。
   ※ .faq-item にも data-node-view-wrapper が付くため、
     属性セレクタから .faq-item を明示的に除外しないと
     .faq-item の display:block / padding が上書きされてしまう。 */
.sec_aio .aio_content .faq-item-content,
.sec_aio .aio_content .faq-item-content > div,
.sec_aio .aio_content [data-node-view-content]:not(.faq-item),
.sec_aio .aio_content [data-node-view-content-react]:not(.faq-item),
.sec_aio .aio_content [data-node-view-wrapper]:not(.faq-item) {
	display: contents !important;
	white-space: normal !important;
}
.sec_aio .aio_content .faq-question {
	position: relative;
	margin: 0 0 .4rem;
	padding: 0 0 0 1.75em;
	border: none;
	background: none;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: #222;
}
.sec_aio .aio_content .faq-question::before {
	content: "Q.";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--aio-color-main);
	font-weight: 700;
}
.sec_aio .aio_content .faq-answer {
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 0 1.75em;
	line-height: 1.75;
	color: #333;
	font-size: .95rem;
}
.sec_aio .aio_content .faq-answer::before {
	content: "A.";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--aio-color-text-sub);
	font-weight: 700;
}

/* ---- FAQ ---- */
.sec_aio .aio_faqs {
	margin: 2rem 0;
}
.sec_aio .aio_faqs_list {
	margin: 0;
}
.sec_aio .aio_faqs_list dt {
	margin: 1.25rem 0 .35rem;
	padding-left: 1.5em;
	position: relative;
	font-weight: 700;
	line-height: 1.6;
}
.sec_aio .aio_faqs_list dt::before {
	content: "Q.";
	position: absolute;
	left: 0;
	color: var(--aio-color-main);
	font-weight: 700;
}
.sec_aio .aio_faqs_list dd {
	margin: 0 0 1rem 1.5em;
	padding-left: 1.5em;
	position: relative;
	line-height: 1.8;
	color: #333;
}
.sec_aio .aio_faqs_list dd::before {
	content: "A.";
	position: absolute;
	left: 0;
	color: var(--aio-color-text-sub);
	font-weight: 700;
}

/* ---- 著者情報セクション ---- */
.sec_aio .aio_author {
	margin: 2.5rem 0;
}
.aio_related_author {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1rem 0;
	padding: 1rem;
	background: var(--aio-color-bg-soft);
	border-radius: var(--aio-radius);
}
.aio_related_author dt {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
}
.aio_related_author dt img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.aio_related_author dt .info p {
	margin: 0;
	line-height: 1.5;
}
.aio_related_author dt .info .name {
	font-weight: 700;
}
.aio_related_author dd {
	flex: 1 1 100%;
	margin: 0;
	color: var(--aio-color-text-sub);
	font-size: .9rem;
	line-height: 1.7;
}

/* ---- アーカイブ／関連記事 ---- */
.list_aio_article {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--aio-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
.list_aio_article > li {
	margin: 0;
}
.card_aio_article {
	display: block;
	text-decoration: none;
	color: inherit;
}
.card_aio_article .slide_image {
	margin: 0 0 .75rem;
	overflow: hidden;
	border-radius: var(--aio-radius);
}
.card_aio_article .slide_image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .3s ease;
}
.card_aio_article:hover .slide_image img {
	transform: scale(1.03);
}
.card_aio_article .list_blog__text {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.card_aio_article .list_blog__text time {
	font-size: .8rem;
	color: var(--aio-color-text-sub);
}
.card_aio_article .ttl {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 700;
}
.list_aio_article .aio_writer {
	margin: .5rem 0 0;
}
.list_aio_article .aio_writer dt img {
	width: 32px;
	height: 32px;
}
.list_aio_article .aio_writer dd {
	font-size: .85rem;
	color: var(--aio-color-text-sub);
}


/* ============================================================================
 * Layer 2: aio- ハイフンプレフィックス
 *   プラグイン PHP 出力 (hinoki_aio_render_toc) と templates/ フォールバック用
 * ============================================================================ */

/* ---- 目次 ---- */
.aio-toc {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid var(--aio-color-border);
	border-radius: var(--aio-radius);
}
.aio-toc__title {
	margin: 0 0 1rem;
	padding: 0 0 .5rem;
	border: none;
	border-bottom: 2px solid var(--aio-color-main);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--aio-color-main);
	letter-spacing: .05em;
}
.aio-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: aio-toc-h2;
}
.aio-toc__sublist {
	margin: .25rem 0 .5rem;
	padding: 0 0 .25rem 1.5rem;
	list-style: none;
	counter-reset: aio-toc-h3;
}
.aio-toc__list > li {
	counter-increment: aio-toc-h2;
	margin: 0;
}
.aio-toc__sublist > li {
	counter-increment: aio-toc-h3;
	margin: 0;
}
.aio-toc__list > li > a {
	position: relative;
	display: block;
	padding: .65rem .5rem .65rem 2.25rem;
	border-radius: 3px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: #222;
	text-decoration: none;
	transition: background-color .15s ease;
}
.aio-toc__list > li > a::before {
	content: counter(aio-toc-h2, decimal-leading-zero);
	position: absolute;
	left: .5rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--aio-color-main);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .03em;
}
.aio-toc__sublist > li > a {
	position: relative;
	display: block;
	padding: .5rem .5rem .5rem 1.5rem;
	border-radius: 3px;
	font-size: .9rem;
	line-height: 1.5;
	color: #555;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.aio-toc__sublist > li > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: .75rem;
	height: 1px;
	background: var(--aio-color-main);
	opacity: .6;
}
.aio-toc__list a:hover,
.aio-toc__list a:focus {
	background: var(--aio-color-bg-soft);
	color: var(--aio-color-main);
}

/* ---- フォールバックテンプレ (plugins/.../templates/single|archive) ---- */
.aio-single {
	max-width: 880px;
	margin: 2rem auto;
	padding: 0 1rem;
}
.aio-article__title {
	font-size: 2rem;
	line-height: 1.4;
	margin: 0 0 1rem;
}
.aio-article__reviewed {
	font-size: .85rem;
	color: var(--aio-color-text-sub);
}
.aio-article__section-title {
	margin: 2rem 0 .75rem;
	padding-left: .5rem;
	border-left: 4px solid var(--aio-color-main);
	font-size: 1.25rem;
}
.aio-article__summary {
	padding: 1rem 1.25rem;
	background: var(--aio-color-bg-soft);
	border-radius: var(--aio-radius);
}
.aio-article__content h2 { margin-top: 2.5rem; }
.aio-article__content h3 { margin-top: 1.5rem; }
.aio-article__content table {
	width: 100%;
	margin: 1rem 0;
	border-collapse: collapse;
}
.aio-article__content th,
.aio-article__content td {
	padding: .5rem;
	border: 1px solid var(--aio-color-border);
}
.aio-faqs dt {
	font-weight: 700;
	margin-top: 1rem;
}
.aio-faqs dd {
	margin: .25rem 0 1rem 1rem;
}
.aio-author {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.aio-author__avatar img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}
.aio-author__name {
	font-weight: 700;
	margin: 0 0 .5rem;
}
.aio-author__bio {
	margin: 0;
	font-size: .9rem;
	color: var(--aio-color-text-sub);
}

.aio-archive {
	max-width: 1100px;
	margin: 2rem auto;
	padding: 0 1rem;
}
.aio-archive__list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--aio-gap);
}
.aio-archive__item a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.aio-archive__thumb img {
	width: 100%;
	height: auto;
}


/* ============================================================================
 * Layer 3: Siftly エディタDOM残骸の保険
 *   通常は content-parser で DOM 除去するが、二重防衛として CSS で隠す。
 * ============================================================================ */
.faq-remove-btn,
.ProseMirror-separator,
.ProseMirror-trailingBreak {
	display: none !important;
}


/* ============================================================================
 * Responsive
 * ============================================================================ */
@media (max-width: 768px) {
	.sec_aio .aio_section_ttl,
	.sec_aio .aio_content h2 {
		font-size: 1.15rem;
	}
	.aio_related_author {
		flex-direction: column;
	}
	.aio_related_author dt img {
		width: 60px;
		height: 60px;
	}
}