/* ==========================================================================
   Clazing & Mol — layout: container, sections, header, drawer, footer

   Sticky 84px header with a hairline bottom border, logo left, uppercase nav
   right, phone number always visible next to a green Offerte button — for a
   trade business the phone number is the primary CTA. Nothing else is fixed
   or floating: no sticky sidebars, no chat bubble.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container and sections
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter-inline);
}
.container_narrow { max-width: var(--container-narrow); }

@media (min-width: 1024px) {
	.container { padding: 0 var(--gutter-inline-lg); }
}

.section { padding: var(--section-y) 0; }
.section_tight { padding: var(--section-y-tight) 0; }
.section_flush_top { padding-top: 0; }

/* Alternating sections separate on tone, never on a gradient — there are no
   gradients anywhere in this system. */
.section_sunken { background: var(--surface-sunken); }
.section_dark {
	background: var(--surface-dark);
	color: var(--text-inverse);
}
.section_dark h1, .section_dark h2, .section_dark h3 { color: var(--text-inverse); }

/* At most one green-filled area per view, usually the closing CTA. */
.section_accent {
	background: var(--surface-accent);
	color: var(--text-inverse);
}
.section_accent h1, .section_accent h2, .section_accent h3 { color: var(--text-inverse); }

.section_head {
	max-width: var(--measure-body);
	margin-bottom: var(--space-6);
}
.section_title {
	font: var(--text-display-m);
	letter-spacing: var(--tracking-display);
	margin-top: var(--space-3);
}
.section_lead {
	font: var(--text-body-l);
	color: var(--text-muted);
	margin: var(--space-4) 0 0;
}
.section_dark .section_lead { color: var(--cm-neutral-300); }

.section_head_row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	max-width: none;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */
.site_header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--surface-page);
	border-bottom: 1px solid var(--border-subtle);
	box-shadow: var(--shadow-none);
	transition:
		box-shadow var(--dur-base) var(--ease-standard),
		margin-bottom var(--dur-base) var(--ease-standard);
}
/* The margin gives back exactly the height the bar gives up, on the same
   timing, so the header's footprint never changes and nothing below it moves.
   Without it the page shifts 20px, scroll anchoring pulls scrollY back under
   the threshold and the header flickers near the top. */
.site_header.is_condensed {
	box-shadow: var(--shadow-sm);
	margin-bottom: calc(var(--header-h) - var(--header-h-condensed));
}

.site_header_bar {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	height: var(--header-h);
	transition: height var(--dur-base) var(--ease-standard);
}
.site_header.is_condensed .site_header_bar { height: var(--header-h-condensed); }

.site_logo {
	display: flex;
	flex: 0 0 auto;
	margin-right: auto;
	border: none;
}
.site_logo:hover { border: none; }
.site_logo img {
	display: block;
	width: auto;
	height: var(--header-logo-h);
	transition: height var(--dur-base) var(--ease-standard);
}
.site_header.is_condensed .site_logo img { height: var(--header-logo-h-condensed); }

.site_nav {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site_nav > li { position: relative; }

.site_nav > li > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	position: relative;
	padding-bottom: 4px;
	border: none;
	color: var(--text-muted);
	font: var(--weight-bold) var(--size-body-s)/1 var(--font-display);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
	transition: var(--transition-control);
}
.site_nav > li > a:hover { color: var(--text-heading); border: none; }
.site_nav > li > a.active_menu { color: var(--text-heading); }

/* Nav underlines wipe in from the left rather than fading. */
.site_nav > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease-standard);
}
.site_nav > li > a:hover::after,
.site_nav > li > a.active_menu::after { transform: scaleX(1); }

.drop_arrow { display: inline-flex; line-height: 0; }

/* Desktop dropdown for subpages */
.site_subnav {
	position: absolute;
	top: 100%;
	left: calc(var(--space-3) * -1);
	z-index: 10;
	min-width: 210px;
	margin: 0;
	padding: var(--space-2) 0;
	list-style: none;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-top: var(--rule-accent) solid var(--accent);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition:
		opacity var(--dur-fast) var(--ease-standard),
		transform var(--dur-fast) var(--ease-standard),
		visibility var(--dur-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-2) var(--space-4);
	border: none;
	color: var(--text-muted);
	font: var(--text-body-s);
	transition: var(--transition-control);
}
.site_subnav a:hover,
.site_subnav a.active_menu {
	background: var(--accent-wash);
	color: var(--text-body);
	border: none;
}

.site_header_actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.site_header_phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	color: var(--text-body);
	font: var(--weight-bold) var(--size-body-s)/1 var(--font-display);
	letter-spacing: var(--tracking-heading);
	white-space: nowrap;
}
.site_header_phone:hover { color: var(--text-accent); border: none; }
.site_header_phone .icon { color: var(--accent); }

.site_menu_toggle { display: none; }

