/* =========================================================
   TECRITA blocks.css（全幅/ワイド/通常幅の最終完成版）
   - the_content を .tecrita-container で囲わない前提
   - alignfull は 100vw＋スクロールバー差分補正（左右ズレ防止）
   - VK Blocks Slider / CF7 の横はみ出し対策を同梱
   - 既存の「原因隠し」になりやすい指定は整理して最小限に
========================================================= */


/* ---------------------------------------------------------
  0) ルート変数
--------------------------------------------------------- */
:root{
  /* 100vw（スクロールバー含む）と 100%（除外）の差分 */
  --tecrita-vw-diff: calc(100vw - 100%);

  /* 全幅以外の共通左右余白（SP/TB/PCで段階） */
  --tecrita-container-pad: 16px;

  /* ★追加：本文幅（通常は theme.json の contentSize） */
  --tecrita-content-size: var(--wp--style--global--content-size, 960px);
}

body.tecrita-singular-narrow{
  --tecrita-content-size: 760px;
}

@media (min-width: 768px){
  :root{ --tecrita-container-pad: 20px; }
}

@media (min-width: 1024px){
  :root{ --tecrita-container-pad: 24px; }
}


/* ---------------------------------------------------------
  1) ページ全体の左右余白（保険）
  ※ body への padding/margin はテーマによって入ることがあるため0化
--------------------------------------------------------- */
body{
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------
  保険：もし .entry-content 直下に .tecrita-container が来ても
  alignfull/alignwide の計算を邪魔しないようにする（Arkhe的）
--------------------------------------------------------- */
.entry-content > .tecrita-container{
  max-width: none;
  margin: 0;
  padding-inline: 0; /* ← ここが最重要（親paddingを無効化） */
}

/* テーマ側ラッパーが max-width/padding を持つケースの保険 */
body.tecrita .site,
body.tecrita .site-inner{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ---------------------------------------------------------
  2) 本文幅ルール（重要）
  - 通常：content-size
  - wide  ：wide-size
  - full  ：100vw
--------------------------------------------------------- */

/* 通常ブロック（align指定なし）＝本文幅で中央寄せ */
.entry-content > :where(:not(.alignwide):not(.alignfull)){
  max-width: var(--tecrita-content-size);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--tecrita-container-pad);
}

/* alignwide ＝ wide幅で中央寄せ */
.entry-content > .alignwide{
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--tecrita-container-pad);
}

/* alignfull ＝ 本当の全幅（トップレベルだけ）
   ※差分は「引く」が正解（左だけ余白が出るのを防ぐ）
*/
:where(.site-main, .entry-content) > .alignfull,
:where(.site-main, .entry-content) > .tecrita-container > .alignfull{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw - (var(--tecrita-vw-diff) / 2)) !important;
  margin-right: calc(50% - 50vw - (var(--tecrita-vw-diff) / 2)) !important;
  padding-inline: 0 !important;
}

/* 固定ページ：通常ブロックは 960 */
body.page .tecrita-entry > :where(:not(.alignwide):not(.alignfull)){
  max-width: var(--wp--style--global--content-size, 960px);
  margin-inline: auto;
}

/* 固定ページ：幅広は 1200 */
body.page .tecrita-entry > :where(.alignwide){
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
}

/* 固定ページ：全幅は 100vw */
body.page .tecrita-entry > :where(.alignfull){
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* constrained の「960に寄せる」対象から alignwide を除外 */
.is-layout-constrained > :where(
  :not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)
){
  max-width: var(--wp--style--global--content-size);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* alignwide は 1200 を明示（globalの指定に勝つように） */
.is-layout-constrained > :where(.alignwide){
  max-width: var(--wp--style--global--wide-size) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   2.x) 入れ子例外（Arkhe的）
   - トップレベルの alignfull の中では
     - 通常ブロック：content幅
     - alignwide：wide幅
     - alignfull：100vw計算をやめて親の中で100%扱い
========================================================= */


/* ② alignfullセクション内の alignwide は wide 幅で止める（D対策） */
.entry-content > .alignfull > .alignwide,
.entry-content > .alignfull > .wp-block-group__inner-container > .alignwide{
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--tecrita-container-pad);
}

/* ③ alignfull の中に入った alignfull は「100vw補正」を無効化（入れ子alignfull事故防止） */
.entry-content > .alignfull > :where(:not(.alignwide):not(.alignfull)):not(.wp-block-vk-blocks-slider){
  max-width: var(--tecrita-content-size);
  margin-inline: auto;
  padding-inline: var(--tecrita-container-pad);
}

/* =========================================================
   Cover（alignfull）：背景は100vw / 中身はcontent幅
========================================================= */

