/*
Theme Name: Handige Harrie
Author: Handige Harrie
Description: Website voor computerhulp, internet, tv en kleine klusjes aan huis.
Version: 1.0
Requires at least: 6.0
Text Domain: handige-harrie
*/
:root{--navy:#142c43;--blue:#1687ad;--yellow:#ffc857;--cream:#f7f8f5;--ink:#213547}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:17px/1.65 system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#fff}a{color:var(--blue)}.wrap{max-width:1150px;margin:auto;padding:0 24px}.site-header{background:#fff;box-shadow:0 2px 14px #142c4313;position:sticky;top:0;z-index:10}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}.brand{font-weight:900;font-size:24px;text-decoration:none;color:var(--navy);letter-spacing:-.04em}.brand span{color:var(--blue)}.nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.nav a{text-decoration:none;color:var(--navy);font-weight:650}.nav a:hover{color:var(--blue)}.btn{display:inline-block;padding:13px 22px;border-radius:10px;background:var(--yellow);color:var(--navy);font-weight:800;text-decoration:none;border:0}.btn:hover{filter:brightness(.96)}.btn.blue{background:var(--blue);color:white}.hero{background:linear-gradient(125deg,#102a42,#166b8c);color:white;padding:95px 0}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:55px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:800;color:var(--yellow)}h1,h2,h3{line-height:1.16;letter-spacing:-.035em;color:var(--navy)}h1{font-size:clamp(42px,5vw,70px);color:white;margin:14px 0 22px}h2{font-size:clamp(30px,3vw,43px);margin:0 0 18px}h3{font-size:23px}.hero p{font-size:21px;max-width:670px}.hero-visual{background:#ffffff17;border:1px solid #ffffff44;border-radius:26px;padding:32px;box-shadow:0 20px 50px #0002}.hero-visual strong{display:block;font-size:26px}.hero-visual ul{padding-left:22px}.hero-visual li{margin:9px 0}.section{padding:85px 0}.light{background:var(--cream)}.intro{max-width:740px;margin:0 0 35px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.card{background:white;border:1px solid #dce4e7;border-radius:18px;padding:30px;box-shadow:0 8px 28px #142c4308}.card .icon{font-size:40px}.card ul{padding-left:22px}.card li{margin:5px 0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.step{border-left:4px solid var(--yellow);padding:5px 20px}.step b{display:block;color:var(--blue);font-size:28px}.cta{background:var(--navy);color:white;border-radius:24px;padding:45px}.cta h2{color:white}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.footer{background:#0d2234;color:#dbe6ea;padding:35px 0}.footer a{color:white}.page-title{padding:65px 0;background:var(--cream)}.content{padding:55px 0;max-width:850px}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;background:white;padding:10px;z-index:100}.wp-block-image img{max-width:100%;height:auto}@media(max-width:750px){.header-inner{align-items:flex-start;flex-direction:column;padding-top:15px;padding-bottom:15px}.nav{gap:13px;font-size:14px}.hero{padding:65px 0}.hero-grid,.grid,.steps,.contact-grid{grid-template-columns:1fr}.section{padding:60px 0}.hero-visual{padding:22px}.cta{padding:28px}}

.hero{background:linear-gradient(90deg,rgba(16,42,66,.96),rgba(16,42,66,.77) 49%,rgba(16,42,66,.04) 78%),url(omslag.png) center/cover no-repeat}.hero-visual{backdrop-filter:blur(8px)}@media(max-width:750px){.hero{background:linear-gradient(90deg,rgba(16,42,66,.91),rgba(16,42,66,.75)),url(omslag.png) 65% center/cover no-repeat}}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card{border-radius:16px;overflow:hidden;background:white;border:1px solid #dce4e7;box-shadow:0 8px 25px #142c430d}.service-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}.service-card>div{padding:20px}.service-card h3{font-size:21px;margin:0 0 8px}.service-card p{margin:0}@media(max-width:850px){.service-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:570px){.service-grid{grid-template-columns:1fr}}

:root{--navy:#06152f;--blue:#087fdc;--yellow:#14d4ef;--cream:#f0f6ff;--ink:#182b42}.site-header{background:#071429}.nav a,.brand{color:white}.brand{display:flex;align-items:center;gap:10px;font-size:23px}.brand img{border-radius:50%;object-fit:cover}.brand em{font-style:normal;color:#14d4ef}.nav a:hover{color:#14d4ef}.btn{background:#12caef;color:#06152f}.banner{background:#06152f}.banner img{display:block;width:100%;height:auto}.welcome{background:#071b38;color:white;padding:35px 0 50px}.welcome h1{font-size:clamp(29px,3.6vw,48px);max-width:880px;margin:0 0 12px}.welcome p{font-size:19px;margin:0 0 23px}.eyebrow{color:#36daf6}.brand-service{height:195px;width:100%;object-fit:contain;background:#040b1d;border-radius:14px}.card{overflow:hidden}.page-title{background:#071b38;color:white}.page-title h1{color:white!important}.contact-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:55px}.contact-form{display:grid;gap:9px}.contact-form label{font-weight:750;margin-top:12px}.contact-form input,.contact-form textarea,.contact-form select{font:inherit;width:100%;padding:12px 14px;border:1px solid #a9bfd0;border-radius:8px;background:white;color:#182b42}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:3px solid #80d9f4;border-color:#087fdc}.contact-form button{justify-self:start;cursor:pointer;font:inherit}.label-hint{font-weight:400;font-size:14px}.privacy-note{font-size:14px}.spam-field{position:absolute;left:-10000px}.form-feedback{padding:16px;border-radius:9px}.form-feedback.success{background:#d8f5e8}.form-feedback.error{background:#ffe6e2}.contact-aside{background:#f0f6ff;border-radius:16px;padding:25px;align-self:start}.contact-aside img{max-width:100%;height:auto;border-radius:15px}@media(max-width:750px){.contact-layout{grid-template-columns:1fr}.brand img{width:44px;height:44px}.banner img{min-height:210px;object-fit:contain}.nav{gap:12px}}

.service-page{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.75fr);gap:45px}.service-page h2:not(:first-child){margin-top:36px}.service-page aside img{display:block;width:100%;height:auto;border-radius:14px;margin-bottom:24px}@media(max-width:750px){.service-page{grid-template-columns:1fr}}