/* Project-level fixes layered on top of the vendored theme (assets/css/main.css),
   so the theme file itself stays untouched. */


/* ===== Room page: booking sidebar =====
   The whole sidebar is `position: sticky; top: 180px` (to clear the sticky header).
   Once a quote is shown it is ~900px tall, so on a laptop screen the bottom of the
   block - including the "Réserver" button - sat below the visible area and could
   never be reached. property.js adds `sidebar-too-tall` when the block does not fit
   in the window: it then scrolls with the page like normal content, so the button
   can always be reached. (Making the block itself scrollable is not an option: the
   date picker opens inside it and is wider than it, so it would be clipped.) */
@media (min-width: 992px) {
  .properties-details4-area .all-side-details.sidebar-too-tall {
    position: static;
  }
}


/* ===== Home page: hero carousel =====
   Slick crossfades whole slides over 1.5s, text included, so the outgoing and the
   incoming titles were both half visible at the same time and overlapped. Fade the
   outgoing text out quickly, and bring the incoming one in only once it is gone.
   (Scoped to .slick-slide: before slick initialises the text just shows normally.) */
.hero-area-slider .slick-slide .hero-header-area {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.hero-area-slider .slick-slide.slick-current .hero-header-area {
  opacity: 1;
  transition: opacity 0.5s ease 0.45s;
}