/* ==========================================================================
   Good Karma — VARIANTE "HERO PHOTO" : header transparent sur photo plein
   cadre, titre centré (section 13 du thème)
   ==========================================================================
   Seconde version du header et du hero de la page d'accueil, reprenant le
   parti pris du thème d'origine (photo plein cadre, voile sombre, header
   transparent, catégories en pastilles, titre et recherche centrés) avec la
   typographie et les composants de la refonte v2.

   Installation : coller ce fichier APRÈS good-karma-theme.css (Custom CSS ou
   asset). Rien à retirer du thème : ce fichier prend le dessus uniquement sur
   la page d'accueil (.homepage-body). Pour revenir à la version 1, supprimer
   ce fichier. Utilise les variables de brand-colors.css v2.

   Le header reste collant : transparent tant que la page est en haut, blanc
   avec un filet dès que l'on défile (classe body.gk-scrolled posée par
   good-karma-home.js v1.1, qui mesure aussi la hauteur du header dans
   --gk-header-h). Sans ce script : header transparent non collant (repli).
   ========================================================================== */

/* ---------- 13.0 Réglages ---------------------------------------------- */

:root {
    --gk-header-h: 118px;                        /* repli si le script est absent (mesuré par JS) */
    --gk-hero-v2-min-h: clamp(520px, 62vh, 680px);
    --gk-hero-v2-overlay-top: var(--gk-overlay-dark-35);
    --gk-hero-v2-overlay-bottom: var(--gk-overlay-black-50);
}

/* ---------- 13.1 Header transparent sur la photo ------------------------ */

