/* Thema Gyprocwerken Zinga – 1-op-1 nagebouwd naar de Elementor-site (kit #43, header #73, footer #76).
   Lettertype: de oude site vraagt Arimo en Nunito Sans, maar die webfonts geven al geruime tijd 404.
   Elke bezoeker ziet dus de systeemschreefloze; dat is wat hier staat. De gewichten (500/600/900)
   blijven wel die van het origineel, zodat de terugval identiek uitvalt. */
:root{
  --sp-container:1140px;
  --sp-gutter:10px;
  --sp-gap:20px;
  --sp-bg:#fff;
  --sp-surface:#f4f4f4;
  --sp-text:#7b7b7b;
  --sp-muted:#7b7b7b;
  --sp-secondary:#232323;
  --sp-primary:#232323;
  --sp-primary-contrast:#fff;
  --sp-line:#e5e5e5;
  --sp-radius:0;
  --sp-btn-radius:0;
  --sp-font:Helvetica,Arial,sans-serif;
  --sp-font-heading:Helvetica,Arial,sans-serif;
  --zinga-donker:#232323;
  --zinga-voettekst:#aaa;
  --zinga-icoon:#69727d;
}

/* ---------- basis ---------- */
.sp-skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--zinga-donker);padding:10px 16px}
.sp-skip:focus{left:0}
.menu-btn{display:none}
body{font-size:16px;line-height:24px;font-weight:500}
p{margin:0 0 14.4px}
.sp-text>:last-child{margin-bottom:14.4px}   /* Elementor laat de laatste alinea haar marge houden */
.sp-widget{margin-bottom:20px}
a{color:inherit}
strong,b{color:var(--zinga-donker);font-weight:700}

h1,h2,h3,h4{color:var(--zinga-donker);font-weight:600;line-height:45px;margin:0}
.sp-heading{font-size:38px;line-height:45px;font-weight:600;color:var(--zinga-donker);margin:0}
.sp-heading.sp-size-xl{font-size:70px;line-height:70px;font-weight:900}
.sp-heading.sp-size-l{font-size:42px;line-height:45px}
.sp-heading.sp-size-m{font-size:30px;line-height:45px}
.sp-heading.sp-size-s{font-size:20px;line-height:45px}

