/* Public 50/50 styles. Reuses the child theme's design tokens so the raffle
   looks native; falls back to literal values if the theme ever changes. */
.boh-5050 {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) 20px;
  text-align: center;
}
.boh-5050__headline {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--boh-ink, #1F1A24);
  margin: 8px 0 12px;
}
.boh-5050__headline em { color: var(--boh-magenta, #D01482); font-style: normal; }
.boh-5050__lede { font-size: 17px; line-height: 1.6; color: var(--boh-ink-soft, #6B5F73); max-width: 62ch; margin: 0 auto 28px; }

.boh-5050__totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 0 auto 8px;
  max-width: 760px;
}
.boh-5050__stat {
  background: #fff;
  border: 1px solid rgba(31,26,36,0.08);
  border-radius: 18px;
  padding: 20px 16px;
  box-shadow: 0 8px 22px -12px rgba(31,26,36,0.25);
}
.boh-5050__stat b { display: block; font-size: 28px; font-weight: 800; color: var(--boh-ink, #1F1A24); }
.boh-5050__stat span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--boh-ink-mute, #8A8391); }
/* The prize is the emotional centre, so it gets the brand magenta. Not colour
   alone: it is also the largest number and is labelled "Winner receives". */
.boh-5050__stat--prize { background: var(--boh-magenta, #D01482); border-color: transparent; }
.boh-5050__stat--prize b,
.boh-5050__stat--prize span { color: #fff; }

.boh-5050__updated { font-size: 12px; color: var(--boh-ink-mute, #8A8391); margin-bottom: 28px; }

.boh-5050__packages { border: 0; padding: 0; margin: 0 auto 20px; max-width: 560px; }
.boh-5050__packages legend {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.10em;
  font-weight: 800; color: var(--boh-ink, #1F1A24); margin-bottom: 10px;
}
.boh-5050__package {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid rgba(31,26,36,0.10); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 10px; cursor: pointer; text-align: left;
}
.boh-5050__package:has(input:checked) { border-color: var(--boh-magenta, #D01482); background: rgba(208,20,130,0.04); }
.boh-5050__package:focus-within { outline: 3px solid var(--boh-magenta, #D01482); outline-offset: 2px; }
.boh-5050__package-label { flex: 1 1 auto; font-weight: 700; }
.boh-5050__package-price { font-weight: 800; color: var(--boh-magenta, #D01482); }

.boh-5050__buy label { display: inline-block; text-align: left; font-size: 14px; }
.boh-5050__buy input[type=text],
.boh-5050__buy input[type=email],
.boh-5050__buy input[type=tel] {
  width: 100%; max-width: 420px; padding: 11px 14px;
  border: 1px solid rgba(31,26,36,0.18); border-radius: 10px; font-size: 16px;
}
.boh-5050__cta {
  display: inline-block; margin-top: 10px; padding: 15px 34px;
  background: var(--boh-magenta, #D01482); color: #fff;
  border: 0; border-radius: 999px; font-weight: 800; font-size: 16px; cursor: pointer;
}
.boh-5050__cta:hover { background: var(--boh-magenta-deep, #C2005F); }
.boh-5050__cta:focus-visible { outline: 3px solid var(--boh-ink, #1F1A24); outline-offset: 3px; }

.boh-5050__fineprint { font-size: 12px; line-height: 1.6; color: var(--boh-ink-mute, #8A8391); max-width: 60ch; margin: 16px auto 0; }
.boh-5050__closed { font-size: 18px; font-weight: 700; padding: 22px; background: rgba(31,26,36,0.04); border-radius: 14px; }

.boh-5050__impact { margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(31,26,36,0.10); }
.boh-5050__impact ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
.boh-5050__impact b { display: block; font-size: 26px; font-weight: 800; color: var(--boh-magenta, #D01482); }

.boh-5050-bar {
  background: var(--boh-magenta, #D01482); color: #fff; text-align: center;
  font-weight: 700; font-size: 14px; padding: 10px 16px;
}
.boh-5050-bar a { color: #fff; text-decoration: none; }
.boh-5050-bar a:hover { text-decoration: underline; }

/* Test mode must never be mistakable for the real thing. */
.boh-5050-testbanner {
  background: #1F1A24; color: #f9d135; text-align: center;
  font-weight: 800; letter-spacing: 0.12em; font-size: 13px; padding: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .boh-5050 * { transition: none !important; animation: none !important; }
}

/* ── Ticket motif ────────────────────────────────────────────────────
   Mirrors the printed 50/50 ticket: magenta header block with the brand
   and a yellow year, a soft-pink stub below, and a perforation between
   them. Decorative (aria-hidden) — every fact shown here also appears as
   real text on the page, so a screen reader loses nothing. */
.boh-5050__ticket {
  max-width: 520px;
  margin: 0 auto 32px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px -18px rgba(31,26,36,0.45);
  text-align: left;
  font-family: 'Montserrat', system-ui, sans-serif;
}
.boh-5050__ticket-head {
  background: var(--boh-magenta, #D01482);
  color: #fff;
  padding: 22px 26px 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.boh-5050__ticket-brand {
  font-size: clamp(20px, 3.4vw, 27px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.boh-5050__ticket-year {
  font-size: clamp(20px, 3.4vw, 27px);
  font-weight: 800;
  color: var(--boh-yellow, #f9d135);
}
/* Perforation: a dashed rule with a notch punched out of each edge. */
.boh-5050__ticket-stub {
  position: relative;
  background: #FCE7F3;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  border-top: 2px dashed rgba(208,20,130,0.35);
}
.boh-5050__ticket-stub::before,
.boh-5050__ticket-stub::after {
  content: '';
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--boh-paper, #fff);
}
.boh-5050__ticket-stub::before { left: -13px; }
.boh-5050__ticket-stub::after  { right: -13px; }

.boh-5050__ticket-title {
  font-size: clamp(24px, 4.2vw, 34px);
  font-weight: 800;
  color: var(--boh-magenta, #D01482);
  letter-spacing: 0.01em;
}
.boh-5050__ticket-prices {
  font-size: 15px;
  font-weight: 600;
  color: var(--boh-magenta-deep, #C2005F);
}
.boh-5050__ticket-draw {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--boh-ink, #1F1A24);
}

@media (max-width: 480px) {
  .boh-5050__ticket-head { flex-direction: column; gap: 4px; }
}

/* The bar is fixed above the theme's fixed header rather than emitted into
   normal flow beneath it, which previously left only a coloured sliver
   visible. The header is nudged down by the bar's height so the two stack
   instead of overlapping. */
.boh-5050-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;              /* theme header is 100 */
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boh-has-5050-bar #masthead.boh-header { top: 38px; }
.admin-bar.boh-has-5050-bar .boh-5050-bar { top: 32px; }
.admin-bar.boh-has-5050-bar #masthead.boh-header { top: 70px; }
/* Preview is staff-only; make that unmistakable rather than relying on the
   word alone. */
.boh-5050-bar--preview { background: var(--boh-ink, #1F1A24); }
.boh-5050-bar--preview a { color: var(--boh-yellow, #f9d135); }
@media (max-width: 600px) {
  .boh-5050-bar { height: 34px; font-size: 12px; }
  .boh-has-5050-bar #masthead.boh-header { top: 34px; }
}