/*
Theme Name: Nikkei AI Briefing
Theme URI: https://nikkei-ai-marketbriefing.com
Description: 日経225 AI マーケットブリーフィング専用の子テーマ。白・黒・ネイビーを基調にした、Bloomberg / NewsPicks / TradingView を参考にした高級感のあるデザイン。
Author: Nikkei AI Marketbriefing
Template: twentytwentyfive
Version: 1.0.0
*/

/* =====================================================
   色・フォントの定義(この値を変えるだけでサイト全体の見た目が変わる)
===================================================== */
:root {
  --nab-navy: #0b1c33;       /* ヘッダー・見出しの濃紺 */
  --nab-navy-light: #14294a; /* ネイビーの明るいバリエーション */
  --nab-black: #14161a;      /* 本文の文字色(純黒より少し柔らかい黒) */
  --nab-white: #ffffff;      /* 背景の白 */
  --nab-gray: #6b7280;       /* 補足文字・キャプション */
  --nab-border: #e5e7eb;     /* 区切り線 */
  --nab-gold: #b8933f;       /* アクセント(リンク・強調) */
  --nab-gold-dark: #96742c;  /* アクセントのホバー時 */

  --nab-font-heading: "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --nab-font-body: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
  --nab-font-mono: "SFMono-Regular", Consolas, "Courier New", monospace; /* 数値表示用 */
}

/* =====================================================
   全体の基本設定
===================================================== */
body {
  background-color: var(--nab-white);
  color: var(--nab-black);
  font-family: var(--nab-font-body);
  font-size: 17px;
  line-height: 1.8;
}

a {
  color: var(--nab-navy);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover,
a:focus {
  color: var(--nab-gold);
}

h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title {
  font-family: var(--nab-font-heading);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--nab-navy);
}

/* =====================================================
   サイトヘッダー(サイト名・ナビゲーション)
===================================================== */
.wp-block-site-title,
.wp-block-site-title a {
  color: var(--nab-navy) !important;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.wp-block-site-tagline {
  color: var(--nab-gray);
  font-family: var(--nab-font-heading);
  font-size: 0.85rem;
}

.wp-block-navigation {
  font-family: var(--nab-font-heading);
}
.wp-block-navigation a {
  color: var(--nab-black) !important;
  font-weight: 600;
  font-size: 0.95rem;
}
.wp-block-navigation a:hover {
  color: var(--nab-gold) !important;
}

/* ヘッダー全体(テンプレートパーツ)に濃紺の下線を1本引いて引き締める */
header.wp-block-template-part {
  border-bottom: 2px solid var(--nab-navy);
  background-color: var(--nab-white);
}

/* =====================================================
   記事一覧(トップページ・アーカイブのカード表示)
===================================================== */
.wp-block-post-template .wp-block-post,
li.wp-block-post {
  border: 1px solid var(--nab-border);
  border-radius: 4px;
  padding: 1.2rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.wp-block-post-template .wp-block-post:hover,
li.wp-block-post:hover {
  border-color: var(--nab-navy);
  box-shadow: 0 2px 10px rgba(11, 28, 51, 0.08);
}

.wp-block-post-title a {
  color: var(--nab-navy);
  font-size: 1.25rem;
}
.wp-block-post-title a:hover {
  color: var(--nab-gold);
}

.wp-block-post-excerpt,
.wp-block-post-excerpt__excerpt {
  font-family: var(--nab-font-body);
  color: var(--nab-black);
}

.wp-block-post-date,
.wp-block-post-terms {
  font-family: var(--nab-font-heading);
  color: var(--nab-gray);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* アイキャッチ画像: 元のサイズに関わらず、常に横幅いっぱい・
   一定の比率(16:9)で中央を基準に収まるようにする(左右が
   切れて偏って見える問題への対策)。
   WordPressのブロック側が画像タグへ直接アスペクト比を書き込む
   ことがあり、それが外部CSSより優先されてしまうため、
   !important でこちらの指定を必ず優先させる。 */
.wp-block-post-featured-image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 4px;
}

/* =====================================================
   トップページ: 本日の注目記事セクション
===================================================== */
.nab-section-heading {
  margin-top: 2.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--nab-navy);
}

.nab-hero-query .wp-block-post-title,
.nab-hero-query .wp-block-post-title a {
  font-size: 1.9rem;
}

.nab-hero-query .wp-block-post-excerpt {
  font-size: 1.05rem;
}

/* マーケットデータへのリンク: 4つのボタンを均等に並べる */
.nab-data-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.nab-data-links .wp-block-button__link {
  padding: 0.9rem 1.6rem;
}

/* カテゴリ一覧: タグのように横並びで表示する
   (カテゴリ一覧ブロックは独自クラス名の指定に対応していないため、
   WordPress標準の出力クラス名 .wp-block-categories-list を直接指定する) */
.wp-block-categories-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
}
.wp-block-categories-list li {
  margin: 0;
}
.wp-block-categories-list a {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--nab-border);
  border-radius: 999px;
  font-family: var(--nab-font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nab-navy);
}
.wp-block-categories-list a:hover {
  border-color: var(--nab-gold);
  color: var(--nab-gold);
}

/* =====================================================
   記事本文ページ(single)
===================================================== */
.wp-block-post-content {
  font-family: var(--nab-font-body);
  font-size: 1.05rem;
  line-height: 1.9;
}
.wp-block-post-content h2 {
  margin-top: 2.4em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--nab-navy);
  font-size: 1.4rem;
}
.wp-block-post-content h3 {
  margin-top: 1.6em;
  color: var(--nab-navy-light);
  font-size: 1.15rem;
}
.wp-block-post-content p {
  margin: 1em 0;
}

/* =====================================================
   ボタン・強調要素
===================================================== */
.wp-block-button__link {
  background-color: var(--nab-navy);
  color: var(--nab-white) !important;
  border-radius: 3px;
  font-family: var(--nab-font-heading);
  font-weight: 600;
}
.wp-block-button__link:hover {
  background-color: var(--nab-gold-dark);
}

/* =====================================================
   フッター
===================================================== */
footer.wp-block-template-part {
  background-color: var(--nab-navy);
  color: var(--nab-white);
  font-family: var(--nab-font-heading);
  font-size: 0.85rem;
}
footer.wp-block-template-part a {
  color: var(--nab-white) !important;
}
footer.wp-block-template-part a:hover {
  color: var(--nab-gold) !important;
}

/* =====================================================
   レスポンシブ(スマホ表示の調整)
===================================================== */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
  .wp-block-post-title a {
    font-size: 1.1rem;
  }
}