/**
 * ZONE header — de balk bovenaan met logo en sitenaam.
 * Template: templates/layout/regions/_header.html.twig
 *           templates/block/block--system-branding-block.html.twig
 * Het hoofdmenu in dezelfde balk staat in primary-menu.css.
 */

/* De balk: logo links, menuknop of menu rechts. Wordt het menu te breed,
   dan schuift het automatisch naar een eigen regel onder het logo. */
.zone-header__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  /* Geen ruimte onderaan: de banner sluit direct aan op logo en menu,
     net als op brede schermen. */
  padding-block: var(--s-2) 0;
}

.zone-header__merk {
  flex: 0 0 auto;
  padding-bottom: 0.1875rem; /* 3px lucht tussen logo en banner */
}

/* Brede schermen: logo en menu staan onderaan de balk, zodat het menu
   direct op de banner aansluit (zoals het origineel). */
@media (min-width: 56.25em) {
  .zone-header__balk {
    align-items: flex-end;
    padding-block: 1.125rem 0;
  }
}

.site-merk__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--touch);
  color: var(--c-antraciet);
  text-decoration: none;
}

.site-merk__logo {
  width: clamp(3.5rem, 2.5rem + 4vw, 5.625rem); /* 56–90px */
  height: auto;
}

/* flex i.p.v. inline-flex: voorkomt 8px extra regelruimte onder het logo. */
.site-merk__link {
  display: flex;
  width: fit-content;
  gap: var(--s-2);
}

.site-merk__naam {
  max-width: 11ch;          /* "Scoutinggroep / Sint Joris / Zutphen" op 3 regels */
  font-family: var(--f-kop);
  font-size: var(--fs-naam);
  line-height: 1.15;
}

.site-merk__slogan {
  margin: 0;
  font-size: var(--fs-klein);
}