/* ==========================================================================
   Koppelstuk tussen het design system en de blokken van WordPress.

   lm.css blijft hiermee gelijk aan het prototype; alles wat alleen nodig is
   omdat Gutenberg zijn eigen opmaak meelevert, staat hier.
   ========================================================================== */

:root{
  --lm-pijl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Kop ------------------------------------------------------------------ */
.lm-header .lm-header__binnen{gap:var(--lm-sp-5)}

.lm-header .wp-block-site-logo{flex:none;margin-right:auto;line-height:0}
.lm-header .wp-block-site-logo img{width:clamp(190px,17vw,250px);height:auto}

.lm-header__rechts{display:flex;align-items:center;gap:var(--lm-sp-5)}

/* Het navigatieblok krijgt de opmaak van .lm-nav uit het design system. */
.lm-header .wp-block-navigation{gap:var(--lm-sp-5)}
.lm-header .wp-block-navigation .wp-block-navigation-item__content{
  font-size:var(--lm-fs-small);font-weight:500;color:var(--lm-text);
  padding:.4rem 0;position:relative;text-decoration:none;
}
.lm-header .wp-block-navigation .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--lm-orange-500);transition:right .3s var(--lm-ease);
}
.lm-header .wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--lm-navy-900)}
.lm-header .wp-block-navigation .wp-block-navigation-item__content:hover::after{right:0}

/* Het hamburgermenu van core: zelfde vorm als de rest van de kop. */
.lm-header .wp-block-navigation__responsive-container-open{
  border:1.5px solid var(--lm-border-strong);border-radius:var(--lm-r-md);
  padding:.6rem;color:var(--lm-navy-800);
}
.lm-header .wp-block-navigation__responsive-container-close{
  color:var(--lm-navy-800);padding:.6rem;
}

/* Het uitgeklapte menu. De selector moet even zwaar wegen als die van core
   (`.wp-block-navigation:not(.has-background) …`), anders blijft het wit. */
.lm-header .wp-block-navigation:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--lm-paper);
  padding:var(--lm-sp-8) var(--lm-gutter) var(--lm-sp-7);
}

/* In de balk staat de navigatie rechts; in het uitgeklapte menu hoort ze
   links, onder elkaar, met ruimte om aan te tikken. */
.lm-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content,
.lm-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container{
  align-items:flex-start;justify-content:flex-start;gap:var(--lm-sp-2);
}
.lm-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{
  font-size:1.3rem;font-weight:600;padding:.7rem 0;
  color:var(--lm-navy-900);
}
/* De oplopende onderstreping is een muisaanwijzer-effect; op een telefoon
   voegt hij niets toe. */
.lm-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::after{display:none}
.lm-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus{outline:none}
.lm-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus-visible{
  outline:3px solid var(--lm-orange-600);outline-offset:3px;
}

/* Onder 1041 px neemt het hamburgermenu de navigatie over. De losse
   Contact-knop past er dan niet meer naast — die wordt platgedrukt tot één
   letter per regel — dus hij verdwijnt, en Contact komt als menu-item terug
   binnen het uitgeklapte menu. */
@media (max-width:1040px){
  .lm-header .lm-header__cta{display:none}
}
/* Core laat het hamburgermenu pas onder 600 px zien. Onze zes items plus het
   woordmerk passen pas vanaf 1041 px naast elkaar, dus daartussen draaien we
   de core-regels terug. Zonder dit steekt de navigatie op een tablet honderd
   pixel buiten het scherm. */
@media (min-width:600px) and (max-width:1040px){
  .lm-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .lm-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
    display:none;
  }
}
@media (min-width:1041px){
  .lm-header .lm-alleen-smal{display:none}
}

/* --- Knoppen -------------------------------------------------------------- */
.wp-block-button__link{
  font:inherit;font-weight:600;font-size:var(--lm-fs-small);
  padding:.9rem 1.5rem;border-radius:var(--lm-r-md);
  border:1.5px solid transparent;
  transition:background .25s var(--lm-ease),border-color .25s var(--lm-ease),
             color .25s var(--lm-ease);
}
.is-style-lm-primair .wp-block-button__link{
  background:var(--lm-navy-800);color:#fff;border-color:var(--lm-navy-800);
}
.is-style-lm-primair .wp-block-button__link:hover{
  background:var(--lm-navy-900);border-color:var(--lm-navy-900);color:#fff;
}
.is-style-lm-rand .wp-block-button__link{
  background:transparent;color:var(--lm-navy-800);border-color:var(--lm-border-strong);
}
.is-style-lm-rand .wp-block-button__link:hover{
  border-color:var(--lm-navy-700);color:var(--lm-navy-900);background:rgba(30,78,121,.04);
}
.is-style-lm-licht .wp-block-button__link{
  background:#fff;color:var(--lm-navy-900);border-color:#fff;
}
.is-style-lm-licht .wp-block-button__link:hover{
  background:var(--lm-blue-200);border-color:var(--lm-blue-200);color:var(--lm-navy-900);
}
.is-style-lm-randlicht .wp-block-button__link{
  background:transparent;color:#fff;border-color:var(--lm-border-invert);
}
.is-style-lm-randlicht .wp-block-button__link:hover{
  border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.07);color:#fff;
}
.wp-block-buttons{gap:var(--lm-sp-3)}

/* De pijl die het knopblok van core niet meelevert. Als masker, zodat hij de
   tekstkleur volgt. Alleen op de hoofdactie binnen een sectie: in de kop zou
   een pijl op "Contact" nogal dringend overkomen. */
.lm-section .is-style-lm-primair .wp-block-button__link::after,
.lm-section .is-style-lm-licht .wp-block-button__link::after{
  content:"";display:inline-block;width:1em;height:1em;
  margin-left:.55rem;vertical-align:-.14em;
  background-color:currentColor;
  -webkit-mask:var(--lm-pijl) center/contain no-repeat;
          mask:var(--lm-pijl) center/contain no-repeat;
  transition:transform .3s var(--lm-ease);
}
.lm-section .is-style-lm-primair .wp-block-button__link:hover::after,
.lm-section .is-style-lm-licht .wp-block-button__link:hover::after{
  transform:translateX(3px);
}
@media (max-width:540px){
  .lm-section .wp-block-buttons{flex-direction:column;align-items:stretch}
  .lm-section .wp-block-buttons .wp-block-button{width:100%}
  .lm-section .wp-block-buttons .wp-block-button__link{display:block;text-align:center}
}

/* --- Blokken binnen de secties -------------------------------------------- */
/* Core geeft elk blok een eigen marge; de secties regelen hun ritme zelf. */
.lm-section .wp-block-group,
.lm-section .wp-block-columns{margin-block:0}

/* Een groep met de klasse van een component mag geen extra breedte opleggen. */
.lm-kop.wp-block-group,
.lm-wrap.wp-block-group{max-width:none}
.lm-kop.wp-block-group{max-width:var(--lm-w-text)}

/* Koppen en alinea's binnen componenten volgen het component, niet core. */
.lm-section .wp-block-heading{margin-block:0}

/* --- Voet ----------------------------------------------------------------- */
.lm-footer .wp-block-site-logo img{width:215px;height:auto}
.lm-footer .wp-block-columns{gap:var(--lm-sp-7)}

/* --- Editor --------------------------------------------------------------- */
/* In de editor is de canvasbreedte kleiner dan het scherm; zonder dit lopen
   de secties met een eigen achtergrond niet door tot de rand. */
.editor-styles-wrapper .lm-section{width:100%}
.editor-styles-wrapper .lm-hero::before{display:none}