/* Movo のサイト。Bootstrap 5 の上に最小限だけ足す。
 *
 * getbootstrap.jp を参照しているので、素の Bootstrap から遠ざけない。
 * 足すのは「紫のヒーロー」「コードの見せ方」「GIF の枠」の3つだけで、
 * ボタン・カード・グリッド・タイポグラフィは Bootstrap のまま使う。
 * 独自の色やコンポーネントを増やすほど、Bootstrap を使う意味が薄れる。 */

:root {
  /* Bootstrap の紫（--bs-purple #6f42c1）を基準にする。getbootstrap.jp の
     ヒーローと同じ系統で、CSS 変数なのでダークモードでも破綻しない。 */
  --movo-hero-from: #712cf9;
  --movo-hero-to: #9e5cf7;
}

/* ---- ヒーロー ---- */

.movo-hero {
  background-image: linear-gradient(180deg, var(--movo-hero-from), var(--movo-hero-to));
  color: #fff;
}

.movo-hero .lead {
  /* 白地に白文字の淡さで読みにくくならない範囲まで。 */
  color: rgba(255, 255, 255, 0.85);
}

/* ---- コード ---- */

.movo-code {
  background-color: #212529;
  color: #e9ecef;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
}

.card .movo-code {
  /* スキルの作例カードは 400px 程度しか幅が無く、コマンド 1 行がそこに収まらない。
     横スクロールにすると «見えない部分がある» ことに気付けないので、ここだけ折り返す。
     折り返しは見た目だけなので、コピーすれば元の 1 行（\ の続き行つき）のまま貼れる。 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
}

.movo-code .c {
  /* コメント。Bootstrap の text-body-secondary は暗い背景で読めないので、
     ここだけ自前で明るい灰色にする。 */
  color: #9aa4ae;
}

/* ---- GIF の枠 ---- */

.movo-gif {
  /* GIF は 16:9 で書き出している。width/height 属性を書いてあるので
     読み込み前でも高さが確保され、下の要素が飛び跳ねない。
     height:auto を明示しないと height 属性（360px）がそのまま効いて、
     カード幅に合わせたときに縦長のまま切り取られる。 */
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--bs-secondary-bg);
}

/* ---- ダウンロード表 ---- */

.movo-dl-os {
  /* OS 名の列だけ折り返させない。表が横に潰れたときに
     「Windows」が2行になると読みにくい。 */
  white-space: nowrap;
}

/* ---- 目次（マニュアル） ---- */

@media (min-width: 992px) {
  .movo-toc {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}