/* 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. */
@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-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;
		}
	}
}