/*
Theme Name: Hermus Verhuizingen
Author: TNComputers
Author URI: https://tncomputers.nl
Description: Eigen thema voor hermusverhuizingen.nl
Version: 1.0.0
Text Domain: hermus-verhuizingen
*/

@font-face{font-family:"Stencil HV";src:url(fonts/stencil-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Hanken";src:url(fonts/hanken-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken";src:url(fonts/hanken-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --kraft:#C9A06A;
  --kraft-donker:#B58A52;
  --inkt:#1F2A30;
  --rood:#BE1E2D;
  --wit:#FFFFFF;
  --grijs:#5A646A;
  --lijn:#D9DDDF;
  --stencil:"Stencil HV",Impact,"Arial Narrow",sans-serif;
  --tekst:"Hanken",Verdana,Arial,sans-serif;
  --rand:clamp(16px,4.5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:56px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wit);color:var(--inkt);font:400 1.0625rem/1.6 var(--tekst)}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--rood);outline-offset:3px}
.overslaan{position:absolute;left:-9999px}
.overslaan:focus{left:16px;top:16px;z-index:30;background:var(--wit);padding:.5rem 1rem}
.kader{max-width:1240px;margin:0 auto;padding-inline:var(--rand)}
h1,h2,h3{font-family:var(--stencil);font-weight:800;line-height:.98;margin:0}
h2{font-size:clamp(2.25rem,4vw,3.25rem)}
p{margin:0}

/* Karton: de fijne golflijnen van golfkarton */
.karton{
  background-color:var(--kraft);
  background-image:repeating-linear-gradient(90deg,rgba(90,60,25,.055) 0 2px,transparent 2px 7px);
}

/* Kop */
.kop{background:var(--wit);position:sticky;top:0;z-index:20;box-shadow:0 1px 0 var(--lijn)}
.kop .kader{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding-block:.9rem}
.merk{text-decoration:none;font-family:var(--stencil);font-weight:800;font-size:1.6rem;line-height:1;white-space:nowrap}
.merk b{color:var(--rood);font-weight:800}
.menu{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);flex-wrap:wrap}
.menu a{text-decoration:none}
.menu a:hover{text-decoration:underline;text-underline-offset:.25em}
.menu .tel{font-weight:700;white-space:nowrap}

/* Hero: de zijkant van een verhuisdoos */
.hero{position:relative;overflow:hidden}
.hero .kader{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:end;
  padding-block:clamp(2rem,4vw,3.25rem) clamp(4.5rem,7vw,6rem);
}
.hero h1{font-size:clamp(3.5rem,8.5vw,7.5rem);line-height:.88;color:var(--inkt);mix-blend-mode:multiply}
.hero .intro{max-width:32em;margin-top:1.25rem;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5}
.pijlen{position:absolute;right:var(--rand);top:clamp(1.25rem,3vw,2.25rem);width:60px;color:var(--inkt);opacity:.8}

