/*
Theme Name: Smit Electro Consultancy
Theme URI: https://www.smitelectroconsultancy.nl
Author: Ronald Smit
Description: Blokthema voor de website van Smit Electro Consultancy, interim projectleider E&I.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 7.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: smit-electro
*/

:root{--sec-pad:clamp(20px,4vw,40px);--max:1180px;--head:var(--wp--preset--font-family--barlow-semi-condensed);}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{-webkit-font-smoothing:antialiased}
.wp-site-blocks{padding:0}
.wp-site-blocks > *{margin-block-start:0}
.wp-site-blocks p{margin-block:0 1em}
:focus-visible{outline:3px solid var(--wp--preset--color--amber);outline-offset:3px}
img{max-width:100%;height:auto}

/* ---------- header ---------- */
.wp-site-blocks > header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--wp--preset--color--line)}
.admin-bar .wp-site-blocks > header{top:var(--wp-admin--admin-bar--height,32px)}
.site-header{padding-inline:var(--sec-pad)}
.header-inner{max-width:var(--max);margin-inline:auto;min-height:80px;align-items:center;justify-content:space-between;flex-wrap:nowrap}
.header-inner .brand{margin:0;line-height:0}
.header-inner .brand img{height:58px;width:auto;display:block}
.header-inner .wp-block-navigation{--navigation-layout-justification-setting:flex-end}
.header-inner .wp-block-navigation .wp-block-navigation-item__content{font-family:var(--head);font-weight:600;font-size:1.1rem;color:var(--wp--preset--color--navy);padding:10px 14px;border-radius:4px;text-decoration:none}
.header-inner .wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--wp--preset--color--link)}
.header-inner .wp-block-navigation .cta > .wp-block-navigation-item__content{background:var(--wp--preset--color--amber);color:var(--wp--preset--color--navy);margin-left:10px}
.header-inner .wp-block-navigation .cta > .wp-block-navigation-item__content:hover{background:var(--wp--preset--color--yellow);color:var(--wp--preset--color--navy)}
.wp-block-navigation__responsive-container.is-menu-open{background:#fff;color:var(--wp--preset--color--navy);padding:24px var(--sec-pad)}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{font-size:1.4rem;padding:12px 0}
.wp-block-navigation__responsive-container.is-menu-open .cta > .wp-block-navigation-item__content{margin:12px 0 0;padding:14px 22px;display:inline-block}

/* ---------- hero ---------- */
.hero.wp-block-cover{padding:0;min-height:640px;align-items:center;justify-content:flex-start;overflow:hidden}
.hero .wp-block-cover__background{background:linear-gradient(98deg,rgba(9,25,55,.92) 0%,rgba(9,25,55,.7) 38%,rgba(9,25,55,.12) 72%,rgba(9,25,55,0) 100%) !important;opacity:1 !important}
.hero .wp-block-cover__image-background{object-position:62% 12%}
.hero.wp-block-cover > .wp-block-cover__inner-container{box-sizing:border-box;flex:0 0 100%;width:100%;max-width:none;margin:0 !important;padding:clamp(64px,11vw,130px) max(var(--sec-pad),calc((100vw - var(--max))/2)) clamp(110px,16vw,200px);color:#fff}
.hero::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:-1px;height:clamp(50px,8vw,120px);pointer-events:none;
  background:linear-gradient(to top left,var(--wp--preset--color--background) 0,var(--wp--preset--color--background) calc(50% - 2px),var(--wp--preset--color--amber) calc(50% - 2px),var(--wp--preset--color--amber) calc(50% + 2px),transparent calc(50% + 2px))}
.hero h1{font-family:var(--head);font-size:clamp(2.5rem,6.4vw,4.9rem);font-weight:700;line-height:1.05;max-width:17ch;text-wrap:balance;color:#fff;margin:0}
.hero .lead{font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:34em;margin:1.2em 0 0;color:#e3ebf8}
.hero .wp-block-buttons{margin-top:2em;gap:12px}
.wp-block-button__link{font-family:var(--head);font-weight:600;font-size:1.15rem;line-height:1.2;padding:13px 26px;border-radius:4px;text-decoration:none}
.wp-block-button__link:hover{background:var(--wp--preset--color--yellow);color:var(--wp--preset--color--navy)}
.is-style-outline > .wp-block-button__link{background:transparent;border:2px solid rgba(255,255,255,.7);color:#fff;padding:11px 24px}
.is-style-outline > .wp-block-button__link:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- secties ---------- */
.sec{padding:clamp(56px,8vw,104px) var(--sec-pad)}
.sec > *{max-width:var(--max);margin-inline:auto}
.sec.band{background:var(--wp--preset--color--band)}
.section-head{margin-bottom:clamp(28px,4vw,52px)}
.section-head > *{max-width:46rem}
.section-head h2,.about h2{font-family:var(--head);font-size:clamp(2rem,4vw,3.1rem);margin:0}
.section-head p{color:var(--wp--preset--color--muted);margin-top:.9em;font-size:1.15rem}

/* diensten */
.services.wp-block-columns{gap:0;margin-block:0;border-top:1px solid var(--wp--preset--color--line);flex-wrap:nowrap}
.services > .wp-block-column{padding:28px clamp(0px,2.4vw,32px) 8px 0}
.services > .wp-block-column + .wp-block-column{border-left:1px solid var(--wp--preset--color--line);padding-left:clamp(0px,2.4vw,32px)}
.services h3{font-family:var(--head);font-size:1.6rem;margin:0 0 .5em}
.services p{color:var(--wp--preset--color--muted)}
.expertise{margin-top:clamp(28px,4vw,44px);padding-top:22px;border-top:1px solid var(--wp--preset--color--line);color:var(--wp--preset--color--muted);font-size:1rem}
.expertise .expertise-title{font-family:var(--head);font-weight:600;font-size:1.15rem;color:var(--wp--preset--color--navy);margin:0 0 .3em}
@media (max-width:781px){
  .services.wp-block-columns{flex-wrap:wrap}
  .services > .wp-block-column,.services > .wp-block-column + .wp-block-column{border-left:0;padding:24px 0 8px;border-bottom:1px solid var(--wp--preset--color--line)}
}

/* werkwijze */
.steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:linear-gradient(90deg,var(--wp--preset--color--blue),var(--wp--preset--color--sky))}
.step{position:relative;padding:58px 24px 0 0}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:var(--wp--preset--color--navy);color:#fff;font-family:var(--head);font-weight:700;font-size:1.2rem;display:grid;place-items:center;border:3px solid var(--wp--preset--color--band);box-sizing:border-box}
.step h3{font-family:var(--head);font-size:1.45rem;margin:0 0 .45em}
.step p{color:var(--wp--preset--color--muted);font-size:1rem;margin:0}
@media (max-width:860px){
  .steps{grid-template-columns:1fr;gap:28px}
  .steps::before{left:19px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--wp--preset--color--blue),var(--wp--preset--color--sky))}
  .step{padding:0 0 0 62px}
}

/* projecten */
.project.wp-block-columns{gap:clamp(28px,5vw,64px);align-items:center;margin-block:0 clamp(56px,8vw,104px)}
.project.wp-block-columns:last-child{margin-bottom:0}
@media (min-width:782px){.project.rev.wp-block-columns{flex-direction:row-reverse}}
.project .wp-block-column{flex-basis:0;flex-grow:1}
.project h3{font-family:var(--head);font-size:clamp(1.8rem,3.2vw,2.6rem);margin:0 0 .5em}
.facts{margin:0 0 1.4em;padding:14px 0;border-block:1px solid var(--wp--preset--color--line);font-size:.98rem}
.facts p{display:grid;grid-template-columns:6rem 1fr;gap:0 18px;margin:0 0 4px;font-weight:500}
.facts p:last-child{margin:0}
.facts p strong{font-weight:400;color:var(--wp--preset--color--muted)}
.mosaic{display:grid;gap:10px}
.mosaic figure{margin:0;position:relative;overflow:hidden;background:var(--wp--preset--color--navy);border-radius:3px}
.mosaic figure img{width:100%;height:100%;object-fit:cover;display:block}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:26px 12px 9px;font-size:.85rem;line-height:1.3;color:#fff;text-align:left;background:linear-gradient(0deg,rgba(9,25,55,.82),rgba(9,25,55,0))}
.m-afs{grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr}
.m-afs figure:first-child{grid-row:1 / span 2}
.m-afs figure{min-height:170px}
.m-vla{grid-template-columns:1fr 1fr}
.m-vla figure{aspect-ratio:3/4}
.m-tun{grid-template-columns:1fr;position:relative}
.m-tun figure:first-child{aspect-ratio:4/3}
.m-tun figure:nth-child(2){position:absolute;right:14px;bottom:14px;width:34%;aspect-ratio:4/3;border:3px solid var(--wp--preset--color--background)}
.m-tun figure:nth-child(2) figcaption{display:none}
@media (max-width:781px){.m-vla{max-width:520px}}

/* over mij */
.about.wp-block-columns{gap:clamp(32px,6vw,80px);align-items:flex-start;margin-block:0}
.about .wp-block-column:first-child{flex-basis:0;flex-grow:.8}
.about .wp-block-column:last-child{flex-basis:0;flex-grow:1.2}
.portrait{position:relative;margin:0}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;position:relative;z-index:1;display:block}
.portrait::before{content:"";position:absolute;z-index:0;right:-16px;bottom:-16px;width:62%;height:62%;background:linear-gradient(135deg,var(--wp--preset--color--sky),var(--wp--preset--color--blue));clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.9}
.portrait::after{content:"";position:absolute;z-index:2;left:0;bottom:0;width:6px;height:34%;background:var(--wp--preset--color--amber)}
.about h2{margin-bottom:.6em}
.about p{max-width:36rem}
.about .pull{font-family:var(--head);font-size:1.55rem;line-height:1.25;font-weight:500;border-left:4px solid var(--wp--preset--color--amber);padding-left:18px;margin:1.4em 0;max-width:30rem}
@media (max-width:781px){.portrait{max-width:420px}}

