/*
Styles for the block editor and front end
*/

/* Gutenberg */

*[class^="wp-block-"] { /* put a margin at the bottom of each block */
    margin-bottom:      2em;
}


/* =================== Audio =================== */

.wp-block-audio {}

/* =================== Block Columns =================== */
/* leave spacing between columns */
/* use the column gap for spacing */
/* use Gutenberg default column
 .wp-block-columns {
    grid-column-gap: 1.0em;
}

.wp-block-columns *[class^="wp-block-"] {
    margin:         0;
}
/*

/* =================== Buttons =================== */

.wp-block-button {
    line-height:    1.25;
    padding:        .6em 1em;
    text-align:     center;
}

.wp-block-button a {
    border:         0;
    font-weight:    bold;
}

.wp-block-button:not([style]) a:hover,
.wp-block-button:not([style]) a:focus {
    color:          #fff;
}

.wp-block-button.alignwide,
.wp-block-button.alignfull {
    display:        block;
}

.wp-block-button.is-style-squared .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  border-radius: 0;
}

.wp-block-button .wp-block-button__link {
  border-radius: 23px;
  font-family: Raleway;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 12px;
  text-transform: uppercase;
}

.wp-block-button.is-style-squared .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  border-radius: 0;
}



/* =================== Categories =================== */


.wp-block-categories {}

.wp-block-categories-list ul,
.wp-block-categories-list li {
    list-style:     none;
    margin:         0;
    padding:        0;
}

.wp-block-categories-list li {
    padding:        0.25em 0;
}

.wp-block-categories-list li:not(:last-child) {
    border-bottom: 1px dashed rgba(0,0,0,0.2);
}

.wp-block-categories-list ul ul {
    padding-left:       2em;
}

.wp-block-categories-list ul ul li:last-child {
    padding-bottom:     0;
}

.wp-block-categories-dropdown {}



/* =================== Code =================== */

/* =================== Preformatted =================== */

/* Overrides to match theme */
.wp-block-code,
.wp-block-preformatted {
    background:         #f6f6f6;
    border:             1px solid #eeeeee;
    border-radius:      0;
    font-family:        'Inconsolata', monospace;
    font-size: 90%;
    height:             auto;
    margin:             0;
    margin-bottom:      1.5em;
    outline:            none;
    overflow:           auto;
    padding:            20px;
    vertical-align:     middle;
    width:              100%;
    word-wrap:          break-word;
    white-space:        pre-wrap;
}

.wp-block-code .blocks-plain-text {
    background:         transparent;
    border:             none !important;
    color:              inherit !important;
    font-family:        inherit!important;
    font-size:          0.8em;
    margin:             0 !important;
    xoverflow-x:            auto!important;
    padding:            0 !important;
}



/* =================== Cover Images =================== */




/* =================== Dropcaps =================== */

.has-drop-cap {
    padding-bottom: 20px;
}

/* Galleries */
ul.wp-block-gallery {
    clear:      both;
}

ul.wp-block-gallery,
ul.wp-block-gallery li {
    padding:            0;
}

ul.wp-block-gallery.alignnone {
    display:        flex;           /* override some themes */
}

/* =================== Images =================== */
.wp-block-image {}

.wp-block-image.aligncenter {
    margin:             0 auto;
}

.wp-block-image .alignleft {
    margin-right: 2em;
}

.wp-block-image .alignright {
    margin-left: 2em;
}

body:not(.has-sidebar) .entry-content .alignwide {
    width: auto;
    max-width: 1000%;
    margin-right: calc(25% - 25vw);
    margin-left: calc(25% - 25vw);
}

body:not(.has-sidebar) .entry-content .alignfull {
    width: auto;
    max-width: 1000%;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}


@media (max-width: 767px) {
    figure.wp-block-image.alignleft {
        max-width:      50%;                    /* make responsive */
    }

    figure.wp-block-image.alignright {
        max-width:      50%;                    /* make responsive */
    }
}

figure.wp-block-image.alignleft {
    margin:             .1em 1.0em 1.0em 0;     /* this leaves margins when float-left or float-right */
}

