/**
 * ADVA11 — adva11-header.css
 *
 * Styles du header du thème enfant ADVA11.
 *
 * Objectif :
 * - reproduire strictement le rendu de la maquette Anima ;
 * - conserver la structure WordPress/ClicAccess ;
 * - utiliser des unités relatives compatibles RGAA/WCAG.
 */


/* =========================================================
   1. Header principal
   ========================================================= */

.site-header {
	position: relative;

	width: 100%;
	min-height: 6.375rem; /* 102px */

	background-color: var(--adva11-color-neutral-0);
	color: var(--adva11-color-neutral-900);

	z-index: 100;
}


/* =========================================================
   2. Conteneur interne
   ========================================================= */

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	min-height: 6.375rem; /* 102px */

	/* Intention validée avec Fanny : 12px 100px */
	padding-block: 0.75rem;
	padding-inline: 6.25rem;

	box-sizing: border-box;

	background-color: var(--adva11-color-neutral-0);

	border-bottom: 1px solid transparent;
}


/* =========================================================
   3. Branding
   ========================================================= */

.site-branding {
	display: flex;
	align-items: center;

	flex: 0 0 auto;
	min-width: 0;
}


/* Lien du logo */

.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;

	text-decoration: none;
}


/* =========================================================
   4. Logo
   ========================================================= */

.site-branding .custom-logo {
	display: block;

	/* Anima desktop : 276px × 75px */
	width: 17.25rem;
	max-width: 100%;

	height: auto;
	max-height: 4.6875rem;
}


/* =========================================================
   5. Navigation
   ========================================================= */

.site-header__inner > .primary-navigation {
	margin-left: auto;
	min-width: 0;
}


/* =========================================================
   6. Titre du site
   ========================================================= */

.site-title {
	font-family: var(--adva11-font-heading);
	font-size: var(--adva11-font-size-l);
	font-weight: var(--adva11-font-weight-bold);

	color: var(--adva11-color-neutral-900);

	text-decoration: none;
}


/* =========================================================
   7. Description du site
   ========================================================= */

.site-description {
	position: absolute;

	width: 1px;
	height: 1px;

	margin: -1px;
	padding: 0;

	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;

	border: 0;
}


/* =========================================================
   8. Responsive tablette
   ========================================================= */

/*
 * Tablette : de 481px à 1024px.
 * Base 16px :
 * - 481px = 30.0625rem
 * - 1024px = 64rem
 */
@media (min-width: 30.0625rem) and (max-width: 64rem) {

	.site-header__inner {
		padding-inline: 1.875rem; /* 30px */
	}

}


/* =========================================================
   9. Responsive mobile
   ========================================================= */

/*
 * Mobile : jusqu’à 480px.
 * Base 16px :
 * - 480px = 30rem
 */
@media (max-width: 30rem) {

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		flex-wrap: nowrap;

		padding-inline: 1.25rem; /* 20px */
	}

	/*
	 * En mobile :
	 * - le logo WordPress desktop est totalement supprimé ;
	 * - toute sa place est libérée ;
	 * - le logo mobile ADVA est géré
	 *   via la navigation.
	 */
	.site-branding {
		display: none !important;

		width: 0;
		min-width: 0;

		flex: 0 0 0;

		margin: 0;
		padding: 0;

		overflow: hidden;
	}

	.site-header__inner > .primary-navigation {
		margin-left: 0;
	}

}