/*
 * お問い合わせフォーム用スタイル
 * Contact Form 7 出力の調整。/contact/ 配下のみで読み込まれる。
 */

/*
 * .p-main-section は display:flex + align-items:flex-start なので、
 * 唯一の子である .wpcf7 ラッパーが shrink-to-fit になり、コンテンツ幅に
 * 依存して .contact-form / .form-footer まで連鎖的に狭くなる。
 * 特に確認画面は readonly テキストしか中身が無く、入力画面より顕著に
 * 狭くなるため、CF7 ラッパー〜<form> を明示的に 100% 幅に固定する。
 */
.contact-form-cf7 .wpcf7,
.contact-form-cf7 .wpcf7-form {
    width: 100%;
}

/*
 * CF7 が出力する .wpcf7-form-control-wrap は <span> なので display:inline。
 * 内側の input/select/textarea に w-full を当てても基準にならず幅が広がらないため、
 * フォーム内ではブロック化して 100% 幅で伸びるようにする。
 */
.form-input .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/*
 * 郵便番号 + 住所検索ボタンのように input と button を横並びにしている行。
 * flex 内の `.w-full` は `width:100%` なので隣の button と取り合いになる。
 * flex-basis 0 + flex-grow 1 にしてボタン分を引いた残りを input 側で埋める。
 * min-width:0 は input の最小幅でラッパーが縮まらない問題の予防。
 */
.form-input .flex > .w-full {
    flex: 1 1 0;
    min-width: 0;
}

/*
 * demo の希望日時セクション ([date] + [select 時間帯] の横並び) のように
 * `.flex` の直接の子として CF7 wrap span が置かれる場合、上記の
 * .wpcf7-form-control-wrap { display:block; width:100% } が効いて
 * date input が 100% 幅になり、隣の時間帯セレクトが段落ちする。
 * `.flex` 直下の wrap だけは内容幅で扱い、flex の wrap behaviour に任せる。
 */
.form-input .flex > .wpcf7-form-control-wrap {
    display: inline-block;
    width: auto;
    flex: 0 0 auto;
}

/*
 * CF7 Conditional Fields の [group ...] が生成する <div data-class="wpcf7cf_group">
 * は width 未指定。親が flex-direction:column + align-items:flex-start なので
 * shrink-to-fit になり、中の住所セクション (.flex-blocks など) が横幅いっぱいに
 * 広がらない。明示的に 100% にする。
 * 例: [group address-domestic] / [group address-overseas] が該当。
 */
.contact-form [data-class="wpcf7cf_group"] {
    width: 100%;
}

/*
 * 確認画面 (.contact-confirm) では [group] ラッパー自体を layout から除外したい。
 * 親 .form-item は flex column + gap で各ラベル/値ペアを縦並びにしているため、
 * ラッパー <div> が間に挟まると gap が効かず住所欄の余白が崩れる。
 * display:contents でラッパーを透過化し、中の label/value ペアが form-item の
 * 直接の flex 子として扱われるようにする。
 *
 * 補足: テンプレ側で [group ... class:contents] を付ければ .contents 経由でも
 * 同じ display:contents が当たるが、CF7 管理画面側の貼り直しが必要になる。
 * こちらは管理画面同期に依存しないフォールバックとして、属性セレクタで強制適用する。
 *
 * 条件表示で非表示にする場合は JS が style="display:none" を後がけするため
 * （cf7-conditional-fields の $group.hide()）、トグル動作には影響しない。
 */
.contact-confirm [data-class="wpcf7cf_group"] {
    display: contents;
}

/*
 * 各フィールドのラベルを太字化。
 * デフォルトの .form-label 内 <label> は font-weight 未指定（ブラウザデフォルト）
 * または .text-Small_Bold_Compact の 500。視認性を上げるため 600 に統一する。
 */
.contact-form .form-label label {
    font-weight: 600 !important;
}

