/*
 * Neutralises legacy app.css / mobile.css rules that leak onto the BeTheme
 * (solspa-template) markup, where `.menu` is used by the main-menu <ul>.
 * Loaded last in the 'cache' bundle — see config/cms/css.php.
 */

/* app.css `.menu { background-color: var(--bg-menu) }` paints the menu white */
#Top_bar .menu,
#Side_slide .menu {
  background-color: transparent;
}

/* app.css `.submenu { opacity: 0; visibility: hidden; position: absolute; ... }`
   targets the old dropdown <ul>, but BeTheme's menu.js puts the same class on
   parent <li> items — which made every item with a dropdown disappear */
#Top_bar li.submenu,
#Side_slide li.submenu {
  opacity: 1;
  visibility: visible;
  position: relative;
  top: auto;
  left: auto;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}

#Top_bar li.submenu li a,
#Side_slide li.submenu li a {
  background: transparent;
}

/* mobile.css `@media (max-width: 991px) .menu { display: flex }` fights the
   theme's own responsive menu handling */
@media (max-width: 991px) {
  #Top_bar .menu {
    display: none;
  }
}

/* mobile.css `@media (max-width: 767px) .menu { display: none }` would hide
   the menu cloned into the side-slide panel by the theme's menu.js */
@media (max-width: 767px) {
  #Side_slide .menu {
    display: block;
  }
}

/* Homepage revolution slider caption — plain CSS overlay (NOT a RevSlider
   `rs-layer`). RevSlider's own text layers auto-fit to a single line via JS
   and overflow the viewport once title/description come from the admin and
   can be arbitrarily long; a normal flex box lets the browser wrap the text
   like any other responsive content. */
.mfn-rev-slider .rs-slide {
  overflow: hidden;
}

.mfn-rev-slider__caption {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  padding: 2rem 1.5rem;
  text-align: center;
}

.mfn-rev-slider__title {
  max-width: 60rem;
  margin: 0;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: clamp(1.5rem, 4vw, 4rem);
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  overflow-wrap: break-word;
}

.mfn-rev-slider__description {
  max-width: 45rem;
  margin: 0;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(0.875rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow-wrap: break-word;
}

@media (max-width: 576px) {
  .mfn-rev-slider__caption {
    gap: 0.75rem;
  }
}

/* Homepage "About Sol Spa" section — 3-photo collage: a tall photo on the
   left, a smaller photo top-right, and a larger photo bottom-right that
   overlaps down past the left photo. Fed by Admin > Static Pages >
   Homepage - About (photo / photo1 / photo2). Positions are percentages of
   the wrapper (aspect-ratio locked) so the collage scales responsively. */
.home-about__gallery {
  position: relative;
  width: 100%;
  max-width: 36rem;
  aspect-ratio: 642 / 726;
  margin: 0 auto;
}

.home-about__gallery > .image_frame {
  position: absolute;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}

.home-about__gallery > .image_frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-about__gallery-main {
  z-index: 1;
  left: 0;
  top: 0;
  width: 47%;
  height: 66%;
}

.home-about__gallery-top {
  z-index: 1;
  left: 51.5%;
  top: 0;
  width: 48.5%;
  height: 39%;
}

.home-about__gallery-bottom {
  z-index: 2;
  left: 36%;
  top: 47%;
  width: 64%;
  height: 53%;
}

@media (max-width: 576px) {
  .home-about__gallery {
    max-width: 24rem;
  }

  .home-about__gallery > .image_frame {
    border-radius: 0.625rem;
  }
}

.home-about__content {
  line-height: 1.6;
}