/* ==========================================
   Hamburger menu: subtle hover behaviours
   - Language row: label only hovers
   - Theme toggle button: whole button hovers
   ========================================== */

/* 基本：button も hover 対象に（既存の a と同じ動き） */
.menu button.menu-btn:hover {
    transform: translateX(2px);
    opacity: .9;
}

/* 言語行：行ホバーで“ラベルだけ”色＆微移動（select は無変化） */
@media (hover:hover) and (pointer:fine) {
    .menu .menu-row:hover .menu-label {
        /* 色は変えない。軽くスライドだけ */
        transform: translateX(2px);
        transition: transform var(--transition-fast);
    }

    /* セレクトはホバーしても見た目変えない（ニュートラル維持） */
    .menu .menu-select:hover {
        border-color: rgba(255, 255, 255, .25);
        background: transparent;
        /* ホバー時も色は変えない */
        color: inherit;
        text-shadow: none;
        filter: none;
    }
}

/* キーボード操作（アクセシビリティ）：focus-visible 時は枠線のみ */
.menu .menu-select:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .45);
    outline-offset: 2px;
}

/* ダークモードトグル：ラベルも一緒に軽く動かす */
.menu .menu-btn.dm-toggle:hover .menu-btn__label {
    transform: translateX(2px);
    transition: transform var(--transition-fast);
}


/* 発光の見え方を安定させる（アニメ対象に予告） */
.menu .menu-label,
.menu .menu-btn__label {
    will-change: color, text-shadow;
}

.site-header>* {
    max-width: 1080px;
    margin-inline: auto;
    /* 左右別々に「最低余白 or 安全域」を優先 */
    padding-inline-start: max(var(--container-pad-x), var(--safe-left));
    padding-inline-end: max(var(--container-pad-x), var(--safe-right));
    box-sizing: border-box;
    /* はみ出し予防 */
}

/* ================================
   Non-selectable header & menu text
   - Header shell, logo text, all menu items
   - Keep form controls selectable
   ================================ */

/* ヘッダー全体を選択不可（フォームは除外）＋iOS長押し無効 */
header.site-header *:not(input):not(textarea):not(select):not(option) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

header.site-header {
    -webkit-tap-highlight-color: transparent;
}