/*
 * バッジ（必須/任意）の付かないサブタイトルだけ、ラベル→入力枠の間隔を詰める。
 * 密着（0px）だと詰まりすぎるので、--space-xs(8px) の小さな余白を残す。
 * 既定では親の gap（--space-md=16px）でラベルが入力枠から離れて見えるのを、半分の 8px に寄せる。
 *
 * 対象（バッジ無しのサブタイトル）:
 *   - 住所サブ項目: 郵便番号 / 都道府県 / 市区町村 / 番地（ネスト .form-item、ラベルのみ）
 *   - サブラベル: お住まいの地域 / 製品の使用国 / 条件表示の補足記入欄 等（.form-sub-label）
 *   - demo「実演希望日時」の 第1〜3希望（後述の別ルール）
 *
 * 対象外（必須/任意バッジ付き＝元の 16px のまま）:
 *   - メイン項目ラベル（貴社名・電話番号・お問い合わせ内容 等）。form-label が .flex-blocks の
 *     直下ではない、または直後が form-sub-label/[group] のため下記セレクタに当たらず現状維持。
 *   - バッジ付きのネストサブ項目（検討機種の 製品種類/機種、使用機械の 機械カテゴリ/機械名/機械No）。
 *     form-label 内に .form-badge を持つので :not(:has()) で除外し、既定 16px を維持する。
 *   - 確認画面のサブ項目は素の <div>（ネスト .form-item でも form-sub-label でもない）。
 *   - 「ご住所」等の見出しラベルは直後が form-sub-label / [group] のため当たらず、
 *     見出し→小見出しの階層（実測 ≈38px）はそのまま保たれる。
 *
 * 構造別の当て方:
 *   V1: ネストした .form-item（住所サブ項目）。.form-item の gap を 8px に。
 *       バッジ付きネスト項目は :not(:has(> .form-label .form-badge)) で除外。
 *   V2/V4: form-sub-label の直後に form-input / コントロール。親 .flex-blocks の gap(16px) を
 *          負マージンで打ち消しつつ 8px ぶんだけ残す。
 */
.contact-form .form-item .form-item:not(:has(> .form-label .form-badge)) {
    gap: var(--space-xs);
}
.contact-form .flex-blocks > .form-sub-label + .form-input,
.contact-form .flex-blocks > .form-sub-label + .wpcf7-form-control-wrap {
    margin-top: calc(-1 * var(--space-md) + var(--space-xs));
}

/*
 * 追加パターン: demo「実演希望日時」の 第1〜3希望。
 * ラベル（.text-Small_Bold_Compact）と date+time 行（.flex）が .form-input の中に交互に並ぶ。
 * テンプレ側は .form-input に gap-(--space-md) を付けているがこのユーティリティはビルド成果物に
 * 無く、基準 .form-input{gap:10px} が効いて「ラベル↔行」が 10px 等間隔になり、ラベルが行間に
 * 浮く（住所と同じ現象の小型版）。
 * ラベル直後の行だけを負マージンで引き上げ、他のサブタイトルと同じ --space-xs(8px) の余白に揃える。
 * 行→次ラベルの 10px はそのまま残るので、第1/第2/第3希望のグループ区切りは保たれる。
 */
.contact-form .form-input > .text-Small_Bold_Compact + .flex {
    margin-top: calc(-10px + var(--space-xs)); /* 基準 .form-input の gap(10px) を 8px に詰める */
}

/*
 * thanks ページの「お問い合わせを受け付けました」見出しを少し大きく。
 * デフォルトの .text-2XLarge_Bold (= --fontSize-xl: 20px/24px) より +3px。
 * `/contact/{slug}/thanks/` 配下の各 page-contact-{slug}-thanks.php で使用。
 */
.contact-form-cf7 .title.text-2XLarge_Bold {
    font-size: calc(var(--fontSize-xl) + 3px);
}

/*
 * 確認画面の textarea (お問い合わせ内容など) のボーダーを消す。
 * .form-input textarea は border-width:1px + padding + 固定 height が
 * 入っているため、確認画面では他の readonly フィールド (テキスト表示) と
 * 浮いて見える。border / 固定 height / 余計な padding を外して
 * プレーンテキストに近い見た目に揃える。
 */
