/*
 * Contact Form 7 用カスタムスタイル
 * テーマのデザイントークン (primary/cta-green/cream 等) を CF7 既定マークアップに適用
 * CF7 は Tailwind クラスを生成しないため、生CSSでセレクタ指定。
 *
 * W6 round-8 対応: font-family を CSS 変数 (--gaika-font-serif / --gaika-font-sans)
 *   で一元管理し、複数セレクタへの重複指定をなくす。
 */

.wpcf7 {
    --gaika-font-serif: "Noto Serif JP", serif;
    --gaika-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    font-family: var(--gaika-font-serif);
    color: #2a1e14;            /* primary-500 */
    width: 100%;
}

/* CF7 がフィールドごとに <p> で囲むので margin で空ける */
.wpcf7 form > p,
.wpcf7-form > p {
    margin: 0 0 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wpcf7 label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    color: #5c4f42;            /* text-secondary */
}

/* 必須マーク (label内テキスト末尾) を任意でハイライト */
.wpcf7 label .required-mark {
    color: #ef4444;            /* semantic-error */
    font-size: 12px;
    margin-left: 0.25rem;
}

/* 入力フィールド共通 */
.wpcf7 .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="search"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    font-family: var(--gaika-font-sans);
    font-size: 16px;
    line-height: 26px;
    color: #2a1e14;            /* primary-500 */
    background-color: #fffdf8; /* bg-white */
    border: 1px solid #e8dfd2; /* primary-200 */
    border-radius: 8px;        /* radius-md */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7 input[type="file"],
.wpcf7 input[type="file"]::file-selector-button,
.wpcf7 .wpcf7-submit,
.wpcf7-response-output,
.wpcf7-not-valid-tip {
    font-family: var(--gaika-font-sans);
}

/* select だけ appearance:none + SVG 矢印 (W5)。input/textarea には適用しない。 */
.wpcf7 select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.25rem;  /* 右に矢印分の余白 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235c4f42' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
}

.wpcf7 textarea {
    min-height: 8rem;
    resize: vertical;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    /* W10: 旧 #8b7d6b は背景 #fffdf8 に対してコントラスト比 3.02:1 で WCAG AA (4.5:1) 未達。
       text-secondary の #5c4f42 (5.75:1) に変更し、opacity も下げずに
       プレースホルダーの実コントラストを維持する。 */
    color: #5c4f42;            /* text-secondary */
    opacity: 1;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #06c755;     /* cta-green-500 */
    box-shadow: 0 0 0 3px rgba(6, 199, 85, 0.15);
}

/* ファイルアップロード */
.wpcf7 input[type="file"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 14px;
    color: #5c4f42;
    background-color: #faf5ef; /* bg-light */
    border: 1px dashed #b8860b; /* accent-500 */
    border-radius: 8px;
    cursor: pointer;
}

.wpcf7 input[type="file"]::file-selector-button {
    padding: 0.5rem 0.875rem;
    margin-right: 0.75rem;
    font-weight: 900;
    font-size: 13px;
    color: #faf0e6;            /* cream */
    background-color: #2a1e14; /* primary-500 */
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

/* チェックボックス・ラジオ */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wpcf7 .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    /* W13 (round-12): accent-color は Chrome 93+ / Safari 15.4+ / Firefox 92+ で対応。
       IE / 旧 Edge (-12) は未対応 → OS デフォルトの青チェックボックス表示にフォールバック
       (機能は維持、ブランド色のみロスト)。本テーマは Tailwind v3.4 想定 = モダンブラウザ
       対応で IE 明示非サポート (style.css 内 Tailwind preflight も IE 非対応) のため許容。 */
    accent-color: #06c755;     /* cta-green-500 */
}

/* 送信ボタン */
.wpcf7 .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 2rem;
    font-weight: 900;
    font-size: 18px;
    line-height: 28px;
    color: #faf0e6;            /* cream */
    background-color: #06c755; /* cta-green-500 */
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.wpcf7 .wpcf7-submit:hover {
    background-color: #05a647; /* cta-green-600 */
}

.wpcf7 .wpcf7-submit:active {
    transform: translateY(1px);
}

.wpcf7 .wpcf7-submit:disabled {
    /* W9 round-rfctr3 対応: 旧 #8b7d6b は文字色 #faf0e6 に対しコントラスト 2.15:1 で
       WCAG AA (4.5:1) 未達。背景を明るくし文字色を暗くしてユーザビリティ向上。 */
    background-color: #d1c8bd;
    color: #5c4f42;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

@media (forced-colors: active) {
    .wpcf7 input:focus,
    .wpcf7 textarea:focus,
    .wpcf7 select:focus,
    .wpcf7 .wpcf7-submit:focus {
        outline: 2px solid Highlight;
        outline-offset: 2px;
        border-color: Highlight;
        box-shadow: none;
    }
}

@media (min-width: 768px) {
    .wpcf7 .wpcf7-submit {
        width: auto;
        min-width: 240px;
        margin: 0.5rem auto 0;
    }
    .wpcf7 form > p:last-of-type,
    .wpcf7-form > p:last-of-type {
        text-align: center;
    }
}

/* スピナー / ローディング */
.wpcf7 .wpcf7-spinner {
    margin-left: 0.75rem;
}

/* レスポンスメッセージ */
.wpcf7-response-output {
    margin: 1rem 0 0;
    padding: 0.875rem 1rem;
    font-size: 14px;
    line-height: 22px;
    border-radius: 8px;
    border: 1px solid;
}

.wpcf7 form.sent .wpcf7-response-output {
    color: #047857;
    background-color: #f2fff2;
    border-color: rgba(6, 199, 85, 0.3);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    color: #b91c1c;
    background-color: #fff2f2;
    border-color: rgba(239, 68, 68, 0.3);
}

/* 個別フィールドのバリデーションヒント */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.375rem;
    font-size: 12px;
    line-height: 20px;
    color: #b91c1c;
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* ハニーポット (スパムbot対策) は非表示維持 */
.wpcf7 .wpcf7-honeypot {
    display: none !important;
}

@media (forced-colors: active) {
    .wpcf7 select {
        appearance: auto;
        padding-right: 1rem;
        background-image: none;
    }

    .wpcf7 input:focus,
    .wpcf7 textarea:focus,
    .wpcf7 select:focus {
        outline: 1px solid Highlight;
        border-color: Highlight;
        box-shadow: none;
    }
}