/*
 * Header Hotfixes
 *
 * Ce fichier contient les correctifs pour les problèmes de border-radius
 * et de clipping dans le header du site.
 *
 * @package fmx2025
 * @since 1.0.0
 * @version 1.0.0
 */

/* --------------------------------------------------------------
   Header radius hotfix (19/09/2025)
   Contexte: Forcer le border-radius et le clipping sur toutes les couches
   du header (effets, nav-wrapper, décoration, boutons).
-------------------------------------------------------------- */

/* 1) Forcer le rayon Apple sur le header avec une spécificité accrue */
body .site-header {
	border-radius: 16px; /* Border-radius Apple uniforme */
}

/* 2) Forcer le clipping sur les couches d'effets et de fond */
body .site-header .header-bg-effects,
body .site-header .header-bg-effects .background-color {
	border-radius: inherit;
	overflow: hidden; /* Utiliser overflow:hidden pour une meilleure compatibilité */
}

/* 3) Forcer le clipping et le BON radius sur le bloc nav */
body .site-header .nav-wrapper {
	border-radius: 16px; /* Application directe du radius Apple */
	overflow: hidden; /* Crucial pour clipper son propre fond */
}

/* 4) Permettre au header de coexister avec les autres éléments */
@media (min-width: 769px) {
	body .site-header {
		/* Pas d'overflow pour permettre aux éléments fils de sortir si nécessaire */
		overflow: visible;
		/* Ajouter un z-index plus intelligent pour éviter les superpositions */
		z-index: var(--z-fixed, 1030);
		/* Améliorer la détection de collision avec les autres éléments */
		isolation: isolate;
	}
}

/* 5) S'assurer que la décoration hérite bien du radius */
body .site-header .header-decoration {
	border-radius: inherit;
	overflow: hidden;
}

/* 6) Unifier le border-radius des boutons d'action du header */
body .site-header .action-btn {
	border-radius: 12px !important; /* Border-radius Apple pour boutons */
}

/* 7) Styles pour la détection de collision */
.header-collision-detected {
	outline: 2px dashed rgba(255, 25, 131, 0.5) !important;
	outline-offset: 2px !important;
}

.site-header.header-collision-adjusted {
	box-shadow: 
		0 8px 32px rgba(0, 0, 0, 0.6),
		0 2px 8px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 0 2px rgba(255, 25, 131, 0.3) !important;
}

/* 8) Améliorer l'espacement pour éviter les collisions */
body {
	/* Assurer un espace minimum en haut pour le header */
	padding-top: 0;
}



/* 9) Responsive - Ajustements pour mobile */
/* Suppression des media queries pour hauteur uniforme Apple */

/* ============================================================
   WORDPRESS ADMIN BAR - Frontend Premium Styling
   Design glassmorphism élégant intégré au thème FMX
============================================================ */

/* ==========================================================
   CRITICAL: Positionner le header du SITE sous la barre admin WP
   La barre admin fait maintenant 46px de haut
   ========================================================== */
html.admin-bar .site-header,
body.admin-bar .site-header,
.admin-bar .site-header {
    top: 46px !important;
    margin-top: 0 !important;
}

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

/* ==========================================================
   BARRE ADMIN WP - Reset et Styles de base
   ========================================================== */

/* Reset complet des listes */
body:not(.wp-admin) #wpadminbar ul,
body:not(.wp-admin) #wpadminbar li,
body:not(.wp-admin) #wpadminbar .ab-submenu,
body:not(.wp-admin) #wpadminbar .ab-sub-wrapper ul,
body:not(.wp-admin) #wpadminbar .quicklinks ul {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:not(.wp-admin) #wpadminbar li::before,
body:not(.wp-admin) #wpadminbar li::after,
body:not(.wp-admin) #wpadminbar .ab-submenu li::before,
body:not(.wp-admin) #wpadminbar .ab-submenu li::after,
body:not(.wp-admin) #wpadminbar .quicklinks li::before,
body:not(.wp-admin) #wpadminbar .quicklinks li::after {
    content: none !important;
    display: none !important;
}

/* === BARRE ADMIN PRINCIPALE - GLASSMORPHISME PREMIUM === */
body:not(.wp-admin) #wpadminbar {
    background: rgba(12, 12, 14, 0.95) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4) !important;
    height: 46px !important;
}

