/* Custom styles to complement Tailwind CSS */

/* Navigation styles */
.nav-link {
    @apply text-black dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200 font-medium;
}

.nav-link.active {
    @apply text-black dark:text-white font-semibold border-b-2 border-black dark:border-white;
}

/* Typography improvements */
.prose {
    color: #374151;
}

.dark .prose {
    color: #d1d5db;
}

.prose h1 {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 1.5rem !important;
    margin-top: 0 !important;
}

.prose h2 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin-bottom: 1rem !important;
    margin-top: 2rem !important;
}

.prose h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin-bottom: 0.75rem !important;
    margin-top: 1.5rem !important;
}

.prose h4 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 1.25rem !important;
}

.prose h5 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 1rem !important;
}

.prose h6 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 1rem !important;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
    color: #ffffff !important;
}

.prose p {
    margin-bottom: 1.25rem !important;
    line-height: 1.75 !important;
}

.prose p + p {
    margin-top: 1.25rem !important;
}

.prose ul, .prose ol {
    margin-bottom: 1.25rem !important;
    margin-left: 1.5rem !important;
    padding-left: 0.5rem !important;
}

.prose ul {
    list-style-type: disc !important;
    list-style-position: outside !important;
}

.prose ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
}

.prose li {
    margin-bottom: 0.5rem !important;
    margin-left: 0 !important;
    padding-left: 0.25rem !important;
    display: list-item !important;
}

/* Remove extra spacing from paragraphs inside list items */
.prose li p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.prose li p + p {
    margin-top: 0.5rem !important;
}

.prose ul ul {
    list-style-type: circle;
    @apply ml-6 mt-2;
}

.prose ul ul ul {
    list-style-type: square;
}

.prose blockquote {
    @apply border-l-4 border-gray-200 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-6;
}

