/* Ensure HTML and body take full height and base styles */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; /* Keep height for initial fixed cover page */
    font-family: Arial, sans-serif; /* Consolidated font-family here */
    background-color: #f4f4f4; /* Consolidated background-color here */
    box-sizing: border-box; /* Consistent box-sizing */
}

/* Cover Page Styles */
#cover-page {
    position: fixed; /* Stays on top */
    top: 0;
    left: 0;
    width: 100vw; /* Use 100vw for full viewport width */
    height: 100vh; /* Use 100vh to ensure it always matches viewport height */
    background: linear-gradient(to bottom right, #f0f4f8, #c8d9e6); /* Light gradient background */
    
    /* REMOVED FLEXBOX CENTERING */
    display: block; /* Change from flex to block for simple flow */
    /* justify-content: center; */ /* REMOVED */
    /* align-items: center; */    /* REMOVED */
    
    text-align: left; /* IMPORTANT: Align text to the left within the page */
    padding: 20px; /* Increased padding around the entire cover page content */
    box-sizing: border-box;
    z-index: 1000; /* Ensure it's on top */
    color: #333;
    overflow-y: auto; /* Allow the cover page content to scroll if it gets too tall */
}

/* New Rule: Control direct children width and add horizontal margin */
#cover-page > * {
    max-width: 1000px; /* Set a maximum width for content inside the cover page */
    width: 100%;    /* Take full available width up to max-width */
    margin-left: auto; /* IMPORTANT: Auto margins will center the block within #cover-page if max-width is less than 100% */
    margin-right: auto;/* IMPORTANT: Auto margins will center the block within #cover-page if max-width is less than 100% */
    box-sizing: border-box; /* Ensures padding/border are included in the element's total width and height */
    margin-top: 0; /* Reset default margins for direct children */
    margin-bottom: 0; /* Reset default margins for direct children */
}


/* Also ensure images within the cover page scale down */
#cover-page img {
    max-width: 100%;
    height: auto;
}

#cover-page h1 {
    font-size: clamp(1.5em, 4vw, 2.0em); /* Use clamp for responsive H1 */
    margin-bottom: 10px; /* Space below h1 */
    color: #0056b3; /* A strong blue */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    text-align: left; /* Align title to left */
}

#cover-page p {
    font-size: clamp(0.9em, 2.5vw, 1.2em); /* Use clamp for responsive P */
    line-height: 1.6;
    max-width: 1000px; /* Keep max-width for readability */
    margin-bottom: 15px; /* Space below paragraph before the list */
    color: #555;
    text-align: left; /* IMPORTANT CHANGE: Align paragraph text to left */
}

/* Styling for the Course Details List on the Cover Page */
#cover-page #list {
    background-color: rgba(255, 255, 255, 0.7); /* Slightly translucent white background */
    padding: 15px 20px; /* Slightly reduced padding */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow */
    margin-top: 15px; /* Space from the main description */
    margin-bottom: 0; /* Remove margin-bottom here, button will have its own top margin */
    max-width: 1000px; /* Limit width to keep it neat */
    width: 100%; /* Take full width of parent (which has max-width of 1000px) */
    text-align: left; /* Keep this as 'left' for readability of list items */
    overflow-wrap: break-word; /* Ensures long words break to fit */
    word-wrap: break-word;      /* Legacy for older browsers */
    box-sizing: border-box; /* Ensures padding/border are included in the element's total width and height */
}

#cover-page #list h3 {
    font-size: clamp(1.2em, 3vw, 1.6em); /* Use clamp for responsive H3 */
    color: #0056b3; /* Consistent blue with the main title */
    margin-top: 0; /* Ensure no extra top margin */
    margin-bottom: 15px; /* Space below heading */
    text-align: left; /* IMPORTANT CHANGE: Align heading to left within its box */
}

#cover-page #list ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    /* IMPORTANT CHANGE: Remove auto margins here, list items will align naturally */
    margin: 0; 
    /* max-width: 450px; */ /* REMOVED: No need to center UL block anymore */

    display: block; /* Change from flex to block */
    /* flex-direction: column; */ /* REMOVED */
    gap: 8px; /* Removed, gap is for flex containers */
}

