@import 'scss-@';
@import 'css-custom-prop';

body{
    color:var(--thm_general_text_color, #333333);

    a:any-link{
        max-width:100%;
        text-decoration:none;
        color:var(--thm_general_link_color, #666666);
        &:hover{
            color:var(--thm_general_link_hover_color, #333333);
        }
    }
    td a:any-link,
        p a:any-link{
        text-decoration: solid underline purple 1px;
    }
}
.wp-site-blocks{
    div.wp-block-query{
        width:100%;
        padding:0;
        .wp-block-query-loop{
            width:100%;
            padding:0;
            li{
                width:100%;
                padding:0;
            }
        }
    }
}

// wp-block-post-date,wp-block-post-comments-count,wp-block-post-author__byline, wp-block-post-date,wp-block-template-part,

$fse_blocks: wp-block-site-title, wp-block-site-tagline, wp-block-post-title, wp-block-post-featured-image, wp-block-post-excerpt, wp-block-site-logo
, wp-block-query, wp-block-query-pagination, wp-block-site-title, wp-block-post-comment, block-editor-default-block-appender
, wp-block-post-comments, wp-block-post-comments-form,  wp-block-post-excerpt, wp-block-post-hierarchical-terms
, wp-block-post-tags, wp-block-navigation, wp-block-post-date,wp-block-post-comments-count,wp-block-post-author__byline, wp-block-post-date, wp-block-post-author;

@each $fse_block in $fse_blocks {

    .enable-alignfull{

        .#{$fse_block}{
            &.alignwide{
                @extend %alignwide;
            }
        }

        &.emulsion-has-sidebar{

            .#{$fse_block}{
                &.alignfull{
                    @extend %has-sidebar-alignfull;

                    left:0;

                }
            }
            .edit-site .wp-block[data-align="full"]{
                @extend %has-sidebar-alignfull;
                position:static!important;
                margin-left:auto;
                margin-right:auto;
                left:0;

            }
        }
        &.emulsion-no-sidebar{

            .#{$fse_block}{
                &.alignfull{
                    @extend %no-sidebar-alignfull;

                }
            }

            .edit-site .wp-block[data-align="full"]{
                @extend %no-sidebar-alignfull;
                position:static!important;
                margin-left:auto;
                margin-right:auto;

            }
        }
    }

    .emulsion{

        .#{$fse_block}{
            @extend %block;
        }
        .#{$fse_block}{
            &.aligncenter {
                @extend %aligncenter;
            }
        }
        .#{$fse_block}{
            &.alignleft{
                @extend %alignleft;

            }
        }
        .#{$fse_block}{
            &.alignright{
                @extend %alignright;

            }
        }
        .#{$fse_block}{
            margin-left:auto;
            margin-right:auto;
        }
        .#{$fse_block}__inner-container{
            padding-left:0;
            padding-right:0;
            h1,h2,h3,h4,h5,h6{

            }
            div,figure{
                padding-left:0;
                padding-right:0;
            }
        }
    }
    .disable-alignfull{
        .wp-site-blocks{
            @extend %block;
            margin:0 auto;
            padding:0;

        }

    }

}
.enable-alignfull{
    .wp-block-template-part{
        width:100%;
        padding-left:0;
        padding-right:0;
    }

}
.wp-site-blocks{
    overflow:hidden;
    .wp-block-template-part{
        overflow:hidden;
        width:auto;
        padding-left:0;
        padding-right:0;
        overflow:hidden;
    }
}
.is-singular .wp-block-post-title a{
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.wp-block-template-part{
    display:block;
    width:100vw;
    //@extend %block;
    margin-left:auto;
    margin-right:auto;
    margin:auto;
    padding:0;

    [class|="wp-block"].alignfull{
        width:100%;
    }
    [class|="wp-block"].alignwide{
        @extend %alignwide;
    }
}

// HEADER
body header.header-layer,
body .wp-block-template-part header.fse-header{
    .site-title,
    .wp-block-site-title{
        margin:0 auto;
        padding-top: var(--thm_content_gap, 24px);
        padding-left: var(--thm_content_gap, 24px);
        font-size:24px;
        line-height:1.15;
        &.alignleft{
            margin-left:0;
        }
        &.alignright{
            text-align:right;
            margin-right:0;
        }
    }
    .site-description,
    .wp-block-site-tagline{
        width: var(--thm_content_width, 720px);
        max-width: 100%;
        margin: 0 auto 0.75rem;
        padding-left: var(--thm_content_gap, 24px);
        padding-right: var(--thm_content_gap, 24px);
        box-sizing: border-box;
        &.alignleft{
            margin-left:0;
        }
        &.alignright{
            text-align:right;
            margin-right:0;
        }
    }
}

.emulsion .wp-block-post-featured-image{
    width:100vw;
    padding-left:0;
    padding-right:0;
    margin-top:0;
    overflow:hidden;
    img{
        width:100vw;
        height: var(--thm_header_media_max_height, 75vh);
        object-fit:cover;
        position:relative;
        filter:brightness(70%);
    }
}


.wp-block-post-title{
    width:-moz-fit-content;
    width:fit-content;
    margin:1.5rem auto .75rem;
}
article header{
    //min-height:25vh;
    margin-bottom:0;
    text-align:center;
    .posted-on{
        width:auto;

        display:inline-flex;
        margin:1.5rem auto .75rem;

        .wp-block-post-date{

            white-space:pre;
            width:fit-content;
            flex-grow:0;
            display:inline;
            padding:0;
            vertical-align:middle;

        }
        .wp-block-post-author{
            padding:0;
            width:auto;
            flex-grow:0;

            display: inline-flex;
            .wp-block-post-author__avatar{
                display:inline;
                margin:0;
                vertical-align:middle;
                width:24px;
            }
            .wp-block-post-author__content{
                display:inline;
                margin:0;
                vertical-align:middle;
                width:4rem;
                overflow:visible;
                white-space:pre;
                .wp-block-post-author__name{
                    padding-left:.25rem;
                    padding-right:0;
                    text-align:left;

                }
            }

        }
        .wp-block-post-comments-count{

            display:inline;
            width:auto;

            vertical-align:middle;
        }
    }

}

.wp-block-post-terms{
    width:-moz-fit-content;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
}

.wp-block-query-loop{

    width:100%;
    padding:0;
    margin:0;
    li{
        &:before{
            display:none;

        }
        .wp-block-post-title{
            width:-moz-fit-content;
            width:fit-content;
            margin:1.5rem auto .75rem;
        }
        header{
            //  min-height:25vh;
            margin-top:1.5rem;
            margin-bottom:0;
            text-align:center;
            .posted-on{
                width:400px;
                display:block;
                margin:0 auto .75rem;

                .wp-block-post-date{
                    display:inline-block;
                    float:left;
                    width:198px;
                    white-space:pre;
                    padding:0;
                    margin:0;
                    vertical-align:middle;
                    font-size:var(--thm_meta_data_font_size);
                    text-align:right;

                }
                .wp-block-post-author{
                    float:right;
                    width:198px;
                    padding:0;
                    margin:0;
                    line-height:calc(var(--thm_meta_data_font_size) * var(--thm_content_line_height));
                    display:flex;
                    flex-direction:row;
                    flex-wrap: nowrap;
                    align-items: baseline;
                    .wp-block-post-author__avatar{
                        flex:0 0 auto;
                        display:inline-block;
                        margin:0;

                        width:calc( var(--thm_meta_data_font_size) * var(--thm_content_line_height));
                        height:calc( var(--thm_meta_data_font_size) * var(--thm_content_line_height));
                        img{
                            vertical-align:middle;
                        }
                    }
                    .wp-block-post-author__content{
                        flex:1 1 auto;
                        display:inline-block;
                        margin:0;
                        vertical-align:middle;
                        width:auto;
                        overflow:visible;
                        white-space:pre;
                        height:calc( var(--thm_meta_data_font_size) * var(--thm_content_line_height));
                        .wp-block-post-author__name{
                            padding-left:.25rem;
                            padding-right:0;
                            text-align:left;

                        }
                    }

                }
                .wp-block-post-comments-count{

                    display:inline;
                    width:auto;

                    vertical-align:middle;
                }
            }
            .taxsonomy{
                margin:1.5rem auto .75rem;

            }
        }

    }

    li.has-post-thumbnail{

        position:relative;
        header{

            position:absolute;
            z-index:10;
            top:calc( var(--thm_header_media_max_height) / 3);
            left:0;
            right:0;
            color:#fff;
            a{
                color:#fff;
            }
            .wp-block-post-date{
                position:relative;
                z-index:11;
            }
        }
        .taxsonomy{
            position:absolute;
            z-index:10;
            top:calc( var(--thm_header_media_max_height) / 1.5);
            left:0;
            right:0;
            color:#fff;
            a{
                color:#fff;
            }

        }
        .wp-block-post-featured-image{
            width:100%;
            padding-left:0;
            padding-right:0;
            margin-top:0;
            overflow:hidden;
            img{
                width:100vw;
                height: var(--thm_header_media_max_height, 75vh);
                object-fit:cover;
                position:relative;
                filter:brightness(70%);
            }
        }

        .wp-block-post-excerpt__excerpt{
            display:none;
            .wp-block-post-excerpt__more-text{
                display:none;
            }
        }
    }
}

.wp-block-post-excerpt{
    .wp-block-post-excerpt__excerpt{
        width:-moz-fit-content;
        width:fit-content;
        margin:1.5rem auto .75rem;
    }
}
.emulsion-has-sidebar{
    //transitional
    .wp-block-post-featured-image{
        width:100%;
        padding-left:0;
        padding-right:0;
        margin-top:0;
        overflow:hidden;
        img{
            width:100vw;
            max-height: var(--thm_header_media_max_height, 75vh);
            object-fit:cover;
            position:relative;
            filter:brightness(70%);
        }
    }
    .wp-block-query-loop{
        li.has-post-thumbnail{
            position:relative;
            .wp-block-post-featured-image{
                // position:absolute;
            }
            .wp-block-post-title{
                position:absolute;
                z-index:10;
                text-align:center;
                top:calc( var(--thm_header_media_max_height) / 2);
                a{
                    color:#fff;
                }
            }
            .wp-block-post-date{
                position:relative;
                z-index:11;
                top:calc( var(--thm_header_media_max_height) / -2);
                color:#fff;
            }
            .wp-block-post-excerpt{
                position:absolute;
                margin:0;
                .wp-block-post-excerpt__excerpt{
                    display:none;
                    margin:0;
                    .wp-block-post-excerpt__more-text{
                        display:none;
                        margin:0;
                    }
                }
            }
        }
    }
}

html:not([class]){
    // pure fse
    &.emulsion [class|="wp-block"] li:before{
        display:none;
    }
    .search-results .wp-block-post-content{
        width:var(--thm_content_width);
        padding-left:var(--thm_content_gap);
        padding-right:var(--thm_content_gap);
        margin:1.5rem auto .75rem;
        display:block;
        text-align:center;
    }
    body > .wp-site-blocks{
        /**
         * Pure FSE
         */
        .wp-block-query-loop{
            width:100vw;
            padding:0;
            margin:0;
            li{
                &:before{
                    display:none;

                }
                .wp-block-post-title{
                    width:-moz-fit-content;
                    width:fit-content;
                    margin:1.5rem auto .75rem;
                }

            }
        }
        .wp-block-template-part{
            display:block;
            width:100vw;
            @extend %block;
            margin:auto;
            padding:0;

            [class|="wp-block"].alignfull{
                width:100vw;
                overflow:hidden;
            }
            [class|="wp-block"].alignwide{
                @extend %alignwide;
            }
        }

        .article-header{
            overflow:hidden;
        }
        /*       .fse-posted-on{
                   table-layout:fixed;
                   width: var(--thm_content_width, 720px) ;
                   max-width: 100%;

                   td{
                       border:none;
                       padding:0;
                       vertical-align:middle;
                   }

                   .wp-block-post-date{

                       padding:0;
                       margin:0;
                       text-align:center;
                   }
                   .wp-block-post-author{
                       display:flex;
                       padding:0;
                       margin:0;
                       div{
                           padding-left:0;
                           padding-right:0;
                       }
                       .wp-block-post-author__content{
                           width:auto;

                           p{
                               width:auto;
                               max-width:100%;
                               padding:0;
                               line-height:48px;
                           }
                       }
                   }

               }*/
        .article-footer{
            text-align:left;
        }

        .wp-block-post-excerpt__excerpt{
            line-height:var(--thm_content_line_height);
            height:calc(var(--thm_common_font_size) * var(--thm_content_line_height) * 4);
            overflow:hidden;
            &:empty{
                display:none;
            }
        }
        .wp-block-query-pagination{
            a{
                height:calc(var(--thm_common_font_size) * var(--thm_content_line_height) * 2);
                padding-top:var(--thm_common_font_size);
                box-sizing:border-box;
            }
        }

    }
}
.emulsion{
    .wp-block-query-loop{
        width:100%;
        padding:0;
        margin:0;
    }
}
.emulsion-fse-active{
    //body > div:not(.wp-site-blocks)
    main .wp-site-blocks{
        /**
         * FSE transitional
         * relate Theme
         */
        // experimental hide header
        .wp-block-template-part{
            .fse-header{
                display:none;
            }
        }

        a:any-link{
            text-decoration:none;
        }
        ul.wp-block-query-loop{
            width:100%;
            padding:0;
            margin:0;
            li{
                &:before{
                    display:none;

                }
                .wp-block-post-title{
                    width:-moz-fit-content;
                    width:fit-content;
                    margin:1.5rem auto .75rem;
                }

            }
        }
        .wp-block-post-featured-image{
            width:100%;
            padding-left:0;
            padding-right:0;
            margin-top:0;
            overflow:hidden;
            img{
                width:100vw;
                height: var(--thm_header_media_max_height, 75vh);
                object-fit:cover;
                position:relative;
            }

        }

        $fse_containers: wp-block-post-content, wp-block-post-excerpt;

        @each $fse_container in $fse_containers {

            .enable-alignfull{
                .#{$fse_container}{
                    width:100%;
                    &.alignwide{
                        @extend %alignwide;
                    }
                }
            }
        }

        body{
            margin:0;
            padding:0;
            line-height:var(--thm_content_line_height, 1.5);
            //word-break:break-word;
            overflow-wrap:break-word;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            hyphens: auto;
            overflow-x:hidden;
            box-sizing:border-box;
        }
        .wp-block-template-part{
            display:block;
            width:100%;
            @extend %block;
            margin:auto;
            padding:0;

            [class|="wp-block"].alignfull{
                width:100%;
                overflow:hidden;
            }
            [class|="wp-block"].alignwide{
                @extend %alignwide;
            }
        }

        .wp-block-post-author {
            display: flex;
            flex-wrap: wrap;
            align-items:center;
            // width: var(--thm_content_width, 720px);
            padding-left: var(--thm_content_gap, 24px);
            padding-right: var(--thm_content_gap, 24px);
            margin-left:auto;
            margin-right:auto;
            box-sizing:border-box;
            .wp-block-post-author__content{
                width:200px;
                flex: 0 0 auto;
            }
            .wp-block-post-author__avatar{
                width:-moz-fit-content;
                width:50px;
                flex: 0 0 auto;
                padding-left:var(--thm_content_gap);
                avatar{

                }
            }

        }
        //wrong html
        //<div class="class=" wp-block-post-comments-count""="">0</div>
        .wp-block-post-comments-count{
            width: var(--thm_content_width, 720px);
            padding-left: var(--thm_content_gap, 24px);
            padding-right: var(--thm_content_gap, 24px);
            margin-left:auto;
            margin-right:auto;
        }
        /**
         * Content block
         */
        //,aside
        .emulsion-prepend-page-wrapper,
        .post-navigation,
        .pagination,
        .wp-block-query,
        blockquote cite,
        .description,
        .search-results .wp-block-post-date time,
        //.wp-block-post-date,
        address,canvas,dd,dl,dt,fieldset,
        figcaption,hr,iframe,noscript,output,pre,section,video,
        ul,ol,table,p,form,h1,h2,h3,h4,h5,h6{

            width:var(--thm_content_width, 720px);
            max-width:100%;
            margin:1.5em auto .75em;
            padding-left:var(--thm_content_gap, 24px);
            padding-right:var(--thm_content_gap, 24px);
            box-sizing:border-box;
            overflow-wrap:break-word;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            hyphens: auto;

            line-height:1.5;

        }

        table{
            width:100%;
        }
        .article-header .fse-posted-on{
            table-layout:fixed;
            width: var(--thm_content_width, 720px) ;
            max-width: 100%;

            td{
                border:none;
                padding:0;
                vertical-align:middle;
            }

            .wp-block-post-date{
                padding:0;
                margin:0;
                text-align:center;
            }
            .wp-block-post-author{
                display:flex;
                padding:0;
                margin:0;
                div{
                    padding-left:0;
                    padding-right:0;
                }
                .wp-block-post-author__content{
                    width:auto;

                    p{
                        width:auto;
                        max-width:100%;
                        padding:0;
                        line-height:48px;
                    }
                }
            }

        }
        .wp-block-group{
            &.emulsion-panel{
                .emulsion-panel-title{
                    margin-top:0;
                    margin-bottom:0;
                }
            }
        }
        /**
         * Structure block
         */

        form,
        .wp-block-quote{
            padding-left:0;
            padding-right:0;
            box-sizing:border-box;
        }

        .enable-alignfull{
            [class|="wp-block"].alignfull,
            .comment-form,
            .wp-block-post-comments,
            .wp-block-post-content,
            .wp-block-post-excerpt,
            .wp-site-blocks,
            .page{
                width:var(--thm_main_width);
                max-width:100%;
                margin:1.5em auto .75em;
                padding-left:0;
                padding-right:0;
            }
        }

        body.layout-list article:not(.comment-body){
            border-bottom:none;
        }
        .nav-menu-child-opener{
            visibility:hidden;
        }
        .layout-list.excerpt article{
            display:block;
        }
        .post-navigation,
        .navigation.pagination{
            display:block;
            text-align:center;
            a{
                display: block;
                width: auto;
                text-align: center;
            }
        }
    }

    .page.emulsion-header-has-title .wp-site-blocks .article-header,
    .single.emulsion-header-has-title .wp-site-blocks .article-header{
        display:none;
    }
    .page.emulsion-layout-has-title .entry-text,
    .single.emulsion-layout-has-title .entry-text{
        display:none;
    }
    .wp-block-post-date{
        // width:var(--thm_content_width, 720px);
        max-width:100%;
        margin:1.5rem auto .75rem;
        padding-left:var(--thm_content_gap, 24px);
        padding-right:var(--thm_content_gap, 24px);
        box-sizing:border-box;
    }
    .navigation.pagination{
        display:none;
    }
    .wp-site-blocks > div:not([class]){
        //query pagination yet not has class
        width:var(--thm_content_width, 720px);
        max-width:100%;
        margin:1.5rem auto .75rem;
        box-sizing:border-box;
        padding-left:var(--thm_content_gap, 24px);
        padding-right:var(--thm_content_gap, 24px);
        a{
            display:block;
            padding:1rem var(--thm_content_gap, 24px);
            border-color:var(--thm_common_border);
            border-width:1px;
            border-style:solid;
        }
    }
}

