/* ─────────────────────────────────────────────
   ヘッダー — mfh.co.jp 風 2 段構造 + 立体感
   - 上段: アクセントバー (inset 影で凹みを演出)
   - 下段: 白背景メインバー + 左ロゴ側に斜め三角アクセント (clip-path)
   - 多層シャドウ + drop-shadow + ハイライトで立体感
   - 高さは固定 (スクロール時の縮小なし) — トークンは common.css の :root
   ───────────────────────────────────────────── */

body.menu-open {
    overflow: hidden;
}

html {
    overflow-y: scroll;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--bg-primary);
    /* 多層シャドウで奥行き (控えめ) */
    box-shadow:
        0 1px 0 var(--header-shadow-1),
        0 4px 12px var(--header-shadow-2),
        0 12px 32px var(--header-shadow-3);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

/* 上段アクセントバー (3px、primary 帯を opacity で薄く) */
.header__topbar {
    position: relative;
    height: var(--header-topbar-height);
    width: 100%;
    background: linear-gradient(90deg,
        var(--header-topbar-bg-start) 0%,
        var(--header-topbar-bg-mid) 50%,
        var(--header-topbar-bg-start) 100%);
    box-shadow: inset 0 -1px 2px var(--header-topbar-shadow);
}

/* メインバー — わずかな縦グラデで紙のような立体感 */
.header__main {
    position: relative;
    background: linear-gradient(180deg, var(--header-main-bg-start) 0%, var(--header-main-bg-end) 100%);
    overflow: hidden;
}

/* メインバー上端の極薄ハイライト (topbar 直下) */
.header__main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--header-main-highlight) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* 斜めアクセント (clip-path) — 薄めの多層グラデ */
.header__accent {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--header-accent-width);
    height: 100%;
    background:
        linear-gradient(135deg,
            var(--header-accent-1) 0%,
            var(--header-accent-2) 40%,
            var(--header-accent-3) 100%),
        radial-gradient(ellipse at top left,
            var(--header-accent-radial) 0%,
            transparent 70%);
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(2px 0 4px var(--header-accent-drop));
}

.header__inner {
    height: var(--header-height);
    max-width: var(--width-container);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────
   ロゴ — 大きめ + 上段にわずかに食い込む配置 + drop-shadow
   ───────────────────────────────────────────── */
.header__logo {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    margin-top: -4px;
    transition: transform var(--duration-base) var(--ease-smooth);
}

.header__logo img {
    width: var(--header-logo-width);
    height: auto;
    max-height: var(--header-logo-max-height);
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px var(--header-logo-drop));
    transition: filter var(--duration-base) var(--ease-smooth);
}

.header__logo:hover {
    transform: translateY(-1px);
}

.header__logo:hover img {
    filter: drop-shadow(0 4px 8px var(--header-logo-drop-hover));
}

/* ─────────────────────────────────────────────
   ナビゲーション — シンプル scaleX 下線
   ───────────────────────────────────────────── */
.header__nav {
    display: block;
}

.header__nav ul {
    display: flex;
    align-items: center;
    gap: var(--header-nav-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.header__nav li {
    display: flex;
    align-items: center;
}

.header__nav .header__menu-link {
    display: inline-block;
    text-decoration: none;
    font-family: var(--font-family-base);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    color: var(--text-primary);
    padding: 6px 2px;
    position: relative;
    transition: color 200ms var(--ease-out);
}

/* 下線 — scaleX(0) → scaleX(1) で太め (3px) */
.header__nav .header__menu-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms var(--ease-out);
}

.header__nav .header__menu-link:hover,
.header__nav .header__menu-link:focus-visible {
    color: var(--primary);
}

.header__nav .header__menu-link:hover::after,
.header__nav .header__menu-link:focus-visible::after {
    transform: scaleX(1);
}

.header__nav .header__menu-link:focus-visible {
    outline: 2px solid var(--header-focus-ring);
    outline-offset: 4px;
    border-radius: 2px;
}

/* アクティブ — 下線常時 + bold */
.header__nav .header__menu-link.is-active {
    color: var(--primary);
    font-weight: var(--font-weight-bold);
}

.header__nav .header__menu-link.is-active::after {
    transform: scaleX(1);
}

/* ─────────────────────────────────────────────
   モバイルメニューボタン
   ───────────────────────────────────────────── */
.header__menu-button {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    z-index: 1001;
    width: 44px;
    height: 44px;
    color: var(--text-primary);
}

.header__menu-icon-open,
.header__menu-icon-close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out);
}

