/* ===== custom-article-header.css — 記事ページのタイトル・パンくず ===== */
/*! 複合セレクタで詳細度を上げている（単一セレクタに緩めると style.css に負けて効かない） */

/*! :root はこのファイル専用。custom-guide.css に無いトークン名だけ使う（同ページで同時に読まれる） */
:root {
  --color-text-primary: #505050;
  --color-border-base: #DFDFDF;
  --spacing-ss: 8px;
  --article-header-gap-bottom: 24px; /* 衝突回避のためこのファイル専用の名前 */
}
@media (min-width: 768px) {
  :root {
    --spacing-ss: 16px;
    --article-header-gap-bottom: 40px;
  }
}

/* ==== タイトル（category_page.hbsの .custom-category-title と同じ見た目） ==== */
.LAArticle__header.custom-category-title-bar {
  background-color: transparent; /* 既存の青バナー背景を打ち消す */
  color: inherit;
  margin-bottom: var(--article-header-gap-bottom); /*! 必須。これが無いとタイトル⇔本文の余白が消える */
  padding: 0;
}
/*! カテゴリページの .custom-category-title と同じ値にすること（片方だけ変えるとずれる） */
h1.custom-category-title {
  margin: 0;
  font-size: 22px; /* Mobile: title.h2 */
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
  padding: var(--spacing-ss) 0;
  border-bottom: 1px solid var(--color-border-base);
}
@media (min-width: 768px) {
  h1.custom-category-title {
    font-size: 24px; /* PC: title.h1 */
  }
}

/* ==== パンくず（既存 .LABreadcrumbs のスコープ内上書きのみ） ==== */
/*! Mobileの12pxはトークンに無い例外値（意図的）。カテゴリページのパンくずと同値にすること */
.custom-category-breadcrumbs .breadcrumbs,
.custom-category-breadcrumbs .breadcrumbs li,
.custom-category-breadcrumbs .breadcrumbs li a {
  font-size: 12px;
}
@media (min-width: 768px) {
  .custom-category-breadcrumbs .breadcrumbs,
  .custom-category-breadcrumbs .breadcrumbs li,
  .custom-category-breadcrumbs .breadcrumbs li a {
    font-size: 14px; /* PC: body.m */
  }
}
/* 区切り文字のchevron化（custom-category.css と同じ）。色は現行のまま維持（ユーザー指示） */
.LABreadcrumbs.custom-category-breadcrumbs .breadcrumbs.breadcrumbs li + li::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  vertical-align: -2px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="%23505050" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/*! 記事ページは最後の項目が <a> なので style.css のオレンジが当たる。グレーで上書き（ユーザー指示） */
.LABreadcrumbs.custom-category-breadcrumbs .breadcrumbs li:last-child a,
.LABreadcrumbs.custom-category-breadcrumbs .breadcrumbs li:last-child a:visited {
  color: #666464; /* style.cssの現在ページのグレーと同値 */
}