/* contact */
.contact.sec{background:var(--wp--preset--color--navy);color:#fff}
.contact .wp-block-columns{gap:clamp(32px,6vw,80px);align-items:center;margin-block:0}
.contact h2{font-family:var(--head);font-size:clamp(2rem,4.4vw,3.4rem);margin:0 0 .5em;max-width:16ch;color:#fff}
.contact p{color:#cfdbef;font-size:1.15rem;max-width:30rem}
.c-list{display:grid;gap:18px}
.c-item{padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.18)}
.c-item:last-child{border:0}
.c-item p{margin:0}
.c-item .c-label{font-size:.95rem;color:#9fb3d6;margin-bottom:2px}
.c-item .c-value,.c-item .c-value a{font-family:var(--head);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;color:#fff;text-decoration:none;overflow-wrap:anywhere}
.c-item .c-value a:hover{color:var(--wp--preset--color--yellow)}

/* footer */
.site-footer{background:#0a1a36;color:#9fb3d6;padding:32px var(--sec-pad);font-size:.92rem}
.site-footer .footer-inner{max-width:var(--max);margin-inline:auto;align-items:center;justify-content:space-between;gap:20px 40px}
.site-footer img{height:64px;width:auto}
.site-footer p{margin:0;color:#9fb3d6}
.site-footer a{color:#cfdbef}
.site-footer a:hover{color:var(--wp--preset--color--yellow)}

/* gewone pagina's */
.page-wrap{padding:clamp(40px,6vw,80px) var(--sec-pad)}
.page-wrap .wp-block-post-title{font-family:var(--head);font-size:clamp(2rem,4vw,3rem);margin-bottom:.8em}

/* mobiel menu (overlay) */
.wp-block-navigation__responsive-container.is-menu-open{padding:0 !important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{padding:76px var(--sec-pad) 32px;align-items:flex-start;justify-content:flex-start}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container{align-items:flex-start;width:100%;gap:0}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%;border-bottom:1px solid var(--wp--preset--color--line)}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.cta{border-bottom:0;margin-top:18px}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{display:block;padding:14px 0}
.wp-block-navigation__responsive-container.is-menu-open .cta > .wp-block-navigation-item__content{text-align:center;padding:14px 22px;margin:0}
.wp-block-navigation__responsive-container-close{top:calc(var(--sec-pad) / 2 + 12px);right:var(--sec-pad)}
.header-inner .wp-block-navigation__responsive-container.is-menu-open{--navigation-layout-justification-setting:flex-start;--navigation-layout-justify:flex-start;--navigation-layout-align:flex-start}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{justify-content:flex-start !important;text-align:left !important}
.wp-block-navigation__responsive-container.is-menu-open .cta > .wp-block-navigation-item__content{text-align:center !important;justify-content:center !important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{align-items:stretch !important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{width:100%;box-sizing:border-box}

/* hero eyebrow */
.hero .eyebrow{font-family:var(--head);font-weight:600;font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--yellow);margin:0 0 .9em;display:flex;align-items:center;gap:12px}
.hero .eyebrow::before{content:"";width:34px;height:3px;background:var(--wp--preset--color--amber)}

/* waar ik thuis ben */
.domains{margin-top:clamp(32px,5vw,56px);padding-top:28px;border-top:1px solid var(--wp--preset--color--line)}
.domains-title{font-family:var(--head);font-size:1.6rem;margin:0 0 .8em}
.domains-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.domain .dom-title{font-family:var(--head);font-weight:600;font-size:1.2rem;line-height:1.2;margin:0 0 .4em;color:var(--wp--preset--color--navy);padding-left:14px;border-left:4px solid var(--wp--preset--color--amber)}
.domain p{font-size:1rem;color:var(--wp--preset--color--muted);margin:0}
@media (max-width:1000px){.domains-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.domains-grid{grid-template-columns:1fr}}
@media (min-width:1001px){.domain .dom-title{min-height:2.45em}}