/* ========== FIX HEADER ALIGNMENT - Uniformiser le header sur toutes les pages ========== */

/*
 * Ce fichier corrige l'alignement du logo et du header pour qu'il soit identique
 * sur la page d'accueil, les pages de catégories, les pages produits ET les pages blog/archives (Ekos)
 */

/* Forcer les mêmes styles pour le header sur TOUTES les pages */
.main-header,
body.home .main-header,
body.page .main-header,
body.single .main-header,
body.single-product .main-header,
body.woocommerce .main-header,
body.woocommerce-page .main-header,
body.archive .main-header,
body.category .main-header,
body.category-ekos .main-header,
body.search .main-header {
    background-color: var(--color-primary) !important;
    padding: var(--space-4) 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
}

/* Uniformiser le header-content */
.header-content,
body.home .header-content,
body.page .header-content,
body.single .header-content,
body.single-product .header-content,
body.woocommerce .header-content,
body.woocommerce-page .header-content,
body.archive .header-content,
body.category .header-content,
body.category-ekos .header-content,
body.search .header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 var(--space-6) !important;
}

/* Uniformiser le logo */
.logo,
body.home .logo,
body.page .logo,
body.single .logo,
body.single-product .logo,
body.woocommerce .logo,
body.woocommerce-page .logo,
body.archive .logo,
body.category .logo,
body.category-ekos .logo,
body.search .logo {
    display: block !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Uniformiser l'image du logo */
.logo img,
body.home .logo img,
body.page .logo img,
body.single .logo img,
body.single-product .logo img,
body.woocommerce .logo img,
body.woocommerce-page .logo img,
body.archive .logo img,
body.category .logo img,
body.category-ekos .logo img,
body.search .logo img {
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Uniformiser le menu principal */
.main-nav,
body.home .main-nav,
body.page .main-nav,
body.single .main-nav,
body.single-product .main-nav,
body.woocommerce .main-nav,
body.woocommerce-page .main-nav,
body.archive .main-nav,
body.category .main-nav,
body.category-ekos .main-nav,
body.search .main-nav {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

/* S'assurer que le header est toujours visible au-dessus du contenu */
.main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Pour les utilisateurs admin avec la barre WordPress */
body.admin-bar .main-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .main-header {
        top: 46px !important;
    }
}

/* Nettoyer les marges potentielles qui pourraient causer des problèmes */
.main-header * {
    box-sizing: border-box !important;
}

/* S'assurer qu'il n'y a pas de padding ou margin supplémentaire sur le container */
.main-header .container,
.main-header > .container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix pour éviter que WooCommerce ou Archives ajoutent leurs propres styles */
.woocommerce .main-header,
.woocommerce-page .main-header,
.single-product .main-header,
.archive .main-header,
.category .main-header {
    margin-bottom: 0 !important;
}

/* S'assurer que le logo est aligné verticalement au centre */
.logo {
    display: flex !important;
    align-items: center !important;
}

/* ========== RESPONSIVE MOBILE ========== */
/* Corrections pour que le header mobile soit compact avec burger menu */

@media (max-width: 768px) {
    /* Cacher le menu desktop sur mobile */
    .main-nav,
    body.home .main-nav,
    body.page .main-nav,
    body.single .main-nav,
    body.single-product .main-nav,
    body.woocommerce .main-nav,
    body.woocommerce-page .main-nav,
    body.archive .main-nav,
    body.category .main-nav,
    body.category-ekos .main-nav,
    body.search .main-nav {
        display: none !important;
    }

    /* Afficher le bouton burger */
    .mobile-menu-toggle {
        display: block !important;
    }

    /* Header plus compact sur mobile */
    .main-header,
    body.home .main-header,
    body.page .main-header,
    body.single .main-header,
    body.single-product .main-header,
    body.woocommerce .main-header,
    body.woocommerce-page .main-header,
    body.archive .main-header,
    body.category .main-header,
    body.category-ekos .main-header,
    body.search .main-header {
        padding: var(--space-3) 0 !important;
    }

    /* Logo plus petit sur mobile */
    .logo img,
    body.home .logo img,
    body.page .logo img,
    body.single .logo img,
    body.single-product .logo img,
    body.woocommerce .logo img,
    body.woocommerce-page .logo img,
    body.archive .logo img,
    body.category .logo img,
    body.category-ekos .logo img,
    body.search .logo img {
        max-height: 45px !important;
    }

    /* Header content avec moins de padding sur mobile */
    .header-content,
    body.home .header-content,
    body.page .header-content,
    body.single .header-content,
    body.single-product .header-content,
    body.woocommerce .header-content,
    body.woocommerce-page .header-content,
    body.archive .header-content,
    body.category .header-content,
    body.category-ekos .header-content,
    body.search .header-content {
        padding: 0 var(--space-4) !important;
    }
}