/* ==========================================================================
   Barre de navigation au style de /hotel sur toutes les pages publiques.
   Design uniquement : aucun texte, lien ou menu n'est modifié.
   Chargé en dernier dans layouts/frontend.blade.php.
   Pour revenir en arrière : retirer la balise <link> de ce fichier.
   ========================================================================== */

:root {
    --hh-bar: rgba(6, 26, 24, 0.94);        /* barre pleine (pages sans photo derrière) */
    --hh-bar-glass: rgba(15, 61, 51, 0.62); /* barre transparente sur la photo (vert de marque) */
    --hh-accent: #DF873D;                   /* orange du bouton /hotel */
    --hh-text: #FFFFFF;
}

/* Toutes les barres : même transparence que /hotel partout
   (voile sombre 58 % + flou, porté par .ht-home-header::after dans style.css). */
body > header,
header.header-section,
header.ht-home-header,
header.ht-home-header.ht-nav-solid {
    background: transparent !important;
    box-shadow: none !important;
}
header.ht-home-header {
    position: relative;
    z-index: 1030;
}
header.ht-home-header::after {
    background: var(--hh-bar-glass) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Pages sans photo derrière la barre : le voile à 58 % y paraîtrait gris-vert.
   On utilise la couleur que la barre affiche réellement sur /hotel (#2A2D26,
   mesurée sur capture) pour avoir la même teinte partout. */
header.ht-home-header.ht-nav-solid:not(.ht-nav-overlay)::after {
    background: #0F3D33 !important; /* vert de marque (modern-ui.css) */
}

/* Le menu mobile (offcanvas) est à l'intérieur de la barre, donc dans sa couche
   (z-index 1030). Le voile sombre de Bootstrap (1040 par défaut) passait
   au-dessus et bloquait le menu : on le place juste sous la barre. */
.offcanvas-backdrop {
    z-index: 1029 !important;
}

/* Menu des langues (bandeau vert du haut) : il s'ouvre vers le bas, par-dessus
   la barre (z-index 1030). Seul le menu est surélevé : surélever tout le bandeau
   le ferait passer devant le menu mobile ouvert. */
.header-top-section .img-text-select .drop-content {
    z-index: 1035;
}

/* Accueil : la barre se pose sur la photo du slider, comme sur /hotel */
header.ht-home-header.ht-nav-overlay {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}

/* Sur une photo (accueil /real-estate) : même voile transparent que /hotel */
header.real-home-header {
    background: var(--hh-bar-glass) !important;
    box-shadow: none !important;
}

/* Liens du menu en blanc (sur ordinateur ; sur mobile le menu s'ouvre dans
   un panneau blanc et garde ses couleurs foncées). */
@media (min-width: 1200px) {
    body > header .at-home-navbar-nav > li > .at-home-nav-link,
    header.header-section .at-home-navbar-nav > li > .at-home-nav-link,
    header.real-home-header .at-home-navbar-nav > li > .at-home-nav-link,
    header.header-section .header-nav-list > li > .first-a,
    header.header-section .header-nav-list > li:hover .first-a {
        color: var(--hh-text) !important;
    }
    body > header .have-sub-menu > .at-home-nav-link svg path,
    header.header-section .have-sub-menu > .at-home-nav-link svg path,
    header.real-home-header .have-sub-menu > .at-home-nav-link svg path,
    header.header-section .header-nav-list > li > .first-a svg path {
        fill: var(--hh-text) !important;
    }
}

/* Lien "Login" : toujours visible dans la barre */
body > header .login.at-home-nav-link,
header.header-section .login,
header.real-home-header .login.at-home-nav-link {
    color: var(--hh-text) !important;
}

/* Recherche : séparateur et champ clairs, texte blanc */
body > header .at-home-nav-search::after,
header.header-section .at-home-nav-search::after,
header.real-home-header .at-home-nav-search::after,
body > header .at-home-menu-button:has(.at-home-search-input:focus)::after,
header.header-section .at-home-menu-button:has(.at-home-search-input:focus)::after,
header.real-home-header .at-home-menu-button:has(.at-home-search-input:focus)::after {
    background: rgba(255, 255, 255, 0.27) !important;
}
body > header .at-home-search-input,
header.header-section .at-home-search-input,
header.real-home-header .at-home-search-input {
    color: var(--hh-text) !important;
}
body > header .at-home-search-input::placeholder,
header.header-section .at-home-search-input::placeholder,
header.real-home-header .at-home-search-input::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Bouton "Add Listing" : orange, coins arrondis 8px (comme .ht-btn-primary) */
body > header .at-home-listing-btn,
header.header-section .at-home-listing-btn,
header.real-home-header .at-home-listing-btn {
    background: var(--hh-accent) !important;
    color: var(--hh-text) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-family: var(--font-sans, 'Inter'), sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
body > header .at-home-listing-btn:hover,
body > header .at-home-listing-btn:active,
header.header-section .at-home-listing-btn:hover,
header.header-section .at-home-listing-btn:active,
header.real-home-header .at-home-listing-btn:hover,
header.real-home-header .at-home-listing-btn:active {
    background: var(--hh-accent) !important;
    color: var(--hh-text) !important;
    filter: brightness(1.06);
}

/* Bouton menu mobile : orange plein, icône blanche */
body > header .at-home-menu-btn,
header.header-section .at-home-menu-btn,
header.header-section .mobile-menu-btn,
header.real-home-header .at-home-menu-btn {
    background: var(--hh-accent) !important;
    border-color: var(--hh-accent) !important;
}
body > header .at-home-menu-btn path,
header.header-section .at-home-menu-btn path,
header.header-section .mobile-menu-btn path,
header.real-home-header .at-home-menu-btn path {
    fill: var(--hh-text) !important;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
/* Petits écrans : barre compacte pour que logo, Login, bouton et ☰ tiennent
   sur une ligne (jusqu'à 320px de large). */
@media (max-width: 575.98px) {
    header.ht-home-header .at-home-menu-wrap {
        column-gap: 8px;
    }
    header.ht-home-header .at-home-menu-wrap > div:first-child {
        flex-shrink: 1;
        min-width: 0;
    }
    header.ht-home-header .light-logo-preview {
        height: auto !important;
        max-height: 48px;
        max-width: 100%;
        padding: 4px !important;
    }
    header.ht-home-header .at-home-search-login-button {
        gap: 8px !important;
        column-gap: 8px !important;
        flex-shrink: 0;
    }
    header.ht-home-header .login.at-home-nav-link {
        font-size: 14px;
        padding: 8px 0;
        white-space: nowrap;
    }
    header.ht-home-header .at-home-listing-btn {
        font-size: 13px !important;
        line-height: 18px !important;
        padding: 8px 10px !important;
        gap: 6px !important;
        white-space: nowrap;
    }
}
@media (max-width: 429.98px) {
    /* Téléphones : le bouton garde seulement l'icône + (le logo reste lisible) */
    header.ht-home-header .at-home-listing-btn span {
        display: none;
    }
}

/* Sécurité : les images/ombres décoratives de certaines bannières (/beauty,
   /restaurant) dépassent de quelques px sur petit écran → pas de défilement
   horizontal. "clip" (et non "hidden") ne casse pas position: sticky. */
html,
body {
    overflow-x: clip;
}

/* Pied de page : l'adresse e-mail ne doit pas élargir la page sur mobile */
a[href^="mailto:"],
a[href^="mailto:"] span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Menu avec des noms de sections longs (ex. « منظمو الحفلات ومقدمو خدمات الضيافة ») :
   texte plus compact, retour à la ligne équilibré, Login et bouton sur une seule ligne. */
@media (min-width: 1200px) {
    header.ht-home-header .at-home-navbar-nav { column-gap: 22px !important; }
    header.ht-home-header .at-home-navbar-nav > li > .at-home-nav-link {
        font-size: 14.5px !important;
        line-height: 1.35 !important;
        max-width: 175px;
        text-align: center;
        text-wrap: balance;
    }
    header.ht-home-header .login.at-home-nav-link,
    header.ht-home-header .at-home-listing-btn { white-space: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    header.ht-home-header .at-home-navbar-nav { column-gap: 16px !important; }
    header.ht-home-header .at-home-navbar-nav > li > .at-home-nav-link { font-size: 14px !important; max-width: 150px; }
    header.ht-home-header .at-home-listing-btn { padding: 10px 16px !important; font-size: 14.5px !important; }
    header.ht-home-header .at-home-search-login-button { column-gap: 12px !important; gap: 12px !important; }
}

/* Avatar connecté : flèche du menu utilisateur sur fond clair transparent */
body > header .user-dropdown-toggle::after,
header.header-section .user-dropdown-toggle::after,
header.real-home-header .user-dropdown-toggle::after {
    border: 1px solid #ffffff4a;
    background-color: #ffffff4a;
}