/* F-1) トップレベルの Cover.alignfull を確実に100vw化 */
:where(.site-main, .entry-content) > .wp-block-cover.alignfull{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw - (var(--tecrita-vw-diff) / 2)) !important;
  margin-right: calc(50% - 50vw - (var(--tecrita-vw-diff) / 2)) !important;
  padding-inline: 0 !important;
}

/* F-2) Cover内は「外枠を絞らない」：左右余白は子要素側で付ける */
.wp-block-cover.alignfull :where(.wp-block-cover__image-background, .wp-block-cover__video-background){
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Cover直下の “通常” は content 幅 */
.wp-block-cover.alignfull > .wp-block-cover__inner-container{
  max-width: var(--tecrita-content-size);
  margin-inline: auto;
  padding-inline: var(--tecrita-container-pad);
}

/* Cover直下の alignwide は wide 幅（=1200） */
.wp-block-cover.alignfull > .wp-block-cover__inner-container > .alignwide{
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding-inline: var(--tecrita-container-pad);
}

/* Cover直下の alignfull は“中では100vw計算しない”でOK（必要なら） */
.wp-block-cover.alignfull > .wp-block-cover__inner-container > .alignfull{
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-inline: 0 !important;
}

/* =========================================================
   入れ子alignfullの例外（E対策）：alignfullの中のalignfullは100vw計算しない
   ※対象を「画像・Cover」に絞って安全に
========================================================= */

.entry-content > .alignfull > :where(.wp-block-image.alignfull, .wp-block-cover.alignfull),
.entry-content > .alignfull > .wp-block-group__inner-container > :where(.wp-block-image.alignfull, .wp-block-cover.alignfull){
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ① alignfull（背景）直下の “通常ブロック” は content 幅（C用・基礎） */
.entry-content > .alignfull > :where(:not(.alignwide):not(.alignfull)){
  max-width: var(--tecrita-content-size);
  margin-inline: auto;
  padding-inline: var(--tecrita-container-pad);
}

/* ② alignfull（背景）直下が Group/Columns の場合も “中身だけ” を content 幅に揃える（G2/G3対策） */
.entry-content > .alignfull > :where(.wp-block-group, .wp-block-columns){
  max-width: var(--wp--style--global--content-size, 960px);
  margin-inline: auto;
  padding-inline: var(--tecrita-container-pad);
}

/* ---------------------------------------------------------
  3) Gutenberg Group の pad整理（軽く）
--------------------------------------------------------- */
.wp-block-group.alignfull{
  padding-inline: 0;
}

/* b-hero は外側を全幅にしたいので念のため0（重複OK） */
.b-hero.wp-block-group.alignfull{
  padding-inline: 0;
}


/* ---------------------------------------------------------
  4) ボタンの基本
--------------------------------------------------------- */
.wp-block-buttons .wp-block-button__link{
  text-decoration: none;
}

/* base(白) 背景ボタンは、文字を text（黒）へ */
:where(.wp-element-button).has-base-background-color,
:where(.wp-block-button__link).has-base-background-color{
  color: var(--wp--preset--color--text) !important;
}

/* ---------------------------------------------------------
  6) CTA（2ボタン）: SPで縦積み＆同幅（CTAだけ）
--------------------------------------------------------- */
@media (max-width: 640px){
  .tecrita-cta .wp-block-buttons{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }
  .tecrita-cta .wp-block-buttons .wp-block-button__link{
    width: 100%;
  }
}


/* ---------------------------------------------------------
  7) CF7: cols/固定幅由来の横はみ出し防止
--------------------------------------------------------- */
.tecrita-cf7 :where(input, textarea, select){
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tecrita-cf7 textarea{
  min-width: 0;         /* cols由来の最小幅を潰す */
  resize: vertical;
}

.tecrita-cf7__confirm-list{
  margin: 0;
}

.tecrita-cf7__confirm-list dd{
  margin: 0;
  overflow-wrap: anywhere; /* 長い文字列/URLでも折り返す */
}

/* =========================================================
   Snow Monkey Forms (SMF) - Generic Base Styles
   - 追加項目/新フォームでも破綻しにくい汎用ベース
   - なるべく低詳細度(:where)で、親テーマとして安全に
========================================================= */

/* 0) 変数（TECRITA側に合わせて必要なら調整） */
:where(.entry-content, .wp-block-post-content) :where(.snow-monkey-form){
  --smf-gap-y: 16px;
  --smf-gap-x: 16px;
  --smf-radius: 10px;

  --smf-border: rgba(0,0,0,.14);
  --smf-border-strong: rgba(0,0,0,.24);
  --smf-bg: var(--wp--preset--color--base);
  --smf-surface: rgba(0,0,0,.03);

  --smf-text: var(--wp--preset--color--text);
  --smf-muted: rgba(0,0,0,.6);
  --smf-danger: #d92d20; /* エラー色は固定でOK（必要ならpalette化） */
}

/* 1) フォーム全体 */
:where(.entry-content, .wp-block-post-content) :where(form.snow-monkey-form){
  color: var(--smf-text);
}
:where(.entry-content, .wp-block-post-content) :where(form.snow-monkey-form) *{
  box-sizing: border-box;
}

/* 2) SMF「simple-table」レイアウトの基本 */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-form--simple-table){
  display: grid;
  gap: var(--smf-gap-y);
}

/* 1行（= .smf-item） */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-item){
  display: grid;
  gap: var(--smf-gap-x);
  padding: 14px 0;
  border-bottom: 1px solid var(--smf-border);
}
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-item:first-child){
  padding-top: 0;
}
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-item:last-child){
  border-bottom: 0;
  padding-bottom: 0;
}