/* メニュー内は原則すべて選択不可 */
.menu,
.menu *:not(input):not(textarea):not(select):not(option) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ただしフォームUIは選択可（テキストコピーや操作を担保） */
.menu input,
.menu textarea,
.menu select,
.menu option {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* ヘッダー：ロゴ文字だけコピペ可 */
header.site-header .logo__label {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* 言語セレクトのラベルはコピペ不可（操作は可） */
.menu .menu-select,
.menu .menu-select option {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ================================
   Header (canonical definition)
   役割:
   - スティッキー化
   - 高さ/余白
   - 配色（土台）
   - 内部レイアウトは .header-inner に委譲
   ================================ */

header.site-header {
    /* 位置・レイヤー */
    position: sticky;
    top: 0;
    z-index: var(--header-z);

    /* 高さ・余白 */
    padding-block: var(--header-pad-block);

    /* ベースレイアウト（内側は .header-inner で組む） */
    display: block;
    /* ← ヘッダー自体は block でOK */
}

/* スティッキーを無効化したい場合の逃げ道（特定ページ用） */
header.site-header.no-sticky {
    position: static;
}

/* スクロール縮小などの状態変化用（JSでクラス付与する想定） */
header.site-header.is-stuck {
    /* 例：少し薄く・影を足す */
    padding-block: calc(var(--header-pad-block) * 0.7);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    backdrop-filter: saturate(1.1);
}

/* Header inner layout (logo + hamburger) */
/* 1) ヘッダー内ラッパーを全幅に伸ばす（中央寄せ対策の本命） */
.header-inner {
    width: 100%;
    /* ← これが無いと shrink して中央へ寄る */
    box-sizing: border-box;
    /* これで左右 padding を幅に内包 */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    min-height: 40px;
    /* 薄くしたいので 40〜44px 程度に */
    /* 内側でも念のため同じ思想で上書き（二重適用でも端切れ防止に有効） */
    padding-block: .2rem;
    padding-inline-start: max(var(--container-pad-x), var(--safe-left));
    padding-inline-end: max(var(--container-pad-x), var(--safe-right));
}

/* Logo style */
.logo {
    position: static;
    transform: none;
    font-weight: 600;
    font-size: 1.05rem;
    /* 少し小さめで全体高さを抑える */
    white-space: nowrap;
}


/* Hamburger icon (right side) */
.hamburger {
    margin-left: auto;
    /* ← これで右端に逃がす */
    position: static;
    font-size: 1.35rem;
    /* 端からの最低距離 ＝ 8px + 安全域。視覚のりしろも確保 */
    margin-inline-end: calc(8px + var(--safe-right));
    padding-inline: .375rem;
    /* ヒットエリア確保 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: .35rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    --hamburger-motion-duration-base: 200ms;
    --hamburger-motion-speed: 1;
    --hamburger-motion-duration: calc(var(--hamburger-motion-duration-base) * var(--hamburger-motion-speed));
    --hamburger-transition-duration-base: 180ms;
    --hamburger-transition-duration: calc(var(--hamburger-transition-duration-base) * var(--hamburger-motion-speed));
    --hamburger-transition-easing: ease-out;
    --hamburger-delay-before: 0ms;
    --hamburger-delay-middle: 0ms;
    --hamburger-delay-after: 0ms;
    --hamburger-box-transform: none;
    --hamburger-bar-transform: translateY(-50%);
    --hamburger-bar-before-transform: translateY(calc(-50% - 6px));
    --hamburger-bar-after-transform: translateY(calc(-50% + 6px));
    --hamburger-bar-opacity: 1;
    --hamburger-bar-before-opacity: 1;
    --hamburger-bar-after-opacity: 1;
    transform-origin: center;
    transform: scaleX(var(--hamburger-mirror-x, 1))
        scaleY(var(--hamburger-mirror-y, 1));
    transition: transform var(--hamburger-transition-duration) var(--hamburger-transition-easing);
}

.hamburger__box {
    position: relative;
    width: 1.5rem;
    height: 1.1rem;
    display: inline-block;
    transform: var(--hamburger-box-transform);
    transition: transform var(--hamburger-transition-duration) var(--hamburger-transition-easing);
    transform-style: preserve-3d;
}

.hamburger__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
    background: transparent;
    opacity: 0;
    transform: none;
    overflow: visible;
    transform-origin: center;
}

.hamburger__bar,
.hamburger__box::before,
.hamburger__box::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform var(--hamburger-transition-duration) var(--hamburger-transition-easing),
        opacity var(--hamburger-transition-duration) var(--hamburger-transition-easing);
}

.hamburger__bar {
    transform: var(--hamburger-bar-transform);
    opacity: var(--hamburger-bar-opacity);
    transition-delay: var(--hamburger-delay-middle);
}

.hamburger__box::before,
.hamburger__box::after {
    content: "";
}

.hamburger__box::before {
    transform: var(--hamburger-bar-before-transform);
    opacity: var(--hamburger-bar-before-opacity);
    transition-delay: var(--hamburger-delay-before);
}

.hamburger__box::after {
    transform: var(--hamburger-bar-after-transform);
    opacity: var(--hamburger-bar-after-opacity);
    transition-delay: var(--hamburger-delay-after);
}

/* Fallback: when no motion is attached yet, render the neutral 3-bar icon. */
.hamburger:not([data-motion]) {
    --hamburger-bar-transform: translateY(-50%);
    --hamburger-bar-opacity: 1;
    --hamburger-bar-before-transform: translateY(calc(-50% - 6px));
    --hamburger-bar-before-opacity: 1;
    --hamburger-bar-after-transform: translateY(calc(-50% + 6px));
    --hamburger-bar-after-opacity: 1;
}

.hamburger:not([data-motion]) .hamburger__overlay {
    opacity: 0;
}

.hamburger[aria-expanded="true"] {
    --hamburger-bar-transform: translateY(-50%);
    --hamburger-bar-opacity: 0;
    --hamburger-bar-before-transform: translateY(-50%) rotate(45deg);
    --hamburger-bar-after-transform: translateY(-50%) rotate(-45deg);
    --hamburger-bar-before-opacity: 1;
    --hamburger-bar-after-opacity: 1;
}

/* ============================= */
/*  Hamburger menu (panel)       */
/* ============================= */

/* display:none は使わず、transition可能な非表示にする */
.menu {
    --menu-item-pad-block: 0.75rem;
    --menu-item-pad-inline: 1.15rem;
    --menu-item-radius: 14px;
    --menu-item-hover-bg: rgba(255, 255, 255, 0.08);
    --menu-item-focus-ring: rgba(255, 255, 255, 0.45);
    --menu-item-current-bg: rgba(255, 102, 0, 0.24);
    --menu-item-current-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: calc(100% + 0.5rem);
    right: max(0px, var(--safe-right));
    left: auto;
    z-index: calc(var(--header-z) + 10);
    background: transparent;
    /* 実背景は内側に持たせる */
    border-radius: var(--menu-radius);
    /* 角丸は clip-path で保持 */
    box-shadow: none;
    /* 影は内側に持たせる */
    filter: var(--menu-drop-shadow, none);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: visible;
    /* clip-path が外形を決めるので visible */
    contain: paint;
    will-change: opacity, clip-path;
    clip-path: inset(0 0 0 0 round var(--menu-radius));
    transition:
        opacity var(--transition-medium),
        clip-path var(--transition-medium),
        visibility 0s linear .4s;
}

html.dark-mode .menu {
    --menu-item-focus-ring: rgba(255, 255, 255, 0.6);
    --menu-item-current-bg: rgba(255, 136, 68, 0.28);
    --menu-item-current-bg: color-mix(in srgb, var(--color-accent) 38%, transparent);
    --menu-item-current-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* 表示：ふわっと膨らむ（scaleY）＋下に着地 */
.menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--transition-medium);
}

/* 閉じ中：親は可視のまま、最後に消す */
.menu.closing {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
    animation: menuShellCollapse 0.46s cubic-bezier(.22, .85, .1, 1) forwards;
}

/* 親の最終フェードアウト */
.menu.fade-out {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scaleY(0.92);
    transition:
        opacity var(--transition-medium),
        transform var(--transition-medium),
        visibility 0s linear .4s;
}

/* ============================= */
/*  Menu list / items            */
/* ============================= */

/* ---------- Inner layer (bottom fast) ---------- */
.menu__inner {
    background: var(--header-bg);
    min-width: 200px;
    border-radius: 10px;
    box-shadow: var(--menu-shadow);
    overflow: hidden;
    transform-origin: top center;
    transform: scaleY(0.92);
    opacity: 0;
    transition: transform var(--transition-medium), opacity var(--transition-medium);
}

.menu.open .menu__inner {
    transform: scaleY(1);
    opacity: 1;
}

/* ---------- Keyframes ---------- */
@keyframes menuPanelCollapse {
    0% {
        transform: scaleY(1);
    }

    55% {
        transform: scaleY(0.06);
    }

    100% {
        transform: scaleY(0);
    }
}

@keyframes menuTopLift {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(-1 * var(--menu-top-lift)));
    }
}

/* ---------- Shell collapse keyframes ---------- */
@keyframes menuShellCollapse {
    0% {
        clip-path: inset(0 0 0 0 round var(--menu-radius));
    }

    60% {
        clip-path: inset(0 0 96% 0 round var(--menu-radius));
    }

    100% {
        clip-path: inset(var(--menu-top-lift) 0 100% 0 round var(--menu-radius));
    }
}

.menu.closing .menu__inner {
    animation: menuPanelCollapse 0.42s cubic-bezier(.2, .9, .1, 1) forwards;
}

.menu.closing {
    animation: menuTopLift 0.6s cubic-bezier(.15, .85, .1, 1) forwards;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

/* ハンバーガー内は縦並び */
.menu ul {
    display: block;
    margin: 0;
    padding-block: 0.6rem;
    padding-inline: 0.95rem;
}

.menu li {
    margin: 0.35rem 0;

    /* 初期状態：少し上・不透明度0 */
    opacity: 0;
    transform: translateY(-6px);

    /* 双方向トランジション */
    transition:
        opacity var(--menu-item-dur) cubic-bezier(.2, .8, .2, 1),
        transform var(--menu-item-dur) cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform;
}

/* 開：順次 0→1 */
.menu.open li {
    opacity: 1;
    transform: translateY(0);
}

/* transition-delay for menu items is now set dynamically via JavaScript.
   The static nth‑child rules have been removed. */

/* Make menu links block-level for larger tap area */
.menu a,
.menu button.menu-btn {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: var(--menu-item-pad-block) var(--menu-item-pad-inline);
    color: var(--nav-link);
    text-decoration: none;
    line-height: 1.35;
    transition:
        background-color .18s ease,
        box-shadow .18s ease,
        transform .15s ease,
        opacity .15s ease,
        color .18s ease;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
    border-radius: var(--menu-item-radius);
}

.menu .menu-link {
    color: var(--nav-link);
    text-decoration: none;
}

.menu .menu-link:hover,
.menu .menu-link:focus-visible {
    background-color: var(--menu-item-hover-bg);
    box-shadow: none;
    opacity: 1;
    text-decoration: none;
}

.menu .menu-link:focus-visible {
    outline: 2px solid var(--menu-item-focus-ring);
    outline-offset: 2px;
    transform: none;
}

/* 行型アイテム（ラベル+セレクト） */
.menu .menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-block: .25rem;
    padding-inline: var(--menu-item-pad-inline);
}

.menu .menu-label {
    color: var(--nav-link);
    font-size: .95rem;
}

/* cursor指定だけ残す（任意） */
.menu .menu-label {
    cursor: default;
}

.menu .menu-select {
    flex: 1 1 auto;
    min-width: 8rem;
    padding: .35rem .5rem;
    color: var(--nav-link);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
}

.menu .menu-select:focus {
    outline: 2px solid rgba(255, 255, 255, .45);
    outline-offset: 2px;
}

/* 区切り線 */
.menu .menu-divider {
    margin: .25rem 0 .35rem;
    padding-inline: var(--menu-item-pad-inline);
    border: none;
    height: 1px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .12);
    background-clip: content-box;
}

