/* ============================================================
   td-custom.css
   WP実装側で追加した最低限のCSS（テーマ管理・Claude編集分）。
   /assets/ 配下（コーダー支給のCSS/JS）は編集しない決まりのため、
   支給CSSでは吸収できないWP都合のスタイルだけをこのファイルに集約する。
   ============================================================ */

/* ------------------------------------------------------------
   Contact Form 7 調整
   支給CSS（forms.css / pages/contact.css）は素の input/select 直下構造を
   前提にしているため、CF7 が生成するラッパー（span.wpcf7-form-control-wrap
   等）との橋渡しを行う。
   ------------------------------------------------------------ */

/* 各コントロールのラッパーを静的HTMLの input と同じ振る舞いに */
.td-form .wpcf7-form-control-wrap {
	display: block;
	flex: 1;
	min-width: 0;
}

/* セレクトは .td-select-wrap が幅を持つので中のラッパーは幅なりに */
.td-form .td-select-wrap .wpcf7-form-control-wrap {
	flex: none;
}

/* 同意チェックボックス（acceptance）を静的HTMLの
   label.ct-form__consent > input + span 構造と同じ見た目に */
.ct-form__consent .wpcf7-form-control-wrap {
	flex: none;
}

/* 同意チェック（label.td-agree内・講演依頼等）: 上の flex:1 汎用ルールで
   ラッパーがラベル幅いっぱいに伸びて中央寄せが崩れるため打ち消す */
.td-form .td-agree .wpcf7-form-control-wrap {
	flex: none;
}

.td-agree .wpcf7-list-item {
	margin: 0;
}

.ct-form__consent .wpcf7-list-item {
	margin: 0;
}

.ct-form__consent .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

/* バリデーションエラー（各フィールド下の赤文字） */
.td-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--color-error);
}

/* 送信失敗・バリデーション時のサマリー表示（フォーム下部） */
.wpcf7 form .wpcf7-response-output {
	margin: var(--space-md) 0 0;
	padding: 12px 16px;
	border: 1px solid var(--color-error);
	border-radius: var(--radius-sm);
	color: var(--color-error);
	font-size: 14px;
}

/* 送信成功時はサンクスページへ遷移するため、CF7のAJAX完了メッセージは出さない */
.wpcf7 form.sent .wpcf7-response-output {
	display: none;
}

/* メッセージが無いときに枠だけ出さない（入力途中のライブ検証中など） */
.wpcf7 form .wpcf7-response-output:empty {
	display: none;
}

/* Turnstileウィジェットの置き場 */
.td-form .td-form__turnstile {
	display: flex;
	justify-content: center;
	margin: var(--space-md) 0;
}

/* ------------------------------------------------------------
   WPが出力する img の height 属性対策
   支給CSSは aspect-ratio でサムネイルの縦横比を決めているが、
   WP（the_post_thumbnail / 画像ブロック）が出力する height 属性が
   これを打ち消して縦長に崩れるため height:auto に戻す。
   （静的HTMLの img は width/height 属性なし）
   対象: Events一覧 / Education詳細の関連記事 / 本文ギャラリー /
         KOLページの Featured Education
   ------------------------------------------------------------ */
.ev-item__thumb img,
.edu-single-article-card__thumb,
.edu-single-gallery .wp-block-image img,
.kol-edu-card__thumb {
	height: auto;
}

/* ------------------------------------------------------------
   Education一覧・Downloads一覧の絞り込み（td-custom.js用）
   支給CSSに非表示用クラスが無いためここで持つ。
   ------------------------------------------------------------ */
.edu-card.td-is-hidden,
.dl-product.td-is-hidden,
.dl-category-block.td-is-hidden {
	display: none;
}

/* Downloads一覧: カテゴリ見出しのスタイルを全ブロックで統一する。
   支給CSS（downloads.css）は :first-child のみ縮小見出しにしているが、
   静的デモはカテゴリ1つだけのため差が出ていなかった（既知事項として報告済み）。 */
