/* Rendered content generated from the directives (see RenderDirectives and SlideDeck): the title
   information, table of contents, sections and Questions slide, in the Render View and as slides,
   including the slides' pictures (%logo, %titlepic, %sectionpic, %questionspic). Split from
   text-render.css, whose variables these use alongside their own below. */

div.qt-render {
    --qt-titlepage-margin: 0 0 1.5em 0;
    --qt-titlepage-title-size: 2.5em;
    --qt-titlepage-title-color: var(--qt-heading-color);
    --qt-titlepage-subtitle-size: 1.7em;
    --qt-titlepage-subtitle-color: var(--qt-text-color);
    --qt-titlepage-info-size: 1.1em;
    --qt-titlepage-info-color: var(--qt-text-color);
    --qt-titlepage-info-gap: 0.8em;
    --qt-titlepage-subtitle-gap: 0.3em;
    --qt-titlepage-rule-width: 65%;
    --qt-titlepage-rule-gap: 1.5em;
    --qt-titlepage-rule-color: #dddddd;
    --qt-titlepage-rule-thickness: 2px;
    --qt-slide-titlepage-size: 1.4em;
    --qt-slide-titlepage-subtitle-gap: calc(var(--qt-titlepage-subtitle-gap) * 1.5);
    --qt-slide-titlepage-info-gap: calc(var(--qt-titlepage-info-gap) * 1.5);
    --qt-slide-logo-height: 70px;
    --qt-slide-logo-max-width: 30%;
    --qt-titlepic-top-gap: 0.5em;
    --qt-titlepic-side-gap: 1.5em; /* The slide's own side padding (--qt-padding) again, doubling it */
    --qt-titlepic-bottom-gap: 0.6em;
    --qt-titlepic-radius: 24px;
    --qt-titlepic-text-size: 2.4em;
    --qt-titlepic-text-inset: 0.4em 0.6em;
    --qt-titlepic-text-shadow: 0 0 0.15em black, 0.04em 0.04em 0.08em black;
    --qt-titlepic-title-color: white;
    --qt-titlepic-subtitle-color: deepskyblue;
    --qt-titlepic-info-size: 1.3em;
    --qt-titlepic-info-color: var(--qt-text-color);

    --qt-section-margin: 1.5em 0 1em 0;
    --qt-section-size: 1.6em;
    --qt-section-color: var(--qt-heading-color);
    --qt-section-background: #E6EBF5;
    --qt-section-padding: 0.5em 1em;
    --qt-section-radius: 8px;
    --qt-section-border: 1px solid #cccccc;
    --qt-slide-section-size: 2.6em;
    --qt-contents-margin: 0 0 1.5em 0;
    --qt-contents-heading-size: var(--qt-h1-size);
    --qt-contents-heading-weight: var(--qt-h1-weight);
    --qt-contents-heading-color: var(--qt-heading-color);
    --qt-contents-entry-gap: 0.2em;
    --qt-contents-section-gap: 0.5em;
    --qt-contents-section-weight: bold;
    --qt-contents-indent: 1.5em;
    --qt-contents-page-color: var(--qt-heading-color);
    --qt-contents-rule-width: var(--qt-titlepage-rule-width);
    --qt-contents-rule-gap: var(--qt-titlepage-rule-gap);
    --qt-contents-rule-color: var(--qt-titlepage-rule-color);
    --qt-contents-rule-thickness: var(--qt-titlepage-rule-thickness);
    --qt-slide-contents-width: 50%;
    --qt-slide-contents-entry-gap: 0.35em;
    --qt-slide-contents-fill: #f2f2f2;
    --qt-slide-contents-section-fill: #c9f0ff;
    --qt-slide-contents-radius: 12px;
    --qt-slide-contents-border: 1px solid #BBBBBB;
    --qt-slide-contents-padding: 0.2em 0.7em;
    --qt-slide-contents-title-indent: 1.4em;
    --qt-slide-contents-page-width: 2.5em;
    --qt-slide-contents-page-gap: 0.8em;
    --qt-slide-section-radius: 0.6em;

    --qt-questions-size: 2.6em;
    --qt-questions-color: var(--qt-heading-color);
    --qt-questions-background: #E6EBF5;
    --qt-questions-padding: 0.5em 1em;
    --qt-questions-border: 1px solid #cccccc;
    --qt-questions-radius: 0.6em;
    --qt-questions-info-size: 1.5em;
    --qt-questions-info-color: var(--qt-text-color);
    --qt-questions-info-gap: 1.2em;
    --qt-questionspic-background: black;
    --qt-questionspic-color: white;
    --qt-questionspic-size: 2.6em;
    --qt-questionspic-author-size: 1.5em;
    --qt-questionspic-details-gap: 1em;
    --qt-questionspic-band: 4em;
    --qt-questionspic-border-width: 2px;
}

