/* PAGE CANVAS */

html {
    background-color: var(--iroh-canvas);
}

html, body {
    color: var(--iroh-text);
}

body {
    max-width: var(--iroh-measure);
    background-color: var(--iroh-sheet);
    border: var(--iroh-sheet-border-width) solid var(--iroh-sheet-border);
    border-radius: var(--iroh-sheet-radius);
    box-shadow: var(--iroh-sheet-shadow);
    padding-bottom: 3em;
}

::selection {
    background: var(--iroh-accent-pale);
    color: var(--iroh-heading);
}


/* TYPE */

:root {
    --iroh-body-font: "Fira Sans", system-ui, -apple-system, sans-serif;
    --iroh-body-size: 17px;
}

body,
div.settitle, div.top, div.chapter, div.section,
div.subsection, div.subsubsection,
div.unnumberedsec, div.unnumberedsubsec {
    font-family: var(--iroh-body-font);
    font-size: var(--iroh-body-size);
}

div.footnote {
    font-family: var(--iroh-body-font);
    font-size: calc(var(--iroh-body-size) - 2px);
}

h1, h2, h3, h4, h5, h6,
h1.settitle, h1.top, h2.chapter, h3.section,
h4.subsection, h4.subsubsection, h4.footnotes-heading,
.settitle, .top, .chapter, .section, .subsection, .subsubsection {
    font-family: var(--iroh-body-font);
}

p, li, dt, dd, table, address { line-height: 1.65; }
pre, code, samp                { line-height: 1.5; }

h1, h2, h3, h4 { color: var(--iroh-heading); }
h5, h6, dt     { color: var(--iroh-heading); }

h1.settitle {
    border-bottom: 1px solid var(--iroh-rule);
    padding-bottom: .6em;
}

h2.chapter {
    border-bottom: 1px solid var(--iroh-rule);
    padding-bottom: .25em;
}

hr {
    height: 1px;
    border: 0;
    background: var(--iroh-rule);
}

abbr, acronym { border-bottom-color: var(--iroh-text-muted); }

img { color: var(--iroh-text-muted); }


/* LINKS */

a[href]          { color: var(--iroh-link); }
a[href]:visited  { color: var(--iroh-link-visited); }
a[href]:hover,
a[href]:active   { color: var(--iroh-link-hover); text-decoration: underline; }

h1 a[href], h2 a[href], h3 a[href], h4 a[href],
h1 a[href]:visited, h2 a[href]:visited,
h3 a[href]:visited, h4 a[href]:visited { color: var(--iroh-heading); }

h1 a[href]:hover, h2 a[href]:hover,
h3 a[href]:hover, h4 a[href]:hover { color: var(--iroh-link-hover); }