.homepage-body header {
    position: absolute;                          /* repli sans JS : posé sur la photo, non collant */
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: transparent;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.homepage-body.gk-has-header-h header {
    position: sticky;                            /* avec le script : collant, et blanc au défilement */
}

.homepage-body:has(#admin-bar) header,
.homepage-body.gk-has-adminbar header {
    top: var(--gk-admin-bar-h, 46px);
}

.homepage-body header .navbar-inverse,
.homepage-body .navbar-inverse {
    background: transparent !important;
    border-bottom: 0;
}

.homepage-body .cbp-hrmenu {
    border-top: 0;
}

/* textes et pastilles en blanc sur la photo */

.homepage-body .navbar-inverse .navbar-brand,
.homepage-body .navbar-inverse .navbar-brand:hover,
.homepage-body .navbar-inverse .navbar-nav > li > a,
.homepage-body .navbar-inverse .navbar-nav > li > a span,
.homepage-body .navbar-inverse .login-btn,
.homepage-body .navbar-inverse span,
.homepage-body .navbar-inverse .navbar-nav > li > a:hover,
.homepage-body .navbar-inverse .navbar-nav > li > a:focus,
.homepage-body .navbar-inverse .navbar-nav > li.main_nav_li.active > a {
    color: var(--gk-white);
}

.homepage-body .navbar-inverse .navbar-nav > li > a:hover,
.homepage-body .navbar-inverse .navbar-nav > li > a:focus {
    opacity: 0.8;
}

.homepage-body .nav_item_user_signup a,
.homepage-body a.btn.btn-primary.btn-sm.listing-add {
    border-color: var(--gk-white) !important;
    color: var(--gk-white) !important;
    background: transparent !important;
    text-transform: uppercase;
    font-size: 12.5px !important;
    letter-spacing: 0.6px;
}

.homepage-body .nav_item_user_signup a:hover,
.homepage-body .nav_item_user_signup a:focus,
.homepage-body a.btn.btn-primary.btn-sm.listing-add:hover {
    background: var(--gk-white) !important;
    border-color: var(--gk-white) !important;
    color: var(--gk-ink-900) !important;
}

/* catégories : pastilles translucides centrées sous la barre de navigation */

.homepage-body .cbp-hrmenu > ul.mega_menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 6px var(--gk-gutter) 10px;
}

.homepage-body .cbp-hrmenu > ul > li {
    margin: 0;
}

.homepage-body .cbp-hrmenu > ul > li > a.univers-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 18px;
    border-radius: var(--gk-radius-pill);
    background: var(--gk-white-22) !important;
    color: var(--gk-white);
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.homepage-body .cbp-hrmenu > ul > li > a.univers-link:hover,
.homepage-body .cbp-hrmenu > ul > li > a.univers-link:focus,
.homepage-body .cbp-hrmenu > ul > li.cbp-hropen > a.univers-link {
    background: var(--gk-white) !important;
    color: var(--gk-ink-900) !important;
    opacity: 1;
}

.homepage-body .cbp-hrmenu > ul > li > a.univers-link i.fa {
    font-size: 12px;
    opacity: 0.85;
}

/* le sous-menu reste une carte blanche, centré sous sa pastille */

.homepage-body .cbp-hropen .cbp-hrsub {
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    margin-top: 8px;
}

.homepage-body .cbp-hropen .cbp-hrsub:before {
    left: 50%;
}

/* ---------- 13.2 Header blanc au défilement (body.gk-scrolled) ---------- */

.homepage-body.gk-scrolled header {
    background: var(--gk-white);
    box-shadow: 0 1px 0 var(--gk-line-250), 0 10px 30px var(--gk-shadow-dark-5);
}

.homepage-body.gk-scrolled .navbar-inverse .navbar-brand,
.homepage-body.gk-scrolled .navbar-inverse .navbar-brand:hover {
    color: var(--gk-primary);
}

.homepage-body.gk-scrolled .navbar-inverse .navbar-nav > li > a,
.homepage-body.gk-scrolled .navbar-inverse .navbar-nav > li > a span,
.homepage-body.gk-scrolled .navbar-inverse .login-btn,
.homepage-body.gk-scrolled .navbar-inverse span,
.homepage-body.gk-scrolled .navbar-inverse .navbar-nav > li.main_nav_li.active > a {
    color: var(--gk-ink-700);
}

.homepage-body.gk-scrolled .navbar-inverse .navbar-nav > li > a:hover,
.homepage-body.gk-scrolled .navbar-inverse .navbar-nav > li > a:focus {
    color: var(--gk-ink-900);
    opacity: 1;
}

.homepage-body.gk-scrolled .nav_item_user_signup a,
.homepage-body.gk-scrolled a.btn.btn-primary.btn-sm.listing-add {
    border-color: var(--gk-primary) !important;
    color: var(--gk-primary) !important;
}

.homepage-body.gk-scrolled .nav_item_user_signup a:hover,
.homepage-body.gk-scrolled .nav_item_user_signup a:focus,
.homepage-body.gk-scrolled a.btn.btn-primary.btn-sm.listing-add:hover {
    background: var(--gk-primary) !important;
    border-color: var(--gk-primary) !important;
    color: var(--gk-white) !important;
}

.homepage-body.gk-scrolled .cbp-hrmenu > ul > li > a.univers-link {
    background: var(--gk-surface-100) !important;
    color: var(--gk-ink-700);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.homepage-body.gk-scrolled .cbp-hrmenu > ul > li > a.univers-link:hover,
.homepage-body.gk-scrolled .cbp-hrmenu > ul > li > a.univers-link:focus,
.homepage-body.gk-scrolled .cbp-hrmenu > ul > li.cbp-hropen > a.univers-link {
    background: var(--gk-primary-tint) !important;
    color: var(--gk-primary) !important;
}

/* ---------- 13.3 Hero : photo plein cadre, voile, contenu centré -------- */

.homepage-body .homepage-hero-module,
.homepage-body .welcome-message {
    position: relative;
    background: var(--gk-dark-600);
    border-bottom: 0;
    overflow: hidden;
}

/* le hero remonte sous le header collant et réserve sa hauteur en padding */

.homepage-body.gk-has-header-h .homepage-hero-module {
    margin-top: calc(-1 * var(--gk-header-h));
}

.homepage-body .hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-template-columns: none;
    gap: 0;
    min-height: var(--gk-hero-v2-min-h);
    max-width: none;
    padding: calc(var(--gk-header-h) + 24px) var(--gk-gutter) clamp(48px, 7vw, 84px);
}

/* photo : couvre tout le bloc, derrière le voile et le contenu */

.homepage-body .hero-container .poster {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    order: 0;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    background-size: cover !important;
    background-position: center !important;
}

/* voile : léger en haut (lisibilité du header), plus dense vers le bas */

.homepage-body .hero-container .overlay-filter {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, var(--gk-hero-v2-overlay-top) 0%, var(--gk-hero-v2-overlay-bottom) 100%);
}

