/* Shared flyer utilities — extends brook-tokens.css */

:root {
  /* Werton-inspired warm accents to sit alongside Brook navy/gold */
  --werton-teal: #0f7a7a;
  --werton-teal-deep: #0a5a5a;
  --werton-orange: #e85a1a;
  --werton-orange-soft: #f28a4a;
  --jcc-purple: #5b2a86;

  /* Page metrics — A4 at 96dpi */
  --a4-w: 794px;
  --a4-h: 1123px;
}

html, body {
  margin: 0;
  padding: 0;
  background: #d9d5cc;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  gap: 40px;
  grid-auto-flow: row;
}

.a4 {
  width: var(--a4-w);
  height: var(--a4-h);
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(11, 31, 58, 0.35),
              0 12px 28px -12px rgba(11, 31, 58, 0.22);
  border-radius: 2px;
}

/* Reset headings/paragraphs inside flyers */
.a4 h1, .a4 h2, .a4 h3, .a4 h4, .a4 p, .a4 ul, .a4 ol {
  margin: 0;
  padding: 0;
}
.a4 ul { list-style: none; }

/* Print — one flyer per page */
@media print {
  html, body { background: #fff; }
  .stage { display: block; padding: 0; gap: 0; }
  .a4 {
    box-shadow: none;
    border-radius: 0;
    page-break-after: always;
    break-after: page;
    margin: 0 auto;
  }
  .a4:last-of-type { page-break-after: auto; break-after: auto; }
  .picker { display: none !important; }
}

/* Picker chrome */
.picker {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(11, 31, 58, 0.96);
  color: #F6F4EE;
  padding: 10px 14px;
  border-radius: 999px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 12px 32px -8px rgba(11,31,58,0.5);
}
.picker button {
  appearance: none;
  border: 1px solid rgba(200,162,75,0.4);
  background: transparent;
  color: inherit;
  padding: 8px 14px;
  border-radius: 999px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.picker button:hover { border-color: #C8A24B; }
.picker button.active {
  background: #C8A24B;
  color: #0B1F3A;
  border-color: #C8A24B;
  font-weight: 600;
}
.picker .picker-label { opacity: 0.7; padding-right: 6px; }