/*
 * libertycom-overrides.css
 * リバティコム 公開前の見た目補正（加算・後読み込み用）
 *
 * 方針
 *  - 既存の libertycom-scoped.css は「作業途中で本番と非同期」の疑いがあるため直接編集しない。
 *    本ファイルを scoped.css の「後」に enqueue して、必要な補正だけを上書きする（可逆・安全）。
 *  - 詳細度は iimado 実績の `.manus-scope:not(#ap)` 方式で Astra に勝つ。
 */

/* =========================================================
 * 課題B：ヒーロー見出しの文字色（暗い→白）／全ページFV共通
 *   現状ヒーロー見出し h1 に color 指定が無く、Astra の見出し色(#1e293b＝rgb(30,41,59))が
 *   勝って「技術と企画・開発力で、」等が暗く沈む。白を明示して詳細度で勝つ。
 *   ・トップ＝ .home-hero h1
 *   ・各ページ（about/features/recruit/service/results）＝ .page-hero h1（本番DOMで実測・全て同じ暗色）
 *   ★ .gradient-text（span）は自前規則で color:transparent＋グラデを持つため、
 *     h1 に白を当てても span は青グラデのまま維持される（各ページ本番DOMで検証済み）。
 *   ★対象はヒーロー h1 のみに限定（本文の見出しや、意図的に灰色のパンくず等には影響させない）。
 * ======================================================= */
