/* =============================================================================
   Security & Accessibility Styles
   nexUS Observatories - Enhanced security and accessibility features
   Modern Browser Optimized with CSS Layers and Progressive Enhancement
   ============================================================================= */

/* CSS Layers for better cascade management */
@layer base, components, utilities;

@layer base {
    /* =============================================================================
       MODERN CSS FEATURES & BROWSER SUPPORT
       ============================================================================= */

    /* CSS Custom Properties with fallbacks */
    :root {
        --focus-color: var(--primary-color, #4facfe);
        --focus-secondary: var(--secondary-color, #00f2fe);
        --error-color: #ff4757;
        --success-color: #37b24d;
        --warning-color: #f39c12;
        
        /* Accessibility colors with WCAG AA compliance */
        --focus-outline: 3px;
        --focus-offset: 2px;
        --touch-target-min: 44px; /* WCAG AA minimum touch target */
        
        /* Animation duration respecting user preferences */
        --animation-duration: 0.3s;
        --animation-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* =============================================================================
       ACCESSIBILITY ENHANCEMENTS (WCAG 2.1 AA/AAA)
       ============================================================================= */

    /* Modern Screen Reader Utilities */
    .sr-only,
    .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important; /* Modern alternative to clip: rect() */
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Fallback for older browsers */
    @supports not (clip-path: inset(50%)) {
        .sr-only,
        .visually-hidden {
            clip: rect(0, 0, 0, 0) !important;
        }
    }

    /* Enhanced Focus Management with :focus-visible support */
    @supports selector(:focus-visible) {
        /* Remove default focus for mouse users */
        button:focus:not(:focus-visible),
        a:focus:not(:focus-visible),
        input:focus:not(:focus-visible),
        textarea:focus:not(:focus-visible),
        select:focus:not(:focus-visible),
        [tabindex]:focus:not(:focus-visible) {
            outline: none;
            box-shadow: none;
        }
        
        /* Enhanced focus for keyboard users */
        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        select:focus-visible,
        [tabindex]:focus-visible {
            outline: var(--focus-outline) solid var(--focus-color);
            outline-offset: var(--focus-offset);
            box-shadow: 0 0 0 1px rgba(79, 172, 254, 0.3);
        }
    }

    /* Fallback for browsers without :focus-visible */
    @supports not selector(:focus-visible) {
        button:focus,
        a:focus,
        input:focus,
        textarea:focus,
        select:focus,
        [tabindex]:focus {
            outline: var(--focus-outline) solid var(--focus-color) !important;
            outline-offset: var(--focus-offset) !important;
            box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.3) !important;
        }
    }

    /* High Contrast Mode Support (Windows) */
    @media (prefers-contrast: high) {
        :root {
            --focus-color: #0066ff;
            --focus-secondary: #00ccff;
            --error-color: #ff0000;
            --success-color: #00aa00;
        }
        
        .info-card,
        .newsletter-form,
        .countdown {
            border: 2px solid currentColor;
            background: Canvas !important;
            color: CanvasText !important;
        }
        
        button,
        .newsletter-button {
            border: 2px solid currentColor !important;
            background: ButtonFace !important;
            color: ButtonText !important;
        }
    }

    /* Forced Colors Mode Support */
    @media (forced-colors: active) {
        .video-controls,
        .keyboard-hints,
        .privacy-notice {
            border: 1px solid currentColor;
            background: Canvas;
            color: CanvasText;
        }
    }

    /* Reduced Motion Support */
    @media (prefers-reduced-motion: reduce) {
        :root {
            --animation-duration: 0.01ms;
        }
        
        *,
        *::before,
        *::after {
            animation-duration: var(--animation-duration) !important;
            animation-iteration-count: 1 !important;
            transition-duration: var(--animation-duration) !important;
            scroll-behavior: auto !important;
        }
        
        .stars,
        .fade-in,
        .slide-in,
        .pulse {
            animation: none !important;
        }
        
        .loading-spinner {
            animation: none !important;
            border-top-color: var(--focus-color);
        }
    }

    /* =============================================================================
       SECURITY FEATURES
       ============================================================================= */

    /* Enhanced Honeypot Fields - Multiple techniques */
    .honeypot,
    .hp-field,
    .security-field,
    input[name="website"],
    input[name="url"],
    input[name="phone"] {
        position: absolute !important;
        left: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
        tabindex: -1 !important;
        /* Additional security measures */
        visibility: hidden !important;
        z-index: -1000 !important;
        contain: layout !important; /* CSS Containment for performance */
    }

    /* Prevent potential clickjacking on sensitive forms */
    .newsletter-form,
    form[data-sensitive] {
        position: relative;
        isolation: isolate; /* Create new stacking context */
    }
}

@layer components {
    /* =============================================================================
       COMPONENT ENHANCEMENTS
       ============================================================================= */

    /* Enhanced Video Controls */
    .video-controls {
        position: relative;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 8px;
        padding: 8px;
        margin-top: 8px;
        backdrop-filter: blur(10px);
        contain: layout style; /* CSS Containment */
    }

    .video-control-btn {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        background: rgba(79, 172, 254, 0.2);
        border: 1px solid rgba(79, 172, 254, 0.4);
        color: var(--text-primary, #e0f7ff);
        padding: 8px 12px;
        margin: 0 4px;
        border-radius: 4px;
        cursor: pointer;
        transition: all var(--animation-duration) var(--animation-easing);
        /* Modern properties */
        contain: layout;
        user-select: none;
    }

    .video-control-btn:hover {
        background: rgba(79, 172, 254, 0.4);
        border-color: var(--focus-color);
        transform: translateY(-1px);
    }

    .video-control-btn:active {
        transform: translateY(0);
        background: rgba(0, 242, 254, 0.3);
    }

    /* Newsletter Form Enhancements */
    .newsletter-input {
        min-height: var(--touch-target-min);
        transition: all var(--animation-duration) var(--animation-easing);
    }

    .newsletter-button {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        transition: all var(--animation-duration) var(--animation-easing);
    }

    /* Rate Limiting UI */
    .rate-limit-warning {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        color: white;
        padding: 12px 16px;
        border-radius: 8px;
        margin: 16px 0;
        display: flex;
        align-items: center;
        gap: 12px;
        border-left: 4px solid var(--error-color);
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
        contain: layout;
    }

    .rate-limit-countdown {
        background: rgba(255, 255, 255, 0.2);
        padding: 4px 12px;
        border-radius: 20px;
        font-weight: 600;
        font-family: 'Orbitron', monospace;
        letter-spacing: 0.5px;
        font-variant-numeric: tabular-nums; /* Better number alignment */
    }

    /* Privacy Notice with modern styling */
    .privacy-notice {
        background: rgba(79, 172, 254, 0.1);
        border: 1px solid rgba(79, 172, 254, 0.3);
        border-radius: 8px;
        padding: 12px 16px;
        margin: 16px 0;
        font-size: 0.9em;
        color: var(--text-primary, #e0f7ff);
        contain: layout;
    }

    .privacy-notice a {
        color: var(--focus-color);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }

    .privacy-notice a:hover {
        color: var(--focus-secondary);
        text-decoration-thickness: 2px;
    }

    /* Enhanced Error States */
    .form-error,
    .error-message[role="alert"] {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        color: white;
        padding: 12px 16px;
        border-radius: 8px;
        margin: 8px 0;
        border-left: 4px solid var(--error-color);
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
        contain: layout;
    }

    .form-success {
        background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
        color: white;
        padding: 12px 16px;
        border-radius: 8px;
        margin: 8px 0;
        border-left: 4px solid var(--success-color);
        box-shadow: 0 4px 12px rgba(81, 207, 102, 0.3);
        contain: layout;
    }

    /* Input Error States with HTML5 validation support */
    input:invalid:not(:placeholder-shown),
    textarea:invalid:not(:placeholder-shown),
    input.error,
    textarea.error {
        border: 2px solid var(--error-color) !important;
        box-shadow: 0 0 8px rgba(255, 71, 87, 0.3) !important;
    }

    input:valid:not(:placeholder-shown),
    textarea:valid:not(:placeholder-shown) {
        border-color: var(--success-color);
        box-shadow: 0 0 4px rgba(55, 178, 77, 0.2);
    }

    /* Loading States with modern animation */
    .loading-indicator {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: rgba(79, 172, 254, 0.1);
        border: 1px solid rgba(79, 172, 254, 0.3);
        border-radius: 8px;
        color: var(--text-primary, #e0f7ff);
        contain: layout;
    }

    .loading-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(79, 172, 254, 0.3);
        border-top: 2px solid var(--focus-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        will-change: transform; /* Optimize for animation */
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Form Message States */
    .form-message[role="status"] {
        padding: 12px 16px;
        border-radius: 8px;
        margin: 8px 0;
        font-size: 0.9em;
        contain: layout;
    }

    .form-message.success {
        background: rgba(55, 178, 77, 0.1);
        border: 1px solid rgba(55, 178, 77, 0.3);
        color: #51cf66;
    }

    .form-message.error {
        background: rgba(255, 71, 87, 0.1);
        border: 1px solid rgba(255, 71, 87, 0.3);
        color: #ff6b6b;
    }

    /* Keyboard Shortcuts Hints */
    .keyboard-hints {
        background: rgba(10, 25, 47, 0.9);
        border: 1px solid rgba(79, 172, 254, 0.3);
        border-radius: 8px;
        padding: 12px;
        margin-top: 8px;
        font-size: 0.85em;
        color: var(--text-primary, #e0f7ff);
        contain: layout;
    }

    .keyboard-hints h4 {
        margin: 0 0 8px 0;
        color: var(--focus-color);
        font-size: 0.9em;
    }

    .keyboard-hints ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .keyboard-hints li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2px 0;
    }

    .keyboard-hints .key {
        background: rgba(79, 172, 254, 0.2);
        border: 1px solid rgba(79, 172, 254, 0.4);
        border-radius: 3px;
        padding: 2px 6px;
        font-family: 'Orbitron', monospace;
        font-size: 0.8em;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
}

@layer utilities {
    /* =============================================================================
       RESPONSIVE DESIGN & CONTAINER QUERIES
       ============================================================================= */

    /* Container Queries for component-based responsive design */
    @supports (container-type: inline-size) {
        .video-controls {
            container-type: inline-size;
        }

        @container (max-width: 300px) {
            .video-control-btn {
                padding: 6px 8px;
                font-size: 0.9em;
            }
        }

        .newsletter-form {
            container-type: inline-size;
        }

        @container (max-width: 400px) {
            .newsletter-input,
            .newsletter-button {
                font-size: 0.9em;
            }
        }
    }

    /* Traditional responsive design */
    @media (max-width: 768px) {
        .video-control-btn,
        .newsletter-button {
            min-width: 48px; /* Larger touch targets on mobile */
            min-height: 48px;
        }
        
        button:focus,
        a:focus,
        input:focus,
        textarea:focus {
            outline-width: 4px !important;
            outline-offset: 3px !important;
        }
        
        .keyboard-hints {
            display: none; /* Hide keyboard hints on mobile */
        }
    }

    /* Landscape orientation adjustments */
    @media (orientation: landscape) and (max-height: 500px) {
        .video-controls {
            padding: 4px;
        }
        
        .video-control-btn {
            padding: 4px 8px;
        }
    }

    /* =============================================================================
       MOBILE CACHE-BUSTING CRITICAL FIXES - Issue #102
       High-priority mobile-specific overrides
       ============================================================================= */

    /* Mobile Newsletter Button Loading States - Ultra High Specificity */
    @media (max-width: 768px) {
        .newsletter-button .btn-loading {
            display: none !important;
            opacity: 0 !important;
        }

        .newsletter-button .btn-text {
            display: inline-block !important;
            opacity: 1 !important;
        }

        .newsletter-button.loading .btn-text {
            opacity: 0 !important;
            display: none !important;
        }

        .newsletter-button.loading .btn-loading {
            display: inline-block !important;
            opacity: 1 !important;
        }

        .newsletter-button.loading {
            cursor: not-allowed !important;
            pointer-events: none !important;
        }
    }

    /* Mobile Modal Display Fix - Ultra High Specificity */
    @media (max-width: 768px) {
        .image-modal {
            display: none !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 1000 !important;
        }

        .image-modal.active {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
        }
    }

    /* =============================================================================
       ARIA LIVE REGIONS & DYNAMIC CONTENT
       ============================================================================= */

    /* ARIA Live Regions for Dynamic Content */
    .sr-live-region {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
        contain: layout;
    }

    [aria-live="polite"],
    [aria-live="assertive"] {
        position: relative;
    }

    /* Status Announcements */
    .status-announcement {
        background: rgba(79, 172, 254, 0.1);
        border: 1px solid rgba(79, 172, 254, 0.3);
        border-radius: 8px;
        padding: 12px 16px;
        margin: 16px 0;
        color: var(--text-primary, #e0f7ff);
        contain: layout;
    }

    /* =============================================================================
       PRINT STYLES & ACCESSIBILITY
       ============================================================================= */

    @media print {
        .honeypot,
        .rate-limit-warning,
        .video-controls,
        .keyboard-hints,
        .loading-spinner {
            display: none !important;
        }
        
        * {
            color: black !important;
            background: white !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }
        
        a {
            text-decoration: underline !important;
        }
        
        .form-error,
        .form-success {
            border: 2px solid black !important;
            background: white !important;
            color: black !important;
        }
    }

    /* =============================================================================
       PROGRESSIVE ENHANCEMENT
       ============================================================================= */

    /* Enhance for browsers with modern grid support */
    @supports (display: grid) {
        .keyboard-hints ul {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px 16px;
        }
        
        .keyboard-hints li {
            display: contents;
        }
    }

    /* Enhance for browsers with backdrop-filter */
    @supports (backdrop-filter: blur(10px)) {
        .video-controls {
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px);
        }
    }

    /* Enhance for browsers with scroll-behavior */
    @supports (scroll-behavior: smooth) {
        .skip-link[href^="#"] {
            scroll-behavior: smooth;
        }
    }
}

/* =============================================================================
   FEATURE DETECTION & POLYFILLS
   ============================================================================= */

/* Detect and handle lack of CSS Grid support */
@supports not (display: grid) {
    .keyboard-hints li {
        display: flex !important;
        justify-content: space-between !important;
    }
}

/* Handle browsers without CSS custom properties */
@supports not (--css: variables) {
    button:focus,
    a:focus,
    input:focus,
    textarea:focus,
    select:focus,
    [tabindex]:focus {
        outline: 3px solid #4facfe !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.3) !important;
    }
    
    .video-control-btn:focus {
        outline: 3px solid #00f2fe !important;
        box-shadow: 0 0 8px rgba(0, 242, 254, 0.4) !important;
    }
}