/* ============================================================================
   Little Wedding Planner — component mechanics
   Replaces bootstrap.min.css (227 KB, render-blocking) with the ~30 classes the
   site actually uses. Bootstrap's JS bundle is still loaded and still drives the
   behaviour; it only ever toggles classes, so it needs these definitions to
   exist — the visual styling lives in site.css.

   Everything here is mechanics: display, position, transition. No colour, no
   type, no spacing decisions.
   ========================================================================= */

/* ---------------------------------------------------------------- collapse
   Bootstrap toggles .collapse / .collapsing / .show and animates height. Without
   these rules every accordion panel renders open on first paint and then snaps
   shut, which is both a flash and a large layout shift. */
.collapse:not(.show){ display: none; }

.collapsing{
  height: 0;
  overflow: hidden;
  transition: height .25s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce){
  .collapsing{ transition: none; }
}

/* --------------------------------------------------------------- accordion */
.accordion-header{ margin: 0; }

.accordion-button{
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* ---------------------------------------------------------------- dropdown
   Popper positions the menu with inline transform; these rules only control
   whether it is in flow and how it is stacked. */
.dropdown{ position: relative; }

.dropdown-menu{
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1045;
  display: none;
  min-width: 10rem;
  margin: 0;
  padding: .5rem 0;
  list-style: none;
}
.dropdown-menu.show{ display: block; }

/* Right-aligned variant, used by the Categories menu. */
.dropdown-menu-end{ right: 0; left: auto; }

.dropdown-item{
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
}

/* ---------------------------------------------------------------- carousel
   Slides are absolutely stacked; the active one is the only one in flow. The
   *-start/-end/-next/-prev classes are what Bootstrap adds mid-transition. */
.carousel{ position: relative; }

.carousel-inner{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item{
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  transition: transform .6s ease-in-out;
}
@media (prefers-reduced-motion: reduce){
  .carousel-item{ transition: none; }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{ display: block; }

.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end{ transform: translateX(100%); }

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start{ transform: translateX(-100%); }

.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end,
.carousel-item.active{ transform: none; }

/* Fade variant is unused, but Bootstrap's JS checks for it. */
.carousel-fade .carousel-item{ opacity: 0; transition-property: opacity; transform: none; }
.carousel-fade .carousel-item.active{ opacity: 1; }

.carousel-control-prev,
.carousel-control-next{
  position: absolute;
  top: 0; bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
}
.carousel-control-prev{ left: 0; }
.carousel-control-next{ right: 0; }

.carousel-indicators{
  position: absolute;
  right: 0; bottom: 0; left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* -------------------------------------------------------------- utilities
   Only the handful the templates use. */
.d-flex{ display: flex !important; }
.d-none{ display: none !important; }
.flex-wrap{ flex-wrap: wrap !important; }
.align-items-end{ align-items: flex-end !important; }
.justify-content-between{ justify-content: space-between !important; }

.gap-3{ gap: 1rem !important; }
.gap-4{ gap: 1.5rem !important; }
.mt-3{ margin-top: 1rem !important; }
.mt-4{ margin-top: 1.5rem !important; }
.mb-4{ margin-bottom: 1.5rem !important; }

@media (min-width: 1200px){
  .d-xl-none{ display: none !important; }
  .d-xl-block{ display: block !important; }
}