/* ============================================================
   Homepage layout (ontwerp "Homepage Drukwerk") — LAYOUT ONLY.
   Kleuren en fonts komen uit het actieve thema via de
   --wp--preset--* variabelen; geen eigen palet of webfonts.
   ============================================================ */
:root{
  --dw-paper:var(--wp--preset--color--base-2,#fff);
  --dw-dark:var(--wp--preset--color--contrast,#111);
  --dw-dark-ink:var(--wp--preset--color--base,#f9f9f9);
  --dw-accent:var(--wp--preset--color--accent-3,currentColor);
  --dw-mut:var(--wp--preset--color--contrast-2,#636363);
  --dw-line:color-mix(in srgb, var(--wp--preset--color--contrast,#111) 12%, transparent);
}
/* Sectie-zijpadding: zelfde geometrie als het thema's alignwide (header/
   footer-inhoud): minimaal de root-padding, en gecentreerd op wide-size.
   Op body gedeclareerd — de --wp--style--root--padding-* variabelen bestaan
   alleen daar, en var()-substitutie gebeurt in de declaratie-scope. */
body{
  --dw-rp:var(--wp--style--root--padding-left, 32px);
  /* rootpadding + de helft van wat er naast de wide-size overblijft. Let op:
     100% is hier het containing block van de alignfull-secties = de al-gepadde
     content-container (viewport - 2x rootpadding) — alignfull rekt alleen
     visueel op via negatieve marges. Zo landt de inhoud exact op de
     alignwide-lijn van header en footer. */
  --dw-pad:calc(var(--dw-rp) + max(0px, (100% - var(--wp--style--global--wide-size, 1280px)) / 2));
}

/* typografie: alleen hiërarchie (maat/gewicht), families blijven van het thema */
.dw-h1{font-size:clamp(38px,5vw,60px);line-height:1.05;margin:0 0 20px;text-wrap:balance;}
.dw-h2{font-size:clamp(28px,3.2vw,36px);margin:10px 0 0;}
.dw-mono{font-size:11.5px;letter-spacing:0.06em;}
.dw-eyebrow{text-transform:uppercase;letter-spacing:0.08em;color:var(--dw-mut);margin:0;}
.dw-eyebrow-warm{color:inherit;opacity:0.75;}
.dw-lede{font-size:19px;line-height:1.55;opacity:0.8;max-width:52ch;margin:0 0 28px;text-wrap:pretty;}
.dw-lede-dark{font-size:17px;line-height:1.55;opacity:0.85;max-width:46ch;margin:0 0 26px;}

/* knoppen: themastijl blijft; alleen varianten die de layout nodig heeft */
.dw-btn-ghost .wp-block-button__link,
.dw-btn-ghostdark .wp-block-button__link{background:transparent;border:1px solid color-mix(in srgb, currentColor 35%, transparent);color:inherit;}
.dw-btn-wide{width:100%;} .dw-btn-wide .wp-block-button__link{width:100%;text-align:center;}
/* op donkere vlakken: standaard themaknop (contrast op contrast) omkeren */
.dw-dark .dw-btn .wp-block-button__link,
.dw-ctabanner .dw-btn .wp-block-button__link{background:var(--dw-paper);color:var(--dw-dark);}
.dw-textlink a{font-size:14.5px;border-bottom:1px solid color-mix(in srgb, currentColor 30%, transparent);text-decoration:none;}
.dw-more a{font-size:15px;font-weight:600;text-decoration:none;}

/* usp-balk */
.dw-uspbar{background:var(--dw-dark);color:var(--dw-dark-ink);display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;padding:10px var(--dw-pad);margin-block:0!important;}
.dw-uspbar .dw-usp{margin:0;font-size:12px;letter-spacing:0.02em;display:flex;align-items:center;gap:8px;}
.dw-uspbar .dw-usp:not(.dw-usp-right)::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dw-accent);display:inline-block;}
.dw-usp-right{margin-left:auto!important;opacity:0.85;}

/* secties */
.dw-section{padding:80px var(--dw-pad);margin-block:0!important;}
.dw-secthead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;}
.dw-secthead .dw-more{margin:0;}
.dw-dark{background:var(--dw-dark);color:var(--dw-dark-ink);}
.dw-dark .dw-h2{color:var(--dw-dark-ink);}

/* hero */
.dw-hero{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;padding:64px var(--dw-pad);margin-block:0!important;}
.dw-pill{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--dw-mut);border:1px solid var(--dw-line);border-radius:999px;padding:6px 12px;margin:0 0 24px;}
.dw-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--dw-accent);}
.dw-configurator{background:var(--dw-paper);border:1px solid var(--dw-line);border-radius:16px;padding:24px;box-shadow:0 24px 48px -32px color-mix(in srgb, var(--dw-dark) 35%, transparent);}
.dw-configurator-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px;}
.dw-configurator-title{font-weight:700;font-size:16px;margin:0;}
.dw-configurator-step{color:var(--dw-mut);font-size:11px;margin:0;}
.dw-configurator-note{font-size:14.5px;color:var(--dw-mut);margin:0 0 16px;}
.dw-configurator .wp-block-buttons{margin-bottom:12px;}
.dw-checks{display:flex;flex-wrap:wrap;gap:8px 24px;margin:28px 0 0;font-size:14px;color:var(--dw-mut);}
.dw-hero-media{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.dw-hm{border-radius:14px;overflow:hidden;border:1px solid var(--dw-line);}
.dw-hm-wide{grid-column:span 2;}
.dw-hm .dw-img{margin:0;} .dw-hm img{display:block;width:100%;height:200px;object-fit:cover;}
.dw-hm-wide img{height:220px;}

/* kaarten & grids */
.dw-card{background:var(--dw-paper);border:1px solid var(--dw-line);border-radius:14px;overflow:hidden;transition:border-color .15s ease;}
.dw-card:hover{border-color:var(--dw-accent);}
.dw-card-body{padding:18px 20px 20px;}
.dw-card-title{font-size:18px;font-weight:700;margin:0;}
.dw-card-title a{color:inherit;}
.dw-card-title a:hover{color:var(--dw-accent);}
.dw-card-sub{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--dw-mut);}
.dw-variant{color:var(--dw-mut);font-size:11px;margin:0 0 36px;}
.dw-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.dw-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.dw-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}