#cover-page #list li {
    font-size: clamp(0.85em, 2.8vw, 1.1em); /* Min 0.85em, scales with viewport, max 1.1em */
    line-height: 1.5; /* Slightly tighter line height to save vertical space */
    color: #333;
    margin-bottom: 8px; /* Added margin back for li items */
    padding-left: 20px; /* Space for custom bullet */
    position: relative;
    word-break: break-word; /* Breaks words at arbitrary points if needed */
    overflow-wrap: break-word; /* Standard property for breaking long words */
    white-space: normal; /* Ensure text wrapping is not prevented by white-space property */
}

#cover-page #list li:last-child {
    margin-bottom: 0; /* No margin after the last item */
}

/* Custom bullet point for list items */
#cover-page #list li::before {
    content: '•'; /* Unicode character for a bullet */
    color: #28a745; /* Green bullet for emphasis */
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: 0; /* Keep top at 0, padding-top on li will create space */
}

#start-course-btn {
    padding: 15px 30px;
    font-size: clamp(1em, 2.5vw, 1.5em); /* Use clamp for responsive button text */
    font-weight: bold;
    color: #fff;
    background-color: #28a745; /* Green for start action */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;

    display: block; /* Make it a block-level element to apply margin auto */
    max-width: 1000px; /* Set a maximum width for the button (same as other content) */
    width: 100%; /* Allow it to be responsive, taking up to 100% of parent width, but not more than max-width */
    margin: 20px auto 0 auto; /* Add top margin for spacing from list, center horizontally within its defined max-width */
}

#start-course-btn:hover {
    background-color: #218838; /* Darker green on hover */
    transform: translateY(-2px);
}

#start-course-btn:active {
    background-color: #1e7e34;
    transform: translateY(0);
}

/* Ensure app-container is hidden by default until start button is clicked */
#app-container {
    display: none; /* Hide by default */
}

/* --- General App Container Styles --- */
.course-container { /* #app-container has this class */
    padding: 20px;
    max-width: 800px;
    margin: 0px auto; /* Centered with top/bottom margin */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center; /* Added for general content centering */
}

#course-title {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

#lesson-content {
    min-height: 200px;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #eee;
    text-align: left; /* Ensure lesson content text is left-aligned */
    line-height: 1.6;
}

#lesson-content img {
    max-width: 100%;
    height: auto; /* Ensures aspect ratio is maintained */
    display: block; /* Helps with centering if needed, and avoids extra space below */
    margin: 0 auto; /* Centers the image if it's smaller than max-width */
}

/* Styles for specific elements within lessons/quizzes */
.slide p {
    line-height: 1.6;
    margin-bottom: 15px;
}

.slide h3 {
    color: #007bff;
    margin-top: 20px;
    margin-bottom: 10px;
}

.slide ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

.slide li {
    margin-bottom: 5px;
}

.quiz-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px dashed #ccc;
    background-color: #f9f9f9;
    text-align: left;
}

#quiz-question {
    margin-bottom: 20px;
    font-size: 1.1em;
    font-weight: bold;
}

#quiz-options label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

#quiz-options input[type="radio"] {
    margin-right: 8px;
}

#quiz-feedback {
    margin-top: 10px;
    font-weight: bold;
}

.navigation-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.nav-btn,
#submit-quiz-btn,
#submit-final-test-btn,
#downloadCertBtn {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    display: block;
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
}

/* Specific overrides for nav buttons as they are in a flex container */
.nav-btn {
    width: auto;
    margin-top: 0;
}
#submit-quiz-btn, #submit-final-test-btn, #downloadCertBtn {
    width: auto;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}


/* Hover states for buttons */
.nav-btn:hover,
#submit-quiz-btn:hover,
#submit-final-test-btn:hover,
#downloadCertBtn:hover {
    background-color: #0056b3;
}

#timer-display {
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
}

.hidden {
    display: none;
}

#final-test-container {
    margin-top: 30px;
    padding: 20px;
    border: 2px solid #007bff;
    border-radius: 8px;
    background-color: #e9f5ff;
}

#final-test-questions {
    text-align: left;
    margin-bottom: 20px;
}

#final-test-questions .final-test-question {
    background-color: #f0f0f0;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
}

