/* components/site-header: a band with an image or colour; the site name in the middle, the tools (share
   menu, language picker) in the top right corner, the main menu at the bottom, the legacy language
   switcher at the top end. */
@layer components {
	.dv-site-header {
		position: relative;
		display: flex;
		flex-direction: column;
		aspect-ratio: var(--header-ratio);
		background: var(--header-background) var(--header-image) var(--header-position) / cover no-repeat;
	}

	.dv-site-header-name {
		order: 1;
		margin: var(--site-name-margin);
		font-size: var(--site-name-size);
		font-weight: bold;
		font-style: italic;
		text-align: center;
		color: var(--site-name-color);
		text-shadow: var(--site-name-shadow);
	}

	.dv-site-header-top {
		order: 0;
		display: flex;
		justify-content: flex-end;
	}

	/* The switcher at the top keeps clear of the tools in the corner. */
	.dv-site-header:has(.dv-site-header-tools) .dv-site-header-top {
		padding-inline-end: 5em;
	}

	.dv-site-header-tools {
		position: absolute;
		inset-block-start: var(--space-2);
		inset-inline-end: var(--space-2);
		z-index: 20;
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
	}

	.dv-site-header-navigation {
		order: 2;
		margin-block: auto var(--space-2);
	}

	/* A narrow screen has no corner beside the site name: the tools go above it, at the end. */
	@media (width < 768px) {
		.dv-site-header-tools {
			position: relative;
			inset: auto;
			order: 0;
			align-self: end;
			margin: var(--space-2) var(--space-2) 0;
		}
	}
}