/* Note that the site-inner and fullwidth-block css is also added in wp_head in functions.php */
body.site-inner {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* This is a trick used so that components can "break out" of containers */ 
.fullwidth-block {
  width:  100%;

  /*
  position: relative;
  width: calc(100vw);
  width: calc(100vw - var(--scrollbar-width)) !important;
  left: calc(50%);
  transform: translateX(-50%);
  */
}

.wp-block-columns {
  margin-bottom: var(--component-vertical-spacing-default);
}

@media screen and (max-width: 768px) {
  .wp-block-columns {
    margin-bottom: var(--component-vertical-spacing-mobile);
  }
}

.component-vertical-margin {
  margin-bottom: var(--component-vertical-spacing-default);
}

@media screen and (max-width: 768px) {
  .component-vertical-margin {
    margin-bottom: var(--component-vertical-spacing-mobile);
  }
}

.wp-admin .fullwidth-block {
  width: 100% !important;
}

.editor-styles-wrapper .wp-block {
  max-width: 100% !important;
}

main.content .entry-content > p {
  width: 100%;
  max-width:  var(--container-width-default);
  margin-left:  auto;
  margin-right:  auto;
}

main .entry-content {
  max-width: var(--container-width-maximum);
}

body.page-template-default main .entry-content,
body.full-width-page main .entry-content,
body.full-width-content main .entry-content {
  max-width: 100%;
}

.container-fullwidth-block, 
#top-bar #top-bar-content,
main .entry-header .entry-title, 
main .entry-header .archive-title, 
main .page-title,
.container,
.box-info-detail-blog_author > .breadcrumb > span {
  max-width: var(--container-width-default);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-default);
  padding-right: var(--container-padding-default);
}


.container-width-mid {
  max-width: var(--container-width-mid);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-default);
  padding-right: var(--container-padding-default);
}

@media screen and (max-width: 768px) {

  .container-fullwidth-block, 
  #top-bar #top-bar-content,
  main .entry-header .entry-title, 
  main .entry-header .archive-title, 
  main .page-title,
  .container,
  .box-info-detail-blog_author > .breadcrumb > span {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }

  .container-width-mid {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }


}



.entry-content > img[class*="singular-image"] {
  width: 100%;
  max-width: calc(100vw - var(--scrollbar-width) - (var(--container-padding-default) * 2));
  margin-left: auto;
  margin-right: auto;

}

@media screen and (max-width: 768px) {
  .entry-content > img[class*="singular-image"] {
    max-width: calc(100vw - var(--scrollbar-width) - (var(--container-padding-mobile) * 2));
  }
}

@media screen and (min-width: 1530px) {

  .container-fullwidth-block,
  #top-bar #top-bar-content, 
  main .entry-header .entry-title, 
  main .entry-header .archive-title, 
  main .page-title,
  .box-info-detail-blog_author > .breadcrumb > span {
    padding-left: 0;
    padding-right:  0;
  }

  .entry-content > img[class*="singular-image"] {
    max-width: var(--container-width-maximum);
  }

}


@media screen and (min-width: 1441px) {

  main.content .entry-content > p {
    max-width:  var(--container-width-maximum);
  }

/*  .container-fullwidth-block, main .entry-header .entry-title, main .entry-header .archive-title, main .entry-header .page-title, .box-info-detail-blog_author > .breadcrumb > span {
    max-width: var(--container-width-maximum);
  }*/

/*  body.site-inner {
    max-width: var(--container-width-maximum);
  }
*/
  #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container,
  .tag .tag-detail-inner,
  .single-news .news-detail-inner,
  .footer-widgets .wrap {
    max-width: var(--container-width-maximum);
  }

/*  .single-person .site-inner,
  .single-person .container-fullwidth-block,
  .single-person .container-fullwidth-block--with-padding,
  .single-person main .entry-header .entry-title {
    max-width: var(--container-width-maximum) !important;
  }*/
}


@media screen and (min-width: 1024px) {


    /* TODO:  these dont really belong in containers.css ; */
    .interior-content-with-sidebar *:is(.cta-switchback-block, .social-media-grid) {
      background: unset !important;
    }
    
    .interior-content-with-sidebar .social-media-grid * {
      color: #2d2926 !important;
    }

}


@media (min-width: 992px) {
  /* if the container is within an interior page content well (e.g. one with a sidebar), don't break outside the container */
  .interior-content-with-sidebar .fullwidth-block:not(.wp-block-group:is(.is-style-table-theme-1, .is-style-table-theme-2)) {
      width: 100% !important;
      left: unset !important;
      transform: unset !important;
  }

  .interior-content-with-sidebar .container-fullwidth-block {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

}

@media (max-width: 991px) {

  .container-fullwidth-block,
  .box-info-detail-blog_author > .breadcrumb > span {
    padding: 0px var(--container-padding-default);
  }
}

@media (max-width: 768px) {

  .container-fullwidth-block,
  .box-info-detail-blog_author > .breadcrumb > span {
    padding: 0px var(--container-padding-mobile);
  }
}