/* Layout + theming for C++ *-quiz.html pages (sidebar + main column).
   This file is intentionally separate from `menus.css` so we can theme only the C++ quiz pages. */

.page-wrapper {
    display: flex;
    min-height: calc(100vh - 160px);
}

/* Background upgrade (applies to these quiz pages only since they link this CSS). */
body {
    background-color: #f7f9fc;
    background-image:
        radial-gradient(circle at 10% 10%, rgba(41, 128, 185, 0.18) 0%, transparent 35%),
        radial-gradient(circle at 90% 20%, rgba(155, 89, 182, 0.14) 0%, transparent 42%),
        radial-gradient(circle at 40% 90%, rgba(52, 73, 223, 0.12) 0%, transparent 45%);
    background-attachment: fixed;
}

/* Sidebar header + active state enhancements */
.sidebar-header {
    background: linear-gradient(135deg, var(--nav-gradient-start, #2980b9), var(--nav-gradient-end, #2c3e50));
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: rgba(41, 128, 185, 0.16);
    border-left: 4px solid rgba(41, 128, 185, 0.95);
    color: #ffffff;
}

.sidebar-nav a.active {
    background: rgba(41, 128, 185, 0.24);
    font-weight: 600;
}

.sidebar {
    background: linear-gradient(to bottom, rgba(41, 128, 185, 0.98), rgba(44, 62, 80, 0.98));
}

.main-content {
    flex: 1;
    padding: 30px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 250, 255, 0.9) 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    margin: 20px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(41, 128, 185, 0.18);
}

.main-content::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -30%;
    width: 170%;
    height: 170%;
    background:
        radial-gradient(circle at 30% 30%, rgba(41, 128, 185, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(155, 89, 182, 0.12) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.main-content > * {
    position: relative;
    z-index: 1;
}

/* Stronger accent on question cards */
.question-card {
    border-left: 6px solid rgba(41, 128, 185, 0.85);
}

.question-card:hover {
    border-left-color: rgba(155, 89, 182, 0.85);
}

/* Sidebar nav list is built by leftmenubar-mcq.js; base .sidebar styles come from ../menus.css. */