/*
Template: albatros
Theme Name: albatros_custom
Theme URI:http://open-cage.com/albatros/
*/

/* ==========================================================================
   FX Labo — Albatros 子テーマ カスタマイズ
   ブランド: ディープネイビー × ミントティール（モダンフィンテック）
   Cocoon から Albatros へ移行した際、テーマ固有設定(theme_mods)は引き継がれない。
   配色・ロゴは Albatros のカスタマイザー側(opencage_color_*)に再設定済みで、
   このファイルは「カスタマイザーで表現できない部分」だけを担当する。
   ========================================================================== */

:root {
  --fxl-navy:       #132743;
  --fxl-navy-deep:  #0d1c30;
  --fxl-teal:       #14b8a6;
  --fxl-teal-deep:  #0f766e;
  --fxl-teal-pale:  #e7f6f4;
  --fxl-text:       #39414a;
  --fxl-text-muted: #6c7889;
  --fxl-border:     #e4e9ef;
  --fxl-font-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
                 "Hiragino Sans", Meiryo, sans-serif;
}

/* --------------------------------------------------------------------------
   1. タイポグラフィ
   Cocoon 時代に site_font_family = noto-sans を指定していた。Albatros は
   Lato + ヒラギノ固定なので、ブランドの字面を保つため Noto Sans JP を再指定する。
   -------------------------------------------------------------------------- */
body,
input, textarea, select, button,
.entry-title, .widgettitle, h1, h2, h3, h4, h5, h6 {
  font-family: var(--fxl-font-jp);
}

body {
  color: var(--fxl-text);
  letter-spacing: 0.01em;
}

/* 本文の可読性。日本語の長文記事なので行間は広めに取る */
.post .entry-content p,
.page .entry-content p {
  line-height: 1.95;
  margin: 0 0 1.6em;
}

.post .entry-content li,
.page .entry-content li {
  line-height: 1.9;
}

/* 記事内の見出し。h2 は親テーマの吹き出し(ネイビー)をそのまま活かし、
   h3 以下はミントのアクセントで階層を出す */
.post .entry-content h3,
.page .entry-content h3 {
  border-left: 5px solid var(--fxl-teal);
  padding: 0.15em 0 0.15em 0.7em;
  margin: 2.4em 0 1em;
  line-height: 1.5;
  color: var(--fxl-navy);
}

.post .entry-content h4,
.page .entry-content h4 {
  margin: 2em 0 0.8em;
  color: var(--fxl-navy);
}

/* 本文リンクはミントの濃い方。地の文に埋もれず、かつ白背景でコントラストを確保する */
.entry-content a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(15, 118, 110, 0.35);
}

.entry-content a:hover {
  text-decoration-color: var(--fxl-teal);
}

/* CTA ボタン等はインライン style で色を持っているので下線を付けない */
.entry-content a[style*="background"],
.entry-content a img {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   2. ヘッダー / ロゴ / グローバルナビ
   親テーマは #logo{width:18%} + img{width:100%} でロゴ幅を決めるため、
   ロゴ画像の縦横比によっては 55px の枠から溢れる。高さ基準に組み替える。

   ブレークポイントは必ず min-width:768px に合わせること。親テーマは
   max-width:767px 側でロゴを中央寄せ・縮小するモバイル用の指定を持っており、
   子テーマ側を min-width:481px で書くと 481〜767px でそれを打ち消してしまう
   (ロゴが左寄せのまま特大で出る)。
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
  /* 上下のマージンを揃えてヘッダーの垂直中央に置く。
     ヘッダーの高さはこのロゴのボックス(margin + height)で決まっている */
  #logo {
    width: auto;
    height: 60px;
    margin: 28px 0;
    text-align: left;
  }

  #logo a {
    width: auto;
    height: 60px;
    text-align: left;
  }

  #logo a img {
    width: auto;
    max-width: 100%;
    max-height: 60px;
  }

  /* グローバルナビの垂直位置。
     親テーマは .nav > li > a に padding:2.5em 0 0.1em を指定し、その上側の余白へ
     メニューの「説明」(<span class="gf">。英語サブラベルとして使う想定)を絶対配置で
     重ねる作りになっている。説明を設定していない状態だと上の余白が空いたままになり、
     ラベルだけが下へ押し下げられる。一方で項目間の区切り線は背景画像を <a> ボックスの
     上下中央(right center)に置いているため、線と文字の中心が 14px ほどズレて見えていた。
     説明が無いときだけ上下の余白を揃え、線・文字・ヘッダーの中心を一致させる。
     メニューに説明を入れれば :has(span) の条件から外れて親テーマ本来の2段組に戻る。 */
  #g_nav {
    margin-top: 35px;
  }

  .nav > li > a:not(:has(span)) {
    padding: 0.75em 0;
    line-height: 30px;
  }

  /* 右端の項目にも区切り線が入り、ナビが途中で切れているように見えるので消す */
  .nav > li:last-child > a {
    background-image: none;
  }
}

