/**
 * VIDEO MODAL STYLES
 * 
 * Styles for the video popup modal that opens when clicking
 * the "Watch Demo" button in the hero section.
 * 
 * Features:
 * - Dark overlay backdrop with blur effect
 * - Centered video container with responsive sizing
 * - Smooth fade-in/fade-out animations
 * - Close button with hover effect
 * - Accessible keyboard navigation support
 */

/* ================================================
   HERO BUTTON RESET
   Ensures button element looks identical to anchor links
   when using .hero-btn-secondary class.
   
   Critical: The <button> element requires explicit resets
   to render identically to <a> tags with the same class.
   ================================================ */
button.hero-btn-secondary {
    /* Reset browser default button styles */
    border: 2px solid #ddd;
    background: white;
    font-family: inherit;
    cursor: pointer;
    
    /* Ensure consistent sizing with primary button */
    box-sizing: border-box;
    min-height: 52px; /* Match primary button height */
    line-height: 1.2; /* Match primary button line-height */
    
    /* Ensure consistent appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ================================================
   DEMO BUTTON RESET (About Page)
   Ensures the <button> element with .demo-button class
   looks identical to when it was an <a> tag.
   The .demo-button styles in style.css handle most styling,
   but buttons need explicit cursor and appearance resets.
   ================================================ */
button.demo-button {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ================================================
   MODAL OVERLAY
   Dark backdrop that covers the entire viewport
   when the modal is open. Clicking it closes the modal.
   ================================================ */
.video-modal-overlay {
    /* Positioning - fixed to viewport, covers entire screen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Dark semi-transparent background */
    background-color: rgba(0, 0, 0, 0.85);
    
    /* Backdrop blur for modern glass effect */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    /* Stack above all other content */
    z-index: 9999;
    
    /* Flexbox to center the modal content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    
    /* Smooth transition for fade effect */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Active state - when modal is visible */
.video-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ================================================
   MODAL CONTAINER
   The white/dark container that holds the video
   and close button. Centered in the viewport.
   ================================================ */
.video-modal-container {
    /* Sizing - responsive with max constraints */
    width: 90%;
    max-width: 1000px;
    
    /* Position relative for close button positioning */
    position: relative;
    
    /* Rounded corners for modern look */
    border-radius: 12px;
    
    /* Shadow for depth */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    
    /* Prevent overflow of video corners */
    overflow: hidden;
    
    /* Background color for loading state */
    background-color: #000;
    
    /* Animation - scale up slightly when appearing */
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

/* Active state - full scale */
.video-modal-overlay.active .video-modal-container {
    transform: scale(1);
}

/* ================================================
   CLOSE BUTTON
   X button in the top-right corner of the modal
   ================================================ */
.video-modal-close {
    /* Positioning - top right of container */
    position: absolute;
    top: -45px;
    right: 0;
    
    /* Size and shape */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    
    /* Styling */
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    
    /* Flexbox to center the X icon */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Transition for hover effects */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Close button hover state */
.video-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Close button focus state for accessibility */
.video-modal-close:focus {
    outline: 2px solid #5B3AFF;
    outline-offset: 2px;
}

/* X icon inside close button */
.video-modal-close svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 2;
}

/* ================================================
   VIDEO WRAPPER
   Maintains 16:9 aspect ratio for the video
   Prevents layout shift while video loads
   ================================================ */
.video-modal-video-wrapper {
    /* Padding-bottom trick for 16:9 aspect ratio */
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
    background-color: #000;
}

/* Video element - fills the wrapper completely */
.video-modal-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
}

/* ================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   Optimize the modal for smaller screens
   ================================================ */

/* Tablet and below */
@media (max-width: 768px) {
    .video-modal-container {
        width: 95%;
        max-width: none;
        margin: 0 10px;
    }
    
    /* Move close button inside the modal on mobile */
    .video-modal-close {
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 10;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .video-modal-container {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
    
    .video-modal-close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }
    
    .video-modal-close svg {
        width: 18px;
        height: 18px;
    }
}

/* ================================================
   BODY SCROLL LOCK
   Prevent background scrolling when modal is open
   ================================================ */
body.video-modal-open {
    overflow: hidden;
}