/* assortiment-mozaïek */
.dw-assort{padding-top:32px;}
.dw-asrt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.dw-card-big{grid-row:span 2;display:flex;flex-direction:column;}
.dw-card-big .dw-img{margin:0;flex:1;} .dw-card-big img{display:block;width:100%;height:100%;min-height:220px;object-fit:cover;}
.dw-card-cat{display:flex;flex-direction:column;justify-content:space-between;padding:20px;min-height:140px;}
.dw-card-cat .dw-card-title{margin:0;}
.dw-card-dark{background:var(--dw-dark);border-color:var(--dw-dark);}
.dw-card-dark .dw-card-title a{color:var(--dw-dark-ink);}
.dw-card-dark .dw-variant{color:color-mix(in srgb, var(--dw-dark-ink) 80%, transparent);}
.dw-card-dark:hover{background:color-mix(in srgb, var(--dw-dark) 90%, var(--dw-paper));}

/* werkwijze */
.dw-werkwijze{padding:88px var(--dw-pad);}
.dw-werkwijze-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:64px;align-items:start;}
.dw-steps{display:grid;gap:14px;}
.dw-step{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;padding:24px;border:1px solid color-mix(in srgb, var(--dw-dark-ink) 18%, transparent);border-radius:14px;background:color-mix(in srgb, var(--dw-dark) 92%, var(--dw-paper));}
.dw-step-nr{font-size:22px;color:var(--dw-accent);margin:0;}
.dw-step-title{font-weight:700;font-size:19px;margin:0;color:var(--dw-dark-ink);}
.dw-step-text{margin:6px 0 0;font-size:15px;line-height:1.55;color:color-mix(in srgb, var(--dw-dark-ink) 85%, transparent);}

/* bestsellers */
.dw-seller .dw-img{margin:0;} .dw-seller img{display:block;width:100%;height:170px;object-fit:cover;}
.dw-seller .dw-variant{margin-bottom:10px;}
.dw-seller .dw-card-title{font-size:17px;}
.dw-seller .dw-more{margin:10px 0 0;} .dw-seller .dw-more a{font-size:14.5px;}

/* zakelijk */
.dw-zakelijk{background:color-mix(in srgb, var(--dw-dark) 4%, var(--dw-paper));border-top:1px solid var(--dw-line);border-bottom:1px solid var(--dw-line);}
.dw-zakelijk-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.dw-feature{padding:20px;}
.dw-feature-title{font-weight:700;font-size:16px;margin:0;}

