/*
Styles for anything rendered when calling `the_content()` (e.g. a blog post
content, a page);
*/

.lr-content {
    line-height: 1.75;
    font-family: 'Crimson Text', serif;
    font-size: 20px;
}

/* Space between paragraphs */
.lr-content  p + p {
    margin-top: 1rem;
}

/* Space around headers */
.lr-content :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.5rem 0;
    font-weight: var(--weight-bold);

    /* So that when we click on a TOC item, the header is visible despite the nav bar */
    scroll-margin-top: 100px;
}

.lr-content :is(h1, h2, h3, h4, h5, h6) code {
    /* code in headings should be slightly smaller than the heading. hence the use of em here */
    font-size: 0.8em;
}

.lr-content hr {
    border: 0;
    border-top: 1px solid var(--color-gray); 
    margin-block: 2rem;
}

/* Tables and headings are sans-serif */
.lr-content table,
.lr-content :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Proxima Nova', sans-serif;
}

.lr-content h1 {
    font-size: 2.5rem ;
}

.lr-content h2 {
    font-size: 2rem;
}

.lr-content h3 {
    font-size: 1.75rem;
}

.lr-content h4 {
    font-size: 1.5rem;
}

.lr-content h5 {
    font-size: 1.25rem;
}

.lr-content h6 {
    font-size: 1rem;
}

.lr-content ul,
.lr-content ol {
    padding-left: 48px;
}

.lr-content ul {
    list-style-type: circle;
}

.lr-content ol {
    list-style-type: decimal;
}

.lr-content > ul ,
.lr-content > ol {
    margin: 1rem 0;
}

.lr-content [data-manual-toc="true"] {
    display: none;
}

.lr-content a,
.lr-content a:visited,
.lr-content a:focus,
.lr-content a:active,
.lr-content a:hover {
    color: var(--color-purple);
}

.lr-content a:hover {
    text-decoration: underline;
}

.lr-content pre {
    background-color: var(--color-white);
    padding: 16px 20px;
    margin: 1rem 0;
}

.lr-content em {
    font-style: italic;
}

.lr-content strong {
    font-weight: var(--weight-bold);
}

/* images should be centered by default */
.lr-content img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.lr-content figure {
    max-width: 100%;
}

/* classes applied by the wordpress block editor */
.lr-content .alignright {
    float: right;
    margin: 0 0 1em 1em;
}

.lr-content .alignleft {
    float: left;
    margin: 0 1em 1em 0;
}

.lr-content .aligncenter {
    display: block;
    margin: 0 auto;
}

.lr-content blockquote {
    font-style: italic;
    color: var(--color-dark-gray);
    margin: 1rem 0;
    padding-left: 1rem;
}

.lr-content {
    max-width: 100%;
}

.lr-content figcaption {
    font-style: italic;
    font-size: var(--fs-5);
    padding: 0.5rem;
    background-color: var(--color-white);
}

.lr-content table {
    display: block;
    overflow: auto;
    font-size: var(--fs-6);
    font-weight: var(--weight-bold);
    max-width: max-content;
    margin-inline: auto;
}

.lr-content table td,
.lr-content table th {
    border: 1px solid var(--color-gray);
    padding: 8px;
    vertical-align: middle;
}

.lr-content table thead {
    font-weight: var(--weight-regular);
    color: var(--color-white);
    background-color: var(--color-purple);
}

.lr-content table thead code {
    background-color: inherit;
}

.lr-content table tr:nth-child(2n) {
    background-color: var(--color-light-gray);
}

.lr-content iframe {
    max-width: 100%;
}

/*
Styling copied from the mediumish theme
*/

.lr-content .gallery {
	margin-bottom:1.5em;
}

.lr-content .gallery-item {
	display:inline-block;
	text-align:center;
	vertical-align:top;
	width:100%;
}

.lr-content .gallery-columns-2 .gallery-item {
	max-width:50%;
}

.lr-content .gallery-columns-3 .gallery-item {
	max-width:33.33%;
}

.lr-content .gallery-columns-4 .gallery-item {
	max-width:25%;
}

.lr-content .gallery-columns-5 .gallery-item {
	max-width:20%;
}

.lr-content .gallery-columns-6 .gallery-item {
	max-width:16.66%;
}

.lr-content .gallery-columns-7 .gallery-item {
	max-width:14.28%;
}

.lr-content .gallery-columns-8 .gallery-item {
	max-width:12.5%;
}

.lr-content .gallery-columns-9 .gallery-item {
	max-width:11.11%;
}
.gallery-caption {
	display:block;
}
/*
AdInsert blocks

`!important` is used here because AdInsert blocks sometimes have styles inline
in the html. It is more important that the block look and  feel like the rest
of the page, so we override them.

Once we've migrated over to the new theme, we can go in and modify the
adisnerter blocks 
*/

.lr-content .code-block:last-child {
    margin-top: 2rem !important;
    line-height: 1.75 !important;
}

/* Don't mess with the `display` property of images in ad-inserter or manual ad blocks */
.lr-content .code-block img,
.lr-content .inline-plug img {
    display: unset;
    margin: unset;
}