/* vra-neo-header.css — 2026-07-21
 * Gentle neumorphism for the guest header buttons: Login, Signup, Blog.
 * Scoped to >=768px; the mobile collapsed menu keeps its legacy flat style.
 * Loaded right after style.css; #profile-icons gives it the specificity to win. */

@media (min-width: 768px) {

    #profile-icons .log_btn,
    #profile-icons .sign_btn,
    #profile-icons .blog_btn {
        display: inline-block;
        border: none !important;
        background: linear-gradient(145deg, #ffffff, #edf1f3) !important;
        color: #1aaaaf !important;
        padding: 7px 18px;
        border-radius: 22px !important;
        box-shadow: 3px 3px 7px rgba(166, 180, 188, 0.40),
                    -3px -3px 7px rgba(255, 255, 255, 0.95);
        transition: box-shadow 0.18s ease, color 0.18s ease;
    }

    /* drop the legacy right:6px nudge on Signup */
    #profile-icons .sign_btn {
        right: 0;
    }

    /* capsule buttons: no underline from the parent link */
    #profile-icons li.cred_btn a:hover,
    #profile-icons li.cred_btn a:focus {
        text-decoration: none;
    }

    #profile-icons .log_btn:hover,
    #profile-icons .sign_btn:hover,
    #profile-icons .blog_btn:hover {
        background: linear-gradient(145deg, #ffffff, #e7edef) !important;
        color: #0e7d80 !important;
        text-decoration: none;
        box-shadow: 4px 4px 9px rgba(166, 180, 188, 0.50),
                    -4px -4px 9px rgba(255, 255, 255, 1);
    }

    /* pressed: soft inset, the classic neumorphic "sink" */
    #profile-icons .log_btn:active,
    #profile-icons .sign_btn:active,
    #profile-icons .blog_btn:active,
    #profile-icons li.cred_btn a:active .sign_btn,
    #profile-icons li.cred_btn a:active .blog_btn {
        box-shadow: inset 2px 2px 5px rgba(166, 180, 188, 0.45),
                    inset -2px -2px 5px rgba(255, 255, 255, 0.90);
        color: #0e7d80 !important;
    }
}