/* Traditional CSS Organization - semantic + snake_case */

/* Base Styles */
body {
    font-family: "Microsoft YaHei", "SimHei", "STHeiti", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f0;
    color: #2c2c2c;
    line-height: 1.75em;
}

/* Header Styles */
#site_header {
    background: linear-gradient(to bottom, #8b4513, #a0522d);
    color: #fff8dc;
    padding: 2.5em 5%;
    box-shadow: 0 0.25em 1em rgba(0,0,0,0.3);
}

#main_title {
    font-size: 2.8em;
    margin: 0;
    text-align: center;
    font-weight: 700;
    text-shadow: 0.15em 0.15em 0.3em rgba(0,0,0,0.5);
}

#site_tagline {
    text-align: center;
    font-size: 1.2em;
    margin: 0.8em 0 0;
    font-style: italic;
    opacity: 0.9;
}

/* Main Content Container */
#main_content {
    max-width: 56em;
    margin: 3em auto;
    padding: 0 5%;
}

/* Word Card Styles */
article.word_entry {
    background: #ffffff;
    border-radius: 0.5em;
    padding: 2.5em;
    box-shadow: 0 0.5em 2em rgba(0,0,0,0.1);
    border-left: 0.6em solid #8b4513;
}

.english_word {
    font-size: 3.2em;
    color: #8b4513;
    margin: 0 0 0.3em;
    font-weight: 700;
    font-family: Georgia, serif;
}

.pronunciation {
    font-size: 1.4em;
    color: #666666;
    font-style: italic;
    margin: 0 0 1.2em;
}

/* Section Headers */
.section_header {
    font-size: 1.6em;
    color: #a0522d;
    margin: 1.8em 0 0.8em;
    padding-bottom: 0.4em;
    border-bottom: 0.15em solid #d2b48c;
    font-weight: 600;
}

/* Definition and Content Sections */
.definition_text {
    font-size: 1.15em;
    color: #2c2c2c;
    margin: 0.6em 0;
    padding-left: 1.5em;
    line-height: 1.8em;
}

.etymology_content {
    background: #faf8f3;
    padding: 1.5em;
    border-left: 0.4em solid #d2b48c;
    margin: 1em 0;
    font-size: 1.05em;
    color: #4a4a4a;
}

/* Example Lists */
.usage_examples {
    list-style: none;
    padding: 0;
    margin: 1em 0;
}

.example_item {
    background: #f9f9f9;
    padding: 1em 1.5em;
    margin: 0.8em 0;
    border-left: 0.3em solid #a0522d;
    font-size: 1.05em;
}

.english_sentence {
    color: #2c2c2c;
    font-style: italic;
    display: block;
    margin-bottom: 0.5em;
}

.chinese_translation {
    color: #666666;
    display: block;
}

/* Related Words Section */
.related_words_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
    gap: 1em;
    margin: 1.5em 0;
}

.related_word_card {
    background: #faf8f3;
    padding: 1em;
    border-radius: 0.4em;
    border: 0.1em solid #d2b48c;
}

.related_word_title {
    font-weight: 600;
    color: #8b4513;
    margin-bottom: 0.4em;
    font-size: 1.1em;
}

.related_word_meaning {
    color: #4a4a4a;
    font-size: 0.95em;
}

/* Word Details Box */
.word_details {
    background: linear-gradient(135deg, #8b4513, #a0522d);
    color: #fff8dc;
    padding: 1.5em;
    border-radius: 0.5em;
    margin: 2em 0;
}

.detail_row {
    margin: 0.8em 0;
    font-size: 1.05em;
}

.detail_label {
    font-weight: 600;
    display: inline-block;
    min-width: 7em;
}

/* Footer Styles */
#site_footer {
    background: #2c2c2c;
    color: #d2b48c;
    text-align: center;
    padding: 2em 5%;
    margin-top: 4em;
}

.footer_text {
    margin: 0;
    font-size: 0.95em;
}

/* Responsive Design */
@media (max-width: 48em) {
    #main_title {
        font-size: 2em;
    }

    .english_word {
        font-size: 2.4em;
    }

    article.word_entry {
        padding: 1.5em;
    }

    .related_words_grid {
        grid-template-columns: 1fr;
    }
}