:root{
  --tecrita-container-pad: 16px;
  --tecrita-header-h: 70px;
  --tecrita-main-pad-y: 24px;

  /* WordPress preset（theme.json由来）を “役割” に変換 */
  --tecrita-color-bg:      var(--wp--preset--color--base);
  --tecrita-color-surface: var(--wp--preset--color--muted);
  --tecrita-color-primary: var(--wp--preset--color--primary);
  --tecrita-color-accent:  var(--wp--preset--color--accent);

  /* 文字・罫線は、まず固定でもOK（必要なら後でpalette化） */
  --tecrita-color-text:    var(--wp--preset--color--text);
  --tecrita-color-heading: var(--wp--preset--color--text);
  --tecrita-color-border:  rgba(0,0,0,.12);

  /* 主役色の上の文字（白固定で困ることが多いので分離） */
  --tecrita-color-primary-contrast: #fff;

  /* Hero vars */
  --hero-bg: var(--tecrita-color-surface);
  --hero-bg-image: none;
  --hero-overlay: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  --hero-min-height: clamp(360px, 70vh, 760px);
  --hero-title-color: var(--tecrita-color-primary-contrast);
  --hero-sub-color: rgba(255,255,255,.88);
  --hero-text-shadow: 0 2px 20px rgba(0,0,0,.28);
  --hero-cta-gap: 16px;
  --hero-dot-size: 10px;
  --hero-dot-opacity: .55;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* スクロールバー有無で横幅が変わってガタつくのを防ぐ（特に一覧/短いページ） */
html{
  scrollbar-gutter: stable;
}

/* 古いブラウザ用フォールバック */
@supports not (scrollbar-gutter: stable){
  html{ overflow-y: scroll; }
}

body{
  margin: 0;
  color: var(--tecrita-color-text);
  background: var(--tecrita-color-bg);
  font-family: var(--wp--preset--font-family--sans);
  line-height: 1.8;
}

a{ color: var(--tecrita-color-primary); }
a:hover{ opacity: .85; }

.btn-box a,
.btn-box2 a,
.btn-box-cta a{
  background: var(--tecrita-color-accent);
  color: var(--tecrita-color-primary-contrast);
}

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus{
  position: static !important;
  width: auto; height: auto;
  margin: 0;
  clip: auto;
  white-space: normal;
}

/* site-main は上を0、下だけ確保（必要なら） */
.site-main{
  padding-top: 0;
  padding-bottom: var(--tecrita-main-pad-y);
}


/* Container (wide=1200) : header/footer/breadcrumb/page-header inner */
.tecrita-container{
  width: 100%;
  margin-inline: auto;

  /* Arkhe式：max-width は “中身幅 + 左右padding” */
  max-width: calc(var(--wp--style--global--wide-size, 1200px) + (var(--tecrita-container-pad) * 2));
  padding-inline: var(--tecrita-container-pad);
}

/* ヘッダー内側は常に左右余白を持つ */
.site-header .tecrita-container{
  padding-inline: var(--tecrita-container-pad);
}

/* 一覧・検索は 960（content）にしたい場合 class="tecrita-container is-content" を付与する */
.tecrita-container.is-content{
  max-width: calc(
    var(--tecrita-content-size, var(--wp--style--global--content-size, 960px))
    + (var(--tecrita-container-pad) * 2)
  );
}

.has-primary-background-color{
  color: var(--tecrita-color-on-primary);
}

/* =========================================================
  Post Navigation（前後記事ナビ）を本文と“同じ左右”に揃える
  - 対策Aで max-width は揃っている前提
========================================================= */

/* 1) ナビ全体の左右余白を「本文ブロック」と同じにする */
.post-navigation{
  padding-inline: 0;
}

/* 2) nav の中身が余計にインデントされるテーマ/コアCSS対策（保険） */
.post-navigation .nav-links{
  margin: 0;
  padding: 0;
  gap: 16px;
}

/* 3) リンク自体の左右ズレの原因になりやすい余白を整理 */
.post-navigation .nav-previous,
.post-navigation .nav-next{
  margin: 0;
}

/* 4) SPは縦積み、PCは左右2カラム（見た目が安定） */
@media (min-width: 640px){
  .post-navigation .nav-links{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .post-navigation .nav-next{
    text-align: right;
  }
}

/* 5) もし「ナビだけ上下に妙な余白」がある場合の保険 */
.post-navigation .nav-previous a,
.post-navigation .nav-next a{
  display: inline-block;
}