/* ==========================================================================
   Quality Products – basis: tokens, typografie, knoppen, header, copyright
   Prefix: body.qp  ·  Design: Figma R1 (1728px breed)
   Breakpoints: 1240px (mobiel menu), 999px (tablet), 690px (gsm)
   ========================================================================== */
:root {
	--qp-navy: #0d3870;
	--qp-blauw: #164889;
	--qp-rood: #da241c;
	--qp-grijs: #7d7d7d;
	--qp-beige: #eeeee2;
	--qp-bg: #fafaf8;
	--qp-donker: #232323;
	--qp-lijn: rgba(22, 72, 137, .12);
	--qp-schaduw: 0 4px 20px rgba(0, 0, 0, .25);
	--qp-verloop: linear-gradient(133.93deg, #0d3870 0.25%, #164889 100%);
	--qp-font: "Poppins", Helvetica, Arial, sans-serif;
	/* vloeiende maten: px-waarde uit Figma / 17.28 = vw */
	--qp-h1: clamp(34px, 3.01vw, 52px);
	--qp-h3: clamp(23px, 1.74vw, 30px);
	--qp-tekst: clamp(17px, 1.16vw, 20px);
	--qp-zijmarge: clamp(20px, 8.16vw, 141px);
	--qp-titel-inspring: clamp(22px, 2.43vw, 42px);
}

html body.qp { background: var(--qp-bg); color: var(--qp-grijs); overflow-x: clip; }
body.qp .container-wrap, body.qp #ajax-content-wrap { background: var(--qp-bg); }
body.qp .container-wrap { padding-bottom: 0 !important; padding-top: 0 !important; }
body.qp .main-content > .row > .wpb_row:first-child { margin-top: 0; }
body.qp, body.qp p, body.qp li { font-family: var(--qp-font); font-weight: 500; font-size: var(--qp-tekst); line-height: 1.5; }
body.qp p { padding-bottom: 0; margin-bottom: 1em; }
body.qp p:last-child { margin-bottom: 0; }
body.qp .wpb_text_column ul { margin-left: 0; padding-left: 1.35em; margin-bottom: 1em; }
body.qp .wpb_text_column ul:last-child { margin-bottom: 0; }
body.qp .wpb_text_column li { list-style: disc; }
body.qp a { transition: color .2s ease, opacity .2s ease, background-color .2s ease; }
body.qp .wpb_content_element { margin-bottom: 0; }

/* ---------- Typografie ---------- */
body.qp h1, body.qp h2 { font-family: var(--qp-font); font-weight: 700; font-size: var(--qp-h1); line-height: 1.154; letter-spacing: 0; color: var(--qp-navy); margin-bottom: .5em; }
body.qp h2 { line-height: 1.058; }
body.qp h3 { font-family: var(--qp-font); font-weight: 700; font-size: var(--qp-h3); line-height: 1.33; color: var(--qp-navy); margin-bottom: .45em; }
body.qp h4 { font-family: var(--qp-font); font-weight: 700; font-size: var(--qp-tekst); line-height: 1.5; color: var(--qp-navy); margin-bottom: .6em; }
body.qp h1:last-child, body.qp h2:last-child, body.qp h3:last-child { margin-bottom: 0; }

/* Titel met rode lijn links (zoals "Twee specialismen, één werf") */
body.qp .qp-titel h1, body.qp .qp-titel h2 { position: relative; padding-left: var(--qp-titel-inspring); margin-bottom: 0; }
body.qp .qp-titel h1::before, body.qp .qp-titel h2::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 5px; height: max(88%, clamp(64px, 5.85vw, 101px)); background: var(--qp-rood);
}
body.qp .qp-titel--wit h1, body.qp .qp-titel--wit h2, body.qp .qp-hero .qp-titel h1 { color: #fff; }

/* Pijllink "Naar glaswerken →" */
body.qp .qp-pijl a, body.qp a.qp-pijl { font-weight: 700; color: var(--qp-navy); text-decoration: none; }
body.qp .qp-pijl a span, body.qp a.qp-pijl span { color: var(--qp-rood); display: inline-block; transition: transform .2s ease; }
body.qp .qp-pijl a:hover span, body.qp a.qp-pijl:hover span { transform: translateX(4px); }

/* ---------- Knoppen (nectar_btn el_class="qp-btn", <button class="qp-knop">) ---------- */
html body.qp :is(a, button).nectar-button.qp-btn,
html body.qp .qp-knop {
	display: inline-flex !important; align-items: center; justify-content: center;
	min-width: clamp(220px, 14.76vw, 255px); min-height: clamp(52px, 3.53vw, 61px); padding: 10px 24px !important; margin: 0 !important;
	background: var(--qp-rood) !important; color: #fff !important; border: 3px solid var(--qp-rood) !important; border-radius: 0 !important;
	font-family: var(--qp-font) !important; font-weight: 700 !important; font-size: clamp(17px, 1.16vw, 20px) !important; line-height: 1.2 !important;
	letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; transform: none !important; text-decoration: none; cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
html body.qp :is(a, button).nectar-button.qp-btn span { color: inherit !important; transform: none !important; font: inherit !important; }
html body.qp :is(a, button).nectar-button.qp-btn:hover, html body.qp .qp-knop:hover { background: #b81d16 !important; border-color: #b81d16 !important; opacity: 1 !important; }
html body.qp :is(a, button).nectar-button.qp-btn--lijn { background: transparent !important; border-color: #fff !important; }
html body.qp :is(a, button).nectar-button.qp-btn--lijn:hover { background: #fff !important; color: var(--qp-navy) !important; border-color: #fff !important; }
html body.qp :is(a, button).nectar-button.qp-btn--lijn-donker { background: transparent !important; border-color: var(--qp-navy) !important; color: var(--qp-navy) !important; }
html body.qp :is(a, button).nectar-button.qp-btn--lijn-donker:hover { background: var(--qp-navy) !important; color: #fff !important; }
body.qp .nectar-button.qp-btn + .nectar-button.qp-btn { margin-left: clamp(16px, 2.09vw, 36px) !important; }
body.qp .qp-knoprij .wpb_wrapper { text-align: center; }

/* ==========================================================================
   Header (Salient standaard-header, kleuren via theme options)
   ========================================================================== */
body.qp #header-outer { box-shadow: 0 4px 20px 4px rgba(0, 0, 0, .25) !important; }
body.qp #header-outer #top nav > ul > li > a { font-family: var(--qp-font); font-weight: 500; font-size: clamp(17px, 1.16vw, 20px); }
body.qp #header-outer[data-lhe="animated_underline"] #top nav > ul > li:not([class*="button_"]) > a .menu-title-text::after { border-color: var(--qp-rood) !important; border-top-width: 2px !important; }
body.qp #header-outer #top nav > .sf-menu > li.button_solid_color > a::before { background-color: var(--qp-rood) !important; border-radius: 0 !important; height: clamp(52px, 3.53vw, 61px) !important; transform: translateY(-50%) !important; top: 50% !important; }
body.qp #header-outer #top nav > .sf-menu > li.button_solid_color > a { font-weight: 700 !important; padding-left: 32px !important; padding-right: 32px !important; margin-left: 20px; }
body.qp #header-outer #top nav > .sf-menu > li.button_solid_color > a:hover::before { background-color: #b81d16 !important; }
@media (min-width: 1241px) and (max-width: 1500px) {
	body.qp #header-outer #top nav > ul > li > a { font-size: 17px; }
	body.qp #header-outer #top nav > ul > li { padding-left: 2px; padding-right: 2px; }
}
/* Off-canvas menu */
body.qp #slide-out-widget-area .off-canvas-menu-container li a { font-family: var(--qp-font); font-weight: 700; }
body.qp #slide-out-widget-area .off-canvas-menu-container li.button_solid_color > a { color: #fff; background: var(--qp-rood); display: inline-block; padding: 10px 24px; margin-top: 12px; font-size: 20px; }

/* ==========================================================================
   Copyrightbalk
   ========================================================================== */
body.qp #footer-outer #copyright { border-top: 0; padding: 22px 0; }
body.qp #footer-outer #copyright p, body.qp #footer-outer #copyright a { font-family: var(--qp-font); font-size: 15px; font-weight: 500; color: #9a9a9a; }
body.qp #footer-outer #copyright a:hover { color: #fff; }

@media (max-width: 690px) {
	html body.qp :is(a, button).nectar-button.qp-btn { min-width: 0; width: 100%; }
	body.qp .nectar-button.qp-btn + .nectar-button.qp-btn { margin-left: 0 !important; margin-top: 14px !important; }
}