.dl-content .dl-category-block h2.wp-block-heading {
	color: var(--color-text-dark);
	font-size: var(--text-xl);
}

/* ------------------------------------------------------------
   Education詳細: サイドバー（著者・関連製品）が無い記事
   支給CSSは .education-single .td-page-body に常時2カラムgrid
   （1fr 316px）を敷くため、aside非表示時に右へ空白帯が残る。
   テンプレートが付ける td-no-aside で1カラムに戻す。
   ------------------------------------------------------------ */
.education-single .td-page-body.td-no-aside {
	grid-template-columns: 1fr;
}

/* ------------------------------------------------------------
   Education一覧: ヒーローのクイックカード3枚目（Key Opinion Leaders）は
   /kol/ へのリンク（aタグ）に変更したため、
   リンクのデフォルト装飾を打ち消してbuttonカードと同じ見た目にする。
   ------------------------------------------------------------ */
a.edu-hero-card,
a.edu-hero-card:hover {
	text-decoration: none;
	color: inherit;
}

/* ------------------------------------------------------------
   サンプル請求（/sample-request/）
   国×製品選択のWP実装で必要になった状態スタイル
   （支給CSSに disabled・エラー表示のスタイルが無いため）
   ------------------------------------------------------------ */

/* 選択不可（その国では送付不可）の製品 */
.sr-product-check:has(input:disabled) {
	opacity: 0.45;
	cursor: default;
}

/* 送付不可の国を選んだ場合のエラー（仕様シートのモック準拠） */
.sr-country-error {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: var(--color-bg-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.sr-country-error__main {
	color: var(--color-error);
	font-weight: var(--font-medium);
}

.sr-country-error__sub {
	margin-top: 6px;
	font-size: var(--text-sm);
}

/* 最大選択数の案内（上限超過時に一瞬赤くする） */
.sr-max-note {
	font-size: var(--text-sm);
	color: var(--color-text-sub);
	margin-bottom: var(--space-sm);
}

.sr-max-note.is-over {
	color: var(--color-error);
	font-weight: var(--font-medium);
}

/* サーバー側検証NGで戻されたときの固定エラー（送信ボタンの上） */
.sr-submit-error {
	color: var(--color-error);
	text-align: center;
	font-size: var(--text-sm);
	margin-bottom: var(--space-sm);
}

/* 送信ボタンの不活性状態 */
.sr-selector-card__submit .wp-block-button__link:disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: default;
}

/* ------------------------------------------------------------
   KOLページ: 「View Articles」ボタン
   静的HTMLに無いWP追加要素（仕様指示: 紐づくEducation記事がある
   KOLに、絞り込み済み一覧 /education/?kol=ID へのリンクを出す）。
   kol-card内の既存トーン（kol.css）に合わせた最小スタイル。
   ------------------------------------------------------------ */
.kol-card__articles {
	display: inline-block;
	margin-top: 10px;
	padding: 5px 14px;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
	color: var(--color-primary);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.kol-card__articles:hover {
	background: var(--color-primary);
	color: #fff;
}

/* ------------------------------------------------------------
   著者・KOLの所属: リンクURL未設定のときはテンプレートが <a> ではなく
   <span> で出力する。支給CSSはクラスに下線・リンク色を当てているため、
   span のときはリンクの見た目を打ち消して通常テキストにする（仕様指示）。
   ------------------------------------------------------------ */
span.edu-single-author__clinic,
span.kol-card__clinic {
	color: var(--color-text);
	text-decoration: none;
}

/* CF7の送信スピナー: 幅24px＋左マージン24px（＋flexのgap）を占有して
   中央寄せの送信ボタンを横にずらすため、送信中も含めて常時非表示にする
   （送信中のフィードバックはCF7標準のボタンdisabled化で担保）。 */
.td-form .wpcf7-spinner {
	display: none;
}