.contact-confirm .form-input textarea {
    border-width: 0;
    padding: 0;
    height: auto;
}

/*
 * 確認画面の input / textarea にフォーカスが当たらないようにする。
 * JS 側で readonly + tabindex="-1" を付与しているが、クリックでフォーカスが
 * 当たるとカーソル点滅・選択ハイライトが出てしまうので CSS でも遮断する。
 * select / radio / checkbox は confirmed テンプレ側で [text ... readonly]
 * に置換済みなのでここで対象外。
 */
.contact-confirm .form-input input,
.contact-confirm .form-input textarea {
    pointer-events: none;
    cursor: default;
}

/*
 * 確認画面の readonly テキスト入力の横はみ出し対策（SP 横スクロール = "PC 表示"）。
 *
 * confirmed テンプレの値フィールドは [text ... readonly class:text-Large_Compact] で、
 * 入力画面と違い `class:w-full`（width:100%）を持たない。そのため CF7 既定の
 * size=40 由来の固定幅（≈331px）でレンダリングされる。input は flex column の
 * .form-item / .form-input の中にあり、これら flex アイテムは既定の min-width:auto で
 * 「中身（=331px の input）より細くは縮まない」ため、ビューポート幅が約 391px 未満の
 * 端末では行ごとビューポート外へはみ出し、横スクロール（＝PC レイアウトのように見える）
 * になる。（main.overflow-clip が効く環境ではクリップされ値が右端で切れる。）
 *
 * 修正は SP（≤768px、レイアウトが 1 カラムに切り替わる既存ブレークポイント）に限定し、
 *   - flex 連鎖に min-width:0 を与えて中身より細く縮めるようにし、
 *   - input/textarea に width:100% を与えて親幅へ追従させる
 * ことで親幅 = ビューポート幅に収める。max-width:100% は安全網。
 * PC（>768px・サイド+メイン 2 カラム）はルール対象外なので従来の 331px 幅のまま、
 * 表示への影響はない。同意 checkbox は intrinsic 幅が小さく width:100% の影響を受けない。
 *
 * 注: 値が input 幅を超える場合は 1 行 input のため右端で切れる（入力画面と同挙動）。
 */
@media (max-width: 768px) {
    .contact-confirm .form-item,
    .contact-confirm .form-input,
    .contact-confirm .wpcf7-form-control-wrap {
        min-width: 0;
    }
    .contact-confirm .form-input input,
    .contact-confirm .form-input textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/*
 * CF7 がフォーム末尾に出力する `.wpcf7-response-output`（送信時の総合メッセージ枠）を非表示。
 * Multi-Step 構成では成功時に thanks ページへ遷移し、エラーは各フィールドの
 * `.wpcf7-not-valid-tip` で個別に表示されるため、総合メッセージ枠は不要。
 */
.contact-form-cf7 .wpcf7-response-output {
    display: none;
}

/*
 * セレクトボックスの下矢印アイコン (.form-select-icon) がバリデーションエラー
 * 表示時に下方向にズレる問題の修正。
 *
 * CF7 はバリデーション失敗時、`.wpcf7-form-control-wrap` の中の <select> の直下に
 * `.wpcf7-not-valid-tip` (display:block) を挿入する。これによって wrap の縦サイズが
 * select 単体より大きくなり、style.css 側で `.form-select-icon { top: 50% }` で
 * 配置していた矢印アイコンが select の中央より下に流れてしまう。
 *
 * tip は通常フローから外してレイアウト上の高さに影響させないようにし、wrap 自体は
 * 常に select の高さに保つ。tip は wrap の真下に absolute で表示される。
 *
 * `:has()` で tip 出現時のみ form-item に padding-bottom を当てて、次のフィールドと
 * 重ならないようにする。`:has()` 未対応ブラウザでは padding が当たらないが、tip 自体は
 * absolute で見えるため最低限の可読性は確保できる。
 */
.form-input .form-select-wrap .wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-xs);
    z-index: 1;
}
.form-item:has(.form-select-wrap .wpcf7-not-valid-tip) {
    padding-bottom: calc(1em + var(--space-xs));
}