.wp-block-query-loop:not(.list-style-initial):not(.is-style-list-style-initial) li:before {
    display:none;
}
//.emulsion-fse-active,
.wp-site-blocks{
    .wp-block-query-loop{
        .wp-block-post-title{
            a.has-text{
                padding-left:0;
                padding-right:0;
            }
        }
        & ~ div:not(.wp-block-template-part){
            // width: var(--thm_content_width, 720px);
            max-width: 100%;
            margin: 1.5em auto 0.75em;
            padding-left: var(--thm_content_gap, 24px);
            padding-right: var(--thm_content_gap, 24px);
            box-sizing: border-box;
            display:flex;
            flex-wrap:wrap;
            a{
                flex:1 1 auto;
                border:1px solid;
                display:block;
                text-align:center;
            }
        }
    }
    .wp-block-search .wp-block-search__label{
        width:auto;
    }
}

// fse transitional
.emulsion-fse-active{
    .wp-nav-menu.primary{

        li.menu-item{
            width:auto;
            .nav-menu-child-opener-label{
                display:inline;
                width:auto;
                svg{
                    width:1px;
                }
            }
        }
    }

}
// Color
.wp-block-template-part{

    .fse-header{
        height:100%;
        overflow:hidden;
        margin-top:0;
        margin-bottom:0;
        color:var(--thm_header_text_color);
        background: var(--thm_header_bg_color);
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        -webkit-box-sizing:border-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-direction:column;
        flex-direction:column;
        // height:100%;
        box-sizing:border-box;

        a{
            color:var(--thm_header_link_color);
        }
    }
}
.post-navigation{
    display:flex;
    margin:1.5rem auto .75rem;
    a{
        flex:1 1  auto;
        display:block;
        text-align:center;
        /* text-align: center; */
        margin: 3px;
        padding: 0.685rem;
        flex-basis: auto;
        flex-grow: 1;
        min-width: 240px;
    }
}
.scroll-button-top{
    display:none;
}
.is-singular{
    &.logged-in{
        .wp-block-post-featured-image{
            & + .wp-block-template-part{

                top:32px;
            }
        }
    }
    .wp-block-post-featured-image{
        & + .wp-block-template-part{
            position:absolute;
            top:0;

            color:#fff;
            *{
                background:transparent ! important;
                color:#fff;
                &:hover{
                    color:#fff;
                }
            }
        }

        & ~ main{
            .wp-block-template-part.post-header{
                position:absolute;
                top:200px;
                color:#fff;
                a{
                    color:#fff;
                    &:hover{
                        color:#fff;
                    }
                }
            }
        }
    }
}