.menu button.menu-btn {
    padding-inline: var(--menu-item-pad-inline);
}

.menu a:hover {
    transform: translateX(2px);
    opacity: .9;
}

/* 現在ページ（アクセシビリティ属性に基づく強調） */
.menu .menu-item.is-current>.menu-link,
.menu a.menu-link[aria-current="page"] {
    position: relative;
    font-weight: 700;
    color: var(--header-fg);
    background-color: var(--menu-item-current-bg);
    background-color: color-mix(in srgb, var(--color-accent) 32%, transparent);
    box-shadow: var(--menu-item-current-shadow);
    text-decoration: none;
    opacity: 1;
}

.menu .menu-item.is-current>.menu-link:hover,
.menu .menu-item.is-current>.menu-link:focus-visible,
.menu a.menu-link[aria-current="page"]:hover,
.menu a.menu-link[aria-current="page"]:focus-visible {
    background-color: var(--menu-item-current-bg);
    background-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
    box-shadow: var(--menu-item-current-shadow);
    opacity: 1;
}


/* Navigation (top-level) */
nav a {
    color: var(--nav-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

nav a[aria-current="page"] {
    text-decoration: underline;
}

/* ラベル<span>は文字幅だけ滑らかに伸縮させたいので inline-block を明示 */
.menu-link__label,
.menu-btn__label,
.logo__label {
    display: inline-block;
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {

    .menu,
    .menu.open,
    .menu.closing,
    .menu.fade-out,
    .menu li,
    .menu.open li,
    .menu.closing li,
    .menu a {
        transition: none !important;
        transform: none !important;
    }

    .menu {
        opacity: 0;
        visibility: hidden;
    }

    .menu.open,
    .menu.closing {
        opacity: 1;
        visibility: visible;
    }

    .menu.fade-out {
        opacity: 0;
        visibility: hidden;
    }
}

/* --- 初期フレームだけ全アニメ無効にするためのフラグ --- */
.menu.no-anim *,
.menu.no-anim {
    transition: none !important;
    animation: none !important;
}

/* Soft navigation transition classes */
.menu.updating .menu__inner {
    opacity: var(--menu-updating-opacity);
    transition: opacity var(--transition-medium);
}

html[data-menu-animations="dim"] {
    --menu-updating-opacity: 0.35;
}

.menu.updated .menu__inner {
    opacity: 1;
}