/* Poster builder — screen controls + a print-ready A4 poster.
   Loaded only by poster.php. Reuses the theme variables from style.css. */

/* ---------------------------------------------------------------- controls */

.poster-controls {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  margin-bottom: 1.5rem;
}
.poster-controls .field { display: flex; flex-direction: column; gap: .35rem; }
.poster-controls label { font-weight: 600; color: var(--ink); font-size: .95rem; }
.poster-controls select {
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.poster-controls select:disabled { opacity: .55; cursor: not-allowed; }

.poster-print-btn {
  padding: .7rem 1.4rem;
  border: 0;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--navy-deep);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
}
.poster-print-btn:hover:not(:disabled) { background: var(--yellow-dark); }
.poster-print-btn:disabled { opacity: .45; cursor: not-allowed; }

.poster-hint { color: var(--body); font-size: .95rem; margin: -.5rem 0 1.25rem; }

@media (max-width: 640px) {
  .poster-controls { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ poster */

.poster-stage {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0 2.5rem;
}

/* A4 landscape sheet (297:210) holding two A5 posters side by side. */
.poster-sheet {
  display: flex;
  gap: 6mm;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 297 / 210;
}

/* Each poster is half the landscape sheet = A5 portrait (210:297). */
/* Plain white with a box border — keeps printer ink to a minimum. */
.poster {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 210 / 297;
  background: #fff;
  color: var(--ink);
  border: 10px solid var(--yellow);   /* orange box border on all four sides */
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4% 7% 0;
}

.poster-logo {
  width: 44%;
  max-width: 175px;
  height: auto;
  margin-top: 0;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

.poster-headline {
  margin: .5% 0;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.02;
  color: var(--yellow-dark);   /* whole headline orange, readable on white */
}
.poster-headline .accent { color: var(--yellow-dark); }

.poster-sub {
  font-size: clamp(.85rem, 3vw, 1.02rem);
  line-height: 1.35;
  color: var(--body);
  min-height: 2.2em;
  max-width: 90%;
}

/* Thin border gives the QR a clean edge and its own quiet zone on white. */
.poster-qr {
  margin: 3% 0 2%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3%;
  width: 47%;
  max-width: 195px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.poster-qr-img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;   /* keep modules crisp at any print size */
}
.poster-qr-placeholder {
  color: var(--navy-soft);
  font-weight: 700;
  font-size: .9rem;
  padding: 1rem;
}
.poster-qr-fail { color: #b00020; font-weight: 600; }

.poster-scan {
  font-size: clamp(.95rem, 3.4vw, 1.15rem);
  font-weight: 700;
  color: var(--navy);
}
.poster-scan .accent { color: var(--yellow-dark); }

.poster-url {
  margin-top: auto;
  margin-bottom: 5%;
  padding: 2% 0 0;
  font-size: clamp(1rem, 4vw, 1.3rem);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--navy);
}

/* Before a town is picked, show the placeholder text instead of a QR. */
.poster-sheet:not(.is-ready) .poster-qr-img { display: none; }
.poster-sheet.is-ready .poster-qr-placeholder { display: none; }

/* ------------------------------------------------------------------- print */

@media print {
  @page { size: A4 landscape; margin: 8mm; }

  .site-header,
  .site-footer,
  .poster-controls,
  .poster-hint,
  .crumbs,
  .panel-head { display: none !important; }

  body { background: #fff; }
  main.wrap { max-width: none; padding: 0; margin: 0; }
  .panel { border: 0; box-shadow: none; padding: 0; margin: 0; }
  .poster-stage { padding: 0; }

  /* Fill the landscape page with the two-poster sheet. */
  .poster-sheet {
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    gap: 8mm;
  }

  .poster {
    aspect-ratio: auto;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    /* Force the theme colours to actually print. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}