/* ====================================================================
 * sidebar.css — サイドバー オリジナルデザイン（サイドバー刷新 Phase 1）
 *
 * 対象: 子テーマフォーク sidebar.php（.pb1-sidebar スコープ）。
 *   カラムレイアウト（#sidebar 幅 376px・SP時の本文下回り込み・
 *   .sidebar-scroll の sticky 追従）は Cocoon 親 style.css が担うため
 *   本ファイルでは触らない。装飾レイヤーのみを担当する。
 *   例外（改修8・要素ごと背景化）: 親 .sidebar の白面（background/border/
 *   padding:19px）のみ §0 で透過・解除する。カラム幅 376px・回り込み・
 *   sticky は引き続き親に委ねる。
 * スコープ: .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 準拠）。
 * カラー比率: ベース白・見出し/罫線にブルー・オレンジは小面積アクセントのみ。
 * ==================================================================== */

/* ---- §0 サイドバー面の透過（改修8: 要素ごと背景化）----
 * 親 style.css の .sidebar { background:white; padding:19px; border:… } を
 * 解除し、body 背景（Cocoon 親 #f4f5f7）をカード間の地として見せる。
 * 「1枚の白い板」ではなく「グレー地に浮かぶカード群」へ（本文側カード
 * 言語 archive.css Phase B と同型）。padding 19px→0 により内容幅は
 * 338px→376px（カラム実幅いっぱい）となり、カード左右端が #main と
 * 同じカラムグリッドに揃う。
 * セレクタは .pb1-sidebar.sidebar（0,2,0）: 親のモバイル規則
 * div.sidebar { padding:32px 16px }（0,1,1）にも読込順依存なしで勝つ。 */
.pb1-sidebar.sidebar {
  background: transparent;
  border: none;
  padding: 0;
}
/* SP（本文下回り込み時）: 親 div.sidebar { padding:32px 16px } の解除に伴い
 * カードが画面端まで全ベタ付きになり radius 角が切れるため、
 * .main の左右 padding 16px と同じインセットのみ左右に戻す
 * （カード左右端が本文カード群と揃う）。上下は §1/§2 の margin が担う。 */
@media screen and (max-width: 1023px) {
  .pb1-sidebar.sidebar {
    padding: 0 16px;
  }
}
/* SPモバイルドロワー内（親 javascript.js が #sidebar を
 * #sidebar-menu-content へ append する）: ドロワーの白面は .menu-content
 * 自前のため透過の影響はないが、padding 0 化で上端・左右の余白が消える。
 * ドロワー内に限り従来相当の余白を戻す。 */
.sidebar-menu-content .pb1-sidebar.sidebar {
  padding: 19px;
}

/* ---- §1 バナー枠（Phase 1: デフォルトバナー / inc/pb1-sidebar-banner.php）----
 * 300×250 規格。aspect-ratio ＋ 幅100% で枠を先に予約し CLS を防ぐ
 * （実画像差し替え時もシフトなし）。radius-card(20px)＋overflow:hidden で
 * 枠自体をブランドの額縁にする。
 * 改修8: バナー枠自体を About this Media（§2 .widget-sidebar）と同型の
 * カードにする（白背景＋非対称 radius＋--shadow-card-rest＋カードpadding）。
 * カードは全幅（376px）・300px の画像枠はカード内側で中央寄せ（ユーザー確定）。
 * 表記ルール（二値・厳守）: 自社告知のため「AD」表記なし。
 * 対価性のある外部広告を入れる場合のみ「PR」表記を付ける。 */
.pb1-sidebar .pb1-sidebar-banner {
  width: 100%;
  margin: 0 0 24px;
  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);
}
.pb1-sidebar .pb1-sidebar-banner__link {
  display: block;
  max-width: 300px;
  margin: 0 auto;
  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 の形の引用。ブルーティント影 --shadow-card-rest
 * （design-tokens §1.3c・黒影禁止）でカードの形を立ち上げる。
 * 前提（改修8）: カードは影のみで立てる（枠線は付けない＝カード言語からの
 * 逸脱になるため不採用確定）。カードの背景地は body #f4f5f7 以上の
 * コントラストがある面（§0 の透過でグレー地が見える）であることが前提。 */
.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;
}

/* ---- §6 sticky 追従の top オフセット・追従なし（改修9）----
 * sticky 自体は親 style.css の .sidebar-scroll { position: sticky; top: 0 } が
 * 担う。ここでは top のみ上書きする。値はプラグイン pb1-sidebar-banner の
 * 設定（既定24px）を wp_add_inline_style（'pb1-sidebar' ハンドル・本ファイルの
 * 直後に出力）で :root の --pb1-sidebar-sticky-top として注入。admin bar
 * 表示中（body.admin-bar）は注入側で +32px 済みの値が入る。
 * 1023px 以下は親が position: static のため本指定は実質無効（現状維持）。 */
.pb1-sidebar .sidebar-scroll {
  top: var(--pb1-sidebar-sticky-top, 24px);
}
/* 追従開始位置「なし」: sidebar.php が .pb1-sticky-none を付与 → 追従無効化 */
.pb1-sidebar .sidebar-scroll.pb1-sticky-none {
  position: static;
}