/*
 Theme Name: Lightning Child
 Template: lightning
*/

/* ボタンのデフォルト画像を無効化 */
#vk-mobile-nav-menu-btn {
    background-image: none !important;
    width: 70px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3本ラインの箱 */
.custom-menu-icon {
    width: 46px;
    height: 30px;
    position: relative;
    transition: 0.3s;
}

/* ライン共通 */
.custom-menu-icon span {
    position: absolute;
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    transition: 0.3s ease;
}

/* 色 */
.custom-menu-icon span:nth-child(1) { background: #C97A42; top: 0; }
.custom-menu-icon span:nth-child(2) { background: #33A071; top: 12px; }
.custom-menu-icon span:nth-child(3) { background: #1E6B46; top: 24px; }

/* --- MENU（閉じた時） --- */
/* MENU時に少し傾けて「崩した」デザインにする */
#vk-mobile-nav-menu-btn:not(.vk-mobile-nav-open) .custom-menu-icon span:nth-child(1) {
    transform: rotate(-8deg);
}
#vk-mobile-nav-menu-btn:not(.vk-mobile-nav-open) .custom-menu-icon span:nth-child(2) {
    transform: rotate(5deg);
}
#vk-mobile-nav-menu-btn:not(.vk-mobile-nav-open) .custom-menu-icon span:nth-child(3) {
    transform: rotate(-4deg);
}

/* --- CLOSE（開いた時） --- */
/* Lightning が body にクラスを付けるのでそれを利用 */
body.vk-mobile-nav-open .custom-menu-icon span:nth-child(1),
body.vk-mobile-nav-open .custom-menu-icon span:nth-child(2),
body.vk-mobile-nav-open .custom-menu-icon span:nth-child(3) {
    transform: rotate(0deg);
    top: calc(12px - 1px); /* 全て中央に寄せる */
}

/* 3本目は消さない（あなたのデザインは消えない） */

/* --- MENU時のホバー → CLOSE時の並びに近づく --- */
#vk-mobile-nav-menu-btn:hover .custom-menu-icon span:nth-child(1),
#vk-mobile-nav-menu-btn:hover .custom-menu-icon span:nth-child(2),
#vk-mobile-nav-menu-btn:hover .custom-menu-icon span:nth-child(3) {
    transform: rotate(0deg);
}

/* --- Lightning のデフォルト背景・枠を完全オフ --- */
#vk-mobile-nav-menu-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* テキスト部分 */
.custom-menu-text {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1E6B46;
    letter-spacing: 2px;
    text-align: center;
    transition: 0.3s;
}

/* アイコン本体（3本ライン） */
.custom-menu-icon {
    width: 46px;
    height: 28px;
    position: relative;
    transition: 0.3s ease;
}

/* 3本ライン共通 */
.custom-menu-icon span {
    position: absolute;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    transition: 0.3s ease;
}

/* 色 */
.custom-menu-icon span:nth-child(1) { background: #C97A42; top: 0; }
.custom-menu-icon span:nth-child(2) { background: #33A071; top: 11px; }
.custom-menu-icon span:nth-child(3) { background: #1E6B46; top: 22px; }

/* --- 閉じているとき（MENU表示） --- */
body:not(.vk-mobile-nav-open) .custom-menu-icon span:nth-child(1) { transform: rotate(-8deg); }
body:not(.vk-mobile-nav-open) .custom-menu-icon span:nth-child(2) { transform: rotate(6deg); }
body:not(.vk-mobile-nav-open) .custom-menu-icon span:nth-child(3) { transform: rotate(-4deg); }

/* hover時にLINEを揃える（MENU → CLOSE っぽい動き） */
#vk-mobile-nav-menu-btn:hover .custom-menu-icon span {
    transform: rotate(0deg);
}

/* --- 開いているとき（CLOSE表示） --- */
body.vk-mobile-nav-open .custom-menu-icon span:nth-child(1),
body.vk-mobile-nav-open .custom-menu-icon span:nth-child(2),
body.vk-mobile-nav-open .custom-menu-icon span:nth-child(3) {
    transform: rotate(0deg);
    top: 11px;  /* 全て中央に寄せる */
}

/* reCAPTCHA バッジを非表示 */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
}