@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

:root {
    --font: "Open Sans";
    --width-form: 160px;
    --width-chart: 1200px;
    --width-sidebar: 190px;
    --height-chart: 500px;

    /* Colors */
    --blue1: #0033A0; 
    --blue2: #4068B8; 
    --blue3: #8099D0; 
    --blue4: #B3C2E3; 
    --blue5: #D9E0F1; 
    --green1: #5CB8B2;  
    --green2: #85CAC5; 
    --green3: #AEDCD9; 
    --green4: #CEEAE8;
    --green5: #E7F4F3; 
    --yellow: #FFB81C; 
    --red1: #D22630; 
    --red2: #DD5C64; 
    --red3: #E99398; 
    --red4: #F2BEC1; 
    --red5: #F8DEE0; 
    --unBlue1: #418FDE; 
    --unBlue2: #84ADEC; 
    --unBlue3: #ADC9F2; 
    --unBlue4: #CEDEF7; 
    --unBlue5: #E6EFFB; 
    --unBlue6: #F3F7FD; 
    --gray1: #404040; 
    --gray2: #666666; 
    --gray3: #999999; 
    --gray4: #CCCCCC; 
    --gray5: #F2F2F2; 
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font: inherit;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font), sans-serif;
    font-size: 1rem;
}

h1 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2em;
    margin: .25rem 0 1rem 0;
    text-wrap: balance;
}

h2, .h2-summary {
    font-size: 1.5em;
    font-weight: 600;
}

h3 {
    font-weight: 600;
    margin: .5rem 0;
}

ul {

    &.ul-level-1 {
        padding-left: 1em;
    }

    &.ul-level-2 {
        padding-left: 1.5em;
    }

    & li {
        padding-left: .5em;
        margin-bottom: .5em;
    }

    & .li-head {
        padding: 0;
        margin: 0 0 .5em 0;
    } 
}

details {
    margin: 1em 0;
}

strong {
    color: var(--blue1);
    font-weight: 700;
}

emph {
    font-style: italic;
}

.disclaimer {
    display: flex;
    margin: auto;
    color: var(--red1);
    text-transform: uppercase;
    font-size: 1.2rem;
}

svg {
    display: block;
}

/*** Header and footer *************************/

header {
    display: flex;
    padding: min(3vw, 1rem) min(10vw, 5rem);
}

.logo-container img {
    width: min(60vw, 295px);
    height: auto;
}

footer {
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 3rem 3rem 2rem 3rem;
    margin-top: 3rem;
}

.copyright {
    flex: 0 1 0px;
    font-size: 0.825rem;
    font-size: clamp(.6rem, .375rem + .9vw, 0.825rem);
    color: var(--gray2);
}

/*** Layout ************************************/

.content-grid, .full-width {
    --padding-inline: 2rem;
    --content-max-width: 700px;
    --breakout-max-width: var(--width-chart);
    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

    display: grid;
    gap: 0;
    grid-template-columns: 
        [full-width-start] minmax(var(--padding-inline), 1fr)
        [breakout-start] minmax(0, var(--breakout-size))
        [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end] 
        minmax(0, var(--breakout-size)) [breakout-end] 
        minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
    grid-column: content;
}

.content-grid > .breakout,
.full-width > .breakout {
    grid-column: breakout;

    @media (width < 1200px) {
        grid-column: full-width;
    }
}

.content-grid > .full-width {
    grid-column: full-width;
    display: grid;
    grid-template-columns: inherit;
}

/*** Title *************************************/

.title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: var(--blue1);
    color: white; 
    margin-bottom: 2rem;
}

.title-block-contents {
    text-align: center;
    padding: 2em 1em;

    .product-name {
        font-weight: 600;
        font-size: .7rem;
        text-transform: uppercase;
        opacity: .8;
        padding: .1rem .5rem;
    }

    .subtitle {
        font-size: 1.1rem;
        text-wrap: balance;
    }
}

/*** Page **************************************/

.date {
    display: flex;
    align-items: center;
    gap: .4em;
    color: #343a40;
    margin-bottom: 2rem;
}

.par {
    p {
        margin: 1rem 0;
    }
}

.svg-inline--fa {
    height: 1em;
    overflow: visible;
}

.contents-table {
    overflow-x: scroll;
    display: grid;
    grid-template-columns: repeat(3, minmax(15em, 1fr));
    gap: .5em;
    font-size: 0.9em;

    & ul {
        padding: 0 .5rem 0 1rem;
    }

    & li {
        padding-left: 0;
        margin-bottom: .25rem;
    }

    & .table-col {
        background: var(--unBlue6);
        
        & .table-col-name {
            text-align: center;
            font-weight: 600;
            padding: .25rem 0;
            background: var(--unBlue4);
        }

        & .table-col-body {
            padding: .8em .8em .8em 1.2em;
        }
    }
}

details {

    & .details-contents {
        background: var(--unBlue6);
        padding: .1rem 1rem;
    }

    & summary {
        padding-top: .5rem;
        margin-bottom: .5rem;
        cursor: pointer;
        transition: opacity .2s;

        &:hover {
            opacity: .6;
        }
    }

    & p {
        color: var(--gray1);
    }
}

.ref-note {
    position: relative;
    font-size: .7rem;
    font-weight: 600;
    color: var(--blue2);
    cursor: pointer;
    overflow: hidden;

    & .ref-note-text {
        visibility: hidden;
        min-width: 30ch;
        max-width: 50ch;
        background-color: var(--gray5);
        padding: .2rem;
        border: .5px solid var(--gray4);
        border-radius: 3px;
        font-weight: normal;
        color: black;

        position: absolute;
        z-index: 1;
        bottom: 0;
        left: -15ch;
        opacity: 0;
        transition: opacity .2s, bottom .5s;
    }

    &:hover .ref-note-text {
        visibility: visible;
        opacity: 1;
        bottom: 150%;
    }
}