/* Additional optimizations for speakers.css */

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -50px;
    left: 15px;
    background: var(--wheat);
    color: var(--midnight);
    padding: 8px 15px;
    border-radius: 4px;
    z-index: 2000;
    transition: top 0.3s ease;
    font-weight: 600;
}

.skip-link:focus {
    top: 15px;
    outline: 2px solid var(--forest);
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Picture element normalization */
picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Optimize animation performance */
.fade-in {
    will-change: opacity, transform;
}

/* Performance optimization for transitions */
@media (prefers-reduced-motion: reduce) {
    .fade-in, 
    .cta-btn, 
    .featured-card,
    .featured-card img,
    .nav-links a::after,
    .social-link {
        transition: none !important;
        transform: none !important;
        will-change: auto !important;
    }
}

/* Highlight effect for speaker profiles when targeted via URL hash */
.highlight-profile {
    animation: profile-highlight 2s ease;
}

@keyframes profile-highlight {
    0% {
        box-shadow: 0 0 0 0px rgba(212, 160, 23, 0);
    }
    20% {
        box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0px rgba(212, 160, 23, 0);
    }
}

/* Disable animation if reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
    .highlight-profile {
        animation: none !important;
        box-shadow: 0 0 0 2px var(--wheat);
    }
}

/* Print styles */
@media print {
    header, footer, .cta-wrapper {
        display: none;
    }
    
    body {
        padding-top: 0;
    }
    
    .speaker-profile {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 2rem;
        border: 1px solid #ddd;
        box-shadow: none;
    }
    
    a {
        text-decoration: underline;
        color: #000;
    }
    
    .profile-header {
        background-color: #eee !important;
        color: #000 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    
    .session-info {
        background-color: #f8f8f8 !important;
        border-left: 2px solid #000;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}