/*
	The bar is as wide as Velifact makes it: every main-menu page and the
	company phone number end up in it, so no fixed breakpoint knows when it
	stops fitting. clazingmol.js measures instead: is_tight closes up the gaps
	and shows the phone number as its icon, is_compact then moves the menu
	into the drawer. The 900px rule under Responsive stays as the fallback
	without JS.
*/
.site_nav > li > a { white-space: nowrap; }
.site_header.is_tight .site_header_bar { gap: var(--space-5, 24px); }
.site_header.is_tight .site_nav { gap: var(--space-4); }
.site_header.is_tight .site_header_phone span { display: none; }
.site_header.is_tight .site_header_phone {
	width: var(--control-h-s);
	height: var(--control-h-s);
	justify-content: center;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-xs);
}
.site_header.is_compact .site_header_nav { display: none; }
.site_header.is_compact .site_menu_toggle { display: inline-flex; }
.site_header.is_compact .site_header_bar { padding-right: 0; }

/* --------------------------------------------------------------------------
   Mobile drawer. Not in the design system — the kit is desktop only — so it
   is built from the same parts: hairline borders, uppercase labels, no radius.
   -------------------------------------------------------------------------- */
.site_drawer {
	display: none;
	border-top: 1px solid var(--border-subtle);
	background: var(--surface-page);
	max-height: calc(100vh - var(--header-h-condensed));
	overflow-y: auto;
}
.site_drawer.is_open { display: block; }

.site_drawer > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) var(--gutter-inline);
	border: none;
	border-bottom: 1px solid var(--border-subtle);
	color: var(--text-body);
	font: var(--weight-bold) var(--size-body-s)/1 var(--font-display);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
}
.site_drawer > a:hover,
.site_drawer > a.active_menu {
	background: var(--accent-wash);
	color: var(--text-heading);
	border-bottom-color: var(--border-subtle);
}
.site_drawer > a .icon { color: var(--accent); }

.site_drawer_sub { background: var(--surface-sunken); }
.site_drawer_sub a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--gutter-inline) var(--space-3) var(--space-8);
	border: none;
	border-bottom: 1px solid var(--border-subtle);
	color: var(--text-muted);
	font: var(--text-body-s);
}
.site_drawer_sub a:hover,
.site_drawer_sub a.active_menu { color: var(--text-body); border-bottom-color: var(--border-subtle); }

.site_drawer_actions {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-5) var(--gutter-inline);
}

/* --------------------------------------------------------------------------
   Footer — charcoal, three columns, a real address block
   -------------------------------------------------------------------------- */
.site_footer {
	background: var(--surface-dark);
	color: var(--cm-neutral-300);
	padding: var(--space-8) 0 var(--space-5);
	font: var(--text-body-s);
}
.site_footer h4 {
	color: var(--text-inverse);
	font: var(--weight-bold) var(--size-overline)/1.2 var(--font-display);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
}
.site_footer a {
	color: var(--cm-neutral-300);
	border-bottom-color: transparent;
}
.site_footer a:hover {
	color: var(--text-inverse);
	border-bottom-color: var(--accent);
}

.site_footer_grid {
	display: grid;
	gap: var(--space-7);
	padding-bottom: var(--space-7);
	border-bottom: 1px solid var(--border-on-dark);
}

.site_footer_brand img {
	display: block;
	width: auto;
	height: 72px;
}
.site_footer_brand p {
	margin: var(--space-4) 0 0;
	max-width: 34ch;
}

.site_footer_col {
	display: grid;
	align-content: start;
	gap: 6px;
}
.site_footer_col h4 { margin-bottom: var(--space-3); }

.site_footer_base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-5);
	font: var(--text-caption);
	color: var(--cm-neutral-500);
}
.site_footer_base a { color: var(--cm-neutral-500); }

/* --------------------------------------------------------------------------
   Cookie bar
   -------------------------------------------------------------------------- */
#cookie_disclaimer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--cm-ink-900);
	color: var(--cm-neutral-300);
	border-top: var(--rule-accent) solid var(--accent);
	box-shadow: var(--shadow-lg);
}
#cookie_disclaimer .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}
#cookie_disclaimer .cookie_content { font: var(--text-body-s); }
#cookie_disclaimer .cookie_url { color: var(--cm-green-300); }
#cookie_stop { cursor: pointer; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	.site_footer_grid {
		grid-template-columns: 1.4fr repeat(var(--footer-extra, 3), minmax(0, 1fr));
	}
}
@media (min-width: 620px) and (max-width: 999px) {
	.site_footer_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site_footer_brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.site_header_nav { display: none; }
	.site_menu_toggle { display: inline-flex; }
	.site_header_bar { padding-right: 0; }
}

@media (max-width: 560px) {
	.site_header_phone span { display: none; }
	.site_header_phone {
		width: var(--control-h-s);
		height: var(--control-h-s);
		justify-content: center;
		border: 1px solid var(--border-default);
		border-radius: var(--radius-xs);
	}
	.site_header_bar { gap: var(--space-3); }
	.site_header_actions { gap: var(--space-2); }
}

/* Display type is set for a 1240px canvas; step it down rather than let a
   72px headline overflow a phone. */
@media (max-width: 700px) {
	:root {
		--size-display-xl: 2.75rem;
		--size-display-l: 2.25rem;
		--size-display-m: 1.75rem;
		--size-h1: 1.5rem;
		--size-h2: 1.25rem;
		--size-h3: 1.125rem;
		--section-y: 64px;
		--section-y-tight: 48px;
	}
}