/* ヘッダー検索窓。親テーマのままだと角丸なしで硬いので、少しだけ整える */
.subnav form input {
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 13px;
}

.subnav form button {
  color: var(--fxl-navy);
  cursor: pointer;
}

/* モバイルのハンバーガー(MeanMenu)はヘッダーの上に半透明の黒帯を重ねるため、
   ネイビーのヘッダーがくすむ。帯は透明にしてヘッダー色をそのまま見せる */
.mean-container .mean-bar {
  background: transparent;
}

.mean-container .mean-nav {
  background: var(--fxl-navy-deep);
  margin-top: 52px;
}

/* --------------------------------------------------------------------------
   3. 記事一覧(トップ / アーカイブ)
   -------------------------------------------------------------------------- */
.top-post-list .post-list {
  border-bottom: 1px solid var(--fxl-border);
  transition: background 0.2s ease;
}

.top-post-list .post-list:hover {
  background: #fbfdfe;
}

/* 一覧・アーカイブの記事タイトル。素のリンク色(ティール)のままだとトップと
   アーカイブで色が食い違うので、どちらもネイビーに統一する */
.entry-title a,
.top-post-list .post-list .entry-content .entry-title a {
  color: var(--fxl-navy);
  text-decoration: none;
  line-height: 1.55;
}

.entry-title a:hover,
.top-post-list .post-list .entry-content .entry-title a:hover {
  color: var(--fxl-teal-deep);
}

/* 抜粋文が薄すぎて読みにくかったので、本文寄りの濃さに戻す */
.top-post-list .post-list .entry-content .description {
  color: var(--fxl-text-muted);
  line-height: 1.8;
}

/* 日付とカテゴリーのバイライン */
.byline .cat-name {
  border-radius: 3px;
  font-size: 0.78em;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   4. サイドバー
   ウィジェットは必ず「クラシックウィジェット」で登録すること。
   ブロックウィジェット(widget_block)は <h2 class="wp-block-heading"> を吐くため
   親テーマの .widgettitle が一切効かず、見出しが素のまま巨大に表示される。
   -------------------------------------------------------------------------- */
.widget .widgettitle {
  padding: 0;
  border-left: 4px solid var(--fxl-teal);
  font-size: 0.95em;
  letter-spacing: 0.03em;
}

/* 親テーマの内側の二重枠は古く見えるので、余白だけ引き継いで枠線は消す */
.widget .widgettitle span {
  border: 0;
  padding: 0.95em 1em;
}

.widget.widget_categories ul li a,
.widget.widget_archive ul li a,
.widget.widget_recent_entries li a {
  transition: color 0.15s ease;
}

/* ブロックウィジェットが将来混ざっても最低限崩れないようにするフォールバック */
.widget.widget_block > .wp-block-group > h2,
.widget.widget_block > h2 {
  background: var(--fxl-navy);
  border-left: 4px solid var(--fxl-teal);
  color: #fff;
  font-size: 0.95em;
  letter-spacing: 0.03em;
  padding: 0.95em 1em;
  margin: 0 0 0.75em;
}

/* --------------------------------------------------------------------------
   5. 記事本文に埋め込む共通パーツとの噛み合わせ
   ポイントボックス等は content-templates/_design-elements.md のインライン style で
   完結している。ここでは中の <p> が親テーマの余白と喧嘩しないよう調整するだけ。
   -------------------------------------------------------------------------- */
.entry-content div[style*="border-left"] p {
  line-height: 1.8;
}

.entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.8em 0;
  font-size: 0.95em;
}

