/* =========================================================
   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でも折り返す */
}


/* ---------------------------------------------------------
  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;
}