/**
 * WP Builder - Base Global Styles
 *
 * Foundational styles applied to all WPBuilder templates, blocks, headers, and footers.
 * This file is enqueued when any WPBuilder content is detected on a page.
 */

/* Global transitions for smooth hover effects */
[data-wpb-id],
[data-wpb-id] * {
  transition: all 0.3s ease;
}

/* Ensure images within builder content are responsive by default */
[data-wpb-id] img {
  max-width: 100%;
  height: auto;
}

/* Reset box-sizing for consistent layouts */
[data-wpb-id],
[data-wpb-id] *,
[data-wpb-id] *::before,
[data-wpb-id] *::after {
  box-sizing: border-box;
}

/* Reset grid placement on repeater items — prevents template-level
   grid-column / grid-row styles from collapsing items into the same cell */
.wpb-repeater-container > * {
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Carousel arrow background support (--wpb-nav-bg is custom, the rest are native Swiper vars) */
.swiper-button-next,
.swiper-button-prev {
  background: var(--wpb-nav-bg, transparent);
  border-radius: 50%;
  width: var(--swiper-navigation-size, 44px);
  height: var(--swiper-navigation-size, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: calc(var(--swiper-navigation-size, 44px) / 2);
}

/* Align dots to center when sizes differ */
.swiper-pagination-bullets {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Active dot custom size — use higher specificity to beat Swiper's .swiper-pagination-bullet rule */
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: var(--wpb-dot-active-size, var(--swiper-pagination-bullet-size, 8px));
  height: var(--wpb-dot-active-size, var(--swiper-pagination-bullet-size, 8px));
}

/* ── Carousel outside nav/dots wrapper ────────────────────────── */
.wpb-carousel-wrap {
  position: relative;
}

/* Horizontal padding to make room for arrows outside the carousel */
.wpb-carousel-wrap--nav-outside {
  padding-left: calc(var(--swiper-navigation-size, 44px) + 8px);
  padding-right: calc(var(--swiper-navigation-size, 44px) + 8px);
}

/* Arrows positioned at the sides of the wrapper */
.wpb-carousel-wrap > .swiper-button-next,
.wpb-carousel-wrap > .swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}
.wpb-carousel-wrap > .swiper-button-prev {
  left: 0;
}
.wpb-carousel-wrap > .swiper-button-next {
  right: 0;
}

/* Dots placed below the carousel as a normal-flow element */
.wpb-carousel-wrap > .swiper-pagination {
  position: relative;
  bottom: auto;
  margin-top: 16px;
  width: 100%;
}