/*
 * NENI - Header layout
 *
 * Het hoofdmenu zo dicht mogelijk bij het midden van de header, terwijl de
 * vestigingswisselaar en de contacticoontjes rechts blijven staan.
 *
 * DE MEETKUNDE. Het menu is ongeveer 800px breed. Links staat het logo (tot 176px),
 * rechts de wisselaar en de icoontjes (samen zo'n 320px vanaf de rechterrand). Echt
 * centreren kan pas als het menu tussen die twee past:
 *
 *     vensterbreedte / 2 + 400 + tussenruimte  <=  waar de wisselaar begint
 *
 * Dat komt uit op ongeveer 1500px. Daaronder botst een gecentreerd menu tegen de
 * wisselaar. Vandaar twee regimes.
 *
 * Wat NIET helpt onder die breedte: justify-content:center op de menucontainer. Die
 * container loopt van het logo tot de wisselaar, en het midden daarvan ligt links van
 * het midden van de header — het menu komt dan juist verder van het midden af te staan.
 * Op 1440px: 647 in plaats van 689, met 720 als het echte midden.
 *
 * Let op de specificiteit: dit bestand laadt vóór de stylesheets van Oxygen, dus een
 * regel met hetzelfde gewicht verliest. Vandaar overal het .na-header-voorvoegsel.
 */

/*
 * Vanaf hier past een echt gecentreerd menu ernaast.
 *
 * Het menu uit de flex-flow halen betekent dat de overgebleven onderdelen zich
 * herverdelen: met space-between schuift de wisselaar dan naar het midden, precies
 * onder het menu. Vandaar dat de uitlijning hier op flex-start gaat en het logo de
 * rest met een automatische marge naar rechts duwt.
 */
@media (min-width: 1520px) {
  .na-header .na-header-inner {
    position: relative;
    justify-content: flex-start;
  }

  .na-header .na-header-brand {
    margin-right: auto;
  }

  .na-header .na-header-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: 0 0 auto;
    justify-content: center;
  }
}

/*
 * De vestiging naast het logo.
 *
 * Bewust ondergeschikt aan het logo: kleiner, in kapitalen met wat letterruimte, en met
 * een dunne scheiding ertussen. Het moet te lezen zijn zonder de aandacht van het merk
 * weg te trekken — een bezoeker die twijfelt kijkt ernaar, de rest niet.
 *
 * De tekst zelf komt uit een gegenereerde regel in neni-header.php, want die verschilt
 * per vestiging.
 */
.na-header .na-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* De logolink is onderstreept. Op een afbeelding zie je dat niet, maar het label
     hieronder erft hem wel — en een kindelement kan een onderstreping van de ouder
     niet uitzetten, die wordt door de ouder getekend. Dus hier weghalen. */
  text-decoration: none;
}

.na-header .na-header-brand::after {
  /* content komt uit neni-header.php */
  /* inline-block, niet inline: anders erft het label de onderstreping van de
     logolink en leest het als een aparte link. */
  display: inline-block;
  text-decoration: none;
  padding-left: 12px;
  border-left: 1px solid rgba(34, 33, 33, 0.28);
  font-family: var(--na-font, 'Josefin Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--na-ink, #222121);
  opacity: 0.75;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .na-header .na-header-brand {
    gap: 9px;
  }
  .na-header .na-header-brand::after {
    padding-left: 9px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}