/**
 * site-nav.css — 全ページ共通ヘッダー / フッタ (site-nav.js が描画する DOM) の見た目。
 *
 * **ページ固有の <style> の後、mobile.css の前で link する。**
 * 文字サイズはスマホ幅で mobile.css が上書きするので、ここでの font-size は
 * 詳細度をクラス 1 つ (0,1,0) までに抑える。子孫セレクタ (.site-nav a など) に
 * font-size を書くと mobile.css が負けるので書かないこと。
 */

/* baseline 揃え。center だとナビが複数行に折り返した時にサイト名が中央 (2行目)
   へ落ちてしまい、ヘッダーの見出しに見えなくなる。 */
.site-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ddd;
}

.site-brand {
    flex: none;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.site-brand:hover { text-decoration: underline; }

/* 狭い幅では折り返して全リンクを見せる。横スクロールに収めると 320px 幅で
   7 リンク中 2 つしか見えず、スクロールバーも出ないため残りに気づけない。
   リンクの顔ぶれは全ページ共通なので、折り返してもヘッダーの高さはページ間で揃う。 */
.site-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    font-size: 14px;
}

/* 日本語は行内のどこでも折り返せるため、幅が足りないとリンク名が
   「サーバ」「情報」のように途中で割れる。flex 項目にして語単位で折る */
.site-nav a {
    flex: none;
    white-space: nowrap;
    color: #06c;
    text-decoration: none;
    padding: 2px 0;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover { text-decoration: underline; }

/* 現在ページ。選択中の色はグループ切替タブ (.group-tabs) と同じ #333 で揃える */
.site-nav a[aria-current="page"] {
    color: #333;
    font-weight: bold;
    border-bottom-color: #333;
}

/* 狭い幅ではサイト名を独立した行にする。横に並べたままだとサイト名の幅
   (320px 幅で約 3 割) がナビの全行から差し引かれ、折り返しが 1 行増える。 */
@media (max-width: 640px) {
    .site-header { display: block; }
    .site-brand { display: inline-block; margin-bottom: 2px; }
}

.site-footer {
    margin-top: 16px;
    padding-top: 6px;
    border-top: 1px solid #ddd;
}

.credit { text-align: right; font-size: 10px; color: #666; margin: 0; }