/* Adreslabel */
.label{
  background:var(--wit);padding:1.4rem 1.5rem 1.5rem;
  transform:rotate(-1.4deg);
  box-shadow:0 1px 0 rgba(60,40,15,.35),0 10px 22px -12px rgba(60,40,15,.55);
}
.label h2{font-size:1.75rem;margin-bottom:.75rem}
.veld{border-top:1px solid var(--inkt);padding:.55rem 0;display:grid;grid-template-columns:3.2rem 1fr;gap:.5rem;font-size:1rem;line-height:1.4}
.veld span:first-child{color:var(--grijs)}
.knop{
  display:block;text-align:center;text-decoration:none;font-weight:700;
  background:var(--rood);color:var(--wit);padding:.85rem 1rem;margin-top:.75rem;
}
.knop:hover{background:#9c1824}
.knop.lijn{background:transparent;color:var(--inkt);box-shadow:inset 0 0 0 2px var(--inkt);margin-top:.5rem}
.knop.lijn:hover{background:var(--inkt);color:var(--wit)}

/* Plakband */
.tape{
  position:absolute;left:-2%;right:-2%;bottom:clamp(1.25rem,3vw,2.25rem);
  background:var(--rood);color:var(--wit);transform:rotate(-.7deg);
  font-family:var(--stencil);font-weight:800;font-size:1.1rem;line-height:1;
  white-space:nowrap;overflow:hidden;padding:.6rem 0;letter-spacing:.04em;
  box-shadow:0 2px 4px rgba(60,40,15,.3);
  animation:afrollen 1.1s cubic-bezier(.3,.7,.2,1) .15s backwards;
}
@keyframes afrollen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Paklijst */
.paklijst{padding-block:clamp(2.5rem,5vw,4.5rem)}
.paklijst h2{margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.regel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:.5rem clamp(1.5rem,5vw,4rem);padding-block:clamp(1rem,1.6vw,1.35rem);border-top:2px solid var(--inkt)}
.regel:last-child{border-bottom:2px solid var(--inkt)}
.regel h3{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1}
.regel p{max-width:34em}

/* Verloop */
.verloop{background:var(--inkt);color:var(--wit);padding-block:clamp(2.5rem,5vw,4.5rem) 0;overflow:hidden}
.stappen{list-style:none;margin:clamp(1.5rem,2.5vw,2.25rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.75rem,4vw,3.5rem)}
.stappen .nr{display:block;font-family:var(--stencil);font-weight:800;font-size:clamp(2.75rem,4vw,3.5rem);line-height:.9;color:var(--kraft)}
.stappen h3{font-family:var(--tekst);font-weight:700;font-size:1.15rem;line-height:1.3;margin:.5rem 0 .3rem}
.stappen p{color:#D6DCDF;max-width:26em}
.weg{margin-top:clamp(1rem,2.5vw,2rem);position:relative}
.weg svg{width:min(300px,62vw);margin-left:auto;position:relative;z-index:1;margin-bottom:-3px}
.weg::after{content:"";display:block;height:14px;background:repeating-linear-gradient(90deg,#fff 0 42px,transparent 42px 76px) center/auto 3px no-repeat,#10171b}

/* Waar */
.gebied{padding-block:clamp(2.5rem,5vw,4.5rem)}
.gebied .kader{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.25rem clamp(1.5rem,5vw,4rem);align-items:start}
.gebied p{max-width:34em}

/* Contact */
.contact{padding-block:clamp(2.5rem,5vw,4.5rem)}
.contact .kader{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.contact h2{font-size:clamp(2.5rem,5vw,4.25rem);line-height:.95;mix-blend-mode:multiply}
.contact .uitleg{margin-top:1.25rem;max-width:30em}

/* Voet */
.voet{background:var(--inkt);color:#D6DCDF;font-size:1rem;padding-block:2.25rem 7rem}
.credit{position:fixed;left:0;right:0;bottom:0;z-index:14;height:30px;margin:0;display:flex;align-items:center;justify-content:center;gap:.3em;background:var(--inkt);color:#D6DCDF;border-top:1px solid rgba(255,255,255,.18);font-size:.85rem;line-height:1}
.voet .kader{display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:space-between}
.voet .merk{color:var(--wit);display:inline-block;margin-bottom:.4rem}
.voet .merk b{color:#EF6A74}
.voet a:hover{color:var(--wit)}
.voet .rechts{text-align:right}

/* Gewone pagina's */
.pagina{padding-block:clamp(3rem,7vw,5rem);max-width:760px}
.pagina h1{font-size:clamp(3rem,7vw,5rem);margin-bottom:1.5rem}
.pagina h2{font-size:2.25rem;margin:2rem 0 .75rem}
.pagina p{margin-bottom:1rem}

/* Zwevende belknop */
.belknop{
  position:fixed;right:clamp(12px,2vw,24px);bottom:42px;z-index:15;
  display:flex;align-items:center;gap:.65rem;padding:.5rem 1.1rem .5rem .5rem;
  background:var(--rood);color:var(--wit);text-decoration:none;border-radius:999px;
  box-shadow:0 8px 22px -6px rgba(31,42,48,.6);line-height:1.15;
}
.belknop:hover{background:#9c1824}
.belknop:focus-visible{outline-color:var(--inkt)}
.belknop i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--wit);color:var(--rood);animation:bel-ring 3s ease-out infinite}
.belknop span{font-size:.95rem;white-space:nowrap}
.belknop b{display:block;font-size:1rem}
@keyframes bel-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}45%,100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
@media (max-width:860px){
  .belknop{padding:.4rem .95rem .4rem .4rem}
  .belknop i{width:36px;height:36px}
}

/* Cookies */
.cookie-icoon{
  position:fixed;left:clamp(12px,2vw,24px);bottom:42px;z-index:15;
  width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--inkt);color:var(--kraft);border:2px solid var(--wit);border-radius:50%;
  box-shadow:0 8px 22px -6px rgba(31,42,48,.6);transition:transform .2s;
}
.cookie-icoon:hover{transform:rotate(-14deg)}
.cookie-icoon[hidden],.cookiemelding[hidden]{display:none}
.cookiemelding{
  position:fixed;left:clamp(12px,2vw,24px);bottom:42px;z-index:25;
  width:min(400px,calc(100vw - 24px));padding:1.25rem;background:var(--wit);
  box-shadow:0 0 0 2px var(--inkt),0 14px 34px -8px rgba(31,42,48,.55);font-size:.95rem;line-height:1.5;
}
.cookiemelding h2{font-size:1.6rem;margin-bottom:.5rem}
.cookie-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.9rem}
.cookie-knoppen .knop{width:100%;margin:0;border:0;font:700 .95rem/1.2 var(--tekst);cursor:pointer;padding:.75rem .5rem}

@media (max-width:860px){
  .hero .kader,.contact .kader,.gebied .kader,.regel{grid-template-columns:minmax(0,1fr)}
  .hero .kader{align-items:start}
  .hero h1{font-size:clamp(3.5rem,17vw,6rem)}
  .pijlen{width:44px}
  .stappen{grid-template-columns:minmax(0,1fr)}
  .label{transform:rotate(-.8deg)}
  .voet .rechts{text-align:left}
  html{scroll-padding-top:74px}
  .kop .kader{padding-block:.6rem;gap:.35rem}
  .menu{width:100%;justify-content:space-between;gap:.5rem;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tape,.belknop i{animation:none}
  .cookie-icoon{transition:none}
}