@charset "UTF-8";

/* =========================================================
   aap_base.css

   場所 : salient-child/css/aap_base.css
   役割 : 親（Salient）のオーバーライド層

   ---------------------------------------------------------
   参照 : core / models
   知らない : series（記事本文の中身）

   AAP-LABO は Salient ではない。UI を借りているだけ
   借りた UI が日本語・AAP の設計に合わない箇所を、ここで握り直す

   親はデフォルトのまま。設定画面（テーマオプション）は触らない
   Salient が吐くクラスを、子テーマの CSS で上書きする
   色は core の var(--aap-*) を引く。親の変数（--nectar-*）に依存しない

   ---------------------------------------------------------
   なぜ独立ファイルか

   commons は「記事の箱」。親の上書きが混ざると純度が落ちる
   親をいじる作業はこれから増える → 専用の受け皿をここに集約
   （commons §08 の Salient 塩味も、追々ここへ引っ越す）

   親と喧嘩するので !important を使う
   それ以外（AAP 自前の要素）では使わない
   読み込み順で勝てるものは !important を付けない
   ========================================================= */


/* =========================================================
   01. カテゴリータグ ── シリーズを色で分ける

   Salient の投稿グリッドは、カード下のカテゴリーラベルに
   .style-button を当て、背景を --nectar-accent-color 一色で塗る
   ＝ ODYSSEY も LABO も同じ色になり、入り口が見分けられない

   Salient はスラッグ名をそのままクラスに吐く
   （labo カテゴリー → class="labo style-button"）
   このスラッグ名クラスで狙い撃ちして、シリーズ色に差し替える

   色は core の --aap-series-* を引く（憲法から）
   ここは「どこに当てるか」だけ持つ
   ========================================================= */

.nectar-post-grid .meta-category .style-button.odyssey {
    background-color: var(--aap-series-odyssey) !important;
}

.nectar-post-grid .meta-category .style-button.labo {
    background-color: var(--aap-series-labo) !important;
}

.nectar-post-grid .meta-category .style-button.life {
    background-color: var(--aap-series-life) !important;
}

.nectar-post-grid .meta-category .style-button.gallery {
    background-color: var(--aap-series-gallery) !important;
}

/* =========================================================
   抜粋の行数制御（BASE で完全掌握）
   Salientは wp_trim_words で単語数制御 = 日本語に効かない
   よって行数(line-clamp)で刈るのが唯一の道
   器クラスは2系統：.meta-excerpt(Post Loop) / .excerpt(通常Blog)
   ========================================================= */

.nectar-post-grid-item .meta-excerpt,
.post-area .excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;      /* LABO(画像) 3行 */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ODYSSEY(話)は詰める、または消す */
body.category-odyssey .nectar-post-grid-item .meta-excerpt,
body.category-odyssey .post-area .excerpt {
  -webkit-line-clamp: 2 !important;      /* R系 2行 */
}

/* スマホは全体2行に */
@media (max-width: 690px) {
  .nectar-post-grid-item .meta-excerpt,
  .post-area .excerpt {
    -webkit-line-clamp: 2 !important;
  }
}


/* =========================================================
   03. フッター ── Salient Global Section を握り直す

   フッターは Get in Touch（Salient Studio）を Global Section で
   全ページ下部に出している（Display: Footer / Everywhere）
   借りた見た目が AAP に合わないので、ここで色を握り直す

   当て先：Get in Touch の一番外 Row に Extra Class「aap-footer」

   役割分担：
     色・表示・余白 = ここ（CSS）
     文言・リンク先・要素の有無 = WPBakery の UI 側で直接編集/削除
   ここは「見た目」だけ持つ。中身は持たない

   白の直値 #fff について：
     core に --aap-white は無い（黒地に白抜きは今ここだけ）
     憲法に無い値なので直書き。使い回すなら core に1行足す
   ========================================================= */

/* --- フッター全体：背景を黒に --- */
.aap-footer {
    background-color: var(--aap-black) !important;
}

/* --- フッター内の文字：白抜き ---
   見出し・リンク・コピーライトをまとめて白へ
   （* で子孫全部。ボタン等で不都合が出たら個別に握り直す） */
.aap-footer,
.aap-footer h1,
.aap-footer h2,
.aap-footer h3,
.aap-footer h4,
.aap-footer h5,
.aap-footer p,
.aap-footer span,
.aap-footer a {
    color: #fff !important;
}

