/* Overrides voor de webversie (index.html); poster.html/PDF laadt dit niet. */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--donkerpaars); }
.page {
  width: 100%; max-width: 880px; height: auto; min-height: 100vh;
  margin: 0 auto; box-shadow: 0 0 70px rgba(0, 0, 0, 0.4);
  background: var(--cream);
}

/* 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 */
.deelbar {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  background: var(--donkerpaars); border: 3px solid var(--schaduw);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
  padding: 10px 14px;
  zoom: 1 !important;
}
.deel-label { font-family: 'Silkscreen', monospace; font-weight: 700; font-size: 13px; color: var(--lila); }
.deel-knop {
  border: none;
  padding: 9px 12px; cursor: pointer; box-shadow: 3px 3px 0 var(--schaduw);
  display: inline-flex; align-items: center; justify-content: center;
}
.deel-knop svg { width: 18px; height: 18px; display: block; fill: #fff; }
#deelTwitter { background: #1DA1F2; }
#deelInsta { background: radial-gradient(circle at 30% 110%, #FEDA75, #FA7E1E 40%, #D62976 65%, #962FBF 85%, #4F5BD5); }
.deel-knop:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--schaduw); }
.deel-knop:disabled { opacity: 0.6; cursor: wait; }
#deelInsta { background: var(--paars); }
.deel-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(10px);
  z-index: 51; max-width: 90vw;
  background: var(--lila); color: var(--ink); border: 3px solid var(--donkerpaars);
  box-shadow: 4px 4px 0 var(--schaduw);
  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) {
  .groot, .klein, .uitleg, .mm-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(36px, 13vw, 63px); text-shadow: 3px 3px 0 var(--donkerpaars); }
  .hero .boven { font-size: 13px; }
  .hero .onder { font-size: 10px; }
  .hero, .verdict, .dagen, .uitleg, .mmblok, footer { padding-left: 16px; padding-right: 16px; }

  .verdict .kop { font-size: 19px; }
  .verdict p { font-size: 15px; max-width: none; }

  .dagen h2 { font-size: 15px; }
  .dagen h3 { font-size: 13px; }
  .kaart .dag { font-size: 17px; }
  .kaart .icon { width: 96px; height: 80px; }
  .kaart .temp { font-size: 44px; }
  .kaart .temp .gr { font-size: 34px; vertical-align: 9px; }
  .kaart .nacht { font-size: 13px; }
  .kaart .kans { font-size: 15px; }
  .kaart .zin { font-size: 14px; }
  .kaart .drops svg { width: 54px !important; height: 16px !important; }

  .strook .icon { width: 64px; height: 60px; }
  .strook .rol { font-size: 11px; }
  .strook .feiten { font-size: 14px; }
  .strook .zin { font-size: 12.5px; }

  .uitleg h2, .mmblok h2 { font-size: 15px; }
  .uitleg > div { overflow-x: auto; }
  .uitleg svg { min-width: 560px; }
  .mm-intro { font-size: 13px; }
  .mmblok .kopregel { flex-direction: column; gap: 4px; }
  .mm-item .mm { font-size: 13px; }
  .mm-item .txt { font-size: 13px; }
  .mm-item .dr { width: 66px; height: 17px; }

  footer { font-size: 11px; }
}