/*
 * テーマ独自の微調整（v171 の style.css / components.css を上書きせず、上に重ねる層）。
 * components.css の後に読み込まれる（functions.php）。
 */

/* ------------------------------------------------------------------ *
 * ヘッダー：中間幅でブランド副題「OKI ISLANDS WORKATION」が折り返し、
 * グローバルナビ（宿泊施設を探す…）と重なる問題の修正。
 * - 副題は折り返さない（nowrap）。
 * - 〜1500px では装飾的な副題を隠して余白を確保（5つの日本語ナビ＋言語＋予約ボタンがあり、
 *   副題が収まるのはかなり広い画面のみ。860px 以下は元々非表示）。
 * ------------------------------------------------------------------ */
.site-header .logo-sub { white-space: nowrap; }

/* SVGロゴは width:auto のため、副題を隠すと flex 内で幅0に潰れる場合がある。
   明示幅（アスペクト 300:49 を維持）を与えて常に安定表示させる。 */
.site-header .logo-img { width: 184px; height: auto; }

@media (max-width: 1500px) {
  .site-header .logo .logo-sub { display: none; }
}

/* モバイルのヘッダー詰まり対策。
   横幅が「ロゴ184px＋新規登録＋予約する＋バーガー用の右余白54px」を下回ると、
   space-between の隙間が潰れてロゴとボタンが接触する。ロゴとボタンを少し小さくし、
   最低限の間隔（gap）を明示して、ロゴとボタンの間に必ず余白が残るようにする。 */
@media (max-width: 860px) {
  .site-header .wrap { gap: var(--sp-4); }
  .site-header .logo-img { width: 150px; }
  .site-header .header-actions { gap: var(--sp-2); }
}

/* 小さい端末（360px級）では、内訳が
   ロゴ + 余白 + 新規登録 + 予約する + バーガー用54px ＝ 画面幅−左右padding32px
   に収まらないと隙間が0になる。360pxなら使える幅は328px、バーガー分を引くと274px。
   下記（ロゴ108＋余白6＋ボタン70/70）で約20pxの余白が残り、ロゴとボタンが離れる。 */
@media (max-width: 480px) {
  .site-header .logo-img { width: 108px; }
  .site-header .header-actions { gap: 6px; }
  .site-header .header-actions .btn-sm { padding: 8px 10px; font-size: var(--fs-12); }
}

/* ------------------------------------------------------------------ *
 * お問い合わせ／相談フォーム（[okiwork_contact_form]）を v171 の入力体裁に。
 * ------------------------------------------------------------------ */
.okiwork-contact-form { max-width: 640px; }
.okiwork-contact-form .form-row { margin: 0 0 var(--sp-4); }
.okiwork-contact-form label {
  display: block;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 6px;
}
.okiwork-contact-form input[type="text"],
.okiwork-contact-form input[type="email"],
.okiwork-contact-form input[type="tel"],
.okiwork-contact-form select,
.okiwork-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-15);
}
.okiwork-contact-form textarea { height: auto; min-height: 140px; padding: 10px 12px; }
/* 「必須」マークの色はここ1か所で決める。
   以前は お問い合わせ #c0392b・会員登録 #b3261e・同意欄 #a3341f の3種類に割れていた上、
   ログイン画面だけ WooCommerce 既定の #a00 が出ていた。WCの
   `.woocommerce form .form-row .required`（0,3,0）が `.okiwork-auth .required`（0,2,0）に
   勝つためで、テーマ側は当たってすらいなかった。勝てる強さで1本にまとめる。
   theme.css は WooCommerce のCSSより後に読み込まれるので、同点でもこちらが残る。 */
.required,
body .woocommerce form .form-row .required { color: var(--c-alert); }
.okiwork-contact-form button.button {
  height: 52px;
  padding: 0 32px;
  background: var(--c-brand-surface);
  color: #fff;
  border: none;
  border-radius: var(--radius-m);
  font-weight: 700;
  font-size: var(--fs-16);
  cursor: pointer;
}
.okiwork-contact-form button.button:hover { background: var(--c-brand-surface-hover); }