/*
 * 実演希望日時セクション ([date] + [time select] の横並び行) のレイアウト調整。
 *
 * 1. 矢印アイコンの上下ズレ対策
 *    style.css 側で `.form-input .form-select-wrap { align-self: stretch }` が当たっており、
 *    flex row 内では cross-axis (縦) に効いて、隣の `<input type="date">` が縦に大きい分
 *    wrap も縦に引き伸ばされる。結果として wrap 中央の矢印 (`.form-select-icon { top: 50% }`)
 *    が select の中央からズレる。横並び行では `align-self: center` で抑止する。
 *    (縦並びの form-input ではこのルールが効かないため、`align-self: stretch` の
 *    横幅 100% 挙動はそのまま維持される)
 *
 * 2. 横幅の確保
 *    HTML 側で `.form-select-wrap` に `max-w-[200px]` を付けているが、Tailwind 任意値の
 *    `max-w-[200px]` はビルド成果物 (style.css/bundle.css) に含まれておらず実際には効いていない。
 *    その結果 time select は options の自然幅 (「時間帯」「午前」など短文) で縮み、
 *    バリデーション tip が複数行に折り返して下のフィールドへかぶる。
 *    `[date]` と `time [select]` の双方に同じ explicit width を当てて、視覚的に揃えつつ
 *    tip が 1 行に収まる幅を確保する。
 */
.form-input .flex > .form-select-wrap {
    align-self: center;
    width: 240px;
    max-width: 100%;
}
.form-input .flex input[type="date"] {
    width: 240px;
    max-width: 100%;
}

/*
 * 3. [date] フィールドのバリデーション tip も通常フローから外す（がたつき対策）。
 *    time select 側 (上の .form-select-wrap .wpcf7-not-valid-tip) は absolute 化済みだが、
 *    [date] 側の tip は通常フローのままで、エラー表示時に date の wrap が tip 分だけ縦に
 *    伸びる。行 (.flex) の高さが変わり、隣の time select (align-self:center) が下方向へ
 *    再センタリングされて「日付と時間帯フィールドがガタつく」。
 *    tip を absolute にして date wrap の高さを入力欄の高さに保ち、行の高さを一定にする。
 *    絶対配置にした分、tip 出現時のみ行へ下マージンを足し、次の「第N希望」行と重ねない。
 *    date 行に限定するため `:has(input[type="date"])` でスコープし、他セクションの
 *    flex 行 (郵便番号+ボタン等) には影響させない。
 */
.form-input .flex:has(input[type="date"]) > .wpcf7-form-control-wrap {
    position: relative;
}
.form-input .flex:has(input[type="date"]) > .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-xs);
    z-index: 1;
}
.form-input .flex:has(input[type="date"]):has(.wpcf7-not-valid-tip) {
    margin-bottom: calc(1.2em + var(--space-xs));
}

/*
 * 「使用可能国について」リンク (/countries/ への外部リンク) に下線を付与。
 * 海外チェック時に出現する使用国セレクト直下の補足リンクで、
 * デフォルトのテキストでは通常テキストと区別が付きにくいため明示的に下線を当てる。
 */
.contact-form .form-input a[href$="/countries/"] {
    text-decoration: underline;
}

/*
 * フォームフッターの注意書き（プライバシーポリシー導入文）は左揃え。
 * コンパイル済み style.css 側で `.page-contact .form-footer-text { text-align:center }`
 * が当たっており、単に `.form-footer-text` だと詳細度負けするため、
 * 同等以上のセレクタ（.page-contact .form-footer-text p）で <p> 自身に上書きする。
 */
.page-contact .form-footer-text p {
    text-align: left;
}

