/* ============================================================
 *  pages/contact.css｜お問い合わせ・ご予約（入力／確認／完了）専用
 *
 *  ■ なぜ共通CSSに入れないのか
 *    ここで定義しているのは input / select / textarea といった「要素セレクタ」であり、
 *    共通CSSに置くとサイト全ページの入力欄に効いてしまう。
 *    フォームがあるのは contact の3画面だけなので、影響範囲をこのファイルに閉じ込めている。
 *
 *  ■ 原本との関係
 *    原本12（お問い合わせと予約）の <style> をそのまま移設し、
 *    色だけを直書きの hex から CSS変数（inc/brand.php 由来）に置き換えている。
 * ============================================================ */

/* ------------------------------------------------------------
 *  アコーディオンを開いたときの高さ上限
 *  ページ末尾の「設計方針」など長文が入るため、原本どおり 2500px を維持する。
 * ------------------------------------------------------------ */
.accordion-item.active .accordion-content {
    max-height: 2500px;
}

/* ------------------------------------------------------------
 *  入力欄の基本スタイル
 *  Tailwind のユーティリティ（角丸・余白）と併用する前提で、
 *  枠線・背景・フォーカス表現だけをここで担当する。
 *
 *  ※ font-size: 16px は必須。これより小さいと iOS Safari が
 *    フォーカス時にページを勝手に拡大してしまい、入力途中の離脱につながる。
 * ------------------------------------------------------------ */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
    background-color: #ffffff;
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/*
 * フォーカス時は枠線の色に加えて、外側に淡いリングを出す。
 * outline: none だけにするとキーボード操作の人が現在位置を見失うため、
 * 必ず代わりの視覚表現（box-shadow）を用意している。
 */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(23, 96, 87, 0.15);
}

/* ------------------------------------------------------------
 *  チェックボックス・ラジオ
 *
 *  指で押せるよう、標準より大きくしている。
 *  ラベル全体を押せるようにマークアップしてあるので、
 *  実際のタップ領域は選択肢の行全体（高さ48px以上）になる。
 * ------------------------------------------------------------ */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-primary);
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
 *  任意項目の折りたたみ（<details>）
 *
 *  ■ なぜ JavaScript を使っていないか
 *    <details> / <summary> は開閉の仕組みがブラウザに標準で備わっている要素。
 *    キーボード操作にも読み上げソフトにも最初から対応しており、
 *    JSが無効な環境でも開閉できる。独自実装より確実で、コードも増えない。
 *
 *  ■ 見た目の方針
 *    「押せば開くもの」だと一目で分かるように、ボタンらしい枠と矢印を付ける。
 *    折りたたみに気づかれないと、任意項目が存在しないのと同じになってしまう。
 * ------------------------------------------------------------ */
.detail-block {
    border: 1px solid var(--brand-border);
    border-radius: 1rem;
    background-color: #ffffff;
}

.detail-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.125rem 1.25rem;
    cursor: pointer;
    border-radius: 1rem;
    background-color: var(--brand-cream);
    transition: background-color 0.2s ease;
    /* 標準の三角マーカーを消し、自前の矢印に差し替える */
    list-style: none;
}

/* Safari 用（::marker では消えないため） */
.detail-summary::-webkit-details-marker {
    display: none;
}

.detail-summary:hover {
    background-color: var(--brand-beige);
}

/* キーボード操作でどこにいるかが分かるようにする */
.detail-summary:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

.detail-summary-text {
    font-weight: 700;
    font-size: 15px;
    color: var(--brand-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 開閉状態を示す矢印。開くと下向きになる。 */
.detail-summary-text::before {
    content: "＋";
    color: var(--brand-primary);
    font-weight: 700;
}

.detail-block[open] .detail-summary-text::before {
    content: "－";
}

.detail-block[open] .detail-summary {
    border-bottom: 1px solid var(--brand-border);
    border-radius: 1rem 1rem 0 0;
}

/* 折りたたみの中身の余白 */
.detail-block > div {
    padding: 0 1.25rem 1.5rem;
}

/* ------------------------------------------------------------
 *  入力エラーの表示
 *  「どの項目が」「なぜ」通らなかったのかを、項目のすぐ下に出す。
 *  上部のサマリだけだと、長いフォームでは該当箇所にたどり着けない。
 * ------------------------------------------------------------ */
.field-error {
    border-color: var(--brand-accent) !important;
    background-color: #FFF7F5;
}

.error-message {
    display: block;
    margin-top: 0.375rem;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-accent);
}

/*
 * フォーム冒頭に出すエラー件数サマリ。
 * 送信に失敗したことが画面の最初で分かるようにする。
 */
.error-summary {
    border: 1px solid var(--brand-accent);
    background-color: #FFF7F5;
    color: #9B3325;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    font-size: 13px;
    line-height: 1.9;
}

.error-summary a {
    color: #9B3325;
    text-decoration: underline;
    font-weight: 700;
}

/* ------------------------------------------------------------
 *  ハニーポット（ボット対策）
 *  画面外に置き、視覚・スクリーンリーダー・タブ順から外す。
 *  display:none だけにするとボットが「隠し欄」と判定しやすいため使わない。
 * ------------------------------------------------------------ */
.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------
 *  二重送信防止
 *  送信ボタンは押した瞬間に無効化する。見た目でも押せないことを示す。
 * ------------------------------------------------------------ */
button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}