a:focus-visible,
:focus-visible {
    outline: 2px solid var(--iroh-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The ¶ that appears next to every definition on hover. */
a.copiable-anchor { color: var(--iroh-accent-soft); }


/* NAVIGATION STRIPS (div.header / div.node) */

.header, .node {
    color: var(--iroh-text-muted);
    font-size: 87.5%;
}

.header a[href], .node a[href] { color: var(--iroh-link); }

.node a:hover, .header a:hover {
    background: var(--iroh-hover-bg);
    border-radius: .2em;
    text-decoration: none;
}


/* TABLE OF CONTENTS */

h2.contents-heading { margin-bottom: .4em; }

div.contents {
    background: var(--iroh-toc-bg);
    border: 1px solid var(--iroh-rule);
    border-radius: .4em;
    padding: .4em 1.5em 1em;
}

ul.section-toc {
    border-left: 2px solid var(--iroh-accent-pale);
    padding-left: 1em;
    margin-left: .3em;
    list-style: none;
}

ul.section-toc li { list-style: none; }


/* INLINE CODE */

samp, code, tt, .verbatim:not(pre) {
    background: var(--iroh-inline-bg);
    color: var(--iroh-inline-text);
    border: 1px solid var(--iroh-inline-border);
    border-radius: .25em;
    padding: .05em .3em;
    font-family: monospace;
    font-size: .89em;
}

a[href] code, a[href] samp { color: inherit; }


/* BLOCK CODE: @example, @lisp, @verbatim */

.example,
pre[class^="example"],
pre[class*="lisp"],
pre.verbatim,
div[class*="example"],
div[class*="lisp"] {
    background: var(--iroh-code-bg);
    color: var(--iroh-code-text);
    font-family: monospace;
    font-size: .89em;
}

/* makeinfo nests <pre class="lisp"> inside <div class="example lisp">;
   both match the rule above, so the inner one must be reset or the
   scale compounds to .79.

   The inner <pre> is also made transparent so the wrapper alone paints
   the card.  Otherwise the child's background paints over the
   wrapper's rounded corners and the card renders
   with square corners. */
div[class*="example"] > pre,
div[class*="lisp"] > pre {
    font-size: 1em;
    background: transparent;
}

div.lisp, pre.lisp,
div[class*="example"], pre[class^="example"], pre.verbatim {
    border: 1px solid var(--iroh-code-border);
    border-radius: .35em;
    box-shadow: var(--iroh-code-shadow);
}

pre.verbatim { padding: 1em 2.5%; }

/* A <pre class="lisp"> nested in <div class="example lisp"> must not
   draw a second frame. */
div.lisp > pre.lisp,
div[class*="example"] > pre {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* Cartouche-wrapped examples, same treatment. */
.cartouche > tbody > tr > td > div[class*="example"] > pre[class*="example"],
.cartouche > tbody > tr > td > div[class*="example"] > pre[class*="lisp"],
.cartouche > tbody > tr > td > div[class*="example"] > pre.verbatim,
.cartouche > tbody > tr > td > div[class*="lisp"] > pre[class*="lisp"],
.cartouche > tbody > tr > td > pre[class*="example"],
.cartouche > tbody > tr > td > pre[class*="lisp"] {
    background: var(--iroh-code-bg);
    border-color: var(--iroh-code-border);
}

/* Keep the symbol mask in step with the card.  Must stay opaque and
   must equal --iroh-code-bg, or hovering a parenthesis floods the
   whole enclosing form with the rainbow colour instead of tinting
   just the two glyphs. */
pre.lisp .syntax-symbol,
pre.lisp a[href].syntax-symbol,
pre.lisp .syntax-default {
    background-color: var(--iroh-code-bg);
}


/* DEFINITIONS (@deffn &c.) */

/* Texinfo 6.8 emits <dl class="def"><dt id="index-..."> so these blocks are
   unstyled.  Give them a proper card. */

dl.def { margin: 1.6em 0; }

dl.def > dt {
    margin: 0;
    padding: .55em .9em;
    font-weight: normal;
    font-family: monospace;
    color: var(--iroh-text);
    background: var(--iroh-def-bg);
    border: 1px solid var(--iroh-code-border);
    border-top: 3px solid var(--iroh-accent-soft);
    border-radius: .35em .35em 0 0;
}

dl.def > dt strong { color: var(--iroh-heading); }
dl.def > dt em     { color: var(--iroh-text-muted); font-style: italic; }

dl.def > dt .category {
    font-family: var(--iroh-ui-font);
    font-size: 80%;
    letter-spacing: .04em;
    text-transform: lowercase;
    color: var(--iroh-text-muted);
    margin-right: .5em;
}

dl.def > dd {
    margin: 0;
    padding: .8em 1.1em;
    background: var(--iroh-def-body-bg);
    border: 1px solid var(--iroh-code-border);
    border-top: 0;
    border-radius: 0 0 .35em .35em;
}

dl.def > dd > p:first-child { margin-top: 0; }
dl.def > dd > p:last-child  { margin-bottom: 0; }


/* QUOTATIONS */

blockquote {
    margin: 1.4em 0 1.4em 1.5%;
    padding: .6em 1.2em;
    background: var(--iroh-quote-bg);
    border-left: 4px solid var(--iroh-accent);
    border-radius: 0 .35em .35em 0;
    font-style: normal;
}

blockquote > p:first-child { margin-top: 0; }
blockquote > p:last-child  { margin-bottom: 0; }


/* TABLES */

td, th {
    background: transparent;
    color: var(--iroh-text);
}

table[border="1"], .multitable { border: 1px solid var(--iroh-rule); }
.multitable th { border-bottom: 2px solid var(--iroh-rule); }
.multitable th { background: var(--iroh-def-bg); }
.cartouche ul  { border-color: var(--iroh-rule); }


/* FOOTNOTES */

div.footnote { color: var(--iroh-text-muted); }
div.footnote > h4 {
    border-top: 1px solid var(--iroh-rule);
    padding-top: .6em;
}


/* Copied from Guix' manual.css */

@font-face {
    font-family: 'Fira Sans';
    src: url('../guix-theme/fonts/FiraSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fira Sans';
    src: url('../guix-theme/fonts/FiraSans-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Fira Sans';
    src: url('../guix-theme/fonts/FiraSans-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../guix-theme/fonts/FiraSans-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

a { text-decoration: none; }

div.lisp            { padding: .8em 1.2em .4em; }
pre.lisp            { padding: .8em 1.2em; }
div.lisp, pre.lisp  { margin: 1em 0 1em 3%; }
div.lisp > pre.lisp { padding: 0 0 .4em; margin: 0; }

.footnote > h5 { font-weight: normal; font-size: .9em; }

.header { line-height: 2em; }


/* PRINT */

@media print {
    html, body { background: #fff; color: #000; }
    body { border: 0; box-shadow: none; max-width: none; }
    a[href] { color: inherit; text-decoration: underline; }
}

:root {
    --iroh-ui-font: "Fira Sans", system-ui, -apple-system, sans-serif;
    --iroh-measure: 52em;

    --iroh-canvas: #f2ece0;
    --iroh-sheet: #f2ece0;
    --iroh-sheet-border: transparent;
    --iroh-sheet-border-width: 0;
    --iroh-sheet-radius: 0;
    --iroh-sheet-shadow: none;

    --iroh-text: #2a3828;
    --iroh-text-muted: #5e6e58;
    --iroh-heading: #1b3018;

    --iroh-link: #3b7234;
    --iroh-link-visited: #567a4d;
    --iroh-link-hover: #806013;

    --iroh-accent: #3b7234;
    --iroh-accent-soft: #6a9e5c;
    --iroh-accent-pale: #c8dabe;
    --iroh-gold: #c8a030;
    --iroh-rule: #c4bea0;
    --iroh-hover-bg: #c8dabe;

    --iroh-code-bg: #faf6ea;
    --iroh-code-text: inherit;
    --iroh-code-border: #d8d0b6;
    --iroh-code-shadow: 0 1px 3px rgba(28, 48, 24, .09);

    --iroh-inline-bg: #e7e0d0;
    --iroh-inline-text: #2a3828;
    --iroh-inline-border: #d5cdb4;

    --iroh-def-bg: #e7e0d0;
    --iroh-def-body-bg: #f7f3e9;

    --iroh-quote-bg: #e7e0d0;
    --iroh-toc-bg: #e7e0d0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --iroh-canvas: #111c11;
        --iroh-sheet: #111c11;
        --iroh-sheet-border: transparent;
        --iroh-sheet-border-width: 0;
        --iroh-sheet-shadow: none;

        --iroh-text: #d0ccbe;
        --iroh-text-muted: #8a9a7e;
        --iroh-heading: #b8d4a0;

        --iroh-link: #7ab05b;
        --iroh-link-visited: #8fae76;
        --iroh-link-hover: #e2c44e;

        --iroh-accent: #7ab05b;
        --iroh-accent-soft: #5a8e48;
        --iroh-accent-pale: #243424;
        --iroh-gold: #e2c44e;
        --iroh-rule: #2a3a2a;
        --iroh-hover-bg: #243424;

        --iroh-code-bg: #1a291a;
        --iroh-code-text: #d4cec0;
        --iroh-code-border: #2c3f2c;
        --iroh-code-shadow: none;

        --iroh-inline-bg: #1f2f1f;
        --iroh-inline-text: #d8d2c4;
        --iroh-inline-border: #2f3f2c;

        --iroh-def-bg: #1a291a;
        --iroh-def-body-bg: #151f15;

        --iroh-quote-bg: #1a291a;
        --iroh-toc-bg: #1a291a;
    }

    pre.lisp .syntax-special,
    pre.lisp .syntax-element              { color: #d99aab; }

    pre.lisp .syntax-symbol,
    pre.lisp .syntax-default,
    pre.lisp a[href].syntax-symbol        { color: #d4cec0; }

    pre.lisp .syntax-string               { color: #8fcf8f; }

    pre.lisp .syntax-keyword,
    pre.lisp .syntax-attribute            { color: #e8836a; }

    pre.lisp .syntax-comment              { color: #869080; }

    pre.lisp .syntax-open,
    pre.lisp .syntax-close,
    pre.lisp .syntax-paren0, pre.lisp .syntax-paren1,
    pre.lisp .syntax-paren2, pre.lisp .syntax-paren3,
    pre.lisp .syntax-paren4, pre.lisp .syntax-paren5,
    pre.lisp .syntax-paren6, pre.lisp .syntax-paren7,
    pre.lisp .syntax-paren8, pre.lisp .syntax-paren9 { color: #8fb8b8; }

    pre.lisp [class^="syntax-paren"]:hover { color: #14210f; }

    dl.def > dt { color: var(--iroh-text); }
}