@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Source+Code+Pro:wght@400;600&display=swap');

/* Layout for the FHE guide pages.
   Layered on top of ../../style.css.

   Visual style is borrowed from the mdBook "Navy" theme that the
   Halo2 book uses: dark navy-blue background, lavender-gray text,
   muted blue links, slightly-lighter navy code blocks. */

/* --- Halo2 / mdBook "Navy" theme tokens, scoped to the guide ---
   These values are pulled directly from
   https://zcash.github.io/halo2/css/variables-*.css */
:root {
    --fhe-bg:        hsl(226, 23%, 11%);     /* page background */
    --fhe-fg:        #bcbdd0;                /* body text */
    --fhe-fg-muted:  #8a8c9e;
    --fhe-link:      #2b79a2;
    --fhe-rule:      hsl(226, 23%, 22%);
    --fhe-tint:      hsl(226, 15%, 17%);     /* quote / code background */
    --fhe-tint-hov:  hsl(226, 15%, 22%);
    --fhe-code-fg:   #c5c8c6;                /* inline-code color */
}

/* --- Body & typography ---
   Open Sans / Source Code Pro at the same sizes mdBook uses.
   Scoped to <main> so the site header keeps its original Arial. */

body {
    background: var(--fhe-bg);
}

/* --- Header ---
   Match the page background so the strip blends in (rather than
   showing the sitewide teal). The name + icon stay readable on dark. */
header {
    background-color: var(--fhe-bg);
    color: var(--fhe-fg);
}
.namebtn,
.namebtn:hover {
    color: var(--fhe-fg);
}

main {
    background: var(--fhe-bg);
    box-shadow: none;
    border: none;
    text-align: justify;
    color: var(--fhe-fg);
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

main p,
main ol,
main ul {
    line-height: 1.45em;
}

/* Halo2 keeps headings the same color as body and gives h2/h3 a lot of
   breathing room before them. */
main h1,
main h2,
main h3,
main h4 {
    color: var(--fhe-fg);
}
main h2,
main h3 { margin-top: 2em; }
main h4,
main h5 { margin-top: 1.5em; }
main h1 { margin-top: 0; }

/* Links: no underline by default, underline on hover. */
main a {
    color: var(--fhe-link);
    text-decoration: none;
}
main a:hover {
    text-decoration: underline;
}

/* Code: monospace, dark warm brown text, faint blue tint background. */
main code,
main pre {
    font-family: 'Source Code Pro', Consolas, 'Ubuntu Mono', Menlo, monospace;
    font-size: 0.875em;
}

main code {
    color: var(--fhe-code-fg);
    background: var(--fhe-tint);
    padding: 1px 4px;
    border-radius: 3px;
}

main pre {
    background: var(--fhe-tint);
    padding: 12px 14px;
    border-radius: 4px;
    overflow-x: auto;
}

main pre code {
    color: var(--fhe-fg);
    background: transparent;
    padding: 0;
}

main blockquote {
    margin: 20px 0;
    padding: 0 20px;
    background: var(--fhe-tint);
    border-top: 1px solid var(--fhe-tint-hov);
    border-bottom: 1px solid var(--fhe-tint-hov);
}

main hr {
    border: none;
    border-top: 1px solid var(--fhe-rule);
    margin: 24px auto;
}

/* KaTeX renders glyphs in currentColor, so it inherits our
   light-on-dark text color automatically. But its built-in CSS pins
   a few colors (e.g. .katex-html) – nudge them to inherit too. */
main .katex,
main .katex * {
    color: inherit;
}

/* --- Landing & section pages --- */

.post-list {
    list-style: none;
    padding-left: 16px;
    margin: 0;
    border-left: 2px solid var(--fhe-rule);
}

.post-list li {
    margin: 8px 0;
}

.post-list .post-title {
    color: var(--fhe-link);
    text-decoration: none;
}

.post-list .post-title:hover {
    text-decoration: underline;
}

/* On section pages, the post list is the main thing to click. */
main > .post-list {
    padding-left: 0;
    border-left: none;
}

main > .post-list li {
    padding: 6px 10px;
    margin: 2px 0;
    border-radius: 4px;
    transition: background 0.15s;
}

main > .post-list li:hover {
    background: var(--fhe-tint);
}

/* --- Per-post breadcrumb & nav --- */

.post-breadcrumb {
    font-size: 14px;
    margin: 0 0 12px;
    color: var(--fhe-fg-muted);
}

.post-breadcrumb a {
    color: var(--fhe-link);
    text-decoration: none;
}

.post-breadcrumb a:hover {
    text-decoration: underline;
}

.post-nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 12px;
    margin: 40px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--fhe-rule);
}

.post-nav a {
    max-width: 45%;
    color: var(--fhe-link);
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid var(--fhe-rule);
    border-radius: 4px;
    background: var(--fhe-bg);
    transition: background 0.15s, border-color 0.15s;
}

.post-nav a:hover {
    background: var(--fhe-tint);
    border-color: #c0c0c0;
    text-decoration: none;
}

.post-nav .label {
    display: block;
    font-size: 11px;
    color: var(--fhe-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-nav .post-nav-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-top: 1px;
}

.post-nav .next {
    text-align: right;
}

/* Hide a missing prev/next slot but keep the layout. */
.post-nav .placeholder {
    visibility: hidden;
}