/* === HAUTEUR ET PADDING DES ÉLÉMENTS DU MENU PRINCIPAL === */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-root-default,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-top-secondary {
    height: 46px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-root-default > li,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-top-secondary > li {
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-root-default > li > .ab-item,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-top-secondary > li > .ab-item {
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* === TYPOGRAPHIE COHÉRENTE === */
body:not(.wp-admin) #wpadminbar,
body:not(.wp-admin) #wpadminbar * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13px !important;
}

/* === ÉLÉMENTS DE MENU PRINCIPAUX === */
body:not(.wp-admin) #wpadminbar .ab-item,
body:not(.wp-admin) #wpadminbar .ab-empty-item,
body:not(.wp-admin) #wpadminbar > #wp-toolbar span.ab-label,
body:not(.wp-admin) #wpadminbar .ab-top-menu > li > .ab-item {
    color: rgba(255, 255, 255, 0.8) !important;
    text-shadow: none !important;
    transition: all 0.15s ease !important;
}

/* === ÉTATS HOVER/FOCUS ÉLÉGANTS === */
body:not(.wp-admin) #wpadminbar .ab-item:hover,
body:not(.wp-admin) #wpadminbar .ab-item:focus,
body:not(.wp-admin) #wpadminbar .ab-top-menu > li:hover > .ab-item,
body:not(.wp-admin) #wpadminbar .ab-top-menu > li.hover > .ab-item {
    color: #ffffff !important;
    background: rgba(255, 25, 131, 0.15) !important;
}

/* === SOUS-MENUS DROPDOWN PREMIUM === */
body:not(.wp-admin) #wpadminbar .ab-sub-wrapper,
body:not(.wp-admin) #wpadminbar .ab-submenu,
body:not(.wp-admin) #wpadminbar .quicklinks .menupop ul {
    background: rgba(15, 15, 17, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    padding: 8px !important;
}

/* Items dans les sous-menus - SANS POINTS */
body:not(.wp-admin) #wpadminbar .quicklinks .menupop ul li,
body:not(.wp-admin) #wpadminbar .ab-submenu li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Liens dans les sous-menus */
body:not(.wp-admin) #wpadminbar .quicklinks .menupop ul li a,
body:not(.wp-admin) #wpadminbar .ab-submenu li a {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 12px 16px !important;
    margin: 2px 0 !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    display: block !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

body:not(.wp-admin) #wpadminbar .quicklinks .menupop ul li a:hover,
body:not(.wp-admin) #wpadminbar .quicklinks .menupop ul li a:focus,
body:not(.wp-admin) #wpadminbar .ab-submenu li a:hover {
    color: #ffffff !important;
    background: rgba(255, 25, 131, 0.2) !important;
}

/* === ICÔNES === */
body:not(.wp-admin) #wpadminbar .ab-icon,
body:not(.wp-admin) #wpadminbar .ab-icon::before,
body:not(.wp-admin) #wpadminbar .ab-item::before {
    color: rgba(255, 255, 255, 0.6) !important;
}

body:not(.wp-admin) #wpadminbar .ab-item:hover .ab-icon,
body:not(.wp-admin) #wpadminbar .ab-item:hover .ab-icon::before,
body:not(.wp-admin) #wpadminbar .ab-item:hover::before {
    color: #FF1983 !important;
}

/* === BOUTON "NOUVEAU" - STYLE PILL === */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-new-content > .ab-item {
    background: rgba(255, 25, 131, 0.25) !important;
    border: 1px solid rgba(255, 25, 131, 0.4) !important;
    border-radius: 20px !important;
    margin: 4px 6px !important;
    padding: 0 12px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-new-content > .ab-item:hover {
    background: rgba(255, 25, 131, 0.4) !important;
    border-color: #FF1983 !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-new-content > .ab-item .ab-icon::before {
    color: #FF1983 !important;
}

/* === BADGES DE NOTIFICATION === */
body:not(.wp-admin) #wpadminbar .ab-item .ab-label,
body:not(.wp-admin) #wpadminbar .awaiting-mod,
body:not(.wp-admin) #wpadminbar .update-plugins {
    background: #FF1983 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    padding: 1px 6px !important;
    min-width: 16px !important;
    text-align: center !important;
}

/* === AVATAR UTILISATEUR DANS LA BARRE === */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account .avatar {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    transition: border-color 0.15s ease !important;
    width: 26px !important;
    height: 26px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account:hover .avatar {
    border-color: #FF1983 !important;
}

/* ==========================================================
   DROPDOWN MENU UTILISATEUR - Style Premium
   ========================================================== */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-actions {
    padding: 16px !important;
    min-width: 220px !important;
}

/* Section info utilisateur avec avatar */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info > .ab-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info > .ab-item:hover {
    background: rgba(255, 25, 131, 0.1) !important;
}

/* Avatar dans le dropdown - taille réduite et stylée */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info .avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 25, 131, 0.4) !important;
    flex-shrink: 0 !important;
}

/* Nom d'affichage */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info .display-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    display: block !important;
}

/* Texte "Edit Profile" */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info .ab-item span:not(.display-name):not(.avatar) {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Lien Edit Profile sous le nom */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-edit-profile a {
    padding: 10px 12px !important;
    font-size: 13px !important;
}

/* Lien Logout */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout a {
    padding: 10px 12px !important;
    font-size: 13px !important;
    color: rgba(255, 100, 100, 0.9) !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 16px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout a:hover {
    background: rgba(255, 80, 80, 0.15) !important;
    color: #ff6b6b !important;
}

/* === NOM DU SITE - STYLE BRAND === */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-site-name > .ab-item {
    font-weight: 600 !important;
    color: #FF1983 !important;
}

/* === CORRECTION DU CHEVAUCHEMENT SITE-NAME / VIEW-SITE === */
/* Forcer les éléments à rester sur leur propre espace sans chevauchement */
body:not(.wp-admin) #wpadminbar .quicklinks > ul#wp-admin-bar-root-default {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

body:not(.wp-admin) #wpadminbar .quicklinks > ul#wp-admin-bar-root-default > li {
    position: relative !important;
    flex-shrink: 0 !important;
}

/* Le nom du site */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-site-name {
    position: relative !important;
    z-index: 10 !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-site-name > .ab-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* Le bouton "View Site" / "Live" - doit être séparé clairement */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-view-site {
    position: relative !important;
    z-index: 9 !important;
    margin-left: 4px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-view-site > .ab-item {
    background: rgba(255, 25, 131, 0.2) !important;
    border: 1px solid rgba(255, 25, 131, 0.3) !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    margin: 4px 0 !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-view-site > .ab-item:hover {
    background: rgba(255, 25, 131, 0.35) !important;
    border-color: #FF1983 !important;
}

/* S'assurer que les sous-menus ne chevauchent rien */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-site-name .ab-sub-wrapper {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    z-index: 99999 !important;
}

/* === MASQUER LE LOGO WP === */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-wp-logo {
    display: none !important;
}

/* === CUSTOMIZER LINK === */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-customize > .ab-item .ab-icon::before {
    color: #FF1983 !important;
}

/* ==========================================================
   DROPDOWN UTILISATEUR (à droite) - Correction alignement
   ========================================================== */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-top-secondary {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-top-secondary > ul {
    display: flex !important;
    align-items: center !important;
    height: 32px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account {
    position: relative !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 32px !important;
    min-width: 200px !important;
    z-index: 99999 !important;
}

/* === RESPONSIVE MOBILE === */
@media screen and (max-width: 782px) {
    body:not(.wp-admin) #wpadminbar .ab-sub-wrapper,
    body:not(.wp-admin) #wpadminbar .ab-submenu {
        padding: 6px !important;
    }
    
    body:not(.wp-admin) #wpadminbar #wp-admin-bar-top-secondary {
        height: 46px !important;
    }
    
    body:not(.wp-admin) #wpadminbar #wp-admin-bar-top-secondary > ul {
        height: 46px !important;
    }
    
    body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper {
        top: 46px !important;
    }
}

/* Ajuster les marges de la recherche header quand admin bar est présente */
.admin-bar .header-search {
    top: calc(46px + 20px + 70px);
}

@media screen and (max-width: 782px) {
    .admin-bar .header-search {
        top: calc(46px + 20px + 70px);
    }
}

/* Ajuster le scroll-indicator aussi */
.admin-bar .scroll-indicator {
    top: 46px;
}

@media screen and (max-width: 782px) {
    .admin-bar .scroll-indicator {
        top: 46px;
    }
}