/* Custom Styles for GGJ English - Isolated Architecture */

/* Typography & Global */
#z_header_root,
#z_mobile_overlay,
#z_hero_section {
    font-family: 'Noto Sans JP', sans-serif !important;
}

/* 1. Header Isolation Styles */
#z_header_root {
    all: unset;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f3f4f6 !important;
    z-index: 99999 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

#z_header_inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    height: 80px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

@media (min-width: 768px) {
    #z_header_inner {
        height: 96px !important;
    }
}

.z_logo_box {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

.z_logo_img {
    height: 48px !important;
    width: auto !important;
}

.z_phone_box {
    display: none !important;
    align-items: center !important;
    gap: 0.5rem !important;
    border-left: 1px solid #f3f4f6 !important;
    padding-left: 1.5rem !important;
    color: #6b7280 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

@media (min-width: 1024px) {
    .z_phone_box {
        display: flex !important;
    }
}

.z_nav_desktop {
    display: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 1.5rem !important;
}

@media (min-width: 1280px) {
    .z_nav_desktop {
        display: flex !important;
    }
}

.z_nav_link {
    color: #4b5563 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 0.05em !important;
    transition: color 0.3s !important;
}

.z_nav_link:hover {
    color: #D6B25E !important;
}

.z_cta_btn {
    display: none !important;
    background: #D6B25E !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 0.8rem 1.8rem !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .z_cta_btn {
        display: inline-flex !important;
    }
}

.z_mobile_trigger {
    display: block !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
}

@media (min-width: 1280px) {
    .z_mobile_trigger {
        display: none !important;
    }
}

/* 2. Mobile Overlay Styles */
#z_mobile_overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: #ffffff !important;
    z-index: 100000 !important;
    flex-direction: column !important;
}

#z_overlay_inner {
    padding: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.z_overlay_close {
    align-self: flex-end !important;
    font-size: 3rem !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.z_overlay_links {
    margin-top: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    text-align: center !important;
}

.z_overlay_link {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-decoration: none !important;
}

/* Block Content Utils */
.scroll-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Hide Interference (FSE Specific) */
header.wp-block-template-part,
footer.wp-block-template-part,
.wp-site-blocks>.wp-block-navigation,
.wp-block-navigation__responsive-container {
    display: none !important;
}