/* ABlog / Sphinx 標準のサイドバー部品(h3 見出し)を、my_modern5 の widget(h1)と同じ見た目にそろえる。
   余白は layout.html で包んでいる div.widget に元の CSS が効く。modern5.css_t 本体は元のまま触らない。 */
aside.sidebar div.widget > div > h3,
aside.sidebar div.widget > search > h3,
aside.sidebar div.widget > div[role="search"] > h3,
aside.sidebar #searchlabel { font-size: 1.2em; margin-top: 0; font-weight: bold;
    border-bottom: 1px solid #93a4ad; box-shadow: #f8fafb 0 1px 0 0; }
aside.sidebar div.widget h3 a, aside.sidebar div.widget h3 a:visited { color: #0c0501; }
/* 検索欄が枠からはみ出さないように */
aside.sidebar form.search input[type="text"] { width: 70%; max-width: 200px; }

/* 長い URL などが記事の枠を突き抜けないように折り返す(元のサイトでもはみ出していた) */
article { overflow-wrap: anywhere; }
article pre { overflow-x: auto; overflow-wrap: normal; }

/* PC 幅の2カラム。元は article(683px + 余白 80px + 枠 2px = 765px)を float にして aside を margin-left: 739px で
   並べていたため、合計 1095px と枠の 1050px を超えて右にはみ出し、記事の背景も途中で切れていた
   (元テーマは jQuery で高さを合わせていた)。flex で並べて、枠ぴったり・高さもそろえる。 */
@media only screen and (min-width: 1069px) {
    div.main { display: flex; align-items: stretch; }
    article { float: none; width: auto; flex: 1 1 auto; min-width: 0; box-sizing: border-box; }
    aside.sidebar { margin-left: 0; flex: 0 0 330px; box-sizing: border-box; }
}

/* スマホ幅(480px 未満)。元は背景画像なし・メニュー縦積みだったので、
   ヘッダー画像を出し、メニューを横1列にする。iOS は background-attachment: fixed が効かないので scroll にする。 */
@media only screen and (max-width: 479px) {
    header { background: #000 url('test2.jpg') no-repeat center bottom / cover; padding: 16px 0 40px; }
    header h1 * { font-size: 1.3em; }
    header h2 { font-size: 1.1em; }
    nav[role="navigation"] ul { display: flex; justify-content: space-around; }
    nav[role="navigation"] li { width: auto; padding: 6px 0; }
    article h1 { font-size: 1.7em; }
}

/* 埋め込み動画(YouTube の iframe は width="420" 固定)を枠に合わせて縮める */
article iframe { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* スマホ幅では入れ子リスト・引用の字下げを浅くする(深い目次が右にはみ出すため) */
@media only screen and (max-width: 479px) {
    article ul ul, article ol ol, article ul ol, article ol ul { padding-left: 12px; }
    article blockquote { margin-left: 8px; margin-right: 0; }
}

/* 記事中の目次(.. contents::)。Sphinx 9 は <nav class="contents"> で出すため、
   サイトメニュー用の nav の指定(暗い背景・横並び・中央寄せ)が効いてしまう。目次の見た目に戻す。 */
article nav.contents {
    background: #f1f4f6; border: 1px solid #cfd5da; border-bottom: 1px solid #cfd5da;
    font-size: 1em; padding: 10px 20px; margin: 1em 0; filter: none;
}
article nav.contents p.topic-title { font-weight: bold; margin: 0 0 .5em; }
article nav.contents ul { list-style: square; margin: 0; padding: 0 0 0 20px; }
article nav.contents li { display: list-item; list-style-type: square; text-align: left; width: auto; float: none; text-shadow: none; padding: 0; }
article nav.contents li p { margin: .2em 0; }
article nav.contents a, article nav.contents a:visited { color: #0b7dc0; }
@media only screen and (max-width: 479px) {
    article nav.contents { padding: 8px 10px; }
    article nav.contents ul ul { padding-left: 12px; }
}

/* 記事中の画像(:width: 指定のもの含む)を枠より大きくしない */
article img { max-width: 100%; height: auto; }