/*
  CSSの`@import`は、複数ファイルの読み込みが遅いなどの理由で非推奨になっている
  ここでは1つのファイルだけを読み込む目的で使用することにする

  複数ファイルを読み込む場合は、

  - Sassの`@use`を使う
  - Frontmaterで複数のCSSファイルを指定できるようにする

  などの代替案を検討すること
*/
@import url("/assets/css/markdown.css");

/* ------------------------------
レイアウト
------------------------------ */

.two-columns {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

@media screen and (min-width: 768px) {
  .two-columns {
    display: grid;
    grid-template-columns: 70% 25%;
    justify-content: space-between;
    align-items: flex-start;
  }
}

@media screen and (min-width: 768px) {
  .glossary-items > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 0;
    column-gap: 1.5em;
  }
}

.glossary-items li {
  list-style: none;
  border-bottom: 1px solid #dcdcdc;
}

.glossary-items a {
  display: block;
  line-height: 3.125;
  text-decoration: none;
  color: inherit;
}

.aside-navigation {
  border-top: 3px solid #222;
  border-bottom: 3px solid #222;
}
.aside-navigation ul {
  /* TODO: `display: grid`に切り替えるとより明快に記述しやすくなる */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.aside-navigation li {
  width: 50%;
  list-style: none;
  border-bottom: 1px solid #dcdcdc; /* TODO: ここで指定すると末尾にもborderがついてしまうので、`:nth-child()`を活用して工夫したい*/
}

@media screen and (min-width: 768px) {
  .aside-navigation li {
    width: 100%;
  }
}

.aside-navigation li.selected {
  background-color: #fafafa;
}

.aside-navigation a {
  display: block;
  padding-left: 10px;
  line-height: 3.125;
  text-decoration: none;
  color: #47525d;
}

/* ------------------------------
ルビ付きヘッダー
------------------------------ */

ruby[data-ruby] {
  position: relative;
}

ruby[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  left: -2em;
  top: -1em;
  right: -2em;
  text-align: center;
  font-size: 0.5em;
}

ruby[data-ruby] rt {
  display: none;
}

/* ------------------------------
Markdown
------------------------------ */

.markdown a.tag {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  font-size: 12px;
  text-decoration: none;
  background-color: #dcdcdc;
  color: #47525d;
}