/*------------------------------------*\
   Tufte CSS for quotes and side/margin notes 
\*------------------------------------*/



/*------------------------------------*\
   Quotes
\*------------------------------------*/
.quote {
    font-size: 0.9rem;
    
    border-left: 5px solid var(--accent-colour);
    
    padding-left: 1rem;
    margin: 0 0 1rem 0;
    white-space: normal;
}
.quote__content {
    font-style: italic;
    margin: 0;
}

.quote__footer {
    font-size: 0.8rem;
    font-style: normal;
    font-weight: bold;
}
.quote__cite {
    font-style: italic;
    font-weight: normal;
}

/*------------------------------------*\
   Sidenotes and marginnotes
\*------------------------------------*/
.sidenote, .marginnote {
    float: right;
    clear: right;
    margin-right: -58%;
    width: 50%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.3;
    vertical-align: baseline;
    position: relative;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}
.sidenote-number:after, 
.sidenote:before {
    position: relative;
    vertical-align: baseline;
}
.sidenote-number:after {
    content: counter(sidenote-counter);
    font-size: 0.75rem;
    top: -0.5rem;
    left: 0.1rem;
}
.sidenote:before {
    content: counter(sidenote-counter) " ";
    font-size: 0.75rem;
    top: -0.5rem;
}

blockquote .sidenote, 
blockquote .marginnote {
    margin-right: -82%;
    min-width: 59%;
    text-align: left;
}

input.margin-toggle { 
    display: none; 
}

label.sidenote-number { 
    display: inline; 
}

label.margin-toggle:not(.sidenote-number) { 
    display: none; 
}




@media (max-width: 768px) {
    .quote {
        margin-left: 1.5em;
        margin-right: 0;
   }
    .quote__content, 
    .quote__footer {
        width: 100%;
   }
   
    label.margin-toggle:not(.sidenote-number) {
        display: inline;
   }
    .sidenote, 
    .marginnote {
        display: none;
   }
   
    .margin-toggle:checked + .sidenote, 
    .margin-toggle:checked + .marginnote {
        display: block;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
        margin: 1rem 2.5%;
        position: relative;
   }
    label {
        cursor: pointer;
   }
}