/* ラベル/入力の2カラム（PC） */
@media (min-width: 782px){
  :where(.entry-content, .wp-block-post-content)
  :where(form.snow-monkey-form .smf-item){
    grid-template-columns: minmax(180px, 260px) 1fr;
    align-items: start;
  }
}

/* ラベル */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-item__label){
  font-weight: 700;
  line-height: 1.5;
}
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-item__label__text){
  display: inline-block;
}

/* コントロール側 */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-item__controls){
  min-width: 0; /* 長いメールなどのはみ出し対策 */
}

/* 3) 入力系の共通見た目（構造に依存せず target） */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form)
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
       textarea,
       select){
  width: 100%;
  max-width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--smf-border);
  border-radius: var(--smf-radius);
  background: var(--smf-bg);
  color: inherit;
  font: inherit;
  line-height: 1.4;
  outline: none;
}

/* プレースホルダー */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form)
:where(input::placeholder, textarea::placeholder){
  color: var(--smf-muted);
  opacity: .75;
}

/* フォーカス */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form)
:where(input:not([type="checkbox"]):not([type="radio"]),
       textarea,
       select):focus{
  border-color: var(--smf-border-strong);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* textarea */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form textarea){
  resize: vertical;
  min-height: 7em;
}

/* 4) チェック/ラジオ（最低限） */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form)
:where(input[type="checkbox"], input[type="radio"]){
  transform: translateY(1px);
}
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form) :where(label){
  cursor: pointer;
}

/* 5) エラーメッセージ/無効状態 */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-error-messages){
  margin-top: 8px;
  font-size: .92em;
  color: var(--smf-danger);
  line-height: 1.5;
}

/* data-invalid=1 の入力を赤枠に（SMFが付与） */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form)
:where([data-invalid="1"]){
  border-color: color-mix(in srgb, var(--smf-danger) 55%, var(--smf-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--smf-danger) 18%, transparent);
}

/* 6) アクション（確認画面へ/送信などのボタン） */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-action){
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* SMFの button（確認画面へ） */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-button-control__control){
  appearance: none;
  border: 0;
  border-radius: calc(var(--smf-radius) + 2px);
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

/* hover / focus */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-button-control__control:hover){
  filter: brightness(.95);
}
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-button-control__control:focus-visible){
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,0,0,.12);
}

/* 7) 送信中表示（SMFの .smf-sending など） */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-sending){
  margin-left: .5em;
}

/* 8) システムエラー表示（出る時だけ） */
:where(.entry-content, .wp-block-post-content)
:where(form.snow-monkey-form .smf-system-error-content-ready){
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--smf-danger) 40%, var(--smf-border));
  background: color-mix(in srgb, var(--smf-danger) 10%, var(--smf-bg));
  border-radius: var(--smf-radius);
  color: var(--smf-danger);
  line-height: 1.6;
}

/* 9) 小画面：ボタンを全幅寄せ */
@media (max-width: 480px){
  :where(.entry-content, .wp-block-post-content)
  :where(form.snow-monkey-form .smf-action){
    flex-direction: column;
    align-items: stretch;
  }
  :where(.entry-content, .wp-block-post-content)
  :where(form.snow-monkey-form .smf-button-control__control){
    width: 100%;
  }
}



/* ---------------------------------------------------------
  8) 横スクロールの最終保険
  ※ hidden ではなく clip 推奨（レイアウトが崩れた時に気づきやすい）
--------------------------------------------------------- */
html, body{
  overflow-x: clip;
}


