/* ══════════════════════════════════════════════════════════════════════════
   Het merk: beeldmerk plus woordmerk
   ══════════════════════════════════════════════════════════════════════════

   Eén vorm voor de site, de beheeromgeving en de inlogpagina. De maten komen
   per plek mee uit mwMerk(); de vorm staat hier.
   ══════════════════════════════════════════════════════════════════════════ */

.mw-merk {
  display: inline-flex;
  align-items: center;
  gap: var(--mw-merk-gat, 10px);
  text-decoration: none;
  color: var(--mw-merk-tekst, var(--mw-donkergroen));
  font-weight: var(--mw-merk-gewicht, 500);
  letter-spacing: var(--mw-merk-spatie, -1.2px);
  line-height: var(--mw-regel-strak);
}

.mw-merk[data-op-donker] { color: var(--mw-merk-tekst-donker, var(--mw-vlak)); }
.mw-merk-beeld { height: auto; display: block; flex-shrink: 0; }

/* Het hele logo als één tekening: beeldmerk en woord staan erin, met de
   afstand ertussen die de ontwerper koos. Daarom geen gat en geen letterkleur
   meer nodig; die blijven hierboven staan voor een logo dat alleen uit een
   beeldmerk bestaat. */
.mw-merk-logo {
  height: auto;
  display: block;
  flex-shrink: 0;
  max-width: 100%;
  /* De balk laat het logo meekrimpen bij het scrollen, en vroeger deed de
     lettergrootte dat. Nu is het een tekening, dus gaat het over de breedte. */
  transition: width .4s var(--mw-curve);
}

.mw-merk-woord { display: inline-block; line-height: var(--mw-regel-strak); }