/* De laag tussen het ontwerp en WordPress.
   Alles wat hier staat, staat hier omdat WordPress het nodig heeft — niet omdat
   het ontwerp erom vroeg. Ontwerpwijzigingen horen in de andere bestanden hier. */

/* ── Menu-items ──────────────────────────────────────────────────────────────
   wp_nav_menu levert altijd <li>'s. Het ontwerp kent alleen de <a> erbinnen en
   verwacht die als directe flex-kinderen — vandaar display:contents: het lijstje
   verdwijnt uit de opmaak, de links blijven staan. Zonder dit staan er bolletjes
   tussen de menu-items. */
.hn-nav li,
.hn-menupanel li{
  display:contents;
  list-style:none;
  margin:0;
}
.hn-nav__link{white-space:nowrap}

/* De footer-kolommen: het ontwerp regelt de tussenruimte al met gap op de <ul>
   (navigation.css), maar de algemene li-marge uit elements.css telt daar
   bovenop en maakt de kolommen onbedoeld hoog. */
.hn-footer li{margin:0}

/* ── Header: de schakelaar tussen desktop en telefoon ────────────────────────
   Het ontwerp levert twee varianten van dezelfde header. Op de site rendert
   PHP ze allebei en beslist de breedte welke te zien is. */
.hn-header__menu{display:none}
@media (width < 900px){
  .hn-header .hn-nav{display:none}
  .hn-header__menu{display:inline-flex}
  .hn-header__actions{margin-left:auto}
  .hn-header__bar{min-height:64px;gap:var(--hn-s3)}
}

/* Het schuifmenu opent met JavaScript; zonder JS blijft het dicht en werkt de
   header als gewone kop met logo en zoekknop. */
.hn-menupanel[hidden],.hn-scrim[hidden]{display:none}
body.hn-locked{overflow:hidden}

/* ── Springlink ──────────────────────────────────────────────────────────── */
.hn-skip{position:absolute;left:-9999px;top:0;z-index:100}
.hn-skip:focus{left:var(--hn-s4);top:var(--hn-s4);padding:var(--hn-s3) var(--hn-s4);background:var(--hn-white);border-radius:var(--hn-radius);box-shadow:var(--hn-shadow);color:var(--hn-brand);font-weight:var(--hn-weight-bold)}

/* ── Pagina-inhoud uit de editor ─────────────────────────────────────────────
   Niet één container om alles heen, maar een breedte per blok. Anders kan een
   blok dat de volle breedte wil (een band, een hero) daar nooit uitkomen. */
.hn-page > *{
  max-width:var(--hn-container-narrow);
  margin-inline:auto;
  padding-inline:var(--hn-gutter);
}
/* Secties volgen het idioom van de design-schermen: de sectie loopt de volle
   breedte (voor een band-achtergrond) en de hn-container erbinnen begrenst de
   inhoud. De smalle maat blijft voor losse tekstblokken zoals artikelen. */
.hn-page > section{max-width:none;padding-inline:0}
.hn-page > .hn-shop,
.hn-page > .wp-block-embed{max-width:var(--hn-container)}
.hn-page > .alignwide{max-width:var(--hn-container)}
.hn-page > .alignfull{max-width:none;padding-inline:0}

/* ── Blok-uitlijningen ───────────────────────────────────────────────────── */
.hn-prose > .alignwide{max-width:960px;margin-inline:auto}
.hn-prose > .alignfull{max-width:none;width:100%}
.alignleft{float:left;margin:0 var(--hn-s5) var(--hn-s4) 0}
.alignright{float:right;margin:0 0 var(--hn-s4) var(--hn-s5)}
.aligncenter{margin-inline:auto}
.wp-block-image figcaption{font-size:var(--hn-ui);color:var(--text-muted);margin-top:var(--hn-s2)}

/* ── Kernblokken in de merkstijl ─────────────────────────────────────────────
   Voorheen stond dit in theme.json (styles); dat printte WordPress als eigen
   element-regels bovenop het design system — twee stemmen over dezelfde
   elementen. theme.json houdt nu alleen instellingen; de blok-skins staan hier,
   uitgedrukt in de tokens. */
.wp-element-button,
.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--hn-tap);padding:0.75rem 1.5rem;border:0;
  border-radius:var(--hn-radius);background:var(--action-primary);
  color:var(--hn-white);font-family:var(--font-body);
  font-weight:var(--hn-weight-bold);text-decoration:none;cursor:pointer;
}
.wp-element-button:hover,
.wp-block-button__link:hover{background:var(--action-primary-hover);color:var(--hn-white)}
.wp-block-quote{
  font-family:var(--font-heading);font-size:var(--hn-h3);font-style:italic;
  color:var(--text-heading);border-left:3px solid var(--hn-brand-bright);
  margin:0 0 var(--hn-s4);padding-left:var(--hn-s4);
}
.wp-block-separator{border:0;border-top:1px solid var(--hn-line)}
.wp-block-table{font-size:var(--hn-text)}

/* ── Toegankelijkheid en beheer ──────────────────────────────────────────── */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* De beheerbalk is een ul: buiten onze lijstregels houden (elements.css geeft ul een maat en li een marge), anders breekt hij in twee rijen. Wordt hij toch hoger, dan meet nav.js hem en zet --hn-adminbar. */
#wpadminbar ul,#wpadminbar li{max-width:none;margin:0}
.admin-bar .hn-menupanel,.admin-bar .hn-drawer,.admin-bar .hn-header{top:var(--hn-adminbar,32px)}
@media (max-width:782px){.admin-bar .hn-menupanel,.admin-bar .hn-drawer,.admin-bar .hn-header{top:var(--hn-adminbar,46px)}}

/* ── Pagina-romp ─────────────────────────────────────────────────────────── */
.hn-main{min-height:50vh}
.hn-entry__meta{font-size:var(--hn-ui);color:var(--text-muted);margin-bottom:var(--hn-s5)}
.hn-archive__list{display:grid;gap:var(--hn-s6)}
.hn-archive__item h2{margin-bottom:var(--hn-s2)}
.hn-nothing{padding-block:var(--hn-s8)}