/* Miroir de header.php.
   Mobile (<880px) : hamburger + logo à gauche, bouton CTA dégradé à droite. Strip de
   liens (1er niveau du menu) toujours visible en scroll horizontal sous la ligne
   principale. Le hamburger ouvre le tiroir plein écran pour la nav complète.
   Desktop (≥880px) : logo, nav inline (1er item en pilule), bouton CTA à droite.
   Le hamburger et le tiroir sont entièrement masqués, la strip aussi. */

.afrotheme-header {
	background: var(--color-bg-card);
	box-shadow: var(--shadow-card);
	position: sticky;
	top: 0;
	z-index: 50;
}

.afrotheme-header__bar {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding: var(--gutter-mobile);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

/* Desktop : grid 3 colonnes (logo | nav | cta) plutôt que flex — la colonne centrale
   "auto" reste visuellement centrée dans la barre tant que les deux colonnes 1fr de
   part et d'autre restent égales, indépendamment de la largeur du logo ou du CTA. */
@media (min-width: 880px) {
	.afrotheme-header__bar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		padding-block: var(--space-sm);
		padding-inline: var(--gutter-desktop);
		gap: var(--space-lg);
	}

	.afrotheme-header__branding {
		justify-self: start;
	}

	.afrotheme-nav {
		justify-self: center;
	}

	.afrotheme-header__cta {
		justify-self: end;
	}
}

/* --- Hamburger (mobile uniquement) --- */
.afrotheme-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
}

.afrotheme-nav-toggle svg {
	width: 22px;
	height: 22px;
}

@media (min-width: 880px) {
	.afrotheme-nav-toggle {
		display: none;
	}
}

/* --- Logo / wordmark --- */
.afrotheme-header__branding {
	flex-shrink: 0;
}

.afrotheme-header__wordmark {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 700;
}

.afrotheme-header__wordmark a {
	text-decoration: none;
	color: var(--color-text);
}

.afrotheme-header__branding .custom-logo {
	border-radius: var(--radius-sm);
	max-height: 40px;
	width: auto;
}

/* --- Nav inline (desktop uniquement) --- */
.afrotheme-nav {
	display: none;
}

@media (min-width: 880px) {
	.afrotheme-nav {
		display: block;
	}
}

.afrotheme-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.afrotheme-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding-block: var(--space-xs);
	font-size: var(--text-base);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-text);
}

.afrotheme-nav__list a:hover {
	color: var(--color-accent-hover);
}

/* Chevron décoratif pour les items avec sous-menu (classe ajoutée par WP core). */
.afrotheme-nav__list .menu-item-has-children > a::after {
	content: "⌄";
	font-size: 0.85em;
	line-height: 1;
}

/* --- Bouton CTA (dégradé, les deux contextes) --- */
.afrotheme-header__cta {
	margin-inline-start: auto;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.6em 1.25em;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
	color: var(--color-bg);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.afrotheme-header__cta svg {
	width: 16px;
	height: 16px;
}

.afrotheme-header__cta:hover {
	color: var(--color-bg);
	opacity: 0.92;
}

/* --- Strip de liens rapides (mobile uniquement) --- */
.afrotheme-header__strip {
	display: block;
	overflow-x: auto;
	border-block-start: var(--border-width) solid var(--color-border);
	scrollbar-width: none;
}

.afrotheme-header__strip::-webkit-scrollbar {
	display: none;
}

@media (min-width: 880px) {
	.afrotheme-header__strip {
		display: none;
	}
}

.afrotheme-header__strip-list {
	list-style: none;
	margin: 0;
	padding: var(--space-xs) var(--gutter-mobile);
	display: inline-flex;
	gap: var(--space-md);
	white-space: nowrap;
}

.afrotheme-header__strip-list a {
	font-size: var(--text-xs);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-text-2);
}

.afrotheme-header__strip-list a:hover {
	color: var(--color-accent-hover);
}

/* --- Tiroir mobile plein écran --- */
.afrotheme-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
}

.afrotheme-mobile-drawer.is-open {
	visibility: visible;
}

@media (min-width: 880px) {
	.afrotheme-mobile-drawer {
		display: none;
	}
}

.afrotheme-mobile-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(29, 35, 39, 0.5);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.afrotheme-mobile-drawer.is-open .afrotheme-mobile-drawer__backdrop {
	opacity: 1;
}

.afrotheme-mobile-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(85vw, 360px);
	background: var(--color-bg);
	box-shadow: var(--shadow-card-hover);
	padding: var(--space-md);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.afrotheme-mobile-drawer.is-open .afrotheme-mobile-drawer__panel {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.afrotheme-mobile-drawer__backdrop,
	.afrotheme-mobile-drawer__panel {
		transition: none;
	}
}

.afrotheme-mobile-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.afrotheme-mobile-drawer__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
}

.afrotheme-mobile-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
}

.afrotheme-mobile-drawer__close svg {
	width: 18px;
	height: 18px;
}

.afrotheme-mobile-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.afrotheme-mobile-drawer__list a {
	display: block;
	padding-block: var(--space-sm);
	border-block-end: var(--border-width) solid var(--color-border);
	font-size: var(--text-base);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-text);
}

.afrotheme-mobile-drawer__list a:hover {
	color: var(--color-accent-hover);
}