/* Header spacing and overlap fixes */

/* Desktop & General */
.site-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.site-header .header-inner.has-global-padding {
    padding-left: 0 !important;
    padding-right: clamp(1.5rem, 4vw, 3.5rem) !important;
}
.site-header.is-layout-flex {
    gap: clamp(1rem, 2vw, 1.75rem) !important;
}
.header-nav-auth.is-layout-flex {
    gap: clamp(0.75rem, 1.6vw, 1.25rem) !important;
}
.site-header .wp-block-navigation-item__content {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

/* Prevent menu items from stretching across available width. */
.site-header .wp-block-navigation .wp-block-navigation__container {
    justify-content: flex-end !important;
    column-gap: clamp(0.75rem, 1.2vw, 1.05rem) !important;
}

/* Keep icon and label a bit tighter. */
.site-header .wp-block-navigation .wp-block-navigation-item__content,
.site-header .wp-block-navigation .wp-block-navigation-item.nav-icon>a {
    gap: 0.4rem !important;
}

@media (max-width: 1200px) {
    .site-header .wp-block-navigation-item__content {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
        font-size: 0.9rem !important;
    }

    /* Match auth (mypage/login/logout) to nav sizing at this breakpoint. */
    .site-header .header-auth,
    .site-header .header-auth__link,
    .site-header .header-auth__link a,
    .site-header .header-auth a,
    .site-header .header-auth .ovl-logout-link {
        font-size: 0.9rem !important;
        line-height: 1.1 !important;
    }
}

@media (max-width: 1050px) {
    .site-header .wp-block-navigation-item__content {
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
        font-size: 0.85rem !important;
    }

    /* Match auth (mypage/login/logout) to nav sizing at this breakpoint. */
    .site-header .header-auth,
    .site-header .header-auth__link,
    .site-header .header-auth__link a,
    .site-header .header-auth a,
    .site-header .header-auth .ovl-logout-link {
        font-size: 0.85rem !important;
        line-height: 1.1 !important;
    }
}

/* Tablet / Small Screen logic */
@media (max-width: 1000px) {
    .site-header .custom-logo-link {
        width: auto !important;
        max-width: 140px !important;
        flex-shrink: 0 !important;
    }

    .site-header .custom-logo-link img {
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 950px) {

    /* Prevent overlap with logo */
    .site-header .wp-block-navigation,
    .site-header .header-nav-auth {
        margin-left: 15px !important;
        flex-grow: 1 !important;
        justify-content: flex-end !important;
    }

    /* Force consistent font-size for ALL items */
    .site-header .wp-block-navigation-item__content,
    .site-header .wp-block-navigation-item__content span,
    .site-header .wp-block-navigation-item__label,
    .site-header .ovl-nav-auth-item a,
    .site-header .ovl-nav-auth-item span,
    .site-header .header-nav-auth span,
    .site-header .header-auth__link,
    .site-header .header-auth__link a,
    .site-header .header-auth__link p {
        font-size: 0.72rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        padding-inline: 0.05rem !important;
        margin: 0 !important;
    }

    /* Ensure auth links inherit the same font-size as nav items. */
    .site-header .header-auth {
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    .site-header .header-auth a,
    .site-header .header-auth .ovl-logout-link,
    .site-header .header-auth__link,
    .site-header .header-auth__link a {
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    /* Ensure the icon and text are tight */
    .site-header .wp-block-navigation-item__label,
    .site-header .wp-block-navigation-item__content svg,
    .site-header .nav-icon::before {
        margin-left: 1px !important;
        margin-right: 1px !important;
    }

    /* Icons and spacing for auth buttons */
    .header-nav-auth {
        gap: 0.1rem !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }

    .header-auth {
        gap: 0.1rem !important;
        margin-left: 0.1rem !important;
    }
}

@media (max-width: 850px) {
    .site-header .custom-logo-link {
        max-width: 105px !important;
    }

    .site-header .wp-block-navigation-item__content,
    .site-header .wp-block-navigation-item__content span,
    .site-header .wp-block-navigation-item__label,
    .site-header .ovl-nav-auth-item a,
    .site-header .ovl-nav-auth-item span,
    .site-header .header-auth__link,
    .site-header .header-auth__link a {
        font-size: 0.68rem !important;
    }

    .site-header .header-auth {
        font-size: 0.68rem !important;
    }

    .site-header .header-auth a,
    .site-header .header-auth .ovl-logout-link,
    .site-header .header-auth__link,
    .site-header .header-auth__link a {
        font-size: 0.68rem !important;
    }
}

/* Tablet width: allow the inline menu to wrap to avoid overlapping the logo. */
@media (max-width: 820px) {
    .site-header .wp-block-navigation__container {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        row-gap: 0.35rem !important;
        column-gap: 0.6rem !important;
    }
}

/* Mobile: hamburger button (three lines + "Menu") */
@media (max-width: 768px) {
    :root {
        --ovl-mobile-menu-font-size: 0.85rem;
    }

    .site-header .wp-block-navigation__responsive-container-open {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem !important;
        width: auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.35rem 0.4rem 0.3rem !important;
        border: 0 !important;
        background: transparent !important;
        color: inherit !important;
    }

    .site-header .wp-block-navigation__responsive-container-open svg {
        display: none !important;
    }

    .site-header .wp-block-navigation__responsive-container-open::before {
        content: "" !important;
        width: 22px !important;
        height: 14px !important;
        background:
            linear-gradient(currentColor 0 0) 0 0 / 100% 2px,
            linear-gradient(currentColor 0 0) 0 50% / 100% 2px,
            linear-gradient(currentColor 0 0) 0 100% / 100% 2px !important;
        background-repeat: no-repeat !important;
        border-radius: 1px !important;
    }

    .site-header .wp-block-navigation__responsive-container-open::after {
        content: "Menu" !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open {
        background: #f3f4f6 !important;
        z-index: 90 !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        order: 1;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: 100% !important;
        padding: 8px 12px 12px !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-inner, .wp-block-navigation__responsive-container-content > nav) {
        order: 1;
        width: 100%;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open nav {
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        max-width: 420px !important;
        border-top: 1px solid rgba(15, 23, 42, 0.25) !important;
        background: #ffffff !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.25) !important;
        background: #ffffff !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.75rem 0.95rem 0.75rem calc(0.95rem + 18px + 0.6rem) !important;
        font-size: var(--ovl-mobile-menu-font-size) !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
        color: inherit !important;
        gap: 0 !important;
        min-height: 44px !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content span,
    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label,
    .site-header .wp-block-navigation__responsive-container.is-menu-open .ovl-nav-auth-item a,
    .site-header .wp-block-navigation__responsive-container.is-menu-open .ovl-nav-auth-item span,
    .site-header .wp-block-navigation__responsive-container.is-menu-open .header-auth__link,
    .site-header .wp-block-navigation__responsive-container.is-menu-open .header-auth__link a {
        font-size: var(--ovl-mobile-menu-font-size) !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
        padding: 0 !important;
        margin: 0 !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-icon>a::before,
    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-icon .wp-block-navigation-item__content::before {
        display: inline-block !important;
        content: "" !important;
        width: 18px !important;
        height: 18px !important;
        position: absolute !important;
        left: 0.95rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-icon>a,
    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-icon .wp-block-navigation-item__content {
        gap: 0 !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        order: 2;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        margin: 12px auto 0 !important;
        border: 0 !important;
        background: #222 !important;
        color: #fff !important;
        border-radius: 6px !important;
        padding: 0.85rem 1.25rem !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
        display: none !important;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before {
        content: "×閉じる";
        font-size: 14px;
        font-weight: 700;
    }

    /*
     * WordPressのナビゲーションオーバーレイは、DOM上でヘッダー外に移動することがあるため、
     * `.site-header` なしでも効くように上書きルールを追加。
     */
    body .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        order: 1;
    }

    body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        order: 2;
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 12px auto 0 !important;
        z-index: auto !important;
    }

    body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
        display: none !important;
    }

    body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before {
        content: "×閉じる";
        font-size: 14px;
        font-weight: 700;
    }

    body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
    body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content span,
    body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
    body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label,
    body .wp-block-navigation__responsive-container.is-menu-open .ovl-nav-auth-item a,
    body .wp-block-navigation__responsive-container.is-menu-open .ovl-nav-auth-item span,
    body .wp-block-navigation__responsive-container.is-menu-open .header-auth__link,
    body .wp-block-navigation__responsive-container.is-menu-open .header-auth__link a {
        font-size: var(--ovl-mobile-menu-font-size) !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
    }
}

/* Hide hamburger when inline nav already shows (tablet range). */
@media (min-width: 600px) and (max-width: 768px) {
    .site-header .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
}

/* WP admin bar should stay fixed on mobile; absolute positioning can hide the header controls. */
@media screen and (max-width: 600px) {
    body.admin-bar #wpadminbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
}