/* src/public/css/site-header.css
 *
 * 全ページ共通のヘッダーとメニュー。
 *
 * 💡 ヘッダーは画面の上に固定します。ただし固定したままだと縦に大きく
 *    本文が読みづらいため、少しスクロールすると .is-compact が付いて
 *    「サイト名 ＋ ページ名」だけの細い形に縮みます。
 * 💡 縮んだヘッダーはページの先頭に戻るボタンを兼ねています。
 * 💡 高さの分だけ本文が隠れないよう、#header-spacer で場所を空けています
 *    （高さの計算は /js/site-header.js が担当します）。
 */

/* === ヘッダー本体 === */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 💡 メニュー（960）より手前に置いています。
           後ろに回すとメニューを開いたときに三本線ボタンが隠れてしまい、
           「開いている状態でもう一度押して閉じる」ができなくなるためです。 */
    z-index: 970;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.2s;
}

/* 💡 縮む・戻るの速さと動き方は、ここ1か所で決めています。
       ヘッダーの中で動くもの（余白・見出しの高さ・ページ名の濃さ）が
       別々の速さで動くと、カクついて見えるためです。
       cubic-bezier(...) は「最初は速く、終わりはゆっくり」という動き方で、
       止まるときにピタッと不自然に止まらないようにするものです。 */
:root {
    --header-anim: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    /* 💡 追加：サイト名とメニューボタンの行（.header-bar）の、上下の余白。
           上下で同じ値を使うので、ここ1か所で決めます。
           縮んだときのヘッダーの高さは
             （この余白）＋（メニューボタン 34px）＋（この余白）
           ちょうどになります。 */
    --header-pad: 10px;
    --header-pad-x: 16px;
}

.header-container {
    max-width: 1000px;
    margin: 0 auto;
    /* サイト名とメニューボタンの行を上に置き、その上下に同じ余白をとります。
       下の余白は、その下に続く見出しとの間隔ぶんだけ広めにしています。 */
    padding: var(--header-pad) var(--header-pad-x) 18px;
    text-align: center;
    transition: padding var(--header-anim);
}

/* 縮んだときは、上下とも同じ余白にする
   （＝メニューボタンの上と下が同じ幅になり、その範囲にぴったり収まります） */
.site-header.is-compact .header-container {
    padding: var(--header-pad) var(--header-pad-x);
}

/* 💡 追加：一瞬だけ動きを止めるための印。
       JS が「大きいときの高さ」を測るとき、いったん大きい形に戻します。
       そのまま戻すとアニメーションが動いて画面がちらつくため、
       測っている間だけ動きを止めます（人の目には見えません）。 */
.site-header.no-anim,
.site-header.no-anim * {
    transition: none !important;
}

/* --- 細い行（サイト名・縮んだときのページ名・メニューボタン） --- */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
}

/* ロゴとサイト名を横に並べる。ロゴが左、サイト名がその右です */
.header-home {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-home:hover { color: #ffffff; }

/* 💡 高さは、細い行（メニューボタンの34px）に収まる大きさにしています。
       ここを大きくすると、縮んだときのヘッダーの高さも変わってしまいます。 */
.header-logo {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
    /* マウスを乗せたときに、サイト名と一緒に少しはっきりさせる */
    opacity: 0.9;
    transition: opacity 0.2s;
}

.header-home:hover .header-logo { opacity: 1; }

/* 縮んだときだけ真ん中に出るページ名。押すとページの先頭へ戻る
   💡 変更：以前は hidden 属性（＝その場で消える）で出し入れしていたため、
            縮む瞬間にページ名がパッと現れてカクついて見えていました。
            ふだんは薄くしてしまっておき、縮んだときにふわっと出します。
            場所は最初から取ってあるので、出入りで周りがずれることもありません。 */
.header-compact-title {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    /* 長いツール名でも1行に収め、はみ出す分は … で省略する */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* ふだんは見えない状態。少し下にずらしておき、出るときに持ち上がるようにする */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition:
        opacity var(--header-anim),
        transform var(--header-anim),
        visibility var(--header-anim),
        background-color 0.2s;
}

.site-header.is-compact .header-compact-title {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 見えていないときは押せないようにする（透明なボタンを踏まないように） */
.header-compact-title { pointer-events: none; }
.site-header.is-compact .header-compact-title { pointer-events: auto; }

.header-compact-title:hover { background: rgba(255, 255, 255, 0.15); }

/* --- メニューボタン（三本線） --- */
.header-menu-btn {
    flex-shrink: 0;
    width: 40px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s;
}

.header-menu-btn:hover { background: rgba(255, 255, 255, 0.22); }

/* 開いているときは押し込まれた見た目にして、状態が分かるようにする */
.header-menu-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.6);
}

/* --- 大きく出しているときの見出し --- */
/* 💡 変更：以前は縮むときに display: none で見出しを消していました。
            消えると同時に高さが一気に変わるため、ガクッと落ちて見えていました。
            外側の箱の「行の高さ」を 1fr（中身のぶんだけ）から 0fr（なし）へ
            動かすことで、高さを数値で決めなくても、なめらかに畳めます。 */
.header-title-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--header-anim);
}

.site-header.is-compact .header-title-wrap {
    grid-template-rows: 0fr;
}

