/* ==========================================================================
   Base Styles & Resets
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%; /* Base font size */
    line-height: 1.5;
    font-family: sans-serif; /* Basic fallback font */
    color: #333;
}

body.skin-vector {
    background-color: #f9f9f9;
    font-family: Arial, Helvetica, sans-serif; /* More specific font stack */
}

a {
    color: #0645ad; /* Standard link blue */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: #551a8b; /* Standard visited link purple */
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: bold;
    line-height: 1.3;
    color: #000;
}

h1 { font-size: 1.8em; border-bottom: 1px solid #aaa; padding-bottom: 0.3em; }
h2 { font-size: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 0.2em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; font-weight: bold; } /* Used in panel */

p {
    margin-bottom: 1em;
}

ul, ol {
    margin-left: 1.5em; /* Indentation for lists */
    margin-bottom: 1em;
}

li {
    margin-bottom: 0.5em;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevent extra space below image */
    margin: 0.5em 0;
}

b, strong {
    font-weight: bold;
}

/* Utility Classes */
.clearer {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0;
}

/* ==========================================================================
   Layout Structure
   ========================================================================== */

#page-container {
    max-width: 1200px; /* Limit content width */
    margin: 0 auto; /* Center the container */
    padding: 0 1em; /* Padding on the sides */
    position: relative; /* For potential absolute positioning of sidebar */
    display: flex; /* Use flexbox for content/sidebar layout */
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

#content {
    flex: 1; /* Main content takes available space */
    background-color: #fff;
    border: 1px solid #a7d7f9;
    padding: 1.5em;
    margin-right: 1em; /* Space between content and panel */
    margin-bottom: 1em;
    min-width: 0; /* Prevent flexbox overflow issues */
}

#panel {
    width: 200px; /* Fixed width sidebar */
    margin-bottom: 1em;
}

/* Header */
#site-header {
    background-color: #f0f0f0; /* Light grey background */
    padding: 0.5em 1em;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1em;
    text-align: center; /* Center logo if it's the only item */
}

#site-header .logo {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}
#site-header .logo:hover {
    text-decoration: none;
}

/* Footer */
#footer {
    clear: both; /* Ensure footer is below floated elements if any */
    border-top: 1px solid #ccc;
    padding: 1em;
    margin-top: 1em;
    font-size: 0.9em;
    color: #666;
    text-align: center;
}

#footer-info {
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer-info li {
    display: inline-block; /* Display items side-by-side */
    margin: 0 1em;
}

#footer .license bdi {
    font-weight: normal;
}

/* ==========================================================================
   Content Area (#content)
   ========================================================================== */

/* Breadcrumbs */
.catlinks {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px dashed #ccc;
}

.catlinks .bchead {
    font-weight: bold;
}

.catlinks a {
    color: #0645ad;
}

/* Main Content Wrapper */
#bodyContent {
    /* Specific styles if needed, beyond #content */
}

/* Table of Contents */
#dw__toc {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    padding: 1em;
    margin-bottom: 1.5em;
    max-width: 400px; /* Limit width */
    float: right; /* Float to the right */
    margin-left: 1em;
    font-size: 0.9em;
}

#dw__toc h3.toggle {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    text-align: center;
    cursor: pointer; /* Indicate it might be collapsible */
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.3em;
}

#dw__toc ul.toc {
    list-style: none;
    margin: 0;
}

#dw__toc ul.toc ul.toc {
    margin-left: 1.5em; /* Indent nested lists */
}

#dw__toc li {
    margin-bottom: 0.3em;
}

#dw__toc .li { /* The div inside the li */
    /* Add styles if needed */
}

#dw__toc a {
    text-decoration: none;
}
#dw__toc a:hover {
    text-decoration: underline;
}

/* Content Headings & Sections */
.sectionedit1, .sectionedit2 {
    /* Shared styles for headings if any */
}

h1.sectionedit1 { /* Style for the main page title H1 */
   /* Already styled by general H1 rules */
}

h2.sectionedit2 { /* Style for H2 sections */
    /* Already styled by general H2 rules */
    margin-top: 2em; /* More space before H2 sections */
}

/* Div Levels (often contain content sections) */
.level1, .level2 {
    margin-bottom: 1em;
    /* Add padding/margins if needed to visually group content */
}

/* Specific Content Styling from ciyu.html, wen.html, pinyin.html */
.level2 p b a,
.level2 p b { /* Word/Pinyin definition lists */
    color: #000; /* Make the term black */
}
.level2 p b a {
    color: #0645ad; /* Keep the link blue */
}
.level2 p b a:hover {
    text-decoration: underline;
}

/* Links inside dictionary definitions (getlink, getbaidulink, etc.) */
.level2 p a {
   /* Standard link styles apply */
}

