/*
 * technical-datasheet.css
 * Copyright (C) 2020 Benoit Rapidel
 *
 * Distributed under terms of the MIT license.
 */
@import url("fonts.css");
@import url("footer.css");
@import url("titleblock-color.css");

:root {
    --base-width: 70rem;
    --body-margin-lr: auto;
    --page-margin-lr: 0.5rem;
    --page-margin-tb: 0.5rem;
}

body {
    padding: 0;
    margin: 0;
}


.header-section-number::after {
    content: ".";
}

body > section, body > nav {
    max-width: calc(var(--base-width) - var(--page-margin-lr) * 2);
    padding: .5rem var(--page-margin-lr);
    color: #222;
    margin: 1rem var(--body-margin-lr);
}

hr {
    border: 0px;
    border-top: 1px solid #474747;
}

section.level1 {
    border: 1px solid var(--showtex-yellow);
    border-radius: 5px;
}


/* Headers */

h1, h2, h3, h4, h5, h6 {
    color: #0d0d0d;
    margin: .25rem 0;
}

h2, h3, h4, h5, h6 {
    margin-bottom: .25rem;
}

.header-section-number {
    display: none;
}


/* Product setup layout */

section.product-setups {
    padding: 0;
    max-width: var(--base-width);
    --grid-gap: var(--page-margin-lr);
}

section.product-setups > * {
    padding: .5rem var(--page-margin-lr);
}
section.product-setups > section > * {
    margin: 0;
}

section.product-setups > section {
    --header-height: calc(16pt + .5rem);
    --padding-tb: var(--page-margin-tb);
    --band-height: 75%;
    --setup-header-height: calc(var(--header-height) + var(--grid-gap) + var(--padding-tb));
    --band-offset: calc((100% - var(--band-height)) / 2);
    display: grid;
    grid-template: 'title' 'preview' 'details';
    grid-gap: var(--grid-gap);
    background-clip: border-box;
    padding: var(--padding-tb) var(--page-margin-lr);
    margin-bottom: calc(var(--page-margin-tb) * 2);
}
section.product-setups > section:last-child {
    margin-bottom: 1rem;
}

section.product-setups > section h2 {
    grid-area: title;
}

section.product-setups :is(.preview, .details) {
    border-radius: 8px;
}

section.product-setups .preview {
    grid-area: preview;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    place-content: center;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}


section.product-setups .details {
    grid-area: details;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

section.product-setups :is(.preview, .details) {
    place-self: stretch;
}


/* Screen sizes */

@media screen and (max-width: 1250px) {
    :root {
        --base-width: calc(98vw - 1rem);
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --page-margin-lr: .5rem;
        --page-margin-tb: .5rem;
    }
}

@media screen and (max-width: 520px) {
    section.product-setups > section {
        grid-template: 'title' 'preview' 'details' / auto;
        background-size: var(--base-width) calc((50% - var(--header-height)) + var(--grid-gap));
    }
    section.product-setups :is(.preview, .details) {
        border-radius: 8px;
    }

    section.product-setups .preview {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    section.product-setups .details {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    section.product-setups .preview {
    grid-area: preview;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    place-content: center;
    display: grid;
    grid-auto-flow: revert;
    }
}