figure.wp-block-image.alignright {
    margin:             .1em 0em 1.0em 1.0em;   /* this leaves margins when float-left or float-right */
}

figure.wp-block-image.aligncenter {
    margin:             1.0em auto 1.0em auto;  /* this leaves margins when aligncenter */
}

.wp-block-image figcaption {            /* custom styling for .wp-block-image figcaption - make a bit closer to the image in #content, not editor */
    margin:             .5em 0 .25em 0;
}


/* =================== Embed =================== */

.wp-block-embed {
    clear:              both;
}

*[class^="wp-block-embed-"] {
    clear:              both;
}

.wp-block-embed .wp-block-embed__wrapper iframe {
    max-width: 100%;
}

.wp-block-embed.aligncenter .wp-block-embed__wrapper iframe {
    display: block;
    margin: 0 auto;
}


/* =================== Latest Posts =================== */

.wp-block-latest-posts__post-date {
    color:              inherit;
    margin-bottom:      0;
    opacity:            0.8;
}

.wp-block-latest-posts,
.wp-block-latest-posts li {
    list-style:         none;
    margin:             0;
}

.wp-block-latest-posts li {
    padding:            0.25em 0;
}

#content .wp-block-latest-posts li {
    padding:            0.25em 2em;
}

.wp-block-latest-posts li:not(:last-child) {
    border-bottom:      1px dashed rgba(0,0,0,0.2);
}

.wp-block-latest-posts.is-grid li {
    border:             0;
}


/* =================== Pullquotes & Blockquotes =================== */

blockquote.wp-block-quote {

}

.wp-block-quote p {

}


.wp-block-quote cite {

}




/* =================== Separator =================== */

.wp-block-separator {
    border: none;
    background: #eee;
    height: 2px;
    margin: 1.0em auto;
    width: 90%;
}


/* =================== Tables ===================
 *
 * Overrides to match theme table styling
 *
 */

.wp-block-table {
    display:            table;
}

.wp-block-table th {
    padding:            4px 4px;
    text-align:         left;
}

.wp-block-table td {
    margin:             0;
    padding:            4px 4px;
}


/* =================== Text Columns =================== */

@media only screen and ( max-width: 580px ) {   /* for phones */
    .wp-block-text-columns,
    .wp-block-text-columns.aligncenter {
        display:        block;
    }

    .wp-block-text-columns.columns-2 .wp-block-column,
    .wp-block-text-columns.columns-3 .wp-block-column,
    .wp-block-text-columns.columns-4 .wp-block-column {
        float:          none;
        margin-left:    0;
        margin-right:   0;
        width:          100%;
    }
}




/* =================== Verse =================== */

pre.wp-block-verse {
    background:         #f6f6f6;
    border:             none;
    border-width:       0;
    border-left:        4px solid #777777;
    box-shadow:         none;
    font-family: inherit;
    font-size:          95%;
    font-style:         italic;
    margin:             1.5em 0;
    padding:            30px 20px;
    width: 100%;
    white-space: pre-wrap !important; 
}



/* =================== Video =================== */
.wp-block-video {}

.wp-block-video video,
.wp-block-video iframe {
    max-width:          100%;
}

/* =================== Full and Wide =================== */

@media screen and (max-width: 767px) {  /* mobile */

    [class^="wp-block-"] {
        margin-botom: 1em;
    }

    *[class^="wp-block-"].alignleft,
    *[class^="wp-block-"].alignright {
        max-width:      75%;
    }
}

.tsg-plugin .wp-block-cover-image.alignwide,
.wp-block-cover-image.aligncenter {             /* This rule makes the image full width on desktops */
        width:          100%;
        margin-left:    auto;
        margin-right:   auto;
}

.wp-block-cover-image.alignright {
    width:              30%;
    margin-left:        1.5em;
}

.wp-block-cover-image.alignleft {
    width:              30%;
    margin-right:       1.5em;
}


/*
 * If you want to extend these to your theme support when Gutenberg is not installed,
 * then they need to be in the theme's main style.css. Here, they support Gutenberg paragraphs.
 *
 */