/* ------------------------------------------------------------------ *
 * アクティビティ一覧（[okiwork_activities]）を v171 のカード体裁に。
 * プラグイン出力にインライン style があるため一部 !important で上書きする。
 * ------------------------------------------------------------------ */
.okiwork-activities .okiwork-activity-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: var(--sp-5) !important;
}
.okiwork-activities .okiwork-activity-card {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-l) !important;
  background: var(--c-surface);
  box-shadow: 0 1px 3px rgba(15, 39, 51, 0.06);
}
.okiwork-activities .okiwork-activity-card input[type="date"],
.okiwork-activities .okiwork-activity-card input[type="number"],
.okiwork-activities .okiwork-activity-card select {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-15);
}
.okiwork-activities .okiwork-activity-card button,
.okiwork-activities .okiwork-activity-card .button {
  width: 100%;
  height: 48px;
  background: var(--c-brand-surface);
  color: #fff;
  border: none;
  border-radius: var(--radius-m);
  font-weight: 700;
  font-size: var(--fs-15);
  cursor: pointer;
}
.okiwork-activities .okiwork-activity-card button:hover,
.okiwork-activities .okiwork-activity-card .button:hover { background: var(--c-brand-surface-hover); }

/* 特集ページの特典カード（.benefit）— .card 上の追加調整 */
.benefit { text-align: center; }
.benefit .b-ic { font-size: var(--fs-30); margin-bottom: var(--sp-2); }

/* ------------------------------------------------------------------ *
 * ヘッダーの言語切替ドロップダウン（Polylang配線）
 * ------------------------------------------------------------------ */
.site-header .lang-dropdown { position: relative; cursor: pointer; }
.site-header .lang-dropdown .lang-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  margin-top: 8px;
  min-width: 150px;
  padding: 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  box-shadow: 0 8px 22px rgba(15, 39, 51, 0.12);
}
.site-header .lang-dropdown:hover .lang-menu,
.site-header .lang-dropdown:focus-within .lang-menu { display: block; }
.site-header .lang-dropdown .lang-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: var(--fs-14);
  color: var(--c-ink);
  text-decoration: none;
}
.site-header .lang-dropdown .lang-menu a:hover { background: var(--c-bg-alt); }
.site-header .lang-dropdown .lang-menu a.is-current { color: var(--c-navy); font-weight: 700; }

/* ============================================================
   Cookie 同意バナー（全ページ・下部固定）
   ============================================================ */
.okiwork-cookie {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 900;
  width: min(960px, calc(100% - 24px));
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-elevated);
}
.okiwork-cookie[hidden] { display: none; }
/* バナーは fixed で本文に覆いかぶさる。出ている間だけ本文の下に逃げ場を作り、
   ページ末尾の要素（トップの検索ボタン等）が隠れないようにする。
   高さは文字の折り返しで変わるため theme.js が実測して --okiwork-cookie-h に入れる。 */
body.okiwork-has-cookie-banner {
  padding-bottom: calc(var(--okiwork-cookie-h, 120px) + 32px);
}
.okiwork-cookie-text {
  margin: 0;
  flex: 1 1 auto;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--c-ink-soft);
}
.okiwork-cookie-text a { color: var(--c-navy); text-decoration: underline; }
.okiwork-cookie-actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--sp-3);
}
.okiwork-cookie-actions .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .okiwork-cookie {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    bottom: 0;
    width: 100%;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    border-bottom: none;
  }
  .okiwork-cookie-actions { justify-content: stretch; }
  .okiwork-cookie-actions .btn { flex: 1 1 auto; }
}

/* ================================================================== *
 * 会員登録・ログイン フォーム（.okiwork-auth）— 単一カラムで入力欄を揃える
 * theme.css は全ページで読み込まれるため、WC非依存の登録ページでも効く。
 * ================================================================== */
