/* =========================
   troutshop color (Bootstrap 5.3)
   ========================= */
@charset "utf-8";

/* ---- Theme tokens ---- */
:root {
  --thema_color: #218c74;           /* brand green */
  --thema_color-600: #1b765f;
  --thema_color-700: #176954;
  --link_color: #009966;
  --link_visited_color: #00764F;

  /* UI helpers */
  --ring: rgba(48, 186, 131, 0.5);
  --footer-grad-1: #0f141a;         /* 青みグレー(暗) */
  --footer-grad-2: #1b2430;         /* 青みグレー */
  --footer-grad-3: #2c3b4d;         /* 青みグレー(やや明) */
  --footer-link: #9fb7d9;
  --footer-link-hover: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --thema_color: #218c74;
    --thema_color-600: #1b765f;
    --thema_color-700: #176954;
    --link_color: #80CBC4;
    --link_visited_color: #3E9991;

    --footer-link: #b7c9e6;
  }
}

/* ---- Focus ring (Bootstrap 5.3) ---- */
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 .25rem var(--ring);
}

/* ---- Header bar (今風グラデ) ---- */
/* ---- Header bar (明るめグラデ調整版) ---- */
/* ヘッダー背景（トラウト・立体感バージョン） */
.head_bg_color {
  background: linear-gradient(
    to bottom right,
    rgba(33, 140, 116, 0.9) 0%,   /* 上: ブランドグリーン濃いめ */
    #28784A 50%,                  /* 中間: 明るいエメラルドグリーン */
    #0A7350 100%                  /* 下: ミント寄りで抜け感 */
  );
  color: #fff;
}


/* アクセントライン（上端に極細ブルーグロー） */
.head_bg_color::before {
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:  #1D5E08;
  opacity:.4;
  pointer-events:none;
}

/* 余白を少し広げて見やすく */
.head_bg_color .row { padding-top:8px; padding-bottom:8px; }



/* ---- Global link colors ---- */
a:link,
a.list-group-item {
  color: var(--link_color);
}
a:visited {
  color: var(--link_visited_color);
}

/* ボタン系の文字色（リンクボタン含む） */
a.btn.btn-primary,
a.btn.btn-danger,
#page-top > a:link {
  color: #fff !important;
}

/* ---- Trout site tab / chip ---- */
span.site_menu_trout { background-color: var(--thema_color); }
span.site_menu_trout a { color: #fff !important; }

/* ---- Page top button ---- */
.pagetopbutton,
#page-top > a.btn,
#page-top > a.btn.btn-primary {
  background-color: var(--thema_color) !important;
  border-color: var(--thema_color-600);
}

/* ---- Footer (暗い青っぽいグレーのグラデ) ---- */
/* 旧 .footer の !important 位置ミス修正 & 今風背景 */
.footer {
  background: linear-gradient(135deg,
    var(--footer-grad-1) 0%,
    var(--footer-grad-2) 40%,
    var(--footer-grad-3) 100%
  ) !important;
  color: #ddd;
}
.footer a { color: var(--footer-link); }
.footer a:hover { color: var(--footer-link-hover); }

/* 既存の別フッター表示制御（必要なら残す） */
.footer_trout { display: none; }

/* Footer リストのリンク（右カラムの黄色指定を踏襲するなら残す） */
footer li > a { color: #FFFF80 !important; }

/* ---- Large banners ---- */
#large_banners,
#large_banners li {
  text-align: center;
  margin: 20px auto 0;
  list-style: none;
}
#large_banners { width: 100%; }
#large_banners li { display: none; } /* 初期は非表示 */


/* ---- SPボトムナビ ---- */
.sp_bottom_navi > a.head_button.btn.btn-success { color: #fff; }

/* ---- ページネーション（Bootstrap 5.3 準拠） ---- */
/* アクティブ */
.pagination .page-item.active .page-link {
  background-color: #009966;
  border-color: #009966;
  color: #fff;
}
/* 通常 */
.pagination .page-link {
  color: #009966;
  border-color: rgba(0,153,102,.25);
}
.pagination .page-link:hover {
  color: #007a52;
  border-color: rgba(0,153,102,.4);
}
.pagination .page-item.disabled .page-link {
  opacity: .5;
}

/* ブログページのページャ色カスタム（必要箇所のみ作用させる） */
#blog_main .page-link {
  background-color: #009900;
  color: #fff;
  border-color: #006600;
}
#blog_main .page-link:hover { background-color: #009900; }
#blog_main li.page-item.disabled { opacity: .2; }

/* ブログのプライマリボタン */
#blog .btn-primary {
  background-color: #009900;
  border-color: #006600;
  color: #fff;
}

/* ---- ダークモードのボタン系（Material 近似トーン） ---- */
@media (prefers-color-scheme: dark) {
  .badge-warning, .btn-warning {
    background-color: #9E9D24;
    border-color: #827717;
    color: #fff;
  }
  .badge-primary, .btn-primary {
    background-color: #1565C0;
    border-color: #0D47A1;
    color: #fff;
  }
  .badge-success, .btn-success {
    background-color: #2E7D32;
    border-color: #1B5E20;
    color: #fff;
  }
  .badge-danger, .btn-danger {
    background-color: #C62828;
    border-color: #B71C1C;
    color: #fff;
  }
}

/* ---- 補足：矢印デコ（list-group の区切り） ---- */
a.list-group-item:after {
  /* 右向き矢印風 */
  border-top: solid 2px #009966;
  border-right: solid 2px #009966;
  content: "";
}