/*
Theme Name: De Websmith
Theme URI: https://dewebsmith.nl
Description: Hand-built child theme for De Websmith. Refined-craft design: charcoal, warm off-white, ember. Self-hosted Space Grotesk + Inter. Built on GeneratePress.
Author: Bram van Gaalen
Template: generatepress
Version: 1.0.0
Text Domain: dewebsmith
*/

:root{
  --charcoal:#1A1A1A;
  --offwhite:#F5F1EA;
  --cream:#EFE9DF;
  --ember:#C2410C;
  --ember-head:#D4541E;
  --ember-dark:#9A330A;
  --ember-on-dark:#EC6A33;
  --grey:#6B655C;
  --line:rgba(26,26,26,.12);
  --line-dark:rgba(245,241,234,.14);
  --card-dark:#242120;
  --maxw:1120px;
  --gap:clamp(1rem,3vw,1.75rem);
  --section-y:clamp(3.5rem,8vw,6.5rem);
  --radius:14px;
  --font-head:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;}
body{background:var(--offwhite);color:var(--charcoal);font-family:var(--font-body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:700;line-height:1.08;color:var(--charcoal);letter-spacing:-.02em;}
p{margin:0 0 1rem;}
a{color:var(--ember);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
img{max-width:100%;height:auto;}
strong{font-weight:600;}

/* ---------- Focus (WCAG) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.dws-btn:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:4px;}
.dws-dark a:focus-visible,.dws-dark button:focus-visible,.dws-dark input:focus-visible,.dws-dark textarea:focus-visible,.dws-dark .dws-btn:focus-visible{outline-color:var(--offwhite);}

/* ---------- Layout helpers ---------- */
.dws-full{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.dws-inner{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2rem);}
.dws-section{padding-block:var(--section-y);}
.dws-dark{background:var(--charcoal);color:var(--offwhite);}
.dws-dark h1,.dws-dark h2,.dws-dark h3,.dws-dark h4,.dws-dark h5{color:var(--offwhite);}
.dws-cream{background:var(--cream);}
.dws-stack>*+*{margin-top:1.1rem;}

/* ---------- GeneratePress page resets ---------- */
.page .inside-article{padding:0;border:0;}
.page .entry-content{margin-top:0;}
.page article.post,.page .inside-article{background:transparent;box-shadow:none;}
.page .site-content .content-area{padding:0;}
.entry-content>.dws-full:first-child{margin-top:0;}

/* ---------- Header / Nav ---------- */
.site-header{background:var(--offwhite);border-bottom:1px solid var(--line);}
.main-title,.site-title{font-family:var(--font-head);font-weight:700;letter-spacing:-.02em;}
.main-title a,.site-title a{color:var(--charcoal);}
.main-navigation a{font-family:var(--font-body);font-weight:500;color:var(--charcoal);}
.main-navigation .main-nav ul li a:hover,.main-navigation .main-nav ul li.current-menu-item>a,.main-navigation .main-nav ul li.current-menu-item>a:hover{color:var(--ember);background:transparent;}
.main-navigation{background:transparent;}
button.menu-toggle{font-family:var(--font-body);}

/* ---------- Buttons ---------- */
.dws-btn{display:inline-flex;align-items:center;gap:.5em;background:var(--ember);color:#fff;font-family:var(--font-body);font-weight:600;font-size:1.05rem;padding:.9em 1.65em;border-radius:8px;line-height:1.1;transition:background .2s ease,transform .2s ease;text-decoration:none;border:0;cursor:pointer;}
.dws-btn:hover{background:var(--ember-dark);color:#fff;text-decoration:none;transform:translateY(-1px);}
.dws-btn-secondary{display:inline-flex;align-items:center;gap:.4em;color:inherit;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;border-radius:0;}
.dws-btn-secondary:hover{text-decoration:none;color:var(--ember);}
.dws-dark .dws-btn-secondary{color:rgba(245,241,234,.88);}
.dws-dark .dws-btn-secondary:hover{color:#fff;}
.dws-cta-row{display:flex;flex-wrap:wrap;gap:1.5rem 1.75rem;align-items:center;margin-top:2.25rem;}

/* ---------- Typography blocks ---------- */
.dws-eyebrow{font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ember);margin:0 0 1rem;display:block;}
.dws-dark .dws-eyebrow{color:var(--ember-on-dark);}
.dws-h2{font-size:clamp(2rem,5vw,3.25rem);max-width:20ch;line-height:1.02;margin:0 0 1.25rem;}
.dws-lead{font-size:1.2rem;color:var(--grey);max-width:62ch;}
.dws-dark .dws-lead{color:rgba(245,241,234,.82);}

/* ---------- Hero ---------- */
.dws-hero{background:radial-gradient(circle at 82% -10%,rgba(212,84,30,.20),transparent 55%),var(--charcoal);padding-block:clamp(4.5rem,12vw,8.5rem);}
.dws-hero h1{font-size:clamp(2.9rem,8.6vw,6rem);line-height:.98;max-width:15ch;margin:0;color:var(--offwhite);}
.dws-hero h1 .dws-accent{color:var(--ember-head);}
.dws-hero .dws-sub{font-size:clamp(1.15rem,2.4vw,1.45rem);color:rgba(245,241,234,.84);max-width:50ch;margin-top:1.6rem;}

/* ---------- Zorg ---------- */
.dws-zorg{display:grid;gap:1.4rem;counter-reset:none;}
.dws-zorg p{font-family:var(--font-head);font-weight:500;font-size:clamp(1.3rem,3.2vw,2rem);line-height:1.22;max-width:26ch;margin:0;color:var(--charcoal);letter-spacing:-.01em;}
.dws-zorg p.dws-resolve{color:var(--ember);}

/* ---------- Bento / cards ---------- */
.dws-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.dws-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem);}
.dws-card .dws-card-k{font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);display:block;margin-bottom:.9rem;}
.dws-card h3{font-size:1.55rem;margin:0 0 .6rem;}
.dws-card p{margin:0;color:var(--grey);font-size:1.02rem;}
.dws-dark .dws-card{background:var(--card-dark);border-color:var(--line-dark);}
.dws-dark .dws-card h3{color:var(--offwhite);}
.dws-dark .dws-card p{color:rgba(245,241,234,.8);}
.dws-dark .dws-card .dws-card-k{color:var(--ember-on-dark);}

/* ---------- Steps ---------- */
.dws-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
.dws-step .dws-num{font-family:var(--font-head);font-weight:700;font-size:2.4rem;color:var(--ember);line-height:1;display:block;margin-bottom:.7rem;}
.dws-step h3{font-size:1.2rem;margin:0 0 .5rem;}
.dws-step p{color:var(--grey);margin:0;font-size:1rem;}
.dws-dark .dws-step p{color:rgba(245,241,234,.78);}
.dws-dark .dws-step .dws-num{color:var(--ember-on-dark);}

/* ---------- Pricing ---------- */
.dws-price-anchor{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1.25rem;padding:clamp(1.5rem,3vw,2rem) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:1.5rem 0 2.5rem;}
.dws-price-anchor .amt{font-family:var(--font-head);font-weight:700;font-size:clamp(2.4rem,6vw,3.4rem);color:var(--charcoal);line-height:1;}
.dws-price-anchor .lbl{font-size:1.05rem;color:var(--grey);}
.dws-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
table.dws-table{width:100%;border-collapse:collapse;font-size:1rem;min-width:620px;margin:0;}
table.dws-table th,table.dws-table td{padding:.95rem 1.15rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;}
table.dws-table thead th{font-family:var(--font-head);font-size:1.2rem;color:var(--charcoal);border-bottom:2px solid var(--charcoal);}
table.dws-table thead th .pr{display:block;font-family:var(--font-body);font-weight:500;font-size:.95rem;color:var(--grey);margin-top:.2rem;}
table.dws-table tbody th{font-weight:500;color:var(--charcoal);}
table.dws-table tbody tr:last-child td,table.dws-table tbody tr:last-child th{border-bottom:0;}
table.dws-table .yes{color:var(--ember);font-weight:700;}
table.dws-table .no{color:var(--grey);}
table.dws-table td{color:var(--grey);}

/* ---------- About ---------- */
.dws-about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;}
.dws-about .dws-figure{margin:0;}
.dws-about .dws-figure img,.dws-about .dws-photo{display:block;width:100%;border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover;}
.dws-about .dws-photo{background:linear-gradient(160deg,#2a2724,#171513);color:rgba(245,241,234,.7);display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;font-size:.95rem;border:1px solid var(--line-dark);}
.dws-about h2{margin-top:0;}
.dws-about p{color:var(--grey);font-size:1.12rem;}
.dws-dark .dws-about p{color:rgba(245,241,234,.82);}

/* ---------- Contact form (Fluent Forms) ---------- */
.dws-formwrap{max-width:620px;}
.dws-dark .fluentform .ff-el-input--label label,.dws-dark .fluentform label{color:var(--offwhite);font-family:var(--font-body);font-weight:500;}
.dws-dark .fluentform input[type=text],.dws-dark .fluentform input[type=email],.dws-dark .fluentform textarea{background:#222020;border:1px solid var(--line-dark);color:var(--offwhite);border-radius:8px;font-family:var(--font-body);font-size:1.05rem;padding:.8rem 1rem;width:100%;}
.dws-dark .fluentform input::placeholder,.dws-dark .fluentform textarea::placeholder{color:rgba(245,241,234,.5);}
.dws-dark .fluentform .ff-el-input--content input:focus,.dws-dark .fluentform textarea:focus{outline:3px solid var(--offwhite);outline-offset:2px;}
.fluentform .ff-btn-submit,.dws-dark .fluentform .ff-btn-submit{background:var(--ember)!important;color:#fff!important;font-family:var(--font-body);font-weight:600;font-size:1.05rem;padding:.9em 1.7em;border-radius:8px;border:0;transition:background .2s ease;}
.fluentform .ff-btn-submit:hover{background:var(--ember-dark)!important;}
.dws-contact-meta{font-size:1.05rem;}
.dws-contact-meta a{color:var(--ember-on-dark);}
.dws-fineprint{font-size:.9rem;color:rgba(245,241,234,.62);margin-top:1rem;}

/* ---------- Footer ---------- */
.site-info{background:var(--charcoal);color:var(--offwhite);padding:0;}
.dws-footer{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;max-width:var(--maxw);margin-inline:auto;padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,2rem) 1.5rem;}
.dws-footer .dws-wordmark{font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:var(--offwhite);margin-bottom:.6rem;}
.dws-footer p,.dws-footer a{color:rgba(245,241,234,.8);font-size:.98rem;}
.dws-footer a:hover{color:#fff;}
.dws-footer h4{font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ember-on-dark);margin:0 0 .8rem;}
.dws-footer ul{list-style:none;margin:0;padding:0;}
.dws-footer ul li{margin-bottom:.5rem;}
.dws-footer-bottom{border-top:1px solid var(--line-dark);max-width:var(--maxw);margin-inline:auto;padding:1.25rem clamp(1.25rem,5vw,2rem);font-size:.88rem;color:rgba(245,241,234,.55);}

/* ---------- 404 ---------- */
.dws-404{text-align:center;padding-block:clamp(4rem,10vw,7rem);}
.dws-404 .code{font-family:var(--font-head);font-weight:700;font-size:clamp(4rem,16vw,9rem);color:var(--ember);line-height:1;}

/* ---------- Motion ---------- */
.dws-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.dws-reveal.dws-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.dws-reveal{opacity:1!important;transform:none!important;transition:none;}html{scroll-behavior:auto;}}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .dws-bento{grid-template-columns:1fr;}
  .dws-steps{grid-template-columns:1fr 1fr;}
  .dws-about{grid-template-columns:1fr;}
  .dws-footer{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .dws-steps{grid-template-columns:1fr;}
  .dws-footer{grid-template-columns:1fr;}
  .dws-cta-row{gap:1.1rem;}
}

/* ---------- Contact meta labels ---------- */
.dws-contact-meta strong{display:block;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ember-on-dark);margin-bottom:.2rem;font-weight:600;font-family:var(--font-body);}
.dws-contact-meta p{margin-bottom:1.3rem;}
.dws-contact-meta a{font-size:1.15rem;}
.fluentform .ff-message-success{color:var(--offwhite);font-weight:500;}
.dws-dark .fluentform .ff-el-is-error .text-danger,.dws-dark .fluentform .error{color:#ffb59a;}

/* ---------- Sub-page hero + prose ---------- */
.dws-pagehero{background:radial-gradient(circle at 85% -20%,rgba(212,84,30,.16),transparent 55%),var(--charcoal);padding-block:clamp(3.5rem,8vw,6rem);}
.dws-pagehero h1{font-size:clamp(2.4rem,6vw,4rem);color:var(--offwhite);max-width:20ch;margin:0;}
.dws-pagehero .dws-sub{color:rgba(245,241,234,.84);font-size:clamp(1.1rem,2.2vw,1.35rem);max-width:54ch;margin-top:1.2rem;}
.dws-prose p{max-width:66ch;margin-bottom:1.1rem;color:var(--grey);font-size:1.12rem;}
.dws-dark .dws-prose p{color:rgba(245,241,234,.82);}
.dws-prose h2{margin-bottom:1rem;}
.dws-anchor-row{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:baseline;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);}
.dws-anchor-row .amt{font-family:var(--font-head);font-weight:700;font-size:1.7rem;color:var(--ember);}
.dws-anchor-row .lbl{color:var(--grey);}
.dws-dark .dws-anchor-row{border-color:var(--line-dark);}