/* =========================================================
   MHPSS ProCare Firm
   Bandeau (header) : verre, position, logo, navigation

   Deux dispositions :
   - ordinateur (1100px et plus) : logo a gauche, menu et icone
     du compte a droite, alignes sur le conteneur des pages
     (.hz-container, 1180px) ;
   - tablette et telephone (jusqu a 1099px) : barre flottante,
     logo a gauche, burger a droite. Le menu ouvert vit dans
     mobile-menu.css.

   Le seuil de 1100px est celui ou les six entrees du menu
   tiennent sur une ligne a cote du logo. S il change, le
   modifier aussi dans mobile-menu.css et horizons-extension.js
   (MENU_QUERY).
   ========================================================= */

/* ---------------------------------------------------------
   1. Header en verre
   --------------------------------------------------------- */

body .wp-site-blocks>header.wp-block-template-part {
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    top: var(--hz-safe-top) !important;
    z-index: 100;
    box-sizing: border-box !important;
    width: auto !important;
    margin-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    margin-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    border: 1px solid rgba(7, 71, 107, 0.08);
    border-radius: 1.5rem;
    background-color: rgba(250, 250, 250, 0.1) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: none;
}

header.wp-block-template-part>div,
header.wp-block-template-part .wp-block-group,
header.wp-block-template-part .alignwide,
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation__container {
    background-color: transparent !important;
    background-image: none !important;
}

/* Barre d administration WordPress (connecte) : fixe au-dessus de 600px. */
body.admin-bar .wp-site-blocks>header.wp-block-template-part {
    top: calc(32px + var(--hz-safe-top)) !important;
}

@media (max-width: 782px) {
    body.admin-bar .wp-site-blocks>header.wp-block-template-part {
        top: calc(46px + var(--hz-safe-top)) !important;
    }
}

/* ---------------------------------------------------------
   2. Barre interieure : logo a gauche, menu et icones a droite

   Le modele d en-tete pose un retrait de 87px en ligne sur le
   premier groupe ; il est neutralise ici pour aligner la barre
   sur le conteneur des pages.
   --------------------------------------------------------- */

body .wp-site-blocks>header.wp-block-template-part>.wp-block-group {
    margin-block-start: 0;
    padding-left: 0 !important;
}

body .wp-site-blocks>header.wp-block-template-part>.wp-block-group>.wp-block-group {
    padding-inline: 0 !important;
}

body .wp-site-blocks>header.wp-block-template-part .alignwide {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.5rem !important;
    box-sizing: border-box;
    width: min(100% - 3rem, 1180px) !important;
    max-width: none !important;
    min-height: 5rem;
    margin-inline: auto !important;
    padding: 0 !important;
}

/* Menu et icones du compte, a droite */
body .wp-site-blocks>header.wp-block-template-part .alignwide>.wp-block-group {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------
   3. Logo (image du Customizer, Horizons Design > Header logo)
   --------------------------------------------------------- */

.wp-block-site-title {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 3rem;
    margin: 0;
    padding: 0 !important;
}

.wp-block-site-title a {
    color: var(--hz-foreground);
    font-size: 0;
    text-decoration: none !important;
}

.wp-block-site-title a::before {
    content: '';
    display: block;
    width: 12.5rem;
    height: 3rem;
    background-image: var(--hz-header-logo-url);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

/* ---------------------------------------------------------
   4. Menu (ordinateur)
   --------------------------------------------------------- */

.wp-block-navigation {
    gap: 0.25rem;
    margin: 0;
    color: var(--hz-foreground);
    font-size: 0.875rem !important;
    font-weight: 700;
}

.wp-block-navigation .wp-block-navigation__container,
.wp-block-navigation .wp-block-page-list {
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.wp-block-navigation .wp-block-navigation-item__content {
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--hz-foreground);
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none !important;
    transition:
        background 180ms ease,
        color 180ms ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
    background: color-mix(in srgb, var(--hz-primary) 10%, transparent);
    color: var(--hz-foreground);
}

.wp-block-navigation .current-menu-item>.wp-block-navigation-item__content,
.wp-block-navigation .current-menu-item>a {
    background: var(--hz-primary);
    color: white;
}

/* Entree active. Le script marque deja l entree de la page
   courante ; ces regles couvrent les liens qui passent par une
   redirection (/a-propos, /services). */
@media (min-width: 1100px) {

    body.home header .wp-block-navigation a[href='/'],
    body.page-id-319 header .wp-block-navigation a[href*='/services'],
    body.page-id-328 header .wp-block-navigation a[href*='/a-propos'],
    body.page-id-150 header .wp-block-navigation a[href*='/nos-ressources'],
    body.page-id-44 header .wp-block-navigation a[href*='/rendez-vous'],
    body.page-id-57 header .wp-block-navigation a[href*='/contact'] {
        background: var(--hz-primary) !important;
        color: #ffffff !important;
    }
}

/* ---------------------------------------------------------
   5. Icones du compte et du panier (WooCommerce)
   --------------------------------------------------------- */

[data-block-name='woocommerce/customer-account'],
[data-block-name='woocommerce/mini-cart'] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.wc-block-customer-account__account-icon,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    color: var(--hz-foreground);
    background: transparent;
    border-radius: 999px;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.wc-block-customer-account__account-icon:hover,
.wc-block-customer-account__account-icon:focus-visible,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button:hover,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button:focus-visible {
    border-color: var(--hz-border);
    background: color-mix(in srgb, var(--hz-primary) 6%, transparent);
    color: var(--hz-foreground);
}

/* ---------------------------------------------------------
   6. Tablette et telephone : barre flottante, burger a droite
   --------------------------------------------------------- */

@media (max-width: 1099px) {
    body .wp-site-blocks>header.wp-block-template-part {
        top: calc(0.75rem + var(--hz-safe-top)) !important;
    }

    body .wp-site-blocks>header.wp-block-template-part .alignwide {
        width: 100% !important;
        min-height: 4rem;
        padding-inline: 1rem !important;
        gap: 0.5rem !important;
    }

    body .wp-site-blocks>header.wp-block-template-part .alignwide>.wp-block-group {
        gap: 0.25rem !important;
    }

    .wp-block-site-title {
        min-height: 2.5rem;
    }

    .wp-block-site-title a::before {
        width: 10rem;
        height: 2.5rem;
    }
}

/* La barre d administration defile avec la page sous 600px. */
@media (max-width: 600px) {
    body.admin-bar .wp-site-blocks>header.wp-block-template-part {
        top: calc(0.75rem + var(--hz-safe-top)) !important;
    }
}

@media (max-width: 640px) {
    .wp-block-site-title a::before {
        width: min(9.25rem, 58vw);
        height: 2.25rem;
    }

    [data-block-name='woocommerce/customer-account'],
    [data-block-name='woocommerce/mini-cart'] {
        transform: scale(0.9);
    }
}