#final-test-questions .final-test-question p {
    font-size: 1.1em;
    margin-bottom: 10px;
    font-weight: bold;
}

#final-test-questions .final-test-question label {
    display: block;
    margin-bottom: 5px;
    cursor: pointer;
}

#final-test-questions .final-test-question input[type="radio"] {
    margin-right: 5px;
}

#certification-area {
    margin-top: 30px;
    padding: 20px;
    border: 2px dashed #28a745;
    border-radius: 10px;
    background-color: #d4edda;
    color: #155724;
    font-size: 1.2em;
    line-height: 1.8;
    text-align: center; /* Ensured content inside is centered */
}

#certification-area h3 {
    color: #28a745;
    margin-bottom: 15px;
}

#certificate-name, #certificate-course-title, #certificate-date {
    font-weight: bold;
    color: #000;
}

#certificateCanvas {
    border: 1px solid #d4edda;
    background-color: #fff;
    margin-bottom: 15px;
    max-width: 100%; /* Ensures canvas scales down on smaller screens */
    height: auto;
}

/* Styles for a disabled button */
#back-btn:disabled,
#next-btn:disabled,
#submit-quiz-btn:disabled,
#submit-final-test-btn:disabled,
#downloadCertBtn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: #cccccc;
    border-color: #999999;
    color: #666666;
    box-shadow: none;
}

/* --- Responsive Design / Mobile-Friendly Styles --- */
@media (max-width: 768px) {
    #cover-page h1 {
        font-size: clamp(1.5em, 4vw, 2em);
    }

    #cover-page p {
        font-size: clamp(0.8em, 2.2vw, 1em);
        text-align: left; /* Re-affirm left alignment for smaller screens */
    }

    #start-course-btn {
        font-size: clamp(1em, 2vw, 1.2em);
        padding: 10px 20px;
    }

    #cover-page #list {
        padding: 15px 20px;
        margin-top: 15px;
        margin-bottom: 25px; /* Adjust as needed for spacing before button */
    }

    #cover-page #list h3 {
        font-size: clamp(1em, 2.5vw, 1.4em);
        text-align: left; /* Re-affirm left alignment for smaller screens */
    }

    #cover-page #list li {
        font-size: clamp(0.8em, 2.2vw, 1em);
        padding-left: 18px;
    }

    /* Main app container adjustments */
    .course-container { /* Applies to #app-container */
        padding: 15px;
        width: 98%;
        margin: 15px auto; /* Adjust margin for smaller screens */
    }

    #course-title {
        font-size: 1.4em;
        margin-bottom: 15px;
    }

    #lesson-content p,
    #lesson-content ul li {
        font-size: 0.9em;
    }

    /* Navigation buttons and submit buttons */
    .nav-btn,
    #submit-quiz-btn,
    #submit-final-test-btn,
    #downloadCertBtn {
        padding: 8px 15px; /* Adjusted padding */
        font-size: 0.9em; /* Adjusted font size */
    }
}

@media (max-width: 480px) {
    #cover-page h1 {
        font-size: clamp(1.2em, 3.5vw, 1.5em);
    }

    #cover-page p {
        font-size: clamp(0.75em, 2vw, 0.9em);
        text-align: left; /* Re-affirm left alignment for smaller screens */
    }

    #start-course-btn {
        font-size: clamp(0.9em, 2.2vw, 1.1em);
        padding: 8px 12px;
    }

    #cover-page #list {
        padding: 10px 15px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    #cover-page #list h3 {
        font-size: clamp(0.9em, 2.2vw, 1.2em);
        text-align: left; /* Re-affirm left alignment for smaller screens */
    }

    #cover-page #list li {
        font-size: clamp(0.7em, 1.8vw, 0.9em);
        padding-left: 14px;
    }

    .course-container { /* Applies to #app-container */
        padding: 10px;
        margin: 10px auto; /* Adjust margin for very small screens */
    }

    #course-title {
        font-size: 1.2em;
    }

    /* Navigation buttons and submit buttons */
    .nav-btn,
    #submit-quiz-btn,
    #submit-final-test-btn,
    #downloadCertBtn {
        padding: 6px 10px; /* Further adjusted padding */
        font-size: 0.8em; /* Further adjusted font size */
    }
}