/* ==========================================================================
   1. GLOBAL & CORE LAYOUT RESET
   ========================================================================== */
body {
    background-color: #111318;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
}

/* 🟢 HIDES THE WHITE RADIO CIRCLES FROM THE TOP CORNER */
input[type="radio"][name="nav"] {
    display: none;
}

/* ==========================================================================
   2. SIDEBAR NAVIGATION STYLING
   ========================================================================== */
.sidebar {
    width: 240px;
    background-color: #161920;
    height: 100vh;
    padding: 30px 20px;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    border-right: 1px solid #1f232d;
}

.logo {
    color: #e53935;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 40px;
    font-size: 20px;
    padding-left: 15px;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links li {
    margin-bottom: 10px;
}

/* Make labels clickable and styled like sidebar items */
.nav-links li label {
    display: block;
    color: #8a8f9d;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.nav-links li label:hover {
    color: #ffffff;
    background-color: #1c2029;
}

/* ==========================================================================
   3. AUTOMATIC TAB SWITCHING ENGINE (CSS CONTROLLER)
   ========================================================================== */
/* Hide all main panels by default */
.section {
    display: none;
}

/* When a tab is clicked -> Highlight its Sidebar Link */
#tab-home:checked ~ .sidebar .nav-links label[for="tab-home"],
#tab-games:checked ~ .sidebar .nav-links label[for="tab-games"],
#tab-movies-shows:checked ~ .sidebar .nav-links label[for="tab-movies-shows"] {
    color: #e53935;
    background-color: #1e1b24;
    font-weight: 600;
    border-left: 3px solid #e53935;
    border-radius: 0 8px 8px 0;
    padding-left: 15px;
}

/* Switch sections based on active tab state */
#tab-home:checked ~ main #section-home,
#tab-games:checked ~ main #section-games,
#tab-movies-shows:checked ~ main #section-movies-shows {
    display: block;
}

/* ==========================================================================
   4. CONTENT PANELS & RESPONSIVE GRID LAYOUT
   ========================================================================== */
.main-content {
    margin-left: 240px; /* Leaves perfect space for fixed sidebar */
    padding: 40px 50px;
    flex-grow: 1;
    box-sizing: border-box;
}

h1 {
    font-size: 28px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 30px;
}

.game-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* ==========================================================================
   5. BOX CARDS STYLING (USED FOR BOTH GAMES & MOVIES)
   ========================================================================== */
.game-box {
    background-color: #161920;
    border: 1px solid #222630;
    border-radius: 14px;
    width: 150px;
    padding: 20px 15px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    box-sizing: border-box;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s;
}

.game-box:hover {
    transform: translateY(-5px);
    border-color: #e53935;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.game-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, #2c313d, #161920);
    border: 1px solid #2d3341;
    border-radius: 12px;
    margin: 0 auto 14px auto;
    transition: transform 0.2s;
}

.game-box:hover .game-icon {
    transform: scale(1.05);
}

.game-box span {
    font-size: 14px;
    font-weight: 500;
    display: block;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar {
    width: 240px;
    background-color: #161920;
    height: 100vh;
    padding: 30px 25px;
    box-sizing: border-box;
    border-right: 1px solid #1f232d;
}

/* Force the game blocks to clear the sidebar area */
.game-grid {
    margin-left: 240px !important;
    width: calc(100% - 240px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
}

/* Keeps the movie section clear of your sidebar */
#section-movies-shows {
    margin-left: 240px;
    padding: 40px 50px;
    box-sizing: border-box;
    width: calc(100% - 240px);
}

/* Movie section header styling */
#section-movies-shows h1 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 25px;
    font-family: sans-serif;
}

/* Switches the layout to a grid that keeps posters side-by-side */
#section-movies-shows .game-grid {
    display: grid;
    /* Fits as many cards per row as possible, shrinking down to a minimum of 160px wide */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 25px;
    width: 100%;
}

/* Card design styling */
#section-movies-shows .game-box {
    display: flex;
    flex-direction: column;
    background-color: #1c1f26;
    border: 1px solid #2a2f3b;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Card hover animation */
#section-movies-shows .game-box:hover {
    transform: translateY(-5px);
    border-color: #4a5568;
}

/* Formats the icon box into a perfect 2:3 vertical movie poster aspect ratio */
#section-movies-shows .game-icon {
    width: 100%;
    aspect-ratio: 2 / 3;
    background-color: #101216;
    background-size: cover;
    background-position: center;
}

/* Movie text styling */
#section-movies-shows span {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 10px;
    text-align: center;
    font-family: sans-serif;
    /* Caps the title text at 2 lines so long names don't break the layout */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}