/*
Theme Name: Netwires
Theme URI: https://netwires.be
Template: generatepress
Author: Netwires
Author URI: https://netwires.be
Description: GeneratePress child theme for Netwires. Colours live in GeneratePress → Color Options, typography in GeneratePress → Typography, components in GenerateBlocks Global Styles. This file only self-hosts the Manrope font files.
Version: 1.0.0
Text Domain: netwires-gp
*/

/* ============================================================
   Manrope — self-hosted (no Google CDN: faster + GDPR-safe).
   GeneratePress → Typography applies it; this just provides the files.
   ============================================================ */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/manrope-400.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/manrope-500.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/manrope-600.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/manrope-700.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/manrope-800.woff2") format("woff2");}

/* ============================================================
   Hero floating cards — gentle bob. A keyframe animation can't be
   expressed as a block style, so the one @keyframes lives here; the
   cards reference it via their local `animation` declaration.
   ============================================================ */
@keyframes nw-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media (prefers-reduced-motion: reduce){.fc{animation:none !important;}}

/* Safety net: the hero's absolutely-positioned floating cards must never
   trigger a horizontal scrollbar on small screens. */
body{overflow-x:hidden;}

/* Mobile menu CTA: GB Pro's gbp-button--primary shows a stray white border on
   the dark overlay. Scope a clean filled brand-red button to the overlay only
   (the desktop header CTA keeps its own style). */
