/*
 * Do Progetto - Responsive Mobile Menu
 *
 * Japanese / English shared styles.
 * Preview version.
 *
 * Mobile layout:
 * - Two columns and three rows
 * - Existing image navigation retained
 * - Desktop navigation unchanged
 */

.dp-mobile-menu-toggle {
    display: none;
}

@media screen and (max-width: 600px) {

    /* Menu toggle */
    .dp-mobile-menu-ready .dp-mobile-menu-toggle {
        display: block;
        width: 100%;
        min-height: 44px;
        margin: 10px auto 12px;
        padding: 10px 16px;
        border: 1px solid #ccc;
        background: #fff;
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
    }

    .dp-mobile-menu-toggle:focus-visible {
        outline: 2px solid #900;
        outline-offset: 2px;
    }

    /* Closed state */
    .dp-mobile-menu-ready #nav {
        display: none !important;
    }

    /* Open state: two-column grid */
    .dp-mobile-menu-ready #nav.dp-mobile-menu-open {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        margin: 0 auto 14px;
        box-sizing: border-box;
    }

    /*
     * Existing navigation contains two UL elements
     * with three LI elements each.
     * Display contents lets all six LI elements
     * participate in the same two-column grid.
     */
    .dp-mobile-menu-ready #nav .head_ul {
        display: contents !important;
    }

    /* Individual navigation item */
    .dp-mobile-menu-ready #nav .head_ul > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0;
        min-height: 64px;
        margin: 0 !important;
        padding: 10px 6px 8px !important;
        border: 1px solid #d9d9d9;
        background: #fff;
        box-sizing: border-box;
        line-height: 1.5 !important;
        text-align: center;
    }

    .dp-mobile-menu-ready #nav .head_link_box {
        display: block;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        margin: 0 auto;
    }

    /* Navigation links */
    .dp-mobile-menu-ready #nav a {
        display: block;
        padding: 4px 0 2px;
        text-align: center;
    }

    .dp-mobile-menu-ready #nav img {
        max-width: 100%;
        height: auto;
    }

    /* Remove desktop separator */
    .dp-mobile-menu-ready #nav #head_line {
        display: none !important;
    }

    /* Active navigation underline */
    .dp-mobile-menu-ready #nav .link_line_active {
        width: 58%;
        max-width: 110px;
        height: 2px;
        margin: 6px auto 0;
        background-color: #900;
    }

    .dp-mobile-menu-ready #nav .link_line_no {
        width: 58%;
        max-width: 110px;
        height: 2px;
        margin: 6px auto 0;
    }

    /* Keep contact information below navigation */
    .dp-mobile-menu-ready #head_link {
        clear: both;
    }
}