/* Layout + theming for Java *-quiz.html pages (sidebar + main column).
   This file is intentionally separate from `menus.css` so we can theme only the Java 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: #fff8f3;
    background-image:
        radial-gradient(circle at 10% 10%, rgba(231, 111, 0, 0.14) 0%, transparent 35%),
        radial-gradient(circle at 90% 20%, rgba(194, 65, 12, 0.12) 0%, transparent 42%),
        radial-gradient(circle at 40% 90%, rgba(124, 45, 18, 0.1) 0%, transparent 45%);
    background-attachment: fixed;
}

/* Sidebar header + active state enhancements (java-sidebar.css provides base theme) */
.sidebar-header {
    background: linear-gradient(135deg, var(--java-brand, #e76f00), var(--java-brand-deep, #7c2d12));
}

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

.sidebar-nav a.active {
    background: rgba(255, 215, 0, 0.18);
    font-weight: 600;
}

.sidebar {
    background: linear-gradient(to bottom, #e76f00, #7c2d12);
}

.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(231, 111, 0, 0.18);
}

.main-content::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -30%;
    width: 170%;
    height: 170%;
    background:
        radial-gradient(circle at 30% 30%, rgba(231, 111, 0, 0.14) 0%, transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(194, 65, 12, 0.1) 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(231, 111, 0, 0.85);
}

.question-card:hover {
    border-left-color: rgba(194, 65, 12, 0.85);
}

/* MCQ level section headers */
.mcq-level-header {
    margin: 2rem 0 1.25rem;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    font-size: 1.3rem;
    font-weight: 700;
}

.mcq-level-header.basic {
    background: linear-gradient(135deg, #e8f4fd 0%, #d4ebfa 100%);
    color: #e76f00;
    border-left: 5px solid #e76f00;
}

.mcq-level-header.tricky {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    color: #c62828;
    border-left: 5px solid #e65100;
}

.question-card.tricky-question {
    border-left-color: rgba(230, 81, 0, 0.85);
}

.question-card.tricky-question .question-number {
    background-color: #e65100;
}

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