/* 
 * AtomicFlix TV Mode Stylesheet
 * Handles overscan (safe areas), contrast, and spatial navigation focus states.
 */

/* Safe areas to prevent edges from being clipped by overscan */
:root {
    --safe-area-x: 5vw;
    --safe-area-y: 5vh;
}

@media screen and (min-width: 1280px) {
    body {
        /* Apply safe area padding to the entire body or main container */
        padding: var(--safe-area-y) var(--safe-area-x);
        box-sizing: border-box;
    }

    header {
        /* Adjust fixed header for safe area */
        padding-left: calc(var(--safe-area-x) + 4%);
        padding-right: calc(var(--safe-area-x) + 4%);
        padding-top: var(--safe-area-y);
        height: auto;
    }

    main {
        padding-top: 4rem; /* More space for the header in TV mode */
    }

    /* Boost readability: larger text for viewing from a couch (10-foot UI) */
    /* If the user said "too big", we might be seeing mobile layout. 
       Ensure we use a desktop-style grid but with larger elements. */
    html {
        font-size: 20px;
    }

    .hero-content {
        padding: 4rem 4%;
        max-width: 800px;
    }

    #hero-title {
        font-size: 4rem;
    }

    #hero-subtitle {
        font-size: 1.5rem;
    }

    /* Bigger cards for better visibility from distance */
    .card {
        flex: 0 0 280px !important;
    }

    /* Boost contrast for TV screens */
    :root {
        --bg-dark: #000000;
        --bg-card: #111111;
        --text-main: #ffffff;
        --text-muted: #dddddd;
        --accent-primary: #ff1a1a; /* Brighter red */
        --accent-secondary: #00f2ff; /* Brighter cyan */
    }

    .card-info {
        background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 100%);
    }
}

/* Specific scale-down for extremely large viewports if things feel too blown up */
@media screen and (min-width: 2560px) {
    html {
        font-size: 24px;
    }
    
    .card {
        flex: 0 0 320px !important;
    }
}

/* Spatial Navigation Focus States */
.focused,
:focus-visible {
    outline: 4px solid var(--accent-secondary) !important;
    outline-offset: 4px;
    box-shadow: 0 0 20px var(--accent-glow) !important;
    z-index: 1001 !important;
    transform: scale(1.05) !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), outline 0.1s;
}

/* Don't zoom the video player or its iframe wrapper when focused, just the outline */
video:focus-visible, 
video.focused,
iframe:focus-visible,
iframe.focused {
    transform: none !important;
}

.card.focused {
    border-color: var(--accent-secondary);
}

.btn.focused,
.btn:focus-visible {
    background-color: var(--accent-secondary);
    color: #000;
    transform: scale(1.1) !important;
}

/* Adjust row horizontal scrolling for focused cards */
.cards-container {
    scroll-padding: 0 100px;
}