/* Interactive Elements - Global Styles */

/* Clickable Cards */
[onclick] {
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

[onclick]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

/* Clickable Buttons */
button[onclick],
.btn[onclick],
.action-btn[onclick] {
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

button[onclick]:hover,
.btn[onclick]:hover,
.action-btn[onclick]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Clickable Links */
a[onclick] {
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

a[onclick]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Interactive Cards with Specific Classes */
.team-member[onclick],
.project-item[onclick],
.expert-card[onclick],
.related-project[onclick] {
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.team-member[onclick]:hover,
.project-item[onclick]:hover,
.expert-card[onclick]:hover,
.related-project[onclick]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

/* Interactive Buttons with Specific Classes */
.project-button[onclick],
.expert-button[onclick],
.project-action-btn[onclick],
.org-action-btn[onclick],
.individual-action-btn[onclick] {
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-button[onclick]:hover,
.expert-button[onclick]:hover,
.project-action-btn[onclick]:hover,
.org-action-btn[onclick]:hover,
.individual-action-btn[onclick]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Focus States for Accessibility */
[onclick]:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Disabled State */
[onclick]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

[onclick]:disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: inherit;
}