/* ==========================================================
   components/menu.css
   ----------------------------------------------------------
   ヘッダーの下のメニューバー（layouts/header の nav.site-menu。D-56）。

   ・トップページの入口のパネルと同じく、英字の札＋名前（SETTING 設定）を HUD の札で並べる
   ・押すと、その下に HUD のパネルで項目が開く
   ========================================================== */

.site-menu {
    position: relative;
    gap: 8px;
    padding: 0 32px;
    border-bottom: 1px solid var(--im-line-strong);
}

/* 上の帯（ヘッダーとメニューバー）の下の光の線 */
.site-menu::after {
    content: "";
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--im-cyan), transparent);
    opacity: 0.8;
    pointer-events: none;
}

/* 折りたたみ（details）の全体の見た目（box.css）を使わない */
.site-menu-group {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.site-menu-group > summary {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 12px;
    list-style: none;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: background var(--im-ease), border-color var(--im-ease);
}

/* 折りたたみの三角の印を出さない */
.site-menu-group > summary::-webkit-details-marker {
    display: none;
}

/* メニューの名前（履歴・設定・情報）：マウスを乗せたときと開いているときは、パネルと同じく四隅を斜めに削った枠で囲む。
   開いているメニューは、枠を電気が流れる（js/script.js の startHoverFlow が置く SVG（.hover-flow）。header.css）。
   形は clip-path、枠の線は ::after の八角形の輪（ふだんは見せない） */
.site-menu-group > summary {
    --hover-cut: 6px;

    position: relative;
    border-color: transparent;
    border-radius: 0;
    clip-path: polygon(
        var(--hover-cut) 0, calc(100% - var(--hover-cut)) 0, 100% var(--hover-cut), 100% calc(100% - var(--hover-cut)),
        calc(100% - var(--hover-cut)) 100%, var(--hover-cut) 100%, 0 calc(100% - var(--hover-cut)), 0 var(--hover-cut));
}

.site-menu-group > summary::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--im-line-strong);
    opacity: 0;
    transition: opacity var(--im-ease);
    clip-path: polygon(evenodd,
        var(--hover-cut) 0, calc(100% - var(--hover-cut)) 0, 100% var(--hover-cut), 100% calc(100% - var(--hover-cut)),
        calc(100% - var(--hover-cut)) 100%, var(--hover-cut) 100%, 0 calc(100% - var(--hover-cut)), 0 var(--hover-cut), var(--hover-cut) 0,
        calc(var(--hover-cut) + 0.5px) 1px, calc(100% - var(--hover-cut) - 0.5px) 1px, calc(100% - 1px) calc(var(--hover-cut) + 0.5px),
        calc(100% - 1px) calc(100% - var(--hover-cut) - 0.5px), calc(100% - var(--hover-cut) - 0.5px) calc(100% - 1px),
        calc(var(--hover-cut) + 0.5px) calc(100% - 1px), 1px calc(100% - var(--hover-cut) - 0.5px), 1px calc(var(--hover-cut) + 0.5px),
        calc(var(--hover-cut) + 0.5px) 1px);
    pointer-events: none;
}

.site-menu-group > summary:hover,
.site-menu-group[open] > summary {
    background: rgba(102, 217, 255, 0.08);
    border-color: transparent;
}

.site-menu-group > summary:hover::after,
.site-menu-group[open] > summary::after {
    opacity: 1;
}

/* 開いているメニューは、内側を少し光らせ、枠を電気が流れ続ける */
.site-menu-group[open] > summary {
    background: rgba(102, 217, 255, 0.12);
    box-shadow: inset 0 0 12px rgba(102, 217, 255, 0.25);
}

.site-menu-group[open] > summary > .hover-flow {
    opacity: 1;
}

.site-menu-group[open] > summary > .hover-flow path {
    animation-play-state: running;
}

.site-menu-code {
    display: inline;
    font-family: var(--im-font-logo);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--im-cyan);
}

.site-menu-label {
    font-family: var(--im-font-hud);
    font-weight: 600;
    color: var(--im-text);
}

/* 開いた項目：HUD のパネル（パネルと同じ、青をうっすら含んだ透ける色。下の本文はぼかす） */
/* 形はパネル・ポップアップと同じく四隅を斜めに削った形。項目の枠そのものは切らない（横に開く下の階層が切れるため）。
   色とぼかしの裏の層（::before）を八角形に切り、枠の線と、枠を流れる電気は js/script.js（startMenuFlow）が置く SVG（.menu-flow）で描く */
.site-menu-links {
    --menu-cut: 10px;

    min-width: 240px;
    margin-top: 6px;
    padding: 6px 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
}

.menu-flow {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(102, 217, 255, 0.22));
}

.menu-flow path {
    fill: none;
    stroke: var(--im-cyan);
    stroke-linejoin: round;
}

/* スマホ：下の階層は、上の項目の枠の中に開くため、枠の線を重ねない */
@media (max-width: 768px) {

    .site-menu-sublinks > .menu-flow {
        display: none;
    }

}

.site-menu-links a {
    position: relative;
    padding: 7px 14px 7px 26px;
    color: var(--im-text);
    text-decoration: none;
}

.site-menu-links a::before {
    content: "›";
    position: absolute;
    left: 12px;
    color: var(--im-line-strong);
}

/* 色とぼかしは、裏の層に付ける。項目の枠そのものにぼかしを付けると、横に開く下の階層（AI → 音声操作）の
   ぼかしが効かなくなるため（枠の外に出た部分が、ぼけずに透けて見える） */
.site-menu-links::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(102, 217, 255, 0.11), rgba(102, 217, 255, 0.04));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    clip-path: polygon(
        var(--menu-cut) 0, calc(100% - var(--menu-cut)) 0, 100% var(--menu-cut), 100% calc(100% - var(--menu-cut)),
        calc(100% - var(--menu-cut)) 100%, var(--menu-cut) 100%, 0 calc(100% - var(--menu-cut)), 0 var(--menu-cut));
}

/* スマホ：下の階層は、上の項目の枠の中に開くため、裏の層を重ねない */
@media (max-width: 768px) {

    .site-menu-sublinks::before {
        display: none;
    }

}

/* 下の階層を開く項目（例：AI）。折りたたみの全体の見た目（box.css）を使わず、ほかの項目と同じ形にする。開いている間は光らせる */
.site-menu-sub > details {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.site-menu-sub > details > summary {
    position: relative;
    padding: 7px 14px 7px 26px;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    color: var(--im-text);
}

.site-menu-sub > details > summary::before {
    content: "›";
    position: absolute;
    left: 12px;
    color: var(--im-line-strong);
}

.site-menu-sub > details > summary::after {
    color: var(--im-cyan);
}

.site-menu-sub > details[open] > summary,
.site-menu-sub > details > summary:hover,
.site-menu-links a:hover,
.site-menu-links a:focus-visible {
    color: var(--im-cyan-bright);
    background: rgba(102, 217, 255, 0.08);
    text-shadow: none;
}

@media (max-width: 768px) {

    .site-menu {
        padding: 0 16px;
    }

    .site-menu::after {
        left: 16px;
        right: 16px;
    }

}