/* reviews */
.dw-review{padding:24px;}
.dw-stars{color:var(--dw-accent);font-size:15px;letter-spacing:0.1em;margin:0;}
.dw-quote{margin:14px 0 18px;font-size:17px;line-height:1.5;}
.dw-who{color:var(--dw-mut);margin:0;}

/* inspiratie */
.dw-inspiratie{padding-top:0;}
.dw-ph{height:150px;display:flex;align-items:center;justify-content:center;}
.dw-ph-warm{background:repeating-linear-gradient(115deg, color-mix(in srgb, var(--wp--preset--color--accent-2,#c2a990) 35%, var(--dw-paper)) 0 10px, var(--dw-paper) 10px 20px);}
.dw-ph-blue{background:repeating-linear-gradient(115deg, color-mix(in srgb, var(--wp--preset--color--accent-5,#b5bdbc) 45%, var(--dw-paper)) 0 10px, var(--dw-paper) 10px 20px);}
.dw-ph-accent{background:repeating-linear-gradient(115deg, color-mix(in srgb, var(--dw-accent) 25%, var(--dw-paper)) 0 10px, var(--dw-paper) 10px 20px);}
.dw-ph-label{margin:0;}
.dw-article .dw-variant{margin-bottom:8px;}
.dw-article .dw-card-title{font-size:17.5px;line-height:1.35;}

/* cta-banner */
.dw-ctawrap{padding-top:0;}
.dw-ctabanner{background:var(--dw-dark);border-radius:20px;padding:56px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;color:var(--dw-dark-ink);}
.dw-ctabanner .dw-h2{margin:0 0 14px;color:var(--dw-dark-ink);}
.dw-cta-actions{display:flex;flex-direction:column;gap:12px;}
.dw-cta-actions .wp-block-buttons{flex-direction:column;display:flex;gap:12px;}
.dw-hours{color:color-mix(in srgb, var(--dw-dark-ink) 75%, transparent);text-align:center;margin:0;}

/* inspiratie-kaarten met echte foto's */
.dw-article .dw-img{margin:0;}
.dw-article img{display:block;width:100%;height:150px;object-fit:cover;}

/* subpagina's (kennisbank, over ons, contact) */
.dw-pagehero{padding:48px var(--dw-pad) 8px;margin-block:0!important;}
.dw-pagehero .dw-h1{font-size:clamp(30px,4vw,46px);}
.dw-pagehero .dw-lede{margin-bottom:8px;}
.dw-pageimg{padding:16px var(--dw-pad) 8px;margin-block:0!important;}
.dw-pageimg .dw-img{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--dw-line);}
.dw-pageimg img{display:block;width:100%;height:min(380px,42vw);object-fit:cover;}
.dw-bodytext{padding:16px var(--dw-pad) 40px;margin-block:0!important;}
.dw-bodytext > p,.dw-bodytext > ul,.dw-bodytext > h2,.dw-bodytext > h3{max-width:60ch;}
.dw-bodytext > h2{font-size:24px;margin:28px 0 6px;}
.dw-bodytext li{margin-bottom:6px;}
.dw-kbgrid,.dw-values,.dw-contactgrid{padding-top:40px;padding-bottom:40px;}

/* pagina-titel verbergen: elke dw-pagina voert zijn eigen kop */
.home h1.wp-block-post-title,
.page h1.wp-block-post-title:has(+ * .dw-pagehero),
body:has(.dw-pagehero) h1.wp-block-post-title{display:none;}
/* …en de spacers die Twenty Twenty-Four om die titel heen zet ook, anders
   blijft er een leeg gat van ±150px boven de hero staan. */
body:has(.dw-pagehero) .wp-block-group:has(> h1.wp-block-post-title) > .wp-block-spacer{display:none;}

/* responsive */
@media (max-width:1024px){
  .dw-hero,.dw-werkwijze-grid,.dw-zakelijk-grid,.dw-ctabanner{grid-template-columns:1fr;gap:40px;}
  .dw-grid4,.dw-asrt-grid{grid-template-columns:repeat(2,1fr);}
  .dw-grid3{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .dw-grid4,.dw-asrt-grid,.dw-grid2{grid-template-columns:1fr;}
  .dw-section{padding-top:56px;padding-bottom:56px;}
  .dw-secthead{flex-direction:column;align-items:flex-start;}
}