@charset "UTF-8";
/* ==========================================================================
   検索サジェスト（オートコンプリート）
   --------------------------------------------------------------------------
   マニュアルサイト（lgrammanual）で動いている実装を移植したもの。
   両サイトで同じ挙動を保ちたいので、クラス名（lgm-suggest）と JS・PHP は
   そのままにしてある。このファイルだけ、色をトークンに置き換えている。
   （複製サイトは tokens-brand.css の差し替えだけで色が変わる、という
     このプロジェクトの決まりに合わせるため。hex はここには書かない）

   このファイルは functions.php の $files ではなく
   inc/search-suggest.php から読み込む。管理画面の「サジェスト：有効にする」を
   OFF にしたときに、CSSごと止めたいため。
   ========================================================================== */

.lgm-suggest{
  position:   absolute;
  left:       0;
  right:      0;
  top:        calc(100% + 8px);
  z-index:    999;
  max-height: 60vh;
  padding:    8px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border:        1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-bg);
  box-shadow: 0 8px 24px rgba(28, 27, 34, .12);
  text-align: left;
}

.lgm-suggest[hidden]{ display: none; }

.lgm-suggest__label{
  padding:     8px 20px 4px;
  font-size:   11px;
  font-weight: 700;
  letter-spacing: .04em;
  color:       var(--c-ink-3);
}
.lgm-suggest__label:not(:first-child){
  margin-top:  6px;
  padding-top: 12px;
  border-top:  1px solid var(--c-line);
}

.lgm-suggest__item{
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         2px 10px;
  padding:     10px 20px;
  line-height: 1.5;
  color:       var(--c-ink);
  text-decoration: none;
  transition:  background-color .15s;
}
.lgm-suggest__item:hover,
.lgm-suggest__item.is-active{
  background: var(--c-brand-pale);
  color:      var(--c-ink);
}

.lgm-suggest__title{
  flex:      1 1 100%;
  font-size: 14px;
}

/* 候補の中の一致部分。一覧カード（search.css の #list mark）は
   黄色マーカーだが、ここは行が詰まっているので紫の太字にする。 */
.lgm-suggest__item mark{
  padding:     0;
  background:  transparent;
  color:       var(--c-brand);
  font-weight: 700;
}

.lgm-suggest__cat,
.lgm-suggest__count{
  font-size: 11px;
  color:     var(--c-ink-3);
}

/* カテゴリー候補のフォルダアイコン。
   アイコンフォントの読み込み状況に左右されないよう SVG を埋め込む。
   色は mask で塗るので、SVG の中の stroke は形を作るためだけのもの
   （＝このファイルに色の値は残らない）。 */
.lgm-suggest__item--cat .lgm-suggest__title::before{
  content:  "";
  display:  inline-block;
  width:    13px;
  height:   13px;
  margin-right: 6px;
  position: relative;
  top:      1px;
  background: var(--c-brand);
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.lgm-suggest__all{
  display:     block;
  margin-top:  6px;
  padding:     12px 20px 6px;
  border-top:  1px solid var(--c-line);
  font-size:   13px;
  font-weight: 700;
  color:       var(--c-brand);
  text-align:  center;
  text-decoration: none;
}
.lgm-suggest__all:hover,
.lgm-suggest__all.is-active{
  background: var(--c-brand-pale);
  color:      var(--c-brand);
}

.lgm-suggest__empty{
  padding:    16px 20px;
  font-size:  13px;
  color:      var(--c-ink-3);
  text-align: center;
}

/* --------------------------------------------------------------------------
   置き場所ごとの調整
   このサイトの検索ボックスは3か所。どれも Cocoon の .search-box が親になる。
   -------------------------------------------------------------------------- */

/* サイドバー（記事ページのみ）。枠が300pxしかなく、
   タイトルが3行に折り返してしまうので、左へ少しはみ出させて幅を稼ぐ。 */
#sidebar .lgm-suggest{
  left:      auto;
  right:     0;
  min-width: 340px;
}

/* SPヘッダーの検索パネル。画面の上から4割ほどの位置に固定で出るので、
   下向きに開く（既定のまま）。ただし 60vh のままだと画面の下からはみ出すため、
   残りの高さに収まるところまで詰める。 */
#search-menu-content .lgm-suggest{
  max-height: 40vh;
}

@media screen and (max-width: 834px){
  .lgm-suggest__item{ padding: 10px 16px; }
  .lgm-suggest__label{ padding-inline: 16px; }
  .lgm-suggest__all{ padding-inline: 16px; }

  /* SPではサイドバーが本文の下に来て全幅になるので、はみ出しは不要 */
  #sidebar .lgm-suggest{ left: 0; right: 0; min-width: 0; }
}