.gb-menu-show-on-toggled .gbp-button--primary{background:var(--accent);color:#fff;border:none;}
.gb-menu-show-on-toggled .gbp-button--primary:hover{background:#d41f1f;color:#fff;}

/* Zwarte CTA-knop (desktop header) wordt wit met zwarte rand bij hover. De rand
   staat ook in rust (onzichtbaar op de zwarte knop) zodat er geen layout-shift is.
   De mobiele overlay-CTA blijft rood (regels hierboven, hogere specificiteit). */
.gbp-button--primary{border:1.5px solid var(--contrast);box-sizing:border-box;}
@media (min-width:768px){
	.gbp-button--primary:hover{background:transparent !important;color:var(--contrast) !important;border-color:var(--contrast) !important;}
}

/* "Diensten" submenu. The same .gb-sub-menu class serves BOTH the desktop hover
   dropdown and the dark mobile overlay, so each look is scoped to its own
   breakpoint (the menu collapses to the overlay at <=767px). */

/* Desktop (>=768px): a clean white floating panel (was a heavy black box).
   Item text lines up under "Diensten"; labels fit on one line; soft hover. */
@media (min-width:768px){
	.gb-sub-menu-smb3d7e6{left:0 !important;right:auto !important;width:auto !important;min-width:228px;background:#fff !important;border-radius:14px;padding:8px !important;box-shadow:0 16px 44px rgba(0,0,0,.16);}
	/* Invisible bridge so the hover doesn't break in the gap between the trigger
	   and the panel (otherwise the menu closes before you reach the items). */
	.gb-sub-menu-smb3d7e6::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
	.gb-sub-menu-smb3d7e6 .menu-item{background-color:#fff !important;}
	.gb-sub-menu-smb3d7e6 .gb-menu-link{padding:11px 12px !important;white-space:nowrap;color:var(--contrast) !important;border-radius:9px;font-size:15px;}
	.gb-sub-menu-smb3d7e6 .gb-menu-link:hover{background:var(--base-2) !important;color:var(--accent) !important;}
}

/* Mobile overlay (<=767px): blend into the dark overlay instead of a white card —
   transparent, no shadow, items indented under "Diensten" with dimmed white text.
   (GB's default here is a solid #111 block that reads as a stray box.) */
@media (max-width:767px){
	.gb-sub-menu-smb3d7e6{background:transparent !important;box-shadow:none !important;padding:0 !important;}
	.gb-sub-menu-smb3d7e6 .menu-item{background-color:transparent !important;}
	.gb-sub-menu-smb3d7e6 .gb-menu-link{background:transparent !important;color:rgba(255,255,255,.72) !important;padding-left:44px !important;}
	.gb-sub-menu-smb3d7e6 .gb-menu-link:hover{color:#fff !important;}
}

/* Sticky header: shadow appears only after scrolling (.is-stuck added by JS),
   so at the top the header blends into the hero as one piece. */
.gb-site-header{transition:box-shadow .25s ease;}
.gb-site-header.is-stuck{box-shadow:0 2px 18px rgba(0,0,0,.07);}

/* ============================================================
   Fluent Forms — restyle the contact form to match the site:
   Manrope, brand borders, rounded inputs, a SQUARED red submit
   button (radius 0, like every other button), and a select2
   dropdown that matches instead of the browser's serif list.
   ============================================================ */
.cf-card .fluentform .ff-el-group{margin-bottom:16px;}
.cf-card .fluentform .ff-el-input--label label{font-size:13.5px;font-weight:600;color:var(--contrast);margin-bottom:7px;}
.cf-card .fluentform .ff-el-form-control{width:100%;box-sizing:border-box;border:1.5px solid var(--contrast-3);border-radius:11px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--contrast);background:#fff;outline:none;box-shadow:none;transition:border-color .15s;}
.cf-card .fluentform .ff-el-form-control:focus{border-color:var(--accent);box-shadow:none;}
.cf-card .fluentform textarea.ff-el-form-control{min-height:120px;line-height:1.5;resize:vertical;}
.cf-card .fluentform .ff-el-is-error .ff-el-form-control{border-color:#d94a43;}
.cf-card .fluentform .error-text,.cf-card .fluentform .text-danger{color:#c0392b;font-size:13px;}

/* Squared red submit button (matches the site's radius-0 buttons; colour is fine). */
.cf-card .fluentform .ff-btn-submit,.cf-card .fluentform button.ff-btn{background:var(--accent);color:#fff;border:0;border-radius:0;padding:15px 32px;font-weight:700;font-size:15px;font-family:inherit;box-shadow:none;cursor:pointer;transition:background-color .15s;}
.cf-card .fluentform .ff-btn-submit:hover{background:#d41f1f;color:#fff;}

/* Onderwerp dropdown — Fluent Forms enhances selects with Choices.js. Style the
   box AND the popup option list so it matches the site instead of the browser's
   default serif list. The popup lives inside .choices, so .cf-card scoping works. */
.cf-card .choices{margin-bottom:0;}
.cf-card .choices__inner{min-height:auto;background:#fff;border:1.5px solid var(--contrast-3);border-radius:11px;padding:11px 14px;font-size:15px;}
.cf-card .choices.is-open .choices__inner{border-color:var(--accent);border-radius:11px;}
.cf-card .choices__inner .choices__list--single{padding:0;}
.cf-card .choices__list--single .choices__item{color:var(--contrast);font-size:15px;}
.cf-card .choices[data-type*=select-one]::after{border-color:var(--contrast-2) transparent transparent transparent;right:14px;}
.cf-card .choices__list--dropdown{border:1.5px solid var(--contrast-3);border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.12);margin-top:6px;font-family:Manrope,system-ui,sans-serif;}
.cf-card .choices__list--dropdown .choices__item{font-size:15px;color:var(--contrast);padding:11px 14px;}
.cf-card .choices__list--dropdown .choices__item--selectable.is-highlighted{background:var(--accent);color:#fff;}
.cf-card .choices__list--dropdown .choices__item--selectable[aria-selected=true]{background:var(--base-2);}

/* ============================================================
   Single project template (nw_project_template_html): a case-study
   layout — hero + image, meta bar, 2-col body with a "wat we deden"
   card, gallery, a dark client quote, and a red CTA.
   ============================================================ */
.single-project .post-image,.single-project .featured-image,.single-project .page-header-image{display:none;}
.proj-hero{padding:60px 0 0;}
.proj-back{display:inline-block;color:var(--contrast-2);text-decoration:none;font-weight:600;font-size:14px;margin-bottom:26px;}
.proj-back:hover{color:var(--accent);}
.proj-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.proj-pill{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:7px 15px;text-decoration:none;transition:background .15s,color .15s;}
a.proj-pill:hover{background:#d41f1f;color:#fff;}
/* Realisaties-archief — categorie-filterbalk */
.rf-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;}
.rf-btn{background:var(--base-2);border:1px solid var(--contrast-3);color:var(--contrast);font-size:14px;font-weight:600;border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.rf-btn:hover{border-color:var(--contrast);}
.rf-btn.is-active{background:var(--contrast);border-color:var(--contrast);color:#fff;}
.proj-hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:start;margin-top:6px;}
@media (max-width:900px){.proj-hero-grid{grid-template-columns:1fr;gap:30px;}}
.proj-title{margin:0 0 18px;}
.proj-lead{max-width:680px;margin-bottom:0;}
.proj-figure{width:100%;border-radius:20px;background:#fff;padding:16px;box-shadow:0 30px 60px rgba(0,0,0,.08);border:1px solid var(--contrast-3);}
.proj-figure img,.proj-hero-img{display:block;width:100%;height:auto;border-radius:10px;}
.proj-figure--empty{position:relative;width:100%;box-shadow:none;background:#eceae4;background-image:radial-gradient(#d7d5cf 1.4px,transparent 1.4px);background-size:18px 18px;aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;}
.proj-figure-tag{position:absolute;top:22px;left:22px;background:#fff;color:var(--contrast-2);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:7px 15px;box-shadow:0 4px 14px rgba(0,0,0,.05);}
.proj-body{padding:72px 0;margin-top:56px;border-top:1px solid var(--contrast-3);}
.proj-body-grid{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:start;}
.proj-cs-item{margin-bottom:40px;}
.proj-cs-item:last-child{margin-bottom:0;}
.proj-cs-h{font-size:24px;font-weight:800;margin:0 0 14px;}
.proj-prose p{font-size:16px;line-height:1.75;color:var(--contrast-2);margin:0 0 16px;}
.proj-prose p:last-child{margin-bottom:0;}
.proj-prose ul,.proj-prose ol{margin:0 0 16px;padding-left:22px;}
.proj-prose li{font-size:16px;line-height:1.7;color:var(--contrast-2);margin-bottom:6px;}
.proj-prose a{color:var(--accent);}
.proj-prose strong{color:var(--contrast);}
.proj-side{position:sticky;top:100px;}
.proj-side-card{background:var(--base-2);border:1px solid var(--contrast-3);border-radius:18px;padding:28px 28px 30px;}
.proj-side-h{font-weight:800;font-size:18px;margin-bottom:18px;}
.proj-checklist{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:13px;}
.proj-checklist li{position:relative;padding-left:32px;font-size:14.5px;line-height:1.4;color:var(--contrast);}
.proj-checklist li::before{content:"";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:6px;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;}
.proj-side-btn{display:block;text-align:center;background:var(--contrast);color:#fff;font-weight:700;font-size:14.5px;padding:14px 20px;text-decoration:none;border-radius:10px;}
.proj-side-btn:hover{background:#000;color:#fff;}
.proj-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:56px;padding-top:52px;border-top:1px solid var(--contrast-3);}
.proj-gitem{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--contrast-3);box-shadow:0 12px 34px rgba(0,0,0,.07);background:#fff;cursor:zoom-in;}
.proj-gimg{display:block;width:100%;height:auto;transition:transform .3s;}
.proj-gitem:hover .proj-gimg{transform:scale(1.04);}
.proj-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out;padding:28px;}
.proj-lightbox img{max-width:96%;max-height:96%;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.5);}
.proj-quote{background:var(--contrast);padding:76px 0;}
.proj-quote-inner{max-width:900px;}
.proj-quote-mark{color:var(--accent);font-size:64px;font-weight:800;line-height:.6;display:block;margin-bottom:6px;}
.proj-quote blockquote{margin:0;border:0;padding:0;color:#fff;font-size:30px;font-weight:800;line-height:1.3;letter-spacing:-.01em;}
.proj-quote-by{margin-top:26px;}
.proj-quote-by strong{display:block;color:#fff;font-size:16px;}
.proj-quote-by span{display:block;color:#8f8f8a;font-size:14.5px;margin-top:2px;}
.proj-cta{background:var(--accent);padding:66px 0;}
.proj-cta-grid{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.proj-cta-txt h2{color:#fff;margin:0 0 10px;}
.proj-cta-txt p{color:rgba(255,255,255,.9);font-size:16px;line-height:1.6;margin:0;max-width:430px;}
.proj-cta-btns{display:flex;gap:14px;flex-wrap:wrap;}
.proj-cta-btn{display:inline-flex;align-items:center;background:#fff;color:var(--contrast);font-weight:700;font-size:15px;padding:16px 30px;text-decoration:none;white-space:nowrap;}
.proj-cta-btn2{display:inline-flex;align-items:center;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);font-weight:700;font-size:15px;padding:14.5px 28px;text-decoration:none;white-space:nowrap;}
.proj-cta-btn2:hover{background:rgba(255,255,255,.12);color:#fff;}
@media (max-width:1024px){.proj-body-grid{grid-template-columns:1fr;gap:40px;}.proj-side{position:static;}}
@media (max-width:767px){.proj-hero{padding:40px 0 0;}.proj-body{padding:52px 0;}.proj-quote{padding:56px 0;}.proj-quote blockquote{font-size:23px;}.proj-cta{padding:52px 0;}.proj-gallery{grid-template-columns:1fr;}.proj-cta-grid{flex-direction:column;align-items:flex-start;}}

/* 404-pagina: header + inhoud + footer als flex-kolom over de volledige
   schermhoogte, zodat de footer onderaan blijft plakken ook al is de
   inhoud kort. Inhoud zelf gecentreerd in de vrije ruimte. */
body.error404{display:flex;flex-direction:column;min-height:100vh;}
body.error404 #page{flex:1 0 auto;width:100%;display:flex;}
body.error404 .site-content,body.error404 #primary,body.error404 .site-main{display:flex;flex:1 0 auto;width:100%;margin:0;}
body.error404 .site-footer{margin-top:auto;}
.nw-404{max-width:1340px;width:100%;margin:0 auto;padding:96px 24px;align-self:center;}
.nw-404 h1{margin:22px 0 20px;}
@media (max-width:767px){.nw-404{padding:56px 24px;}}