/* 
 * Plugin Styles fallback (Theme Independent) 
 * The theme can override these styles if it wants to.
 */

:root {
    --crt-bg: #ffffff;
    --crt-surface: #ffffff;
    --crt-border: #eaeaea;
    --crt-primary: #000000;
    --crt-text: #333333;
    --crt-text-muted: #666666;
    --crt-hover-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

@media (prefers-color-scheme: dark) {
    /* If the theme supports dark mode, let it inherit or provide basic dark mode */
    :root {
        --crt-bg: #121212;
        --crt-surface: #1e1e1e;
        --crt-border: #333333;
        --crt-primary: #ffffff;
        --crt-text: #e0e0e0;
        --crt-text-muted: #a0a0a0;
        --crt-hover-shadow: 0 5px 15px rgba(0,0,0,0.4);
    }
}

/* Fallback grid if the theme doesn't define it */
.crt-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.crt-tool-card {
    background: var(--crt-surface, var(--surface-color, #fff));
    border: 1px solid var(--crt-border, var(--border-color, #eaeaea));
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.crt-tool-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--crt-hover-shadow, 0 5px 15px rgba(0,0,0,0.05));
}

.crt-tool-icon {
    font-size: 32px;
    color: var(--crt-primary, var(--accent-color, #0073aa));
    background: rgba(0,0,0,0.03);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crt-tool-details h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
}

.crt-tool-details h3 a {
    text-decoration: none;
    color: var(--crt-text, var(--text-primary, #333));
}

.crt-tool-details p {
    margin: 0;
    font-size: 14px;
    color: var(--crt-text-muted, var(--text-muted, #666));
    line-height: 1.5;
}

.crt-tool-section {
    margin-bottom: 40px;
}

.crt-section-header h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--crt-text, var(--text-primary, #333));
    border-bottom: 2px solid var(--crt-border, var(--border-color, #eaeaea));
    padding-bottom: 10px;
}

.crt-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.crt-category-list li {
    margin-bottom: 10px;
}

.crt-category-list a {
    text-decoration: none;
    color: var(--crt-text, var(--text-primary, #333));
    display: flex;
    align-items: center;
    gap: 10px;
}

.crt-category-list a:hover {
    color: var(--crt-primary, var(--accent-color, #0073aa));
}