/* ==========================================================================
   Wolters Kassenbouw — site chrome: header, navigation, footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header. Sticky 76px (64px on phones), with the tri-colour rule beneath it.
   Nothing else on the page is fixed.
   -------------------------------------------------------------------------- */
/* Visible only once tabbed to, so keyboard users can jump the nav. */
.skip_link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: calc(var(--z-header) + 1);
	padding: var(--space-5) var(--space-7);
	background: var(--color-brand);
	color: var(--text-inverse);
	font: var(--type-label);
	border-radius: 0 0 var(--radius-control) 0;
}
.skip_link:focus {
	left: 0;
	color: var(--text-inverse);
}

.site_header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--surface-page);
	box-shadow: var(--shadow-sm);
}
.site_header_bar {
	display: flex;
	align-items: center;
	gap: var(--space-9);
	height: var(--header-height);
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.site_logo { display: flex; align-items: center; flex: 0 0 auto; }
.site_logo img { height: 52px; width: auto; object-fit: contain; }

/* The <nav> is the flex item of the header bar, so it carries the stretch —
   without it the underline indicator lands mid-text instead of below it. */
.site_header_nav { display: flex; margin-left: auto; align-self: stretch; }
.site_nav { display: flex; gap: var(--space-8); align-self: stretch; }
.site_nav > li { position: relative; display: flex; }
.site_nav > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	align-self: stretch;
	font: var(--type-label);
	font-size: var(--text-base);
	color: var(--text-body);
	white-space: nowrap;
}
.site_nav > li > a:hover { color: var(--text-strong); }
.site_nav > li > a.active_menu { color: var(--text-strong); }
/* Inset 12px from the header's bottom edge, so the indicator never abuts the
   tri-colour rule — sitting on its green segment reads as one broken line. */
.site_nav > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	height: 3px;
	border-radius: 1px;
	background: transparent;
	transition: background-color var(--duration-fast) var(--ease-standard);
}
.site_nav > li > a.active_menu::after { background: var(--color-brand); }

.site_nav .drop_arrow { display: flex; color: var(--text-faint); }

.site_subnav {
	position: absolute;
	top: 100%;
	left: calc(var(--space-6) * -1);
	min-width: 220px;
	padding: var(--space-4) 0;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), visibility var(--duration-fast);
}
.site_nav > li:hover > .site_subnav,
.site_nav > li:focus-within > .site_subnav {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.site_subnav a {
	display: block;
	padding: var(--space-4) var(--space-6);
	font: var(--type-small);
	color: var(--text-body);
	border-left: 3px solid transparent;
}
.site_subnav a:hover { background: var(--surface-inset); color: var(--text-strong); }
.site_subnav a.active_menu { border-left-color: var(--color-brand); color: var(--text-strong); background: var(--color-brand-soft); }

.site_header_actions { display: flex; align-items: center; gap: var(--space-4); margin-left: 0; }
.site_menu_toggle { display: none; }

/* --------------------------------------------------------------------------
   Mobile drawer. Active state is a 4px LEFT rule plus a soft green fill,
   because the underline indicator has no room here.
   -------------------------------------------------------------------------- */
.site_drawer {
	display: none;
	background: var(--surface-page);
	border-bottom: 1px solid var(--border-default);
	box-shadow: var(--shadow-md);
	animation: var(--anim-fade);
}
.site_drawer.is_open { display: block; }
.site_drawer a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	min-height: 56px;
	padding: 0 var(--gutter);
	font: var(--type-label);
	font-size: var(--text-md);
	color: var(--text-body);
	border-bottom: 1px solid var(--border-subtle);
	border-left: 4px solid transparent;
}
.site_drawer a.active_menu {
	border-left-color: var(--color-brand);
	background: var(--color-brand-soft);
	color: var(--text-strong);
}
.site_drawer .site_drawer_sub a {
	min-height: 48px;
	padding-left: calc(var(--gutter) + var(--space-7));
	font: var(--type-small);
	color: var(--text-muted);
}
.site_drawer_actions { padding: var(--space-6) var(--gutter); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site_footer { background: var(--surface-dark); color: var(--text-inverse-muted); }
.site_footer_grid {
	display: grid;
	grid-template-columns: repeat(var(--footer-cols, 5), 1fr);
	gap: var(--space-9);
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-12) var(--gutter) var(--space-9);
}
.site_footer_col { display: flex; flex-direction: column; gap: var(--space-5); }
.site_footer_col h4 {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-inverse);
}
.site_footer_col a, .site_footer_col span { font: var(--type-small); color: var(--text-inverse-muted); }
.site_footer_col a:hover { color: var(--text-inverse); }
.site_footer_col .mono { font: var(--type-mono); color: var(--text-inverse); }

.site_footer_base {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-7);
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-8) var(--gutter) var(--space-11);
	border-top: 1px solid var(--border-inverse);
}
.site_footer_base img { height: 40px; width: auto; }
.site_footer_base span, .site_footer_base a { font: var(--type-small); color: var(--text-inverse-muted); }
.site_footer_base a { border-bottom: 1px solid var(--border-inverse); }
.site_footer_base a:hover { color: var(--text-inverse); border-bottom-color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   Cookie notice and flash messages
   -------------------------------------------------------------------------- */
#cookie_disclaimer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var(--z-overlay);
	background: var(--surface-dark);
	color: var(--text-inverse-muted);
	box-shadow: var(--shadow-lg);
}
#cookie_disclaimer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-6);
	padding-top: var(--space-7);
	padding-bottom: var(--space-7);
}
#cookie_disclaimer .cookie_content { font: var(--type-small); }
#cookie_disclaimer .cookie_url { color: var(--text-inverse); border-bottom: 1px solid var(--border-inverse); }
#cookie_disclaimer .cookie_url:hover { border-bottom-color: var(--text-inverse); }

.bottom_message {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-tooltip);
	padding: var(--space-6) var(--gutter);
	text-align: center;
	font: var(--type-label);
	font-size: var(--text-base);
	color: var(--text-inverse);
	background: var(--wk-neutral-800);
}
.bottom_message_error { background: var(--color-signal); }
.bottom_message_success { background: var(--color-brand); }

/* --------------------------------------------------------------------------
   Responsive. Two breakpoints only: 640px phone, 900px tablet.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
	.site_header_bar { gap: var(--space-6); }
	.site_nav { display: none; }
	.site_header_actions { margin-left: auto; }
	.site_menu_toggle { display: inline-flex; }

	.site_footer_grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 640px) {
	.site_logo img { height: 38px; }
	.site_header_contact { display: none; }
	.site_footer_grid { grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-11); }
	#cookie_disclaimer .container { flex-direction: column; align-items: stretch; text-align: center; }
}