/* =========================================================================
   VaaS-Kerk — demo-omgeving

   Bovenop site.css: dezelfde kleuren, dezelfde maten, dezelfde knoppen.
   Alleen de indeling verschilt, want een demoscherm heeft een zijbalk in
   plaats van een menubalk.

   Alle klikdoelen blijven minimaal 44px, de basisletter blijft 18px en er
   beweegt niets uit zichzelf. De doelgroep is dezelfde als op de site.
   ========================================================================= */

.demo {
  background-color: #f7fafc;
}

/* Altijd zichtbaar, op elk scherm, bovenaan. */
.demo-banner {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  max-width: none;
  background-color: var(--colour-base);
  color: var(--colour-surface);
  font-weight: 700;
  text-align: center;
}

.demo-kop {
  background-color: var(--colour-surface);
  border-bottom: 1px solid var(--colour-line);
}

.demo-kop__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m);
  max-width: 84rem;
  margin-inline: auto;
}

.demo-kop__gemeente {
  margin: 0;
  max-width: none;
  font-weight: 700;
  color: var(--colour-text-muted);
}

/* De knop om weg te gaan staat altijd rechts, op elk scherm op dezelfde plek. */
.demo-verlaten {
  margin-left: auto;
}

.demo-indeling {
  display: block;
  max-width: 84rem;
  margin-inline: auto;
  padding: var(--space-m);
}

/* -------------------------------------------------------------------------
   Zijbalk
   Op smalle schermen een rij knoppen boven de inhoud, op brede een kolom.
   ------------------------------------------------------------------------- */

.demo-zijbalk__lijst {
  list-style: none;
  margin: 0 0 var(--space-l);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.demo-zijbalk__lijst a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-m);
  border: 2px solid var(--colour-line);
  border-radius: var(--radius);
  background-color: var(--colour-surface);
  font-weight: 700;
  text-decoration: none;
}

.demo-zijbalk__lijst a:hover {
  border-color: var(--colour-base);
  color: var(--colour-base);
}

/* Waar u bent, is nooit een kwestie van kleur alleen. */
.demo-zijbalk__lijst a[aria-current="page"] {
  background-color: var(--colour-base);
  border-color: var(--colour-base);
  color: var(--colour-surface);
}

.demo-kruimel {
  margin: 0 0 var(--space-m);
  max-width: none;
  font-weight: 700;
  color: var(--colour-text-muted);
}

.demo-inhoud > h1 {
  margin-bottom: var(--space-s);
}

.demo-inhoud > .demo-intro {
  font-size: 1.25rem;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-l);
}

@media (min-width: 62em) {
  .demo-indeling {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-m);
  }

  .demo-zijbalk__lijst {
    flex-direction: column;
    margin-bottom: 0;
  }
}

/* -------------------------------------------------------------------------
   Panelen: de bouwsteen van elk demoscherm
   ------------------------------------------------------------------------- */

.demo-paneel {
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  padding: var(--space-l);
  margin-bottom: var(--space-l);
}

.demo-paneel > :last-child {
  margin-bottom: 0;
}

.demo-paneel h2 {
  font-size: 1.375rem;
  margin-bottom: var(--space-m);
}

.demo-paneel h3 {
  margin-bottom: var(--space-xs);
}

.demo-raster {
  display: grid;
  gap: var(--space-l);
}

/*
 * Kolommen in een raster mogen krimpen. Zonder min-width: 0 houdt een
 * rasterkolom zijn inhoudsbreedte aan en duwt hij de pagina breder dan het
 * scherm; dat gaf horizontale overloop op tablets.
 */
.demo-raster > * {
  min-width: 0;
}

/*
 * Binnen een raster is er geen ruimte voor een labelkolom van 14rem naast de
 * waarde. Daar staan de labels dus boven de waarde.
 */
.demo-raster .demo-kenmerken {
  grid-template-columns: 1fr;
}

.demo-raster .demo-kenmerken dd {
  margin-bottom: var(--space-s);
}

@media (min-width: 62em) {
  .demo-raster--twee {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------------------------------------------------------------------------
   Gegevensrijen en tabellen
   ------------------------------------------------------------------------- */

.demo-kenmerken {
  margin: 0;
  display: grid;
  gap: var(--space-xs) var(--space-m);
}

.demo-kenmerken dt {
  font-weight: 700;
  color: var(--colour-text-muted);
}

.demo-kenmerken dd {
  margin: 0 0 var(--space-s);
}

@media (min-width: 40em) {
  .demo-kenmerken {
    grid-template-columns: 14rem 1fr;
  }

  .demo-kenmerken dd {
    margin-bottom: 0;
  }
}

.demo-tabelhouder {
  overflow-x: auto;
}

.demo-tabel {
  width: 100%;
  border-collapse: collapse;
  min-width: 34rem;
}

.demo-tabel th,
.demo-tabel td {
  text-align: left;
  padding: var(--space-s) var(--space-m) var(--space-s) 0;
  border-bottom: 1px solid var(--colour-line);
  vertical-align: top;
}

.demo-tabel th {
  font-weight: 700;
  color: var(--colour-text-muted);
}

.demo-tabel td.demo-bedrag,
.demo-tabel th.demo-bedrag {
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Statuslabels
   Kleur is nooit het enige verschil: er staat altijd een woord bij.
   ------------------------------------------------------------------------- */

.demo-status {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  border: 2px solid;
}

.demo-status--urgent {
  color: #8a2b12;
  border-color: #8a2b12;
  background-color: #fdf0eb;
}

.demo-status--komend {
  color: var(--colour-base);
  border-color: var(--colour-base);
  background-color: var(--colour-soft);
}

.demo-status--afgerond {
  color: #1f6b2c;
  border-color: #1f6b2c;
  background-color: #eef7ef;
}

/* -------------------------------------------------------------------------
   Signalen en taken
   ------------------------------------------------------------------------- */

.demo-signalen {
  list-style: none;
  margin: 0;
  padding: 0;
}

.demo-signaal {
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--colour-line);
}

.demo-signaal:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.demo-signaal__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-xs);
}

