/*
 * blog.css — styles the rendered Markdown body of ABM Software blog articles.
 * The article container (<article class="abm-article">) holds raw HTML produced by Markdig, so we style
 * plain elements (h2, p, ul, a, ...) here rather than with Tailwind utilities. Tuned for the dark navy
 * (#060d1f) site theme. Chrome around the body (title, hero, footer) is styled with Tailwind in the .razor.
 */

/* Subtle pale IT motif behind the article body. The hero section above is opaque, so this only shows
   in the reading area. Kept very low-opacity in the tile itself so it never competes with the text. */
.abm-canvas {
    background-color: #060d1f;
    background-image: url("/blog/images/tech-pattern.svg");
    background-repeat: repeat;
    background-position: center top;
}

.abm-article {
    color: #cbd5e1;                 /* slate-300 */
    font-size: 1.0625rem;
    line-height: 1.75;
    word-wrap: break-word;
}

.abm-article > *:first-child { margin-top: 0; }

.abm-article h2 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    scroll-margin-top: 6rem;
}

.abm-article h3 {
    color: #f1f5f9;                 /* slate-100 */
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    scroll-margin-top: 6rem;
}

.abm-article h4 {
    color: #e2e8f0;                 /* slate-200 */
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.abm-article p { margin: 1.25rem 0; }

.abm-article a {
    color: #60a5fa;                 /* blue-400 */
    text-decoration: underline;
    text-underline-offset: 2px;
}
.abm-article a:hover { color: #93c5fd; }   /* blue-300 */

.abm-article strong { color: #f1f5f9; font-weight: 700; }
.abm-article em { font-style: italic; }

.abm-article ul,
.abm-article ol {
    margin: 1.25rem 0;
    padding-left: 1.5rem;
}
.abm-article ul { list-style: disc; }
.abm-article ol { list-style: decimal; }
.abm-article li { margin: 0.5rem 0; }
.abm-article li::marker { color: #64748b; }   /* slate-500 */

.abm-article blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 1.25rem;
    border-left: 3px solid #3b82f6;           /* blue-500 */
    color: #94a3b8;                            /* slate-400 */
    font-style: italic;
}
.abm-article blockquote p { margin: 0.5rem 0; }

.abm-article code {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    padding: 0.15em 0.4em;
    border-radius: 0.3rem;
    font-size: 0.9em;
}

.abm-article pre {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}
.abm-article pre code { background: none; padding: 0; font-size: 0.875rem; }

.abm-article img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 1.5rem 0;
}

.abm-article hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 2.5rem 0;
}

.abm-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
}
.abm-article th,
.abm-article td {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.6rem 0.85rem;
    text-align: left;
}
.abm-article th { color: #fff; font-weight: 600; background: rgba(255, 255, 255, 0.03); }

/* Key-takeaways callout */
.abm-callout {
    border: 1px solid rgba(96, 165, 250, 0.25);
    background: rgba(37, 99, 235, 0.08);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
}
.abm-callout-title {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.75rem;
}
.abm-callout ul { margin: 0; padding-left: 1.25rem; list-style: disc; color: #cbd5e1; }
.abm-callout li { margin: 0.4rem 0; line-height: 1.6; }
.abm-callout li::marker { color: #60a5fa; }

/* Table of contents */
.abm-toc {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
}
.abm-toc-title {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.5rem;
}
.abm-toc ol { margin: 0; padding-left: 1.25rem; list-style: decimal; }
.abm-toc li { margin: 0.35rem 0; }
.abm-toc li::marker { color: #64748b; }
.abm-toc a { color: #60a5fa; text-decoration: none; }
.abm-toc a:hover { color: #93c5fd; text-decoration: underline; }

/* FAQ accordion */
.abm-faq {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}
.abm-faq summary {
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.abm-faq summary::-webkit-details-marker { display: none; }
.abm-faq summary::after {
    content: "+";
    color: #60a5fa;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}
.abm-faq[open] summary::after { content: "\2212"; }   /* minus */
.abm-faq p { margin: 0.85rem 0 0; color: #cbd5e1; line-height: 1.7; }