/* assets/css/style.css */
/* Main styles for the entire Villa Maria Welfare project */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Sticky Top Navbar */
.top-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
}

/* Sticky Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 40;
    transition: all 0.3s ease;
}

/* Responsive - hide sidebar on mobile by default */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar-open {
        transform: translateX(0);
    }
}

/* Main content padding for sidebar */
@media (min-width: 1024px) {
    .main-content {
        margin-left: 256px; /* 64 * 4 = 256px */
    }
}

/* Beautiful card hover effect */
.card-hover {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 
                0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Enhanced Card Styles */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.15) !important;
}

/* Make sure cards stand out on light background */
.bg-white {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05),
                0 4px 6px -4px rgb(0 0 0 / 0.05);
}

/* Tailwind script already loaded in header */