.header-title {
    /* 畳んでいる途中に中身がはみ出さないようにする。
       min-height: 0 は、grid の中身が縮まないようにする既定の動きを外すためのもの */
    overflow: hidden;
    min-height: 0;
    transition: opacity var(--header-anim);
}

/* 💡 修正：ここには padding-top: 8px を書いていました。
       ところが余白（padding）は、畳んで高さを0にしても残ります。
       そのため縮めても見出しの箱が 8px 分だけ残り、ヘッダーの高さが
       「余白＋メニューボタン＋余白」より 8px 高くなっていました。
       余白ではなく、畳まれる中身（見出しの文字）の側に持たせます。 */
.header-title h1 { padding-top: 8px; }

/* 畳みながら、同時に薄くしていく */
.site-header.is-compact .header-title { opacity: 0; }

/* 💡 説明文（サブタイトル）は、見出しより先に消えるようにします。
       縮めるときは、まず説明文が消えてから全体が畳まれるので、
       文字が押しつぶされるように見えません。
       ※ 箱ごと畳む動きは上の .header-title-wrap が担当しています。 */
.header-title p {
    transition: opacity 0.14s linear;
}

.site-header.is-compact .header-title p { opacity: 0; }

.header-title h1 {
    font-size: 2.2rem;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.header-title p {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

/* 固定ヘッダーの高さ分だけ本文の位置を下げるための空き（高さはJSが入れます）
   💡 JS はヘッダーの高さが変わるたびに測り直して、ここへ入れます。
      畳んでいる途中も追いかけるので、本文がヘッダーに合わせて一緒に動きます。 */
.header-spacer { width: 100%; }

/* === メニュー === */
/* 背景の暗いところ。押すと閉じる */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 950;
}

.menu-overlay[hidden] { display: none; }

/* 💡 メニューはヘッダーの下から始めます。
       ヘッダーに重ねると三本線ボタンが隠れてしまうためです。
       ヘッダーの高さ（--header-h）は /js/site-header.js が実測して入れます。 */
.site-menu {
    position: fixed;
    top: var(--header-h, 0px);
    right: 0;
    width: 320px;
    max-width: 88vw;
    height: calc(100% - var(--header-h, 0px));
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    z-index: 960;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
}

.site-menu[hidden] { display: none; }

.menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.menu-head-title {
    font-size: 1.05rem;
    font-weight: bold;
    color: #1e3c72;
}

.site-menu .btn-close {
    border: none;
    background: none;
    font-size: 1.7rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 4px;
}

.site-menu .btn-close:hover { color: #475569; }

/* --- 検索 --- */
.menu-search { margin-bottom: 16px; }

.menu-search-label {
    display: block;
    font-size: 0.78rem;
    font-weight: bold;
    color: #64748b;
    margin-bottom: 6px;
}

.menu-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 10px;
    background: #ffffff;
}

.menu-search-box i { color: #94a3b8; flex-shrink: 0; }

.menu-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 10px 0;
    font-size: 0.95rem;
    background: transparent;
    color: #1e293b;
}

/* ブラウザが付ける「×」は見た目がそろわないので消し、自前のボタンを使う */
.menu-search-input::-webkit-search-cancel-button { display: none; }

.menu-search-clear {
    border: none;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
}

.menu-search-clear[hidden] { display: none; }

.menu-search-empty {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.menu-search-empty[hidden] { display: none; }

/* --- リンク・ツール一覧 --- */
.menu-links,
.menu-tools {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-links {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 6px 0;
    margin-bottom: 14px;
}

.menu-links a,
.menu-tools a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 6px;
    color: #334155;
    text-decoration: none;
    font-size: 0.92rem;
    transition: background-color 0.15s;
}

.menu-links a:hover,
.menu-tools a:hover { background: #eef2f7; }

.menu-links i,
.menu-tools i {
    width: 20px;
    text-align: center;
    color: #2a5298;
    flex-shrink: 0;
}

.menu-group { margin-bottom: 16px; }

.menu-group[hidden] { display: none; }

.menu-group-title {
    font-size: 0.78rem;
    font-weight: bold;
    color: #64748b;
    margin: 0 0 4px;
}

.menu-group-title a {
    color: #64748b;
    text-decoration: none;
}

.menu-group-title a:hover { color: #2a5298; text-decoration: underline; }

.menu-tool[hidden] { display: none; }

/* メニューが開いている間は、後ろの本文が動かないようにする */
body.menu-open { overflow: hidden; }

/* === スマホ・タブレット対応 === */
@media (max-width: 768px) {
    /* 💡 変更：スマホでも「上下同じ余白」を保つため、値だけ差し替えます
             （padding をここで直接書くと、縮んだときの上下が揃わなくなります） */
    :root {
        --header-pad: 8px;
        --header-pad-x: 12px;
    }

    .header-container { padding-bottom: 14px; }

    .header-title h1 { font-size: 1.7rem; }
    .header-title p { font-size: 0.85rem; }

    .header-compact-title { font-size: 0.95rem; }
}

/* 動きを減らす設定にしている人には、アニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .header-container,
    .header-title,
    .header-title-wrap,
    .header-compact-title,
    .header-menu-btn { transition: none; }

    .header-compact-title { transform: none; }
}