/* Aanvullingen op de inZet-huisstijl (assets/site.css) voor het prototype. */

/* Het chatveld in de kop: zelfde vorm als de oude zoekbalk. */
.inzet-chat-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.inzet-chat-form > div {
  flex: 1 1 0;
  min-width: 0;
}
.inzet-chat-notice {
  flex-basis: 100%;
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--bodyColor, #6f6f6f);
}
.inzet-chat-notice[hidden] {
  display: none;
}

/* Pagina's met een widget (Locaties, Agenda). */
.inzet-widget-page {
  width: 100%;
  max-width: var(--contentDesktopMaxWidth, 1200px);
  margin: 0 auto;
  padding: 2rem var(--contentPaddingXMobile, 8vw) 3rem;
  box-sizing: border-box;
}
@media (min-width: 813px) {
  .inzet-widget-page {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.inzet-widget-page h1 {
  color: var(--h1Color, #48a492);
  font-size: var(--h1FontSize, 2.25rem);
  font-weight: bold;
  margin: 0 0 0.5rem;
}
.inzet-widget-page .inzet-intro {
  max-width: var(--contentTextDesktopMaxWidth, 860px);
  margin: 0 0 1.5rem;
}
/* Niet display:block op de widget zelf zetten: de kaart en de agenda leggen hun
   hoogte zelf vast via hun eigen flex-layout. */
.inzet-widget-slot nexus-directory,
.inzet-widget-slot nexus-calendar {
  width: 100%;
}
.inzet-widget-placeholder {
  border: 2px dashed var(--primary, #48a492);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--bodyColor, #6f6f6f);
}