/* Custom CSS - Additional styles */

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--n8n-dark) 0%, var(--n8n-gray-900) 100%);
    color: var(--n8n-white);
    padding: 4rem 0;
}

.hero-section h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-section p {
    font-size: 1.125rem;
    opacity: 0.9;
}

/* Category Cards */
.category-card {
    text-align: center;
    padding: 1.5rem;
    border: 1px solid var(--n8n-gray-300);
    border-radius: var(--bs-border-radius-lg);
    transition: all 0.3s ease;
}

.category-card:hover {
    border-color: var(--n8n-primary);
    background-color: var(--bs-primary-bg-subtle);
}

.category-card .icon {
    font-size: 2rem;
    color: var(--n8n-primary);
    margin-bottom: 0.75rem;
}

/* Stats Section */
.stats-section {
    background-color: var(--n8n-gray-100);
    padding: 3rem 0;
}

.stat-item {
    text-align: center;
}

.stat-item .number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--n8n-primary);
}

.stat-item .label {
    font-size: 0.875rem;
    color: var(--n8n-gray-500);
}

/* Workflow Single Page */
.workflow-header {
    background-color: var(--n8n-gray-100);
    padding: 2rem 0;
}

.workflow-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.workflow-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--n8n-gray-700);
}

/* JSON Preview */
.json-preview {
    background-color: var(--n8n-dark);
    color: var(--n8n-gray-100);
    padding: 1.5rem;
    border-radius: var(--bs-border-radius);
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.875rem;
    max-height: 400px;
    overflow-y: auto;
}

/* Related Workflows */
.related-workflows {
    background-color: var(--n8n-gray-100);
    padding: 3rem 0;
}

/* Footer */
.footer {
    background-color: var(--n8n-dark);
    color: var(--n8n-gray-300);
    padding: 3rem 0 1.5rem;
}

.footer a {
    color: var(--n8n-gray-300);
    text-decoration: none;
}

.footer a:hover {
    color: var(--n8n-primary);
}

.footer .footer-title {
    color: var(--n8n-white);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Language Switcher */
.lang-switcher .dropdown-menu {
    min-width: 120px;
}

.lang-switcher .dropdown-item.active {
    background-color: var(--n8n-primary);
}

/* Breadcrumb */
.breadcrumb {
    background-color: transparent;
    padding: 0.75rem 0;
}

/* Pagination */
.pagination .page-link {
    color: var(--n8n-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--n8n-primary);
    border-color: var(--n8n-primary);
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1060;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .hero-section h1 {
        font-size: 1.75rem;
    }
    
    .workflow-meta {
        flex-direction: column;
        gap: 0.75rem;
    }
}