/* Shared stylesheet for every page of the Bring Your LM site, rendered by
 * Zola (see site/README.md). Served from static/style.css at /style.css. */

:root {
    --background-color: #001D45;
    --text-color: #D9D9D9;
    --muted-color: #8FA3C0;
    --accent-color: #4D9DE0;
}

body {
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 48rem;
    color: var(--text-color);
    background-color: var(--background-color);
    font-family: system-ui, sans-serif;
    line-height: 1.6;
}

a:link,
a:visited {
    color: var(--text-color);
}

a:hover {
    color: var(--accent-color);
}

nav {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
}

main h1 {
    line-height: 1.2;
}

code {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 0.2rem;
    padding: 0.05rem 0.3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* Fenced code blocks (Dockerfiles, shell commands, JSON config). Scroll wide
 * content horizontally rather than letting it stretch the page. */
pre {
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.4rem;
    padding: 1rem;
    overflow-x: auto;
    line-height: 1.5;
}

pre code {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

.release-meta {
    color: var(--muted-color);
}

.release-list {
    list-style: none;
    padding: 0;
    font-size: 1.15rem;
}

.release-list li {
    margin: 0.5rem 0;
}

/* Content sections (use cases, docs). */

.content-list {
    list-style: none;
    padding: 0;
}

.content-list li {
    margin: 1.5rem 0;
    font-size: 1.15rem;
}

.content-list .summary {
    margin: 0.2rem 0 0;
    font-size: 1rem;
    color: var(--muted-color);
}

/* "View as Markdown" link on every content page — opens the page's raw
 * Markdown source (also what the server returns when Accept prefers Markdown).
 * Small and muted so it sits below the title without competing with it. */
.raw-link {
    display: inline-block;
    margin: 0.2rem 0 1rem;
    font-size: 0.85rem;
    color: var(--muted-color);
}

.raw-link::before {
    content: "# ";
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.status-badge {
    display: inline-block;
    margin: 0.3rem 0;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--muted-color);
    border-radius: 1rem;
    font-size: 0.8rem;
    color: var(--muted-color);
}

/* Screenshots embedded in content pages via `![alt](src)`. Zola renders a
 * standalone image line as `<p><img></p>`; center and round it as the old
 * captioned <figure> did. The alt text stays as the image's accessible
 * description (it is no longer shown as a visible caption). These are portrait
 * phone captures, so cap the width well below the body's 48rem — at full body
 * width a tall mobile UI renders unreasonably large. */
main p > img {
    display: block;
    max-width: min(100%, 20rem);
    height: auto;
    margin: 1.5rem auto;
    border-radius: 0.5rem;
}

/* Homepage-only bits. */

.hero {
    text-align: center;
}

.hero img {
    max-width: 100%;
    height: auto;
}

/* Every way to get the app renders the same way: one bordered link per entry,
 * whether it opens the store listing or downloads a file. Left-aligned for the
 * same reason the release summary is — a sentence per entry reads as a list,
 * not as centered prose. */
.download-link {
    display: inline-block;
    margin: 0.5rem 0 0;
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--text-color);
    border-radius: 0.5rem;
    text-decoration: none;
}

.downloads {
    margin: 2.5rem 0;
    text-align: left;
}

.downloads ul {
    list-style: none;
    padding: 0;
}

.downloads li {
    margin: 1.5rem 0;
}

.downloads p {
    margin: 0.3rem 0 0;
}

.download-meta {
    font-size: 0.9rem;
    color: var(--muted-color);
}

/* The newest release, summarized on the homepage. Left-aligned against the
 * centered hero around it — centered lines of unequal length have no edge for
 * the eye to follow down the list. */
.latest-release {
    margin: 2.5rem 0;
    text-align: left;
}

.latest-release ul {
    padding-left: 1.2rem;
}

.latest-release li {
    margin: 0.5rem 0;
}

footer {
    margin-top: 3rem;
    padding: 1rem 0;
    text-align: center;
    color: var(--muted-color);
}

/* The contact address is served reversed so a crawler that regex-scrapes the
   HTML harvests a string that is not a deliverable address; this flips it back
   for the reader. The script in base.html normally replaces the span with a
   real mailto: link before this is ever seen — it is what a reader without
   JavaScript gets. */
.contact-email {
    unicode-bidi: bidi-override;
    direction: rtl;
}