
// .post-content div.text{
//     max-width: $editor-width;
//     margin-left: auto;
//     margin-right: auto;
// }

div.text{
	font-size: $font-size-editor;
    line-height: $line-height-editor;
    font-weight: $font-weight-editor;
    strong, b{ font-weight: 600; }
	iframe{ max-width: 100%; }
	hr{ display: inline-block; width: 100%; clear: both; }
	div.ep-map img, div#map_canvas img{ max-width: none !important; height: inherit; }
	img{
		max-width: 100%;
        height: auto;
        border-radius: 7px;
	}
	img.alignleft{ margin: 0 $editor-base-unit * 0.75 $editor-base-unit * 0.75 0; }
    img.alignright{ margin: 0 0 $editor-base-unit * 0.75 $editor-base-unit * 0.75; }
    img.aligncenter{ margin-bottom: 0; }
	h1, h2, h3, h4, h5, h6{ 
        font-weight: 700;
        font-family: $title-font-family;
    }
	h1{ font-size: 34px; padding-top: $editor-base-unit * 0.62; margin-bottom: $editor-base-unit * 0.38; line-height: 1.3; }
	h2{ font-size: 28px; padding-top: $editor-base-unit * 0.45; margin-bottom: $editor-base-unit * 0.55; line-height: 1.4; }
	h3{ font-size: 24px; padding-top: $editor-base-unit * 0.65; margin-bottom: $editor-base-unit * 0.45; line-height: 1.5; }
	h4{ font-size: 18px; padding-top: $editor-base-unit * 0.25; margin-bottom: $editor-base-unit * 0.75; }
	h5{ font-size: 16px; padding-top: $editor-base-unit * 0.25; margin-bottom: $editor-base-unit * 0.75; }
    h6{ font-size: 14px; padding-top: $editor-base-unit * 0.25; margin-bottom: $editor-base-unit * 0.75; }

	// Links and buttons
    a{
        text-decoration: underline;
    }
    a:not([class]){ 
        color: $red;
        text-decoration: underline;
        &:hover{
           color: $text-color;
           border-color: $text-color;
        }
    }
	a.ep-shortcode:hover, .ep-shortcode a:hover{ text-decoration: none; }

	// Lists
    ul, ol{ margin: 0 0 0 25px; }
    ul, ul li{ list-style-type: disc; list-style-position: inside; position: relative; }
	ol, ol li{ list-style-type: decimal; list-style-position: inside; }
	ol ol{ list-style: upper-alpha; }
	ol ol ol{ list-style: lower-roman; }
	ol ol ol ol{ list-style: lower-alpha; }
    ul ul, ol ol, ul ol, ol ul{ margin-bottom: 0; padding-bottom: 0; padding-top: 10px; }

	// Definitions
	dl{ margin: 0 1.5em; }
	dt{ font-weight: 600; }
	dd { margin-bottom: 15px; }
	abbr, acronym{ border-bottom: 1px dotted; cursor: help; }
	ins{ text-decoration: none; }
	dd, pre, blockquote{
		margin-bottom: 20px;
	}

	// Quotes
	blockquote{
		padding: 20px 50px;
		margin: 0 0 25px 0;
		border-left: 0;
		font-style: italic;
		// color: $black2;
		position: relative;
        z-index: 1;
        &:before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 6px;
            height: 100%;
            background: $green;
            border-radius: 6px;
        }
		cite{ opacity: .85; }
		ul{ padding-bottom: 0; }
        p{ padding-top: 0; }
        p:last-of-type{ margin-bottom: 0; }
	}

	// Codes
	pre{ overflow: auto; max-width: 100%; max-height: 400px; font-size: 15px; }
	pre:not([class*="language-"]), code:not([class*="language-"]){
		font-family: Monaco, monospace;
		background: #f9f9f9;
		color: #555;
        border: 1px solid #ddd;
        border-radius: 3px;
	}
	code:not([class*="language-"]){ padding: 3px 8px; margin: 0 1px; font-size: 16px; display: inline-block; }
	pre:not([class*="language-"]){
		padding: 25px;
		line-height: 1.8;
		overflow: auto;
		code:not([class*="language-"]){ border: 0; }
		ol{ margin: 0 0 0 35px; padding: 0; list-style: decimal; list-style-position: outside; }
		ol li{ padding-bottom: 0; list-style-position: outside;  }
	}

	// Tables
	table{ text-align: center; border: 1px solid #ddd; width: 100%; max-width: 100%; }
	table, table th, table td{ border: 1px solid #ddd; padding: 8px; text-align: center; vertical-align: middle; }
	table th{ font-weight: 600; }
	.gallery dl{ margin: 0; }
	address{ font-style: italic; margin-bottom: $element-padding; }

	/* =WordPress Core
	-------------------------------------------------------------- */
	.gallery-caption{ color: $text-color; }
	.bypostauthor{ color: $text-color;}
	.aligncenter,
	div.aligncenter {
	    display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: $editor-base-unit * 0.75;
        img{
            display: block;
            margin-left: auto;
            margin-right: auto; 
        }
	}
	.alignright {
	    float: right;
	    margin: 0px 0 $editor-base-unit * 0.75 $editor-base-unit * 0.75;
	}
	.alignleft {
	    float: left;
	    margin: 0px $editor-base-unit * 0.75 $editor-base-unit * 0.75 0;
	}
    .has-text-align-center{ text-align: center; }
    .has-text-align-right{ text-align: right; }
    .has-text-align-left{ text-align: left; }
	.wp-caption {
	    background: #fff;
	    border: 1px solid $border-color;
	    max-width: 96%; /* Image does not overflow the content area */
	    padding: 8px 3px 10px !important;
        text-align: center;
        margin-bottom: $element-padding;
        border-radius: 7px;
		img {
		    border: 0 none;
		    height: auto;
		    margin: 0;
		    max-width: 98.5%;
		    padding: 0;
		    width: auto;
		}
		p.wp-caption-text {
		    font-size: 12px;
		    line-height: 17px;
		    margin: 0;
		    padding: 8px 4px 0;
		}
    }
    
    // WP Gallery
    .gallery, .attachment, .wp-caption, div{
        a:not(.button):not(.epcl-button){ border: 0; }
    }

	/* Text meant only for screen readers. */
	.screen-reader-text {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
	}
	.screen-reader-text:focus {
		background-color: #eee;
		clip: auto !important;
		clip-path: none;
		color: #444;
		display: block;
		font-size: 1em;
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000;
    }
    
    .epcl-gallery ul{
        margin: 0 -10px;
        li{ list-style: none; padding-bottom: 20px; padding: 0 5px 10px; }
    }

    // Elements spacing

    iframe, figure, p{
        padding-top: $editor-base-unit * 0.25;
        margin-bottom: $editor-base-unit * 0.75;
    }
    p > iframe{ margin-bottom: 0; display: block; }
    hr, pre, blockquote, table{
        margin-top: $editor-base-unit * 0.25;
        margin-bottom: $editor-base-unit * 0.75;
    }
    li{ padding-bottom: $editor-base-unit * 0.25; }
    ul, ol{ 
        margin-bottom: $editor-base-unit * 0.75;
        li:last-of-type{ padding-bottom: 0; }
    }
    // p:first-of-type, ul{ margin-top: 0; padding-top: 0; }
    > :first-child{ padding-top: 0; }

    // Gutenberg Styles
    .wp-block{
        // Alignment
        &{
            max-width: $editor-width;
        }
        /* Width of "wide" blocks */
        &[data-align="wide"] {
            max-width: $editor-width;
            margin: 0 auto;
        }
        /* Width of "full-wide" blocks */
        &[data-align="full"] {
            max-width: $editor-width;
            margin: 0 auto;
        }

        // Separators
        &-separator{
            display: block;
            max-width: 100px;
            margin: 0 auto $editor-base-unit * 0.75;
            padding-top: $editor-base-unit * 0.25;
            border: 0;
            border-bottom: 2px solid $border-color;
            height: 1px;
            &.is-style-wide{ max-width: none; }
            &.is-style-dots{ border-bottom: 2px dashed $border-color; }
        }

        // Buttons
        &-button{
            padding-top: $editor-base-unit * 0.25;
            &.alignleft, &.alignright{
                padding-top: $editor-base-unit * 0.55;
            }
            .wp-block-button__link{
                padding: 7px 24px;
            }
            &.is-style-outline .wp-block-button__link{
                border: 2px solid;
            }
        }

        // Images
        &-image{
            &:not(.is-style-rounded) img{ border-radius: 7px; }
            figcaption{
                display: block;
                margin-bottom: 0;
                font-size: 13px;
                margin-top: .5em;
                text-align: center;
            }
        }
        &-gallery{
            margin-left: 0;
            ul{
                margin-left: 0;
                margin-bottom: -$editor-base-unit * 0.75;
                &:after{
                    content: ".";
                    display: block;
                    overflow: hidden;
                    visibility: hidden;
                    font-size: 0;
                    line-height: 0;
                    width: 0;
                    height: 0;
                }
            }
            li{ 
                padding-bottom: 0;
                figure{ padding-top: 0; margin: 0; border-radius: 7px; overflow: hidden; position: relative; }
                figcaption{ box-sizing: border-box; }
            }
            figcaption{
                display: block;
                width: 100%;
                margin-bottom: 0;
                font-size: 13px;
                margin-top: 1em;
                text-align: center;
                color: #fff;
                pointer-events: none;
            }
        }
        &-cover{
            border-radius: 7px;
            position: relative;
            z-index: 1;
            &.aligncenter{
                display: flex;
            }
        }

        // Files
        &-file{
            border: 1px solid #ddd;
            text-align: center;
            padding: 25px;
            border-radius: 3px;
        }
        
        // Posts and Categories
        &-categories, &-latest-posts, &-archives{
            margin-left: 0;
            min-width: 260px;
            display: inline-block;
            &.aligncenter{
                display: block;
                max-width: 260px;
                margin-right: auto;
                margin-left: auto;
                text-align: center;
            }
            li:not(.option){
                display: block;
                margin-bottom: 10px;
                padding-bottom: 10px;
                border-bottom: 1px solid $border-color;
                text-align: right;
                padding-left: 0px;
                background: none;
                line-height: 30px;
                div{
                    display: inline-block;
                }
                span{
                    display: inline-block;
                    padding: 0;
                    border-radius: 20px;
                    color: #fff;
                    background-color: $red;
                    width: 25px;
                    height: 25px;
                    text-align: center;
                    line-height: 25px;
                    font-size: 12px;
                    box-sizing: border-box;
                    #footer &{
                        color: #fff;
                    }
                }
                a{
                    float: left;
                    color: $text-color;
                    &:hover{ color: $red; }
                }
                &:before, &:after{
                    content: '';
                    display: block;
                    width: 100%;
                    clear: both;
                }
                &:last-of-type{ margin-bottom: 0 !important; border-bottom: 0; padding-bottom: 0; }
                ul.children, ul.sub-menu{
                    clear: both;
                    padding: 10px 0 0 0;
                    margin-top: 10px;
                    border-top: 1px solid $border-color;
                    margin-left: 0;
                    li{ 
                        padding-left: $grid-gap;
                    }
                }
            }
        }

        &-latest-posts{
            display: block;
            min-width: inherit;
            &.is-grid{
                display: flex;
                li:last-of-type{ margin-bottom: 10px !important; border-bottom: 1px solid $border-color; padding-bottom: 10px; }
            }
            li{
                text-align: left;
            }
        }

        &-archives{
            &-dropdown ul{
                margin: 0;
            }
        }

        // Comments
        &-latest-comments{
            list-style: none;
            margin-left: 0;
            li{
                list-style: none; 
                display: block;
                margin-top: 20px;
                position: relative;
                border-bottom: 1px solid $border-color;
                padding-bottom: 10px;
            }
            &__comment-excerpt{
                p{ padding-bottom: 10px; margin: 0; }
            }
            &__comment-meta{
                font-family: $title-font-family;
                font-size: 16px;
                a{ font-weight: 600;  }
            }
        }
        
        // Quotes
        &-quote{
            padding: 20px 50px;
            margin: 0 0 25px 0;
            border-left: 0;
            font-style: normal;
            color: $black2;
            position: relative;
            z-index: 1;
            &:before{
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 6px;
                height: 100%;
                background: $green;
                border-radius: 6px;
            }
            cite{ opacity: .5; font-size: 85%; }
            ul{ padding-bottom: 0; }
            p{ padding-top: 0; }
            p:last-of-type{ margin-bottom: 0; }
        }

        &-pullquote{
            padding: 0 50px;
            margin-top: $editor-base-unit * 0.25;
            position: relative;
            z-index: 1;
            border: 0;
            &:before, &:after{
                content: '';
                width: 100%;
                height: 4px;
                position: absolute;
                left: 0;
                background: $green;
                top: 0;
                border-radius: 6px;
            }
            &::after{ top: auto; bottom: 0; }
            blockquote{
                border-left: 0;
                padding: 20px 0;
                margin: 0;
                font-style: normal;
                &:before{ display: none; }
                p{
                    padding-top: 0;
                    margin-bottom: $editor-base-unit * 0.25;
                }
                cite{
                    padding-bottom: $editor-base-unit * 0.25;
                }
                
            }
        }

        // Embeds        
        &-embed{
            figcaption{ display: block; padding-top: $editor-base-unit * 0.25; }
            iframe{ display: block; padding: 0; margin: 0; }
            &.aligncenter:not(.wp-has-aspect-ratio){
                display: table;
            }
        }

        // Tables

        &-table{
            border-color: #ddd;
        }
        

    }



}

