/*
Additional CSS for WordPress theme compatibility
*/

/* Card Styles */
.mi-card {
    background: var(--mi-white);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--mi-shadow);
    transition: var(--mi-transition);
}

.mi-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--mi-shadow-hover);
}

.mi-card h3 {
    text-align: center;
    margin-bottom: 15px;
}

.mi-card p {
    text-align: center;
    color: var(--mi-text-light);
    margin-bottom: 25px;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--mi-primary) 0%, var(--mi-secondary) 100%);
    color: var(--mi-white);
    padding: 120px 20px;
    text-align: center;
}

.hero-section h1 {
    color: var(--mi-white);
}

/* Grid Layouts */
.tools-grid,
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section {
        padding: 80px 20px;
    }
    
    .hero-section h1 {
        font-size: 2rem !important;
    }
    
    .tools-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }
}