/* ==========================================================
   HEADER — BIARRITZ DREAM HOME

   Dépendances globales : couleurs BDH et --bdh-header-height dans style.css.
   La classe .bdh-biarritz-header est conservée : elle est enregistrée dans
   les templates Elementor Biarritz et Capbreton.
   Fond et typographie : réglages natifs Elementor.

   CSS du header limité à :
   - position fixe
   - hauteurs normale / compacte
   - état au scroll
   - barre d’administration WordPress
   - espacement fluide de la navigation
   - animation du soulignement
   ========================================================== */

/* ==========================================================
   VARIABLES PROPRES AU HEADER
   ========================================================== */

:root {
  --bdh-header-height-compact: 64px;
  --bdh-header-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================
   WRAPPER WORDPRESS
   ========================================================== */

#header-hz-elementor {
  position: fixed;
  z-index: 1000;

  top: 0;
  right: 0;
  left: 0;

  box-shadow: 0 1px 0 rgb(var(--bdh-marron-principal-rgb) / .1);
}

/* ==========================================================
   CONTENEUR PRINCIPAL DU HEADER
   ========================================================== */

.bdh-biarritz-header {
  min-height: var(--bdh-header-height);

  transition:
    min-height .6s var(--bdh-header-ease),
    padding-block-start .6s var(--bdh-header-ease),
    padding-block-end .6s var(--bdh-header-ease);
}

/* ==========================================================
   BARRE D’ADMINISTRATION WORDPRESS
   ========================================================== */

.admin-bar #header-hz-elementor {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar #header-hz-elementor {
    top: 46px;
  }
}

/* ==========================================================
   HEADER — ÉTAT COMPACT AU SCROLL
   ========================================================== */

#header-hz-elementor.scrolled .bdh-biarritz-header {
  box-shadow:
    0 1px 0 rgb(var(--bdh-marron-principal-rgb) / .08);

  min-height: var(--bdh-header-height-compact) !important;

  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

/* ==========================================================
   NAVIGATION — ESPACEMENT
   ========================================================== */

.bdh-header-nav .houzez-nav-menu-main-desktop-wrap .navbar-nav {
  column-gap: clamp(1.125rem, 2.3vw, 2.25rem);
  align-items: center;
}

/* ==========================================================
   SOULIGNEMENT NATIF HOUZEZ
   Désactivé pour éviter le double trait.
   ========================================================== */

.bdh-header-nav .pointer-underline .nav-link::before,
.bdh-header-nav .pointer-underline .nav-link::after {
  content: none !important;
}

/* ==========================================================
   SOULIGNEMENT BDH
   ========================================================== */

.bdh-header-nav li .nav-link {
  background-image:
    linear-gradient(var(--bdh-rose-accentue),
      var(--bdh-rose-accentue));

  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;

  transition:
    color .3s ease,
    background-size .5s var(--bdh-header-ease);
}

.bdh-header-nav li .nav-link:hover,
.bdh-header-nav li .nav-link:focus-visible {
  background-size: 100% 1px;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

  :root {
    --bdh-header-height-compact: 56px;
  }

}

/* ==========================================================
   ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .bdh-biarritz-header,
  .bdh-header-nav li .nav-link {
    transition: none !important;
  }

}

.bdh-header-nav .current-menu-item>.nav-link,
.bdh-header-nav .current-menu-ancestor>.nav-link {
  background-size: 100% 2px;
}

.bdh-header-nav .nav-link:focus-visible {
  outline: 2px solid var(--bdh-marron-principal);
  outline-offset: 5px;
  border-radius: 2px;
}