/* --- リンク：白＋hover で少し沈める --- */
.aap-footer a {
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.aap-footer a:hover {
    opacity: 1 !important;
}


/* =========================================================
   投稿グリッド タイトル最適化 ── 顔を潰さない
   AAP は「顔が主役・タイトルは脇役」。Salient の font_size_max_24px は
   日本語＋顔優先には大きすぎ、行間が崩れ情報量も減る（可読性↓）
   見出しは line-height 1.4〜1.6 が原則（本文より狭め）
   サイズは顔を邪魔しない下限を、アクセシビリティ16px以上を守って攻める
   フォントは core の --aap-font-title（Zen Kaku）を引く
   当て先：h3.post-heading（実HTMLで確認済み）
   ========================================================= */
/* 書体は全BP共通で1回 */
body .nectar-post-grid .post-heading {
    font-family: var(--aap-font-title) !important;
}
/* サイズだけBPで変える */
@media only screen and (min-width: 1000px) {
    body .nectar-post-grid .post-heading { font-size: 18px !important; line-height: 1.5 !important; }
}
@media only screen and (max-width: 999px) {
    body .nectar-post-grid .post-heading { font-size: 17px !important; line-height: 1.5 !important; }
}
@media only screen and (max-width: 690px) {
    body .nectar-post-grid .post-heading { font-size: 16px !important; line-height: 1.5 !important; }
}


/* =========================================================
   投稿グリッド 抜粋最適化 ── 文字・書体
   当て先：span.meta-excerpt（実HTMLで確認済み）
   書体：--aap-font-body（システム/ヒラギノ）。明朝は小さい字で
        見づらいため不使用。core憲法「本文はシステムに預ける」に忠実
   ========================================================= */
body .nectar-post-grid .meta-excerpt {
    font-family: var(--aap-font-body) !important;
    line-height: 1.7 !important;
}
@media only screen and (min-width: 1000px) {
    body .nectar-post-grid .meta-excerpt { font-size: 14px !important; }
}
@media only screen and (max-width: 999px) {
    body .nectar-post-grid .meta-excerpt { font-size: 13px !important; }
}
@media only screen and (max-width: 690px) {
    body .nectar-post-grid .meta-excerpt { font-size: 13px !important; }
}


/* =========================================================
   小アイテム(右4マス)のメタを復活させる
   Salient は meta-display-large_items_only で全メタを display:none。
   これを打ち消して抜粋・日付を出す（ありのまま表示）
   ※ 行数制限はしない。抜粋の長さは WP 側(excerpt_length)で
     縦列に合わせて制御済み。CSS で刈ると二重制御になるため外す
   ========================================================= */
body .nectar-post-grid[data-columns="4"].layout-mixed.meta-display-large_items_only
  > div [class*="meta-"]:not(.meta-category) {
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
}

/* =========================================================
   大アイテム(10n+1, 10n+8)の抜粋だけ2行に刈る
   Excerpt Length(OPTIONS)は全カード連動で大小を分けられない。
   大アイテムは枠が大きく同じ文字数だと長すぎるため、ここだけ
   CSS で2行に制限。小アイテムは OPTIONS のまま（ありのまま）
   ※ line-clamp は -webkit-box が必須
   ========================================================= */
body .nectar-post-grid[data-columns="4"].layout-mixed.meta-display-large_items_only
  > div:nth-child(10n+1) .meta-excerpt,
body .nectar-post-grid[data-columns="4"].layout-mixed.meta-display-large_items_only
  > div:nth-child(10n+8) .meta-excerpt {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
}

/* =========================================================
   抜粋まわりの余白を詰める ── 空白解消
   ・item-meta-extra（抜粋の器）: nectar-love 等を入れる予約枠。
     中身が無いのに margin が残り空白になる → 詰める
   ・meta-excerpt: max-width:90%（右が空く）→ 100% に、上 margin も詰める
   ========================================================= */
body .nectar-post-grid[data-columns="4"].layout-mixed.meta-display-large_items_only
  > div .item-meta-extra {
    margin-top: 6px !important;
}
body .nectar-post-grid[data-columns="4"].layout-mixed.meta-display-large_items_only
  > div .meta-excerpt {
    max-width: 100% !important;
    margin-top: 4px !important;
}

/* 抜粋の右の空白を消す（Salient max-width:90% を解除） */
body .nectar-post-grid[data-columns="4"].layout-mixed.meta-display-large_items_only
  > div .meta-excerpt {
    max-width: 100% !important;
}


/* =========================================================
   R-NEWS toggle  要点トグル（Salient Accordion への塩味）
   Salient が body 始まりの高詳細度で吐くので、body で殴り返す
   Extra Class: aap_rnews_toggle
   ========================================================= */

/* 見出し ＝ Zen Kaku ゴシック */
body .aap_rnews_toggle .toggle-title .toggle-heading {
    font-family: var(--aap-font-title) !important;
    font-weight: 700 !important;
    font-size: 1.25em !important;         /* ← 1.05em → 1.25em。大きく */
    line-height: 1.6 !important;
}

/* 開いた中身 ＝ Shippori 明朝（会話と揃える） */
body .aap_rnews_toggle .toggle-panel .inner-toggle-wrap {
    font-family: var(--aap-font-serif) !important;
    font-size: 1.05rem !important;         /* ← --aap-fs-body(17px)から少し上げる */
    line-height: var(--aap-lh-jp) !important;
    color: var(--aap-black) !important;
}


/* =========================================================
   J-STUDY toggle  要点トグル（Salient Accordion への塩味）

   場所 : aap_base.css（Salient本体=accordionを殴るのでBASE）
   Extra Class: aap_study_toggle（Row に付ける）
   役割 : R-NEWS toggle と同型。色を JURIパープルに握り替える

   ---------------------------------------------------------
   なぜ !important か
   トグルの見出し色・開閉アイコン色は、指定しなければ AL テーマの
   デフォルト＝RINAカラー（アクセント橙 rgb(221,153,51)）が出る
   Salient は div[data-style="minimal"] .toggle.default.open 〜 の
   高詳細度で吐くので、同じ形を真似て body .aap_study_toggle で殴る

   ---------------------------------------------------------
   アイコン（＋/−）は二層でできている（DOMで確認）
     i         … 丸の枠（border）
     i::after  … 中の横棒/縦棒（background）
   丸の枠は border-color、棒は background-color。
   i 本体に background を当てると丸が塗り潰れるので当てない
   ========================================================= */


/* --- 見出し：センタリング・太字ゴシック・サイズ・黒 ---
   R-NEWS のタイトルより短い（1WORD）ので中央寄せ
   文字色はパープルにせず黒（アイコンだけパープルで締める） */
body .aap_study_toggle div[data-style="minimal"] .toggle .toggle-title,
body .aap_study_toggle div[data-style="minimal"] .toggle .toggle-title .toggle-heading {
    text-align: center !important;
    font-family: var(--aap-font-title) !important;
    font-weight: 900 !important;
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
    color: var(--aap-black) !important;
}


/* --- アイコンの丸＋文字：border-color / color（本体に background は当てない） --- */
body .aap_study_toggle div[data-style="minimal"] .toggle.default.open i,
body .aap_study_toggle div[data-style="minimal"] .toggle.default:hover i,
body .aap_study_toggle .toggle .toggle-heading i {
    color: var(--aap-juri) !important;
    border-color: var(--aap-juri) !important;
}

/* --- アイコンの中の棒（擬似要素）：background でパープルに --- */
body .aap_study_toggle div[data-style="minimal"] .toggle.default.open i::after,
body .aap_study_toggle div[data-style="minimal"] .toggle.default.open i::before,
body .aap_study_toggle .toggle .toggle-heading i::after,
body .aap_study_toggle .toggle .toggle-heading i::before {
    background-color: var(--aap-juri) !important;
    border-color: var(--aap-juri) !important;
}


/* --- スマホ：見出しが大きいと折り返すので落とす --- */
@media only screen and (max-width: 690px) {
    body .aap_study_toggle div[data-style="minimal"] .toggle .toggle-title,
    body .aap_study_toggle div[data-style="minimal"] .toggle .toggle-title .toggle-heading {
        font-size: 1.1rem !important;    /* 1.4rem → 1.1rem。1行に収める */
        line-height: 1.5 !important;
    }
}


/* =========================================================
   Salient のタブレット/スマホ幅パディング強制の打ち消し
   
   Salient は Row に top_padding_tablet_20pct 等のクラスを付けると
   @media(max-width:999px) で padding-top:20% / padding-bottom:10% を
   !important で吐く（画面幅比なので巨大な余白になる）。
   R-NOTE等の記事Rowでは不要なので base で打ち消す。
   base は body から叩ける唯一の層（AL設計）＝!important 合戦に勝てる
   ========================================================= */

@media only screen and (max-width: 999px) {
    body.material .wpb_row.top_padding_tablet_20pct {
        padding-top: 0 !important;
    }
    body.material .wpb_row.bottom_padding_tablet_10pct {
        padding-bottom: 0 !important;
    }
}