/* Tooltip styles for infographic */
.card {
    position: relative;
    z-index: 1;
}

.card:hover {
    z-index: 100;
    overflow: visible !important;
}

.tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 1000;
    width: 320px; /* Increased width for more content */
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    text-align: left;
    border-left: 4px solid;
    overflow: visible !important;
    pointer-events: none;
}

.card:hover .tooltip {
    visibility: visible;
    opacity: 1;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Color-coded tooltip borders */
.tooltip.blue-tooltip { border-color: #3b82f6; }
.tooltip.indigo-tooltip { border-color: #6366f1; }
.tooltip.purple-tooltip { border-color: #8b5cf6; }
.tooltip.pink-tooltip { border-color: #ec4899; }
.tooltip.green-tooltip { border-color: #10b981; }
.tooltip.yellow-tooltip { border-color: #f59e0b; }
.tooltip.orange-tooltip { border-color: #f97316; }
.tooltip.red-tooltip { border-color: #ef4444; }
.tooltip.teal-tooltip { border-color: #14b8a6; }

/* Ensure all parent containers allow overflow for tooltips */
.infographic-page,
.max-w-6xl,
.mb-12,
.flex-col,
.flex-row,
.justify-between,
.items-center,
.space-y-4,
.md\:space-y-0,
.md\:space-x-4,
.grid,
.grid-cols-1,
.md\:grid-cols-3,
.gap-6 {
    overflow: visible !important;
}