/* ==========================================
   CATEGORY STYLES - Catppuccin Mocha Theme
   ==========================================
   This file contains all styling for category cards and related UI elements.
   Uses the Catppuccin Mocha color palette for consistent theming.
*/

/* Category Card Background Colors - Catppuccin Mocha Palette */
/* Each category gets a unique pastel color for visual differentiation */

.category-rosewater {
    /* Soft pink background for warm, welcoming categories */
    background-color: #f5e0dc;
    color: #1e1e2e; /* Dark text for contrast */
    border: 2px solid #f5e0dc;
}

.category-flamingo {
    /* Coral pink for energetic, social categories */
    background-color: #f2cdcd;
    color: #1e1e2e;
    border: 2px solid #f2cdcd;
}

.category-pink {
    /* Bright pink for friendly, approachable categories */
    background-color: #f5c2e7;
    color: #1e1e2e;
    border: 2px solid #f5c2e7;
}

.category-mauve {
    /* Soft purple for creative, thoughtful categories */
    background-color: #cba6f7;
    color: #1e1e2e;
    border: 2px solid #cba6f7;
}

.category-red {
    /* Vibrant red for important, attention-grabbing categories */
    background-color: #f38ba8;
    color: #1e1e2e;
    border: 2px solid #f38ba8;
}

.category-maroon {
    /* Deep red for serious, professional categories */
    background-color: #eba0ac;
    color: #1e1e2e;
    border: 2px solid #eba0ac;
}

.category-peach {
    /* Warm orange for friendly, casual categories */
    background-color: #fab387;
    color: #1e1e2e;
    border: 2px solid #fab387;
}

.category-yellow {
    /* Bright yellow for cheerful, energetic categories */
    background-color: #f9e2af;
    color: #1e1e2e;
    border: 2px solid #f9e2af;
}

.category-green {
    /* Fresh green for natural, healthy categories */
    background-color: #a6e3a1;
    color: #1e1e2e;
    border: 2px solid #a6e3a1;
}

.category-teal {
    /* Cool teal for calm, technical categories */
    background-color: #94e2d5;
    color: #1e1e2e;
    border: 2px solid #94e2d5;
}

.category-sky {
    /* Light blue for clear, communicative categories */
    background-color: #89dceb;
    color: #1e1e2e;
    border: 2px solid #89dceb;
}

.category-sapphire {
    /* Medium blue for professional, business categories */
    background-color: #74c7ec;
    color: #1e1e2e;
    border: 2px solid #74c7ec;
}

.category-blue {
    /* Standard blue for general, versatile categories */
    background-color: #89b4fa;
    color: #1e1e2e;
    border: 2px solid #89b4fa;
}

.category-lavender {
    /* Soft purple for creative, artistic categories */
    background-color: #b4befe;
    color: #1e1e2e;
    border: 2px solid #b4befe;
}

/* Category Card Hover Effects */
/* Subtle animations for better user interaction */

.category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border-radius: 0.75rem; /* Rounded corners */
    padding: 1.5rem; /* Generous padding */
    margin-bottom: 1rem; /* Spacing between cards */
}

.category-card:hover {
    transform: translateY(-3px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Soft shadow */
}

/* Category Card Text Styling */

.category-card h3 {
    font-size: 1.25rem; /* Large, readable title */
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.category-card p {
    font-size: 0.875rem; /* Smaller description text */
    line-height: 1.4; /* Good readability */
    opacity: 0.9; /* Slight transparency for hierarchy */
}

/* Responsive Design for Category Cards */

@media (max-width: 768px) {
    .category-card {
        padding: 1rem; /* Smaller padding on mobile */
        margin-bottom: 1rem;
    }

    .category-card h3 {
        font-size: 1.125rem; /* Slightly smaller title on mobile */
    }

    .category-card p {
        font-size: 0.8125rem; /* Smaller description on mobile */
    }

    .category-card:hover {
        transform: none; /* Disable hover effects on touch devices */
        box-shadow: none;
    }

    .category-card:active {
        transform: translateY(-1px); /* Subtle active state for touch */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

/* Focus States for Accessibility */

.category-card:focus {
    outline: 2px solid #89b4fa; /* Blue focus ring */
    outline-offset: 2px;
}

/* Loading States */

.category-card.loading {
    opacity: 0.7;
    pointer-events: none;
}

.category-card.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #89b4fa;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}