/*--------------------------------------------------------------
Deprecated - Bootscore v6.4.0. This code will be removed in v7.
--------------------------------------------------------------*/


// Reset .is-layout-flow group block margins
// Use hide-wp-block-classes instead
// See https://github.com/bootscore/bootscore/pull/977
.is-layout-flow:not(.hide-wp-block-classes.is-layout-flow) > {
  * {
    margin-block-start: 0;
  }

  p:not(:last-child) {
    margin-block-end: $spacer;
  }
}


//Add width-100 class to element to stretch it to the entire width of the screen when element is wrapped inside .container.
.width-100 {
  position: relative;
  width: 100vw;
  margin-left: -50vw;
  left: 50%;
}


body {
  // Prevent horizontal scrollbars on Windows Chrome & Firefox when using width-100 class
  overflow-x: hidden;
  
  // This is mandatory for the WP Theme Unit Test Data
  // https://dev.bootscore.me/about/page-markup-and-formatting/
  // Breaks responsive tables
  word-break: break-word;
  
  // If we keep both, we can just use Bootstrap classes
  // <?= esc_attr(apply_filters('bootscore/class/body', 'overflow-x-hidden text-break')); ?>
  // And check responsive tables
}

// Responsive Tables
// Theme uses word-break: break-word; on body as recommended by WordPress to handle edge cases.
// See https://dev.bootscore.me/2009/10/05/title-should-not-overflow-the-content-area/
// As result, words break in tables and responsive tables aren't responsive.
// Adding white-space: nowrap; to tables to each breakpoint solves this.
@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  @include media-breakpoint-down($breakpoint) {
    .table-responsive#{$infix} {
      .table {
        white-space: nowrap;
      }
    }
  }
}



// Loop https://github.com/bootscore/bootscore/pull/1188

// Horizontal card images

// category.php, archive.php, author.php and search results
@include media-breakpoint-down(lg) {
  .card-img-lg-start {
    border-top-left-radius: var(--#{$prefix}card-inner-border-radius);
    border-top-right-radius: var(--#{$prefix}card-inner-border-radius);
  }
}

@include media-breakpoint-up(lg) {
  .card-img-lg-start {
    border-top-left-radius: var(--#{$prefix}card-inner-border-radius);
    border-bottom-left-radius: var(--#{$prefix}card-inner-border-radius);
    object-fit: cover;
    height: 100%;
  }
}

// Responsive image height in (new) cards-horizontal.php loop card template
// Class h-100 creates issue with bs Swiper v6 in mobile view
// Recheck this in v7. If we keep it, move it to utilities.scss
@include media-breakpoint-up(md) {
  .h-md-100 {
    height: 100% !important;
  }
}


// Check if Bootstrap v6 will have a backdrop-blur utility https://github.com/orgs/twbs/discussions/42187

.backdrop-blur-10 {
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
}