.entry-content table th,
.entry-content table td {
  border: 1px solid var(--fxl-border);
  padding: 0.7em 0.9em;
  line-height: 1.7;
}

.entry-content table th {
  background: var(--fxl-teal-pale);
  color: var(--fxl-navy);
  font-weight: 700;
  text-align: left;
}

.entry-content table tr:nth-child(even) td {
  background: #fafcfd;
}

/* テーブルの横スクロール対応。functions.php の fxlabo_wrap_tables が全記事の
   <table> をこのラッパーで包む。列数の多い表のはみ出しをこの箱の内側に閉じ込め、
   ページ全体が横スクロールするのを防ぐ */
.fxl-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.8em 0;
}

.fxl-table-scroll > table {
  margin: 0;
}

/* スクロールバーが常に見える環境向けに細く整える(iOS はそもそも表示されない) */
.fxl-table-scroll::-webkit-scrollbar {
  height: 6px;
}

.fxl-table-scroll::-webkit-scrollbar-thumb {
  background: var(--fxl-border);
  border-radius: 3px;
}

/* iOS はスクロールバーを表示しないため、実際にはみ出している表
   (functions.php の JS が .is-scrollable を付ける)にだけ案内を出す。
   position: sticky で横スクロール中も左端に留まり、1度スクロールしたら消える */
.fxl-table-scroll.is-scrollable::before {
  content: "横にスクロールできます →";
  display: block;
  position: sticky;
  left: 0;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.72em;
  color: var(--fxl-text-muted);
  padding-bottom: 4px;
  transition: opacity 0.4s ease;
}

.fxl-table-scroll.is-scrolled::before {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   6. ページネーション / フッター
   -------------------------------------------------------------------------- */
.pagination a,
.pagination span,
.page-links a,
.page-links ul > li > span {
  border-radius: 4px;
}

.footer {
  background-color: var(--fxl-navy-deep);
}

/* --------------------------------------------------------------------------
   7. 表示領域が狭いときの調整
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .post .entry-content p,
  .page .entry-content p {
    line-height: 1.85;
  }

  .post .entry-content h3,
  .page .entry-content h3 {
    margin: 1.9em 0 0.8em;
  }

  /* 記事本文のボックス類は左右の余白を詰めて横幅を確保する */
  .entry-content div[style*="border-left"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* テーブルはフォントと余白を詰めて、まずスクロールなしで収まる可能性を上げる */
  .entry-content table {
    font-size: 0.85em;
  }

  .entry-content table th,
  .entry-content table td {
    padding: 0.55em 0.6em;
  }

  /* 列数の多い表は width:100% への押し込みでカラムが1〜2文字幅まで潰れて
     縦読みになってしまうため、1列あたり 6em(全角約6文字)の最小幅を確保する。
     列数(--fxl-cols)は functions.php が数えて渡してくる。
     2〜3列の表では計算結果が画面幅未満になるので効かず、折り返しのまま収まる。
     これより広くすると横スクロール量が増えて逆に使いにくくなるバランス点 */
  .fxl-table-scroll > table {
    min-width: calc(var(--fxl-cols, 0) * 6em);
  }
}