/* The title information from the title directives (see RenderHtml.titlePageToHtml), at the top of
   the document. Each part's margin is in its own em, so it scales with its font size. */
div.qt-render div.qt-titlepage {
    text-align: center;
    margin: var(--qt-titlepage-margin);
}

div.qt-render div.qt-titlepage-title {
    font-family: var(--qt-heading-font);
    font-size: var(--qt-titlepage-title-size);
    font-weight: bold;
    color: var(--qt-titlepage-title-color);
    line-height: 1.2;
}

div.qt-render div.qt-titlepage-subtitle {
    font-family: var(--qt-heading-font);
    font-size: var(--qt-titlepage-subtitle-size);
    color: var(--qt-titlepage-subtitle-color);
    line-height: 1.2;
    margin-top: var(--qt-titlepage-subtitle-gap);
}

/* The author and date, together */
div.qt-render div.qt-titlepage-info {
    font-size: var(--qt-titlepage-info-size);
    color: var(--qt-titlepage-info-color);
    margin-top: var(--qt-titlepage-info-gap);
}

/* A short rule below it all, separating it from the document (not on the title slide) */
div.qt-render div.qt-titlepage::after {
    content: '';
    display: block;
    width: var(--qt-titlepage-rule-width);
    margin: var(--qt-titlepage-rule-gap) auto 0 auto;
    border-top: var(--qt-titlepage-rule-thickness) solid var(--qt-titlepage-rule-color);
}

/* A section (see RenderHtml.toHtml): its title in a banner the width of the text. The banner's
   padding is in the title's own em, so it scales with its font size. */
div.qt-render div.qt-section {
    margin: var(--qt-section-margin);
}

div.qt-render div.qt-section-title {
    font-family: var(--qt-heading-font);
    font-size: var(--qt-section-size);
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    color: var(--qt-section-color);
    background-color: var(--qt-section-background);
    padding: var(--qt-section-padding);
    border: var(--qt-section-border);
    border-radius: var(--qt-section-radius);
}

/* The table of contents (see RenderHtml.contentsToHtml), under its own heading. Its heading's
   margin is in the heading's own em, so it scales with its font size. Sections have a gap above
   them, apart from the first entry, and slides listed under them are indented. */
div.qt-render div.qt-contents {
    margin: var(--qt-contents-margin);
}

div.qt-render div.qt-contents-heading {
    font-family: var(--qt-heading-font);
    font-size: var(--qt-contents-heading-size);
    font-weight: var(--qt-contents-heading-weight);
    line-height: 1.2;
    color: var(--qt-contents-heading-color);
    margin-bottom: 0.4em;
}

div.qt-render div.qt-contents-entry {
    display: flex;
    margin-bottom: var(--qt-contents-entry-gap);
}

div.qt-render div.qt-contents-section {
    font-weight: var(--qt-contents-section-weight);
    margin-top: var(--qt-contents-section-gap);
}

div.qt-render div.qt-contents-heading + div.qt-contents-section {
    margin-top: 0;
}

div.qt-render div.qt-contents-2 {
    padding-left: var(--qt-contents-indent);
}

div.qt-render span.qt-contents-title {
    min-width: 0;
}

/* A short rule below it all, like the one below the title information (not on the slide) */
div.qt-render div.qt-contents::after {
    content: '';
    display: block;
    width: var(--qt-contents-rule-width);
    margin: var(--qt-contents-rule-gap) auto 0 auto;
    border-top: var(--qt-contents-rule-thickness) solid var(--qt-contents-rule-color);
}

/* Page numbers, in Slides mode only, on the right */
div.qt-render span.qt-contents-page {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 1em;
    color: var(--qt-contents-page-color);
}

/* The title slide, larger, and centred down the slide too. At least the slide's height rather than
   exactly it, so if too much is given to fit, SlideFitter can tell. */