/* ---------- knoppen ---------- */
.sp-btn{font-size:14px;line-height:14px;font-weight:500;padding:12px 24px;border-width:1px;border-style:solid;border-radius:0}
.sp-btn-primary,.sp-btn-secondary{background:var(--zinga-donker);color:#fff;border-color:#fff}
.sp-btn-primary:hover,.sp-btn-secondary:hover{background:#000;border-color:#fff;filter:none;transform:none}

/* ---------- scheidingslijn ---------- */
.sp-divider{border-top:2px solid #000;margin-left:0}

/* ---------- contactbalk boven de header ---------- */
.topbar{background:var(--zinga-donker);font-size:13px;line-height:19.5px}
.topbar-inner{display:flex;align-items:center;gap:16px;min-height:40px;flex-wrap:wrap}
.topbar a{display:inline-flex;align-items:center;gap:8px;color:var(--sp-text);text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .sp-icon{width:14px;height:14px;flex:none}

/* ---------- header ---------- */
.site-header{background:#fff;padding:15px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px}
.site-logo{display:block;line-height:0}
.site-logo img{width:184px;height:auto}
.site-nav .sp-menu{gap:0}
.site-nav .sp-menu a{font-size:14px;line-height:14px;font-weight:500;color:var(--sp-text);padding:15px;border-radius:0}
.site-nav .sp-menu a:hover,.site-nav .sp-menu .is-active>a{color:var(--zinga-donker)}

/* ---------- hero (homepage) ---------- */
.hero{min-height:674px}
.hero .sp-row{align-items:center}
.hero .hero-beeld{align-self:stretch;display:flex}
.hero .hero-beeld .sp-widget{margin:0;width:100%}
.hero .hero-beeld img{width:100%;height:100%;object-fit:cover}

/* ---------- titelbalk op de binnenpagina's ----------
   Het grijze vlak springt links 120 px in, de twee kolommen schuiven er met dezelfde 120 px weer uit,
   zodat de paginatitel links naast het vlak begint. Zo staat het ook in de Elementor-opbouw. */
.titelbalk{padding:0}
.titelbalk>.sp-container{padding-top:10px;padding-bottom:10px}
.titelbalk>.sp-container::before{content:'';position:absolute;top:0;bottom:0;left:120px;right:10px;background:var(--sp-surface)}
.titelbalk .sp-row{position:relative;gap:0;margin-right:130px;padding:49.5px 0}
.titelbalk .sp-divider{width:60px!important}

/* ---------- grijs infoblok op de homepage ---------- */
.infoblok{background:var(--sp-surface);padding:40px 40px 32px;text-align:center}

/* ---------- citaat ---------- */
.sp-quote-plain{text-align:center;padding:0 100px}
.sp-quote-plain::before{
  content:'';display:block;width:62px;height:48px;margin:0 auto 37px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 62' fill='none' stroke='%2369727d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M29 31a13.5 13.5 0 1 1 4.5-10c0 14.5-7.8 25.4-21.5 31.4'/%3E%3Cpath d='M74 31a13.5 13.5 0 1 1 4.5-10c0 14.5-7.8 25.4-21.5 31.4'/%3E%3C/svg%3E") no-repeat center/contain;
}
.sp-quote-plain p{font-size:16px;line-height:24px;font-weight:500;font-style:italic;color:var(--sp-text);margin:0 0 35px}
.sp-quote footer{justify-content:center;margin:0}
.sp-quote cite{font-size:16px;line-height:24px;font-weight:500;font-style:normal;color:#111}

/* ---------- galerij ---------- */
.sp-gallery{gap:10px;padding:0 5px}
.sp-gallery-item{border-radius:0;background:none}

/* ---------- beelden op "Wat we doen" ----------
   In Elementor staan die op een eigen maat van 1500 × 400; als verhouding blijft dat op elk scherm kloppen. */
.page-onze-diensten .sp-figure img{width:100%;aspect-ratio:15/4;object-fit:cover;filter:brightness(.46) saturate(0)}

/* ---------- icoonlijst ---------- */
.sp-iconlist{list-style:none;margin:0;padding:0}
.sp-iconlist li{display:flex;align-items:flex-start;gap:8px;padding-bottom:4px}
.sp-iconlist .sp-icon{width:14px;height:14px;margin-top:5px;flex:none}
.sp-iconlist a{text-decoration:none}
.sp-iconlist a:hover{color:var(--zinga-donker)}

/* ---------- formulier ---------- */
.sp-form input:not([type=checkbox]):not([type=radio]),.sp-form select,.sp-form textarea{border-radius:0;border-color:#d5d5d5;font-size:14px}
.sp-form label{font-size:14px}

/* ---------- footer ---------- */
.site-footer{background:var(--zinga-donker);color:var(--zinga-voettekst)}
.footer-top{padding:80px 0}
/* de kolommen lopen in Elementor tot de rand van de container (1140), vandaar de negatieve marge;
   de twee rechtse kolommen staan daar 50 px extra ingesprongen */
.footer-grid{display:grid;grid-template-columns:50% 25% 25%;gap:0;padding-left:0;padding-right:0}
.footer-grid>*{padding:10px}
.footer-grid>*+*{padding-left:60px}
.footer-logo a{display:block}
.footer-logo img{display:block;width:58%;height:auto;margin:0 auto}
.site-footer h4{font-size:20px;line-height:45px;font-weight:600;color:#fff;margin:0 0 20px}
.footer-menu,.footer-gegevens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer-menu a,.footer-gegevens a{color:var(--zinga-voettekst);text-decoration:none}
.footer-menu a:hover,.footer-gegevens a:hover{color:#fff}
/* de oude site heeft hier enkel de copyrightregel; de cookielinks zijn een vaste toevoeging van
   Stapel en staan daarom op een tweede regel, zodat de copyright op dezelfde plaats blijft staan */
.footer-bar-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:85px;padding:16px var(--sp-gutter);text-align:center;border-top:1px solid #333}
.footer-bar-inner p{margin:0}
.footer-copyright{color:var(--sp-text)}
.footer-copyright a{color:var(--sp-text);text-decoration:none}
.footer-copyright a:hover{color:#fff}
.footer-legal{display:flex;gap:16px;font-size:13px;flex-wrap:wrap;justify-content:center}
.footer-legal a{color:var(--sp-text);text-decoration:none}
.footer-legal a:hover{color:#fff}

/* ---------- mobiel ---------- */
@media(max-width:1024px){
  .hero{min-height:0}
  .hero .sp-row{padding:50px 0}
  .titelbalk .sp-row{margin-right:0;padding:32px 0}
  .titelbalk>.sp-container::before{left:0;right:0}
}
@media(max-width:768px){
  :root{--sp-gutter:20px}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer}
  .menu-btn span{display:block;height:2px;background:var(--zinga-donker)}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12);z-index:40}
  .site-nav.is-open{display:block}
  .site-nav .sp-menu{flex-direction:column;align-items:stretch;gap:0}
  .site-nav .sp-menu a{padding:14px 20px;border-bottom:1px solid #eee}
  .header-inner{position:relative}
  .footer-grid>*+*{padding-left:10px}
  .footer-bar-inner{gap:10px;padding:20px var(--sp-gutter)}
  .sp-heading.sp-size-xl{font-size:44px;line-height:48px}
  .sp-heading{font-size:30px;line-height:38px}
  .sp-heading.sp-size-l{font-size:32px;line-height:38px}
  .sp-heading.sp-size-m{font-size:26px;line-height:34px}
  .topbar-inner{gap:10px;font-size:12px}
  .header-inner{min-height:56px}
  .site-logo img{width:150px}
  .infoblok{padding:32px 24px 24px}
  .sp-quote-plain{padding:0}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-logo img{width:70%}
  .footer-top{padding:56px 0}
  .site-footer h4{line-height:32px;margin-bottom:12px}
}