.prose code {
    @apply bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-1 py-0.5 rounded text-sm;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

.prose pre {
    background-color: #f9fafb !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    overflow-x: auto !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    border: 1px solid #e5e7eb !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
}

.dark .prose pre {
    background-color: #111827 !important;
    border-color: #374151 !important;
}

.prose pre code {
    background: transparent !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    color: inherit;
}

/* Code block with syntax highlighting */
.prose .codehilite {
    background-color: #f9fafb !important;
    border-radius: 0.5rem !important;
    overflow-x: auto !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    border: 1px solid #e5e7eb !important;
}

.dark .prose .codehilite {
    background-color: #111827 !important;
    border-color: #374151 !important;
}

.prose .codehilite pre {
    border: 0 !important;
    margin: 0 !important;
}

/* Spacing between different element types */
.prose p + .codehilite,
.prose .codehilite + p,
.prose h2 + p,
.prose h3 + p,
.prose h4 + p {
    margin-top: 1rem !important;
}

.prose img {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Syntax highlighting colors - Light mode */
.prose .codehilite .k, /* keywords (def, class, return, etc.) */
.prose .codehilite .kn, /* keyword namespace */
.prose .codehilite .kd { /* keyword declaration */
    color: #0000ff;
    font-weight: bold;
}

.prose .codehilite .kc { /* keyword constant (True, False, None) */
    color: #0000ff;
    font-weight: bold;
}

.prose .codehilite .s, /* strings */
.prose .codehilite .s1, /* single-quoted strings */
.prose .codehilite .s2, /* double-quoted strings */
.prose .codehilite .sd, /* docstrings */
.prose .codehilite .se { /* string escape */
    color: #a31515;
}

.prose .codehilite .c, /* comments */
.prose .codehilite .c1, /* single-line comments */
.prose .codehilite .cm { /* multi-line comments */
    color: #008000;
    font-style: italic;
}

.prose .codehilite .nc { /* class names */
    color: #267f99;
    font-weight: 600;
}

.prose .codehilite .nf, /* function names */
.prose .codehilite .fm { /* magic function names (__init__, etc.) */
    color: #795e26;
}

.prose .codehilite .n { /* regular names (variables) */
    color: #001080;
}

.prose .codehilite .mi, /* integers */
.prose .codehilite .mf { /* floats */
    color: #098658;
}

.prose .codehilite .nd { /* decorators (@) */
    color: #aa22ff;
}

.prose .codehilite .bp { /* built-in pseudo (self, cls) */
    color: #0000ff;
    font-style: italic;
}

.prose .codehilite .nb { /* built-in names (print, len, etc.) */
    color: #0000ff;
}

.prose .codehilite .o, /* operators (+, -, *, etc.) */
.prose .codehilite .ow { /* operator words (and, or, in, is) */
    color: #000000;
}

.prose .codehilite .p { /* punctuation (brackets, commas) */
    color: #000000;
}

.prose .codehilite .w { /* whitespace */
    color: transparent;
}

/* Syntax highlighting colors - Dark mode */
.dark .prose .codehilite .k,
.dark .prose .codehilite .kn,
.dark .prose .codehilite .kd,
.dark .prose .codehilite .kc {
    color: #569cd6;
    font-weight: bold;
}

.dark .prose .codehilite .s,
.dark .prose .codehilite .s1,
.dark .prose .codehilite .s2,
.dark .prose .codehilite .sd,
.dark .prose .codehilite .se {
    color: #ce9178;
}

.dark .prose .codehilite .c,
.dark .prose .codehilite .c1,
.dark .prose .codehilite .cm {
    color: #6a9955;
    font-style: italic;
}

.dark .prose .codehilite .nc {
    color: #4ec9b0;
    font-weight: 600;
}

.dark .prose .codehilite .nf,
.dark .prose .codehilite .fm {
    color: #dcdcaa;
}

.dark .prose .codehilite .n {
    color: #9cdcfe;
}

.dark .prose .codehilite .mi,
.dark .prose .codehilite .mf {
    color: #b5cea8;
}

.dark .prose .codehilite .nd {
    color: #c586c0;
}

.dark .prose .codehilite .bp {
    color: #569cd6;
    font-style: italic;
}

.dark .prose .codehilite .nb {
    color: #4ec9b0;
}

.dark .prose .codehilite .o,
.dark .prose .codehilite .ow {
    color: #d4d4d4;
}

.dark .prose .codehilite .p {
    color: #d4d4d4;
}

.dark .prose .codehilite .w {
    color: transparent;
}

/* Link styles */
.prose a {
    @apply text-black underline hover:text-gray-600 transition-colors;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .prose {
        @apply text-sm;
    }

    .prose h1 {
        @apply text-xl;
    }

    .prose h2 {
        @apply text-lg;
    }

    .prose h3 {
        @apply text-base;
    }

    .prose h4 {
        @apply text-sm;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .prose {
        @apply text-base;
    }

    .prose h1 {
        @apply text-2xl;
    }

    .prose h2 {
        @apply text-xl;
    }

    .prose h3 {
        @apply text-lg;
    }

    .prose h4 {
        @apply text-base;
    }
}

/* Enhanced mobile navigation */
@media (max-width: 640px) {
    #mobile-menu {
        @apply px-4 pb-4;
    }
    
    #mobile-menu a {
        @apply block py-3 text-base;
    }
}

/* Right-to-left language support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .prose {
    text-align: right;
}

[dir="rtl"] .prose h1,
[dir="rtl"] .prose h2,
[dir="rtl"] .prose h3,
[dir="rtl"] .prose h4,
[dir="rtl"] .prose h5,
[dir="rtl"] .prose h6 {
    text-align: right;
}

/* Language-specific fonts */
.font-chinese {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.font-uyghur {
    font-family: 'Noto Sans', 'Alkatip Basma Tom', 'UKIJ Tuz Tom', 'Scheherazade', serif;
}

/* Focus states for accessibility */
.nav-link:focus,
button:focus,
a:focus {
    @apply outline-none ring-2 ring-gray-500 ring-opacity-50;
}

/* Smooth transitions */
* {
    @apply transition-colors duration-200;
}

/* Line clamp utility for text truncation */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}