.header__menu-icon-open {
    opacity: 1;
    visibility: visible;
}

.header__menu-icon-close {
    opacity: 0;
    visibility: hidden;
}

.header__menu-button[aria-expanded="true"] .header__menu-icon-open {
    opacity: 0;
    visibility: hidden;
}

.header__menu-button[aria-expanded="true"] .header__menu-icon-close {
    opacity: 1;
    visibility: visible;
}

/* ─────────────────────────────────────────────
   モバイル (≤768px)
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .header__accent {
        width: var(--header-accent-width-mobile);
    }

    .header__inner {
        height: var(--header-height-mobile);
        padding: 0 var(--space-md);
    }

    .header__logo {
        margin-top: -4px;
    }

    .header__logo img {
        width: var(--header-logo-width-mobile);
        max-height: var(--header-logo-max-height-mobile);
    }

    .header__menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header__nav {
        position: fixed;
        top: calc(var(--header-height-total-mobile) + 4px);
        left: 50%;
        width: 50%;
        height: auto;
        max-height: calc(100vh - var(--header-height-total-mobile) - 4px);
        background: var(--bg-primary);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: var(--space-sm) 0;
        box-shadow: -4px 0 12px var(--header-mobile-shadow);
        border-bottom-left-radius: 12px;
    }

    .header__nav.is-active {
        transform: translateX(0);
    }

    .header__nav ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: var(--space-sm) var(--space-md);
    }

    .header__menu-item {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--header-mobile-border);
    }

    .header__menu-item:last-child {
        border-bottom: none;
    }

    .header__menu-link {
        width: 100%;
        font-size: var(--font-size-base);
        padding: var(--space-md) var(--space-sm);
        justify-content: center;
    }

    .header__nav .header__menu-link::after {
        display: none;
    }

    .header__nav .header__menu-link.is-active {
        background: var(--header-mobile-active);
        border-radius: var(--radius-sm);
    }

    .header__nav .header__menu-link:not(.is-active):hover {
        background: var(--header-mobile-hover);
    }
}

/* スマートフォン (≤480px) */
@media (max-width: 480px) {
    .header__inner {
        padding: 0 var(--space-sm);
    }

    .header__logo img {
        width: var(--header-logo-width-sm);
        max-height: var(--header-logo-max-height-sm);
    }

    .header__menu-button {
        width: 40px;
        height: 40px;
    }

    .header__nav {
        background: var(--bg-primary);
    }

    .header__menu-link {
        font-size: var(--font-size-nav);
        padding: var(--space-sm) var(--space-xs);
    }
}

/* ─────────────────────────────────────────────
   スクロール時 — shadow を多層化して浮遊感のみ (高さは固定)
   ───────────────────────────────────────────── */
.header.scrolled,
.header.is-scrolled {
    box-shadow:
        0 1px 0 var(--header-shadow-scrolled-1),
        0 6px 18px var(--header-shadow-scrolled-2),
        0 16px 40px var(--header-shadow-scrolled-3);
}

/* ─────────────────────────────────────────────
   WP 管理バー対応 — ログイン時に上部 32px (≤782px は 46px) ずらす
   ───────────────────────────────────────────── */
.admin-bar .header {
    top: 32px;
}

.admin-bar .header__nav {
    /* mobile nav は header の下に絶対配置されるので、ここでは無調整 */
}

@media (max-width: 782px) {
    .admin-bar .header {
        top: 46px;
    }
}

/* ─────────────────────────────────────────────
   アクセシビリティ: モーション削減
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .header,
    .header__logo,
    .header__logo img,
    .header__nav .header__menu-link,
    .header__nav .header__menu-link::after {
        transition: none;
    }

    .header__logo:hover {
        transform: none;
    }
}