div.qt-render div.qt-slide-body > div.qt-titlepage {
    font-size: var(--qt-slide-titlepage-size);
    min-height: 100%;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div.qt-render div.qt-slide-body > div.qt-titlepage::after {
    content: none;
}

/* The title slide's %logo, in its bottom left corner, which doesn't move the centred text. Fits
   within its height and width limits, keeping its aspect ratio. */
div.qt-render div.qt-slide-body > div.qt-titlepage {
    position: relative;
}

div.qt-render img.qt-titlepage-logo {
    position: absolute;
    left: 0;
    bottom: 0;
    height: var(--qt-slide-logo-height);
    width: auto;
    max-width: var(--qt-slide-logo-max-width);
    object-fit: contain;
    object-position: left bottom;
}

/* Where %titlepic names an image which doesn't exist. Starts as a copy of div.qt-image-missing
   (see text-render-image.css). */
div.qt-render div.qt-titlepage-missing {
    border: 1px dashed grey;
    color: grey;
    font-style: italic;
    padding: 0.5em;
    margin-top: var(--qt-slide-titlepage-info-gap);
}

/* The title slide with %titlepic (see RenderHtml.titlePicPageToHtml): the picture, as large as fits
   above the logo, author and date, with the title and subtitle on it. Wider side margins than
   other slides. */
div.qt-render div.qt-slide-body > div.qt-titlepic {
    height: 100%;
    box-sizing: border-box;
    padding: 0 var(--qt-titlepic-side-gap);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: var(--qt-titlepic-bottom-gap);
}

/* A size container, so the picture can be sized to fit both its width and height */
div.qt-render div.qt-titlepic-middle {
    container-type: size;
    box-sizing: border-box;
    padding-top: var(--qt-titlepic-top-gap);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Exactly the picture's size, keeping its aspect ratio (--qt-titlepic-ratio, its width over its
   height, set by RenderHtml), so the text on it stays within it */
div.qt-render div.qt-titlepic-frame {
    position: relative;
    flex: none;
    overflow: hidden;
    border-radius: var(--qt-titlepic-radius);
    aspect-ratio: var(--qt-titlepic-ratio);
    width: min(100cqw, 100cqh * var(--qt-titlepic-ratio));
}

div.qt-render img.qt-titlepic-img {
    display: block;
    width: 100%;
    height: 100%;
}

div.qt-render div.qt-titlepic-title,
div.qt-render div.qt-titlepic-subtitle {
    position: absolute;
    left: 0;
    right: 0;
    padding: var(--qt-titlepic-text-inset);
    font-family: var(--qt-heading-font);
    font-size: var(--qt-titlepic-text-size);
    font-weight: bold;
    line-height: 1.2;
    text-shadow: var(--qt-titlepic-text-shadow);
}

div.qt-render div.qt-titlepic-title {
    top: 0;
    text-align: left;
    color: var(--qt-titlepic-title-color);
}

div.qt-render div.qt-titlepic-subtitle {
    bottom: 0;
    text-align: right;
    color: var(--qt-titlepic-subtitle-color);
}

/* The logo on the left and the author over the date on the right, even without a logo */
div.qt-render div.qt-titlepic-bottom {
    display: flex;
    align-items: flex-end;
    gap: 1em;
}

div.qt-render img.qt-titlepic-logo {
    display: block;
    height: var(--qt-slide-logo-height);
    width: auto;
    max-width: var(--qt-slide-logo-max-width);
    object-fit: contain;
    object-position: left bottom;
}

div.qt-render div.qt-titlepic-info {
    margin-left: auto;
    text-align: right;
    font-size: var(--qt-titlepic-info-size);
    color: var(--qt-titlepic-info-color);
    line-height: 1.3;
}

/* The gaps either side of the subtitle are wider on the title slide */
div.qt-render div.qt-slide-body div.qt-titlepage-subtitle {
    margin-top: var(--qt-slide-titlepage-subtitle-gap);
}

div.qt-render div.qt-slide-body div.qt-titlepage-subtitle + div.qt-titlepage-info {
    margin-top: var(--qt-slide-titlepage-info-gap);
}

/* A section start slide: its banner, larger and with rounder corners, centred down the slide. At
   least the slide's height, as for the title slide. */
div.qt-render div.qt-slide-body > div.qt-section {
    min-height: 100%;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div.qt-render div.qt-slide-body div.qt-section-title {
    font-size: var(--qt-slide-section-size);
    border-radius: var(--qt-slide-section-radius);
}

/* The table of contents slide: narrower than the slide, so the page numbers stay near the titles,
   and without its own heading, as the slide's title says what it is */
div.qt-render div.qt-slide-body > div.qt-contents {
    width: var(--qt-slide-contents-width);
    margin: 0 auto;
}

div.qt-render div.qt-slide-body div.qt-contents-heading {
    display: none;
}

div.qt-render div.qt-slide-body > div.qt-contents::after {
    content: none;
}

/* Each entry's title and page number are in boxes of their own, like filled boxes (see
   text-render-block.css), with sections' boxes in a colour of their own. The titles' boxes fill
   the rest of the row, so the page numbers' boxes, all the same width, line up. */
div.qt-render div.qt-slide-body div.qt-contents-entry {
    margin-bottom: var(--qt-slide-contents-entry-gap);
}

div.qt-render div.qt-slide-body span.qt-contents-title,
div.qt-render div.qt-slide-body span.qt-contents-page {
    background-color: var(--qt-slide-contents-fill);
    border: var(--qt-slide-contents-border);
    border-radius: var(--qt-slide-contents-radius);
    padding: var(--qt-slide-contents-padding);
    box-sizing: border-box;
}

div.qt-render div.qt-slide-body div.qt-contents-section span.qt-contents-title,
div.qt-render div.qt-slide-body div.qt-contents-section span.qt-contents-page {
    background-color: var(--qt-slide-contents-section-fill);
}

div.qt-render div.qt-slide-body span.qt-contents-title {
    flex: 1;
    padding-left: var(--qt-slide-contents-title-indent);
}

div.qt-render div.qt-slide-body span.qt-contents-page {
    min-width: var(--qt-slide-contents-page-width);
    margin-left: var(--qt-slide-contents-page-gap);
    text-align: center;
}

/* The Questions slide (see RenderHtml.questionsToHtml): a banner, then the author and contact, centred
   down the slide. Starts as a copy of the section start slide's banner and the title slide's
   author and date. At least the slide's height, as for the title slide. The banner's padding and
   the gap above the author and contact are in their own em, so they scale with their font sizes. */
div.qt-render div.qt-slide-body > div.qt-questions {
    min-height: 100%;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

div.qt-render div.qt-questions-title {
    font-family: var(--qt-heading-font);
    font-size: var(--qt-questions-size);
    font-weight: bold;
    line-height: 1.2;
    color: var(--qt-questions-color);
    background-color: var(--qt-questions-background);
    padding: var(--qt-questions-padding);
    border: var(--qt-questions-border);
    border-radius: var(--qt-questions-radius);
}

div.qt-render div.qt-questions-info {
    font-size: var(--qt-questions-info-size);
    color: var(--qt-questions-info-color);
    margin-top: var(--qt-questions-info-gap);
}

/* The Questions slide with %questionspic (see RenderHtml.questionsPicToHtml): on black, the
   heading at the top and the author at the bottom, in bands of the same height, so the image
   between them is centred on the slide. The backdrop covers the whole slide, padding included, as
   a section start slide's background does (below). */
div.qt-render div.qt-slide-body > div.qt-questionspic {
    height: 100%;
    display: grid;
    grid-template-rows: var(--qt-questionspic-band) minmax(0, 1fr) var(--qt-questionspic-band);
    text-align: center;
    color: var(--qt-questionspic-color);
}

div.qt-render div.qt-questionspic-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--qt-questionspic-background);
}

div.qt-render div.qt-questionspic-title {
    grid-row: 1;
    align-self: start;
    font-family: var(--qt-heading-font);
    font-size: var(--qt-questionspic-size);
    font-weight: bold;
    line-height: 1.2;
}

/* A size container, so the image can be sized to fit both its width and height */
div.qt-render div.qt-questionspic-middle {
    grid-row: 2;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The author on the left and the contact on the right, even without an author, at the slide's
   edges. Centred in its band, so in the space beneath the image unless a wide image doesn't fill
   the height between the bands. If they don't both fit on one line, they wrap within their halves
   rather than overlap. */
div.qt-render div.qt-questionspic-details {
    grid-row: 3;
    align-self: center;
    display: flex;
    gap: var(--qt-questionspic-details-gap);
    font-size: var(--qt-questionspic-author-size);
    line-height: 1.2;
}

div.qt-render div.qt-questionspic-author {
    text-align: left;
}

div.qt-render div.qt-questionspic-contact {
    margin-left: auto;
    text-align: right;
}

/* As large as fits the space between the heading and author, border included, keeping its aspect
   ratio (--qt-questionspic-ratio, its width over its height, set by RenderHtml) */
div.qt-render img.qt-questionspic-img {
    display: block;
    box-sizing: content-box;
    border: var(--qt-questionspic-border-width) solid var(--qt-questionspic-color);
    aspect-ratio: var(--qt-questionspic-ratio);
    height: auto;
    width: min(100cqw - 2 * var(--qt-questionspic-border-width),
        (100cqh - 2 * var(--qt-questionspic-border-width)) * var(--qt-questionspic-ratio));
}

/* A section start slide's background (see RenderHtml.sectionPicToHtml), stretched to exactly fill
   the whole slide, padding included, behind its banner and footer. Placed against the slide's
   rendered document, which its scaling transform makes the containing block and stacking context. */
div.qt-render div.qt-slide-sectionpic {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}