/* Overrides voor de webversie (index.html); poster.html/PDF laadt dit niet.
   Gedeeld door alle festivals; kleuren via de semantische slots uit theme.css. */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--nacht); }
.page {
  width: 100%; max-width: 880px; height: auto; min-height: 100vh;
  margin: 0 auto; box-shadow: 0 0 70px rgba(0, 0, 0, 0.5);
}

/* Desktop: de poster is op printformaat ontworpen (11px basistekst), dus
   op brede schermen schalen we het geheel op naar website-formaat. */
@media (min-width: 1060px) and (max-width: 1359.9px) {
  .page { zoom: 1.18; }
}
@media (min-width: 1360px) {
  .page { zoom: 1.5; }
}

/* Deelbalk in de pixelstijl van de poster */
.deelbar {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  display: flex; align-items: center; gap: 10px;
  background: var(--licht);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  padding: 9px 13px;
  zoom: 1 !important;
}
.deel-label { font-family: var(--f-pix); font-weight: 700; font-size: 12px; color: var(--donker); }
.deel-knop {
  border: none; width: 36px; height: 36px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.deel-knop svg { width: 18px; height: 18px; display: block; fill: var(--licht); }
#deelTwitter { background: var(--donker); }
#deelInsta { background: var(--signaal); }
.deel-knop:active { transform: translateY(2px); }
.deel-knop:disabled { opacity: 0.6; cursor: wait; }
.deel-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(10px);
  z-index: 71; max-width: 90vw;
  background: var(--licht); color: var(--ink);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  font-size: 13px; font-weight: 500; padding: 10px 16px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.deel-toast.zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Mobiel: stapelen en tekst vergroten. */
@media (max-width: 680px) {
  .kop { padding: 20px 16px 0; }
  .merk { font-size: 32px; }
  .merk .jaar { font-size: 23px; }
  .kop-info { padding: 4px 40px 0 0; }
  .kop-info .onderwerp { font-size: 12px; }
  .kop-info .regels { font-size: 8px; line-height: 2; margin-top: 6px; }
  .hoeksticker { width: 36px; height: 36px; }
  .hoeksticker svg { width: 13px; height: 16px; }

  .verdictblok { padding: 22px 16px 0; }
  #verdictKop { font-size: 17px; line-height: 1.4; }
  #verdictTekst { font-size: 15px; line-height: 1.55; }

  .dagen { padding: 0 16px; }
  .kolommen { grid-template-columns: 1fr; }
  .kolom { padding: 18px 6px; }
  .kolom + .kolom { border-left: none; border-top: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
  .kolom .dagnaam { font-size: 16px; }
  .kolom .datum { font-size: 12px; }
  .kolom .icon { width: 124px; height: 124px; }
  .kolom .temp { font-size: 52px; }
  .kolom .temp .gr { font-size: 30px; vertical-align: 13px; }
  .kolom .nacht { font-size: 13px; }
  .kolom .conditie { font-size: 10.5px; margin-top: 10px; }
  .kolom .kans { font-size: 13.5px; }
  .kolom .drops svg { width: 66px; height: 15px; }

  .grafieken { grid-template-columns: 1fr; gap: 22px; padding: 0 16px; }
  .grafieken > div { min-width: 0; }
  .grafieken h2 { font-size: 14px; }
  .scrollwrap { overflow-x: auto; }
  .scrollwrap svg { min-width: 540px; }
  .mmlegende { font-size: 11.5px; gap: 4px 12px; }
  .mmlegende .dr { width: 46px; height: 11px; }
  .mmlegende .uitleg-mm { font-size: 10px; }

  .onder { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; padding: 0 16px 12px; }
  .onder h2 { font-size: 14px; }
  .reisrij { gap: 12px; padding: 6px 0 8px; }
  .reisrij img { width: 38px; height: 38px; }
  .reisrij .rol { font-size: 10.5px; }
  .reisrij .feiten { font-size: 13px; }
  .reisrij .zin { font-size: 12px; }
  .buienregel { grid-column: 1; font-size: 12px; margin-top: 4px; }
  .onder #silhouet { position: static; grid-column: 1; justify-self: end; width: 150px; height: 230px; margin: -10px 4px -12px 0; }

  footer { padding: 12px 16px 10px; }
  footer .rij { flex-wrap: wrap; }
  footer .fan { font-size: 8px; }
  footer .site { font-size: 10px; }
  footer .uitleg { font-size: 9.5px; }
}