/*
 * l-*  レイアウト
 *
 * 出典: 本番の Autoptimize 統合CSS（2026-09-01 取得）から
 *       このサイトで実際に使われている組み合わせだけを書き起こしたもの。
 *
 * 使っていない header-layout（2row / center / left）や
 * footer-layout（footer-1〜5）、sticky / overlay ヘッダのCSSは持ち込まない。
 * theme_mods は header-layout='1row' / footer-layout='footer' /
 * header-position='' で固定されている。
 */

/* ---------------------------------------------------------------------------
 * ページ全体の器
 * ------------------------------------------------------------------------ */

.l-container {
  position: relative;
}

/* data-sticky-footer="true"（全ページ）でフッターを下端に押し付ける */
html[data-sticky-footer="true"] .l-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

html[data-sticky-footer="true"] .l-container > .l-contents {
  flex: 1 0 auto;
}

html[data-sticky-footer="true"] .l-container > .l-header,
html[data-sticky-footer="true"] .l-container > .l-footer {
  flex: none;
}

/* ---------------------------------------------------------------------------
 * ヘッダ（header-layout = 1row / header-alignfull = 1）
 * ------------------------------------------------------------------------ */

.l-header {
  background-color: var(--_global--background-color);
  color: var(--header-text-color);
  overflow: hidden;
  z-index: 1000;
}

@media (min-width: 1024px) {
  .l-header {
    overflow: visible;
  }
}

.l-header__content {
  padding-bottom: var(--_padding-2);
  padding-top: var(--_padding-2);
}

@media (min-width: 1024px) {
  .l-header__content {
    padding-bottom: 0;
    padding-top: 0;
  }
}

.l-header .c-hamburger-btn__bar {
  background-color: var(--header-text-color);
}

/*
 * ヘッダ内の c-row は下マージンを持たない。
 *
 * :not(.l-header--left) を落とさないこと。本番の宣言は
 *   .l-header:not(.l-header--left) .c-row,
 *   .l-header:not(.l-header--left) .c-row__col{margin-bottom:0}
 * で、詳細度 (0,3,0)。これを (0,2,0) に削ると
 * _components.css の .c-row > .c-row__col{margin-bottom:var(--_gap)}（同じ (0,2,0)）に
 * 「後勝ち」で負け、ヘッダの列に --_gap 分（PC 28.8px / SP 19.2px）の下マージンが残る。
 * flex コンテナの高さは子のマージンを含むため、.l-header がそのぶん高くなる。
 * header-layout=left は使っていないが、:not() は詳細度のために必要。
 */
.l-header:not(.l-header--left) .c-row,
.l-header:not(.l-header--left) .c-row__col {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .l-1row-header__branding {
    padding-bottom: var(--_padding-2);
    padding-top: var(--_padding-2);
  }
}

.l-1row-header .p-global-nav .c-navbar__item {
  flex: 0 1 auto;
}

/* ---------------------------------------------------------------------------
 * コンテンツ
 * ------------------------------------------------------------------------ */

.l-contents {
  --contents--gap: var(--_margin2);
  overflow-x: clip;
}

[data-has-sidebar="true"] .l-contents {
  --contents--main-basis: var(--wp--custom--has-sidebar-main-basis);
  --contents--sidebar-basis: var(--wp--custom--has-sidebar-sidebar-basis);
}

:where(.l-contents__container > *),
:where(.l-contents__main > *) {
  margin-inline: auto;
  max-width: var(--wp--custom--content-width);
}

.l-contents__inner {
  max-width: 100%;
  margin-bottom: var(--contents--gap);
  margin-top: var(--contents--gap);
}

.l-contents__inner:first-child {
  margin-top: 0;
  padding-top: var(--_padding2);
}

.l-contents__inner:last-child {
  margin-bottom: 0;
  padding-bottom: var(--_padding2);
}

/*
 * 全幅テンプレートはコンテンツ幅の上限を持たない。
 * 本番の統合CSSにこの1行がある（`.l-body{overflow-x:clip}` の直後）:
 *   [data-is-full-template=true]{--wp--custom--content-width:none;--wp--custom--content-wide-width:none}
 * 抜けていると `make var-diff` で「本番では定義されているのにローカルで未定義」に出る。
 * 参照側は `_components.css` / `_layout.css` の max-width: var(--wp--custom--content-width)。
 */
[data-is-full-template="true"] {
  --wp--custom--content-width: none;
  --wp--custom--content-wide-width: none;
}

/* 全幅テンプレート（トップページ / blank-content 8ページ）は上下パディングを持たない */
[data-has-sidebar="false"][data-is-full-template="true"] .l-contents__inner {
  padding-bottom: 0;
  padding-top: 0;
}

/* 細幅（右サイドバー時）は本文のコンテンツ幅を slim-width に絞る */
[data-has-sidebar="false"][data-is-slim-width="true"] .l-contents__inner {
  --wp--custom--content-width: var(--wp--custom--slim-width);
}

/* ---------------------------------------------------------------------------
 * サイドバー（右カラム）
 *
 * 本番の <aside class="l-contents__sidebar"> は **中身が空**。
 * それでも flex アイテムとして幅を占有するので、main の幅が決まる。
 * ------------------------------------------------------------------------ */

[data-has-sidebar="true"] .l-contents__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--contents--gap);
}

[data-has-sidebar="true"] .l-contents__main {
  flex-basis: var(--contents--main-basis);
  flex-grow: 999;
  min-width: 0;
}

[data-has-sidebar="true"] .l-contents__sidebar {
  flex-basis: var(--contents--sidebar-basis);
  flex-grow: 1;
  margin: 0;
  min-width: 0;
}

/*
 * sp（〜1023px）ではサイドバーが本文の下へ回り込む。本番はそのとき
 * flex の gap に**加えて** margin-top を1つぶん載せている。
 * 本番の宣言（統合CSS オフセット 77043 付近。`margin:0` の直後にあり、後勝ちで効く）:
 *   @media not all and (min-width:1024px){
 *     [data-has-sidebar=true] .l-contents__sidebar{margin-top:var(--contents--gap)}
 *   }
 * これが欠けていると、サイドバーが空でも「本文の下の余白」が
 * --_margin2（sp 375px で 42.3px）ぶん足りなくなる。
 * 実測（Δ = ローカル − 本番、修正前）:
 *   /entry/ sp                          .l-contents__inner -42.4（本文側の Δh は 0）
 *   /chinese-marriage-family-values/ sp .l-contents__inner -157.5 / .l-contents__main -115.2
 *                                       → 差の 42.3 がこれ
 * data-has-sidebar="true" のページ（記事52本と一部の固定ページ）にだけ効く。
 * pc（1024px 以上）は横並びなので本番でも適用されない。
 */
@media not all and (min-width: 1024px) {
  [data-has-sidebar="true"] .l-contents__sidebar {
    margin-top: var(--contents--gap);
  }
}

.l-body--right-sidebar .l-contents__inner {
  flex-direction: row;
}

[data-has-sidebar="true"] .l-contents__main .c-section > .c-container {
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------------------------------------
 * フッタ（footer-layout = footer → l-footer--default）
 * ------------------------------------------------------------------------ */

.l-footer {
  border-top: 1px solid var(--wp--preset--color--sm-lighter-gray);
  overflow: hidden;
}