/* Eigen opmaak voor Gemeente Demostad, boven op het thema van Open Inwoner.
 *
 * WAAROM EEN BESTAND EN NIET extra_css. Het veld `extra_css` in de
 * SiteConfiguration wordt gefilterd: alleen kleuren, lettertypen en uitlijning
 * komen erdoor, alles met positie, marge of achtergrondafbeelding wordt eruit
 * gegooid (zie utils/css.py in Open Inwoner). Het veld `theme_stylesheet` is een
 * echt stylesheet-bestand en wordt ongefilterd geladen. Daar hoort dit dus.
 *
 * We raken niets van Open Inwoner zelf aan; dit ligt er alleen overheen. Bij een
 * update van hun kant blijft dit bestand staan.
 */

/* ---------------------------------------------------------------------------
 * 1. De welkomsttekst ligt in een kader over de onderrand van de foto.
 *    Alleen op een breed scherm: op een telefoon is de foto te laag en zou de
 *    tekst hem helemaal afdekken.
 * ------------------------------------------------------------------------- */
/* De foto krijgt een hoogte die meebeweegt met het scherm. Zonder dit is hij
   altijd 560 pixels hoog en staat het welkomstkader op een laptop onder de vouw. */
.banner { margin-bottom: 0; }
.banner .main-image {
  display: block;
  width: 100%;
  height: clamp(200px, 36vh, 520px);
  object-fit: cover;
  object-position: center 40%;
}

/* Het kader ligt over de onderrand van de foto, op elk scherm. */
main#content .grid__welcome {
  position: relative;
  z-index: 2;
  margin-top: -4rem;
  margin-bottom: 1.75rem;
  max-width: 46rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-top: 0.375rem solid #F0C75E;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.22);
}

@media (min-width: 768px) {
  main#content .grid__welcome {
    margin-top: -8rem;
    margin-bottom: 2.5rem;
    padding: 1.75rem 2rem;
  }
}

main#content .grid__welcome .utrecht-heading-1 { margin-top: 0; }

/* De knop om inwoner te worden, direct onder het welkomstkader.
   De tekst-editor van Open Inwoner gooit eigen klassen weg, dus mikken we op de
   plek en op het adres: de eerste alinea in de inhoud, met een link naar de
   balie. Het pictogram voor een externe link past niet in een knop. */
main#content .grid__main > section.grid__welcome + p.nl-paragraph > a[href*="id.demostad.eu"] {
  display: inline-block;
  margin: -0.5rem 0 1.75rem;
  padding: 0.7rem 1.5rem;
  background: #2B5BA0;
  color: #fff !important;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
}
main#content .grid__main > section.grid__welcome + p.nl-paragraph > a[href*="id.demostad.eu"]:hover {
  background: #16305A;
}
main#content .grid__main > section.grid__welcome + p.nl-paragraph > a[href*="id.demostad.eu"] .material-icons,
main#content .grid__main > section.grid__welcome + p.nl-paragraph > a[href*="id.demostad.eu"] .sr-only {
  display: none;
}

/* De meebeslis-banner is een SVG. Zonder afmetingen laat de browser hem in
   sommige gevallen op nul uitkomen, dus zetten we ze hier vast. */
main#content .grid__main a > img[src$=".svg"] {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.5rem 0 2rem;
  border-radius: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * 2. De oproep om mee te beslissen als banner in plaats van als lopende tekst.
 *    De omhullende div komt uit meebeslissen-op-de-voorpagina.py.
 * ------------------------------------------------------------------------- */
.stem-banner {
  position: relative;
  margin: 2rem 0 2.5rem;
  padding: 1.75rem 2rem 1.75rem 2.75rem;
  background: linear-gradient(135deg, #2B5BA0 0%, #16305A 100%);
  color: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Het gouden randje links, en het wapen als groot watermerk rechts. */
.stem-banner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0.625rem;
  background: #F0C75E;
}

.stem-banner::after {
  content: "";
  position: absolute;
  right: -2rem;
  top: -1rem;
  width: 12rem;
  height: 14rem;
  background: url("/media/filer_public/wapen-demostad.svg") no-repeat center / contain;
  opacity: 0.09;
  pointer-events: none;
}

.stem-banner .utrecht-heading-2 {
  color: #fff;
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.stem-banner p {
  color: #fff;
  opacity: 0.95;
  max-width: 44rem;
}

.stem-banner em {
  color: #F0C75E;
  font-style: normal;
  font-weight: 600;
}

.stem-banner a.link {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.65rem 1.4rem;
  background: #F0C75E;
  color: #16305A !important;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
}

.stem-banner a.link:hover { background: #fff; }

/* Het pictogram dat Open Inwoner achter een externe link zet, past niet in een
   knop. */
.stem-banner a.link .material-icons,
.stem-banner a.link .sr-only { display: none; }