/*
 * デモ入力ステップ「不二精機営業所・ショールーム」ラジオ項目の横に
 * JS (initDemoLocationAnchor) で挿入する「不二精機各デモ可能場所」アンカーの
 * スタイル。<label> は display:flex; gap:var(--space-xs) で
 * radio + ラベルテキスト + アンカー を横並びにする flex container なので、
 * gap は親側で確保される。
 *
 * 下線はラッパー span ではなく各 .form-link に個別で当てる。
 * （span 側に当てると下線が子要素のマージン間にも引かれてしまい、
 *  2 リンクの下線が連続して見えるため。）
 * 2 リンクの間には区切りの「/」(.js-demo-location-anchor-sep) を置く。
 */
.js-demo-location-anchor .form-link {
    text-decoration: underline;
}
/*
 * 区切りの「/」。<a> ではなく <span> なので下線は付かない。
 * 左右に --space-xs(8px) の余白を取り、2 リンクの下線を分断する。
 */
.js-demo-location-anchor-sep {
    margin: 0 var(--space-xs);
    text-decoration: none;
}

/*
 * 送信ボタン押下後の体感改善（共3, contact-form.js initSubmitLoadingState）。
 * CF7 のスピナーは点滅して見えるので隠し、ボタン側の「送信中…」表示に一本化する。
 */
.contact-form-cf7 .wpcf7-spinner {
    display: none;
}
.form-submit-btn.is-submitting {
    opacity: 0.7;
    pointer-events: none;
}

/*
 * 「入力内容を確認する」押下時にバリデーションエラーで進めない場合、
 * 送信ボタン直下に出すサマリ文言（contact-form.js initInvalidSubmitSummary）。
 * フィールド個別の .wpcf7-not-valid-tip と同じ赤系で揃える。
 */
.form-error-summary {
    color: #dc3232;
    text-align: center;
    margin-top: var(--space-sm);
}

/*
 * フォーム内テキスト入力／テキストエリアのフォントサイズを統一する。
 * 一部フィールド（demo「製造を行いたい商品」、support の機械カテゴリ/機械No、
 * 各 message テキストエリア等）は text-Base_Compact クラスが付いておらず、
 * .input 既定の小さいフォントになりプレースホルダも小さく見える。
 * 基準（--fontSize-base = text-Base_Compact 相当）に揃えて視覚差をなくす。
 */
.contact-form .form-input input,
.contact-form .form-input textarea {
    font-size: var(--fontSize-base);
}

/*
 * ステッパー（左サイドの 01/02/03 フロー）の現在ステップ色を、
 * 各お問い合わせカテゴリの色に合わせる。
 * template-contact-form.php が .flow に inline で --flow-color（= $color）を付与する。
 *
 * 注意（詳細度）: style.css 側は
 *   .page-contact .p-side-section .flow .flow-item.is-current .num（詳細度 0,6,0）
 *   .page-contact .p-side-section .flow .flow-item.is-current P  （詳細度 0,5,1）
 * で #e37336 を固定している。短いセレクタ（.flow .flow-item.is-current）だと
 * 詳細度で負けて --flow-color が効かないため、style.css と同じセレクタ階層に
 * 合わせて同詳細度＋後勝ち（contact-form.css は style.css の後に読み込まれる）で
 * 上書きする。--flow-color 未設定時は従来色にフォールバック。
 */
.page-contact .p-side-section .flow .flow-item.is-current .num {
    background: var(--flow-color, #e37336);
    border-color: var(--flow-color, #e37336);
}
.page-contact .p-side-section .flow .flow-item.is-current p {
    color: var(--flow-color, #e37336);
}

/*
 * 問い合わせTOP（一覧）: SP では .contact-index-item:not(:first-child) の
 * border-left が none にされ、3件ごと（.col 境界）にしか区切り線が出ず
 * 「線があったりなかったり」する。SP では各項目の下にも線を入れて統一する。
 * 各 .col 末尾項目は .col:not(:last-child) の border-bottom が担うため
 * :not(:last-child) のみ対象にすればよい（最終項目に余分な線を出さない）。
 */
@media (max-width: 768px) {
    .page-contact .p-section-list .contact-index-item:not(:last-child) {
        border-bottom-width: 1px;
    }
}