/*--------------------------------------------------------------
 >>>> bepaalt hoe de gutenberg blocks worden weer gegeven op de site 
      zodat het in de in de editor het zelfde is als op de site. 


Het is belangrijk dat class entry-content gebruikt wordt op de volgende manier

          <div class="entry-content">  <!-- class entry-content in nodig voor het stylen van de block's in blocks-css.css -->
						<?php the_content() ?>
					</div>


>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# General Structure
  ## Code
  ## Cover
  ## Embeds
  ## Gallery
  ## Group
  ## Image
  ## Latest Posts
  ## List
  ## More
  ## Navigation
  ## Pullquote
  ## Quote
  ## Separator
  ## Site Tagline
  ## Table
  ## Video
# Additional Theme Styles
  ## Color Palette
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Block Styles
--------------------------------------------------------------*/

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

.wp-block {
  background-color: var(--blocks-css-bg);
}

.wp-block[data-align="full"] {
  max-width: none;
}	

/* Normal blocks */
.entry-content > *,
.wp-block-gallery{
  margin: 0 auto !important;
  background-color: var(--blocks-css-bg);
  padding:5px 35px !important;
  border-radius: 0px;
}

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
{
  max-width: 900px !important;
}



/* Width of "wide" blocks */
.entry-content > .alignwide {
  width: auto;
  max-width: 1270px;
  background-color:  var(--blocks-css-bg);
  padding:5px 35px !important;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0px;

}

/* Width of "full-wide" blocks */
.entry-content > .alignfull {
  max-width: 100%;
  background-color:  var(--blocks-css-bg);
  padding:5px 35px ;
  margin: 0;
  border-radius: 0px;

}


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

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

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

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

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

@media screen and (min-width: 900px) {
  .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;
}

/*--------------------------------------------------------------
## Group
--------------------------------------------------------------*/

.wp-block-group > .wp-block-group__inner-container > *:not(.entry-content) {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

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

.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;
}

/*--------------------------------------------------------------
# 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.5rem auto;
  max-width: 580px;
  list-style-position: outside;
}

.entry-content li {
  margin-left: 1.5rem;
}

.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;
}

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

.more-link {
  display: block;
}

/*--------------------------------------------------------------
## Navigation
--------------------------------------------------------------*/

.wp-block-navigation-link__label {
  font-family: inherit;
  color: var(--blocks-css-link);
}

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

.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: 1rrem;
}

.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.8125rrem;
}

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

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

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

/*--------------------------------------------------------------
## Site Tagline
--------------------------------------------------------------*/

.wp-block-site-tagline {
  margin-top: 0;
}

/*--------------------------------------------------------------
## Site Title
--------------------------------------------------------------*/

.wp-block-site-title {
  margin-bottom: 0;
}

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

.wp-block-table {
  width:900px ;
  max-width: 900px !important;;
  overflow-x: auto;
  margin-left: 0px;
  width: 100%;
}

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

.wp-block-table td, .wp-block-table th {
  padding: 0px;
  vertical-align: top;
  border: 0px;
}

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

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

.wp-block-video video {
  max-width: 580px;
}

/*--------------------------------------------------------------
# Additional Theme Styles
--------------------------------------------------------------*/