/* Lists like 组成, 接龙, 组词, 近/反义词, 热门汉语, 大家都在问 */
.level2 li.items,
.level2 li.popular-item {
    list-style: none; /* Remove default bullet */
    display: inline-block; /* Display side-by-side */
    margin-right: 1em; /* Spacing between items */
    margin-bottom: 0.5em;
    padding: 0.2em 0.5em; /* Add some padding */
    background-color: #eee; /* Light background */
    border-radius: 3px; /* Rounded corners */
}

.level2 li.items a,
.level2 li.popular-item a {
    text-decoration: none;
}

.level2 li.items a:hover,
.level2 li.popular-item a:hover {
    text-decoration: underline;
}

/* Index.html lists (名人, 生肖) - handle li within p */
.level2 p li { /* Target the li directly */
    list-style: none; /* Remove default bullet */
    margin-left: 0; /* Reset indentation */
    margin-bottom: 0.3em;
}
.level2 p li a {
    /* Standard link styles apply */
}


/* Style for dictionary source headings (ciyu.html) */
.level2 h3 {
    margin-top: 1.5em;
    margin-bottom: 0.3em;
    font-size: 1.1em;
    color: #444;
    font-style: italic;
}

/* Horizontal Rule imitation */
.hr {
    border: 0;
    height: 1px;
    background-color: #ddd;
    margin: 1.5em 0;
}


/* ==========================================================================
   Sidebar/Panel (#panel)
   ========================================================================== */

#p-logo {
    margin-bottom: 1em;
    text-align: center;
}

#p-logo a {
    display: block;
    width: 150px; /* Adjust as needed */
    height: 150px; /* Adjust as needed */
    margin: 0 auto;
    text-indent: -9999px; /* Hide text if using background image */
    /*
       The background-image URL comes from inline style in HTML.
       You might want to centralize it here if possible,
       or leave it inline if it's truly dynamic per template.
       Example: background: url(/path/to/logo.png) no-repeat center center;
    */
    border: 1px solid #ccc;
    background-size: contain; /* Adjust as needed */
}

#p-tb.portal {
    margin-bottom: 1em;
    border: 1px solid #a7d7f9;
    background-color: #f9f9f9;
}

#p-tb h5 {
    background-color: #eaf3fc;
    padding: 0.5em 1em;
    margin: 0;
    border-bottom: 1px solid #a7d7f9;
    font-size: 0.9em;
}

#p-tb .body {
    padding: 1em;
}

#p-tb .dokuwiki ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#p-tb .dokuwiki li {
    margin-bottom: 0.5em;
}

#p-tb .dokuwiki li a {
    text-decoration: none;
}

#p-tb .dokuwiki li a:hover {
    text-decoration: underline;
}

/* Navigation Tabs (in #head, seems related to DokuWiki templates) */
#head {
    /* Position or style #head container if needed */
}

#left-navigation {
    /* Style navigation container if needed */
}

#p-namespaces.vectorTabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #a7d7f9;
    overflow: hidden; /* Contain floats */
}

#p-namespaces.vectorTabs li {
    float: left;
    margin: 0 0.2em 0 0;
}

#p-namespaces.vectorTabs li a {
    display: block;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: 1px solid #a7d7f9;
    border-bottom: none;
    text-decoration: none;
    border-radius: 4px 4px 0 0; /* Rounded top corners */
}

#p-namespaces.vectorTabs li.selected a {
    background-color: #fff; /* Active tab matches content background */
    border-bottom: 1px solid #fff; /* Hide bottom border */
}

#p-namespaces.vectorTabs li a:hover {
    background-color: #eaf3fc;
    text-decoration: none;
}


/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    body {
        font-family: serif; /* Use serif fonts for printing */
        color: #000;
        background: none;
    }

    #site-header, #panel, #footer, #head, #page-base, #head-base, .noprint, #dw__toc {
        display: none !important; /* Hide non-essential elements */
    }

    #page-container {
        max-width: 100%;
        margin: 0;
        padding: 0;
        display: block; /* Override flex */
    }

    #content {
        border: none;
        padding: 0;
        margin: 0;
        width: 100%;
        flex: none; /* Override flex */
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    /* Show URL for links in print */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
        color: #555;
    }
    /* Avoid showing internal links */
     a[href^="/"]:after {
        content: "";
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    ul, ol, p {
        orphans: 3;
        widows: 3;
    }
}

/* ==========================================================================
   Responsive Styles (Basic Example)
   ========================================================================== */

@media (max-width: 768px) {
    #page-container {
        flex-direction: column; /* Stack content and sidebar */
        padding: 0 0.5em;
    }

    #content {
        margin-right: 0; /* Remove margin when stacked */
        padding: 1em;
    }

    #panel {
        width: 100%; /* Full width sidebar */
        margin-top: 1em;
    }

    #dw__toc {
        float: none; /* Unfloat TOC */
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Adjust font sizes for smaller screens if needed */
    html {
        font-size: 95%;
    }
}