/* Tulostettava kutsujuliste.
   Oma tiedostonsa, ei osa sovelluksen tyylejä: sivu menee paperille eikä
   ruudulle, eikä siihen saa vuotaa navigaatiota. Värit ovat silti sovelluksen
   omat — tokenit on toistettu tässä, koska application.css:n tuominen
   mukanaan raahaisi koko käyttöliittymän tyylit tulosteeseen. Lähde on
   application.css:n :root, ja arvot on pidettävä sen kanssa samoina. */

.poster-body {
  --poster-primary:      #2563eb; /* --color-primary */
  --poster-primary-dark: #1d4ed8; /* --color-primary-dark */
  --poster-neutral:      #64748b; /* --color-neutral */
  --poster-bg:           #f8fafc; /* --color-bg */
  --poster-surface:      #ffffff; /* --color-surface */
  --poster-border:       #cbd5e1; /* --color-border-strong */
  --poster-text:         #1e293b; /* --color-text */
  --poster-text-muted:   #64748b; /* --color-text-muted */
  --poster-inverse:      #ffffff; /* --color-text-inverse */

  /* Tähdet jäävät kullalle: ne ovat arvostelun yleiskieltä eivätkä
     sovelluksen brändiä.

     Laatikko on tumma eikä sininen. Kulta sinisellä jää noin 2,7:1
     kontrastiin ja latistuu; sovelluksen tummalla se on yli 6:1 ja tähdet
     hyppäävät esiin kuten puisessa esikuvassa. */
  --poster-star:         #f5b301;
  --poster-star-box:     #1e293b; /* --color-text */

  --poster-radius:       8px;     /* --radius */
  --poster-radius-sm:    4px;     /* --radius-sm */
}

.poster-body {
  background: var(--poster-bg);
  color: var(--poster-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  padding: 24px;
}

.poster-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}

.poster-actions button,
.poster-actions a {
  background: var(--poster-primary);
  border: 0;
  border-radius: var(--poster-radius);
  color: var(--poster-inverse);
  cursor: pointer;
  font-size: 15px;
  padding: 10px 20px;
  text-decoration: none;
}

.poster-actions button:hover { background: var(--poster-primary-dark); }
.poster-actions a { background: var(--poster-neutral); }

/* Arkki. Mitat millimetreinä, koska tuloste on fyysinen. */
.poster-sheet {
  background: var(--poster-surface);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 14mm;
}

.poster-body--a4 .poster-sheet { height: 297mm; width: 210mm; }
.poster-body--a5 .poster-sheet { height: 210mm; width: 148mm; }

/* Kaksoisviivakehys kuten puisessa esikuvassa. */
.poster-frame {
  border: 3px solid var(--poster-primary);
  box-sizing: border-box;
  height: 100%;
  outline: 1px solid var(--poster-border);
  outline-offset: 5px;
  padding: 10mm;
}

.poster-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  text-align: center;
}

.poster-heading {
  background: var(--poster-primary);
  border-radius: var(--poster-radius);
  color: var(--poster-inverse);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
  margin: 0;
  padding: 0.22em 0.5em;
  text-transform: uppercase;
}

/* Mitoitettu niin että "Jätä arvostelu" mahtuu yhdelle riville. Pidempi
   käännös saa katketa kahdelle — palkki kestää sen. */
.poster-body--a4 .poster-heading { font-size: 46px; }
.poster-body--a5 .poster-heading { font-size: 30px; }

.poster-stars {
  display: flex;
  gap: 6px;
  margin-top: 6mm;
}

.poster-star {
  align-items: center;
  background: var(--poster-star-box);
  border-radius: var(--poster-radius-sm);
  color: var(--poster-star);
  display: flex;
  justify-content: center;
}

.poster-body--a4 .poster-star { font-size: 38px; height: 56px; width: 56px; }
.poster-body--a5 .poster-star { font-size: 25px; height: 37px; width: 37px; }

.poster-qr { margin-top: 8mm; }
.poster-qr svg { display: block; height: auto; }

.poster-body--a4 .poster-qr svg { width: 92mm; }
.poster-body--a5 .poster-qr svg { width: 66mm; }

.poster-scan {
  background: var(--poster-primary);
  border-radius: var(--poster-radius);
  color: var(--poster-inverse);
  font-weight: 600;
  margin-top: 6mm;
  padding: 0.3em 0.9em;
}

.poster-body--a4 .poster-scan { font-size: 24px; }
.poster-body--a5 .poster-scan { font-size: 17px; }

.poster-org {
  color: var(--poster-text-muted);
  margin-top: 6mm;
}

.poster-body--a4 .poster-org { font-size: 18px; }
.poster-body--a5 .poster-org { font-size: 13px; }

/* Tulostus: arkin koko kerrotaan selaimelle, jotta tulostusikkuna avautuu
   valmiiksi oikealla paperilla eikä käyttäjän tarvitse arvata. */
@page { margin: 0; }

@media print {
  .poster-actions { display: none; }
  .poster-body { background: var(--poster-surface); padding: 0; }
  .poster-sheet { box-shadow: none; margin: 0; }
}