/*
 * StarQuest アプリのブランド色に MkDocs(Material) を合わせる。
 * 出典：app/src/app/globals.css の --primary: oklch(0.3294 0.1085 262.59)
 *       → sRGB 換算で約 #15316C（濃いネイビー/インディゴ）。
 * 微調整したい場合はこの値を変える（プレビューで確認）。
 */
:root,
[data-md-color-scheme="default"] {
  /* ヘッダー等の主要色（アプリの --primary に対応） */
  --md-primary-fg-color: #15316c;
  --md-primary-fg-color--light: #2b4c8a;
  --md-primary-fg-color--dark: #0e2350;

  /* 主要色の上に乗る文字・アイコン（ヘッダー文字）＝白 */
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  /* アクセント（リンクhover・操作要素のハイライト）＝やや明るい同系ブルー */
  --md-accent-fg-color: #3b5fb0;

  /* 本文リンク色＝ブランドの青 */
  --md-typeset-a-color: #15316c;
}

/* 本文リンクを目立たせる（ブランド色だけだと本文に埋もれるため下線＋やや太字） */
.md-typeset a:not(.headerlink) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 500;
}
/* カードのタイトルリンクは下線なし（カード自体がクリック領域のため） */
.md-typeset .grid.cards a {
  text-decoration: none;
  font-weight: inherit;
}

/*
 * スクリーンショットは白背景が多く、白いページと同化して境目が分からない。
 * 薄い枠＋やわらかい影で、画像をページから浮き立たせる。
 */
.md-typeset img {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/*
 * 左サイドメニュー最上部のサイト名（.md-nav__title）が、
 * 下のメニュー項目と同化してメリハリが無かったので見出しらしく強調する。
 * （ヘッダー上部のネイビー帯の方は白文字でコントラスト十分なので触らない）
 */
.md-nav--primary > .md-nav__title {
  color: var(--md-primary-fg-color);   /* ブランドのネイビー */
  font-weight: 700;
  font-size: 0.8rem;
  word-break: keep-all;                /* 「ル」だけ改行されるのを防ぐ（区切るなら空白位置で） */
  border-bottom: 1px solid var(--md-default-fg-color--lightest);  /* 下に区切り線 */
}

/*
 * 本文の見出しと本文のメリハリ付け。
 * Material 既定は h1/h2 が font-weight:300（細字）なので差が弱い。
 * → 見出しをブランドのネイビー＋太字にし、H2 に区切り線で節の切れ目を明確化。
 *   強さは各値（font-weight / border / margin-top / line-height）で微調整可。
 */
.md-typeset h1 {
  font-weight: 700;
  color: var(--md-primary-fg-color);
}
.md-typeset h2 {
  font-weight: 700;
  color: var(--md-primary-fg-color);
  margin-top: 2.4rem;                                          /* 上の節と離す */
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--md-default-fg-color--lightest); /* 節の区切り線 */
}
.md-typeset h3 {
  font-weight: 600;
  margin-top: 1.6rem;
}
.md-typeset h4 {
  font-weight: 600;
}
/* 本文は行間をやや広げて読みやすく（見出しとの対比も付く） */
.md-typeset p,
.md-typeset li {
  line-height: 1.75;
}

/*
 * HOME のカード（.grid.cards）のホバーをアプリのカードに合わせる。
 * アプリ: transition-colors / hover:bg-muted/50 / hover:border-primary/30
 *         （影で持ち上げたり拡大はせず、背景と枠の色だけ変える控えめな表現）
 */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  position: relative;                                     /* カード全面クリック用の基準 */
  border-radius: 0.875rem;                                /* アプリの rounded-xl(≒14px) に合わせる */
  transition: background-color 0.15s, border-color 0.15s;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: rgba(21, 49, 108, 0.3);                   /* primary(#15316c) 30% */
  background-color: rgba(0, 0, 0, 0.03);                  /* 薄いグレー（前より淡く） */
  box-shadow: none;                                       /* アプリは影で持ち上げない */
  cursor: pointer;                                        /* 手のアイコン */
}
/*
 * カード内のタイトルリンクをカード全面に広げ、どこを押しても遷移＆手アイコンにする
 * （アプリのカードと同じ「カード全体がクリック可能」。各カードのリンクは1つ前提）
 */
.md-typeset .grid.cards > ul > li a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/*
 * admonition の本文は Material 既定で約80%に縮む。
 * マニュアルでは読みやすさ優先で、通常の本文と同じサイズに揃える。
 */
.md-typeset .admonition,
.md-typeset details {
  font-size: inherit;
}

/*
 * example アドモニション（「★3/★4の例」など）は Material 既定が紫。
 * ブランドのネイビーに合わせる（枠線・タイトル帯・アイコン）。
 */
.md-typeset .admonition.example,
.md-typeset details.example {
  border-color: var(--md-primary-fg-color);
}
.md-typeset .example > .admonition-title,
.md-typeset .example > summary {
  background-color: rgba(21, 49, 108, 0.1);   /* navy(#15316c) 10% */
}
.md-typeset .example > .admonition-title::before,
.md-typeset .example > summary::before {
  background-color: var(--md-primary-fg-color);
}

/*
 * question アドモニション（HOME の FAQ `??? question`）は Material 既定が緑。
 * ブランドのネイビーに合わせる（枠線・タイトル帯・アイコン）。
 */
.md-typeset .admonition.question,
.md-typeset details.question {
  border-color: var(--md-primary-fg-color);
}
.md-typeset .question > .admonition-title,
.md-typeset .question > summary {
  background-color: rgba(21, 49, 108, 0.1);   /* navy(#15316c) 10% */
}
.md-typeset .question > .admonition-title::before,
.md-typeset .question > summary::before {
  background-color: var(--md-primary-fg-color);
}
.md-typeset .question > .admonition-title::after,
.md-typeset .question > summary::after {
  color: var(--md-primary-fg-color);                  /* 開閉の矢印 */
}
.md-typeset .admonition.question:focus-within,
.md-typeset details.question:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(21, 49, 108, 0.1);    /* 開いた/フォーカス時のリング */
}
/* example のフォーカスリングも既定の紫 → ネイビーに揃える */
.md-typeset .admonition.example:focus-within,
.md-typeset details.example:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(21, 49, 108, 0.1);
}

/*
 * note アドモニション（「管理者向け」やリリース履歴のカード等）も
 * 既定の青 → ブランドのネイビーに揃える。
 */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--md-primary-fg-color);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(21, 49, 108, 0.1);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--md-primary-fg-color);
}
.md-typeset .note > .admonition-title::after,
.md-typeset .note > summary::after {
  color: var(--md-primary-fg-color);
}
.md-typeset .admonition.note:focus-within,
.md-typeset details.note:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(21, 49, 108, 0.1);
}