/* ============================================================
   VONC Nederland: de stadskeuze en het stadslogo in de kop
   ============================================================ */

/* ---------- stadskeuze in de kop ---------- */
/* Oogt als een menu-item: dezelfde letter, een dunne rand en geen vlak. Pas
   bij aanwijzen of openen komt er een zachte achtergrond, net als bij de
   menulinks ernaast. */
.stadsnavigatie { display: flex; align-items: center; margin-left: auto; }
.stadsnavigatie details { position: relative; }
.stadsnavigatie summary {
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s;
}
.stadsnavigatie summary::-webkit-details-marker { display: none; }
.stadsnavigatie summary:hover,
.stadsnavigatie details[open] > summary {
  background: var(--mint);
  border-color: transparent;
  color: var(--green-dark);
}
.stadsnavigatie summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.stadsnavigatie svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.stad-pin { width: 16px; height: 16px; color: var(--green); }
.stad-pijl { width: 14px; height: 14px; opacity: .65; transition: transform .25s cubic-bezier(.3, 1.3, .5, 1); }
.stadsnavigatie details[open] .stad-pijl { transform: rotate(180deg); }

/* ---------- het uitklapmenu ---------- */
.stad-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 28px 60px -30px rgba(13, 43, 31, .45), 0 2px 6px rgba(13, 43, 31, .04);
  z-index: 200;
  animation: stadMenuIn .18s ease-out;
}
@keyframes stadMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.stad-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--deep);
  transition: background .15s, color .15s;
}
.stad-menu a:hover { background: var(--mint); color: var(--green-dark); }
.stad-menu a[aria-current="true"] { color: var(--green); }
.stad-menu .stad-vink { width: 18px; height: 18px; color: var(--green); stroke-width: 2.2; }

/* Op een telefoon alleen het speldje en het pijltje: de stad staat al in het
   logo, en naast het logo en het menu is weinig ruimte. */
@media (max-width: 560px) {
  .stad-label { display: none; }
  .stadsnavigatie summary { padding: 8px 10px; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .stad-menu { animation: none; }
  .stad-pijl { transition: none; }
}

/* ---------- het logo van de stad in de kop ---------- */
/* Zelfde hoogte als het gewone logo; de stadsnaam maakt het alleen breder. */
/* De stadsnaam staat in de tekening onder het midden, terwijl het menu wel
   op het midden staat. Deze verschuiving (7% van de hoogte) legt de
   stadsnaam op dezelfde lijn als de menu-items, op elk formaat. */
.logo.stad-logo img { height: 38px; width: auto; display: block; transform: translateY(-7%); }
@media (max-width: 768px) {
  .logo.stad-logo img { height: 26px; }
}
@media (min-width: 1001px) {
  /* Op de brede weergave staat het logo normaal in een vak van 180px. Met de
     stadsnaam erin past dat niet meer, en vervalt ook de tegenhanger die het
     menu precies midden hield. */
  .h-in .logo.stad-logo { width: auto; }
  .h-in:has(.stad-logo)::after { content: none; }
}

.h-in .menu-btn { margin-left: 0; }

/* Met het stadslogo en de stadskeuze is de kop breder dan normaal: logo, zes
   menu-items en de knop passen pas vanaf ongeveer 1150px op één regel. Tot
   1180px gaat het menu daarom al achter de menuknop, anders breekt het af
   of loopt de pagina zijwaarts uit. */
@media (max-width: 1180px) {
  .h-in:has(.stad-logo) .nav { display: none !important; }
  .h-in:has(.stad-logo) .menu-btn { display: flex; }
}