/* Site styles on top of Bootstrap. System fonts only; light and dark mode
   follow the browser (Bootstrap's data-bs-theme is set in header.leaf). */

:root {
    --site-accent: #2f6f4f;        /* fairway green */
    --site-accent-soft: #e8f1ec;
    --site-todo-bg: #fff6d6;
    --site-todo-border: #e0b300;
}
@media (prefers-color-scheme: dark) {
    :root {
        --site-accent: #7cc39b;
        --site-accent-soft: #1d2b24;
        --site-todo-bg: #3a3215;
        --site-todo-border: #b38f00;
    }
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

a { color: var(--site-accent); }
a:hover { color: var(--site-accent); text-decoration-thickness: 2px; }

.navbar-brand i { color: var(--site-accent); }

/* Reading layout: about 70 characters per line. */
.prose { max-width: 70ch; line-height: 1.65; }
.docs-content.prose { max-width: 80ch; }
.prose h1 { font-weight: 700; letter-spacing: -0.01em; margin-bottom: 1rem; }
.prose h2 { font-size: 1.4rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: 1.15rem; font-weight: 600; margin-top: 1.75rem; }
.prose img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.prose table { width: 100%; margin: 1rem 0 1.5rem; border-collapse: collapse; }
.prose th, .prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--bs-border-color); vertical-align: top; }
.prose th { text-align: left; font-weight: 600; }
.prose pre { background: var(--bs-tertiary-bg); padding: 0.75rem 1rem; border-radius: 0.375rem; overflow-x: auto; }

/* Quotes: the voice of the posts. */
.prose blockquote {
    border-left: 4px solid var(--site-accent);
    background: var(--site-accent-soft);
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
    border-radius: 0 0.375rem 0.375rem 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* TODO boxes: blockquotes that start with **TODO:** stand out until filled. */
.prose blockquote:has(> p:first-child > strong:first-child) {
    border-left-color: var(--site-todo-border);
    background: var(--site-todo-bg);
}

/* About intro */
.intro { padding: 1.5rem 0 0.5rem; }
.intro h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.2; margin-bottom: 0.5rem; }
.intro .lead { font-size: 1.25rem; color: var(--bs-secondary-color); }

/* Docs sidebar */
.docs-sidebar .nav-link {
    color: var(--bs-body-color);
    padding: 0.35rem 0.75rem;
    border-left: 3px solid transparent;
}
.docs-sidebar .nav-link:hover { color: var(--site-accent); }
.docs-sidebar .nav-link.active {
    color: var(--site-accent);
    font-weight: 600;
    border-left-color: var(--site-accent);
    background: var(--site-accent-soft);
}
/* Sidebar groups: a <details> per group, open on the current page's group.
   The chevron turns when it opens. */
.docs-group > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.docs-group > summary::-webkit-details-marker { display: none; }
.docs-group > summary::after {
    content: "\203A";
    display: inline-block;
    margin-left: 0.4rem;
    transition: transform 0.15s;
}
.docs-group[open] > summary::after { transform: rotate(90deg); }
.docs-group > summary:hover { color: var(--site-accent); }
.docs-group > .nav-link { padding-left: 1.25rem; }
@media (min-width: 768px) {
    .docs-sidebar nav { position: sticky; top: 1rem; }
}
@media (max-width: 767.98px) {
    .docs-sidebar { border-bottom: 1px solid var(--bs-border-color); padding-bottom: 0.5rem; }
}

/* Profile panel (About and Resume), after the old www.robichaud.net look:
   round headshot, bold name, muted tagline, links, interests. Same light
   surface as the menu bar; green only for accents. */
.profile-panel {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    overflow: hidden;
}
@media (min-width: 992px) {
    .profile-panel { position: sticky; top: 1rem; }
}
.profile-top {
    text-align: center;
    padding: 2rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.profile-photo {
    width: 140px;
    height: 140px;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 50%;
    border: 3px solid var(--site-accent);
    padding: 3px;
    background: var(--bs-body-bg);
    margin-bottom: 1rem;
}
.profile-name { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.35rem; color: var(--bs-emphasis-color); }
.profile-tagline { color: var(--bs-secondary-color); margin: 0; }
.profile-links { padding: 1.25rem 1.5rem 0; margin: 0; }
.profile-links li { margin-bottom: 0.75rem; overflow-wrap: anywhere; }
.profile-links i { width: 1.4rem; margin-right: 0.4rem; text-align: center; color: var(--site-accent); }
.profile-block { padding: 0.75rem 1.5rem 1.5rem; }
.profile-block-title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0.5rem 0 0.75rem;
}
.profile-block li { margin-bottom: 0.4rem; }

/* Mermaid diagrams (drawn by the script in footer.leaf). */
.prose .mermaid { margin: 1.25rem 0 1.5rem; text-align: center; overflow-x: auto; }
.prose .mermaid svg { max-width: 100%; height: auto; }