/**
 * Anchor Blocks Visibility Styles
 * Handles the visual styling for section visibility management
 */

/* Hide specific content sections by default */
#obituary.hidden, #obituary-text.hidden,
#service.hidden, #service-details.hidden,
#gallery.hidden, #gallery-grid.hidden,
#videos.hidden, #videos.wp-block-group.hidden, #videos[class*="wp-block-group"].hidden, #video-section.hidden,
#memory-wall.hidden, #memory-wall-section.hidden,
#donate.hidden, #donation-section.hidden {
    display: none !important;
}

/* Show active sections */
#obituary.active, #obituary-text.active,
#service.active, #service-details.active,
#gallery.active, #gallery-grid.active,
#videos.active, #videos.wp-block-group.active, #videos[class*="wp-block-group"].active, #video-section.active,
#memory-wall.active, #memory-wall-section.active,
#donate.active, #donation-section.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Smooth transitions for section changes */
.content-section {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Navigation active state */
.nav-link.active {
    color: #667eea !important;
    font-weight: 600 !important;
    position: relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1px;
}

/* Loading state */
.content-section.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Error state */
.content-section.error {
    opacity: 0.7;
    background-color: rgba(255, 0, 0, 0.05);
    border: 1px solid rgba(255, 0, 0, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .content-section.active {
        margin-top: 20px;
    }
    
    .nav-link.active::after {
        bottom: -3px;
        height: 1px;
    }
}

/* Print styles - show all sections when printing */
@media print {
    .content-section {
        display: block !important;
        page-break-inside: avoid;
    }
    
    .content-section.hidden {
        display: block !important;
    }
}