/**
 * Theme:	Flat Bootstrap
 * File:	theme-gutenberg.css
 * 
 * Our styling for Gutenberg editor and it's blocks
 *
 * @package flat-bootstrap
 */

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# General Structure
  ## Content
  ## Groups
# Typography
# Blocks
  ## Buttons
  ## Code
  ## Columns
  ## Cover
  ## Embeds
  ## Gallery
  ## Image
  ## Latest Posts
  ## List
  ## Media & Text
  ## More
  ## Pullquote
  ## Quote
  ## Separator
  ## Table
  ## Video
# Colors
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# General Structure
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Content
--------------------------------------------------------------*/

/* Default wide width on the Block Editor */
.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper > :where(:not(.alignleft):not(.alignright):not(.alignfull)), .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1140px !important;
}

/*
 * Default narrow width on these components. User can choose alignwide in the block
 * editor to make it wider, but this is good default width for readability.
 */
.comments-wrap,
.comments-wrap > *, /* Added 3/16/23 */
.page-template-page-nosidebar .entry-content > *,
.page-template-page-nosidebar-noheader .entry-content > * {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Handle full-width blocks / images
 */
.entry-content .alignfull {
	margin-left: calc( -100vw / 2 + 100% /2 );
	margin-right: calc( -100vw / 2 + 100% /2 );
	max-width: 100vw;
}

/* 
 * Handle wide witdth blocks / images
 */
.entry-content .alignwide {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Ensure full-width images fill the available space
 */
.wp-block-cover.alignfull, 
.wp-block-cover-image.alignfull {
	width: 100vw;
}

/*--------------------------------------------------------------
## Groups
--------------------------------------------------------------*/

.wp-block-group.is-style-thin-bottom-border {
	border-bottom: #bdc3c7 solid 1px;
}

.wp-block-group.is-style-thick-bottom-border {
	border-bottom: #bdc3c7 solid 5px;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
/* In the Block Editor, override core WordPress' nasty defaults */
html :where(.editor-styles-wrapper) {
    /*font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: inherit;*/
}

html :where(.editor-styles-wrapper) h1, html :where(.editor-styles-wrapper) h2, html :where(.editor-styles-wrapper) h3, html :where(.editor-styles-wrapper) h4, html :where(.editor-styles-wrapper) h5, html :where(.editor-styles-wrapper) h6, html :where(.editor-styles-wrapper) select {
    /*font-size: inherit;
    margin: inherit;
    color: inherit;
    line-height: inherit;
    font-weight:inherit;*/
}

/* Our font sizes */
/*.has-small-font-size {
    font-size: 14px !important;
}

.has-normal-font-size, .has-regular-font-size {
    font-size: 18px !important;
}

.has-medium-font-size {
    font-size: 22px !important;
}

.has-large-font-size {
    font-size: 28px !important;
}

.has-larger-font-size {
    font-size: 34px !important;
}

.has-huge-font-size {
    font-size: 41px !important;
}*/

/*--------------------------------------------------------------
# Blocks
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Buttons
--------------------------------------------------------------*/
/*
 * Bolder typeface on button text
 */
.wp-block-button__link {
	font-weight: 500;
}

/* 
 * Darken button link hover color
 */
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	filter: brightness(90%);
	/*background-color: filter: brightness(90%);*/
}

/*--------------------------------------------------------------
## Code
--------------------------------------------------------------*/
/*
 * Fix double border when code is in a pre
 */
.wp-block-code > code {
	border: none;
}

/*--------------------------------------------------------------
## Columns
--------------------------------------------------------------*/
/*
 * Override the block editor keeping columns when there isn't enough space 
 */
/*@media (min-width: 600px) and(max-width: 781px) {
    /*.wp-block-column:not(:only-child) {
        flex-basis: calc(50% - 1em) !important;
        flex-grow:0
    }*/

    /*.wp-block-column:nth-child(2n) {
        margin-left:2em
    }*/
    /*.wp-block-column:not(:only-child) {
	    flex-basis: 0 !important;
    	flex-grow: 1;
    }
}*/

/*
 * THIS IS THE DEFAULT BLOCK EDITOR CSS FOR COLUMNS
 */
/*
.wp-block-columns {
    display: flex;
    margin-bottom: 1.75em;
    flex-wrap:wrap
}

@media (min-width: 782px) {
    .wp-block-columns {
        flex-wrap:nowrap
    }
}

.wp-block-columns.has-background {
    padding:1.25em 2.375em
}

.wp-block-columns.are-vertically-aligned-top {
    align-items:flex-start
}

.wp-block-columns.are-vertically-aligned-center {
    align-items:center
}

.wp-block-columns.are-vertically-aligned-bottom {
    align-items:flex-end
}

.wp-block-column {
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap:break-word
}

/* With 15px margin x 2, this collapses at 600px screen width
 * Bootstrap collapses at 768px small, 992px medium, 1200px large
 */
/*
@media (max-width: 599px) {
    .wp-block-column {
        flex-basis:100% !important
    }
}

@media (min-width: 600px) and(max-width: 781px) {
    .wp-block-column:not(:only-child) {
        flex-basis: calc(50% - 1em) !important;
        flex-grow:0
    }

    .wp-block-column:nth-child(2n) {
        margin-left:2em
    }
}

@media (min-width: 782px) {
    .wp-block-column {
        flex-basis: 0;
        flex-grow:1
    }

    .wp-block-column[style * =flex-basis] {
        flex-grow:0
    }

    .wp-block-column:not(:first-child) {
        margin-left:2em
    }
}

.wp-block-column.is-vertically-aligned-top {
    align-self:flex-start
}

.wp-block-column.is-vertically-aligned-center {
    -ms-grid-row-align: center;
    align-self:center
}

.wp-block-column.is-vertically-aligned-bottom {
    align-self:flex-end
}

.wp-block-column.is-vertically-aligned-bottom, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-top {
    width:100%
}
*/

/* For some reason, these blocks don't have bottom margin like everything else does */
/*.wp-block-pullquote,
.wp-block-media-text,*/
/**.wp-block-columns {
	margin-bottom: 27px;
}**/

/*--------------------------------------------------------------
## Cover
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Embeds
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Image
--------------------------------------------------------------*/

/*
 * TO-DO: NONE OF THE SYTLES IN HERE SEEM TO ACTUALLY WORK TO OVERRIDE THE 
 * CSS THAT WORDPRESS GENERATES FOR BLOCKS UNLESS WE USE !IMPORTANT WHICH SUCKS
 */

.wp-block-image.is-style-bordered-image img,
.wp-block-image.is-style-bordered-image:not(.is-style-rounded) img {
	padding: 4px;
  	background-color: #f2f2f2;
  	border: 1px solid #dddddd;
	border-radius: 4px;
}

.wp-block-image figcaption {
    /*color: #555;*/
    font-size: 16px;
    /*text-align:center*/
}

/*--------------------------------------------------------------
## Latest Posts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# List
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Media & Text
--------------------------------------------------------------*/
/* For some reason, these blocks don't have bottom margin like everything else does */
/*.wp-block-pullquote,*/
/**.wp-block-media-text /*,
.wp-block-columns {*/
	/**margin-bottom: 27px;
}**/

/*--------------------------------------------------------------
## More
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Edit link for Admins
--------------------------------------------------------------*/
/*
 * Center edit page/post link since its not aligned wide
 * TO-DO: MOVE THIS SOMEWHERE ELSE AS IT HAS NOTHING TO DO WITH GUTENBERG
 * OTHER THAN GUTENBERG DEFAULTS TO NARROW WIDTH
 */
.edit-link {
	text-align: center;
}

/*--------------------------------------------------------------
## Pullquote
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Quote
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Separator
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Table
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Video
--------------------------------------------------------------*/