/*
Theme Name: All Seasons
Theme URI: https://allseasonsweddings.com/
Description: A custom theme for All Seasons Weddings
Author: Dunham Web
Author URI: https://dunhamweb.com/
Version: 1.0.13
Text Domain: allseasons
*/

@import url("https://allseasonsweddings.com/css/app.css");

/* Change the cta buttons position at the top of the page and allow to scroll with content when signed in to the WordPress site */
/* Note the use of nested css here. This should be supported by all major browsers since ~2023 */
@media (max-width: 767px){
  .admin-bar .cta{
    position: absolute;
    bottom: 100%;
    top: auto;
  }
}

/* Added here because theme.json doesn't support adding media breakpoints to css */
@media (max-width: 600px){
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media{
    margin-bottom: var(--wp--preset--spacing--5);
  }

  /* Remove aspect-ratio on mobile since iPhone ignores the top and bottom padding when aspect-ratio is set */
  .wp-block-cover.has-aspect-ratio{
    aspect-ratio: auto !important;
  }
}

/* Override the global styles for WordPress content
These can't be changed in theme.json since the block editor css loads before the Laravel app css
This can be removed if we change the app css to match */
main{
  line-height: 1.5;
}
/*.is-layout-constrained{
  line-height: 1.5;
}*/
h2{
  margin-bottom: var(--wp--preset--spacing--4);
}
/* h3{
  font-weight: 600;
} */

/* Some of the pagination properties are needed to override Laravel site's nav css */
.pagination{
  background: none;
  justify-content: start;
  padding-left: 0;
}

.page-numbers {
  position: relative;
  display: block;
  padding: .375rem .75rem;
  color: var(--bs-primary) !important;
  /* text-decoration: none; */
  /* background-color: var(--bs-pagination-bg); */
  border: var(--bs-border-width) solid var(--bs-border-color);

  &:hover {
    background-color: var(--bs-light);
  }
}

.page-item{
  &:first-child .page-numbers {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
  }

  &:not(:first-child) .page-numbers {
    margin-left: calc(-1 * var(--bs-border-width));
  }

  &:last-child .page-numbers {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
  }
}

.active > .page-numbers {
  z-index: 3;
  color: var(--bs-white) !important;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Contact form */
.comment-form{
  textarea, input[type=text], input[type=email]{
    display: block;
    width: 100%;
  }
}

/* Slider */
/* .slider-wrapper{
  margin-left: ;
  margin-right: ;
  padding-left: ;
  padding-right: ;
} */

.slick-slider{
  --slick-slider-arrow-size: 40px;
}

/* .slick-slider:has(> .slick-arrow){
  margin-left: 20px !important;
  margin-right: 20px !important;
} */

.slick-slider:has(> .slick-arrow) .slick-slide{
  margin-left: calc(var(--slick-slider-arrow-size) / 2);
  margin-right: calc(var(--slick-slider-arrow-size) / 2);
}

.slick-arrow{
  background: var(--bs-secondary);
  color: var(--bs-white);
  width: var(--slick-slider-arrow-size);
  height: var(--slick-slider-arrow-size);
  border: none;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  z-index: 1;
  border-radius: 50%;
  font-size: 1.25rem;

  &.slick-disabled{
    display: none !important;
  }
}

.slick-next{
  right: 0;
  /* transform: translate(50%, -50%); */
  transform: translate(0, -50%);
}

.slick-prev{
  left: 0;
  /* transform: translate(-50%, -50%); */
  transform: translate(0, -50%);
}

.review-slider{
  blockquote{
    font-size: 1.125rem;

    @media (min-width: 768px){
      font-size: 1.25rem;
    }
  }

  .slick-track {
    align-items: center;
    display: flex;
  }
}