/* 
 * 2026 Daegu International Vocal Competition
 * Luxury Document Design System
 */

:root {
    --primary-navy: #0A192F;
    --primary-gold: #C6A87C;
    --bg-light: #FDFBF7;
    --bg-paper: #ffffff;
    --text-dark: #333333;
    --text-medium: #666666;
    --text-light: #ffffff;
    --sidebar-width: 280px;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Pretendard', sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-paper);
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.bg-light {
    background-color: var(--bg-light) !important;
}

/* Header */
.doc-header {
    height: 80px;
    background-color: var(--bg-paper);
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.05); */
    /* Handled by Bootstrap border-bottom */
    /* z-index: 1000; */
}

/* Header inner content alignment handled by Bootstrap classes */
.logo-text {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--primary-navy);
    letter-spacing: 0.05em;
}

.doc-title {
    font-size: 0.95rem;
    /* font-weight: 500; */
}

.lang-btn {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.lang-btn:hover {
    background: var(--primary-gold);
    color: var(--primary-navy);
    border-color: var(--primary-gold);
}

/* Sidebar TOC */
.toc {
    background: var(--bg-paper);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    /* Sticky is handled by Bootstrap .sticky-top in HTML */
}

.toc ul {
    list-style: none;
    /* Bootstrap .list-unstyled */
}

.toc a {
    text-decoration: none;
    color: var(--text-medium);
    font-size: 0.95rem;
    transition: color 0.2s;
}

.toc a:hover {
    color: var(--primary-gold);
}

/* Main Content (Paper Look) */
/* The wrapping works via Bootstrap column, but we might want to ensure the paper look is applied to the content wrapper */
/* See doc-content wrapper in HTML */

/* Typography & Content Styling */
/* .doc-cover styles for centered title */

.doc-cover h1 {
    font-family: var(--font-serif);
    color: var(--primary-navy);
    line-height: 1.3;
}

.doc-cover small {
    /* Using Bootstrap classes now */
}

.doc-meta {
    /* font-size handled by Bootstrap classes */
}

.doc-divider {
    border: 0;
    height: 1px;
    background: #000;
    /* color/opacity handled by Bootstrap classes */
}

.doc-section {
    scroll-margin-top: 120px;
    /* Important for sticky header offset */
}

/* Section H2 Styling */
/* Handled by inline styles in HTML for now strictly, or we can add back a class rule if we want global */
/* Leaving specific rules here if they aren't fully covered solely by Bootstrap classes */

/* Tables */
/* Bootstrap .table handles most, just adding custom header color */

.doc-table th {
    background-color: var(--primary-navy) !important;
    color: var(--text-light) !important;
    font-weight: 500;
}

.highlight {
    font-weight: 700;
    color: var(--primary-gold);
}

/* Footer */
/* Handled mostly by Bootstrap utilities */

/* Utility */
.hidden {
    display: none !important;
}