/* ==========================================================================
   Hippe Zeeuw · laag 7 — beleidspagina's
   Alleen geladen op pagina's met template page-legal.php
   (algemene voorwaarden, privacybeleid, retourbeleid, klachten).

   Leunt volledig op .rte uit typography.css voor de lopende tekst; hier staat
   uitsluitend de paginastructuur: kop, inhoudsopgave, stappen en de afsluiter.

   LET OP bij het uitbreiden: alles wat BINNEN de tekstkolom staat wordt hier
   met .rte ervoor geschreven. Kale selectors als .hz-steps verliezen het
   anders van .rte ol / .rte p uit typography.css (die zijn specifieker) en
   dan krijg je bijvoorbeeld dubbele nummering.
   ========================================================================== */

.hz-legal{ padding-block:clamp(48px,6vw,88px) clamp(72px,9vw,120px); }

/* ------------------------------------------------------------------ kop */
.hz-legal__head{
  border-bottom:1px solid var(--line);
  padding-bottom:clamp(26px,3.4vw,44px);
  margin-bottom:clamp(36px,4.6vw,66px);
  max-width:62ch;
}
.hz-legal__head h1{
  font-size:clamp(2.4rem,5vw,4.2rem);
  margin-top:14px;
}
.hz-legal__head .lead{ margin-top:18px; }
.hz-legal__meta{
  margin-top:22px;
  font-size:.75rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ------------------------------------------------------------- kolommen */
.hz-legal__grid{
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  gap:clamp(34px,5vw,90px);
  align-items:start;
}
.hz-legal__grid--solo{ grid-template-columns:minmax(0,1fr); }

.hz-legal__body{ max-width:76ch; }
.hz-legal__body > h2:first-child,
.hz-legal__body > h3:first-child{ margin-top:0; }

/* koppen krijgen ruimte onder de sticky header bij een anker-sprong */
.hz-legal__body h2,
.hz-legal__body h3{ scroll-margin-top:calc(var(--hdr-h) + 26px); }

/* een artikelkop mag optisch los staan van het blok erboven */
.hz-legal__body > h2{
  padding-top:.7em;
  border-top:1px solid var(--line-2);
}
.hz-legal__body > h2:first-child{ padding-top:0; border-top:0; }

/* -------------------------------------------------------- inhoudsopgave */
.hz-legal__toc{
  position:sticky;
  top:calc(var(--hdr-h) + 24px);
  border-left:1px solid var(--line);
  padding-left:20px;
}
.hz-legal__toc h2{
  font-family:var(--ff-sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 16px;
  line-height:1.4;
}
.hz-legal__toc ol{
  list-style:none;
  margin:0;
  padding:0;
  max-height:min(62vh,640px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.hz-legal__toc li{ margin-bottom:9px; }
.hz-legal__toc a{
  display:block;
  font-size:.8125rem;
  line-height:1.45;
  color:var(--ink-2);
  transition:color .22s var(--ease), padding-left .25s var(--ease);
}
.hz-legal__toc a:hover{ color:var(--stone-dk); padding-left:4px; }
.hz-legal__toc a.is-current{ color:var(--ink); font-weight:600; }

/* dunne scrollbar wanneer de lijst lang is (algemene voorwaarden) */
.hz-legal__toc ol::-webkit-scrollbar{ width:3px; }
.hz-legal__toc ol::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }

/* --------------------------------------------------------------- stappen
   Voor het retourbeleid: genummerde blokken in plaats van vetgedrukte
   alinea's. Markup: <ol class="hz-steps"><li><h3>..</h3><p>..</p></li> */
.rte .hz-steps{
  list-style:none;
  counter-reset:hz-step;
  margin:0 0 1.6em;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
}
.rte .hz-steps > li{
  counter-increment:hz-step;
  background:var(--paper);
  padding:clamp(20px,2.4vw,28px) 0 clamp(20px,2.4vw,28px) clamp(48px,5vw,68px);
  position:relative;
  margin:0;
  font-size:1rem;
}
.rte .hz-steps > li::before{
  content:counter(hz-step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:clamp(20px,2.4vw,28px);
  font-family:var(--ff-display);
  font-size:1.5rem;
  line-height:1;
  color:var(--stone);
}
.rte .hz-steps h3{
  font-family:var(--ff-sans);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:0;
  line-height:1.4;
  color:var(--ink);
  margin:0 0 .5em;
}
.rte .hz-steps p{ margin:0 0 .8em; font-size:.9375rem; line-height:1.72; color:var(--ink-2); }
.rte .hz-steps p:last-child{ margin-bottom:0; }

/* -------------------------------------------------------------- uitlicht
   <div class="hz-callout"> voor een adres- of contactblok in de tekst. */
.rte .hz-callout{
  background:var(--paper-2);
  border:1px solid var(--line-2);
  padding:clamp(18px,2.2vw,24px);
  margin:1.4em 0 0;
}
.rte .hz-callout p{ margin:0 0 .6em; font-size:.9375rem; line-height:1.7; }
.rte .hz-callout p:last-child{ margin-bottom:0; }
.rte .hz-callout strong{ color:var(--ink); }

/* ------------------------------------------------------------- afsluiter */
.hz-legal__foot{
  margin-top:clamp(52px,6vw,88px);
  padding-top:clamp(30px,3.6vw,46px);
  border-top:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.hz-legal__foot p{
  max-width:46ch;
  font-size:.9375rem;
  color:var(--ink-2);
  margin:10px 0 0;
}
.hz-legal__foot .btn{ flex:none; }

/* ---------------------------------------------------------- responsive */
@media (max-width:900px){
  .hz-legal__grid{ grid-template-columns:minmax(0,1fr); }

  /* de inhoudsopgave wordt een inklapbaar blok bovenaan */
  .hz-legal__toc{
    position:static;
    border-left:0;
    border:1px solid var(--line);
    padding:0;
    margin-bottom:34px;
  }
  .hz-legal__toc h2{
    margin:0;
    padding:16px 20px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .hz-legal__toc h2::after{
    content:"";
    width:8px; height:8px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .3s var(--ease);
    flex:none;
  }
  .hz-legal__toc.is-open h2::after{ transform:rotate(-135deg) translateY(-2px); }
  .hz-legal__toc ol{
    max-height:0;
    overflow:hidden;
    padding:0 20px;
    transition:max-height .4s var(--ease), padding .4s var(--ease);
  }
  .hz-legal__toc.is-open ol{
    max-height:min(58vh,520px);
    overflow-y:auto;
    padding:0 20px 18px;
  }
  .hz-legal__toc li{ margin-bottom:11px; }
}

@media (max-width:560px){
  .rte .hz-steps > li{ padding-left:42px; }
  .rte .hz-steps > li::before{ font-size:1.25rem; }
  .hz-legal__foot .btn{ width:100%; }
}