/* Global TOC without widget styles */

div.text .epcl-single-toc{
    margin-bottom: $editor-base-unit;
    border-bottom: 2px solid $border-color;
    border-radius: 0;
    padding: 15px 0;
    box-shadow: none;
    .toggle-title{
        font-size: 22px;
        padding: 15px 20px 0 0;
        padding-right: 30px;
        position: relative;
        margin-bottom: 0;
        cursor: pointer;
        font-weight: 700;
        transition: all $transition-time $transition-method;
        font-family: $title-font-family;
        .epcl-icon{
            display: block;
            width: 18px;
            height: 18px;
            line-height: 18px;
            color: $black1;
            font-size: 13px;
            position: absolute;
            right: 10px;
            top: 25px;
            transition: all $transition-time $transition-method;
        }
    }
    &.active .toggle-title{
        .epcl-icon{
            transform: rotate(180deg);
        }
    }
    .toggle-content{
        display: none;
        margin-bottom: 0px;
        padding: 20px 0 0;
    }
    .toc-list-item{
        padding-top: 5px;
    }
    .toc-list > .toc-list-item{
        padding-top: 0;
    }
    ol{
        font-weight: 600;
        margin: 0;
        padding: 0;
        font-size: 15px;
        ol{
            margin-top: 0;
            font-weight: 400;
        }
        li {
            counter-increment: level1;
            list-style: none;
            position: relative;
            padding-left: 15px;
            a{
                padding: 5px 0;
                &:before{ display: none;    }
            }
            &::before {
                content: counters(level1, ".") ". ";
            }
            // Level 2
            .toc-list { 
                counter-reset: level2; 
                li {
                    counter-increment: level2;
                    &::before {
                        content: counters(level1, ".") "." counter(level2) " ";
                    }
                    // Level 3
                    .toc-list { 
                        counter-reset: level3; 
                        li {
                            counter-increment: level3;
                            &::before {
                                content: counters(level1, ".") "." counters(level2, ".") "." counter(level3) " ";
                            }
                        }
                    }
                }
            }
        }
    }
}

