/* tutorial.css */
/* Styles specific to individual tutorial pages */

.tutorial-page {
    padding-top: 120px; /* Adjust for fixed header */
    padding-bottom: 80px;
    min-height: 100vh;
    background-color: var(--background-color); /* Use base background */
    transition: background-color 0.5s ease;
}

/* Adjust padding for smaller header */
@media (max-width: 768px) {
    .tutorial-page {
        padding-top: 80px;
    }
}

.tutorial-container {
    max-width: 900px; /* Limit content width for readability */
    margin: 0 auto; /* Center container */
    padding-left: 15px; /* Add side padding */
    padding-right: 15px;
}

.tutorial-page h1 {
    font-size: 2.8em;
    margin-bottom: 15px;
    text-align: center;
    color: var(--primary-color);
}

.tutorial-intro {
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 50px;
    color: color-mix(in srgb, var(--text-color) 80%, var(--background-color));
}

.tutorial-section {
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
}
.tutorial-section:last-of-type { /* Remove border from last section */
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}


.tutorial-section h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: var(--primary-color);
    border-left: 4px solid var(--primary-color);
    padding-left: 15px;
}

.tutorial-section p,
.tutorial-section li {
    font-size: 1.05em; /* Slightly larger text */
    line-height: 1.8; /* More line spacing */
    color: var(--text-color);
    margin-bottom: 20px;
}

.tutorial-section ul,
.tutorial-section ol {
    margin-left: 25px;
    margin-bottom: 20px;
}

.tutorial-section a {
    text-decoration: none;
    font-weight: 600;
}
.tutorial-section a:hover {
    text-decoration: underline;
}


/* --- Updated Video Player Styling --- */
.video-player-container {
    margin: 30px auto;
    max-width: 750px; /* Limit video player width */
    /* Remove styles related to the old 'a' tag and overlay */
}

.video-player-container video {
    display: block; /* Ensure block layout */
    width: 100%;   /* Make video fill container width */
    height: auto;  /* Maintain aspect ratio */
    border-radius: 12px; /* Consistent styling */
    border: 1px solid var(--border-color);
    box-shadow: var(--card-default-shadow);
    background-color: #000; /* Black background while loading or for letterboxing */
    outline: none; /* Remove default focus outline if desired */
}
/* Optional: Dark mode adjustments if needed */
.dark-mode .video-player-container video {
     border-color: var(--border-color); /* Ensure border updates */
     box-shadow: var(--card-default-shadow); /* Ensure shadow updates */
}


/* Image Styling (Keep as is) */
.image-container {
    margin: 30px auto;
    max-width: 750px; /* Limit image width */
    text-align: center;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.dark-mode .image-container img {
     box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}


.image-container .caption {
    font-size: 0.9em;
    color: color-mix(in srgb, var(--text-color) 70%, var(--background-color));
    margin-top: 10px;
    font-style: italic;
}

/* Next Steps / Back Button (Keep as is) */
.next-steps {
    text-align: center;
    border-bottom: none;
    padding-top: 20px;
}

.next-steps .btn {
    margin-top: 20px;
}
.next-steps .btn i {
    margin-right: 8px; /* Space icon and text */
    margin-left: -4px;
}

.rtl-active .tutorial-section h2 {
    border-left: none;
    border-right: 4px solid var(--primary-color);
    padding-left: 0;
    padding-right: 15px;
    text-align: right; /* Explicitly set for h2 if not inherited */
}

.rtl-active .tutorial-section p,
.rtl-active .tutorial-section li {
    /* text-align: right; */ /* If not inheriting from a higher-level .rtl-active rule */
}

.rtl-active .tutorial-section ul,
.rtl-active .tutorial-section ol {
    margin-left: 0;
    margin-right: 25px;
    padding-left: 0; /* Ensure no LTR padding */
    padding-right: 0; /* Reset if you had specific LTR padding on ul/ol */
}


.rtl-active .next-steps .btn i.fa-arrow-left {
    transform: scaleX(1); /* Make it point right for "Back" button */
}

/* Responsive adjustments for tutorial page (Keep as is) */
@media (max-width: 768px) {
    .tutorial-page h1 {
        font-size: 2.2em;
    }
    .tutorial-intro {
        font-size: 1.1em;
        margin-bottom: 40px;
    }
    .tutorial-section h2 {
        font-size: 1.8em;
    }
    .tutorial-section p,
    .tutorial-section li {
        font-size: 1em;
    }
    /* Remove old overlay responsive styles if they existed */
}