/*
 * Typography for the knowledge base articles (guava/filament-knowledge-base).
 *
 * The package wraps article HTML in Tailwind "prose" classes, but this project has no
 * Tailwind build pipeline and Filament's compiled stylesheet does not include the
 * typography plugin, so without this file an article renders as a flat wall of reset
 * text. Scoped to .gu-kb-article (present on both the full page and the modal preview).
 */

.gu-kb-article {
    max-width: 65ch;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgb(55 65 81);
}

.dark .gu-kb-article {
    color: rgb(209 213 219);
}

.gu-kb-article h1 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1rem;
    color: rgb(17 24 39);
}

.gu-kb-article h2 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 1.75rem 0 0.6rem;
    color: rgb(17 24 39);
}

.gu-kb-article h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.4rem 0 0.4rem;
    color: rgb(17 24 39);
}

.dark .gu-kb-article h1,
.dark .gu-kb-article h2,
.dark .gu-kb-article h3 {
    color: rgb(243 244 246);
}

.gu-kb-article p {
    margin: 0 0 0.9rem;
}

.gu-kb-article ul,
.gu-kb-article ol {
    margin: 0 0 0.9rem;
    padding-left: 1.4rem;
}

.gu-kb-article ul {
    list-style: disc;
}

.gu-kb-article ol {
    list-style: decimal;
}

.gu-kb-article li {
    margin: 0.25rem 0;
}

.gu-kb-article strong {
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .gu-kb-article strong {
    color: rgb(243 244 246);
}

.gu-kb-article a {
    color: rgb(37 99 235);
    text-decoration: underline;
}

.dark .gu-kb-article a {
    color: rgb(96 165 250);
}

.gu-kb-article code {
    font-size: 0.85em;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    background: rgb(243 244 246);
    color: rgb(31 41 55);
}

.dark .gu-kb-article code {
    background: rgb(31 41 55);
    color: rgb(229 231 235);
}

.gu-kb-article blockquote {
    margin: 0 0 0.9rem;
    padding: 0.5rem 1rem;
    border-left: 3px solid rgb(209 213 219);
    color: rgb(75 85 99);
}

.dark .gu-kb-article blockquote {
    border-left-color: rgb(75 85 99);
    color: rgb(156 163 175);
}

.gu-kb-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
    font-size: 0.9em;
}

.gu-kb-article th,
.gu-kb-article td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgb(229 231 235);
    vertical-align: top;
}

.dark .gu-kb-article th,
.dark .gu-kb-article td {
    border-bottom-color: rgb(55 65 81);
}

.gu-kb-article th {
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .gu-kb-article th {
    color: rgb(243 244 246);
}

.gu-kb-article hr {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid rgb(229 231 235);
}

.dark .gu-kb-article hr {
    border-top-color: rgb(55 65 81);
}

.gu-kb-article mark {
    background: rgba(65, 164, 180, 0.2);
    color: inherit;
    padding: 0.05rem 0.2rem;
    border-radius: 0.2rem;
}