/**
 * Theme styles that theme.json cannot express.
 *
 * @package Bogaerts
 */

/* The design is made at 1920px, wider screens get a white margin. */
.wp-site-blocks {
	max-width: 1920px;
	margin-inline: auto;
}

/* Header: navigation on both sides of a centered logo, hairline below. */
.bogaerts-header {
	gap: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--50) 9px;
	border-bottom: 0.5px solid var(--wp--preset--color--contrast);
}

/* Equal flex basis keeps the logo centered, whatever the menus contain. */
.bogaerts-header > .wp-block-navigation {
	flex: 1 1 0;
}

.bogaerts-header .current-menu-item > a,
.bogaerts-header [aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 5px;
}

@media (max-width: 781px) {

	.bogaerts-header {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--30);
	}

	.bogaerts-header > .wp-block-site-logo {
		display: flex;
		flex-basis: 100%;
		justify-content: center;
		order: -1;
	}

	.bogaerts-header > .wp-block-navigation {
		flex-basis: 100%;
	}

	.bogaerts-header .wp-block-navigation__container {
		column-gap: 20px;
		justify-content: center;
	}
}

/* The statement typeface is only used in bold, as in the design. */
.has-statement-font-family {
	font-weight: 700;
}

/* Home hero: statement lines as in the design, one blank line between. */
.bogaerts-hero .has-statement-font-family {
	line-height: 1.2;
}

.bogaerts-hero .has-statement-font-family + .has-statement-font-family {
	margin-block-start: 1.2em;
}

/* Section title block style: a centered title between two hairlines. */
.is-style-section-title {
	text-align: center;
}

/* Footer. */
.bogaerts-footer {
	padding-block: var(--wp--preset--spacing--40);
	border-top: 0.5px solid var(--wp--preset--color--contrast);
}