/* contenu centré */

.homepage-body .hero-container > .container {
    position: relative;
    z-index: 2;
    order: 0;
    width: 100%;
    max-width: 880px;
}

.homepage-body .home-banner-content {
    text-align: center;
    color: var(--gk-white);
}

.homepage-body .home-banner-content h1,
.homepage-body .welcome-message h1 {
    color: var(--gk-white);
    font-size: clamp(32px, 5vw, 58px);
    text-shadow: 0 2px 24px var(--gk-overlay-black-25);
}

.homepage-body .home-banner-content h2,
.homepage-body .welcome-message h2 {
    margin: 16px auto 0;
    max-width: 640px;
    color: var(--gk-white-90);
    text-align: center;
    text-shadow: 0 1px 12px var(--gk-overlay-black-25);
}

/* bloc recherche : même carte blanche que la v1, centrée */

.homepage-body .home-search-wrapper,
.homepage-body .home-banner-content .row.home-search-wrapper {
    display: flex;
    justify-content: center;
    margin: 30px 0 0 !important;
    text-align: center;
}

.homepage-body form.home-search {
    max-width: 720px;
    margin: 0 auto;
    box-shadow: 0 20px 50px var(--gk-overlay-black-25);
}

/* "Sign up for free" : lien blanc souligné plutôt qu'un bouton */

.homepage-body .hero-container .home-banner-content .btn,
.homepage-body .hero-container .home-banner-content .btn:hover,
.homepage-body .hero-container .home-banner-content .btn:focus {
    margin-top: 22px;
    padding: 0 0 3px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1.5px solid var(--gk-white-60) !important;
    border-radius: 0 !important;
    color: var(--gk-white) !important;
    font-size: 14px;
    font-weight: 600;
    opacity: 1;
}

.homepage-body .hero-container .home-banner-content .btn:hover {
    border-bottom-color: var(--gk-white) !important;
}

/* ---------- 13.4 Tablette et mobile ------------------------------------- */

@media (max-width: 991px) {
    /* le header reprend un fond blanc : le menu replié et le bouton burger
       ne sont pas lisibles en transparence sur une photo */
    .homepage-body header,
    .homepage-body.gk-scrolled header {
        position: sticky;
        background: var(--gk-white);
        box-shadow: 0 1px 0 var(--gk-line-250);
    }

    .homepage-body .navbar-inverse .navbar-brand,
    .homepage-body .navbar-inverse .navbar-brand:hover {
        color: var(--gk-primary);
    }

    .homepage-body .navbar-inverse .navbar-nav > li > a,
    .homepage-body .navbar-inverse .navbar-nav > li > a span,
    .homepage-body .navbar-inverse span {
        color: var(--gk-ink-900);
    }

    .homepage-body .cbp-hrmenu > ul.mega_menu {
        display: block;
        padding: 6px 0 0;
    }

    .homepage-body .cbp-hrmenu > ul > li > a.univers-link {
        display: flex;
        border-radius: 0;
        background: transparent !important;
        color: var(--gk-ink-900);
        padding: 10px 20px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .homepage-body .nav_item_user_signup a,
    .homepage-body a.btn.btn-primary.btn-sm.listing-add {
        text-transform: none;
        letter-spacing: 0;
        font-size: 14.5px !important;
    }

    .homepage-body.gk-has-header-h .homepage-hero-module {
        margin-top: 0;
    }

    .homepage-body .hero-container {
        min-height: 0;
        padding: 44px var(--gk-gutter) 48px;
    }

    .homepage-body .home-banner-content h1,
    .homepage-body .welcome-message h1 {
        font-size: clamp(28px, 8vw, 38px);
    }

    .homepage-body .home-banner-content h2,
    .homepage-body .welcome-message h2 {
        font-size: 15.5px;
    }

    .homepage-body form.home-search {
        max-width: none;
    }
}