/* ============================================================
   WordPress 側の事情に合わせるための調整だけを書くファイル
   ------------------------------------------------------------
   ①Contact Form 7 が挟むマークアップとの噛み合わせ
   ②ログイン中に出る管理バー（高さ32px）との噛み合わせ

   base.css は触らない。触ると静的プロトタイプ（正の版）と
   WordPress側で見た目がずれていく。
   ============================================================ */

/* ============================================================
   ① Contact Form 7
   ------------------------------------------------------------
   プロトタイプのフォームは <div class="field"><label>＋<input> という
   素のマークアップだった。CF7は入力欄を <span class="wpcf7-form-control-wrap">
   で包んで出力するため、その1枚ぶんだけ辻褄を合わせる。
   ============================================================ */

/* CF7が挟むラッパー。inline のままだと width:100% の基準が狂うのでブロックにする */
.formcard .wpcf7-form-control-wrap {
  display: block;
}

/* CF7が入力欄に付ける自前のクラス経由でも、プロトタイプと同じ見た目になるように */
.formcard .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-list-item-label) {
  width: 100%;
  box-sizing: border-box;
}

/* 送信ボタン直上・直下の余白を、プロトタイプと同じにする */
.formcard .wpcf7-spinner {
  display: block;
  margin: 10px auto 0;
}

/* --- バリデーション表示 ------------------------------------ */

/* エラー文。base.css の --alert（#C0271A）に合わせる */
.formcard .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--alert, #C0271A);
}

/* エラーになった入力欄の枠 */
.formcard .wpcf7-not-valid {
  border-color: var(--alert, #C0271A) !important;
}

/* 送信結果メッセージ。CF7 既定の枠線だけの表示は
   フォームの他の要素から浮くので、面で見せる。
   セレクタが冗長なのは、CF7側の `.wpcf7 form.invalid .wpcf7-response-output`
   が枠線色を指定していて、詳細度を並べないと枠線を消せないため
   （同点だが wp.css の方が後に読まれるのでこちらが勝つ）。 */
form.formcard.wpcf7-form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
}
/* formcard は form 要素そのものに付く（functions.php の
   wpcf7_form_class_attr フィルター）。子孫セレクタにしないこと。 */
.formcard.sent .wpcf7-response-output {
  color: #0B5A2B;
  background: #E7F5EC;
}
.formcard.invalid .wpcf7-response-output,
.formcard.unaccepted .wpcf7-response-output,
.formcard.failed .wpcf7-response-output,
.formcard.aborted .wpcf7-response-output,
.formcard.spam .wpcf7-response-output {
  color: var(--alert, #C0271A);
  background: #FDECEA;
}

/* --- reCAPTCHA v3 のバッジ ---------------------------------- */
/* 追従CTA（画面下部・高さ80px）と重なるので、その上へ逃がす */
.grecaptcha-badge {
  bottom: 96px !important;
  z-index: 40;
}
@media (max-width: 767px) {
  .grecaptcha-badge {
    /* SPでは追従CTAが全幅なので、バッジは畳んだ状態のまま右端に寄せる */
    bottom: 92px !important;
  }
}

/* ============================================================
   ② 管理バー（ログイン中のみ表示・高さ32px／782px以下は46px）
   ------------------------------------------------------------
   管理バーは position:fixed で画面最上部に居座る。ヘッダーも
   position:sticky; top:0 なので、そのままだと管理バーの下に
   ヘッダーが潜り込んで見えなくなる。ログイン中だけの話だが、
   dev環境の確認はログイン状態で行うので合わせておく。

   訪問者（未ログイン）には body.admin-bar が付かないため、
   ここの指定は一切効かない＝公開時の見た目に影響しない。
   ============================================================ */

body.admin-bar .header {
  top: 32px;
}

/* アンカーで飛んだときの着地位置も管理バーのぶんだけ下げる */
body.admin-bar {
  scroll-padding-top: 117px; /* base.css の 85px + 32px */
}

@media screen and (max-width: 782px) {
  /* この幅では管理バーが46pxになる（WordPress側の仕様） */
  body.admin-bar .header {
    top: 46px;
  }
  body.admin-bar {
    scroll-padding-top: 131px;
  }
}

@media screen and (max-width: 600px) {
  /* 600px以下では管理バーが position:static になり、
     ページと一緒にスクロールして消える。ずらす必要がなくなる。 */
  body.admin-bar .header {
    top: 0;
  }
  body.admin-bar {
    scroll-padding-top: 85px;
  }
}