/* ==========================================================================
   043 Unify Skin
   Doel: kleuren, typografie en knoppen van het WordPress-deel laten aansluiten
   bij het designsysteem van /bestellen. Raakt geen paginastructuur, secties
   met een eigen achtergrond, of afbeeldingen aan.
   ========================================================================== */

:root{
  --u-paper:#EDEEE9; --u-paper-2:#F7F7F4; --u-ink:#141B22; --u-steel:#697583;
  --u-line:#D3D5CC; --u-signal:#F5C518; --u-deep:#A97F00; --u-load:#C4472B;
}

/* ---------- basis ---------- */
body{
  font-family:"Archivo",system-ui,-apple-system,sans-serif !important;
  background-color:var(--u-paper) !important;
  color:var(--u-ink) !important;
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:"Archivo",system-ui,-apple-system,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
}

a{ color:var(--u-ink); }
a:hover{ color:var(--u-load); }

/* ---------- knoppen ---------- */
.elementor-button,
.elementor-button-link,
.elementor-button-wrapper .elementor-button,
button:not(.mdc-icon-button),
input[type="submit"],
.fluentform button[type="submit"],
.ff-btn-submit{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  font-size:.82rem !important;
  border-radius:8px !important;
  background-color:var(--u-signal) !important;
  color:var(--u-ink) !important;
  border:2px solid var(--u-signal) !important;
  transition:.15s !important;
}
.elementor-button:hover,
.elementor-button-link:hover,
button:not(.mdc-icon-button):hover,
input[type="submit"]:hover,
.fluentform button[type="submit"]:hover,
.ff-btn-submit:hover{
  background-color:var(--u-ink) !important;
  border-color:var(--u-ink) !important;
  color:var(--u-paper) !important;
}

/* ---------- header / navigatie ---------- */
header.elementor-location-header,
#masthead,
.site-header{
  background-color:var(--u-paper) !important;
  border-bottom:1px solid var(--u-line) !important;
}

/* De header bestaat uit losse Elementor-kolommen met elk hun eigen
   achtergrond- en tekstkleur (topbalk, logo, nav). Die trekken we hier
   allemaal gelijk naar het bestellen-kleurenschema. */
.elementor-location-header,
.elementor-location-header section.elementor-top-section,
.elementor-location-header .elementor-widget-wrap,
.elementor-location-header .elementor-element-populated,
.elementor-location-header .elementor-background-overlay{
  background-color:var(--u-paper) !important;
  background-image:none !important;
}
.elementor-location-header,
.elementor-location-header a:not(.elementor-button),
.elementor-location-header span:not(.elementor-button *),
.elementor-location-header p,
.elementor-location-header i{
  color:var(--u-ink) !important;
}
.elementor-location-header a:not(.elementor-button):hover{
  color:var(--u-load) !important;
}
.elementor-location-header .elementor-icon,
.elementor-location-header .elementor-icon i{
  color:var(--u-steel) !important;
  border-color:var(--u-line) !important;
}

/* Knoppen in de header (bv. "Offerte") hadden dikke padding die bedoeld was
   voor een gevulde knop. Nu die knop een rand-only ("ghost") stijl heeft,
   valt die padding te veel op en steekt de rand buiten de rij. Compacter
   maken en verticaal centreren in de kolom. */
.elementor-location-header .elementor-button{
  padding:10px 20px !important;
  line-height:1.3 !important;
}

/* ---------- iconvakjes site-breed (bv. "Waar we voor staan") ---------- */
/* Zelfde olijfgroene rand/icon-kleur die in de header al vervangen is,
   komt ook in de paginainhoud voor. Consistent doortrekken. */
.elementor-icon,
.elementor-icon i,
.elementskit-info-box-icon,
.elementkit-infobox-icon{
  color:var(--u-steel) !important;
  border-color:var(--u-line) !important;
}

/* ---------- uitklapmenu (bv. "Projecten") ---------- */
.elementskit-submenu-panel{
  background-color:var(--u-ink) !important;
}
.elementskit-submenu-panel .dropdown-item,
.elementor-location-header .elementskit-submenu-panel .dropdown-item,
header .elementskit-submenu-panel a.dropdown-item{
  background-color:transparent !important;
  color:var(--u-paper) !important;
}
.elementskit-submenu-panel .dropdown-item:hover,
.elementor-location-header .elementskit-submenu-panel .dropdown-item:hover,
header .elementskit-submenu-panel a.dropdown-item:hover{
  background-color:var(--u-signal) !important;
  color:var(--u-ink) !important;
}

/* ---------- footer CTA-balk ("Gratis Offerte") ---------- */
.elementor-element-6aa45650{
  background-color:var(--u-ink) !important;
  background-image:none !important;
}
.elementor-element-6aa45650,
.elementor-element-6aa45650 a:not(.elementor-button),
.elementor-element-6aa45650 span:not(.elementor-button *),
.elementor-element-6aa45650 p,
.elementor-element-6aa45650 h1,
.elementor-element-6aa45650 h2,
.elementor-element-6aa45650 h3{
  color:var(--u-paper) !important;
}

/* ---------- positionering "De online constructeur" ---------- */
.elementor-element-a1b2c3d.elementor-heading-title{
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;
  font-weight:700 !important;
  font-size:20px !important;
  letter-spacing:3px !important;
}

/* Hero-knop "Bestellen" mag opvallen: dikker en groter dan de andere knoppen. */
.elementor-element-4787ac86 .elementor-button{
  font-weight:800 !important;
  font-size:1.05rem !important;
  padding:16px 32px !important;
}

/* ---------- kleine labels / eyebrows (indien gebruikt) ---------- */
.u-eyebrow,
.elementor-widget-text-editor .eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--u-steel);
}

/* ---------- horizontale lijnen ---------- */
hr{ background-color:var(--u-line); border:0; height:1px; }