/**
 * Carousel Dots Visibility Fix
 * Ensures dots are visible on desktop when needed (multicard mode)
 */

/* Default styling for carousel dots - only show when not explicitly hidden */
.events-dots,
.videos-dots,
.articles-dots {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding: 10px 0;
}

/* When JavaScript sets display:none (incremental mode), respect it and remove space */
.events-dots[style*="display: none"],
.videos-dots[style*="display: none"],
.articles-dots[style*="display: none"] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

.events-dot,
.videos-dot,
.articles-dot {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    border: 2px solid transparent !important;
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Speaking section dots (white theme) */
.events-dot {
    background: rgba(255, 255, 255, 0.4) !important;
}

.events-dot.active {
    background: #5DA7E7 !important;
    transform: scale(1.3) !important;
    box-shadow: 0 0 15px rgba(93, 167, 231, 0.6), 0 0 30px rgba(93, 167, 231, 0.3) !important;
    border-color: rgba(93, 167, 231, 0.3) !important;
}

.events-dot:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important;
}

/* Videos section dots (white theme) */
.videos-dot {
    background: rgba(255, 255, 255, 0.4) !important;
}

.videos-dot.active {
    background: #5DA7E7 !important;
    transform: scale(1.3) !important;
    box-shadow: 0 0 15px rgba(93, 167, 231, 0.6), 0 0 30px rgba(93, 167, 231, 0.3) !important;
    border-color: rgba(93, 167, 231, 0.3) !important;
}

.videos-dot:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important;
}

/* Articles section dots (dark theme) */
.articles-dot {
    background: rgba(51, 51, 51, 0.4) !important;
}

.articles-dot.active {
    background: #5DA7E7 !important;
    transform: scale(1.3) !important;
    box-shadow: 0 0 15px rgba(93, 167, 231, 0.6), 0 0 30px rgba(93, 167, 231, 0.3) !important;
    border-color: rgba(93, 167, 231, 0.3) !important;
}

.articles-dot:hover {
    background: rgba(93, 167, 231, 0.8) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 10px rgba(93, 167, 231, 0.4) !important;
}

/* Add glow effect for better visibility */
.events-dot::before,
.videos-dot::before,
.articles-dot::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s ease;
    z-index: -1;
}

.events-dot.active::before,
.videos-dot.active::before,
.articles-dot.active::before {
    background: rgba(93, 167, 231, 0.2);
    transform: scale(1.2);
}

/* Focus styles for accessibility */
.events-dot:focus,
.videos-dot:focus,
.articles-dot:focus {
    outline: 3px solid #5DA7E7 !important;
    outline-offset: 3px !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 15px rgba(93, 167, 231, 0.6) !important;
}

/* Ensure dots are visible on all screen sizes */
@media (max-width: 1024px) {
    .events-dots,
    .videos-dots,
    .articles-dots {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    .events-dot,
    .videos-dot,
    .articles-dot {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Debug styles removed - dots are now working properly */