/**
 * Theme:	Flat Gutenberg
 * File:	blocks.css
 * 
 * Our styling for Gutenberg editor and it's blocks
 *
 * @package Flat_Gutenberg
 */

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

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

body.page-template-page-nosidebar > .entry-content {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}

body.page-template-page-nosidebar > .entry-content > .alignwide {
	max-width: 1170px;
}


body.page-template-page-nosidebar > .entry-content > .alignfull {
    margin-left: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
    margin-right: calc(50% - 50vw);
	padding-right: calc(50vw - 50%);
    width: auto;
    max-width: 1000%;
}

/*.alignwide,
.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.alignwide,
.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

@media (max-width: 920px) {
	.alignwide {
		margin: 32px calc( ( 767px - 920px ) / 2 );
		max-width: 1170px;
		width: 1170px;
	}
}*/

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

/*.entry-content > * {
  margin: 36px auto;
  max-width: 760px;
  padding-left: 14px;
  padding-right: 14px;
}

.entry-content > .alignwide {
  max-width: 1170px;
  margin-left: 0;
  margin-right: 0;
}

.entry-content > .alignfull {
  margin: 1.5em 0;
  max-width: 100%;
}

@media screen and (min-width: 608px) {
  .entry-content > * {
    padding-left: 0px;
    padding-right: 0px;
  }
}*/

/* TO-DO: Remove content top padding if first element has a colored background */
/*.entry-content {
	padding-top: 0; /*24px*/
}*/

/* 
 * For background colors, first remove the default Gutenberg padding. We will replace
 * this with our own matching padding next.
 */
/*p.has-background {
	padding: 0;
}*/

/* 
 * If background color, replace out vertical margin with padding. This must be set
 * based on each HTML tag so it matches the theme.
 */
/*h2.has-background,
p.has-large-font-size {
	margin-top: 0;
	padding-top: 24px;
	margin-bottom: 0;
	padding-bottom: 12px;
}
p.has-background,
p.has-background {
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0;
	padding-bottom: 12px;
}*/

/* If background color, then have it span the full width of the theme. This is done by
 * setting negative margins and replacing that margin with padding to contain the
 * content.
 */
/*.alignwide.has-background,
.alignfull.has-background {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: calc(50vw - 50%) !important;
	padding-right: calc(50vw - 50%) !important;
	width: auto;
	max-width: 1000%;
}*/

/* On full-width page templates, make alignfull compontents span the entire browswer 
 * width. On narrow pages, the content will still be contained. 
 */

/*@media only screen and (min-width: 768px) {*/

/* First handle non-image blocks. Add negative margin and replace with padding to contain
 * the content. Also, remove the bottom margin so that colored sections in a row don't
 * have vertical whitespace.
 */
/*body.page-template-page-fullpostsnoheader .has-background.alignfull,
body.page-template-page-fullwidth-noheader .has-background.alignfull,
body.page-template-page-fullwidth .has-background.alignfull,
body.page-template-page-fullwithposts .has-background.alignfull,
body.page-template-page-fullwithsubpages .has-background.alignfull,
body.page-template-page-landing .has-background.alignfull,
body.page-template-page-nosidebar .has-background.alignfull,
body.post-template-single-fullwidth .has-background.alignfull,
body.post-template-single-nosidebar .has-background.alignfull {
    margin-left: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
    margin-right: calc(50% - 50vw);
	padding-right: calc(50vw - 50%);
    width: auto;
    max-width: 1000%;
    margin-bottom: 0;
}*/

/* Then handle cover images and regular images. Add negative margin and remove max-width
 */