/* =========================================================
   9) Minimal Spacing（Parent Theme）
   - block間の基本リズムだけ親テーマで担保
   - セクション（背景系）だけ内側に上下余白
========================================================= */

:root{
  --tecrita-block-gap: 1.5em; /* theme.json の blockGap と揃える */
  --tecrita-section-pad: clamp(24px, 4vw, 56px);
}

/* 連続ブロックの基本間隔（保険）
   ※alignfull/alignwide/通常、どれでも「同じリズム」で並ぶ */
/* .entry-content > * + *{
  margin-top: var(--tecrita-block-gap, 1.2em);
} */

/* セクション（背景ありGroup/Cover）だけ上下padding */
.entry-content :where(.wp-block-group.has-background, .wp-block-cover){
  padding-block: var(--tecrita-section-pad);
}

/* セクション直後の blockGap を打ち消す */
.entry-content
  :where(.wp-block-group.has-background, .wp-block-cover)
  + *{
  margin-top: 0;
}

/* Group/Coverの inner は padding を持たせない（中身側で設計する） */
.entry-content .wp-block-group.has-background > .wp-block-group__inner-container,
.wp-block-cover > .wp-block-cover__inner-container{
  padding-block: 0;
}

/* 見出し直後だけ読みやすく（上は blockGap に任せる） */
.entry-content :where(h1,h2,h3,h4,h5,h6){
  margin-bottom: 0.5em;
}

/* Columnsだけが持ってる margin-bottom を止める */
.entry-content :where(.wp-block-columns){
  margin-bottom: 0;
}


/* =========================================================
   b-hero（MV）: alignfull は外側100vw / 文字だけcontent幅
========================================================= */

/* 外側：全幅（背景用） */
.b-hero.alignfull{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw - (var(--tecrita-vw-diff) / 2)) !important;
  margin-right: calc(50% - 50vw - (var(--tecrita-vw-diff) / 2)) !important;
  padding-inline: 0 !important;
}

/* ✅ 背景レイヤーは「絞らない」 */
.b-hero__slides{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ✅ 文字エリアだけをコンテンツ幅に絞る */
.b-hero__inner{
  max-width: var(--wp--style--global--content-size, 960px);
  margin-inline: auto;
  padding-inline: var(--tecrita-container-pad);
}

/* =========================================================
   List Header (archive / search / home / 404)
   - 親テーマのデフォルト：下線あり
   - 余白は u-py / tecrita-container に委譲
   - 子テーマで簡単に上書きできる設計
========================================================= */

.tecrita-list-header{
  margin-bottom: 32px;              /* 一覧との距離 */
  padding-bottom: 20px;             /* 下線との間 */
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* H1 */
.tecrita-list-header__title{
  margin: 0;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.3;
  font-weight: 700;
}

/* 説明文（カテゴリ説明・検索件数など） */
.tecrita-list-header__desc{
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--wp--preset--color--muted-text, #666);
}

/* 説明文内の要素が暴れないよう最低限 */
.tecrita-list-header__desc > *:first-child{
  margin-top: 0;
}
.tecrita-list-header__desc > *:last-child{
  margin-bottom: 0;
}

/* =========================================================
  Archive（category/tag/date/search）では
  entry-content配下の「ブロックへ配布するpadding」を止める
  → タイトル/本文の左位置ズレを解消
========================================================= */
.archive .entry-content > :where(:not(.alignwide):not(.alignfull)),
.search .entry-content > :where(:not(.alignwide):not(.alignfull)){
  padding-inline: 0;
}


/* =========================================================
   TECRITA: “中身も幅広” にしたいグループだけ
   使い方：グループに class="is-wide-contents"
========================================================= */

/* そのグループの内側（子ブロック全体）を 1200 にする */
.wp-block-group.is-wide-contents > .wp-block-group__inner-container{
  max-width: var(--tecrita-wide-size); /* 1200 */
  margin-inline: auto;
}

/* グループ直下に inner-container がないパターンへの保険（念のため） */
.wp-block-group.is-wide-contents{
  /* constrained レイアウト時でも広がるように */
  --wp--style--global--content-size: var(--tecrita-wide-size);
}


/* =========================================================
   VK Blocks Slider（alignfull専用の例外処理）
   - TECRITA の 960 制限から除外
   - 影響範囲：VK スライダー + alignfull のみ
========================================================= */
.entry-content > .wp-block-vk-blocks-slider.alignfull{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw - (var(--tecrita-vw-diff) / 2));
  margin-right: calc(50% - 50vw - (var(--tecrita-vw-diff) / 2));
  padding-inline: 0;
}

.entry-content > .wp-block-vk-blocks-slider.alignfull > *{
  max-width: none;
}