/**
 * Orbital Carousel Widget - Styles
 * 
 * Giant rotating circle carousel with CSS trigonometry.
 * 
 * @version 1.0.0
 */

/* =========================================================================
   BASE STYLES
   ========================================================================= */

.ocw-carousel-container {
    width: 100%;
    overflow: visible !important;
}

.ocw-carousel {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Default: allow circle to extend beyond container */
.ocw-carousel-container .ocw-carousel {
    overflow: visible;
}

/* =========================================================================
   CIRCLE & IMAGES
   ========================================================================= */

.ocw-circle {
    pointer-events: none;
}

.ocw-image-wrapper {
    pointer-events: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: transparent;
}

.ocw-image-wrapper img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* =========================================================================
   NAVIGATION
   ========================================================================= */

.ocw-nav {
    outline: none;
}

.ocw-nav:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

.ocw-play-pause {
    outline: none;
}

.ocw-play-pause:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* =========================================================================
   INDICATORS
   ========================================================================= */

.ocw-indicator {
    outline: none;
}

.ocw-indicator:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

.ocw-indicator.active {
    width: 24px !important;
}

/* =========================================================================
   COUNTER
   ========================================================================= */

.ocw-counter {
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .ocw-circle,
    .ocw-image-wrapper,
    .ocw-nav,
    .ocw-play-pause,
    .ocw-indicator {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================================
   RESPONSIVE - TABLET
   ========================================================================= */

@media screen and (max-width: 1024px) {
    .ocw-nav {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    
    .ocw-nav-prev {
        left: 16px !important;
    }
    
    .ocw-nav-next {
        right: 16px !important;
    }
    
    .ocw-play-pause {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
    
    .ocw-indicators {
        padding: 8px 12px !important;
        gap: 6px !important;
    }
    
    .ocw-indicator {
        height: 6px !important;
    }
    
    .ocw-indicator.active {
        width: 20px !important;
    }
    
    .ocw-counter {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
}

/* =========================================================================
   RESPONSIVE - MOBILE
   ========================================================================= */

@media screen and (max-width: 768px) {
    .ocw-nav {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    .ocw-nav-prev {
        left: 12px !important;
    }
    
    .ocw-nav-next {
        right: 12px !important;
    }
    
    .ocw-play-pause {
        top: 16px !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
    }
    
    .ocw-indicators {
        bottom: 16px !important;
        padding: 6px 10px !important;
        gap: 5px !important;
    }
    
    .ocw-indicator {
        width: 6px !important;
        height: 6px !important;
        border-radius: 3px !important;
    }
    
    .ocw-indicator.active {
        width: 18px !important;
    }
    
    .ocw-counter {
        bottom: 16px !important;
        right: 12px !important;
        padding: 5px 10px !important;
        font-size: 10px !important;
    }
}

/* =========================================================================
   PRINT STYLES
   ========================================================================= */

@media print {
    .ocw-carousel {
        background-color: #fff !important;
        height: auto !important;
        overflow: visible !important;
        page-break-inside: avoid;
    }
    
    .ocw-circle {
        position: relative !important;
        width: 100% !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
        aspect-ratio: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
    }
    
    .ocw-image-wrapper {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 150px !important;
        height: 200px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    .ocw-nav,
    .ocw-play-pause,
    .ocw-indicators,
    .ocw-counter {
        display: none !important;
    }
}

/* =========================================================================
   BROWSER PREFIXES FOR CSS TRIG FUNCTIONS
   ========================================================================= */

/* Modern browsers support CSS trigonometric functions natively */
/* Fallback handled via JavaScript for older browsers */

@supports not (left: calc(1px * cos(0deg))) {
    .ocw-image-wrapper {
        /* JS will handle positioning for browsers without trig support */
    }
}

/* =========================================================================
   HIGH CONTRAST MODE
   ========================================================================= */

@media (forced-colors: active) {
    .ocw-nav,
    .ocw-play-pause,
    .ocw-indicator {
        border: 2px solid currentColor !important;
    }
    
    .ocw-indicator.active {
        background-color: Highlight !important;
    }
}