.demo-signaal__kop h3 {
  margin: 0;
}

.demo-signaal dl {
  margin: var(--space-xs) 0 0;
  display: grid;
  gap: 0 var(--space-m);
  font-size: 1rem;
}

.demo-signaal dt {
  font-weight: 700;
  color: var(--colour-text-muted);
}

.demo-signaal dd {
  margin: 0 0 var(--space-xs);
}

@media (min-width: 40em) {
  .demo-signaal dl {
    grid-template-columns: 10rem 1fr;
  }
}

/* -------------------------------------------------------------------------
   Kostenbalken bij het onderhoud
   Een eenvoudige, rustige weergave; het getal staat er altijd bij, zodat de
   balk niet de enige drager van de informatie is.
   ------------------------------------------------------------------------- */

.demo-jaren {
  list-style: none;
  margin: 0;
  padding: 0;
}

.demo-jaar {
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-items: center;
  gap: var(--space-m);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--colour-line);
}

.demo-jaar__label {
  margin: 0;
  font-weight: 700;
}

.demo-jaar__balk {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.demo-jaar__vulling {
  height: 1.5rem;
  background-color: var(--colour-accent-strong);
  border-radius: 2px;
  min-width: 3px;
}

.demo-jaar__bedrag {
  margin: 0;
  max-width: none;
  white-space: nowrap;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Documenten
   ------------------------------------------------------------------------- */

.demo-map {
  margin-bottom: var(--space-l);
}

.demo-map:last-child {
  margin-bottom: 0;
}

.demo-map h3 {
  margin-bottom: var(--space-xs);
}

.demo-map ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.demo-map li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--colour-line);
}

.demo-map li span:last-child {
  color: var(--colour-text-muted);
}

.demo-herkomst {
  margin-top: var(--space-m);
  padding: var(--space-m);
  background-color: var(--colour-soft);
  border-radius: var(--radius);
}

.demo-herkomst p {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Afsluiting van elk scherm
   ------------------------------------------------------------------------- */

.demo-slot {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  background-color: var(--colour-soft);
  border-radius: var(--radius);
}

.demo-slot h2 {
  font-size: 1.375rem;
}

.demo-slot .actions {
  margin-top: var(--space-m);
}

.demo-noscript {
  margin: 0;
  padding: var(--space-l);
  max-width: none;
  background-color: #fdf0eb;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Inlogscherm (staat in de gewone sitelayout)
   ------------------------------------------------------------------------- */

.demo-inlog {
  max-width: 32rem;
}

.demo-inlog label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.demo-inlog input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-m);
  font: inherit;
  color: var(--colour-base);
  border: 2px solid var(--colour-base);
  border-radius: var(--radius);
  background-color: var(--colour-surface);
}

.demo-inlog input[aria-invalid="true"] {
  border-color: #8a2b12;
}

.demo-inlog__hulp {
  margin-top: var(--space-xs);
  color: var(--colour-text-muted);
  font-size: 1rem;
}

/* Blijft staan tot de bezoeker iets anders typt; verdwijnt nooit vanzelf. */
.demo-inlog__melding {
  margin-top: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-left: 4px solid #8a2b12;
  background-color: #fdf0eb;
  color: #8a2b12;
  font-weight: 700;
}

.demo-inlog .button {
  margin-top: var(--space-m);
}

/* -------------------------------------------------------------------------
   Gebouwwisselaar op "Mijn kerk"

   Altijd zichtbaar bovenaan het scherm, zodat duidelijk is in welk gebouw u
   zit en hoe u naar het andere gaat. Het actieve gebouw is niet alleen aan de
   kleur te herkennen: het draagt ook aria-current.
   ------------------------------------------------------------------------- */

.demo-wissel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

.demo-wissel__label {
  margin: 0;
  max-width: none;
  font-weight: 700;
  color: var(--colour-text-muted);
}

.demo-wissel__knop {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-m);
  border: 2px solid var(--colour-line);
  border-radius: var(--radius);
  background-color: var(--colour-surface);
  font-weight: 700;
  text-decoration: none;
}

.demo-wissel__knop:hover {
  border-color: var(--colour-base);
  color: var(--colour-base);
}

.demo-wissel__knop.is-actief {
  background-color: var(--colour-base);
  border-color: var(--colour-base);
  color: var(--colour-surface);
}