.manus-scope:not(#ap) .home-hero h1,
.manus-scope:not(#ap) .page-hero h1 {
  color: #ffffff;
}

/* =========================================================
 * 課題B2：本文中の暗背景セクション／フッターの見出し白化（FV見出しと同じ根）
 *   Manus 焼き込みの見出し色 rgb(30,41,59) が暗背景のまま残り、本文 h2/h3/h4 や
 *   フッター見出しが暗く沈む。白化する。
 *
 *   ★スコープの根拠（全6ページ本番DOMで機械実測）：
 *     - 各見出しの「実効背景輝度」を測ったところ、明背景（輝度≥70）の見出しは
 *       ホーム/about/features/recruit/service/results いずれにも 0 件。
 *       ＝Manus 領域は全て暗背景テーマ。明背景セクションは存在しない。
 *     - 暗見出しは全て <section> 要素内（本文）＋フッター（.footer-column 等）に収まる。
 *   → よって <section> 配下とフッター配下の見出しに限定して白化。
 *     無限定の `.manus-scope h2{color:#fff}` は禁止（将来明背景を足した際に消えるため）。
 *     将来もし明背景セクションを追加する場合は、そのセクションだけ本規則の例外
 *     （見出しを暗色に戻す上書き）を足すこと。
 *   ★ .gradient-text（span）は自前 color:transparent 規則が優先されグラデ維持（実測確認済）。
 *   ★ FV見出し h1 は上の課題B規則で対応済みのため、ここでは h2〜h4 のみ対象。
 * ======================================================= */
.manus-scope:not(#ap) section :is(h2, h3, h4),
.manus-scope:not(#ap) [class*="footer"] :is(h2, h3, h4, h5) {
  color: #fff;
}

/* =========================================================
 * 課題C：画面両端の余白（提案・★レビュー後に有効化）
 *   原因は Manus 側ではなく WordPress/Astra の .entry-content が
 *   ビューポートより約20px内側に収まっていること（.site-shell=1180px中央は正常）。
 *
 *   ★HANDOFF 既知の副作用リスク：全幅ブレイクアウトは記事型など他要素まで
 *     全幅化して崩す恐れがある（iimado で経験済み）。そのためデフォルト無効。
 *     チャット版Claude／山本さんのレビュー後に、下記いずれかを有効化して実サイトで確認する。
 *
 *   案C-1：ページのコンテンツ器の左右padを除去（影響範囲が広い・要確認）
 *   .entry-content { padding-left: 0 !important; padding-right: 0 !important; }
 *
 *   案C-2：Manusセクションだけをビューポート全幅にブレイクアウト（内側site-shellは中央維持）
 *          ※ 100vw はスクロールバー分の横スクロールを生むことがある点に注意。
 *   .manus-scope:not(#ap) .home-hero,
 *   .manus-scope:not(#ap) .section {
 *     margin-left: calc(50% - 50vw);
 *     margin-right: calc(50% - 50vw);
 *   }
 * ======================================================= */

/* =========================================================
 * 課題D：透過ヘッダー（本番DOMで検証済み）
 *   ★根本原因：本番の .site-header には Manus 焼き込みの
 *     インライン style="background-color: rgb(26,46,74); border-bottom:..."（!important無し）
 *     が付いており、これが scoped.css のセレクタに勝って常時不透明にしていた。
 *     （scoped.css 側の背景規則の問題ではなく、要素のインライン属性が原因）
 *
 *   対策：stylesheet の !important で、インライン(非!important)を上書きする。
 *     ・:not(.is-scrolled) に限定＝トップ（非スクロール時）だけ透明化。
 *     ・.is-scrolled 時は本規則が外れ、焼き込みインラインの紺(#1a2e4a)が戻る＝暗いヘッダー。
 *       （＋scoped.css の .is-scrolled 規則で backdrop-filter:blur が乗る）
 *     ・トグル（スクロール連動での .is-scrolled 付外し）は libertycom-scripts.js が担当。
 *
 *   検証：本番トップで透過（ヒーローが上端まで透ける）／スクロールで暗転を
 *         スクリーンショット確認済み（2026-09-10）。
 * ======================================================= */
.manus-scope:not(#ap) .site-header:not(.is-scrolled) {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
 * 課題：ログイン時にヘッダー上部の余白＋ロゴ上部の見切れ（本番DOMで原因特定）
 *   ★原因は Astra の隙間でも .site-header の margin でもなく、WordPress 管理バー。
 *     ログイン中は #wpadminbar が top:0 に固定され html{margin-top:32px} が入る。
 *     Manus の .site-header は position:fixed; top:0 のため Astra の自動オフセット対象外で、
 *     管理バーの下に潜り込みロゴ上部が隠れる（管理バー32px内にロゴ上端13pxが入る＝見切れ）。
 *   ★公開（非ログイン）ビューは元から正常（header top:0 密着・ロゴはヘッダー内に完全収納）。
 *     本規則は body.admin-bar 時＝ログイン時のみ効き、公開ビューには一切影響しない。
 *
 *   対策：管理バーの高さ分だけ固定ヘッダーを下げる（デスクトップ32px／〜782pxは46px）。
 *     ヘッダー内の padding は触らない（詰めすぎるとロゴが天地で切れるため）。
 *   検証：管理バー模擬状態で headerTop 0→32・ロゴ上端 13→45（バー外）＝見切れ解消をスクショ確認。
 * ======================================================= */
body.admin-bar .manus-scope:not(#ap) .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .manus-scope:not(#ap) .site-header {
    top: 46px;
  }
}

/* =========================================================
 * 課題：透過ヘッダー上部の暗い帯（＝ヒーローが上端に届かない）／非ログインでも発生
 *   ★原因は Astra のページビルダーテンプレートが記事要素に付ける上パディング。
 *     規則：`.ast-single-post.ast-page-builder-template .site-main > article` に
 *     `padding: 2em`（≒29px・!important無し）。この上パディング分ヒーローが
 *     下がり、上に約29pxの暗い帯（.manus-scope の地色）が残る。透過ヘッダーが
 *     その帯に重なるためロゴ上に余白があるように見える。
 *   ★これは Astra 由来だが「ヘッダー上の余白＝上詰め」の対象なので本ファイルで対応。
 *     （左右パディングは山本さんが Astra 側で対応するため触らない＝padding-top のみ 0）
 *
 *   対象を Manus コンテンツを含むページに限定（:has(.manus-scope)）。
 *   検証：heroTop 29→0・article padding-top 0・padding-left は20pxのまま維持を実測、
 *         暗い帯が消えてヒーローが上端に密着することをスクショ確認（2026-09-10）。
 * ======================================================= */
.ast-page-builder-template .site-main > article.ast-article-single:has(.manus-scope) {
  padding-top: 0 !important;
}

/* =========================================================
 * お問い合わせフォーム：MW WP Form の同意チェックボックス可視化・横並び（入力/確認 両画面）
 *   ★背景：scoped.css は Manus 版 .privacy-check を
 *     display:grid; grid-template-columns:1.2rem 1fr; とし、native checkbox を
 *     opacity:0/1px で隠して独自の .privacy-check-box を見せる設計。
 *     しかし MW WP Form は .privacy-check-box を出力せず
 *     <span class="mwform-checkbox-field"><label><input type=checkbox>
 *     <span class="mwform-checkbox-field-text">同意する</span></label></span> を吐く。
 *     → チェックが不可視＋狭い1.2rem列に「同意する」が入り縦組み（確認画面も同様）。
 *   ★対処：.privacy-check を block 化して縦組みを解除し、native checkbox を可視化して
 *     「同意する」と横並びにする。scoped.css は触らず overrides で上書き（後読み込み）。
 *   検証：入力画面＝checkbox幅18px・opacity1・label inline-flex／確認画面＝「同意する」横組み
 *     （2026-09-11 本番DOM実測）。
 * ======================================================= */
.manus-scope:not(#ap) .privacy-check {
  display: block;
  grid-template-columns: none;
  color: #9ca8b9;
}
.manus-scope:not(#ap) .privacy-check > br:first-child {
  display: none;
}
.manus-scope:not(#ap) .privacy-check .mwform-checkbox-field label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  color: #cdd6e4;
}
.manus-scope:not(#ap) .privacy-check input[type="checkbox"] {
  position: static;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  opacity: 1;
  accent-color: #22d3ee;
  flex: 0 0 auto;
}

/* =========================================================
 * お問い合わせフォーム：確認画面の見出し・入力値を明色に（課題1）
 *   ★確認画面(mw_wp_form_confirm)は入力値が <input> でなく素テキストで .form-field 直下に入り、
 *     scoped の `.form-field input{color}` が効かず暗色(rgb(30,41,59))のまま＝紺背景で読めない。
 *     見出し(.form-label)も本番では暗色になっている（deployed scoped との drift）。
 *   ★対処：フォームの見出しを明色化（入力/確認 両画面）＋確認画面の素テキスト値を明色化。
 *   検証：確認画面で label 40→230・値 40→243、入力画面 label 40→230（2026-09-11 本番DOM実測）。
 * ======================================================= */
.manus-scope:not(#ap) .mw_wp_form .form-label {
  color: #dfe7f2;
}
.manus-scope:not(#ap) .mw_wp_form_confirm .form-field {
  color: #eef3fb;
}

/* =========================================================
 * お問い合わせフォーム：送信完了（サンクス）メッセージ（課題2）
 *   MW WP Form の「完了画面」設定に貼る HTML（.thanks-message）用のスタイル。
 *   完了画面は contact-form-section（紺の manus-scope）内に描画されるため、白見出し＋明色本文で。
 *   検証：title 白(lum255)・中央寄せ・本文 lum213（2026-09-11 本番DOMでモック確認）。
 * ======================================================= */
.manus-scope:not(#ap) .thanks-message {
  text-align: center;
  padding: clamp(2rem, 6vw, 5rem) 0;
}
.manus-scope:not(#ap) .thanks-title {
  color: #ffffff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 1rem;
}
.manus-scope:not(#ap) .thanks-text {
  color: #cdd6e4;
  font-size: 1rem;
  line-height: 1.95;
  margin: 0;
}

/* =========================================================
 * タスクA：投稿（記事詳細）ページをリバティコムデザインに
 *   Astra既定は article=白パネル／body=薄灰／タイトル暗(rgb30,41,59)／本文スレート(rgb51,65,85)。
 *   投稿本文は manus-scope 外（ヘッダー/フッターのみ manus-scope）なので body.single-post で限定。
 *   紺背景・白見出し・明色本文・シアンのリンクに。Astra既定に勝つため要所は !important。
 *   検証：title lum255／article透明／body lum14／本文 lum213（2026-09-11 本番DOM実測＋スクショ）。
 * ======================================================= */
body.single-post { background: #0a0e17 !important; }
body.single-post #content,
body.single-post .site-content { background: #0a0e17; }
body.single-post .ast-article-single,
body.single-post article.post,
body.single-post #primary,
body.single-post .entry-content { background: transparent !important; }
body.single-post .entry-title,
body.single-post .entry-content :is(h1, h2, h3, h4) { color: #ffffff !important; }
body.single-post .entry-content,
body.single-post .entry-content p,
body.single-post .entry-content li,
body.single-post .entry-content span { color: #cdd6e4 !important; }
body.single-post .entry-content a { color: #22d3ee !important; }
body.single-post .entry-meta,
body.single-post .entry-meta a,
body.single-post .posted-on,
body.single-post .ast-terms-link a,
body.single-post time { color: #9ca8b9 !important; }

/* =========================================================
 * トップ Topics 動的化：[libertycom_topics] が出力する行を <a class="topic-row"> にするため、
 *   アンカーをブロック化（既存 .topic-row の padding/border/hover をそのまま活かす）。
 *   ※日付(time=cyan)・カテゴリ(span=pill)・タイトル(h3=課題B2で白)の各スタイルは既存CSSが担当。
 * ======================================================= */
.manus-scope:not(#ap) a.topic-row {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* =========================================================
 * 会社概要のマップが小さい問題：Google Maps iframe を枠(.office-map)一杯に
 *   ★原因：iframe を 100% サイズにする規則が scoped.css では `.libertycom-wordpress`
 *     ゲート配下（本番に付かないクラス）にあり未適用。iframe が属性なし＝既定150pxのまま小さかった。
 *   対処：ゲート無しで overrides に同等規則。.office-map(高さ h-[500px]/min 27rem) を iframe が埋める。
 *   検証：iframe 0×150 → 1180×500（.office-map と一致）を本番DOMで実測（2026-09-12）。
 * ======================================================= */
.manus-scope:not(#ap) .office-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 27rem;
  border: 0;
}

/* =========================================================
 * reCAPTCHA v3 バッジ（お問い合わせフォームのスパム対策）
 *   ・v3 バッジは既定で画面右下に固定表示される。バッジを表示している限り
 *     Googleの利用規約を満たす（フォーム付近への注記文は不要）。
 *   ・ここでは重なり/被り対策のみ。モバイルの追従お問い合わせボタンと
 *     干渉しないよう、バッジをやや上へ退避し、印刷時は非表示。
 *   ・★バッジを「非表示」にしたい場合は、下部のコメントアウト解除に加え、
 *     フォーム付近に規約注記文（下記）の掲出が必須（Google規約）。
 * ======================================================= */
.grecaptcha-badge {
  z-index: 5;               /* 追従ボタン等より背面に。必要なら調整 */
  box-shadow: 0 0 6px rgba(0,0,0,.15) !important;
}
@media (max-width: 900px) {
  /* モバイルの追従「お問い合わせ」ボタンとの重なり回避（ボタン高に応じて調整可） */
  .grecaptcha-badge { bottom: 84px !important; }
}
@media print {
  .grecaptcha-badge { display: none !important; }
}

/* --- バッジ非表示にする場合のみ有効化（規約注記文の掲出とセット）---
.grecaptcha-badge { visibility: hidden; }
   併せてフォーム付近に次の一文を表示すること：
   「このサイトはreCAPTCHAによって保護されており、Googleの
     プライバシーポリシー( https://policies.google.com/privacy )と
     利用規約( https://policies.google.com/terms )が適用されます。」
--------------------------------------------------------- */

/* =========================================================
 * 本番検証(2026-09-15) 追加是正
 * ======================================================= */
/* 校正5: Domainsカード/見出しの折り返しで1文字だけ孤立する崩れを緩和。
 *   日本語の任意折返しを許しつつ、行を均等配分して「け」等の1文字残りを避ける。 */
.manus-scope:not(#ap) .domain-item strong,
.manus-scope:not(#ap) .domain-strip strong,
.manus-scope:not(#ap) .section-heading h2,
.manus-scope:not(#ap) .page-hero-copy h1 {
  text-wrap: balance;            /* 対応ブラウザで行を均等化（孤立文字を回避） */
  overflow-wrap: anywhere;       /* 収まらない場合の保険 */
  word-break: normal;
}

/* No2整合に伴う対応: フッター主要取引先のうちURL未確定の5社は <span> 表記。
 *   既存の <a>（リンク社）と同じ見た目で並ぶよう、spanもリンクと同挙動の表示にする。 */
.manus-scope:not(#ap) .footer-partners span {
  display: inline-block;         /* 既存aの並びに追随（block化はしない＝レイアウト変更を最小化） */
  color: inherit;
  text-decoration: none;
  cursor: default;
}