/* Tailwind（CDN）で表現しきれない微調整のみをここに書く。 */

/*
 * Tailwind CDNが自動注入するPreflight（グローバルCSSリセット）はショートコードの中身に
 * スコープされず、ページ全体に効いてしまう。特に img を display:block にリセットするため、
 * テーマのヘッダーロゴ画像が意図せずブロック化され、元々ついていたmargin-topが余白のない
 * ラッパー要素を突き抜けて上に染み出し、管理バーとヘッダーの間に隙間ができる副作用がある。
 * （displayをinlineに戻す対処は、テーマ側がdisplay:blockを前提にロゴを中央寄せしており
 *   ロゴの位置がずれる別の不具合を招くため不採用。marginだけを狙って打ち消す）
 */
#header img {
	margin-top: 0 !important;
}

.shindan-question {
	animation: shindan-fade-in 0.35s ease;
}

@keyframes shindan-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 広告スロットが選択肢と誤って隣接しないよう、Tailwind未読込時にも最低限の余白を保証する */
.shindan-ad-slot {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

/*
 * 広告が読み込まれる前後でスペースの高さが変わり、ページ遷移直後にコンテンツが
 * ガクッとずれる（レイアウトシフト）のを防ぐため、広告枠ぶんの高さを事前に確保しておく。
 * ラベル文言（約24px）＋広告本体の最低高さ（100px、shindan-shortcodes.php側の
 * min-height指定と合わせている）ぶん。実際の広告ユニットのサイズが確定したら、
 * この数値も実測に合わせて調整すること。
 */
.shindan-ad-slot {
	min-height: 148px;
}

/*
 * DIVERテーマの style.css がすべての <button> 要素に対して
 * button:hover { background:...; color:#fff; text-shadow:0 -1px rgba(0,0,0,.4); }
 * というグローバルなルールを持っている。Tailwindのhover:クラスはbackground/borderは
 * 上書きできるが、color/text-shadowは明示的に指定しないと上記ルールが残ってしまい、
 * ホバー時に文字が白（背景も薄い色のため実質見えない）＋影で滲んで見える不具合が起きる。
 * ここで明示的に上書きして無効化する。
 */
.shindan-choice-btn:hover {
	color: #374151; /* Tailwind text-gray-700 */
	text-shadow: none;
}
.shindan-choice-btn.text-pink-700:hover {
	color: #be185d; /* Tailwind text-pink-700（選択済みの場合はホバーでも色を維持） */
}
.shindan-next-btn:hover {
	text-shadow: none;
}

/*
 * 同じ理由（上記参照）。DIVERテーマのリンク色指定がTailwindのtext-whiteを上書きしてしまい、
 * 説明ページの「診断を始める」ボタン（グラデーション背景の<a>タグ）の文字が背景に埋もれて
 * 視認性が低くなる問題があったため、CTAボタンの文字色を確実に白へ固定する
 * （enquete機能の.enquete-cta-btnと同じ対処）。
 */
.shindan-cta-btn,
.shindan-cta-btn:hover,
.shindan-cta-btn:visited {
	color: #fff !important;
	text-decoration: none;
	text-shadow: none;
}