.alignfull,
.alignwide,
.aligncenter {
    clear:              both;
}

.wp-block-cover-image {         /* make cover images display more responsively */
    background-position:    center center;
}


/*
 * Wide and full make sense only on wide screens, so we wrap it all with the @media.
 * Extending images and areas to full width (beyond the normal content width) requires
 * overflow to be visible, and this can cause problems if there are sidebars being displayed.
 * Weaver Xtreme adds a couple of classes to the <body> so the full and wide width can be extended
 * only on full width pages (.weaverx-sb-one-column and .weaverx-has-sb).
 *
 * Note that editor internally styles wide and full.
 * The vw technique use here to work with virtually any theme, but does not work with the
 * editor's internal wide/full - it leads to a horizontal scroll bar on the bottom of the
 * editor. Prefixing with a front-end only prefix (.tsg-plugin) makes thes apply only then.
 */
@media (min-width: 768px) {

    /* alignfull images look best all the way to the edge */


    /*
     * These are non-image based blocks, and can look better with a bit of a left/right margin.
     *
     *
     * */

    /* non-image based blocks use the fallback fullwidth
    .wp-block-columns.alignfull,
    .wp-block-text-columns.alignfull,
    .wp-block-table.alignfull,
    .wp-block-preformatted.alignfull,
    .wp-block-button.alignfull,
    .wp-block-verse.alignfull,
    .wp-block-latest-posts.alignfull,
    .wp-block-categories.alignfull,
    .wp-block-pullquote.alignfull,
    p.alignfull {
        margin-left:    calc(50% - 46vw) !important;
        margin-right:   calc(50% - 46vw) !important;
        width:          92vw            !important;
        max-width:      1000%           !important;
    }

    */

    .tsg-plugin .alignfull,
    .tsg-plugin .wp-block-image.alignfull img {
        margin-left:    calc(50% - 50vw)    !important;
        margin-right:   calc(50% - ( 50vw - 12px ) )    !important;     /* take off 12px for vertical scroll bar - 16 works with all browsers */
        max-width:      1000%;
        width:          100vw !important;
    }

    /* some themes need a bit of adjustment for alignfull */
    .tsg-plugin.tsg-twentyseventeen .alignfull,
    .tsg-plugin.tsg-twentyseventeen .wp-block-image.alignfull img {
        margin-left:    calc(50% - 48.75vw) !important;
        margin-right:   calc(50% - 48.75vw) !important;     /* take off 12px for vertical scroll bar - 16 works with all browsers */
        max-width:      1000%;
        width:          97.5vw !important;
    }

    .tsg-plugin.align-full-90 .alignfull,
    .tsg-plugin.align-full-90 .wp-block-image.alignfull img,
    .tsg-plugin.tsg-fitvids *[class^="wp-block-embed"].alignfull,
    .tsg-plugin .wp-block-pullquote.alignfull {
        margin-left:    calc(50% - 45vw)    !important;
        margin-right:   calc(50% - 45vw )   !important;     /* take off 12px for vertical scroll bar - 16 works with all browsers */
        max-width:      1000%;
        width:          90vw !important;
    }

    .tsg-plugin .alignwide,
    .tsg-plugin .wp-block-image.alignwide img,
    .tsg-plugin.tsg-fitvids *[class^="wp-block-embed"].alignwide {
        margin-left:    calc(50% - 40vw) !important;
        margin-right:   calc(50% - 40vw) !important;
        max-width:      1000%;
        width:          80vw !important;
    }

    /* Video embeds don't work correctly for wide/full unless fitvids is installed - see .tsg-fitvids rules above */
    .tsg-plugin *[class^="wp-block-embed"].alignwide,
    .tsg-plugin *[class^="wp-block-embed"].alignfull {
        margin-left:    0 !important;
        margin-right:   0 !important;
        width:          100% !important;
    }

    /* theme specific rules - for a few selected themes */
    .caos .col-md-8 { width: 100%; }

} /* end of @media */

/* end */