/*
Theme Name: Suicide Prevention SPAv2.0
Theme URI: https://example.com
Author: You
Description: SPA skeleton theme for left panel UI and WordPress menus.
Version: 1.0
*/

/* Keep Inter as a UI hint (system fallback) */
    body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
    body { background: transparent; padding-top: 64px; } /* top nav height accounted for */
    /*
    body {
        background-image: url('images/bg-1.jpg'); /* relative to style.css */
        background-size: cover;           /* cover whole viewport */
        background-position: center;      /* center the image */
        background-repeat: no-repeat;     /* prevent tiling */
        background-attachment: fixed;     /* make it stay fixed on scroll */
    }
    */
	
	#mobile-panel {
        height: calc(100vh + 200px); /* header + margins */
    }

    .mobile-menu li a { padding:0.7rem}

    /* Floating phone on desktop/tablet */
    @media (min-width: 768px) {
        .elementor-social-icon {
            display: inline-flex!important;
        }
        #mobile-panel {
            position: fixed;
            top: 84px;      /* 64px header + 20px gap */
            left: 20px;
            width: 540px;
            height: calc(100vh - 150px); /* header + margins */
            overflow-y: auto;
            border-radius: 2rem;
            border: 6px solid #2e2e2e; /* dark bezel */
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
            z-index: 30;
        }
        /* push desktop content past the fixed phone */
        #desktop-panel-content-wrapper {
            margin-left: 580px; /* phone width + left gap */
            padding: 3rem 2rem;
        }
        .main-content-flow { min-height: auto; }

        .btn-blue { background: #0198CF }

        /* Add !important to all Tailwind classes for this image */
.team-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 9999px !important; /* rounded-full */
    border: 4px solid #f3f4f6 !important; /* border-gray-100 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* shadow-md */
}

    }

    /* Nice scrollbars on supported browsers */
    #mobile-panel::-webkit-scrollbar, #desktop-panel::-webkit-scrollbar { width: 3px; }
    #mobile-panel::-webkit-scrollbar-thumb, #desktop-panel::-webkit-scrollbar-thumb { background: #e1e1e1; border-radius: 6px; }

    /* Drawer animation (mobile) */
    .drawer-enter { transform: translateX(100%); }
    .drawer-enter-active { transform: translateX(0%); transition: transform 300ms ease; }
    .drawer-exit { transform: translateX(0%); }
    .drawer-exit-active { transform: translateX(100%); transition: transform 300ms ease; }


    /* dropdown base */
.has-dropdown {
    position: relative;
}

/* submenu container */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
    z-index: 50;
    padding: 0.5rem 0; 
}

/* show on hover (desktop) */
.has-dropdown:hover > .submenu {
    display: block;
}

/* submenu links */
.menu-item-sub > a {
    display: block;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

.menu-item-sub > a:hover {
    background: #f3f4f6; /* gray-100 */
}


.submenu {
    max-width: 16rem;
    width: fit-content;
}

.submenu a {
    white-space: normal;
    word-break: break-word;
    text-transform: capitalize;
    font-weight: 400;
}