/* General Body Styles */
body {
    font-family: "Roboto", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #3c4043; /* Dark gray for text */
    background-color: #ffffff; /* White background */
    margin: 0;
    padding: 0;
}

/* Main Content Container */
.main-container { /* Renamed from .container to avoid conflicts if original files used .container differently */
    max-width: 900px; /* Slightly wider for a modern feel */
    margin: 20px auto; /* Centered with some top/bottom margin */
    padding: 24px;    /* Google often uses multiples of 8px for padding */
    background-color: #ffffff;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400; /* Regular weight for headings, common in Google style */
    color: #202124;   /* Slightly darker for headings */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2em; /* Approx 32px */
    border-bottom: 1px solid #dadce0; /* Subtle border */
    padding-bottom: 0.3em;
    margin-top: 0; /* Usually no top margin for page title H1 */
}

h2 {
    font-size: 1.625em; /* Approx 26px */
    margin-top: 2em;
}

h3 {
    font-size: 1.375em; /* Approx 22px */
}

h4 {
    font-size: 1.125em; /* Approx 18px */
}

/* Paragraphs */
p {
    margin-bottom: 1em;
}

/* Links */
a {
    color: #1a73e8; /* Google's standard blue link color */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #174ea6; /* Darker blue on hover */
}

a:visited {
    color: #673ab7; /* A purple for visited links, can be adjusted */
}

/* Lists */
ul, ol {
    padding-left: 20px;
    margin-bottom: 1em;
}

li {
    margin-bottom: 0.5em;
}

/* Code Blocks and Inline Code */
pre {
    background-color: #f8f9fa; /* Light gray background for code blocks */
    border: 1px solid #dadce0;   /* Subtle border */
    border-radius: 4px;
    padding: 1em;
    overflow-x: auto;
    white-space: pre-wrap;       /* Wrap long lines but preserve formatting */
    word-wrap: break-word;
    font-family: "Roboto Mono", "Consolas", "Menlo", "Courier New", monospace;
    font-size: 0.875em; /* Approx 14px */
    line-height: 1.5;
}

code { /* Inline code */
    font-family: "Roboto Mono", "Consolas", "Menlo", "Courier New", monospace;
    background-color: #f1f3f4; /* Slightly different gray for inline code */
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.875em;
    color: #3c4043;
}

pre code { /* Reset styles for code inside pre, as pre handles most of it */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit; /* Inherit font-size from pre */
}

/* Specific for command class within pre, if used */
pre code.command {
    color: #1a73e8; /* Blue for commands, for example */
    font-weight: bold;
}

/* Sections - for general structure, can be adapted */
.section { /* Assuming this class is used in the HTML */
    margin-bottom: 2em;
    padding-top: 1em;
}

.section:not(:first-child) {
    border-top: 1px solid #e0e0e0; /* Separator line between sections */
}

/* Notes, Alerts, Info Boxes - Example Style */
.note, .prerequisites, .guideline-section, .concept-section, .task-section, .model-section, .pyspark-section, .redis-section, .integration-section, .flask-section, .api-section, .echarts-section {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 1em 1.5em;
    border-radius: 4px;
    border-left-width: 4px;
    border-left-style: solid;
}

.note { /* General note style */
    background-color: #e8f0fe; /* Light blue background */
    border-left-color: #1a73e8; /* Blue left border */
}

/* Styles for specific 'note' like boxes from the courses, making them consistent */
.prerequisites {
    background-color: #f1f3f4; /* Light gray */
    border-left-color: #70757a; /* Darker gray */
}
.guideline-section, .concept-section, .task-section, .model-section, .pyspark-section, .redis-section, .integration-section, .flask-section, .api-section, .echarts-section {
    background-color: #f8f9fa; /* Very light gray */
    border-left-color: #1a73e8; /* Default to blue, can be overridden if needed by specific course pages later */
}

/* For index.html list styling */
.course-index-list {
    list-style-type: decimal;
    font-size: 1.1em;
}
.course-index-list li {
    margin-bottom: 0.8em;
}

/* For course specific colored borders if needed to be kept from original */
/* Example: .pyspark-section { border-left-color: #F5A623; } */
/* Example: .redis-section { border-left-color: #DC382C; } */
/* These can be added if the distinct left border colors per course are desired over a unified one */

/* Responsive design for code blocks if they become too wide */
@media (max-width: 600px) {
    pre {
        white-space: pre-wrap; /* Ensure wrapping on small screens */
    }
    .main-container {
        margin: 0;
        padding: 16px;
    }
}

/* Chinese font considerations - already in body, but good to be mindful */
body[lang="zh-CN"] {
    font-family: "Roboto", "Noto Sans SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;
}

h1[lang="zh-CN"], h2[lang="zh-CN"], h3[lang="zh-CN"], h4[lang="zh-CN"], h5[lang="zh-CN"], h6[lang="zh-CN"] {
    font-weight: 500; /* Slightly bolder for Chinese headings for better readability */
}