/* ====================================================================
 * sidebar.css — サイドバー オリジナルデザイン（サイドバー刷新 Phase 1）
 *
 * 対象: 子テーマフォーク sidebar.php（.pb1-sidebar スコープ）。
 *   カラムレイアウト（#sidebar 幅 376px・SP時の本文下回り込み・
 *   .sidebar-scroll の sticky 追従）は Cocoon 親 style.css が担うため
 *   本ファイルでは触らない。装飾レイヤーのみを担当する。
 * スコープ: .pb1-sidebar 配下限定。グローバル汚染禁止。
 * 読込順: priority 20・deps: pb1-design-tokens-core（functions.php）。
 * 見出し: サイドバー見出しのドット型（オレンジ10px＋ブランドブルー太字）は
 *   article.css「A-1追補」の .sidebar h2/h3 が既に担当。本ファイルは
 *   欧文見出し（About this Media / Follow Us）の Poppins 化のみ追加する。
 *   ドットは 10px/4px の2段のみ・第3変種禁止（article.css §3.2 準拠）。
 * カラー比率: ベース白・見出し/罫線にブルー・オレンジは小面積アクセントのみ。
 * ==================================================================== */

/* ---- §1 バナー枠（Phase 1: デフォルトバナー / inc/pb1-sidebar-banner.php）----
 * 300×250 規格。aspect-ratio ＋ 幅100% で枠を先に予約し CLS を防ぐ
 * （実画像差し替え時もシフトなし）。radius-card(20px)＋overflow:hidden で
 * 枠自体をブランドの額縁にする。
 * 表記ルール（二値・厳守）: 自社告知のため「AD」表記なし。
 * 対価性のある外部広告を入れる場合のみ「PR」表記を付ける。 */
.pb1-sidebar .pb1-sidebar-banner {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 24px;
}
.pb1-sidebar .pb1-sidebar-banner__link {
  display: block;
  aspect-ratio: 300 / 250;                       /* 固定枠予約（CLS対策） */
  border-radius: var(--radius-card);             /* 20px */
  overflow: hidden;
  text-decoration: none;
}
.pb1-sidebar .pb1-sidebar-banner__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  background: var(--color-brand-blue);           /* #003594 */
  transition: background-color var(--t-base);
}
.pb1-sidebar .pb1-sidebar-banner__copy {
  color: var(--color-brand-white);
  font-weight: var(--font-weight-bold);
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}
.pb1-sidebar .pb1-sidebar-banner__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--color-brand-orange);         /* 小面積オレンジアクセント */
  color: var(--color-brand-white);
  font-size: 1rem;
  transition: transform var(--t-base);
}
.pb1-sidebar .pb1-sidebar-banner__link:hover .pb1-sidebar-banner__placeholder {
  background: var(--color-blue-light);           /* #0050E0・白文字 6.51:1 AA */
}
.pb1-sidebar .pb1-sidebar-banner__link:hover .pb1-sidebar-banner__arrow {
  transform: translateX(4px);
}

/* ---- §1追補 実画像バナー（Phase 2: pb1-sidebar-banner プラグイン供給）----
 * プラグインが画像を返すとき、プレースホルダの代わりに <img> を描画する。
 * 300×250 枠（aspect-ratio 予約済み）に object-fit: cover でフィットさせ、
 * 比率違いの入稿でも枠を崩さない。リンク無し時は __link が span になるため
 * position 基準をここで持つ。 */
.pb1-sidebar .pb1-sidebar-banner__link {
  position: relative;                            /* PR ラベルの配置基準 */
}
.pb1-sidebar .pb1-sidebar-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 「PR」ラベル（景表法ステマ規制対応）:
 * 対価性のある外部広告バナーであることを枠の隅に明示する。
 * 管理画面「PR表記」チェック時のみ出力（自社告知には付けない・「AD」表記は使わない）。 */
.pb1-sidebar .pb1-sidebar-banner__pr {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);               /* どんな画像上でも読める半透明黒 */
  color: var(--color-brand-white);
  font-size: 0.6875rem;                          /* 11px 相当・視認可能な最小限 */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  line-height: 1.4;
  pointer-events: none;                          /* クリックはバナー本体に透過 */
}

/* ---- §2 ウィジェットカード（非対称 radius シグネチャ）----
 * 目次（article.css §3.5）・News タブで確立した「左上が立つ」非対称 radius
 * 0 20px 20px 20px の形の引用。周囲（.sidebar 白面）と同じ白のため、
 * ブルーティント影 --shadow-card-rest（design-tokens §1.3c・黒影禁止）で
 * カードの形を最小限に立ち上げる（枠線は付けず過剰装飾を回避）。 */
.pb1-sidebar .widget-sidebar {
  background: var(--color-brand-white);
  border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-card-rest);
  padding: var(--space-card-padding);
  margin-bottom: 24px;
}

/* ---- §3 ウィジェット見出し（About this Media / Follow Us）----
 * 色・ドットは article.css（.sidebar h2/h3）が担当済み。
 * ここでは欧文見出しの書体のみ Poppins Bold（--font-family-en）へ。
 * 和文が入った場合もスタック後段の Noto Sans JP 系へフォールバックする。 */
.pb1-sidebar .widget-sidebar-title,
.pb1-sidebar .widget-sidebar-scroll-title {
  font-family: var(--font-family-en);            /* Poppins */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;                        /* en 字間（v1.1-draft §2.5） */
}

/* ---- §4 リンクリスト（下線グロー hover・global-footer.css f-Link 型）----
 * Cocoon デフォルトウィジェットの li マーカー・境界線装飾を打ち消し、
 * 下層フッター f-Link と同型の「下線が左から伸びる」hover へ統一する。
 * 色: ベースは本文色、hover は --color-blue-light（f-Link の白下線の青版）。 */
.pb1-sidebar .widget-sidebar ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.pb1-sidebar .widget-sidebar ul li {
  margin-bottom: var(--space-link-vmargin);
  padding: 0;
  border-bottom: none;                           /* Cocoon の li 区切り線打消し */
}
.pb1-sidebar .widget-sidebar ul li::marker {
  content: none;                                 /* Cocoon/ブラウザ既定マーカー打消し */
}
.pb1-sidebar .widget-sidebar ul li a {
  position: relative;
  display: inline-block;
  color: var(--color-text-primary);
  text-decoration: none;
  line-height: 1.6;
  background-image: linear-gradient(to right, var(--color-blue-light), var(--color-blue-light));
  background-repeat: no-repeat;
  background-position: left 1.3em;
  background-size: 0 1px;
  transition: background-size var(--t-base), color var(--t-base);
}
.pb1-sidebar .widget-sidebar ul li a:hover {
  color: var(--color-blue-light);
  background-size: 100% 1px;
}

/* ---- §5 プラグイン管理 Follow Us バナー（Phase 2.1）----
 * pb1-sidebar-banner プラグインが描画する Follow Us の画像バナー。
 * カード（§2 .widget-sidebar）・見出し（§3）はクラス構造を本番ウィジェット
 * 出力と揃えているため既存規則がそのまま当たる。ここでは画像の可変幅
 * フィットと複数バナー時の縦間隔のみ最小追記する。 */
.pb1-sidebar .pb1-sbnr-follow .pb1-sbnr-follow__link {
  display: block;
}
.pb1-sidebar .pb1-sbnr-follow .pb1-sbnr-follow__link + .pb1-sbnr-follow__link {
  margin-top: 12px;
}
.pb1-sidebar .pb1-sbnr-follow__img {
  display: block;
  width: 100%;
  height: auto;
}