/*
 * NENI - Locatiewisselaar
 *
 * Alleen nog de wisselaar in de header. Het schermvullende keuzescherm en de
 * vestigingsbalk zijn vervallen: de keuze is een echte pagina geworden, en de bezoeker
 * wordt nergens meer naartoe gestuurd of vastgehouden.
 */

/* ---------- De wisselaar in de header ---------- */

.na-locswitch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 4px;
  font-family: var(--na-font, 'Josefin Sans', sans-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.na-loc {
  color: var(--na-ink, #222121);
  text-decoration: none;
  opacity: 0.55;
  border-bottom: 2px solid transparent;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.na-loc:hover {
  opacity: 1;
}

.na-loc.is-huidig {
  opacity: 1;
  border-bottom-color: var(--na-ink, #222121);
  cursor: default;
}

.na-loc-scheiding {
  opacity: 0.35;
}

/* De compacte variant: een keuzelijst i.p.v. twee losse links. Standaard verborgen. */
.na-locselect {
  display: none;
  appearance: none;
  padding: 5px 24px 5px 9px;
  border: 1px solid rgba(34, 33, 33, 0.4);
  border-radius: 2px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222121' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px 12px;
  color: var(--na-ink, #222121);
  font-family: var(--na-font, 'Josefin Sans', sans-serif);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}

.na-locselect:focus-visible {
  outline: 2px solid var(--na-ink, #222121);
  outline-offset: 2px;
}

/* ---------- Responsief ---------- */

/*
 * Tussen 1120px en 1400px staat de navigatie nog in vol ornaat (de hamburger komt
 * pas bij 1119px), maar past hij niet meer naast het logo. Hier maken we in die
 * band ruimte: kleinere nav-tekst, minder tussenruimte, een kleiner logo en de
 * wisselaar als keuzelijst. Dit kan niet in Oxygen zelf — die kent alleen zijn
 * eigen vijf breekpunten, en 1120-1400 zit daar niet bij.
 *
 * Let op de `.na-header`-voorvoegsels hieronder: dit bestand wordt vóór de CSS van
 * Oxygen ingeladen, dus bij gelijke specificiteit wint Oxygen. Met dat extra niveau
 * maakt de vololgorde niet meer uit.
 */
@media (min-width: 1120px) and (max-width: 1399px) {
  .na-header .na-locswitch {
    display: none;
  }
  .na-header .na-locselect {
    display: block;
  }
  .na-header .na-header-inner {
    gap: 16px;
    padding-left: 22px;
    padding-right: 22px;
  }
  .na-header .na-header-logo {
    width: 108px;
  }
  .na-header .na-header-actions {
    gap: 8px;
  }
  .na-header .bde-wp-menu .breakdance-menu-list {
    gap: 15px;
  }
  .na-header .bde-wp-menu .breakdance-menu-link {
    font-size: 16px;
  }
}

@media (max-width: 1023px) {
  .na-loc-badge {
    width: 158px;
    height: 158px;
  }
  .na-loc-badge-vraag {
    font-size: 17px;
  }
}

@media (max-width: 767px) {
  .na-loc-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .na-loc-helft {
    padding: 40px 26px;
  }
  .na-loc-omschrijving {
    display: none;
  }
  .na-loc-plaats {
    font-size: clamp(28px, 8vw, 40px);
  }
  .na-loc-badge {
    width: 112px;
    height: 112px;
    padding: 10px;
    gap: 2px;
  }
  .na-loc-mededeling {
    bottom: 14px;
    font-size: 11.5px;
  }
  .na-loc-badge-titel {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .na-loc-badge-vraag {
    font-size: 14px;
  }
  .na-locswitch {
    font-size: 14px;
    gap: 6px;
  }
}

@media (max-width: 479px) {
  .na-locswitch {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .na-loc-foto,
  .na-loc-sluier {
    transition: none;
  }
}