/* Focus Management Styles */

/* Base focusable element style */
[data-focusable] {
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Focused State */
.focused {
    border: 0.16vw solid #2196F3;
    box-shadow: 0 0 0.52vw rgba(33, 150, 243, 0.5);
    transform: scale(1.05);
    z-index: 10;
    position: relative;
}

/* Pressed State */
.focused:active {
    transform: scale(0.98);
    transition: none;
}

/* Disabled State */
.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Navigation Menu Items */
.nav-item {
    padding: 0.93vh 1.04vw;
    margin-right: 0.78vw;
    font-size: 1.5rem;
    color: #B0B0B0;
    border-radius: 0.42vw;
    border: 0.16vw solid transparent; /* Reserve space for border */
}

.nav-item.active {
    color: #FFFFFF;
    border-bottom: 0.16vw solid #2196F3;
}

.nav-item.focused {
    background-color: #424242;
    color: #FFFFFF;
    border-color: #2196F3;
}

/* Media Queries for Navigation Scaling */

/* 720p TVs */
@media screen and (max-width: 1280px) and (max-height: 720px) {
    .nav-item {
        font-size: 1.3rem;
        padding: 0.8vh 0.9vw;
    }
}

/* 4K TVs */
@media screen and (min-width: 1921px) {
    .nav-item {
        font-size: 1.6rem;
        padding: 1vh 1.1vw;
    }
}