/* Printable Shabbat flyer: one US Letter page (8.5in × 11in = 816 × 1056 CSS px), in the website's own look:
   salt white, navy and gold, Fraunces and Albert Sans. A navy frame with a gold keyline inside it, the interlaced
   star, the title, a hairline with the star at its centre, then the times. */
@page { size: letter; margin: 0; }

:root {
  --ink: #141b33; --ink-2: #363d55; --muted: #646a7e;
  --bronze: #17224a; --bronze-dk: #17224a; --bronze-lt: #d9bd7c; --gold: #c39a3e; --gold-text: #8a6a22;
  --stone: #eef0f4; --line: rgba(20, 27, 51, .14);
  --k: 1; /* content scale, set by print.js so everything fits on one page */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none; }
body {
  background: #e3e6ee; color: var(--ink);
  font-family: "Albert Sans", system-ui, sans-serif;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ---------- Screen toolbar ---------- */
.toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--ink); color: #dfe3ee; font: 500 14px/1.2 "Albert Sans", system-ui, sans-serif; }
.toolbar a { color: inherit; }
.tb-back { text-decoration: none; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-btn { white-space: nowrap; flex: none; }
.tb-back:hover { opacity: 1; }
.tb-note { opacity: .7; }
.tb-spacer { flex: 1; }
.tb-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid #e2c37a; background: #e2c37a; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.tb-btn:hover { background: #fff; border-color: #fff; }
.tb-ghost { background: transparent; color: #dfe3ee; border-color: rgba(226, 195, 122, .5); }
.tb-ghost:hover { background: rgba(226, 195, 122, .12); color: #fff; border-color: #e2c37a; }
@media (max-width: 560px) { .tb-note { display: none; } .toolbar { gap: 8px; padding: 8px 10px; } .tb-btn { padding: 0 12px; } }

/* ---------- Stage (screen preview, scaled to fit) ---------- */
.stage { padding: 28px 16px 48px; display: flex; justify-content: center; overflow: hidden; } /* keeps phones from zooming out before the sheet is scaled */
.sheet-wrap { width: calc(816px * var(--view, 1)); height: calc(1056px * var(--view, 1)); }
.sheet-wrap > .sheet { transform: scale(var(--view, 1)); transform-origin: top left; }

/* ---------- The sheet ---------- */
.sheet { position: relative; overflow: hidden; width: 816px; height: 1056px; background: #fff; box-shadow: 0 18px 50px rgba(24, 33, 47, .2); }
.frame { position: absolute; inset: 24px; border: 3px solid var(--bronze); pointer-events: none; }
.frame::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--gold); }
.bsd { position: absolute; right: 50px; top: 46px; font: 500 15px/1 "Noto Serif Hebrew", serif; color: var(--bronze-dk); }

.heading { position: absolute; left: 60px; right: 60px; top: 58px; text-align: center; }
.logo { display: block; height: 58px; width: auto; margin: 0 auto 10px; }
.shul { margin: 0; font: 400 17px/1.2 "Fraunces", Georgia, serif; color: var(--gold-text); letter-spacing: .01em; }
.title { margin: 14px 0 0; font: 300 54px/1.02 "Fraunces", Georgia, serif; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.date { margin: 8px 0 0; font: 400 17px/1.3 "Albert Sans", sans-serif; color: var(--ink-2); }
.ring { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px auto 0; width: 220px; color: var(--bronze); }
.ring::before, .ring::after { content: ""; flex: 1; height: 1px; background: var(--bronze-lt); }
.ring i { width: 14px; height: 16px; background: url(/images/logo-star.svg) center / contain no-repeat; }

.content { position: absolute; left: 118px; right: 118px; top: 318px; bottom: 92px; display: flex; flex-direction: column; gap: calc(22px * var(--k)); }

/* A section: a Marcellus heading in bronze, then name and time on hairlines. */
.panel { break-inside: avoid; }
.panel-head { margin: 0 0 calc(4px * var(--k)); padding-bottom: calc(6px * var(--k)); border-bottom: 1px solid var(--gold); font: 400 calc(23px * var(--k))/1.15 "Fraunces", Georgia, serif; color: var(--bronze-dk); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: calc(6.5px * var(--k)) 0; border-bottom: 1px solid var(--line); }
.rows li > span:first-child { font: 400 calc(16.5px * var(--k))/1.3 "Albert Sans", sans-serif; color: var(--ink); }
.rows li > span + span { font: 400 calc(19px * var(--k))/1.2 "Fraunces", Georgia, serif; color: var(--ink); white-space: nowrap; text-align: right; }
.rows li > span + span.long { white-space: normal; font: 500 calc(14.5px * var(--k))/1.35 "Albert Sans", sans-serif; max-width: 58%; }
.rows .with { display: block; font-size: .82em; color: var(--muted); }
.rows li.hl > span:first-child { font-weight: 600; }
.rows li.hl > span + span { color: var(--bronze-dk); }

.callout { break-inside: avoid; margin-top: calc(4px * var(--k)); padding: calc(12px * var(--k)) 20px; background: var(--stone); border-radius: 14px; text-align: center; }
.callout h2 { margin: 0 0 4px; font: 400 calc(19px * var(--k))/1.2 "Fraunces", Georgia, serif; color: var(--bronze-dk); }
.callout p { margin: 3px 0 0; font: 400 calc(15px * var(--k))/1.4 "Albert Sans", sans-serif; color: var(--ink); }

.foot { position: absolute; left: 60px; right: 60px; bottom: 50px; text-align: center; white-space: nowrap; font: 500 12.5px/1 "Albert Sans", sans-serif; color: var(--ink-2); letter-spacing: .02em; }

.empty-msg { margin: 24px 0; font: 400 20px/1.4 "Fraunces", Georgia, serif; text-align: center; color: var(--ink-2); }

/* ---------- Print / PDF ---------- */
@media print {
  body { background: #fff; }
  .toolbar { display: none !important; }
  .stage { padding: 0; display: block; }
  .sheet-wrap { width: auto; height: auto; }
  .sheet-wrap > .sheet { transform: none; }
  .sheet { box-shadow: none; width: 8.5in; height: 11in; }
}
body.pdf { background: #fff; }
body.pdf .toolbar { display: none; }
body.pdf .stage { padding: 0; display: block; }
body.pdf .sheet { box-shadow: none; }

/* Lining figures everywhere (the "font" shorthand above resets this, so set it last). */
.sheet, .sheet * { font-variant-numeric: lining-nums !important; }