/* ========== Advanced Content Styles (A2-B2) ========== */

/* Level badges */
.level-badge,
.vocab-level-badge,
.grammar-level-badge,
.rule-level-badge,
.unit-level-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: white;
    margin-right: 8px;
}

.vocab-type {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    margin-left: 4px;
}

/* Separators */
.grammar-separator,
.units-separator {
    padding: 16px 0 8px;
    margin-top: 24px;
    border-top: 2px solid var(--border);
}

.grammar-separator h3,
.units-separator h3 {
    font-size: 1rem;
    color: var(--primary);
    font-weight: 600;
}

/* Grammar level headers */
.grammar-level-header {
    padding: 12px 0 4px;
}

.grammar-level-header h4 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Advanced cards */
.unit-card.advanced,
.grammar-card.advanced {
    border-left: 3px solid var(--primary);
}

.grammar-card.advanced .grammar-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.grammar-card.advanced .grammar-card-header h3 {
    font-size: 0.95rem;
}

/* Focus tags */
.unit-focus-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.focus-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: var(--secondary);
    color: var(--text-primary);
    border-radius: 12px;
}

/* Vocab card details */
.vocab-details {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Rule detail styles */
.rule-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.rule-content {
    margin-bottom: 20px;
    line-height: 1.7;
}

.rule-warning {
    background: var(--warning-bg);
    color: var(--warning);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    border-left: 3px solid var(--warning);
}

.rule-examples,
.rule-vocabulary,
.rule-pedagogy,
.verb-family,
.verb-examples,
.noun-examples,
.declension-section,
.conjugation-section,
.postpositions-section {
    margin-bottom: 20px;
}

.rule-examples h4,
.rule-vocabulary h4,
.rule-pedagogy h4,
.verb-family h4,
.verb-examples h4,
.noun-examples h4,
.declension-section h4,
.conjugation-section h4,
.postpositions-section h4 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.rule-example,
.verb-example,
.noun-example,
.lesson-example {
    padding: 10px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.example-geo,
.verb-example .geo,
.noun-example .geo,
.lesson-example .geo {
    font-family: var(--font-geo);
    font-size: 1.1rem;
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
}

.example-fr,
.verb-example .fr,
.noun-example .fr,
.lesson-example .fr {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: block;
}

.example-gloss,
.verb-example .gloss,
.lesson-example .gloss {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    display: block;
    margin-top: 4px;
}

.example-note {
    font-size: 0.75rem;
    color: var(--info);
    display: block;
    margin-top: 4px;
}

/* Pedagogy notes */
.rule-pedagogy ul {
    list-style: none;
    padding-left: 0;
}

.rule-pedagogy li {
    padding: 6px 0 6px 20px;
    position: relative;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.rule-pedagogy li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* Conjugation and declension tables */
.conjugation-table,
.declension-table,
.grammar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.conjugation-table td,
.declension-table td,
.grammar-table td,
.grammar-table th {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
}

.conjugation-table td:first-child,
.declension-table td:first-child {
    color: var(--text-secondary);
    font-size: 0.8rem;
    width: 40%;
}

.conjugation-table td.geo,
.declension-table td.geo {
    font-family: var(--font-geo);
    font-size: 1.05rem;
    color: var(--primary);
}

.conjugation-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 8px;
}

/* Verb family / preverbs */
.verb-base {
    padding: 8px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.verb-base .geo {
    font-family: var(--font-geo);
    font-size: 1.1rem;
    color: var(--primary);
}

.preverb-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preverb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: var(--bg-main);
    border-radius: var(--radius-sm);
}

.preverb-item .geo {
    font-family: var(--font-geo);
    font-size: 1rem;
    color: var(--primary);
    min-width: 100px;
}

.preverb-item .preverb {
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 500;
    min-width: 50px;
}

.preverb-item .meaning {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Verb/noun header */
.verb-header,
.noun-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.verb-info,
.noun-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.85rem;
}

.verb-root .geo,
.noun-nominative.geo {
    font-family: var(--font-geo);
    font-size: 1.1rem;
    color: var(--primary);
}

.verb-class,
.noun-gender {
    padding: 2px 8px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.verb-tag {
    padding: 2px 8px;
    background: var(--info-bg);
    color: var(--info);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.verb-note {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Postposition examples */
.postposition-example {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-main);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
}

.postposition-example .geo {
    font-family: var(--font-geo);
    font-size: 1rem;
    color: var(--primary);
    min-width: 100px;
}

.postposition-example .post {
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 500;
}

.postposition-example .meaning {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Unit focus */
.unit-focus {
    margin-bottom: 20px;
}

.unit-focus ul {
    list-style: none;
    padding: 0;
}

.unit-focus li {
    padding: 8px 0 8px 24px;
    position: relative;
    color: var(--text-secondary);
}

.unit-focus li::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: var(--primary);
    font-weight: bold;
}

/* Lesson cards in advanced units */
.lesson-card,
.rule-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.lesson-card:hover,
.rule-link:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
}

.lesson-card h5 {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.lesson-card p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Lesson table */
.lesson-table {
    margin: 20px 0;
    overflow-x: auto;
}

.grammar-table {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.grammar-table th {
    background: var(--primary);
    color: white;
    font-weight: 500;
    text-align: left;
}

.grammar-table tbody tr:nth-child(even) {
    background: var(--bg-hover);
}

/* Case tag */
.case-tag {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--secondary);
    border-radius: var(--radius-sm);
    margin-left: 8px;
}

/* Unit exercises preview */
.unit-exercises-preview {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.unit-exercises-preview h4 {
    margin-bottom: 12px;
    color: var(--text-secondary);
}

/* Unit rules section */
.unit-rules {
    margin-bottom: 20px;
}

.unit-rules h4 {
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Unit lessons section */
.unit-lessons {
    margin-bottom: 20px;
}

.unit-lessons h4 {
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Vocabulary actions bar */
.vocab-actions-bar {
    padding: 12px 16px;
    margin-bottom: 8px;
}

.vocab-flashcard-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.vocab-flashcard-btn svg {
    flex-shrink: 0;
}

/* Exercise prompt meaning */
.exercise-prompt-meaning {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 4px;
}