/* Thema Vanchaze-Eerdekens Hekwerk en Montage – 1-op-1 nabouw van de WordPress/Elementor-site. */
:root{
  --sp-primary:#004000;          /* huisgroen: koppen, knoppen, menu */
  --sp-primary-dark:#002d00;
  --sp-secondary:#54595f;        /* lopende tekst */
  --sp-link:#cc3366;             /* tekstlinks, zoals op de oude site */
  --sp-surface:#ececec;          /* grijze secties */
  --sp-surface-2:#f4f4f4;        /* copyrightbalk */
  --sp-font:"Open Sans",sans-serif;
  --sp-font-heading:Lato,sans-serif;
  --sp-font-accent:Caveat,cursive;
  --sp-radius:0px;
  --sp-header-h:92px;
}
body{font-family:var(--sp-font);font-size:16px;line-height:1.5;color:var(--sp-secondary);background:#fff}
h1,h2,h3,h4,h5,h6{font-family:var(--sp-font-heading);line-height:1.1;margin:0 0 .6em}
h1{font-size:40px;font-weight:600;color:var(--sp-primary)}
h2{font-size:32px;font-weight:500;color:var(--sp-secondary)}
h3{font-size:22px;font-weight:400;color:var(--sp-secondary)}
p{margin:0 0 1.2em}
a{color:var(--sp-link);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- kop ---------- */
.site-header{position:sticky;top:var(--sp-adminbar-h,0px);z-index:100;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:var(--sp-header-h);max-width:1500px;margin:0 auto;padding:0 20px}
.site-logo{flex:none;display:flex;align-items:center}
.site-logo img{height:92px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:1rem}
.site-nav>.sp-menu{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.site-nav>.sp-menu>li>a{display:block;padding:0 20px;line-height:calc(var(--sp-header-h) - 3px);font-size:14px;color:var(--sp-primary);text-transform:uppercase;font-family:var(--sp-font);border-bottom:3px solid transparent}
.site-nav>.sp-menu>li>a:hover{text-decoration:none;color:var(--sp-primary-dark)}
.site-nav>.sp-menu>li.is-active>a{border-bottom-color:var(--sp-primary)}
.site-nav .sp-menu-sub{background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12);min-width:230px;padding:.4rem 0;border-radius:0}
.site-nav .sp-menu-sub>li>a{display:block;padding:.6rem 1.2rem;line-height:1.4;font-size:14px;color:var(--sp-secondary);text-transform:none;border:0}
.site-nav .sp-menu-sub a:hover{background:var(--sp-surface);color:var(--sp-primary);text-decoration:none}
.header-cta{flex:none;background:var(--sp-primary);color:#fff;border-radius:100px;padding:12px 24px;font-size:13px;font-weight:300;letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.header-cta:hover{background:var(--sp-primary-dark);color:#fff;text-decoration:none}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn span{width:26px;height:3px;background:var(--sp-primary);border-radius:2px}

/* De oude site regelt de ruimte tussen de blokken met spacers in de pagina zelf, niet met
   sectiepadding; met de royale standaardpadding erbij zou alles twee keer zo ver uit elkaar staan. */
.sp-section.sp-pad-m{padding:1.5rem 0}
.sp-section.sp-pad-l{padding:2.5rem 0}

/* ---------- knoppen ---------- */
.sp-btn,.sp-btn-primary{background:var(--sp-primary);color:#fff;border:0;border-radius:0;padding:12px 24px;font-family:var(--sp-font);font-size:15px;font-weight:400;letter-spacing:.3px;text-transform:none}
.sp-btn:hover,.sp-btn-primary:hover{background:var(--sp-primary-dark);color:#fff;text-decoration:none}
.sp-btn-ghost{background:transparent;color:var(--sp-primary);border:1px solid var(--sp-primary)}
.sp-btn-ghost:hover{background:var(--sp-primary);color:#fff}

/* ---------- koppen met scheidingslijn (zoals de Elementor-titels) ---------- */
.sp-heading{text-align:center}
main h1{text-align:center}
main h1::after{content:"";display:block;width:140px;height:1px;background:#d4d4d4;margin:.7em auto 0}
.is-home main h1{text-align:left}
.is-home main h1::after{margin-left:0}

/* ---------- dienstenkaarten (post-list) ---------- */
.sp-postlist{gap:1.5rem}
.sp-card,.sp-post{background:#fff;border:0;border-radius:0;box-shadow:0 1px 3px rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column;text-align:left}
.sp-post-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sp-post-body{padding:1.4rem 1.6rem 1.8rem}
.sp-post-title{font-family:var(--sp-font-heading);font-size:22px;font-weight:400;line-height:1.3;margin:0 0 1rem}
.sp-post-title a{color:var(--sp-secondary)}
.sp-post-title a:hover{color:var(--sp-primary);text-decoration:none}
.sp-post-excerpt{font-size:14px;line-height:1.7;color:#7a7a7a;margin:0 0 1.2rem}
.sp-post-link{color:var(--sp-primary);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:auto}
.sp-post-link:hover{text-decoration:underline}
.sp-post-link .sp-icon{display:none}   /* de oude site zet enkel » achter de tekst */

/* ---------- getuigenis op de foto met groene waas ---------- */
.sp-scheme-light .sp-heading{font-family:var(--sp-font-accent);font-size:43px;font-weight:400;color:#fff;line-height:1.2}
.sp-scheme-light .sp-quote p,.sp-scheme-light .sp-quote cite{color:#fff}
.sp-quote{border:0;padding:0;margin:0}
.sp-quote-plain p{font-style:italic;font-size:20px;margin:0 0 1rem}
.sp-quote cite{font-style:normal;font-weight:700}

/* ---------- formulier: het donkergroene blok van de oude site ---------- */
.sp-form-groen{background:var(--sp-primary);color:#fff;padding:2rem}
.sp-form-groen h2,.sp-form-groen h3,.sp-form-groen p,.sp-form-groen label,.sp-form-groen .sp-check{color:#fff}
.sp-form-groen h2{font-size:30px;font-weight:400;text-align:left}
.sp-form-groen .sp-heading{text-align:left}
.sp-form-groen input[type=text],.sp-form-groen input[type=email],.sp-form-groen input[type=tel],.sp-form-groen textarea{background:#fff;border:0;border-radius:0;width:100%}
.sp-form-groen .sp-btn{background:#fff;color:var(--sp-primary);border:1px solid #fff}
.sp-form-groen .sp-btn:hover{background:var(--sp-surface);color:var(--sp-primary-dark)}
.sp-form-groen .sp-field-file input[type=file]{color:#fff}
.sp-form-groen a{color:#fff;text-decoration:underline}

/* ---------- voet ---------- */
.site-footer{background:var(--sp-surface);color:var(--sp-secondary);margin-top:0}
.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding:3rem 20px}
.footer-logo img{height:92px;width:auto;margin-bottom:1.5rem}
.footer-col p{font-size:14px;line-height:1.7}
.footer-extra h2{font-family:var(--sp-font-heading);font-size:32px;font-weight:400;color:var(--sp-secondary);margin-bottom:1rem}
.footer-extra p{font-size:14px}
.footer-social{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#3b5998;color:#fff;margin-top:1rem}
.footer-social:hover{background:#2d4373;text-decoration:none}
.footer-bottom{background:var(--sp-surface-2);padding:1rem 0}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8a8a8a}
.footer-bottom a{color:#8a8a8a}
.footer-legal{display:flex;gap:1rem}
.footer-heart{color:#cc3366}

/* ---------- detailpagina van een dienst ---------- */
.dienst-grid{display:grid;grid-template-columns:2fr 1fr;gap:2.5rem;align-items:start}
.dienst-inhoud h1{text-align:center}
.dienst-offerte{position:sticky;top:calc(var(--sp-header-h) + var(--sp-adminbar-h,0px) + 20px)}
.dienst-grid .sp-gallery{margin-top:1.5rem}

/* contactgegevens met icoontje, zoals de icon-list van de oude site */
.sp-iconlist{list-style:none;margin:0;padding:0}
.sp-iconlist li{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.6rem}
.sp-iconlist .sp-icon{width:18px;height:18px;flex:none;margin-top:3px;color:var(--sp-primary)}
.sp-iconlist a{color:inherit}
.sp-iconlist a:hover{color:var(--sp-primary)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .site-nav>.sp-menu>li>a{padding:0 12px;font-size:13px}
  .site-logo img{height:70px}
  .header-inner{height:78px}
  :root{--sp-header-h:78px}
}
@media(max-width:900px){
  .menu-btn{display:flex;order:3}
  .site-nav{position:fixed;top:var(--sp-header-h);left:0;right:0;bottom:0;background:#fff;padding:1rem;transform:translateX(100%);transition:.25s;z-index:99;flex-direction:column;align-items:stretch;gap:.5rem;overflow-y:auto}
  .site-nav.is-open{transform:none}
  .site-nav>.sp-menu{flex-direction:column;align-items:stretch}
  .site-nav>.sp-menu>li>a{line-height:2.6;padding:0 .5rem;border-bottom:1px solid #eee}
  .site-nav .sp-menu-sub{position:static;display:block;box-shadow:none;padding-left:1rem}
  .header-cta{text-align:center;margin-top:1rem}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .dienst-grid{grid-template-columns:1fr}
  .dienst-offerte{position:static}
  h1{font-size:30px}
  h2{font-size:26px}
  .footer-bottom-inner{justify-content:center;text-align:center}
}