/* ==========================================================================
   Country Car Show — print-qr.css
   --------------------------------------------------------------------------
   Page-scoped styles for the printable QR flyer ONLY. In the original static
   site these rules lived in a <style> block inside print-qr.html (the single
   documented exception to "no page-specific CSS"). In the WordPress theme they
   are bundled here and enqueued by functions.php ONLY when the
   "Printable QR Flyer" page template (template-print-qr.php) is in use, so
   they never affect any other page. Everything is namespaced under .qr-flyer.

   These rules reference the custom properties (--space-*, --color-*,
   --font-*) defined in :root in site.css, which is always loaded first.
   ========================================================================== */

/* Centered flyer panel — large QR with the show name, date and URL. */
.qr-flyer {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.qr-flyer-title {
  margin-bottom: var(--space-xs);
}
.qr-flyer-date {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent);
  font-size: clamp(18px, 3vw, 22px);
  margin: 0 0 var(--space-lg);
}
/* The QR itself — ~320px on screen, centered. The SVG scales crisply. */
.qr-flyer-code {
  width: 320px;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--space-md);
}
.qr-flyer-caption {
  font-weight: 700;
  margin-bottom: var(--space-xxs);
}
/* Plain-text URL so it works even if someone cannot scan the code. */
.qr-flyer-url {
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-lg);
}
/* Screen-only helper line + print button (hidden when printing). */
.qr-flyer-actions {
  margin-top: var(--space-md);
}
.qr-flyer-hint {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* PRINT: the global print CSS in site.css already hides the site
   header, nav and footer. Here we make the flyer fill the page,
   enlarge the QR for easy scanning, and hide the screen-only actions. */
@media print {
  .qr-flyer {
    max-width: none;
  }
  .qr-flyer-code {
    width: 4.5in;   /* large, scannable QR on a printed sheet */
  }
  .qr-flyer-actions {
    display: none;  /* no buttons / hints on the printed copy */
  }
}