/**
 * SWELL のスタイルとぶつかる部分だけを打ち消す
 *
 * このファイルは SWELL が有効なときだけ読み込まれる（flavor-blocks.php が判定）。
 * 他のテーマで使うときは themes/<テーマ名>-reset.css を同じ場所に足す。
 *
 * ■ ここに書いてよいもの
 *   「SWELLの既定が、ブロックの設定を壊してしまう」箇所の打ち消しだけ。
 *
 * ■ ここに書いてはいけないもの
 *   デザインの好み。**このファイルはサイト全体に読み込まれる**ので、
 *   見た目を変える指定を入れると、このプラグインと関係ないページまで変わる。
 *   見た目を整えたいものは下の「使うか選べる部分」に、クラス付きで置くこと。
 */

/* ============================================================================
 * 自動で効く部分（SWELLの既定がブロックの設定を壊すのを防ぐ）
 * ========================================================================== */

/* ここには今のところ自動で効かせる指定は無い。
 *
 * 「背景色を付けた要素にSWELLが入れる余白」の打ち消しは、以前ここに書いていたが
 * **サイト全体に当たってしまい、テーマ既定の余白を前提に作られた既存ページ
 * （フッターの帯など）まで詰まった**ため、やめた。
 * いまはプラグイン側が「サイズを指定したブロック」に限って打ち消している
 * （inc/extensions/index.php の「テーマ既定の余白の打ち消し」を参照）。
 *
 * ここに何かを足すときは、サイト内の全ページに当たることを必ず思い出すこと。 */

/* ============================================================================
 * 使うか選べる部分（ページ側でクラスを付けたときだけ効く）
 *
 * 自動では効かせない。サイト内の他のページまで巻き込むため。
 * 使いたいページで、アコーディオンを囲むブロックに `flavor-faq` を付ける。
 *
 * 色や文字サイズは変数で外に出してあるので、ページ側のCSSで上書きできる。
 *   .flavor-faq { --flavor-faq-accent: #1a3a5c; --flavor-faq-line: #e6e0d6; }
 * ========================================================================== */

.flavor-faq {
	--flavor-faq-accent: currentColor;   /* 番号・質問文・アイコンの色 */
	--flavor-faq-line: currentColor;     /* 区切り線の色 */
	--flavor-faq-num-width: 46px;        /* 番号の列幅 */
	--flavor-faq-icon-width: 28px;       /* 開閉アイコンの列幅 */
	--flavor-faq-gap: 14px;              /* 列の間隔 */
}

/* 質問行を「番号／質問文／アイコン」の3列にする。
 * SWELLの既定は番号を持たないため、自前で採番して先頭列に置く。 */
.flavor-faq .swell-block-accordion {
	counter-reset: flavor-faq;
}
.flavor-faq .swell-block-accordion__item {
	counter-increment: flavor-faq;
}
.flavor-faq .swell-block-accordion__title {
	display: grid;
	grid-template-columns: var(--flavor-faq-num-width) 1fr var(--flavor-faq-icon-width);
	gap: var(--flavor-faq-gap);
	align-items: start;
}
.flavor-faq .swell-block-accordion__title::before {
	content: counter(flavor-faq, decimal-leading-zero);
	color: var(--flavor-faq-accent);
}
.flavor-faq .swell-block-accordion__label {
	color: var(--flavor-faq-accent);
}
.flavor-faq .swell-block-accordion__icon {
	align-self: center;
	justify-self: end;
	color: var(--flavor-faq-accent);
}

/* 回答欄はSWELL側が点線と余白を持っているので、番号の列に合わせて引き直す */
.flavor-faq .swell-block-accordion.is-style-simple .swell-block-accordion__item {
	border-color: var(--flavor-faq-line);
}
.flavor-faq .swell-block-accordion.is-style-simple .swell-block-accordion__body {
	border-top: none;
	padding-left: calc(var(--flavor-faq-num-width) + var(--flavor-faq-gap));
}

/* JSが動かないときのための保険。
 * SWELLは開閉をクラスで制御しており、JSが止まると開いている項目も潰れたままになる。
 * 中身が読めないほうが困るので、JSが動くまでは開いている項目を必ず表示する。 */
html:not(.flavor-js) .flavor-faq .swell-block-accordion__item[open] > .swell-block-accordion__body {
	height: auto !important;
	opacity: 1 !important;
}