/*****body.page-template-page-fullpostsnoheader .wp-block-group.alignfull,
body.page-template-page-fullpostsnoheader .container .wp-block-group.alignfull,
body.page-template-page-fullpostsnoheader .wp-block-cover.alignfull,
body.page-template-page-fullpostsnoheader .container .wp-block-cover.alignfull,
body.page-template-page-fullpostsnoheader .wp-block-image.alignfull,
body.page-template-page-fullwidth-noheader .wp-block-group.alignfull,
body.page-template-page-fullwidth-noheader .container .wp-block-group.alignfull,
body.page-template-page-fullwidth-noheader .wp-block-cover.alignfull,
body.page-template-page-fullwidth-noheader .container .wp-block-cover.alignfull,
body.page-template-page-fullwidth-noheader .wp-block-image.alignfull,
body.page-template-page-fullwidth .wp-block-group.alignfull,
body.page-template-page-fullwidth .container .wp-block-group.alignfull,
body.page-template-page-fullwidth .wp-block-cover.alignfull,
body.page-template-page-fullwidth .container .wp-block-cover.alignfull,
body.page-template-page-fullwidth .wp-block-image.alignfull,
body.page-template-page-fullwithposts .wp-block-group.alignfull,
body.page-template-page-fullwithposts .container .wp-block-group.alignfull,
body.page-template-page-fullwithposts .wp-block-cover.alignfull,
body.page-template-page-fullwithposts .container .wp-block-cover.alignfull,
body.page-template-page-fullwithposts .wp-block-image.alignfull,
body.page-template-page-fullwithsubpages .wp-block-group.alignfull,
body.page-template-page-fullwithsubpages .container .wp-block-group.alignfull,
body.page-template-page-fullwithsubpages .wp-block-cover.alignfull,
body.page-template-page-fullwithsubpages .container .wp-block-cover.alignfull,
body.page-template-page-fullwithsubpages .wp-block-image.alignfull,
body.page-template-page-landing .wp-block-group.alignfull,
body.page-template-page-landing .container .wp-block-group.alignfull,
body.page-template-page-landing .wp-block-cover.alignfull,
body.page-template-page-landing .container .wp-block-cover.alignfull,
body.page-template-page-landing .wp-block-image.alignfull,
body.page-template-page-nosidebar .wp-block-group.alignfull,
body.page-template-page-nosidebar .wp-block-cover.alignfull,
body.page-template-page-nosidebar .wp-block-image.alignfull,
body.page-template-page-nosidebar-noheader .wp-block-group.alignfull,
body.page-template-page-nosidebar-noheader .wp-block-cover.alignfull,
body.page-template-page-nosidebar-noheader .wp-block-image.alignfull 
body.post-template-single-fullwidth .wp-block-group.alignfull,
body.post-template-single-fullwidth .container .wp-block-group.alignfull,
body.post-template-single-fullwidth .wp-block-cover.alignfull,
body.post-template-single-fullwidth .container .wp-block-cover.alignfull,
body.post-template-single-fullwidth .wp-block-image.alignfull,
body.post-template-single-nosidebar .wp-block-group.alignfull,
body.post-template-single-nosidebar .wp-block-cover.alignfull,
body.post-template-single-nosidebar .wp-block-image.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: auto;
    max-width: 1000%;
 }*/

  /*.alignwide {
    margin-left: calc(25% - 25vw);
    margin-right: calc(25% - 25vw);
    width: auto;
    max-width: 1000%;
  }*/

  /*.alignwide img,*/
  /*.alignfull img {
    display: block;
    margin: 0 auto;
  }*/
/*}*/

/* Gutenberg attempts to not have left-margin on the first column or right-margin on
 * the last column, but it doesn't work. Fix it here by adding left-margin to the first
 * column.
 */
/*@media (min-width:600px) {
    .wp-block-column {
        margin-left: 32px
    }
}*/

/* Adjust padding for objects with background colors to match what GB does with paragraphs
 */
/*.has-background {
		padding-top: 20px;
		padding-bottom: 20px;
}*/

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

