/**
 * Header: partner logo block and main menu spacing.
 *
 * Scoped under #top (Enfold's body id) so these rules outrank the theme's own without
 * resorting to !important, which would make them impossible to override later.
 */

:root {
}

/* -------------------------------------------------------------------------
 * Partner logo block
 *
 * Absolutely positioned rather than added to Enfold's table/flex row on purpose: the main
 * logo stays exactly where the theme centred it, and the partner block sits to its right
 * without shifting it. Rebuilding the header row as a flex container would move the logo
 * off-centre and fight every Enfold header-layout option.
 * ---------------------------------------------------------------------- */

#top .av-logo-container .inner-container,
#top #header_main .container {
	position: relative;
}

.narthex-header-partner {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-width: 42%;
	z-index: 2;
}

.narthex-header-partner__lead {
	color: var(--narthex-primary, var(--narthex-primary, #8a034f));
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: right;
	/* Keeps "UN PROGRAMME DE WEBCASTS" stacked instead of running wide. */
	max-width: 8.5em;
}

.narthex-header-partner__logo {
	display: block;
	height: auto;
	width: auto;
	max-height: 46px;
	max-width: 100%;
}

/* Tablet: shrink before anything is allowed to overlap the main logo. */
@media only screen and (max-width: 1100px) {
	.narthex-header-partner {
		max-width: 38%;
		gap: 0.4rem;
	}

	.narthex-header-partner__lead {
		font-size: 0.62rem;
	}

	.narthex-header-partner__logo {
		max-height: 36px;
	}
}

/*
 * Enfold switches to its mobile header at 989px. Below that the absolute position would
 * collide with the burger, so the block returns to normal flow, centred under the logo.
 */
@media only screen and (max-width: 989px) {
	#top .av-logo-container .inner-container,
	#top #header_main .container {
		position: static;
	}

	.narthex-header-partner {
		position: static;
		transform: none;
		max-width: 100%;
		justify-content: center;
		padding: 0.5rem 0 0.75rem;
		clear: both;
	}

	.narthex-header-partner__lead {
		font-size: 0.6rem;
		max-width: 10em;
	}

	.narthex-header-partner__logo {
		max-height: 32px;
	}
}

/* -------------------------------------------------------------------------
 * Main menu spacing
 *
 * The mockup spreads the items across the full bar rather than bunching them on the left.
 * Flex with space-around does that at any item count, which matters here because the menu
 * gains a fourth entry on event day and drops to a single entry for signed-in visitors
 * outside it. A fixed padding or margin would only look right at one of those counts.
 * ---------------------------------------------------------------------- */

#top #header .av-main-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: stretch;
	width: 100%;
}

#top #header .av-main-nav > li {
	float: none;
	flex: 0 1 auto;
}

#top #header .av-main-nav > li > a {
	padding-left: 1.2em;
	padding-right: 1.2em;
}

/*
 * Sub-menus must not join the flex row: they are absolutely positioned dropdowns and would
 * otherwise be laid out as siblings of the top-level items.
 */
#top #header .av-main-nav ul {
	display: block;
}

/* A single surviving item reads better centred than stretched across the bar. */
#top #header .av-main-nav > li:only-child {
	margin: 0 auto;
}

@media only screen and (max-width: 989px) {
	#top #header .av-main-nav {
		display: block;
		width: auto;
	}

	#top #header .av-main-nav > li {
		float: none;
	}

	#top #header .av-main-nav > li > a {
		padding-left: 0;
		padding-right: 0;
	}
}