/* Definice CSS proměnných (barev) */
:root {
    --bg: #ffffff;
    --surface: #f8fafc; /* bg-zinc-50 */
    --text: #18181b;    /* text-zinc-900 */
    --muted: #71717a;   /* text-zinc-500 */
    --accent: #0284c7;  /* text-sky-600 */
    --elev-1: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-subtle: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

body.dark {
    --bg: #18181b;      /* bg-zinc-900 */
    --surface: #27272a; /* bg-zinc-800 */
    --text: #f4f4f5;    /* text-zinc-100 */
    --muted: #a1a1aa;   /* text-zinc-400 */
    --accent: #38bdf8;  /* text-sky-400 */
    --elev-1: 0 1px 3px 0 rgb(255 255 255 / 0.1), 0 1px 2px -1px rgb(255 255 255 / 0.1);
    --shadow-subtle: 0 1px 2px 0 rgb(255 255 255 / 0.05);
}

/* Použití proměnných (i když Tailwind je přepisuje, je to dobrá praxe) */
body {
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 0.3s, color 0.3s;
}

/* Třída 'prose' definuje styly pro obsah generovaný z Markdownu.
   Tailwind má @tailwindcss/typography plugin, ale zde jsou pro ukázku
   základní vlastní styly.
*/
.prose h1, .prose h2, .prose h3 {
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.prose h1 { font-size: 2.25rem; }
.prose h2 { font-size: 1.875rem; border-bottom: 1px solid var(--muted); padding-bottom: 0.25rem; }
.prose h3 { font-size: 1.5rem; }
.prose p { margin-bottom: 1rem; line-height: 1.6; }
.prose a { color: var(--accent); text-decoration: underline; }
.prose code {
    background-color: var(--surface);
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 6px;
}
.prose pre {
    background-color: var(--surface);
    border: 1px solid var(--muted);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
}
.prose pre code {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: 100%;
    border-radius: 0;
}
.prose ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1rem; }
.prose blockquote {
    border-left: 4px solid var(--accent);
    padding-left: 1rem;
    margin-left: 0;
    font-style: italic;
    color: var(--muted);
}

/* Styly pro tmavý motiv třídy 'prose' */
.dark .prose-invert {
    color: var(--text);
}
.dark .prose-invert h1, .dark .prose-invert h2, .dark .prose-invert h3, .dark .prose-invert h4 {
    color: var(--text);
}
.dark .prose-invert a { color: var(--accent); }
.dark .prose-invert code { background-color: var(--surface); }
.dark .prose-invert pre { background-color: var(--surface); border-color: var(--muted); }
.dark .prose-invert blockquote { border-left-color: var(--accent); color: var(--muted); }


/* Aktivní odkaz v navigaci */
#navlist a.active {
    background-color: var(--accent);
    color: white;
    font-weight: 600;
}
/* Tmavý režim pro aktivní odkaz */
body.dark #navlist a.active {
    color: var(--bg); /* Použije tmavé pozadí jako barvu textu pro kontrast */
}

#navlist a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s, color 0.2s;
    color: var(--muted);
    font-weight: 500;
}
#navlist a:hover {
    background-color: var(--surface);
    color: var(--text);
}
body.dark #navlist a:hover {
    background-color: var(--surface);
    color: var(--text);
}


/* Responzivní chování (Off-canvas sidebar) */
@media (max-width: 1024px) {
    #sidebar {
        box-shadow: var(--elev-1);
    }
    #sidebar.open {
        transform: translateX(0);
    }
    
    .hidden {
        display: none;
    }
}