/*
 Theme Name:  Astra Child Honzbase
 Template:     astra
 Description:  Void Base Japan — child theme minimal, serene & reproducible.
 Author:       VBJ
 Version:      2025-11-04
*/

/* ================================
   0) Design tokens
   ================================ */
:root{
  /* Serene brand blues (edit only --vbj-blue to adjust tone) */
  --vbj-blue:#3F6FA9; /* Light, calm blue (AA with white text) */
  --vbj-blue-d: color-mix(in srgb, var(--vbj-blue) 88%, #000);
  --vbj-blue-ink:#eaf1fa;

  /* Neutrals */
  --vbj-text:#1a1a1a;
  --vbj-muted:#6b7280;
  --vbj-border:#e5e7eb;
  --vbj-bg:#ffffff;
}

/* ================================
   1) Global typography
   ================================ */
/* Base: responsive 16→18px, generous line-height for long-form reading */
html{font-size:clamp(16px,1.8vw,18px); line-height:1.75;}

/* Unify body copy across pages, blocks, and custom lists */
body, .entry-content p, .entry-content li, .hb-item__overview{
  font-size:18px; line-height:1.75; letter-spacing:.015em; color:var(--vbj-text);
}

/* Lists spacing */
.entry-content ul, .entry-content ol{ margin:0 0 1.1em 1.35em; }
.entry-content li{ margin: .2em 0; }

/* Headings (quiet hierarchy) */
h1{ font-size:clamp(28px,3.2vw,36px); line-height:1.25; margin: .6em 0 .4em; }
h2{ font-size:clamp(22px,2.4vw,28px); line-height:1.3;  margin: .9em 0 .5em; }
h3{ font-size:clamp(19px,2vw,22px);  line-height:1.35; margin: .8em 0 .45em; }
h4{ font-size:18px; line-height:1.4; margin:.7em 0 .4em; }
h5,h6{ font-size:16px; line-height:1.4; margin:.6em 0 .35em; color:var(--vbj-muted); }

/* Page title on archive-like “list” pages (shortcode pages) */
.vbj-archive-page .entry-title{ font-size:26px; line-height:1.3; font-weight:700; margin:12px 0 18px; }

/* Links */
a{ color:var(--vbj-blue); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--vbj-blue-d); }

/* ================================
   2) Buttons (Gutenberg / Astra / inputs)
   ================================ */
.wp-block-button__link,
.ast-button, .button, button,
input[type=submit], input[type=button], input[type=reset]{
  background:var(--vbj-blue);
  color:#fff;
  border:1px solid var(--vbj-blue);
  border-radius:10px;
  box-shadow:none;
  text-decoration:none;
  padding:.6em 1.1em;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.wp-block-button__link:hover,
.ast-button:hover, .button:hover, button:hover,
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover{
  background:var(--vbj-blue-d);
  border-color:var(--vbj-blue-d);
  color:#fff;
}
.wp-block-button__link:focus,
.ast-button:focus, .button:focus, button:focus{
  outline:2px solid var(--vbj-blue);
  outline-offset:2px;
  box-shadow:0 0 0 3px var(--vbj-blue-ink);
}

/* Outline style buttons */
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; color:var(--vbj-blue); border-color:var(--vbj-blue);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--vbj-blue); color:#fff;
}

/* ================================
   3) HB list cards (Visionaries / Artistry / Roots)
   ================================ */
.hb-archive .hb-list{ display:block; }
.hb-item{ margin:0 0 20px; }
.hb-item__title{ font-size:18px; margin:0 0 4px; line-height:1.35; }
.hb-item__role{ font-size:13px; color:var(--vbj-muted); margin:0 0 8px; }
.hb-item__overview{ margin:0; }

/* Thumbnail niceties (if present) */
.hb-thumb, .wp-post-image{ border-radius:12px; }

