/*
 * Header — layouts, styles, sticky, boutons, mobile.
 * Consomme les design tokens (couleurs, espacements, rayons) via var().
 */

.myfw-site-header {
	background-color: var(--color-background, #ffffff);
	position: relative;
	z-index: 30;
}

.myfw-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md, 1rem);
}

/* ---- Layouts (section 4 du brief) ---- */

.myfw-header--logo-menu-buttons .myfw-site-header__inner {
	justify-content: space-between;
}

.myfw-header--logo-menu-centered-buttons .myfw-site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
}
.myfw-header--logo-menu-centered-buttons .myfw-site-header__nav {
	justify-self: center;
}

.myfw-header--logo-menu .myfw-site-header__inner {
	justify-content: space-between;
}

.myfw-header--logo-buttons .myfw-site-header__inner {
	justify-content: space-between;
}

.myfw-header--menu-logo-buttons .myfw-site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.myfw-header--menu-logo-buttons .myfw-site-header__logo {
	justify-self: center;
}
.myfw-header--menu-logo-buttons .myfw-header-buttons {
	justify-self: end;
}

/* ---- Position du logo (quand le layout le permet) ---- */

.myfw-site-header__logo--center {
	margin-inline: auto;
}
.myfw-site-header__logo--right {
	order: 3;
}

/* ---- Styles d'affichage ---- */

.myfw-header--transparent {
	background-color: transparent;
}

.myfw-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent);
}
.myfw-header--overlay .myfw-nav-menu a,
.myfw-header--overlay .myfw-site-header__logo-text {
	color: #ffffff;
}

/* ---- Sticky ---- */

.myfw-header--sticky {
	position: sticky;
	top: 0;
}

.myfw-header--sticky-style-change.is-scrolled {
	background-color: var(--color-background, #ffffff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---- Boutons ---- */

.myfw-header-buttons {
	display: flex;
	gap: var(--spacing-sm, 0.5rem);
}

.myfw-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
	border-radius: var(--radius-small, 4px);
	font-family: var(--font-body, inherit);
	white-space: nowrap;
	border: 1px solid transparent;
}

.myfw-btn--sm {
	padding: 0.35em 0.8em;
	font-size: 0.85rem;
}
.myfw-btn--md {
	padding: 0.55em 1.2em;
	font-size: 1rem;
}
.myfw-btn--lg {
	padding: 0.75em 1.6em;
	font-size: 1.125rem;
}

.myfw-btn--primary {
	background-color: var(--color-primary, #111827);
	color: #ffffff;
}
.myfw-btn--secondary {
	background-color: var(--color-secondary, #6b7280);
	color: #ffffff;
}
.myfw-btn--outline {
	background-color: transparent;
	border-color: currentColor;
	color: var(--color-primary, #111827);
}

/* ---- Sous-menus (WordPress .sub-menu) ---- */

.myfw-nav-menu li {
	position: relative;
}
.myfw-nav-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	margin: 0;
	padding: var(--spacing-sm, 0.5rem) 0;
	list-style: none;
	background-color: var(--color-background, #ffffff);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-radius: var(--radius-small, 4px);
}
.myfw-nav-menu li:hover > .sub-menu,
.myfw-nav-menu li:focus-within > .sub-menu {
	display: block;
}
.myfw-nav-menu .sub-menu a {
	display: block;
	padding: 0.5em 1em;
}

/* ---- Menu mobile ---- */

.myfw-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
}
.myfw-header__toggle-bar,
.myfw-header__toggle-bar::before,
.myfw-header__toggle-bar::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: var(--color-text, #1a1a1a);
	transition: transform 0.2s ease;
}
.myfw-header__toggle-bar {
	position: relative;
}
.myfw-header__toggle-bar::before,
.myfw-header__toggle-bar::after {
	content: "";
	position: absolute;
	left: 0;
}
.myfw-header__toggle-bar::before {
	top: -6px;
}
.myfw-header__toggle-bar::after {
	top: 6px;
}

.myfw-mobile-panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s ease;
	background-color: var(--color-background, #ffffff);
}
.myfw-mobile-panel.is-open {
	max-height: 100vh;
}
.myfw-mobile-panel__inner {
	padding: var(--spacing-md, 1rem);
}
.myfw-mobile-panel .myfw-nav-menu {
	flex-direction: column;
	gap: var(--spacing-sm, 0.5rem);
}
.myfw-mobile-panel .myfw-nav-menu .sub-menu {
	position: static;
	box-shadow: none;
	padding-left: var(--spacing-md, 1rem);
}
.myfw-mobile-panel .myfw-header-buttons {
	margin-top: var(--spacing-md, 1rem);
	flex-direction: column;
}