/* ==========================================================================
   ヘッダー
   ナビ＋CTA がカンプ幅 1280 ちょうどで収まるため、グローバルナビは xl 以上。
   それ未満はハンバーガー（中身はフッターメニュー 1〜3 列目）
   ========================================================================== */

/* スクロールしても画面上部に残す。ログイン中は WP の管理バーの下に止める */
.l-header {
    position: sticky;
    top: var(--admin-bar-offset);
    z-index: 100;
    background-color: var(--color-bg);
}

.l-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: var(--header-h);
    padding-inline: var(--gutter);
}

/* ---- ロゴ ---- */
/* ロゴ未設定時のサイト名が長くてもハンバーガーを押し出さないよう縮めを許可 */
.l-header__logo {
    min-width: 0;
    margin-right: auto;
}

.l-header__logo .custom-logo-link {
    display: block;
}

.l-header__logo .custom-logo {
    width: auto;
    height: var(--header-logo-h);
}

.l-header__site-name {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text);
    text-decoration: none;
}

/* ---- グローバルナビ（xl 以上のみ） ---- */
.l-header__nav {
    display: none;
}

.l-header__nav-list,
.l-header__nav-list .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.l-header__nav-list a {
    display: flex;
    align-items: center;
    min-height: var(--hit-min);
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

/* ---- CTA ボタン ---- */
/* SP はヘッダー内に収まらないため出さない（代わりに画面下の追従ボタン fixed-cta を表示） */
.l-header__cta {
    display: none;
    gap: var(--space-3);
}

.l-header__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-h);
    padding-inline: var(--space-3);
    font-size: var(--text-ui);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-inverse);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-sm);
}

.l-header__btn--accent {
    background-color: var(--color-accent);
}

.l-header__btn--primary {
    background-color: var(--color-primary);
}

.l-header__btn-icon {
    flex-shrink: 0;
}

/* ---- ハンバーガー ---- */
.l-header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-1);
    width: var(--hit-min);
    height: var(--hit-min);
    /* アイコン（24px）の端をカンプ位置に揃えつつ、タップ領域は 44px を確保する */
    margin-inline: calc((var(--space-4) - var(--hit-min)) / 2);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.l-header__toggle-bar {
    display: block;
    width: var(--space-4);
    border-top: var(--border-w) solid var(--color-text);
    transition: transform 0.2s, opacity 0.2s;
}

/* 開いているときは × に変える（カンプは横長の ×） */
.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar:nth-child(1) {
    transform: translateY(calc(var(--space-1) + var(--border-w))) rotate(27deg);
}

.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar:nth-child(2) {
    opacity: 0;
}

.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar:nth-child(3) {
    transform: translateY(calc((var(--space-1) + var(--border-w)) * -1)) rotate(-27deg);
}

/* ---- ドロワー ---- */
.l-header__drawer {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: calc(100dvh - var(--header-h) - var(--admin-bar-offset));
}

.l-header__drawer.is-open {
    display: block;
}

/* ドロワー表示中は背面のページをスクロールさせない */
body.is-header-menu-open {
    overflow: hidden;
}

.l-header__drawer-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-overlay);
}

.l-header__drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100%, var(--drawer-w));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-5) var(--drawer-gutter) var(--space-6);
    background-color: var(--color-bg);
}

.l-header__drawer-list,
.l-header__drawer-list .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 左右にボタン幅の列を取り、リンク文字を中央に置いたまま右端に開閉ボタンを置く */
.l-header__drawer-list > .menu-item {
    display: grid;
    grid-template-columns: var(--hit-min) 1fr var(--hit-min);
    align-items: center;
    border-bottom: var(--border-w) solid var(--color-border);
}

.l-header__drawer-list > .menu-item > a {
    grid-column: 2;
    padding-block: var(--space-4);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    text-align: center;
    color: var(--color-text);
    text-decoration: none;
}

.l-header__drawer-toggle {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: var(--hit-min);
    height: var(--hit-min);
    padding: 0;
    color: var(--color-text);
    background: none;
    border: 0;
    cursor: pointer;
}

.l-header__drawer-toggle::before {
    content: "";
    width: var(--space-3);
    height: var(--space-3);
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s;
}

.l-header__drawer-toggle[aria-expanded="true"]::before {
    transform: rotate(180deg);
}

.l-header__drawer-list .sub-menu {
    display: none;
    grid-column: 1 / -1;
    padding-block: var(--space-2);
    border-top: var(--border-w) solid var(--color-border);
}

.l-header__drawer-list .is-submenu-open > .sub-menu {
    display: block;
}

.l-header__drawer-list .sub-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hit-min);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    color: var(--color-text);
    text-decoration: none;
}

@media (min-width: 768px) {
    .l-header__inner {
        padding-inline: var(--space-5);
    }

    .l-header__cta {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .l-header__nav {
        display: block;
    }

    .l-header__toggle,
    .l-header__drawer,
    .l-header__drawer.is-open {
        display: none;
    }

    .l-header__nav-list {
        display: flex;
        gap: var(--space-5);
    }

    .l-header__nav-list > .menu-item {
        position: relative;
        display: flex;
        align-items: center;
        min-height: var(--header-h);
    }

    /* 子メニューを持つ項目の下向き矢印 */
    .l-header__nav-list > .menu-item-has-children > a {
        gap: var(--space-1);
    }

    .l-header__nav-list > .menu-item-has-children > a::after {
        content: "";
        width: var(--space-3);
        height: var(--space-3);
        background-color: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* 子メニュー（カンプ未提供のため仮デザイン） */
    .l-header__nav-list .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: max-content;
        padding-block: var(--space-2);
        background-color: var(--color-bg);
        border: var(--border-w) solid var(--color-border);
        border-radius: var(--radius-sm);
    }

    .l-header__nav-list .menu-item-has-children:hover > .sub-menu,
    .l-header__nav-list .menu-item-has-children:focus-within > .sub-menu {
        display: block;
    }

    .l-header__nav-list .sub-menu a {
        padding-inline: var(--space-3);
    }
}