: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-solid: rgba(0,0,0,.20); /* 単色20% */
  --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;

  /* 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 (the_post_navigation)
  - 矢印はフォント非依存（CSS描画）
  - 文字と矢印を縦中央で揃える（inline-flex）
  - SP: 縦積み / 640px〜: 左右2カラム
========================================================= */

/* 1) ナビ全体 */
.post-navigation{
  margin: 40px 0;
  border-top: 1px solid var(--c-border);
  padding: 2em 0.5em;
  border-bottom: 1px solid var(--c-border);
}

/* 2) nav-links の余計なインデントを除去 */
.post-navigation .nav-links{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;         /* SPも grid にして統一 */
  gap: 16px;
}

/* 3) それぞれのブロック */
.post-navigation .nav-previous,
.post-navigation .nav-next{
  margin: 0;
}

.post-navigation .nav-next {
  text-align: right;
}

/* 4) リンク：矢印と文字を縦中央で揃える（重要） */
.post-navigation .nav-previous a,
.post-navigation .nav-next a{
  display: inline-flex;
  align-items: center;
  line-height: 1.6;
  text-decoration: none;
}

/* hover（任意） */
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover{
  text-decoration: underline;
}

/* 5) 矢印（フォント非依存） */
.post-navigation .nav-previous a::before{
  content: "";
  width: .45em;
  height: .45em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: .8em;
  flex: 0 0 auto;
}

.post-navigation .nav-next a::after{
  content: "";
  width: .45em;
  height: .45em;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: .8em;
  flex: 0 0 auto;
}

/* 6) 640px〜：左右2カラム */
@media (min-width: 640px){
  .post-navigation .nav-links{
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .post-navigation .nav-next{
    text-align: right;
    justify-self: end; /* 右カラムの中で右寄せを安定させる */
  }
}




/* =========================================================
  Single Post Layout: main + sidebar
  - デフォルトはサイドバー表示
  - ウィジェットが空なら 1カラム（nosidebar）
========================================================= */

.single-post .tecrita-post-layout{
  width: 100%;
}

.single-post .tecrita-post-layout--sidebar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}

.single-post .tecrita-post-layout__main{
  min-width: 0;
}

/* サイドバー本体 */
.single-post .tecrita-sidebar{
  min-width: 0;
}

/* ウィジェットが空のときは 1カラム */
.single-post .tecrita-post-layout--nosidebar{
  display: block;
}

/* SPは縦積み */
@media (max-width: 960px){
  .single-post .tecrita-post-layout--sidebar{
    grid-template-columns: 1fr;
  }
}