/* here you can put your own css to customize and override the theme */

/*
  Onepage slider overrides (full-width, edge-to-edge)
  - Force slider to span the full viewport width
  - Make slide images cover edge-to-edge (no side gaps)
*/

/* CSS variables for precise viewport and header offset */
:root { --header-offset: 120px; }
@supports (height: 100svh) {
  :root { --vh-max: 100svh; }
}
@supports not (height: 100svh) {
  :root { --vh-max: 100vh; }
}

/* Ensure the promo slider bleeds full width regardless of parent layout */
.promo-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#carousel-example-generic,
#carousel-example-generic .carousel-inner,
.carousel-slider {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 991.98px) {
  .carousel-slider .item {
    min-height: 0 !important;
    height: auto !important;
    background: transparent;
  }
  .carousel-slider .item img {
    width: 100% !important;              /* full width */
    height: auto !important;             /* natural aspect on mobile */
    object-fit: cover !important;        /* fill horizontally */
    object-position: center center;
    display: block;
    background: transparent;
  }
}

@media (min-width: 992px) {
  .carousel-slider .item {
    min-height: 0 !important;   /* override 580px default */
    height: auto  !important;   /* fixed banner height on desktop */
    background: transparent;
    overflow: hidden;
  }
  /* Target both the generic carousel and the class-based items */
  #carousel-example-generic .carousel-inner > .item img,
  .carousel-slider .item img {
    width: 100% !important;
    height: auto !important;        /* match container height */
    max-height: none !important; 
    object-fit: cover !important;    /* fill full width; crop overflow */
    object-position: center center;
    display: block;
    background: transparent;
  }
  /* Remove fit-width/fit-height usage in cover mode; keep selectors harmless */
  /* Ensure container wrappers don’t force their own fixed heights */
  #carousel-example-generic,
  #carousel-example-generic .carousel-inner {
    height: auto !important;
    min-height: 0 !important;
  }
}