/* ─── Primary stylesheet entry point ────────────────────────────────────────
   The quarkus-web-bundler (esbuild-based) cannot run the Tailwind 4 JIT
   compiler. Tailwind is pre-compiled by tailwind-compile.mjs (invoked via
   the `compileTailwind` Gradle task) and written to tailwind-compiled.css.
   This file simply imports that pre-compiled output so the bundler picks it
   up and serves it under /static/bundle/app.css.
   ─────────────────────────────────────────────────────────────────────────── */

@import "./tailwind-compiled.css";

/* ── Responsive main content padding ───────────────────────────────────────
   Tailwind is pre-compiled so responsive variants added to HTML won't take
   effect until compileTailwind runs. We override #main-content-body here
   directly so the fix is always live.
   ─────────────────────────────────────────────────────────────────────────── */
#main-content-body {
    padding: 0;
}
@media (min-width: 640px) {
    #main-content-body {
        padding: 24px;
    }
}

/* homepage-app already sits inside #main-content-body which provides the
   outer padding — remove its own padding to avoid double-spacing on mobile. */
.homepage-app {
    padding: 8px !important;
}

/* ── AI chat markdown rendering ──────────────────────────────────────────── */
.ai-markdown {
    line-height: 1.6;
}
.ai-markdown p {
    margin-bottom: 0.5rem;
}
.ai-markdown p:last-child {
    margin-bottom: 0;
}
.ai-markdown h1,
.ai-markdown h2,
.ai-markdown h3,
.ai-markdown h4,
.ai-markdown h5,
.ai-markdown h6 {
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}
.ai-markdown h1 {
    font-size: 1.1rem;
}
.ai-markdown h2 {
    font-size: 1rem;
}
.ai-markdown h3 {
    font-size: 0.95rem;
}
.ai-markdown ul,
.ai-markdown ol {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}
.ai-markdown ul {
    list-style-type: disc;
}
.ai-markdown ol {
    list-style-type: decimal;
}
.ai-markdown li {
    margin-bottom: 0.15rem;
}
.ai-markdown code {
    background: #f3f4f6;
    border-radius: 0.25rem;
    padding: 0.1em 0.35em;
    font-size: 0.85em;
    font-family: monospace;
}
.ai-markdown pre {
    background: #f3f4f6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    overflow-x: auto;
    margin-bottom: 0.5rem;
}
.ai-markdown pre code {
    background: none;
    padding: 0;
}
.ai-markdown blockquote {
    border-left: 3px solid #e5e7eb;
    padding-left: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}
.ai-markdown a {
    color: #4f46e5;
    text-decoration: underline;
}
.ai-markdown strong {
    font-weight: 600;
}
.ai-markdown em {
    font-style: italic;
}
.ai-markdown hr {
    border-color: #e5e7eb;
    margin: 0.5rem 0;
}
.ai-markdown table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 0.85em;
}
.ai-markdown th,
.ai-markdown td {
    border: 1px solid #e5e7eb;
    padding: 0.3rem 0.6rem;
}
.ai-markdown th {
    background: #f9fafb;
    font-weight: 600;
}


/* ── Article content (blog posts) ──────────────────────────────────────────
   Long-form HTML produced by the editor. Lives here rather than in a page
   <style> block so the blog uses the site-wide look instead of its own theme. */
.prose {
    /* Long URLs, code tokens and pasted content must wrap instead of forcing the
       page to scroll sideways. */
    overflow-wrap: break-word;
    word-break: break-word;
}
.prose h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #111827;
}
.prose h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1f2937;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}
.prose h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #374151;
}
.prose p {
    margin-bottom: 1rem;
    line-height: 1.75;
    color: #4b5563;
}
.prose ul,
.prose ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    color: #4b5563;
}
.prose ul {
    list-style-type: disc;
}
.prose ol {
    list-style-type: decimal;
}
.prose li {
    margin-bottom: 0.5rem;
    line-height: 1.75;
}
.prose a {
    color: #4f46e5;
    text-decoration: underline;
}
.prose a:hover {
    color: #4338ca;
}
.prose code {
    background-color: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-family: monospace;
    color: #db2777;
}
.prose pre {
    background-color: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}
.prose pre code {
    background-color: transparent;
    padding: 0;
    color: #f9fafb;
}
.prose blockquote {
    border-left: 4px solid #4f46e5;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #6b7280;
    font-style: italic;
}
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}