/**
 * Stalport Immo — styles du thème
 * Modifier ce fichier pour les changements client.
 * legacy.css est figé (snapshot SCSS).
 */

@import url("variables.css");
@import url("legacy.css");
@import url("whise-filter.css");
@import url("whise-estates.css");

/* --- Custom / overrides client --- */

.page-template-single-estate #header {
  position: relative;
}

.page-template-single-estate #header::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.45;
  position: absolute;
  top: 0;
  left: 0;
}

/* Logo négatif — masqué par défaut (visible uniquement au megamenu mobile ouvert) */
.header .logo--inverse {
  display: none;
}

/* Hero — pagination (styles retirés de legacy.css) */
#hero-container .swiper > .swiper-pagination {
  position: absolute;
  top: 50%;
  right: 5vw !important;
  left: auto;
  bottom: auto;
  gap: 10px;
  width: 90vw;
  margin: auto;
  height: 50px !important;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
}

#hero-container .swiper > .swiper-pagination .swiper-pagination-bullet {
  margin: 0 !important;
  padding: 0 5px;
  border-radius: 0;
  width: 20px;
  height: 2px;
  opacity: 1;
  background: var(--color-primary, #bce036);
  transition: width 200ms ease-in;
}

#hero-container .swiper > .swiper-pagination .swiper-pagination-bullet-active {
  background: #818274;
  width: 60px;
}

@media screen and (max-width: 768px) {
  #hero-container .swiper > .swiper-pagination {
    top: auto;
    bottom: 28px;
    right: auto !important;
    left: 0;
    width: 100%;
    height: auto !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  #hero-container .swiper > .swiper-pagination .swiper-pagination-bullet,
  #hero-container .swiper > .swiper-pagination .swiper-pagination-bullet-active {
    width: 10px !important;
    height: 10px !important;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transition: background-color 200ms ease, transform 200ms ease;
  }

  #hero-container .swiper > .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-primary, #bce036) !important;
    transform: scale(1.15);
  }

  /* Megamenu mobile — fond blanc */
  .megamenu {
    background-color: var(--color-light, #fff);
    color: var(--color-rich-black, #414141);
  }

  .megamenu .primary-navigation ul li a {
    color: var(--color-rich-black, #414141);
  }

  .megamenu .primary-navigation ul li a:hover,
  .megamenu .primary-navigation ul .current-menu-item:not(.cta) a {
    color: var(--color-primary, #bce036);
  }

  .megamenu .primary-navigation ul li.cta {
    margin-top: 40px;
  }

  .megamenu .primary-navigation ul li.cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 220px;
    max-width: 100%;
    padding: 14px 36px;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    background-color: var(--color-primary, #bce036);
    border-radius: 999px;
    color: var(--color-light, #fff) !important;
    text-decoration: none;
  }

  .megamenu .primary-navigation ul li.cta a:hover {
    color: var(--color-light, #fff) !important;
    background-color: #a4c42f;
  }

  /* Logo négatif + burger noir quand le menu mobile est ouvert */
  .header.navigation.active-menu:has(.logo--inverse) .logo--default {
    display: none;
  }

  .header.navigation.active-menu .logo--inverse {
    display: block;
  }

  .header.navigation.active-menu .hamburger-menu,
  .header.navigation.active-menu .hamburger-menu svg,
  .header.navigation.active-menu .hamburger-menu path {
    stroke: var(--color-rich-black, #414141);
  }
}