/*.wp-block-group > .wp-block-group__inner-container > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.wp-block-group > .wp-block-group__inner-container > .alignwide {
  max-width: 1170px;
}

.wp-block-group > .wp-block-group__inner-container > .alignfull {
  max-width: 100%;
}

.wp-block-group.has-background > .wp-block-group__inner-container > :first-child {
  margin-top: 0;
}

.wp-block-group.has-background > .wp-block-group__inner-container > .alignfull {
  width: calc( 100% + 60px );
  max-width: calc( 100% + 60px );
  position: relative;
  left: -30px;
}*/

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

/*--------------------------------------------------------------
## Code
--------------------------------------------------------------*/

/*.wp-block-code {
  padding: 0.8em 1em;
  margin-left: 14px;
  margin-right: 14px;
}

@media screen and (min-width: 608px) {
  .wp-block-code {
    margin-left: auto;
    margin-right: auto;
  }
}*/


/*--------------------------------------------------------------
## Columns
--------------------------------------------------------------*/
/* 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
--------------------------------------------------------------*/

/*.wp-block-cover-text p {
  padding: 1.5em 14px;
}

@media screen and (min-width: 608px) {
  .wp-block-cover-text p {
    padding: 1.5em 0;
  }
}*/

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

/*.wp-block-embed.type-video > .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

.wp-block-embed.type-video > .wp-block-embed__wrapper > iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}*/

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

/*.wp-block-gallery:not(.components-placeholder) {
  margin: 1.5em auto;
}*/

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

/*.wp-block-image img {
  display: block;
}

.wp-block-image.alignleft,
.wp-block-image.alignright {
  width: 100%
}

.wp-block-image.alignfull img {
  width: 100vw;
}

.wp-block-image .alignleft img,
.wp-block-image .alignright img,
.wp-block-image .alignleft figcaption,
.wp-block-image .alignright figcaption {
  max-width: 100%;
  width: 100%;
}*/

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

/*ul.wp-block-latest-posts.alignwide,
ul.wp-block-latest-posts.alignfull,
ul.wp-block-latest-posts.is-grid.alignwide,
ul.wp-block-latest-posts.is-grid.alignwide {
  padding: 0 14px;
}*/

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

/*.entry-content ul,
.entry-content ol {
  margin: 1.5em auto;
  max-width: 760px;
  list-style-position: outside;
}

.entry-content li {
  /*margin-left: 2.5em;*/
  /*margin-left: 0;
}

.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
  margin: 0 auto;
}

.entry-content ul ul li,
.entry-content ol ol li,
.entry-content ul ol li,
.entry-content ol ul li {
  margin-left: 0;
}*/

/*--------------------------------------------------------------
## 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
--------------------------------------------------------------*/

/*.more-link {
  display: block;
}*/

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


/* 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;
}

/*.wp-block-pullquote>p:first-child {
  margin-top: 0;
}*/

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

/*.wp-block-quote {
  margin-left: 14px;
  margin-right: 14px;
  padding: 0;
}

.wp-block-quote > * {
  margin-left: 1rem;
}

.wp-block-quote.is-large, 
.wp-block-quote.is-style-large {
  margin: 36px auto;
  padding: 0;
}

.wp-block-quote.is-large cite, 
.wp-block-quote.is-large footer, 
.wp-block-quote.is-style-large cite, 
.wp-block-quote.is-style-large footer {
  font-size: 13px;
  font-size: 0.8125rem;
}

@media screen and (min-width: 644px) {
  .wp-block-quote {
    margin: 36px auto;
  }
}*/

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

/*.wp-block-separator {
  margin: 3em auto;
  padding: 0;
}*/

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

/*.wp-block-table {
  overflow-x: auto;
  margin-left: 14px;
  margin-right: 14px;
  width: calc( 100% - 28px );
}

.wp-block-table table {
  border-collapse: collapse;
  width: 100%
}

.wp-block-table td, .wp-block-table th {
  padding: .5em;
}

@media screen and (min-width: 608px) {
  .wp-block-table {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}*/

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

/*.wp-block-video video {
  max-width: 760px;
}*/