.okiwork-auth { max-width: 520px; }
.okiwork-auth .form-row,
.okiwork-auth .woocommerce-form-row { display: block; margin: 0 0 14px; padding: 0; }
.okiwork-auth .form-row > label {
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--c-ink);
}
.okiwork-auth .form-row input:not([type="checkbox"]):not([type="radio"]),
.okiwork-auth .form-row select {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-field-bg);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-15);
}
.okiwork-auth .form-row input:focus,
.okiwork-auth .form-row select:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px rgba(22, 55, 74, 0.12);
}
/* SMS同意など、チェックボックスを内包するラベルは通常テキスト・チェックボックスは自然幅 */
.okiwork-auth .form-row > label:has(input[type="checkbox"]) { font-weight: normal; font-size: var(--fs-15); }
.okiwork-auth .form-row input[type="checkbox"] { width: auto; height: auto; margin-right: 6px; vertical-align: middle; }
.okiwork-auth .form-row .description { display: block; margin-top: 4px; font-size: var(--fs-13); color: var(--c-ink-soft); }
.okiwork-auth .required { margin-left: 2px; }  /* 色は上の共通ルール */

/* --- パスワードの目隠しボタンを出さない ------------------------------------
   2026-08-02、オーナーの環境で「押しても伏せ字のまま」という報告があった。
   こちらの検証（stg・ローカル、手で入力した値）では type が password→text に
   変わって平文になることを確認できており、環境差を再現できていない。
   押しても何も起きないように見えるボタンは、問い合わせを生むだけで益がないため外す。

   テンプレート側では止められない。WooCommerce の JS が
     $( '.woocommerce form .woocommerce-Input[type="password"]' ).wrap( '<span class="password-input">' )
   でラッパごと作るので、マークアップをどう書いても挿し込まれる。
   無効化するフックも用意されていない。だからここで消す。

   display:none にしているのは、見た目を消すだけでなく Tab の順序からも
   外れるため（visibility:hidden や opacity:0 では焦点が当たってしまう）。
   ログイン画面と会員情報のパスワード欄（現在／新しい／確認）すべてに効く。

   ブラウザ自身が持つ表示切り替え（Edge の ::-ms-reveal など）は触っていないので、
   それがある環境ではそちらが働く。 */
.show-password-input { display: none !important; }
/* 送信ボタン（WCの .button が登録ページでは未定義のため、ここで整える） */
.okiwork-auth button[type="submit"],
.okiwork-auth .woocommerce-Button {
  display: inline-block;
  margin-top: 4px;
  background: var(--c-brand-surface);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: var(--radius-m);
  font-family: inherit;
  font-size: var(--fs-15);
  font-weight: 700;
  cursor: pointer;
}
.okiwork-auth button[type="submit"]:hover,
.okiwork-auth .woocommerce-Button:hover { background: var(--c-brand-surface-hover); }
.okiwork-auth .woocommerce-LostPassword { margin-top: 8px; font-size: var(--fs-14); }
.okiwork-auth-switch { margin-top: 1.25rem; font-size: var(--fs-14); color: var(--c-ink-soft); }
.okiwork-auth-switch a { color: var(--c-navy); font-weight: 700; }

/* ヘッダーの「予約する」からトップの検索フォームへ飛ぶときのアンカー先。
   ヘッダーが position:sticky なので、そのままだと検索カードの上部が隠れる。 */
#okiwork-search { scroll-margin-top: 84px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ロゴ横のラベル（外観 › カスタマイズ › サイト表示）。
   .logo-sub と違い、狭い画面でも隠さない。試験公開中であることは常に伝わっている必要がある。 */
.site-header .logo-badge {
  flex: 0 0 auto;
  align-self: center;
  padding: 2px 8px;
  border: 1px solid var(--c-navy);
  border-radius: 999px;
  background: var(--c-brand-surface);
  color: #fff;
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .site-header .logo-badge { padding: 1px 6px; font-size: var(--fs-10); }
}
/* フッターのロゴは白抜きなので、ラベルも反転させる（濃色の上に濃紺だと沈む）。 */
.site-footer .logo-badge { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }