/**
 * Header Components
 * Header, navigation, search, mobile menu
 * OPTIMISÉ : Mutualise les patterns répétés des boutons icon
 *
 * @package TacticHall
 */

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	background: var(--color-white);
	border-bottom: var(--border-primary);
	position: sticky;
	top: 0;
	z-index: 100;
	padding: var(--spacing-sm) 0;
}

.site-header__container {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

/* ==========================================================================
   Logo - Pattern mutualisé
   ========================================================================== */

.site-logo {
	flex-shrink: 0;
	min-width: auto;
}

.site-logo-link {
	display: block;
	text-decoration: none;
}

.site-logo-svg {
	height: 32px;
	width: auto;
	display: block;
}

/* Logo custom WordPress (si défini) */
.site-logo img,
.custom-logo {
	height: 32px;
	/* Même taille que le logo SVG */
	width: auto;
	display: block;
}

/* Lien du logo WordPress */
.custom-logo-link {
	display: block;
	text-decoration: none;
}

/* ==========================================================================
   Navigation principale
   ========================================================================== */

.main-navigation {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	/* Pas de gap dans la nav, on contrôle l'espacement individuellement */
}

.main-navigation .menu,
.main-navigation ul {
	display: flex;
	gap: var(--spacing-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	margin: 0;
}

.main-navigation a {
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-black);
	letter-spacing: 0.2px;
	font-weight: 400;
	padding: 8px 4px;
	display: block;
	transition: color 0.2s ease;
}

.main-navigation a:hover {
	color: var(--color-gray-dark);
}

/* ==========================================================================
   Bouton "LE STAND" - Intégré au menu de navigation
   ========================================================================== */

.header-site-button {
	flex-shrink: 0;
	margin-left: var(--spacing-md);
	/* Même espacement que les liens du menu */
}

.header-site-button a {
	background: var(--color-black);
	color: var(--color-white);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	border: var(--border-primary);
	display: inline-block;
	transition: all var(--transition-base);
}

.header-site-button a:hover {
	background: var(--color-gray-darker);
	border-color: var(--color-gray-darker);
}

/* ==========================================================================
   Actions Header - Pattern mutualisé pour tous les boutons icon
   ========================================================================== */

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-shrink: 0;
}

/* Pattern commun pour TOUS les boutons icon du header */
.header-search-toggle,
.header-icon-btn,
.header-actions>a,
.mobile-menu-toggle,
.header-mobile-close {
	background: transparent;
	border: none;
	padding: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	color: var(--color-black);
	transition: opacity 0.2s ease;
}

/* Hover commun pour tous les boutons icon (sauf mobile-menu-toggle caché par défaut) */
.header-search-toggle:hover,
.header-icon-btn:hover,
.header-actions>a:hover {
	opacity: 0.7;
}

/* Styles spécifiques pour les liens (vs boutons) */
.header-icon-btn,
.header-actions>a {
	text-decoration: none;
	position: relative;
}

/* SVG size mutualisé pour tous les icons standard */
.header-search-toggle svg,
.header-icon-btn svg,
.header-actions>a svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Recherche Header
   ========================================================================== */

.header-search {
	position: relative;
}

.header-search-form {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	background: var(--color-white);
	border: var(--border-primary);
	padding: 12px;
	min-width: 300px;
	z-index: 1000;
}

.header-search-form.active {
	display: block !important;
}

.header-search-form form {
	display: flex;
	gap: 8px;
}

.header-search-form input[type="search"] {
	flex: 1;
	padding: 8px 12px;
	border: 2px solid var(--color-border);
	font-size: 14px;
}

.header-search-form button {
	background: var(--color-black);
	border: none;
	padding: 8px 12px;
	color: var(--color-white);
	cursor: pointer;
	display: flex;
	align-items: center;
}

.header-search-form button svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Badge Panier (compteur)
   ========================================================================== */

.badge {
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--color-black);
	color: var(--color-white);
	font-size: 10px;
	font-weight: 600;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
}

/* ==========================================================================
   Menu Mobile
   ========================================================================== */

/* Toggle hamburger caché par défaut, affiché sur mobile */
.mobile-menu-toggle {
	display: none;
}

.mobile-menu-toggle svg {
	width: 24px;
	height: 24px;
}

/* Overlay fullscreen */
.header-mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: var(--color-white);
	z-index: 1000;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
}

.header-mobile-menu.active {
	transform: translateX(0);
}

/* Header mobile avec logo et bouton close */
.header-mobile-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-sm) var(--spacing-md);
	/* 16px 24px - Cohérent avec header principal */
	border-bottom: var(--border-primary);
}

.header-mobile-logo {
	flex-shrink: 0;
}

.header-mobile-logo a {
	display: block;
	text-decoration: none;
}

.header-mobile-logo-svg {
	height: 32px;
	/* Même taille que le logo du header principal */
	width: auto;
	display: block;
}

/* Logo custom WordPress dans menu mobile */
.header-mobile-logo img {
	max-height: 32px;
	width: auto;
	display: block;
}

.header-mobile-close {
	background: transparent;
	border: none;
	padding: var(--spacing-xs);
	/* 8px - Cohérent avec les boutons header */
	cursor: pointer;
	display: flex;
	align-items: center;
	color: var(--color-black);
	transition: opacity 0.2s ease;
}

.header-mobile-close:hover {
	opacity: 0.7;
}

.header-mobile-close svg {
	width: 24px;
	height: 24px;
}

/* Navigation mobile */
.header-mobile-nav {
	padding: var(--spacing-md) var(--spacing-md);
	/* 24px - Espacement vertical réduit pour cohérence */
}

.header-mobile-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-mobile-menu-list li {
	margin: 0;
	border-bottom: var(--border-primary);
	/* Utilise la variable border cohérente */
}

.header-mobile-menu-list a {
	display: block;
	padding: var(--spacing-sm) 0;
	/* 16px - Cohérent avec les espacements du header */
	font-size: 16px;
	/* Taille réduite pour cohérence (vs 18px) */
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-black);
	letter-spacing: 0.05em;
	transition: color 0.2s ease;
}

.header-mobile-menu-list a:hover {
	color: var(--color-gray-dark);
}

/* ==========================================================================
   Responsive Header
   ========================================================================== */

@media (max-width: 768px) {

	/* Masquer navigation desktop sur mobile */
	.main-navigation {
		display: none;
	}

	/* Afficher bouton hamburger mobile */
	.mobile-menu-toggle {
		display: flex;
	}

	/* Masquer bouton "LE SITE" sur mobile */
	.header-site-button {
		display: none;
	}

	/* Ajuster espacement header mobile */
	.site-header {
		padding: 16px 0;
	}

	/* Layout mobile : logo à gauche, actions à droite */
	.site-header__container {
		justify-content: space-between;
	}

	/* Logo mobile */
	.site-logo {
		order: 1;
	}

	/* Actions droite (recherche, compte, panier, hamburger) */
	.header-actions {
		order: 2;
		margin-left: auto;
	}

	/* Hamburger en dernier */
	.mobile-menu-toggle {
		order: 3;
	}
}