/**
 * Header, USP-balk, mobiel menu, footer.
 */

/* ---- USP-balk ---- */
.usp-bar {
	background: var( --brand-secondary );
	color: #fff;
	font-size: 0.8rem;
}
.usp-bar__inner { padding-block: var( --space-2 ); overflow-x: auto; }
.usp-bar__list {
	display: flex;
	gap: var( --space-5 );
	white-space: nowrap;
}

/* ---- Header top row ---- */
.site-header { position: relative; z-index: 30; background: var( --surface ); border-bottom: 1px solid var( --border ); }
.site-header__top-inner {
	display: grid;
	grid-template-columns: auto auto 1fr auto auto;
	align-items: center;
	gap: var( --space-3 );
	padding-block: var( --space-3 );
}

.menu-toggle, .site-search-toggle {
	background: none;
	border: none;
	min-width: var( --tap-target-min );
	min-height: var( --tap-target-min );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --text-primary );
}

.site-logo { grid-column: 2; display: inline-flex; }
.site-logo img { max-height: 42px; width: auto; }
.site-logo__text { font-weight: 800; font-size: 1.15rem; color: var( --text-primary ); }

.site-search--desktop { display: none; }
.site-search-toggle { grid-column: 3; justify-self: end; }

.site-header__actions {
	grid-column: 5;
	display: flex;
	gap: var( --space-3 );
}
.header-action {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: var( --tap-target-min );
	min-height: var( --tap-target-min );
	color: var( --text-primary );
	text-decoration: none;
}
.header-action__label { display: none; font-size: 0.7rem; }
.header-action__count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var( --brand-primary );
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	border-radius: var( --radius-full );
	min-width: 1.1rem;
	height: 1.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.2rem;
}

.site-search--mobile { padding: var( --space-3 ) var( --container-gutter ); display: flex; gap: var( --space-2 ); border-top: 1px solid var( --border ); }
.site-search--mobile[hidden] { display: none; }
.site-search__input { flex-grow: 1; }

/* ---- Hoofdnavigatie: dicht op mobiel, open op desktop (progressive
   enhancement via .is-open, werkt zonder JS als gewone doorscrollbare lijst) ---- */
.site-nav {
	background: var( --surface );
	border-top: 1px solid var( --border );
}
.site-nav__list {
	display: flex;
	flex-direction: column;
}
.site-nav__item { position: relative; border-bottom: 1px solid var( --border ); }
.site-nav__link {
	display: block;
	padding: var( --space-3 ) 0;
	color: var( --text-primary );
	text-decoration: none;
	font-weight: 600;
	min-height: var( --tap-target-min );
}
.site-nav__toggle {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: var( --tap-target-min );
	background: none;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.site-nav__submenu { padding-left: var( --space-4 ); display: none; }
.site-nav__item--has-children.is-open > .site-nav__submenu { display: block; }
.site-nav__item--has-children.is-open > .site-nav__toggle svg { transform: rotate( 180deg ); }

@media ( max-width: 899px ) {
	.site-nav { display: none; }
	.site-nav.is-open { display: block; }
}

@media ( min-width: 900px ) {
	.menu-toggle, .site-search-toggle { display: none; }
	.site-search--desktop { display: flex; grid-column: 3; }
	.site-search--mobile { display: none !important; }
	.header-action__label { display: block; }

	.site-header__top-inner { grid-template-columns: auto 1fr auto; }
	.site-logo { grid-column: 1; }
	.site-header__actions { grid-column: 3; }

	.site-nav { display: block; border-top: none; }
	.site-nav__list { flex-direction: row; gap: var( --space-5 ); }
	.site-nav__item { border-bottom: none; }
	.site-nav__link { padding: var( --space-3 ) 0; }
	.site-nav__toggle { display: none; }
	.site-nav__submenu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var( --surface );
		border: 1px solid var( --border );
		border-radius: var( --radius-sm );
		box-shadow: var( --shadow-md );
		padding: var( --space-2 ) 0;
		z-index: 40;
	}
	.site-nav__item:hover > .site-nav__submenu,
	.site-nav__item:focus-within > .site-nav__submenu {
		display: block;
	}
	.site-nav__submenu .site-nav__link { padding: var( --space-2 ) var( --space-4 ); }
}

.site-search__input {
	border-radius: var( --radius-sm ) 0 0 var( --radius-sm );
}
.site-search {
	display: flex;
	max-width: 480px;
	width: 100%;
}
.site-search__submit {
	background: var( --brand-primary );
	color: #fff;
	border: none;
	border-radius: 0 var( --radius-sm ) var( --radius-sm ) 0;
	padding-inline: var( --space-3 );
	min-width: var( --tap-target-min );
}

/* ---- Footer ---- */
.site-footer { background: var( --surface-alt ); border-top: 1px solid var( --border ); margin-top: var( --space-7 ); }
.footer__columns {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --space-5 );
	padding-block: var( --space-6 );
}
.footer__heading { font-size: 0.95rem; margin-bottom: var( --space-3 ); }
.footer__list li { margin-bottom: var( --space-2 ); }
.footer__list a { color: var( --text-muted ); }
.footer__trust { padding-block: var( --space-4 ); border-top: 1px solid var( --border ); }
.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --space-2 );
	padding-block: var( --space-4 );
	border-top: 1px solid var( --border );
	font-size: 0.85rem;
	color: var( --text-muted );
}
.footer__legal-list { display: flex; gap: var( --space-4 ); }

@media ( min-width: 700px ) {
	.footer__columns { grid-template-columns: repeat( 4, 1fr ); }
}