/* Card container */
.hb-archive .hb-item{ border:1px solid var(--vbj-border); border-radius:12px; padding:18px; background:#fff; }

/* ================================
   4) Spacing & misc.
   ================================ */
.entry-content > *:first-child{ margin-top:0; }
.entry-content > *:last-child{ margin-bottom:0; }
figure{ margin:0 0 1.1em; }
img{ height:auto; max-width:100%; display:block; }

/* ================================
   5) Accessibility tweaks
   ================================ */
:focus-visible{ outline:2px solid var(--vbj-blue); outline-offset:2px; }
/* === VBJ quick patch: header link, list layout, heading size === */

/* 1) ヘッダーのサイトタイトルの下線を消す（他のリンクには影響なし） */
.site-title a, .ast-site-title a { text-decoration: none !important; }

/* 2) リンクの下線は本文とカード内に限定（グローバルの a{ text-decoration:underline } を打ち消し） */
a { text-decoration: none; }
.entry-content a, .hb-archive a { text-decoration: underline; text-underline-offset: 2px; }

/* 3) 一覧ページの見出し（ページタイトル）を控えめに */
.vbj-archive-page .entry-title { font-size: 26px !important; line-height: 1.3 !important; margin: 12px 0 18px !important; }

/* 4) 一覧カードを横並びに復旧（画像あり＝左/本文＝右、画像なし＝本文フル） */
.hb-archive .hb-item { 
  display: flex; 
  gap: 20px; 
  align-items: flex-start; 
  border: 1px solid var(--vbj-border); 
  border-radius: 12px; 
  padding: 18px; 
  background: #fff;
}
.hb-item__media { flex: 0 0 220px; max-width: 220px; }
.hb-item__media img, .hb-item__media .wp-post-image { width: 100%; height: auto; display: block; border-radius: 12px; }
.hb-item__body { flex: 1 1 auto; min-width: 0; }

/* 画像が無いカードは本文をフル幅に */
.hb-item:not(:has(.hb-item__media)) { display: block; }

/* 5) カード内の文字サイズ・余白の最終調整（静謐トーン） */
.hb-item__title { font-size: 18px !important; margin: 0 0 4px !important; line-height: 1.35; }
.hb-item__role  { font-size: 13px !important; margin: 0 0 8px !important; opacity: .85; }
.hb-item__overview { font-size: 18px !important; line-height: 1.75 !important; margin: 0 !important; }
/* === 1) Home の青ボタンを“静謐な青”に強制固定 === */
:root{
  --vbj-blue:#3F6FA9;
  --ast-global-color-0:#3F6FA9; /* AstraのPrimaryも同色に固定 */
  --ast-global-color-1:#3F6FA9;
}
.home .wp-block-buttons .wp-block-button .wp-block-button__link,
.home .wp-block-button__link,
.home .ast-button, .home .button, .home button,
.home input[type=submit], .home input[type=button], .home input[type=reset]{
  background:var(--vbj-blue) !important;
  border:1px solid var(--vbj-blue) !important;
  color:#fff !important;
  border-radius:10px !important;
}
.home .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important;
  color:var(--vbj-blue) !important;
  border-color:var(--vbj-blue) !important;
}
.home .wp-block-button .wp-block-button__link:hover,
.home .ast-button:hover, .home .button:hover, .home button:hover{
  background:color-mix(in srgb, var(--vbj-blue) 88%, #000) !important;
  border-color:color-mix(in srgb, var(--vbj-blue) 88%, #000) !important;
}

/* === 2) Artistry 一覧のサムネイルを“横長トリミング”にしない（自然比率表示） === */
.hb-item__media{ flex:0 0 240px; max-width:240px; }
.hb-item__media img, .hb-item__media .wp-post-image{
  width:100%;
  height:auto !important;     /* ← 高さ固定を禁止 */
  object-fit:contain !important; /* ← 画像全体を見せる */
  border-radius:12px;
}

/* === 3) 一覧ページの見出しをサイトタイトルより小さく控えめに === */
.vbj-archive-page .entry-title{
  font-size:22px !important;  /* ← 小さめ。必要なら 20–24px で調整可 */
  line-height:1.3 !important;
  font-weight:700;
  margin:12px 0 16px !important;
}

/* ヘッダーのサイトタイトルは下線なし（維持） */
.site-title a, .ast-site-title a{ text-decoration:none !important; }
/* === 1) Home の青ボタンを“静謐な青”に強制固定 === */
:root{
  --vbj-blue:#3F6FA9;
  --ast-global-color-0:#3F6FA9; /* AstraのPrimaryも同色に固定 */
  --ast-global-color-1:#3F6FA9;
}
.home .wp-block-buttons .wp-block-button .wp-block-button__link,
.home .wp-block-button__link,
.home .ast-button, .home .button, .home button,
.home input[type=submit], .home input[type=button], .home input[type=reset]{
  background:var(--vbj-blue) !important;
  border:1px solid var(--vbj-blue) !important;
  color:#fff !important;
  border-radius:10px !important;
}
.home .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important;
  color:var(--vbj-blue) !important;
  border-color:var(--vbj-blue) !important;
}
.home .wp-block-button .wp-block-button__link:hover,
.home .ast-button:hover, .home .button:hover, .home button:hover{
  background:color-mix(in srgb, var(--vbj-blue) 88%, #000) !important;
  border-color:color-mix(in srgb, var(--vbj-blue) 88%, #000) !important;
}

/* === 2) Artistry 一覧のサムネイルを“横長トリミング”にしない（自然比率表示） === */
.hb-item__media{ flex:0 0 240px; max-width:240px; }
.hb-item__media img, .hb-item__media .wp-post-image{
  width:100%;
  height:auto !important;     /* ← 高さ固定を禁止 */
  object-fit:contain !important; /* ← 画像全体を見せる */
  border-radius:12px;
}

/* === 3) 一覧ページの見出しをサイトタイトルより小さく控えめに === */
.vbj-archive-page .entry-title{
  font-size:22px !important;  /* ← 小さめ。必要なら 20–24px で調整可 */
  line-height:1.3 !important;
  font-weight:700;
  margin:12px 0 16px !important;
}

/* ヘッダーのサイトタイトルは下線なし（維持） */
.site-title a, .ast-site-title a{ text-decoration:none !important; }
/* === VBJ refine: unify thumbnail + heading balance === */

/* ① 一覧ページのサムネイルサイズを Cultural Roots と完全一致に */
.hb-archive .hb-item__media,
.hb-archive--visionary .hb-item__media,
.hb-archive--artistry .hb-item__media,
.hb-archive--cultural_root .hb-item__media {
  flex: 0 0 150px;      /* ← Cultural Roots に合わせて150px幅 */
  max-width: 150px;
}
.hb-archive .hb-item__media img,
.hb-archive .hb-item__media .wp-post-image {
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px;
}

/* ② 一覧ページのページ見出しをサイトタイトルより控えめに */
.vbj-archive-page .entry-title,
.page .entry-title {
  font-size: 18px !important;   /* ← Void Base Japan™ より小さい */
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 10px 0 16px !important;
  letter-spacing: 0.02em;
  color: var(--vbj-text);
}
/* === 強制パッチ：サムネ完全統一 + 見出しを小さく === */

/* 1) 3一覧（Visionaries/Artistry/Roots）のサムネ幅を完全同一に固定 */
.hb-archive--artistry .hb-item__media,
.hb-archive--cultural_root .hb-item__media,
.hb-archive--visionary .hb-item__media{
  flex:0 0 150px !important;   /* ← Cultural Roots に合わせて 150px */
  max-width:150px !important;
}

.hb-archive--artistry .hb-item__media img,
.hb-archive--cultural_root .hb-item__media img,
.hb-archive--visionary .hb-item__media img,
.hb-archive--artistry .hb-item__media .wp-post-image,
.hb-archive--cultural_root .hb-item__media .wp-post-image,
.hb-archive--visionary .hb-item__media .wp-post-image{
  width:100% !important;
  height:auto !important;          /* 伸び縮み禁止（比率維持） */
  object-fit:contain !important;   /* トリミング回避で全体表示 */
  border-radius:12px !important;
}

/* 2) 一覧ページのページ見出しをサイトタイトルより小さく（強制） */
body.page .entry-header .entry-title,
.entry-header .entry-title,
h1.entry-title{
  font-size:20px !important;       /* ← ここを 18〜22 で好みに調整OK */
  line-height:1.3 !important;
  font-weight:700 !important;
  margin:12px 0 14px !important;
}
/* === VBJ: thumbnail hard lock (Artistry = Roots と同サイズ) === */
:root{
  --hb-thumb-w:150px;   /* Roots に合わせた横幅 */
  --hb-thumb-h:100px;   /* Roots と同じ見た目の高さ（3:2想定） */
}

/* コンテナを同サイズに固定 */
.hb-archive--artistry .hb-item__media,
.hb-archive--cultural_root .hb-item__media{
  flex:0 0 var(--hb-thumb-w) !important;
  max-width:var(--hb-thumb-w) !important;
  height:var(--hb-thumb-h) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}

/* 画像はトリミングせず“中に収める” */
.hb-archive--artistry .hb-item__media img,
.hb-archive--cultural_root .hb-item__media img,
.hb-archive--artistry .hb-item__media .wp-post-image,
.hb-archive--cultural_root .hb-item__media .wp-post-image{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:12px !important;
}
/* === VBJ hard fix: Artistry thumbnails exactly same as Roots (150px) === */

/* レイアウトを強制的にグリッド化（左150px／右フリー） */
.hb-archive--artistry .hb-item,
.hb-archive--cultural_root .hb-item{
  display: grid !important;
  grid-template-columns: 150px 1fr !important;
  gap: 20px !important;
  align-items: start !important;
}

/* サムネ枠を150pxに固定（高さは自動） */
.hb-archive--artistry .hb-item__media,
.hb-archive--cultural_root .hb-item__media{
  width:150px !important;
  max-width:150px !important;
  height:auto !important;
}

/* 画像を150pxに収める（どのクラスでも効くように広めに指定） */
.hb-archive--artistry .hb-item img,
.hb-archive--artistry .hb-item .wp-post-image,
.hb-archive--artistry .hb-item .hb-thumb,
.hb-archive--cultural_root .hb-item img,
.hb-archive--cultural_root .hb-item .wp-post-image,
.hb-archive--cultural_root .hb-item .hb-thumb{
  width:150px !important;
  max-width:150px !important;
  height:auto !important;
  object-fit: contain !important;
  border-radius:12px !important;
}

/* 既存の横長トリミング指定を完全無効化 */
.hb-archive--artistry .hb-item__media img,
.hb-archive--artistry .hb-item__media .wp-post-image{
  object-fit: contain !important;
  height:auto !important;
}
/* === VBJ Final Fix: Artistry thumbnail exact match to Roots === */

/* Artistry 一覧：画像コンテナのサイズを固定 */
.hb-archive--artistry .hb-item__media {
  flex: 0 0 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* 画像そのものを強制150px以内に収める（HTML属性も無効化）*/
.hb-archive--artistry .hb-item__media img,
.hb-archive--artistry .hb-item__media .wp-post-image {
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  max-height: 120px !important; /* 高さ上限をRootsに合わせて */
  object-fit: contain !important;
  border-radius: 12px !important;
  aspect-ratio: auto !important;
}

/* Cultural Roots と並べて比較した際に高さも一致させる */
.hb-archive--cultural_root .hb-item__media img,
.hb-archive--cultural_root .hb-item__media .wp-post-image {
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  max-height: 120px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}